Fieldnote Coffee Roasters · sample brand
From one button to the whole storefront.
Six levels, each built from the one below. Start at the tokens, open any component to see its states and what it is made of, then watch the parts stack into real pages and a working site at three screen widths.
Fieldnote is a made-up coffee roaster used as placeholder content. Swap the tokens and every level below changes with them.
Level 1 · values
Tokens
The raw values everything else draws from. Colours switch with the theme toggle above. Click any swatch to copy its variable.
Colour
Type
Space
Radius
Elevation
Level 2 · components
Atoms
The smallest parts that still do something. Each one is shown in its variants and states. None of them contains another component.
Level 3 · components
Molecules
Atoms grouped to do one job: a labelled field, a grind picker, a product card. Chips show exactly which atoms each one uses.
Level 4 · components
Organisms
Complete sections of a page, built from molecules and atoms. Drag nothing, resize nothing: these respond to the width of the space they sit in.
Level 5 · templates
Pages
Organisms stacked in order. Pick a page to see its layers laid out one above the other, each a live render of the organism from level 4.
Level 6 · everything together
The full site
The same page, assembled. Resize it, build it up one section at a time, or switch on X-ray and click any part to see what it is made of.