Styleguide

Colors

The complete palette — Tailwind defaults are cleared, nothing outside this set exists as a utility.

• Ultramarinblau

  blue

• Pompeii Red

  red

• Mango Orange

  orange

• Nature Apricot

  apricot

• Primrose Yellow

  yellow

• Violet Scent

  violet

• Frosty White Blue

  frost

• White

  white

• Black

  black

Type scale

Suisse Int'l — 600 for everything, 400 for body copy (system fallback until the webfont license lands). Leading is baked into each step: 0.9 display, 1.0 headings/UI, relaxed body.

• text-8xl · 96 / 86 · display stats

  Ontwerp de toekomst. Vandaag.

• text-7xl · 80 / 72 · page heroes

  Ontwerp de toekomst. Vandaag.

• text-6xl · 72 / 65 · stat statements

  Ontwerp de toekomst. Vandaag.

• text-5xl · 56 / 50 · big statement blocks

  Ontwerp de toekomst. Vandaag.

• text-4xl · 40 / 40 · section headings

  Ontwerp de toekomst. Vandaag.

• text-3xl · 32 / 32 · menu-overlay items

  Ontwerp de toekomst. Vandaag.

• text-2xl · 24 / 24 · card titles

  Ontwerp de toekomst. Vandaag.

• text-xl · 20 / 20 · nav, leads, card meta

  Ontwerp de toekomst. Vandaag.

• text-lg · 18 / 22 · body copy (400) · buttons (600)

  Ontwerp de toekomst. Vandaag.

• text-base · 16 / 16 · footer nav, form labels

  Ontwerp de toekomst. Vandaag.

• text-sm · 14 / 14 · chips, logo-wall labels

  Ontwerp de toekomst. Vandaag.

Containers

Spacing

Stock 4px grid — these steps recur throughout the design.

• 8
• 16
• 20
• 24
• 32
• 40
• 48
• 56

Radii

• rounded-lg · 8 — chips

• rounded-xl · 12 — tiles, inputs

• rounded-2xl · 16 — cards

Elevation

One brand shadow — overlay panels (dropdown, menu top, sticky menu).

UI kit · Buttons

12px radius, 40×16 padding, 18/600 label (small: 16/600). The outline variant draws border and label from currentColor — each panel below only sets a text color, the button follows.

UI kit · Chips

16/600 on the 8px radius, 2px stroke. Solid for partner badges, outline for status/deadline/filter terms; muted is the faded state, as="button" the interactive one (filter module, M2). Card labels use size="sm" (14/600).

UI kit · Dropdown

Disclosure panel that overlays in place, repeating the trigger with the caret flipped. Escape and outside clicks close it.

UI kit · Card shell

The 378×532 listing card: media fills the shell, label + 24/600 title sit bottom-left on a legibility gradient. The card label is an outline-white UiChip (size sm). Variants (news, praktijk, team) land with their collections (M1+).