Design tokens and primitives
Following WCAG 2.2 AA standards
Color Palette
Blue (Primary)
Green
Orange (CTA)
Teal
Yellow
Text
Border
Surface
Typography
Display - Lato Bold 44px
Hero and landing lead only. Tight tracking, line height 1.08
Heading 1 - Lato Bold 30px
Line height: 1.25
Heading 2 - Lato Bold 22px
Line height: 1.25
Heading 3 - Lato Bold 18px
Line height: 1.25
Body text - Open Sans 16px. This is the default paragraph style with a line height of 1.6 for comfortable reading.
Small text - Open Sans 14px
Monospace - Courier NewButtons
Canvas Chrome Controls
The design-canvas and board chrome — the left tool rail, the settings bar, its dropdowns, and popover triggers — share one light control look from components/board/chromeStyles.ts, distinct from the admin Button primitives above. New canvas controls derive from it, not the blue Button.
Treatment: surface background, border-color border, hover to color-bg, radius-md, and a focus-visible ring (tab to a control to see it). A native <select> renders the OS control, so canvas dropdowns use the SettingsSelect wrapper (appearance-none plus a matching chevron).
Form Inputs
This field is required
Badges
Sticky Note Palette
Yellow
Sample sticky note text
Blue
Sample sticky note text
Green
Sample sticky note text
Teal
Sample sticky note text
Orange
Sample sticky note text
Rose
Sample sticky note text
Purple
Sample sticky note text
Gray
Sample sticky note text
Cards & Elevation
Shadow SM
Subtle lift for cards
Shadow MD
Popovers & menus
Shadow LG
Modals & dialogs
WCAG 2.2 AA Compliance
Contrast Verification
- ✓ All text colors on white background meet AA contrast (4.5:1)
- ✓ Accessible variants used for green and yellow text
- ✓ Error color (#D7263D) verified for AA contrast
- ✓ Focus states visible on all interactive elements
- ✓ Reduced motion preferences respected
- ✓ Semantic HTML and ARIA labels on inputs