Handoff · 1 of 4 · design tokens

Tokens, type, icons and illustrations

Values copied from the prototype’s refined stylesheet (Main.dc.html, “Weblerr refined system”). They are provisional: Weblerr hasn’t supplied final brand tokens, so swap these when brand values arrive. Text contrast below is calculated live from the hex values.

Provisional brand values, not final

Colour

{{g.name}}
{{c.name}}
{{c.v}} · {{c.hex}}
{{c.use}}
{{c.cr}}

Ratio badges: text colour against the surface it’s used on (WCAG 2.x). AA needs 4.5:1 for body text and 3:1 for large text and UI boundaries. The input border (#8F8B80 on white) is 3.4:1.

Typefaces actually used

{{f.sample}}
{{f.name}}
{{f.role}}
Weights
{{f.weights}}
Fallback
{{f.fallback}}
Licence
SIL Open Font License 1.1
Loading. Every board loads the three families from one Google Fonts CSS2 request with display=swap. The PNG exports were rendered with the same families from local OFL copies (Fontsource), because the build sandbox can’t reach Google Fonts. Before each capture, document.fonts reported all three families as loaded. The source package includes these local copies for offline use.

Type scale (as implemented)

{{t.spec}}{{t.sample}}{{t.use}}

Radius

{{r.v}}{{r.use}}

Spacing and elevation

{{s.v}}{{s.use}}
Bars drawn at 4× scale.
{{s.name}}
{{s.v}}

Icons: 44 Lucide-style glyphs on a 24 px grid

{{i.n}}
{{z.s}} px · stroke {{z.sw}}

Stroke 2 at 16 px and below, 1.75 above, round caps and joins, colour inherited (currentColor). The paths are drawn in Lucide’s style but are this project’s own drawing set. Each one is exported as its own SVG in /assets/icons.

Logo, illustrations and sample website previews

Official Weblerr mark
The supplied white mark, unchanged, on the brand-blue tile (#3B4FE0). Mark width is 56.6% of the tile, centred. Tile sizes: 32 px in app chrome, 28 px compact (mobile header, email). 10 px gap to the wordmark, which stays live text in Bricolage Grotesque 650. App icon and favicon place the same mark at the same ratio on the brand-blue square (rounded tile for favicons).
{{x.name}}
{{x.use}}

Illustrations use one family: soft canvas, ink line work, accent blue and an apricot highlight (#F2A65A). Website previews are fictional sample screens and are always labelled “Sample preview” in the UI.