Product · Design

A canvas that ships
real HTML/CSS.

Direct-manipulation editing. Tokens as primitives. Every component with every variant. Pages composed from real routes. No proprietary file, no export step — what you build is what production serves.

trunk.dev/norrland/norrland-shop/main/design/components
CheckoutButton · variants
default
hover
disabled
loading
error
empty
populated
+ variant
add
Foundation · Styles

Tokens are the atoms. Everything binds.

Color, spacing, type, radius, motion — every downstream primitive references a token. Change once, the whole product re-renders. No stale color values buried in components three folders deep.

  • ✓Semantic + raw tokens. brand-600 resolves to #7c3aed.
  • ✓Every token binding surfaces its usage — no orphans, no dead tokens.
  • ✓Exports as CSS custom properties. Framework-agnostic.
Palette · brand
50
200
400
500
600
900
Type scale
Display · display-xl
Heading · heading-md
Body · body-md
Radius · Spacing · Motion
radius-none → full
Every variant that matters
default
hover
focus
disabled
loading
error
empty
populated
Every component ships with every state. Design once — don't rediscover the "hey what does the loading state look like" question at code review.
Foundation · Components

Variants are foundational, not optional.

A component isn't complete until every state exists. Trunk enforces the checklist — hover, focus, disabled, loading, error, empty, populated. Skipped states become a warning on the delta.

  • ✓Interactions wired at variant level. No prop drilling.
  • ✓Missing variants surface on the component's health chip.
  • ✓Auto-generated visual regression tests per variant.
Assembly · Pages

Pages are compositions. Routes are real.

Drop components on a canvas, wire links, set per-device variants. The URL is the route. The route drives the journey graph. No pretending "here's what a page might look like" — the page is what ships.

  • ✓Per device-target variants — Desktop / Tablet / Mobile in the same page primitive.
  • ✓Real links between pages. Journey graph derives from them.
  • ✓Multiplayer cursors, layer-level comments, primitive-anchored feedback.
N
Norrland
ShopCart
Your cart
Linen throw
$64
Ceramic mug
$60
Desktop Tablet Mobile /cart · 3 variants

Design is one of six pillars.

Trunk stitches Design to the delta, the PRD, the signals that motivate the change. Explore the rest.