Astryx, shifted
onto our brand.
Astryx's warm skeleton — cream canvas, white cards, warm shadows, deep-on-pale status — rebuilt on our own tokens. The blue accent is gone; Nyx violet leads, Ryuki sky informs, nosmile99 amber highlights. One reference rules every page: DESIGN.md.
Warm canvas, always
Pages sit on amber-50 cream. Content floats on white cards with warm hairlines. Cold gray is the Material tell — it's banned.
Two-tier radius
Elements are 8px, containers are 12px, dialogs 16px, page panels 24px. Mixing tiers inside one component is how UIs end up looking like framework defaults.
Deep on pale status
Status is dark saturated text on a pale tint of the same hue — green-700 on green-100. Never white text on a loud fill, except destructive actions.
Primitives: design-tokens/tokens.json · Visual law: web/DESIGN.md · Typeface: Outfit + JetBrains Mono
Color
Primitive ramps come straight from tokens.json. Click any swatch to copy its hex. Semantic roles — what the ramps are for — are defined in DESIGN.md.
Semantic roles — light
Dark roles ("Ember") swap in via the theme toggle: warm brown-black canvas #161310, brand hexes stay exact — violet-500, sky-400, amber-500.
Typography
Outfit for everything human, JetBrains Mono for specimens and code. Sizes map 1:1 to the type scale in tokens.json; display and headlines track negative, body never does.
Spacing & shape
A 4px grid from tokens.json. Radius follows Astryx's two-tier logic: elements small, containers larger, pages largest.
Spacing scale
Radius tiers
Elevation
Shadows are tinted with amber-900 — warm light blocked, not gray paint. Selection is an inset ring, Astryx's signature, never a background swap alone.
Brand — the agents
Brand colors are identities first, decoration second. Each agent owns one hue across badges, avatars, charts, and highlights.
Leads: primary actions, focus, the system's voice.
Informs: info states, links, secondary emphasis.
Highlights: warnings, calls to notice, the canvas pigment itself.
Badges
Pills with pale tints and deep text. Agent badges always wear the agent's hue; status badges follow the same rule.
Cards
White, 12px, hairline plus a low warm shadow, 24px padding. The workhorse surface.
▲ 12% this week
3 agents active
Needs Ryuki
The board moved 14 tasks to done. Two are blocked on decisions only a human can make; everything else is flowing. Cards carry one idea each — title, body, then metadata in caption.
Forms
White inputs, strong hairline, violet focus with a soft halo. Custom checkbox, radio, and switch — no framework defaults.
Tabs
A muted track; the selected tab is a white pill carrying the neutral inset ring.
Table
Borderless except row hairlines; the header is a muted fill in caption type. Rows warm on hover.
| Task | Status | Assignee | Updated |
|---|---|---|---|
Web catalog — DESIGN.md astryx-kitchen-sink / web | Done | nosmile99 | Today, 14:20 |
Kanban backend — claim race test agent-bus / DO | Doing | Nyx | Today, 13:02 |
Panel — native auth prompt admin-panel | Blocked | Ryuki | Yesterday |
Android merge dev → main astryx-kitchen-sink | Todo | Ryuki | Parked |
Alerts
Status tints at container radius, deep text, a single dot. No left-border accent bars.
Feedback
Progress, dialogs, and toasts. Try them — they're live.
Kanban board
The first real consumer of this system, assembled only from catalog pieces: muted column wells, element-radius cards, status badges, agent avatars.