Astryx, shifted. A web design system with its own voice — not Material in a costume.

Same token architecture as the Astryx taxonomy — color roles, type scale, spacing, radii — re-derived for the web: darker, denser, sharper. Hairlines instead of shadows, 6px buttons instead of pills, three brand accents that mean people, not decoration.

Dark-first Tokens: tokens.json (W3C) Spec: DESIGN.md No framework
01 — Foundations

Color

Primitive ramps from tokens.json. Violet, sky and amber double as agent identities: Nyx, Ryuki, nosmile99. Neutrals carry the whole UI; brand color is rationed.

Violet 500#A855F7 · Nyx
Violet 600#9333EA · primary
Sky 400#38BDF8 · Ryuki
Sky 500#0EA5E9
Amber 500#F59E0B · nosmile99
Amber 600#D97706
Neutral 950#0A0A0A · canvas
Neutral 900#171717 · surface
Neutral 800#262626 · raised
Neutral 500#737373 · muted
Red 600#DC2626 · error
Green 600#16A34A · done

Typography

System sans — no webfont, renders native everywhere. Mono is the structural voice for labels and metadata.

Display · 28/32Boards that read as people
Title · 20/26Kanban backend — BusDO
Heading · 16/22Claim rules & assignment
Body · 14/20Agents claim tasks over the API; humans get the UI. Status is color plus label, never color alone.
Small · 13/18Secondary text sits at neutral 400 on dark surfaces.
Micro · 11 monoSection header · metadata · badges

Spacing — 4px base

space-1 · 4
space-2 · 8
space-3 · 12
space-4 · 16
space-6 · 24
space-8 · 32
space-12 · 48
02 — Actions

Buttons

Rectangles at 6px radius — the single loudest difference from Material. One primary per region. Pills are for badges, never for actions.

Badges — identity & status

Assignee badges carry the agent's brand color at 15% tint. Status badges pair color with a label.

● Nyx ● Ryuki ● nosmile99
Todo Doing Done Blocked
03 — Forms

Inputs

Surface fill, hairline border, focus = violet border + soft ring (a tint, not a glow). Errors are designed, not defaulted.

Shown on the board and in agent API responses.
Slug may only contain lowercase letters, digits and dashes.
✓Notify agents on the bus when a task is assigned
Allow claims on archived projects
Heartbeat presence in the panel
04 — Proof of content

The board is a real screen, not a specimen

The kanban UI Ryuki actually uses — projects → tasks → todos, with claim state visible. If the system can't carry this screen, it isn't a system yet.

Todo2

Web catalog for Astryx

DESIGN.md method, tokens from tokens.json. No Material shapes.

nosmile992/6 todos

SG credential census

Enumerate before the VM dies 2026-12-01. Names only, never values.

nosmile990/4 todos
Doing2

Kanban backend in BusDO

projects → tasks → todos, atomic claim, cascade delete.

Nyx6/10 todos

Panel: agent registration fix

Registration broke in the panel; API path works.

Nyx1/3 todos
Blocked1

TwinApps retest on Transsion

Waiting on Ryuki: tap Authorize Shizuku, screenshot the result.

Ryukiwaiting-human
Done2

DO bus cutover

Old Python hub off; DO is the only bus. Hooks on all channels.

Nyxnosmile99

Android kitchen-sink (parked)

Build green on dev — parked by Ryuki: too Material. Web first.

nosmile99parked

Todo rows

48px rows, custom checkbox, owner on the right. Tap to toggle — try it.

✓Write DESIGN.md (Astryx shifted)nosmile99
✓Generate CSS variables from tokens.jsonnosmile99
Browser-test on mobile Chrome before calling it donenosmile99
Deploy to Pages and hand Ryuki the linknosmile99
05 — Mobile

Phone frame — tab bar & toast

Mobile-first: the panel and board are used from a phone. Bottom tab bar at 48px+ targets, toast above it, safe-area respected.

Night-shift digest
While you were away

Nyx shipped the /poll limit param. Kanban backend at 6/10 todos. One task is blocked on you: TwinApps retest.

● Task claimed by Nyx — Kanban backend
▦Feed
▤Board
◉Agents
⚙Settings
Anti-default check: no pill buttons, no FAB, no gradient hero, no glassmorphism, no elevation shadows. If a screenshot of this page could be mistaken for a Material or shadcn template, the design failed — see the anti-defaults in DESIGN.md.