Average GeniusSavant

Foundations

The ground rules: principles, the token model, and the visual primitives every component is built from.

Principles

Four ideas every token, component, and pattern answers to.

01
Earned, not given
Genius is built through work. Every value has a reason, and nothing is decorative for its own sake.
02
Tokens first
Nothing is hard-coded. Color, space, radius, and motion flow from one source, so one change updates the whole system.
03
Clarity over cleverness
Plain, legible, honest. One primary action per view, real states, and copy that reads like a product team wrote it.
04
Accessible by default
Contrast, focus, and keyboard access are built into the components, not bolted on at the end.

Tokens

Savant runs on a three-tier token model. Primitives hold raw values, semantic tokens give them meaning, and component tokens map meaning onto specific parts. A component never references a raw value directly, so a single change flows everywhere.

Tier 1
Primitive
The raw palette and scales, named by value.
--purple-600: #4529B1;
--grey-900: #121212;
--space-4: 16px;
Tier 2
Semantic
Roles that describe intent, not appearance.
--color-primary: var(--purple-600);
--surface-page: var(--grey-900);
Tier 3
Component
Where a role meets a specific part.
--btn-primary-bg: var(--color-primary);
--field-border-focus: var(--purple-500);

Color

Six families, each a nine-step scale from 100 to 900. Purple leads as the primary. Teal carries the secondary accent, green, amber, and red carry status, and a dark neutral scale sets every surface. Click any swatch to copy its value.

Primary
#4529B1
Purple 600

The default action color. Anchors buttons, focus, links, and brand moments across the system.

Semantic roles

Primary
Actions, focus, brand
Secondary
Accents, highlights
Success
Confirmations, positive
Warning
Caution, attention
Error
Danger, destructive
Neutral
Surfaces, text, lines

Icons

An outline set on a 24px grid, drawn in one consistent stroke and colored with currentColor, so every icon inherits text color and themes automatically. Click any icon to copy its SVG.

Typography

One typeface, Coinbase Sans, self-hosted so it renders on every device. Three weights: regular (400), medium (500), and bold (700). There is no 600, so 600 renders as bold.

Display
60px · Bold
The sculpture is already
Title
30px · Bold
complete within the marble block,
Heading
22px · Bold
before I start my work.
Subheading
16px · Medium
I just have to chisel away
Body
15px · Regular
the superfluous material.
Label
13px · Medium
Michelangelo
Caption
12px · Regular
On carving David, 1501 to 1504

Spacing

An eight-step scale on a 4px base. Use the tokens, not arbitrary pixels, so rhythm stays consistent across the system.

space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-6 · 24px
space-8 · 32px
space-12 · 48px
space-16 · 64px

Grid

A twelve column grid governs page layout. Columns are fluid, gutters come from the spacing scale, and content sits inside a centered container. Compose a layout by spanning columns, then let it fold to a single column as the viewport narrows.

12
Columns
24px
Gutter, from space-6
1060px
Max container width
900px
Folds to one column

Columns and spans

6
6
4
4
4
3
3
3
3
8
4
12

Breakpoints

Compactbelow 900pxLayouts fold to a single column and the sidebar collapses into a drawer.
Regular900px and upThe full twelve column grid, with the sidebar shown alongside content.
Container1060px capContent stops widening and centers, so line lengths stay readable as margins grow.

Radius

Four options. Sharp and pill are the button choices, 4px is the field default, and 14px softens panels.

Sharp
0px
Field
4px
Panel
14px
Pill
full

Elevation

On a dark UI, elevation is mostly a border and a soft shadow. Four levels, from flat surfaces to modals.

Flat
Surfaces
Raised
shadow-1
Overlay
shadow-2
Modal
shadow-3

Motion

Three durations and one easing curve. Motion is quick and purposeful. Hover the tiles to feel each speed.

Fast
120ms
Base
200ms
Slow
340ms

Standard easing is cubic-bezier(0.22, 1, 0.36, 1). Every transition and smooth scroll is disabled under prefers-reduced-motion.

Accessibility

Savant targets WCAG 2.1 AA. Accessibility is a property of the components, so you inherit most of it for free.

✓
Color contrast
Text and interactive colors meet AA against their surfaces.
✓
Visible focus
Every control shows a 3px purple focus ring on keyboard focus.
✓
Keyboard operable
All actions work without a mouse, in a logical tab order.
✓
Target size
Interactive targets are at least 44px, with room to spare.
✓
Reduced motion
Animations and smooth scrolling stop under prefers-reduced-motion.
✓
Semantic markup
Real buttons, labels, and ARIA roles, not styled div soup.

Contrast, checked

White on Purple 600 9.5:1 White on Grey 900 18:1 Ink on Amber 500 9.4:1