Component Workshop

Foundations

Design tokens and brand primitives for the roger. design system.

FARBEN

Colour Palette

Orange — Primary

Accents, CTAs, highlights, the period. The signal colour.

100%#FC4C07
90%#FC5E20
80%#FD7039
70%#FD8251
60%#FD946A
50%#FEA683
40%#FEB79C
30%#FEC9B5
20%#FEDBCD
10%#FFEDE6

Ink — Black

Text, contrast, UI elements, dark surfaces.

100%#1E1E1E
90%#343434
80%#4B4B4B
70%#626262
60%#787878
50%#8F8F8F
40%#A5A5A5
30%#BCBCBC
20%#D2D2D2
10%#E9E9E9

Blue — Secondary

Luftraum / airspace — information, links, zones.

100%#33A6CD
90%#47AFD2
80%#5CB8D7
70%#70C1DC
80%#85CAE1
50%#99D3E6
40%#ADDBEB
30%#C2E4F0
20%#D6EDF5
10%#EBF6FA

White — Surface

Cards, surfaces, negative space.

100%#FFFFFF
TYPOGRAFIE

Type Scale

Nunito Sans + Bevan · Major Third (1.250) · Base 16 px

Display · Bevan 400 · 61/68 Display
H1 · Bevan 400 · 49/56 Heading 1
H2 · Nunito Sans 600 · 39/48 Heading 2
H3 · Nunito Sans 600 · 31/40 Heading 3
H4 · Nunito Sans 600 · 25/32 Heading 4
H5 · Nunito Sans 600 · 20/28 Heading 5
H6 / Eyebrow · Nunito Sans 500 · 16/24 · +1% Heading 6 — Eyebrow
Body L · Nunito Sans 400 · 20/30 Body Large — for introductions and lead paragraphs.
Body · Nunito Sans 400 · 16/24 Body — the standard running text for all content.
Body S · Nunito Sans 400 · 14/20 Body Small — secondary text and dense UI.
Button · Nunito Sans 600 · 16/16 · +1% Button Label
Tag / Overline · Nunito Sans 500 · 12/16 · +8% · Caps TAG · OVERLINE · FLUGFUNK
Caption · Nunito Sans 400 · 12/16 · +2% Caption — image captions, footnotes & legal
Quote · Nunito Sans 200 · 31/42 «Quote — Lorem ipsum dolor sit amet.»
LAYOUT

Spacing & Radius

4px xs
8px sm
12px md
16px base
24px lg
32px xl
48px 2xl

Border Radius

8px
12px
16px
pill