Design System Reference — demonstrates the system defined in directives/design.md.
Do not copy this file into new projects.
Color schemeActive: —
Design System Reference
Visual showcase of every token and component defined in directives/design.md.
Buttons
Hover to see raise effect · Primary: translateY(-1px) + shadow-md · Secondary: accent-light tint
Checkboxes & Task Rows
Review design tokens (pre-checked)
Update component library (hover state demo)
Publish to GitHub Pages (unchecked default)
Form Inputs
Typography
--font-xs · 12px
Regular 400Medium 500Bold 600
--font-sm · 13px
Regular 400Medium 500Bold 600
--font-base · 15px
Regular 400Medium 500Bold 600
--font-lg · 17px
Regular 400Medium 500Bold 600
--font-xl · 20px
Regular 400Medium 500Bold 600
--font-2xl · 24px
Regular 400Medium 500Bold 600
Colour Palette
#F5F5F3
--color-bg
#FFFFFF
--color-surface
#E2E0DB
--color-border
#C8C5BE
--color-border-hover
#1A1A1A
--color-text-primary
#6B6860
--color-text-secondary
#3D6B4F
--color-accent
#2F5540
--color-accent-hover
#EAF2ED
--color-accent-light
#C0392B
--color-danger
Cards
Static card
This card has no interaction. It sits at rest with shadow-sm and a 1px border.
Interactive card — hover me
On hover: border shifts to --color-border-hover and shadow upgrades to shadow-md.
Placeholder text demonstrates how body copy sits inside a card at --font-base (15px) with
--color-text-primary (#1A1A1A). Line height is 1.5. The card padding is 20px 24px, giving
generous breathing room around the content on both iPad and desktop.
Spacing Scale
--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 20px
--space-6 · 24px
--space-8 · 32px
--space-10 · 40px
Dashboard Example — Activity Heatmap
Latest Completion
53%
Jun 4
Missed Tasks
30
as of Jun 4
7-Day Average
8%
last 7 days with data
Worst Day (7d)
0%
Thu, May 21
Daily team task completion over the past 14 weeks · click any cell for details