Color
Navy foundation, teal accent, and semantic roles expressed as RevUp CSS variables. Prefer those variables over hard-coded hex in components.
Brand colors
RevUp identity: navy primary, teal growth accent, blue→green gradient used sparingly for emphasis.
Brand primitives
Navy leads identity and primary actions. Teal is the accent and success signal — use it deliberately, never as a second primary.
-
- Name
- Navy
- Token
--ru-navy- Hex
#0F263A
-
- Name
- Navy deep
- Token
--ru-navy-deep- Hex
#0A1929
-
- Name
- Navy hover
- Token
--ru-navy-hover- Hex
#0A1B2A
-
- Name
- Teal
- Token
--ru-teal- Hex
#00D698
-
- Name
- Teal hover
- Token
--ru-teal-hover- Hex
#00C089
-
- Name
- Grad blue
- Token
--ru-grad-blue- Hex
#3382C6
-
- Name
- Grad green
- Token
--ru-grad-green- Hex
#1FDDA3
-
- Name
- White
- Token
--ru-white- Hex
#FFFFFF
-
- Name
- Black
- Token
--ru-black- Hex
#000000
Surfaces
Structure the page with canvas, raised strips, and inverse bands — not glassmorphism.
Surfaces
White canvas with raised strips for section rhythm. Inverse navy for hero bands and dark chrome.
-
- Name
- Canvas
- Token
--color-surface-canvas- Hex
#FFFFFF
-
- Name
- Default
- Token
--color-surface-default- Hex
#FFFFFF
-
- Name
- Elevated
- Token
--color-surface-elevated- Hex
#FFFFFF
-
- Name
- Raised
- Token
--color-surface-raised- Hex
#F4F7FA
-
- Name
- Recessed
- Token
--color-surface-recessed
-
- Name
- Inverse
- Token
--color-surface-inverse- Hex
#0F263A
-
- Name
- Inverse deep
- Token
--color-surface-inverse-deep- Hex
#0A1929
Text
Keep body copy on strong/default. Use subtle and muted for supporting chrome only.
Text
Navy on light surfaces. Subtle and muted use opacity so they stay in family with brand navy.
-
- Name
- Strong
- Token
--color-text-strong- Hex
#0F263A
-
- Name
- Default
- Token
--color-text-default- Hex
#0F263A
-
- Name
- Subtle
- Token
--color-text-subtle
-
- Name
- Muted
- Token
--color-text-muted
-
- Name
- Inverse
- Token
--color-text-inverse- Hex
#FFFFFF
-
- Name
- Disabled
- Token
--color-text-disabled
-
- Name
- Link
- Token
--color-link- Hex
#3382C6
Borders
Hard 1px edges are part of the visual language. Prefer border tokens over ad-hoc grays.
Borders
Transparent navy tints — not unrelated grays. Strong borders for controls that need more contrast.
-
- Name
- Subtle
- Token
--color-border-subtle
-
- Name
- Default
- Token
--color-border-default
-
- Name
- Strong
- Token
--color-border-strong
-
- Name
- Input
- Token
--color-border-input
Feedback
Success = teal. Error and warning support forms and alerts. Focus rings use the teal halo.
Feedback
Success rides teal. Error and warning are supporting only — always pair status color with a label or icon.
-
- Name
- Success
- Token
--color-success- Hex
#00D698
-
- Name
- Error
- Token
--color-error- Hex
#E11D48
-
- Name
- Warning
- Token
--color-warning- Hex
#D97706
-
- Name
- Focus ring
- Token
--color-focus-ring- Hex
#00D698
-
- Name
- Focus halo
- Token
--color-focus-halo
Semantic roles
Palette primitives stay fixed. UI consumes semantic roles so light and future dark themes can remap without rewriting components.
Semantic roles
Components consume roles like var(--color-brand), not raw primitives. Brand is navy; accent is teal.
-
- Name
- Brand
- Token
--color-brand- Hex
#0F263A
-
- Name
- Brand hover
- Token
--color-brand-hover- Hex
#0A1B2A
-
- Name
- Accent
- Token
--color-accent- Hex
#00D698
-
- Name
- Accent hover
- Token
--color-accent-hover- Hex
#00C089
-
- Name
- Action primary
- Token
--color-action-primary- Hex
#0F263A
-
- Name
- Action accent
- Token
--color-action-accent- Hex
#00D698
-
- Name
- On primary
- Token
--color-action-on-primary- Hex
#FFFFFF
-
- Name
- On accent
- Token
--color-action-on-accent- Hex
#0F263A
Gradient accent: --ru-gradient → linear-gradient(135deg, #3382C6, #1FDDA3). Use for text treatments and border accents, not as a full-bleed wash behind the logo.