DSColors
Color system
Semantic color system with WCAG AA compliance. Click any swatch to copy the hex value.
Brand palette
Ink Purple#2A053E
Click to copy--purple · bg-purple-inkAuthority · Hero, footer
Action Purple#510C76
Click to copy--purple-action · bg-purpleInteractive · CTAs, links
Light Purple#7911B0
Click to copy--purple-lightDecorative hover
Pale Purple#FBF9FF
Click to copy--purple-pale · bg-brand-paleGhost tint fills
Accent
Deep Crimson#91002A
Click to copy--crimsonError text, emphasis
Vibrant Crimson#EB0045
Click to copy--crimson-action · destructiveError actions only
Tactical highlighting only. Error states, form validation, strategic emphasis. Never decorative.
Surfaces
White#FFFFFF
Click to copybg-whiteCanvas
Surface Muted#FAFAFB
Click to copybg-surface-mutedAlternating sections
Surface Alt#F5F5F7
Click to copybg-surface-altTestimonials, footer
Editorial tints
Slate#F5F5F7
Click to copytint-slateSolutions panels
Mist#F1E9F5
Click to copytint-mistSolutions panels
Sage#EEF2ED
Click to copytint-sageSolutions panels
Sand#F8F3ED
Click to copytint-sandSolutions panels
Gray scale
Gray 50#FAFAFA
Hover fills
Gray 100#F5F5F5
Muted card bg
Gray 200#EEEEEE
Borders, inputs
Gray 300#D1D5DB
Lines only
Gray 500#595959
5.6:1Captions · WCAG AA
Gray 600#4D4D4D
6.5:1Deep muted
Gray 700#333333
10.4:1Body text
Gray 900#0D0D0D
15.4:1Headings
Text hierarchy
text-primary
Headings, strong labels · 15.4:1
text-secondary
Body text · 10.4:1
text-muted
Captions, metadata · 5.6:1
text-inverse
On dark surfaces · —
Text on purple
Headings — 100%--text-on-brand
Body text — 80% opacity~8:1 contrast
Labels — 90% opacity~11:1 contrast
Ghost — 55%20sp+ only
Borders
No shadows. Physicality through separation only.
Hairline
--border-hairline
Default
--border
Strong
--border-strong
Brand
--border-brand
Status
Error
#FFF1F4
#91002A
Success
#F0FDF4
#166534
Warning
#FEFCE8
#854D0E
Info
#FBF9FF
#2A053E