Components
Accent picker
Seven swatches personalize dashboard surfaces while leaving brand primary unchanged.
On this page
Purpose and placement
Seven swatches personalize dashboard surfaces while leaving brand primary unchanged.
Anatomy
- Named swatches
- Selected checkmark
- Theme-dependent RGB
Contract
| Input or boundary | Behavior |
|---|---|
| Options | Default, Sage, Sky, Rose, Lavender, Peach, Gold |
| Change | PATCH accentColor; dispatch theme event |
| Check foreground | Varies for default versus custom |
States and feedback
- Default selected
- Custom swatch selected
- Light/dark tuple change
Interaction and composition
Apply the selected option’s source RGB and matching foreground rule. An accent option is not a replacement brand palette; purple remains the settings and marketing brand.
Responsive behavior
Grid has four columns on phones and seven from sm upward. Swatches are 48px square.
Accessibility contract
Each swatch has an aria-label, but selected state is conveyed by a glyph rather than aria-pressed. Add a programmatic selection state as remediation.
Known implementation gaps
The UI updates immediately and ignores failed persistence. Verify contrasts for every option rather than assuming the default is representative.
Source references
| Repository file | Responsibility |
|---|---|
| app/settings/style/page.tsx | Swatches and change handler |
| lib/style-preferences.ts | RGB definitions |
Examples from the app
Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0