A design system built from first principles

What Arche is

Arche is the system my personal brand runs on. It has a token layer (color, type, spacing, motion), a set of components built on those tokens, and the rules for using both. It supports light and dark mode and meets WCAG AA.

It started as the design system for my portfolio site, and it is written so other designers and teams could use it. This site is its documentation. Every color, size and contrast ratio on these pages is read from the same token file the system is built from, so the numbers on these pages match the system.

Primitive colors

96

Role tokens, in every mode

116

Type styles, three sizes each

15

Spacing and stroke values

17

Where to start

• Color

  Brand families, neutrals and status colors, plus the role tokens that make dark mode and color modes work.

  View Color

• Type

  Archivo and Work Sans. Fifteen styles, each with one job.

  View Type

• Components

  Buttons, links, form fields and case-study blocks, with live states and the HTML behind them.

  View Components

The name

Arche is the Greek word for a beginning, and for a first principle: the starting point that everything else follows from. It is pronounced AR-kee. I chose it because this system starts from a few rules and lets everything else follow, instead of starting from a pile of components.

How the system carries my brand

My brand has five personality traits: systematic, grounded, generous, clean and principled. Here is how I read each one in the system.

• Systematic. Colors are chosen by job, not by value. A component asks for “text on the blue band”, never for a hex code.
• Grounded. In the default mode, blue does the structural work. Yellow and red stay sparing, and each has one purpose.
• Generous. Every component page shows its states, its HTML and its do and don’t rules, so someone else can use it without asking me.
• Clean. A grid, square corners, two typefaces, and one job per type style.
• Principled. Accessibility is the floor. Norway Red has one narrow job and is never on text, controls or validation.

One mode in use

Arche has five color modes. Canon is the one in use, and this site is built in it. The other four are explorations: I keep and check them, but I don't develop them. A mode changes only the semantic color roles. Typography, spacing, grid, corner radius, motion and component structure are the same in every mode, and status colors such as Alert never change.

Read how modes work.

Four rules the system rests on

1. Components use role tokens, never raw colors. A button asks for --arche-interactive-button-primary-fill-default, not for a blue. That is how dark mode works without touching a component, and how the color modes work too.
2. One style, one job. Each type style does a single thing. When something needs emphasis, I change the weight inside the style instead of inventing a size between two others.
3. Color is never the only signal. Every state also changes weight, stroke, shape or text.
4. Accessibility is the floor. WCAG AA contrast, a visible 4px focus ring, touch targets of at least 32px (48px for buttons) and real labels, on every component.

How it is built

The source of truth is a Figma file with three variable collections: Primitives (raw colors), Spacing, and Tokens (role names that point at a primitive, with five color modes, each in Light and Dark). A script turns an export of those variables into tokens.css. Components are plain HTML and CSS that read only from that file.

Nothing here needs a framework to use. Copy the HTML from any component page, include the three stylesheets, and it works.

Status

Version 0.7.1. Foundations and Canon are documented. The four other color modes have pages too, but they are explorations. Seven components are documented so far: button, link, form field, theme controls, stat strip, quote and list row. The rest of the system (navigation, menu overlay, case-study hero and image set) exists in the product and will be documented next. Components are not packaged for install yet.