Design System

Overview

This is the design system behind hendri.design. It is small on purpose. Nineteen colour tokens, seventeen type styles, twenty four components on the canvas and thirteen written in TypeScript. Every entry on the human pages links to a live URL where the thing actually runs, so none of it is a claim you have to take on trust.

Foundations

• Colour: 19 tokens. Every one carries a light and a dark value except White, which labels brand fills and stays white on purpose.

• Type: 17 styles across three faces. Only Heading 1 changes size across breakpoints, going 54 to 48 to 32. The other sixteen hold one size at 1200, 810 and 390 alike.

• Spacing: a 4pt scale. 4, 8, 16, 24, 32, 48, 64.

• Radius: six steps. 2 hairline, 8 small, 16 card, 24 panel, 40 container, 999 pill.

• Layout: one 1440 measure, page padding 0 24 0 48, breakpoints at 1200, 810 and 390. The nav is 72px and sticks at 22. The tab band sticks at 94, directly beneath it.

• Motion: one spring, spring-duration 0.4s 0.2 0s. Every code component carries its own reduced-motion guard.

Accessibility

Contrast is computed from the token values rather than asserted. Three results are worth stating plainly.

• Brand Secondary is 2.64 in light and 2.44 in dark against the page background. It fails at every size in both themes, so it is decorative only. It is the logo scribble and the ruler notches, never text.

• Brand Ember is 3.11 in light, so large text and rules only there. It clears comfortably in dark at 6.52.

• White on Brand Primary is 5.41 in light and 3.09 in dark, so a brand button’s own label falls below AA in dark mode. Recorded, not yet fixed.

Components

Twenty four on the canvas, thirteen in TypeScript, and five borrowed from the Framer marketplace which are named as borrowed. Each row states its variants, its prop count, and where it ships.

• Button has five states: Default, Loading, Disabled, Success and Error. Only Default is placed anywhere.

• Dock has eight variants. One resting, six magnification states named for the icon each one enlarges, and one for mobile.

• Chip and Card Note are built and placed nowhere. That sits on the page rather than hidden from it.

Patterns

Eight compositions that recur without being components: the toast, dock magnification, the card family, the Human and .md switch, the tab band, the notification rail, the ruler chrome, and the row grammar. Each one says where it lives and why it stayed a pattern.

How it is maintained

• Every colour is a token and every text node wears a style preset. Raw hex does not move in dark mode, so it does not ship.

• Applying a text preset clears a node’s inline type including its colour, so colour intent is restored deliberately wherever it differs from the preset.

• The numbers on the human pages are read from the project rather than retyped. That is what stops them going stale.

For machines

• Canonical: hendri.design/system · plain-text twin: /system?md · full profile: /machine/home.

• Sections: /system foundations, /system/components, /system/patterns. Brand is governed separately at /machine/brand.

• Author: Hendri van Niekerk, Design Engineer, Lisbon.