Chapter 02

Color: mostly quiet, then electric

BackOffice is a light, calm, white-surfaced brand. Color is spent like money — rarely and deliberately. When it appears, it's the teal-to-aqua gradient, and it means "this is the point."

Signature

The gradient

Brand gradient135° · #008080 → #0ddbd4
Soft washthe same stops at 12% opacity
Where it's allowed: one highlighted phrase per headline, primary buttons, stat numerals, the logo container, and small accents (step numbers, icons). The soft wash backs callout panels. That's the whole list — the gradient never fills page backgrounds, never colors body text, and never appears twice in one viewport.
Palette

Core colors

Teal
The lead brand color; gradient start, links, focus accents.
#008080 · rgb(124 92 255)
var(--brand)
Aqua
Gradient end. Never used alone under white text.
#0DDBD4 · rgb(33 212 253)
var(--brand-2)
Ink
Headlines and body text on light surfaces.
#0E1116 · rgb(14 17 22)
var(--ink)
Muted
Secondary text, captions, supporting copy.
#5B6473 · rgb(91 100 115)
var(--muted)
Surface
The default page background. We are a white brand.
#FFFFFF · rgb(255 255 255)
var(--surface)
Surface 2
Alternating section tint; cards on white use it for headers.
#F7FBFB · rgb(247 251 251)
var(--surface-2)
Line
Hairline borders — 1px, everywhere. Never darker than Line 2 (#D8DDE7).
#E6E9EF · rgb(230 233 239)
var(--line)
Night
Dark bands, OG cards, social posts, video end cards.
#0B0D12 · rgb(11 13 18)
var(--bg)
Functional

Colors that mean something

Marketing surfaces use the top row; the product UI uses the bottom row for record status. Functional colors are for state — never for decoration.

Accent Green
Marketing: positive deltas, checkmarks.
#21E6A4 · var(--accent)
Amber
Marketing: caution, "expiring", ratings.
#FFB547 · var(--warn)
Soft Red
Marketing: negative deltas, "don't" labels.
#FF6F6F · var(--danger)
Gold
Premium tiers and "featured" tags only.
#C89B3C · var(--gold)
Success
Product UI status token.
#10B981 · success
Info
Product UI status token.
#3B82F6 · info
Warning
Product UI status token.
#F59E0B · warning
Error
Product UI status token.
#EF4444 · error
Proportion

The 90 / 10 rule

On any surface we design, roughly nine-tenths is neutral. If a layout feels colorful, it's off-brand.

White surfaces
Tints
Night
Brand
62% white18% tinted panels10% dark bands10% gradient & accents
Where dark is allowed: the "replaces your stack" pricing band, social and OG cards, video end cards, and documentation/legal pages. Product marketing pages are light — a single dark band mid-page is the rhythm of the home page, not a dark theme.
Accessibility

Contrast is non-negotiable

PairRatioVerdict
Ink on White~18 : 1AAA — default for all text.
Muted on White~6 : 1AA — fine for secondary text ≥ 13px.
White on Night~19 : 1AAA — dark bands and cards.
White on Teal~4.8 : 1Large/bold text only — buttons and headlines, never body copy.
Ink on Aqua~10.1 : 1AAA — if text must sit on aqua, it's ink, never white.
White on the gradientvariesAllowed only ≥ 14px semibold (buttons, stat numerals) — the aqua end is the constraint.
Rule of thumb: text is Ink or Muted on light, white on Night. Color carries emphasis, not information — anything communicated by color alone (a status, a delta) also gets a label or icon.