Tokens and components for Veyrnox.ai. Rule of the system: aqua does things, amber is money. Chrome stays monochrome; content thumbnails carry the color.
TARGET: NEXT.JS + TAILWIND · WEB 1440 · MOBILE 390 · WCAG 4.5:1 BODY TEXT
01 · COLOR TOKENS
Base
#0A0A0Bbg-base
True-black app background. OLED-dark.
Panel
#141416bg-panel
Elevated cards, sheets, inputs.
Hairline
#26262Aborder
All borders and dividers. 1px.
Field edge
#64646Afield
The outline of an input, textarea or select, nothing else. 3:1 on base and panel.
Text
#F2F2F3fg
Primary text. Body copy #C9C9CF.
Muted
#9A9AA3fg-muted
Secondary text, micro-labels.
Aqua
#3EE6C4accent
Actions, selection, live states. Hover #6FF2D8. Ink text #06231F on fills.
Amber
#E4A93Cmoney
Credit amounts & money — everywhere, only money.
Red
#FF5C47danger
Failure and errors. A refund is credits coming back, so it is not red.
Blue
#8BA7FFwarn
Warnings and notices, with the △ glyph. Never amber.
PROHIBITED: LIME / CHARTREUSE FAMILY (#B0FF00–#D8FF80) — ANYWHEREAQUA ON BLACK: LARGE TEXT + BUTTONS ONLY · BODY TEXT STAYS NEUTRAL
02 · TYPE — ARCHIVO + JETBRAINS MONO
Index title 52 / 76 / 92ARCHIVO 900 · −0.04EM · 0.94 · PRICING, MODELS, TEMPLATES, TOOLS, GUIDES · THE HOME PAGE'S HERO AND CLOSING LINES
Detail title 40 / 56ARCHIVO 900 · −0.04EM · 0.94 · ONE MODEL, TEMPLATE, GUIDE OR LEGAL PAGE · SECTION HEADINGS
Studio screen title 24–30ARCHIVO 900 · −0.02EM
Card / section title 15–17ARCHIVO 700
Body 13–14 / 1.55 — neutral #C9C9CF on black, never aquaARCHIVO 500
• Thumbnail carries the color; chrome (border, text) stays monochrome.
• Cost lives in mono, tabular, amber — never merges with title weight.
• Hover: scale-[1.015] over 200ms ease-out.
06 · BALANCE PILL
96 cr
The counter tick −16 floats up 12px and fades over 1.8s ease-out after a spend.
08 · ACCESSIBILITY — COLOUR-BLIND SAFE
NEVER COLOUR ALONE
Every semantic state carries an unambiguous glyph. Aqua ✓ (action / success), amber ◆ (money / premium), red ✕ (failure), blue △ (warning), amber ★ (featured). A monochrome print, deutan / protan / tritan vision, or Windows High Contrast still separates them.
✓ Body text at #C9C9CF on #0A0A0B — 12.6:1, AAA
✓ Aqua on black only for large text / buttons / chart edges
✓ Amber reserved for money / premium — same rule, same glyph
✓ Red used only with ✕ glyph and a text label
✓ Focus ring 2px aqua, offset 2px, on every interactive element
✓prefers-contrast: more boosts hairlines and mutes