Introduction
Scorton UI is the Scorton design system.
It is the shared visual and interaction language for Scorton products — starting with CyberScor, and ready for the rest of the platform.
Why it exists
Without a system, each surface invents its own navy, yellow, and type. Scorton UI locks the brand into tokens and components so product, docs, and marketing stay aligned.
Brand pillars
| Pillar | Spec |
|---|---|
| Accent | #F9C92B |
| Navy | #0F0F13 / #110032 |
| Mode | Dark-first |
| CTA | Yellow fill · black label |
| Effects | Glow cards · gradient dividers · hero wave text |
| Type | Montserrat / Ark Sans / Scal / Soya · Roboto / Roboto Neue · Inter |
What you get
- Fundamentals — tokens for color, typography, icons, motion, layout
- Components — copy-friendly, shadcn-style React primitives
- Documentation — VitePress site for designers and engineers
Docs structure is inspired by Mozilla Protocol; the look is pure Scorton.
Scope
In scope: Scorton product UI (CyberScor and future apps using this system).
Out of scope as defaults: the separate FDE marketing palette (ink / electric / lime) unless you intentionally map it onto Scorton UI tokens.
Stack
- Design tokens (CSS variables + JSON)
- React + CVA (shadcn pattern)
- Lucide icons
- VitePress documentation