ArcherNo. 030

neutral
brand
blue
green
yellow
red
cyan
purple
magenta

Colors come from Adobe Leonardo, which generates ramps from contrast targets, and is dynamically re-themable so light, dark and high contrast themes are derived from the same background/contrast math.

The Token Pipeline

The system is built around a custom token generator and pipeline. Primitives are generated and combined with a manually defined token set. Archer compiles everything into a middle layer of industry-standard DTCG tokens. Style Dictionary then compiles the full set for a variety of outputs.

tokens type styles: all type styles

Type and spacing scales come from Utopia, which produces breakpoint-free clamp() scales that interpolate fluidly across viewports eliminating most of the need for things like media queries.

In addition to typical CSS, Archer currently emits Figma variable collections, WordPress theme.json, a some experiments like a VS Code theme and several terminal emulator themes.

The Figma integration is bidirectional: relying on ingesting variables back into tokens and storing their Figma variable IDs as extensions.

The WordPress generator handles basic preset and token transformation but also lets token groups declare their own routing in extensions. This makes a WordPress theme inherit the same semantic layer, and many of the same basic component styles as the React components.

The Component Set

On top of the tokens sits a library of components built on Base UI. Component styling follows an explicit token-name grammar, a reserved state vocabulary that distinguishes ephemeral states (hover, focus) from persistent ones (selected, open, disabled), and a slot/remap pattern that keeps variants × states composable and keeps variant values visible to the Figma and WordPress pipelines.

toolbar: default

progress: indeterminate

fieldset: default

combobox: with groups

otpfield: with separator

switch: settings list

The components are based on Base UI. I mostly use these for personal projects and tools.

Archer is my personal design system. I use it as a testbed for design system ideas and deploy it to personal tools and websites.

At its heart is a love for intrinsic design principles, an obsession with visual consistency and a desire to experiement.

It’s a bit of a science project but it shows off a lot of my philosophy and opinions on design systems.

Date: 2026
Designed at: Independent
Work: Design Engineering, Visual Identity, Web Design, Front-end Development
Link: Storybook