UI Style Guide
Cool Ivory theme for dashboard and HTML visualizations.
Theme: Cool Ivory
| Element |
Color |
| Background |
#fffff8 |
| Text |
#2c2c2c |
| Secondary BG |
#f8f8f5 |
| Border |
#e8e8e3 |
Color Palette
| Name |
Color |
Use |
| Accent Blue |
#4a6fa5 |
Links, headings, primary actions |
| Success |
#5a8a6a |
Completed, active, positive |
| Warning |
#b8923a |
Pending, caution |
| Danger |
#b85a5a |
High priority, errors |
| Info |
#5a8a9a |
Informational badges |
Typography
- Font: Libre Baskerville (serif)
- Mono: SF Mono, monospace
- Feel: Classic paper, readable
Design Principles
- Simple tables over multi-section cards
- Muted colors — all colors softened to match ivory
- Minimal styling — let content speak
- Mobile-first responsive — all HTML must work on mobile
Mobile Breakpoints
| Breakpoint |
Target |
Key Changes |
| <=768px |
Tablets/phones |
Cards instead of tables, stacked filters, 16px inputs |
| <=480px |
Small phones |
Further reduced padding/fonts |
Reference Files
dashboard/src/pages/style-guide.astro — Live component referencedashboard/src/styles/global.css — CSS variables