Design System
OnRamp's design tokens — colors, typography, and shape — are defined once in design-system/DESIGN.md and generated into CSS/Tailwind/JSON artifacts. DESIGN.md is the single source of truth; this section documents and showcases what it produces.
This docsite's own theme is built from those same tokens, so what you see here is the palette in use.
Tokens at a glance
| Group | Source token | Value |
|---|---|---|
| Brand primary | --color-primary | #893eff |
| Brand purple | --color-brand-purple | #5d13fa |
| Brand green | --color-brand-green | #5cefc5 |
| Body font | --font-body | system stack, 14px base |
| Radius (md / lg) | --radius-md / --radius-lg | 8px / 16px |
The full ramps (black, blue, green, orange, pink, purple, red, yellow — each 50→950) live in the generated tokens.css.
Palette
HTML mocks
Standalone HTML design mocks belong in this section. Put the file under docs/public/, build it on the OnRamp tokens (import the generated tokens.css), and add a short landing page here that links to it. The docs skill ships a ready-to-fork HTML template and walks through the steps.
No mocks registered yet — this section is scaffolded for future design-system documentation.