System

The system, live

Every token, component, and state on this page is the real thing, rendered from the same source the site is built from.

The source

Every token, live

Imported directly from tokens/eyenus.tokens.json at build — this list cannot drift from the canonical source. Search, filter by group, click to copy.

129 of 129 tokens

Type

Every size step

font.size.xsSeeing is understood
font.size.smSeeing is understood
font.size.baseSeeing is understood
font.size.lgSeeing is understood
font.size.xlSeeing is understood
font.size.2xlSeeing is understood
font.size.3xlSeeing is understood
font.size.4xlSeeing is understood
font.size.5xlSeeing is understood
font.size.6xlSeeing is understood
font.size.7xlSeeing is understood

Space

Spacing scale

space.1
space.2
space.3
space.4
space.5
space.6
space.8
space.10
space.12
space.16
space.20
space.24
space.32

Radius

Corner radii

radius.sm
radius.base
radius.md
radius.lg
radius.xl
radius.2xl
radius.full

Elevation

Shadow levels

shadow.level0
shadow.level1
shadow.level2
shadow.level3
shadow.level4

Blur

Backdrop blur

sm
base
lg
poster

Iconography

The icon strip

arrow-right
check
chevron-down
close
download
external
eye
mail
menu
minus
node
plus

Components

The component gallery

Button — primary

See how

Button — secondary

Read the philosophy

Link

Rest, hover, focus, active — no separate visited color (docs/COMPONENTS.md). Typography inherits the surrounding paragraph; only color changes.

A sentence with an inline link in the middle of it, and one that opens in a new tab.

Card

Card heading

Container, optional media slot, heading, body, optional footer — the documented anatomy (docs/COMPONENTS.md), rendered at rest.

ThemeToggle

The real component, live — cycles system → dark → light.

Input

Spec-note, not a live demo: the site has no forms (docs/VOICE.md — “No forms”), so no Input component exists to instantiate. Anatomy per docs/COMPONENTS.md: label, control, optional helper/error text; error state is described structurally, arriving via ADR when a product needs semantic error color.

Themes

Both, live, right now

This entire page is the both-themes preview. Use the theme toggle in the nav — every token above, every component state, updates in place. There is no separate “light mode screenshot”: the system either works in both schemes or it doesn’t ship.

Continue: Motion, made visible