Colors

The ONCE palette is intentionally small. Four brand colors define the identity; three utility colors handle feedback states. Hierarchy is achieved through opacity, not additional hues.

Brand Colors

ONCE Blue#3A455C—once-blue

Primary accent for buttons, active states, and backgrounds.

ONCE Blue Light#6B7A99—once-blue-light

Text on dark backgrounds where the base blue lacks contrast.

ONCE White#FFFFFF—once-white

Primary text color on all dark backgrounds.

ONCE BG#070D19—once-bg

Page backgrounds and dark sections across the site.

Utility Colors

Used exclusively for feedback and status communication.

Mr. Approval#15803D—mr-approval

Success states and confirmations.

Mr. Warning#CE6F09—mr-warning

Warning states and cautions.

Mr. Rejection#F34158—mr-rejection

Error states and destructive actions.

Opacity Scale

On dark backgrounds, text hierarchy is built entirely with opacity on --once-white.

Primary — 100%

text-once-white

Secondary — 70%

text-once-white/70

Muted — 60%

text-once-white/60

Subtle — 50%

text-once-white/50

Very subtle — 40%

text-once-white/40

CSS Variables

All colors are available as CSS custom properties defined in :root:

:root {
  --once-blue: #3A455C;
  --once-blue-light: #6B7A99;
  --once-white: #FFFFFF;
  --once-bg: #070D19;
 
  --mr-approval: #15803D;
  --mr-warning: #CE6F09;
  --mr-rejection: #F34158;
}

Tailwind Classes (dev-app)

In the dev-app marketing site, these colors are also mapped as Tailwind utilities:

CSS Variable	Tailwind Class
`--once-blue`	`once-blue`
`--once-blue-light`	`once-blue-light`
`--once-white`	`once-white`
`--once-bg`	`once-bg`
`--mr-approval`	`mr-approval`
`--mr-warning`	`mr-warning`
`--mr-rejection`	`mr-rejection`

Surface Tokens (docs)

The documentation site adds a layer of semantic surface tokens that adapt between light and dark modes:

Token	Light	Dark	Usage
`--page-bg`	`#f8fafc`	`#070D19`	Page background
`--surface`	`#ffffff`	`#0a1120`	Card / panel background
`--surface-muted`	`#f2f5fb`	`#0c1424`	Subtle surface
`--surface-strong`	`#e8edf5`	`#111d33`	Emphasized surface
`--text-strong`	`#0f172a`	`#d7e0f2`	Primary text
`--text-subtle`	`#4b5563`	`#8da1c0`	Secondary text

Overview AI Features