Skip to content
Sign in

Brand

The Dandex design system on one page. It has a light and a dark theme, and each reader gets the one their system is set to.

The rules behind it are in the design document. Pages outside this site use the standalone stylesheet.

Wordmark

Dandex
Wordmark for a light floorDownload SVG
Dandex
Wordmark for a dark floorDownload SVG

Keep clear space around the wordmark equal to the height of the mark. Do not recolour it, outline it, stretch it or draw it under 16px tall.

Colour

One floor, one text colour and translucent layers of that text colour for every surface and rule, so a surface reads the same over any part of the floor. Colour beyond that carries meaning only. These swatches are drawn in the theme your system is set to.

  • Floor

    bg-floor

  • Text

    text-foreground

  • Secondary text

    text-muted-foreground

  • Resting surface

    bg-foreground/5

  • Hover surface

    bg-foreground/10

  • Hairline

    border-hairline

  • Border

    border-foreground/10

  • Primary action

    bg-primary

  • Positive

    text-success

  • Warning

    text-warning

  • Information

    text-info

  • Negative

    text-destructive

Type

Two typefaces. Bellefair is the display serif, once per viewport, for the title. Figtree is the sans for everything else, with tabular numerals wherever figures stand in a column.

Danish Company Data
headline, Bellefair
Who is behind it
page-title, Bellefair
A major section turn
heading-24, Figtree
A section on an entity page
heading-18, Figtree
One short passage that says what the page holds.
lede, Figtree
Reading prose, with the Danish letters æ, ø and å.
body, Figtree
The interface default: 1,234,567.8
compact, Figtree
Field names and table headers
label, Figtree
Dates, counts and captions
metadata, Figtree

Shape

  • Pill

    Buttons, inputs, badges

  • Card

    Cards, dialogs, sheets

  • Large

    Tab triggers, textareas

  • Base

    Notes, code blocks

Controls

Every button, input and select has one height, so controls side by side line up. A page has one filled action at most; the rest are outlined, ghosted or links.

New companyDissolved after mergerDirector changeAddress change

Notes

Neutral
An aside set apart from the page.
Information
Something the reader should know before going on.
Success
An action went through.
Warning
Something is pending or needs a look.
Error
What went wrong, and what to do about it.

Data

Facts sit in rows under one hairline, labels in one column. Figures are right-aligned with tabular numerals, years run oldest to newest, and a signed figure carries its sign in the text as well as in colour.

Company
IEX ApS CVR 35527710
Legal form
Private limited company (ApS)
Founded
28 October 2013
Example figure table: IEX ApS, DKK thousands
DKK thousands2022202320242025
Gross profit6,4366,4237,1188,396
Profit for the year1,3489321,3031,232
Change in profit-30.9%+39.9%-5.5%

IEX ApS, annual reports 2022 to 2025, XBRL.