01Connect 02Work 03Lab 04Forge 05About 06Contact /
Skip to content
Portfolio

Lab · Design system, live

The Lab

A living design system, not screenshots. Flip the theme and everything re-tints through design tokens. Every component, every state, accessibility and color, real and interactive.

Theme
Density
01 · Tokens

One source of truth

Color, type, spacing, radius, elevation and motion, defined as CSS variables. The theme switcher just swaps them. Click any color to copy its value.

Color · semantic tokens
Type scale
Display / 900Aa Type
Title / 800Real craft
Serif / italicconsidered
Body / 400 · 16The quick brown fox jumps.
Label / monoSemantic token
Spacing · 4pt grid
4
8
12
16
24
32
Radius
sm · 7
md · 12
lg · 18
pill
Elevation
e1
e2
e3
Motion · easing
02 · Buttons

Variants and states

Five variants, three sizes, and every state handled: rest, hover, keyboard focus, pressed, disabled and loading.

Variants
States
Default Focus keyboard ring Disabled Loading
Sizes

The "Click me" button runs rest → loading → success, then re-arms itself.

03 · Forms

Input and validation

Visible labels, persistent helper text, validation on blur, error messages next to the field and announced to screen readers.

We never share it.
Minimum 8 characters.
Available
 
Non-editable state.
0/140
Selection
Controls
Radius12px
04 · Components

Feedback and overlays

Keyboard tabs, height-animated accordion, a modal with a focus trap, polite toasts, tooltip, progress, skeleton, chips and badges.

Tabs

Use the left and right arrow keys to move between tabs. Focus follows and the indicator slides.

Accordion
Yes. aria-expanded, keyboard focus, and the height animates instead of snapping.
Yes. Flip the Motion switch up top, or set the system preference, and transitions drop away.
Each item is independent here, but the pattern supports single-open just as easily.
Triggers
Works on hover and focus
Status
Badges, chips, avatars
Success Warning Error Info Neutral
Design Motion Tokens A11y
MSJDKC+6
05 · Accessibility

Built in at the token

A live WCAG contrast checker, touch targets of at least 44px, visible keyboard focus, and reduced-motion respect.

Contrast checker · WCAG
Aa Sphinx of black quartz, judge my vow.
17.4: 1
ratio
Touch targets
44 × 44 · ok
26 · too small

Below 44px, fingers miss. Every control here meets the minimum.

Keyboard
  • Tab move in visual order
  • ←→ switch tabs and segments
  • EnterSpace activate
  • Esc close the modal
Try:
06 · Matrix

Variants × states

The way a design system documents itself: every variant against every state, on one board.

DefaultHoverFocusDisabled
Primary
Secondary
Danger