dadario.studio

Design system

Jedes Token, aus dem die Website gebaut ist, wird bei jedem Build direkt aus den Stylesheets gelesen. Die meisten kommen aus dem Figma-Export in tokens.css; die eigene Ebene der Website in global.css ist mit global.css markiert. Jeder Name und jedes Farbfeld lässt sich per Klick kopieren. Schalte im Header das Theme um, und die semantische Ebene wechselt mit.

Was das für dein Produkt heißt

Jede Seite dieser Website ist aus diesem System gebaut. Farben, Typografie, Abstände und Motion liegen an einer Stelle. Sie werden aus Figma exportiert und bei jedem Build in den Code gelesen.

Ein Rebranding oder ein Dark Mode ist eine Änderung in einer Datei. Kontraste sind in beiden Themes gegen WCAG gemessen, die Tabellen unten zeigen die Werte. Wer als Nächstes ins Team kommt, startet mit Dokumentation.

semantic colours: 49
ramp steps: 154
fluid type steps: 10
site tokens: 30

Colour

Components use the semantic layer. Each name points at a ramp step per theme, so one class works in light and dark.

Semantic layer

Surfaces

Light · nowDark

ds-slate-50#eff4f8

ds-slate-dark-950#0b1214

ds-slate-100#dae7f0

ds-slate-dark-900#151f22

ds-slate-100#dae7f0

ds-slate-dark-950#0b1214

ds-slate-300#91b9ce

black#000000

ds-slate-200#b3d0e1

ds-slate-dark-800#263539

rgb(20 29 33 / 0.8)

rgb(0 0 0 / 0.7)

Text

Light · nowDark

ds-slate-950#141d21

ds-slate-dark-50#f1f8fa

ds-slate-700#475d68

ds-slate-dark-200#add9e5

ds-slate-600#597381

ds-slate-dark-300#91bdc9

ds-slate-400#7fa3b6

ds-slate-dark-500#64848c

white#ffffff

ds-slate-dark-950#0b1214

Lines & focus

Light · nowDark

ds-slate-200#b3d0e1

ds-slate-dark-600#4e676e

ds-slate-300#91b9ce

ds-slate-dark-500#64848c

ds-slate-100#dae7f0

ds-slate-dark-700#3b4f54

ds-blue-600#3b83ad

ds-blue-dark-200#64d1f8

Brand

Light · nowDark

ds-indigo-700#3544dc

ds-indigo-dark-600#2844ff

ds-indigo-800#2633b1

ds-indigo-dark-700#002bcf

ds-indigo-900#121a69

ds-indigo-dark-800#001c95

ds-indigo-100#e3e4fb

ds-indigo-dark-900#000e5f

white#ffffff

ds-indigo-950#080e44

ds-indigo-dark-300#a1a6ff

ds-indigo-300#abaef3

ds-indigo-dark-200#bfc2ff

primary#3544dc

ds-indigo-dark-200#bfc2ff

ds-teal-200#71e8d6

ds-teal-dark-200#8ce8d1

ds-teal-300#66d3c3

ds-teal-dark-300#80d5c0

ds-teal-400#55b2a5

ds-teal-dark-400#6bb3a1

ds-teal-50#d2fcf4

ds-teal-dark-900#0f211c

ds-slate-950#141d21

ds-slate-dark-950#0b1214

ds-blue-800#265a78

ds-blue-dark-300#42b5db

ds-blue-900#1c455d

ds-blue-dark-200#64d1f8

ds-blue-100#d9eafb

ds-blue-dark-900#051e27

white#ffffff

ds-slate-dark-950#0b1214

global.css

primary#3544dc

primary-emphasis#a1a6ff

Status

Light · nowDark

ds-green-800#044f2d

ds-green-dark-300#00c160

ds-green-900#003119

ds-green-dark-200#00dd69

ds-green-50#b1ffce

ds-green-dark-950#001307

white#ffffff

ds-slate-dark-950#0b1214

ds-orange-500#fd9d06

ds-orange-dark-400#fe9656

ds-orange-400#ffb067

ds-orange-dark-300#ffb28e

ds-orange-100#ffede3

ds-orange-dark-950#1e0e00

ds-slate-950#141d21

ds-slate-dark-950#0b1214

ds-red-700#a80603

ds-red-dark-300#fe8f99

ds-red-800#740301

ds-red-dark-200#ffb2bb

ds-red-900#480101

ds-red-dark-100#ffe3e6

ds-red-100#ffe1e1

ds-red-dark-950#210003

white#ffffff

ds-slate-dark-950#0b1214

ds-blue-800#265a78

ds-blue-dark-300#42b5db

ds-blue-100#d9eafb

ds-blue-dark-900#051e27

white#ffffff

ds-slate-dark-950#0b1214

Contrast in use

The pairings the site relies on, measured against WCAG in both themes.

PairingLightDark
foreground on background
Light15.45:1AAA
Dark17.60:1AAA
foreground-muted on background
Light6.25:1AA
Dark12.45:1AAA
foreground-subtle on background
Light4.52:1AA
Dark9.30:1AAA
accent on background
Light6.30:1AA
Dark8.47:1AAA
tertiary on background
Light6.73:1AA
Dark7.98:1AAA
primary on background
Light6.30:1AA
Dark3.03:1AA large
primary-contrast on primary
Light6.97:1AA
Dark6.25:1AA
secondary-contrast on secondary
Light11.58:1AAA
Dark13.12:1AAA
error-contrast on error
Light7.80:1AAA
Dark8.64:1AAA

Contrast checker

Any two semantic colours, in both themes.

TextBackground

Light

Products founders trust

Small copy at the bottom of the type scale.

15.45:1AAA

Dark

Products founders trust

Small copy at the bottom of the type scale.

17.60:1AAA

Core ramps

Seven hues, each with a light and a dark ramp, reachable as bg-ds-indigo-700, text-ds-teal-200 and so on.

Marks a step the semantic layer points at. Hover or tap a step to read it.

slate

light

dark

blue

light

dark

indigo

light

dark

teal

light

dark

green

light

dark

orange

light

dark

red

light

dark

Type

A fluid scale: each step grows with the viewport between two sizes, so headings need no responsive variants.

Space and layout

A 4px grid, a width scale of its own, and the sizes components are built to.

Spacing

Tailwind's spacing scale on a 4px base, so p-4 is 16px. These are the steps the Figma export names; values between them still work.

00px
14px
28px
2.510px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
32128px

Breakpoints

The dot is your window. Resize it to watch it cross them.

sm640

md768

lg1024

xl1280

2xl1536

Your window: …

Widths

The max-w-ds-* scale. Namespaced because it differs from Tailwind's own steps.

320
384
480
560
640
768
1024
1280
1440
1600
1920

Layout

16px
32px
1280px
720px
global.css3.5rem, 4rem (md and up)

Component sizes

Heights for buttons and inputs, boxes for icons. Tailwind has no namespace for these, so components reach them through var().

button

input

icon

Borders

Shape

Corner radii and elevation. Mix them on the card.

Motion

Figma carries no motion, so this layer is all the site's own: three curves, one duration scale, and a handful of small moves.

Easing

Tap a track to play one curve, or play all three at once. The duration applies to every curve.

Your system asks for reduced motion, so each puck waits out the duration and then jumps to the end.

global.css

cubic-bezier(0.32, 0.72, 0, 1)

global.css

cubic-bezier(0.4, 0, 0.2, 1)

global.css

linear(0, 0.0415 4%, 0.1447 8%, 0.282 12%, 0.4318 15%, 0.5784 19%, 0.7115 23%, 0.8249 27%, 0.916 31%, 0.9847 35%, 1.0329 38%, 1.0632 42%, 1.0789 46%, 1.0835 50%, 1.0801 54%, 1.0716 58%, 1.0601 62%, 1.0476 65%, 1.0354 69%, 1.0242 73%, 1.0147 77%, 1.0071 81%, 1.0013 85%, 0.9973 88%, 0.9947 92%, 0.9934 96%, 1)

Duration

150ms
250ms
400ms
650ms
900ms
1000ms

The language switcher runs one step down the scale: --dur-lang-fast is instant, --dur-lang-base is fast, --dur-lang-slow is base.

Distance and scale

The small moves the site repeats. Hover, press, focus or tap each one.

move-rise 1.5rem

Components

The tokens put to work. These are the site's real components, not copies. The nav, language switch and theme toggle are live in the header.

Button

Four variants, three sizes, two shapes. Hover, press and tab through them; every state comes from the element itself.

Shape

rectangularpill

Accordion

The FAQ's disclosure: native details and summary, with the height animated on --dur-base and ease-snappy.

What is a design token?

A named decision, such as a colour, a size or a duration, that code reads instead of a raw value. Change the token and every place that uses it follows.

Where do these come from?

Most come from the Figma variable export, generated into tokens.css. The rest are the site's own, written by hand in global.css, and are marked as such on this page.

Sweep link

The case study link. The label sweeps into the accent on hover or focus, and the arrow moves on when pressed.

View case study

Site layer

Everything global.css defines on top of the export, with its value per theme and breakpoint.

Colour

var(--ds-primary)darkvar(--ds-primary-emphasis)
dark#506975
dark#35759c

Motion

cubic-bezier(0.32, 0.72, 0, 1)
cubic-bezier(0.4, 0, 0.2, 1)
linear(0, 0.0415 4%, 0.1447 8%, 0.282 12%, 0.4318 15%, 0.5784 19%, 0.7115 23%, 0.8249 27%, 0.916 31%, 0.9847 35%, 1.0329 38%, 1.0632 42%, 1.0789 46%, 1.0835 50%, 1.0801 54%, 1.0716 58%, 1.0601 62%, 1.0476 65%, 1.0354 69%, 1.0242 73%, 1.0147 77%, 1.0071 81%, 1.0013 85%, 0.9973 88%, 0.9947 92%, 0.9934 96%, 1)
var(--dur-instant)
var(--ease-gentle)
150ms
250ms
400ms
650ms
900ms
1000ms
var(--dur-instant)
var(--dur-fast)
var(--dur-base)
4px
1.5rem
0.98
1.04

Layout

3.5remmd and up4rem

Case study slider

0.15
0.55
0.28
var(--color-ds-slate-950)darkvar(--color-ds-slate-dark-950)
0.05

Hero halftone

var(--ds-accent)
var(--ds-secondary-active)darkvar(--ds-secondary)
0.82dark0.45

Utilities

Centred page shell whose gutter widens at md
Reading width for body copy
Typography for the legal pages and case study bodies
Chevron states for the accordion
The glow ahead of the mobile menu sheet
Oversized image layer that parallax moves inside
Darkens slider images away from the centre
Fades slider text away from the centre

Colour

Semantic layer

Surfaces

Text

Lines & focus

Brand

Status

Contrast in use

Contrast checker

Core ramps

slate

blue

indigo

teal

green

orange

red

Type

Scale

Faces

Weight, line height and spacing

Space and layout

Spacing

Breakpoints

Widths

Layout

Component sizes

Borders

Shape

Motion

Easing

Duration

Distance and scale

Components

Button

Accordion

What is a design token?

Where do these come from?

Sweep link

Site layer

Colour

Motion

Layout

Case study slider

Hero halftone

Utilities