One source, every surface
Skynet is a data-dense trading product: a leaderboard, signal pages, forms that sign transactions. This is the system it runs on. Tokens in three tiers, components that carry their own accessibility, and a build that fails when a colour pair does not meet its requirement. Everything on these pages is generated from the same source the site uses, so the documentation cannot describe something the code does not do.
Tokens are the only source of values.
Colour, type, space, radius, motion and elevation come from the token build. Component CSS with a raw value fails the test suite. When a value is missing, a token is added, not a number.
Three tiers, one direction.
Primitives hold raw values and mean nothing. Semantic tokens give them a role per theme. Component tokens reference semantic ones only, so a theme change reaches every component without touching one.
Accessibility is a property of the token, then of the primitive.
Each colour token declares what it must be legible against and at what ratio; the build fails otherwise. Primitives carry their focus ring, labels, roles and target sizes, so a page cannot forget them.
Never colour alone.
Win and loss are reserved colours, and every use of them comes with a word or a glyph. Selection has a mark. Errors have text.
Flat, divided by hairlines.
Sections are separated by rules, not lifted on shadows. One shadow exists, for what floats over content.
Numbers read like a desk.
Tabular figures, end-aligned, mono for addresses and data, the sample size beside every score. Hold Alt for full precision.
Motion is a budget, and a token.
Ask how often a thing is seen before animating it. Hover, focus and keyboard actions get colour changes at 100ms or nothing; things that appear get 200ms; nothing in the UI takes longer than 300ms. One easing curve, a strong ease-out, so movement starts the instant it is touched; exits reuse it at half the time. Only transform and opacity move. Buttons give 4% on press and a tooltip grows from its trigger, never from scale(0). Reduced motion keeps the fades and removes the movement.
Native first for overlays.
A modal is a real <dialog> opened with showModal(), so the focus trap, Escape, the inert page and focus return are the browser's, not ours. Where HTML has no element yet (combobox, menu) the WAI-ARIA pattern is implemented by hand, small enough to read in one sitting, and focus never leaves the control the user was in.
Machine-readable by design.
Tokens are W3C-format JSON, the component manifest is JSON, and an MCP server answers questions about both, so an agent designing or building with the system reads the same source a person does.
Three tiers, one direction
Raw values. color.green.300 = #16ff9a. Mean nothing on their own. Components may not reference them.
Roles. color.text.accent is green.300 in dark and green.800 in light. One file per theme (dark, light), plus type, layout and motion roles.
Decisions owned by one component. field.border = color.border.control. May reference semantic tokens only, so a theme change reaches every component without touching one.
The build resolves the tiers into CSS custom properties per theme, typed TypeScript, a Figma variables file, and a contrast report. It refuses to build if a primitive is referenced from a component, if the themes do not define the same roles, or if any colour pair falls short of its declared ratio.
What changed, measured
| Measure | Before | After |
|---|---|---|
| Design tokens | 19, all colour | 166, across colour, type, space, radius, motion, elevation |
| Tiers | one flat list | primitive, semantic per theme, component |
| Themes | light and dark, applied after load | dark and light, applied before first paint; OS preference honoured |
| Distinct font sizes in use | 18 | 15 roles |
| Distinct spacing values | 35 | 14 steps |
| Inline style overrides | 78 | counted down by a test that fails if the number rises |
| Shared primitives | 0 | 24 |
| Contrast checked | by eye | 40 declared pairs, tested on every build |
| Reduced motion | not handled | one rule in the generated stylesheet |
The before column is the site as it shipped on 2026-09-21, measured from its stylesheet. Three of the old light-theme colours failed WCAG text contrast, and form-field borders failed the 3:1 non-text minimum in both themes. The accessibility page has the numbers.