Reference
Design System
Tokens ported from the live Webflow site. Resize the window — type and spacing interpolate continuously rather than stepping at breakpoints.
Color
Each swatch is shown in both schemes. Light values are ported verbatim. Dark is derived, and measures better than light — body copy 9.39 vs 6.77, links 6.07 vs 3.47.
bg-primarypage ground (live: white)bg-secondarybody ground (live: #f6f9f9)fg-primaryheadingsfg-secondarybody copyfg-subtlede-emphasised TEXT (AA everywhere)fg-tertiaryLINES ONLY — fails as textfg-muted50% of fg-primaryfg-muted-more20% of fg-primaryaccentlinks, interactiveaccent-strongpressed / emphasisaccent-muted40% accentaccent-muted-more15% accentborderrules, dividersLeft half: light · right half: dark
Type scale
text-dcm-3xlh1 · 40 → 50pxDaniel Castro Maia
text-dcm-2xlh2 · 33.6 → 42pxDaniel Castro Maia
text-dcm-xlh3 · 25.6 → 32pxDaniel Castro Maia
text-dcm-lgh4 · 19.2 → 24pxDaniel Castro Maia
text-dcm-basebody · 15 → 16pxDaniel Castro Maia
text-dcm-smh6 · 11.2 → 14pxDaniel Castro Maia
Faces
Two licensed faces, self-hosted as subset woff2 — 323 KB for first paint, down from 2,005 KB of desktop-format source. Both keep their variable axes, since the live site drives wdth andwght directly. Thunder is headings only; the face you actually read is PF Grand Gothik.
font-dcm-displayThunder Variable — headings h1–h4Illustration & visual storytelling — 0123456789
font-dcm-accentPF Grand Gothik — label treatment (same family)Illustration & visual storytelling — 0123456789
font-dcm-bodyPF Grand Gothik — body copy, h5/h6Illustration & visual storytelling — 0123456789
Spacing
Bars below use arbitrary widths on purpose — Tailwind's built-in named width defaults (w-xl = 36rem) shadow custom--spacing-* of the same name, so these would lie if written as w-l. Use these steps via p-*,gap-*, or m-*.
3xs4 → 6px2xs8 → 10pxxs12 → 15px · live "small"s16 → 20px · live "medium"m20 → 25px · live "large"l32 → 40pxxl48 → 64px2xl64 → 96px3xl96 → 144pxBare elements
No utility classes below — this is what base.css gives you out of the box.
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six / label
Body copy with an inline link, some bold text, and italics. Hover the link to see the accent transition.
Small print.
Offset shadow & lift
The site's signature interaction. A hard shadow — no blur, no spread — sits up and to the left; on hover it grows while the element travels the opposite way, so the object appears to peel off the page. Shadow and transform are bundled into the dcm-lift utilities precisely because they must stay in opposition; declaring them separately in a component is how the effect breaks.
shadow-dcm-offsetresting · 2pxshadow-dcm-offset-accentcard hover · 3pxshadow-dcm-offset-accent-lgbutton hover · 4pxHover the buttons and the card below to see each utility in motion.
dcm-lift-cardComponents
Primitives in src/components/ui/. Everything above this point is a token; everything below composes them.
StrokedBoxlayout: stack · centered · rowI am...
Default stack. Heading, divider, copy — the shape of every bio panel.
Get in touch at
daniel@dcmaia.art
Dividertone: default · inverse — width: half · fullTaginert, or linkable via hrefTagListall tags, array order — never filtered or grouped by tagTypeButtonvariant: solid · accent — iconOnly — renders a/button by hrefSanityImagenot previewable without contentEmits a width-capped srcset, deriveswidth/height from the asset ref to prevent layout shift, and requests auto=format for AVIF/WebP negotiation. It renders nothing until the Webflow → Sanity content migration has run, so there is no swatch here yet.
Scheme forcing
The page follows system preference. Any subtree can be pinned by addingclass="light" or class="dark" — it works becausecolor-scheme inherits, so every light-dark()token beneath resolves against it.
Forced light
Body copy on the light ground.
Forced dark
Body copy on the dark ground.