Colors
The RDS color system uses a single ink color at varying opacities for hierarchy, plus semantic tokens for interactive states.
Color Tokens
| Token | CSS Variable | Usage |
|---|---|---|
| Background | --background | Page background (warm off-white in light mode) |
| Foreground | --foreground | Primary text, full ink |
| Card | --card | Card/surface background |
| Card Foreground | --card-foreground | Text on cards |
| Muted | --muted | Subtle backgrounds, disabled states |
| Muted Foreground | --muted-foreground | Secondary text, placeholders |
| Border | --border | All borders and dividers |
| Ring | --ring | Focus rings |
| Primary | --primary | Primary interactive elements |
| Destructive | --destructive | Errors, delete actions |
| Accent | --accent | Hover states on ghost elements |
Swatches
bg-background
bg-foreground
bg-card
bg-muted
bg-primary
bg-destructive
bg-accent
border