back to palettes
Color lane

Stratum Harbor Enterprise

Layered enterprise calm: blue-gray operational grounds, decisive harbor teal actions, high-contrast semantic states, and data ramps tuned for long-lived product screens.

Signature · the star
primary accentHarbor teal · #0f766e
Command indigo · #4f46e5
Operational copper · #c2410c
Neutrals · the ground
bg
#f6f8fb
surface
#ffffff
text
#111827
muted
#64748b
border
#cbd5e1
Semantic · functional accessory
success
warning
error
info
Ramps
accent
neutral
Download .css
Do
  • · Use neutral.50/100/white as a three-layer background stack for enterprise shells, panels, and raised cards.
  • · Reserve Harbor teal for the primary action, selected navigation, active filters, and one dominant progress indicator per view.
  • · Use indigo for command/focus affordances and copper sparingly for business-priority annotations so status colors remain unambiguous.
  • · For data visualization, start with accent, indigo, copper, success, info, warning, and error, then vary lightness within each ramp before introducing new hues.
  • · Pair text #111827 on bg #f6f8fb or surface #ffffff for long-form product copy; use white text on accent.500 for primary buttons.
Don't
  • · Do not use muted #64748b for body text below 16px on neutral.100 or tinted accent.50 surfaces.
  • · Do not place warning or error fills behind paragraphs; use them as badges, icons, thin alerts, or high-emphasis buttons only.
  • · Do not stack teal, indigo, and copper at equal saturation in a single control cluster; one hue should lead and the others should annotate.
  • · Do not use pure black shadows or pure white page backgrounds in dark mode; use the neutral ramp endpoints to preserve layered depth.
try it

remix with this palette

Drop Stratum Harbor Enterprise onto any UI language and swap the art style — the preview recolors live.

UI language
Palette · fixed
Stratum Harbor Enterprise
Art style
Landing Page
no composition
live preview · recolored + filled