Category: Tokens
-
-
how i built this site with the system i teach — one file, every decision derived
—
by
This site isn’t a demo of a design system. It runs on one — a single token file drives every color, spacing value, and type decision on the page you’re reading. Most design systems content has a credibility problem. The system gets taught from mockups. The examples live in a sandbox. The person explaining tokens…
-
-
wcag and design systems: why accessibility belongs in the token layer
—
by
in Accessibility, Color, css, Figma, Fonts, Iconography, Sites, Styleguides, Tokens, UI KIt, UI/UX, Web DesignWCAG compliance isn’t a checklist you run at the end — it’s a constraint you build into the system at the token level. A lot of designers treat accessibility as a QA pass: ship the design, then check the contrast ratios. That approach fails at scale because it moves the problem downstream where it’s expensive…
-
color systems
A palette comprises a collection of colors, while a color system establishes rules for color usage across three tiers: primitives (raw values), semantics (assigned meanings), and components (which utilize these meanings). This structure allows for streamlined updates across surfaces, enabling automatic adjustments for themes and branding changes.
-
type scale
A type scale is a sequence of font sizes built on a single ratio — so every size in your system is mathematically related to every other. Pick a base size (usually 16px) and a ratio (1.25 is modest, 1.5 is expressive) and multiply up and down from there. Token each step by role —…
-
i built a design system business in 6 weeks using only claude code
—
by
in AI, Automation, Color, Components, Educational, Illustrations, Images, Sites, Styleguides, Tokens, Typography, UI/UX, Web DesignSix weeks from first commit to a deployed product site, a content pipeline, a Gumroad membership, and a MailerLite funnel — one designer, one tool, no team. On April 25, 2026 I ran git init in a Google Drive folder. On June 5 I had a functioning design system business: a static site deployed to…
-
design tokens
A design token is just a named variable that stores a design decision — color, spacing, type size — so your whole system can change from one place. Instead of hardcoding `#0d0d0d` in fifty places, you define `–ink: #0d0d0d` once and reference the name everywhere. When the value changes, everything updates. Tokens create the contract…
