Brand tokens
The Clinloop brand sits on three primary colors plus a cream surface:
| Token | Light | Hex |
|---|---|---|
| Teal (primary) | #36BAB0 | |
| Navy (deep) | #0E2C56 | |
| Clay (warm accent) | #B35D3A | |
| Cream (page surface) | #FBF8F1 | |
| Gold (top-rated) | #D4A64A |
Every token is a CSS custom property exposed by
packages/ui/src/theme/base.css. Reference them via
var(--teal-500), never as raw hex literals.
Three theme variants per web app
| App | Accent | Background |
|---|---|---|
| Facility | Teal | Cream (light) |
| Agency | Burnt orange | Cream (light) |
| Admin | Cyan | Navy (dark) |
All three use the same CSS variable names — components adapt
automatically. See apps/web-*/src/theme.css.
Typography
- Body — Switzer (300/400/500/600/700)
- Display — Inter, with
letter-spacing: -0.02em - Mono — SF Mono /
ui-monospace
Full token reference and component gallery arrive in Phase 3 of the docs build.