Career Discovery Brand & Design Guide

• Primary navy

  #16235A

  Token --navy / --primary / --blue · class bg-navy, text-navy

  Headings, body emphasis, navigation, contrast bands, the offer panel, navy buttons.

  Not for: Long body paragraphs on cream (use body text), and back-to-back full-height bands.

• Deep navy

  #0F1A45

  Token --navy-deep / --blue-deep · class bg-navy-deep

  The footer band and navy button hover, where a step down from primary navy is needed.

  Not for: Large content sections; it reads heavier than primary navy and flattens the page.

• Cream

  #F7F4EC

  Token --beige / --secondary / --muted · class bg-beige

  Page background, alternating editorial sections, inner surfaces of report thumbnails, avatar circles.

  Not for: Text colour, and stacking two cream bands in a row with no white or navy between them.

• White

  #FFFFFF

  Token --background / --card · class bg-background, bg-card

  Cards, working surfaces, the header, and sections that need to feel like a clean sheet.

  Not for: Text on cream or white, and full pages of stacked white cards with no cream breathing room.

• Orange brand

  #E8A93B

  Token --brand / --accent · class bg-brand, text-brand

  Primary CTAs, vertical markers, card top rules, check icons, the emphasised methodology badge.

  Not for: Backgrounds of whole sections, body text, or decorative fills with no meaning.

• Orange deep

  #D0942A

  Token --brand-deep · class bg-brand-deep, text-brand-deep

  Hover state of the orange CTA, eyebrow labels, editorial italic accents, numerals in lists.

  Not for: Large filled areas; it is a hover and text-accent colour, not a surface.

• Soft orange tint

  #FAF0DC

  Token --brand-soft · class bg-brand-soft

  Rare, very light highlight fill where cream is not distinct enough.

  Not for: Any use that competes with cream as a section background.

• Body text

  #17171A

  Token --foreground · class text-foreground

  Running body copy at 15-17px on cream and white.

  Not for: Headings (they are navy) and text on navy (that is white or white/85).

• Muted text

  #55555E

  Token --muted-foreground · class text-muted-foreground

  Disclaimers, captions, secondary notes, deprecated examples.

  Not for: Primary reading copy, or anything the user must not miss.

• Border

  #E3E1DA

  Token --border (strong: #B9B6AC) · class border-border, border-navy/10

  Card outlines and section rules. On cream and white use border-navy/10; on navy use border-white/10.

  Not for: Heavy or dark borders, and using a border where whitespace already separates content.

Vertical rhythm rule: sections open close to their heading and breathe underneath. Never add large empty space above a heading to “balance” a band.

• Preferred

  Tighter band spacing

  pt-10 pb-14 md:pt-12 md:pb-16, or pt-8 pb-10 md:pt-10 md:pb-12 for a tight band.

  No longer reused

  Large symmetrical vertical padding

  Equal py-20 style bands leave dead space above headings and slow the page down.

• Preferred

  Subtle navy borders, minimal or no shadow

  border-navy/10 on light, border-white/10 on navy. The only approved shadow is the soft one under screenshot frames.

  No longer reused

  Heavy card shadows

  Drop shadows make the editorial surfaces feel like a generic SaaS dashboard.

• Preferred

  Navy as a deliberate single contrast band

  One navy band per stretch of page, surrounded by cream and white.

  No longer reused

  Multiple large navy bands close together

  Consecutive navy slabs remove contrast and make the page feel heavy.

• Preferred

  Methodology grid with the navy offer panel beside it

  Light 8-column card grid plus a 4-column navy panel: navy enters a light section as a panel.

  No longer reused

  Floating cream card inside a large navy slab

  Inverts the rhythm and makes the offer read as a pop-up rather than part of the page.