Button · variants
Default
Variant 2
Variant 3
Variant 4
Product · Design
A canvas made of
your real product.
Captured from your URL, then edited. Tokens, icons, logos, each component with each look the product gives it, and every page. It is real HTML and CSS, not shapes in a file.
trunk.dev/norrland/norrland-shop/design/components
Foundation · Styles
Change a token. Everything using it follows.
Capture finds your tokens: colour, type, spacing, radius and shadow. Change a colour or a radius, and every element using it follows.
Colour
surface-0
surface-1
surface-2
ink-1
ink-2
ink-3
Type
Display
Heading
Body
Radius
radius-0 → radius-full
Button · 4 variants
Default
Variant 2
Variant 3
Variant 4
Foundation · Components
Each component, with each look the product gives it.
Capture finds the structures that repeat and keeps each one as a component, with every place it is used. Each different look is a variant. To add a variant, ask Trunk in words. It draws one from your own tokens and components, and you keep it or discard it.
Pages
Each page at every captured size.
You pick the sizes: desktop, tablet, mobile. Select an element on a page and change it. The captured page is never changed. Your edits are kept beside it.
N
NorrlandShopCart
Your cart
Linen throw
$64
Ceramic mug
$60
Desktop Tablet Mobile /cart · 3 sizes
Next: the journey.
Pages link to each other. Trunk reads those links and draws the map.