Compare colour directions in light and dark mode
Each direction uses the same small product surface so accent, canvas, border, text, and status choices can be judged against both modes at once.
Change the accent, keep the system.
These samples use the same hierarchy as Harbour: a restrained page canvas, raised surfaces, a single action accent, clear text contrast, and status colours only where they carry meaning.
Light previews
White surfaces, soft canvas, dark ink.
Dark previews
Deep canvas, lifted panels, bright accent.
Same layout
Only theme values change between directions.
Applied theme colour samples
These directions now map to runtime theme tokens. Use the previews to compare them, then apply one to the whole starter kit.
Current brand default
Harbour Teal
Accent
#0f766e
Soft
#d7f4ec
Dark
#45bba6
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Sharper B2B product UI
Cobalt
Accent
#2563eb
Soft
#dbeafe
Dark
#60a5fa
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Cool monochrome product UI
Mono Tone
Accent
#475569
Soft
#e2e8f0
Dark
#94a3b8
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Operations and finance
Forest
Accent
#15803d
Soft
#dcfce7
Dark
#4ade80
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
High-urgency tools
Ruby
Accent
#dc2626
Soft
#fee2e2
Dark
#f87171
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Warm editorial workspaces
Sand
Accent
#a16207
Soft
#f5e6c8
Dark
#d6ad60
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Quiet enterprise surfaces
Graphite
Accent
#374151
Soft
#e5e7eb
Dark
#9ca3af
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Creative and brand-forward products
Iris
Accent
#7c3aed
Soft
#ede9fe
Dark
#a78bfa
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Bold consumer and media apps
Sunset
Accent
#ea580c
Soft
#ffedd5
Dark
#fb923c
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Vibrant, expressive interfaces
Aurora
Accent
#c026d3
Soft
#fae8ff
Dark
#e879f9
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Editorial docs and portfolios
Ink
Accent
#1d4ed8
Soft
#e0e7ff
Dark
#93c5fd
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
Planning, docs, and analytics
Aegean
Accent
#0e7490
Soft
#cffafe
Dark
#22d3ee
Light mode
Deploy queue
Three services ready for review
Dark mode
Deploy queue
Three services ready for review
When to use each direction
Use this as a quick decision map before promoting any candidate colour into the CSS theme block.
| Direction | Best fit | Accent | Dark accent |
|---|---|---|---|
| Harbour Teal | Current brand default |
#0f766e
|
#45bba6
|
| Cobalt | Sharper B2B product UI |
#2563eb
|
#60a5fa
|
| Mono Tone | Cool monochrome product UI |
#475569
|
#94a3b8
|
| Forest | Operations and finance |
#15803d
|
#4ade80
|
| Ruby | High-urgency tools |
#dc2626
|
#f87171
|
| Sand | Warm editorial workspaces |
#a16207
|
#d6ad60
|
| Graphite | Quiet enterprise surfaces |
#374151
|
#9ca3af
|
| Iris | Creative and brand-forward products |
#7c3aed
|
#a78bfa
|
| Sunset | Bold consumer and media apps |
#ea580c
|
#fb923c
|
| Aurora | Vibrant, expressive interfaces |
#c026d3
|
#e879f9
|
| Ink | Editorial docs and portfolios |
#1d4ed8
|
#93c5fd
|
| Aegean | Planning, docs, and analytics |
#0e7490
|
#22d3ee
|