dadario.studio

Design system

Every token the site is built from, read straight out of the stylesheets on each build. Most come from the Figma export in tokens.css; the site’s own layer in global.css is marked global.css. Click any name or swatch to copy it, and switch the theme in the header to watch the semantic layer change.

What this means for your product

Every page of this site is built from this system. Colours, type, spacing and motion live in one place. They are exported from Figma and read into the code on every build.

A rebrand or a dark mode is a change to one file. Contrast is measured against WCAG in both themes; the tables below show the values. Your next hire starts with documentation.

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
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.

  • 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.

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.

Scale

1280px

Every step interpolates between 375px and 1280px and holds outside that range.

Face

12px

11 → 12

The five boxing wizards jump quickly.

14px

13 → 14

The five boxing wizards jump quickly.

16px

14 → 16

The five boxing wizards jump quickly.

18px

16 → 18

The five boxing wizards jump quickly.

20px

18 → 20

The five boxing wizards jump quickly.

24px

20 → 24

The five boxing wizards jump quickly.

30px

24 → 30

The five boxing wizards jump quickly.

36px

28 → 36

The five boxing wizards jump quickly.

60px

36 → 60

The five boxing wizards jump quickly.

96px

72 → 96

The five boxing wizards jump quickly.

Faces

Bricolage Grotesque opens sections, Quicksand carries everything else, JetBrains Mono sets code.

Aa

Bricolage Grotesque

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Aa

Quicksand

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Aa

JetBrains Mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Weight, line height and spacing

Pick a value from each scale to set the sample. The tinted band is the paragraph spacing; the site uses md.

Design and code from one hand.

Most projects lose quality at the handoff between design and development. Details get simplified and interactions get cut. One person owning both keeps them in the product.

The same holds for the data behind the interface. When one person handles both, the numbers on screen match the numbers in the product.

font-regular leading-normal tracking-normal space-y-(--paragraph-spacing-md)
Weight
Line height
Letter spacing
Paragraph spacing

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.

sm
md
lg
xl
2xl

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.

Card
Radius
Shadow
Radius
12px
Shadow
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
rounded-xl shadow-lg

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.

Duration

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

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