#design tokens
15 pieces filed under “design tokens”.
Will your logo survive your product?
Identity work gets judged at 16 pixels. Favicons, avatar crops, dark surfaces, motion restraint, and the logo-usage contract that keeps engineers on side.
Focus states are a design system feature, not a browser default
Stop inheriting the browser's focus ring. Design it: tokens, 3:1 contrast on every surface, dark-theme variants, and the overrides that silently break keyboards.
Seasonal theming without pretending it's a rebrand
How to theme a site for a season or campaign with token overrides, not panic: scoped palettes, motion swaps, expiries, and where festive becomes confusing.
Dark mode is a second design system
Treating dark mode as a CSS inversion is how you ship a grey smear. Design dark themes as a second, deliberate system — tokens, elevation, contrast, CI tests.
Fluid type scales in practice: from ratio to tokens
How we build fluid type scales that behave from 375px to 1440px: ratios, clamp() mechanics, optical correction, and type tokens that stay readable a year later.
Design tokens that survive contact with engineering
Most token pipelines rot within a year. Here's the architecture we use at Brassfern to keep design decisions flowing from Figma to production without drift.
Testing design tokens in CI like the API they are
Design tokens are an API contract between design and engineering. The CI pipeline that enforces it: grammar linting, ancestry checks, contrast tests.
Colour systems that survive dark mode and rebrands
Literal palettes break the moment a brand shifts or dark mode ships. Here's the semantic colour architecture that has survived both — twice — on real client work.
Design tokens are an API: building a pipeline from Figma to production
How we build a design-token pipeline from Figma to CSS, Tailwind and native — one source of truth, versioned releases, and semver for visual decisions.
Brand colour beyond default blue
How to choose brand colour with intent: category colour maps, distinctiveness vs convention, accessibility as a brief, and testing colour in the wild.
Kill the brand PDF: living guidelines that get used
Guideline PDFs rot in shared drives while brands drift. What actually replaces them: living guideline sites with tokens, patterns, versioning and honest governance.
Design handoff that doesn't decay in a sprint
Why handoffs rot and how we stop it: living tokens, component specs over pixel mocks, motion specs with real easing values, annotations that survive sprints.
Copperplate: a design system people actually read
How we rebuilt a dev-tooling company's design system docs around live tokens, do/don't blocks and honest guidance — and doubled adoption in a quarter.
Case studyA brand system that grows itself
How Brassfern rebuilt Hearthbrew Coffee's identity around a generative botanical system — and handed the internal team a tool instead of a PDF.
Case studyCoriander Collective: six restaurants, one platform, zero beige
A restaurant group's six venues got one platform and six personalities: token-driven theming, unified reservations and gift cards that grew revenue 5x.