Where I share what I learn at work and the small things from everyday life.
Tailwind for designers: reading AI-written code calmly
How to read a Tailwind class string in groups, a table of common classes and the CSS they produce, what hover:, md: and dark: mean, where tokens live in a v4 theme, and how to keep AI on your tokens. Examples come from this site's code.
Working· 2026-10-04
How to write prompts for Claude: 6 templates for designers
A good prompt carries context, a task, source material and an output shape. This guide walks through each part using Anthropic's prompting docs, then gives six copy-paste templates for design work: interview synthesis, error microcopy, heuristic review, brief to checklist, token naming and release notes.
Working· 2026-10-04
What are design tokens? Raw, alias and semantic
A design token is a named design decision that Figma and code share. This guide covers the three layers (raw, alias, semantic), how tokens differ from CSS variables, and how to set them up in Figma Variables, Tailwind v4 and the W3C token format, using this site's real tokens.
Working· 2026-08-18
Radix-style colour scales: number steps by distance and dark mode follows
A Radix-style scale numbers each step by its distance from the background rather than by lightness. Here is how that differs from Tailwind's palette, the real CSS behind this site's grey ramp, and why its semantic tokens need no dark-mode overrides.
Working· 2026-08-04
Choosing a UI font for Vietnamese: a 5-minute diacritics test
If your product ships in Vietnamese, check three things before you commit to a typeface: the vietnamese subset on Google Fonts, stacked tone marks at 12–14px, and line height for accented capitals. Includes a table of ten popular fonts with only verified facts.
Working· 2026-07-21
4px and 8px grids: why an on-grid layout can still look off
A 4px or 8px grid makes every gap a multiple of one unit, but it doesn't create rhythm. This post covers why the 8px/4px grid is so common, then fixes an on-grid layout that still feels messy using three tiers of whitespace, with before-and-after CSS.
Working· 2026-07-09
Design tokens FAQ: 8 questions, short answers
Are tokens just CSS variables? Do you need Style Dictionary or Tokens Studio? How should you name them, handle dark mode, and keep Figma and code in sync? Short answers, with examples from this site's real tokens.
Working· 2026-06-27
Dark mode FAQ: design tokens, contrast ratios and WCAG AA
Does dark mode need its own design pass, what contrast ratio passes WCAG AA, and why do light greys and brand colours keep failing? Answered with measured ratios and the real CSS behind this site.
Working· 2026-06-12