Brand
The ELITE brand style guide
One wordmark, one Cardinal red, one grey scale. Everything below is expressed as a design token, so the site, documents and decks stay identical without anyone matching colors by eye.
Identity
Logo usage
- Set the wordmark in Instrument Serif, uppercase, with 0.22em letter spacing. Never substitute another face.
- Three approved treatments only: near-black on white, white on Cardinal, Cardinal on off-white.
- Clear space around the wordmark equals the cap height of the “E” on all four sides.
- Do not stretch, outline, add shadows, rotate, recolor to Cardinal Light, or place the wordmark over busy imagery.
- Minimum size is 72px wide on screen. Below that, use the square “E” app icon instead.
- The descriptor “Career Advisory” is optional and always set in Work Sans, secondary grey, at a quarter of the wordmark size.
Color
Cardinal palette
Cardinal Red
#8C1515
--brand / --primary
Primary actions, wordmark, accents
9.4:1 on white
Cardinal Light
#B83A4B
--brand-light
Secondary emphasis, charts, hover on dark
5.6:1 on white
Cardinal Dark
#820000
--brand-dark
Hover and pressed states on Cardinal
10.8:1 on white
Neutrals and interaction
White
#FFFFFF
--background / --card
Page and card surfaces
Base surface
Off-white
#F5F5F7
--secondary / --muted / --sand
Section bands, subtle fills
Base surface
Near-black
#1D1D1F
--foreground / --ink
Body and heading text
16.8:1 on white
Black
#000000
--pure-black
Logo lockups, overlays only
21:1 on white
Secondary Grey
#6E6E73
--muted-foreground
Supporting text, captions
5.1:1 on white
Silver Grey
#A2AAAD
--silver
Rules, dividers, metallic detail — never text
2.4:1 — decorative only
Interaction Blue
#0071E3
--link / --ring
Focus rings and interactive affordances
4.7:1 on white
Palette rules
- Cardinal red is an accent, not a background. Keep it under 10% of any screen.
- Full-bleed Cardinal sections carry white text only, and never more than one per page.
- Cardinal Dark is reserved for hover and pressed states — never for resting type.
- Silver grey is decorative: rules, dividers and icons, never body copy.
- Blue #0071E3 is reserved for focus rings and system interaction, so Cardinal always reads as brand rather than state.
- All text pairings must clear WCAG AA (4.5:1 body, 3:1 for large display type).
Typography
Type scale
Display XL
Instrument Serif · clamp(2.75rem, 6vw, 5rem) · −0.025em · page headline, once per page
Display LG
Instrument Serif · clamp(2rem, 4vw, 3.25rem) · −0.02em · section headings
Subhead
Instrument Serif · 1.5rem · card and sub-section titles
Body — Work Sans at 15–17px with relaxed leading. Long-form copy stays under 70 characters per line.
Work Sans 400/500 · near-black for primary, secondary grey for support
Eyebrow label
Work Sans 500 · 12px · 0.16em tracking · uppercase · secondary grey
Layout
Spacing and grid
- Content maxes out at 1152px (max-w-6xl); long-form prose at 768px.
- Page gutters: 20px mobile, 32px from the small breakpoint up.
- Section rhythm: 80px vertical padding, 112px on large screens.
- Spacing steps use a 4px base: 4, 8, 12, 16, 24, 32, 48, 64, 80.
- Corner radii: 6px controls, 12px cards, 16px feature panels, full for pill CTAs.
- Elevation is limited to two shadows: soft for cards, lift for hero media.
- Borders are always 1px in #D9D9DE; Cardinal borders indicate selection only.
- Interactive targets are at least 40px tall, 44px for primary mobile actions.
Components
Standard controls
Card
White surface, 1px border, soft shadow on hover, Cardinal border when selected.
Notice
Cardinal-tinted background at 4% for confidentiality and policy notes.
Focus states use the interaction blue ring at 2px with a 2px offset.