<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Deloitte
tagline: Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot.
updated_at: 2026-05-28T22:15:42.806Z
published_at: 2026-05-28T22:15:42.806Z
author: webdesignhot
source_url: https://www.deloitte.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [light, structured, sans, enterprise, consulting, corporate, restrained]
preview_swatch: ['#ffffff', '#86bc25', '#1076a8']
related: []
description: 'Deloitte''s global site is corporate restraint rendered at Big-4 scale — a pure-white canvas, true-black `#000000` ink, and Open Sans running the entire hierarchy at a deliberately **light weight 300** for every headline. The brand''s single most recognizable mark is the black `Deloitte.` wordmark with a green `#86bc25` period — the green that gives the identity its name. That green is used with extreme discipline: it lives almost entirely in the logo and a thin set of brand accents, never as a button fill, which is why a naive CSS audit of the live site misses it entirely. The working interactive color on the production site is a teal-blue `#1076a8` that carries CTAs and links, leaving the green to do its one job — owning the wordmark. The result is consulting-grade authority: light-weight display type, generous white space, hairline borders, gentle 8–13px corner radii, and almost no chromatic noise. Black, white, and green define the brand; teal does the clicking.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
  ring: focus

colors:
  bg: '#ffffff'                  # canvas — pure white on every public page
  surface: '#ffffff'             # cards inherit the canvas
  surface-soft: '#f5f5f5'        # alternate band, input fill, hovered tile
  surface-strong: '#e3e3e3'      # disabled fill, separator ground
  surface-dark: '#333333'        # footer ground — the only large inverted surface
  surface-dark-elev: '#4a4a4a'   # footer column dividers / hovered footer rows
  text: '#000000'                # ink — true black, every headline + body
  text-strong: '#000000'
  text-body: '#000000'           # Deloitte keeps body at full-strength black
  text-muted: '#666666'          # secondary text, captions, meta
  text-soft: '#767676'           # helper text, disabled labels, placeholders
  text-on-dark: '#ffffff'        # text on the charcoal footer
  text-on-dark-mute: '#cccccc'   # footer body / secondary links on charcoal
  brand: '#86bc25'               # Deloitte green — the wordmark period; the color the brand is named for
  brand-deep: '#5c8a1a'          # darker green for brand-green hover / focus on green chips
  brand-soft: '#eef7e0'          # faint green wash — rare brand-accent band
  on-brand: '#000000'            # black text ON green (white fails contrast on #86bc25)
  accent: '#1076a8'              # interactive teal-blue — the working CTA + link color
  accent-hover: '#0c5d85'        # darker teal on hover/press
  accent-soft: '#e7f1f6'         # faint teal wash behind tip/info callouts
  on-accent: '#ffffff'           # white text ON teal (passes AA)
  border: '#e3e3e3'              # default hairline — cards, dividers, input rules
  border-strong: '#666666'       # emphasized rule, focused-field outline base
  border-on-dark: '#5e5e5e'      # footer column separators
  link: '#1076a8'               # inline link — same teal as CTAs
  link-hover: '#0c5d85'         # hovered link, underline thickens
  focus: '#1076a8'              # 2px focus ring, matches interactive teal
  scrim: 'rgba(0,0,0,0.55)'      # modal / drawer backdrop
  success: '#86bc25'             # confirmation reuses Deloitte green
  success-soft: '#eef7e0'        # success surface — green-10
  warning: '#ed8b00'             # advisory amber
  warning-soft: '#fdf0dc'        # warning surface
  danger: '#da291c'              # error red
  danger-soft: '#fbe9e7'         # error surface
  info: '#1076a8'               # info badge — identical to interactive teal
  info-soft: '#e7f1f6'           # info surface — teal-10

typography:
  display:
    family: '"Open Sans", Aptos, Helvetica, Arial, sans-serif'
    weights: [300, 400, 600, 700]
    opentype-features: []
  body:
    family: '"Open Sans", Aptos, Helvetica, Arial, sans-serif'
    weights: [400, 600, 700]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 64, weight: 300, lineHeight: 1.05, tracking: '-0.01em',  family: display }
    display-lg:      { size: 48, weight: 300, lineHeight: 1.1,  tracking: '-0.01em',  family: display }
    h1:              { size: 40, weight: 300, lineHeight: 1.1,  tracking: '0',        family: display }
    h2:              { size: 32, weight: 300, lineHeight: 1.15, tracking: '0',        family: display }
    h3:              { size: 24, weight: 400, lineHeight: 1.25, tracking: '0',        family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: display }
    subhead:         { size: 20, weight: 400, lineHeight: 1.4,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    body-emphasis:   { size: 16, weight: 600, lineHeight: 1.6,  tracking: '0',        family: body }
    label:           { size: 13, weight: 600, lineHeight: 1.4,  tracking: '0.01em',   family: body }
    caption:         { size: 12, weight: 400, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    button:          { size: 16, weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    eyebrow:         { size: 13, weight: 600, lineHeight: 1.4,  tracking: '0.08em',   family: body }
    link:            { size: 16, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    nav-link:        { size: 16, weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    quote:           { size: 28, weight: 300, lineHeight: 1.35, tracking: '0',        family: display }

radius:
  none: 0
  micro: 2
  sm: 4
  md: 8
  lg: 12
  pill-cta: 13     # observed primary CTA — softened rectangle, near-pill on short buttons
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:
    bg: '#1076a8'
    color: '#ffffff'
    radius: 13
    padding: '20px 44px'
    font: button
    use: 'Default primary CTA across the site. Teal-blue solid. "Explore", "Learn more", "Get in touch".'
  button-primary-hover:
    bg: '#0c5d85'
    color: '#ffffff'
    radius: 13
    use: 'Pointer-over state — one notch darker teal.'
  button-secondary:
    bg: '#000000'
    color: '#ffffff'
    radius: 13
    padding: '20px 44px'
    use: 'Black solid button — high-authority second action paired with the teal primary.'
  button-ghost:
    bg: 'transparent'
    color: '#1076a8'
    border: '1px solid #1076a8'
    radius: 13
    padding: '18px 42px'
    use: 'Outlined teal button — tertiary CTA on white surfaces.'
  button-brand-green:
    bg: '#86bc25'
    color: '#000000'
    radius: 13
    padding: '20px 44px'
    use: 'Rare brand-green CTA — black label only (white fails contrast on #86bc25). Reserved for signature brand moments.'
  button-ghost-on-dark:
    bg: 'transparent'
    color: '#ffffff'
    border: '1px solid #ffffff'
    radius: 13
    padding: '18px 42px'
    use: 'Outlined white button on dark hero / footer surfaces.'
  link-arrow:
    bg: 'transparent'
    color: '#1076a8'
    radius: 0
    padding: '0'
    use: 'Inline text link with right chevron. "Read the report ›".'
  card:
    bg: '#ffffff'
    color: '#000000'
    border: '1px solid #e3e3e3'
    radius: 12
    padding: '24px'
    use: 'Default content tile — hairline border, gentle 12px corners, no shadow at rest.'
  card-hover:
    bg: '#ffffff'
    color: '#000000'
    radius: 12
    use: 'Hovered card lifts with a soft shadow and the title shifts to teal.'
  feature-card:
    bg: '#f5f5f5'
    color: '#000000'
    radius: 12
    padding: '32px'
    use: 'Soft-gray feature tile used to break a white run of cards.'
  insight-card:
    bg: '#ffffff'
    color: '#000000'
    border: '1px solid #e3e3e3'
    radius: 12
    padding: '0 0 24px'
    use: 'Report / article card — full-bleed image top, eyebrow + title + meta below, 12px corners.'
  quote-card:
    bg: '#333333'
    color: '#ffffff'
    radius: 12
    padding: '48px'
    font: quote
    use: 'Inverted pull-quote panel — light-weight 28px quote on charcoal with a green accent rule.'
  cta-banner:
    bg: '#333333'
    color: '#ffffff'
    radius: 0
    padding: '64px 48px'
    use: 'Full-width charcoal CTA band near page bottom. Light-weight headline + teal or white-outline CTA.'
  input:
    bg: '#ffffff'
    color: '#000000'
    border: '1px solid #666666'
    radius: 8
    padding: '12px 16px'
    use: 'Form field — full 1px gray border, 8px corners, black text.'
  input-focused:
    bg: '#ffffff'
    color: '#000000'
    border: '2px solid #1076a8'
    radius: 8
    use: 'Focused field — border thickens to 2px teal, 2px focus ring outside.'
  input-error:
    bg: '#ffffff'
    color: '#000000'
    border: '2px solid #da291c'
    radius: 8
    use: 'Validation error — 2px red border + caption-size message below.'
  badge:
    bg: '#eef7e0'
    color: '#5c8a1a'
    radius: 4
    padding: '4px 10px'
    font: label
    use: 'Topic / category chip — faint green wash, deep-green text, 4px corners.'
  badge-teal:
    bg: '#e7f1f6'
    color: '#0c5d85'
    radius: 4
    padding: '4px 10px'
    use: 'Informational chip — teal wash variant.'
  eyebrow-label:
    bg: 'transparent'
    color: '#666666'
    radius: 0
    font: eyebrow
    use: 'Tracked uppercase 13px eyebrow above section headlines.'
  top-nav:
    bg: '#ffffff'
    color: '#000000'
    radius: 0
    height: 64
    border-bottom: '1px solid #e3e3e3'
    font: nav-link
    use: 'Sticky white header — black Deloitte. wordmark left, mega-menu nav, search + locale right.'
  mega-menu:
    bg: '#ffffff'
    color: '#000000'
    radius: 0
    border: '1px solid #e3e3e3'
    padding: '32px 48px'
    use: 'Full-width dropdown panel under top-nav — multi-column link lists with section heads.'
  footer:
    bg: '#333333'
    color: '#cccccc'
    radius: 0
    padding: '64px 48px'
    use: 'Charcoal footer — wordmark, 4–6 link columns, social row, legal fine print. Only large dark surface.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'        # default ease — hover, fades, color swaps
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'        # mega-menu open, drawer slide
  ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'          # scroll-in reveal
  ease-exit: 'cubic-bezier(0.4, 0, 1, 1)'              # element leaving
  duration-fast: 150          # button color swap, link underline
  duration-standard: 240      # card hover lift, mega-menu fade
  duration-slow: 320          # drawer slide, large surface reveal
  button-hover: 'background swaps #1076a8 → #0c5d85 in 150ms, no transform'
  card-hover: 'shadow rises (none → 0 8px 24px rgba(0,0,0,0.12)) + title → teal in 240ms'
  menu-open: 'mega-menu fades + drops 8px → 0 over 240ms with ease-emphasized'
  reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppressed, opacity/color only'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'                                          # default at rest — Deloitte favors hairlines
  ambient: '0 0 0 1px #e3e3e3'                          # the 1px hairline doubles as resting elevation
  card-hover: '0 8px 24px rgba(0,0,0,0.12)'             # card / tile hover lift
  menu: '0 12px 32px rgba(0,0,0,0.16)'                  # mega-menu + dropdown panel
  modal: '0 16px 48px rgba(0,0,0,0.24)'                 # centered dialog over scrim
  ring: '0 0 0 2px #1076a8'                             # focus ring (interactive teal)

accessibility:
  contrast-text-on-bg: 21.0           # #000000 on #ffffff — AAA
  contrast-text-on-brand: 10.1        # #000000 on #86bc25 — AAA (white on green FAILS, so on-brand is black)
  contrast-on-accent: 5.1             # #ffffff on #1076a8 — AA at body, AAA at large
  contrast-muted-on-bg: 5.7           # #666666 on #ffffff — AA at body, AAA at large
  contrast-on-dark: 12.6              # #ffffff on #333333 — AAA
  focus-ring: '2px solid #1076a8 with a 2px offset — visible on every interactive element'
  reduced-motion-honored: true
  touch-target-min: 48                # CTAs and inputs hold 48px+ on touch (primary CTA is 60px tall)
  keyboard-nav: 'Tab order: skip-link → top-nav (wordmark, nav, search, locale) → hero CTA → card grid → footer columns. Skip-to-main-content is the first focusable element.'

dark-mode: light-only      # Deloitte's public marketing site is light-only above the footer. The charcoal footer + occasional charcoal CTA bands are local inversions, not a full dark theme.
---

## 1. Visual Theme & Atmosphere

Deloitte's global site is corporate restraint rendered at Big-4 scale. The canvas is pure white (`#ffffff`), the ink is true black (`#000000`), and the entire type hierarchy runs in **Open Sans** — a humanist sans that reads as neutral, accessible, and institutionally safe. The defining typographic move is weight: headlines are set at a deliberately **light weight 300**, not the 600–700 most enterprise brands reach for. A 40px h1 at weight 300 feels calm and authoritative rather than loud — the same light-display discipline that signals seriousness without aggression. The brand trusts white space and scale, not boldness, to carry hierarchy.

The single most recognizable element of the identity is the wordmark: a black `Deloitte.` set with a green `#86bc25` period — the green the brand is literally named around. That green is used with extreme discipline. It owns the logo, anchors a thin set of brand accents (a section rule, a quote-panel tick, a category chip), and otherwise stays out of the way. It is almost never a button fill. This is exactly why a naive CSS scrape of the live homepage misses the green entirely — the working interactive color on production is a teal-blue `#1076a8` that carries the CTAs and inline links, while the green is reserved for the wordmark's one job. Any faithful rebuild has to supply the green deliberately; the page's computed styles won't hand it to you.

Geometry is soft but reserved. Corners are gently rounded — 8px on inputs, 12px on cards, and a softened ~13px on the pill-ish primary CTAs (which are notably tall, around 60px, with generous `20px 44px` padding). There are no hard square corners and no aggressively round pills outside the CTA. At rest, surfaces lean on hairline `#e3e3e3` borders rather than drop shadows; shadows appear only on hover and in overlays. The atmosphere is editorial — large hero imagery, light-weight headlines, lots of breathing room, and a measured cadence of white sections broken occasionally by a soft-gray band or a charcoal `#333333` CTA panel.

Color discipline is the whole game. Outside the black/white/green identity triad, the only chromatic voice is the interactive teal `#1076a8`, with semantic red and amber held in reserve for errors and warnings. There is no gradient maximalism, no neon, no second decorative accent. The footer is the only large inverted surface above the page break — a charcoal `#333333` block with light-gray links that anchors every page in the same global navigation and legal scaffolding.

The result is consulting-grade authority: trustworthy, restrained, photography-led, and quietly confident. It is the visual equivalent of a well-tailored gray suit — nothing flashy, everything intentional, and one small green detail that tells you exactly whose suit it is.

**Key Characteristics:**
- Pure-white canvas (`#ffffff`) + true-black ink (`#000000`) cover the overwhelming majority of surfaces.
- Open Sans across the entire hierarchy — display, body, and caption share one humanist sans.
- Headlines set at **light weight 300** — the brand's typographic signature; calm authority over boldness.
- The green `#86bc25` is the named identity color but lives almost entirely in the `Deloitte.` wordmark period and rare brand accents — never the default button fill.
- Interactive teal-blue `#1076a8` is the real working color: every CTA, link, and focus ring.
- Tall, softened-corner (~13px) primary CTAs with generous `20px 44px` padding.
- Hairline `#e3e3e3` borders carry resting hierarchy; shadows appear only on hover and overlays.
- Charcoal `#333333` footer + occasional charcoal CTA bands are the only large inverted surfaces.
- Generous white space, editorial photography, and a measured white → soft-gray → charcoal section rhythm.
- Black text on green (`on-brand: #000000`) is mandatory — white fails contrast on `#86bc25`.

## 2. Color Palette & Roles

### Primary
- **Canvas** (`#ffffff`): The default page floor on every public page. No public dark mode above the footer.
- **Ink** (`#000000`): True black — every headline, every body paragraph, the wordmark. Deloitte does not soften its black; full-strength ink is part of the corporate-serious tone.

### Brand
- **Deloitte Green** (`#86bc25`): The color the brand is named for. It owns the wordmark period and a thin set of brand accents (section rule, quote tick, category chip). **Not** a default CTA fill — its job is identity, not action.
- **Brand Green Deep** (`#5c8a1a`): Darker green for hover/press on the rare green chip or green CTA, and for green text on light surfaces where the bright green would fail contrast.
- **Brand Green Soft** (`#eef7e0`): Faint green wash for category badges and the occasional brand-accent band.
- **On Brand** (`#000000`): Text placed ON green. White text fails AA on `#86bc25` (≈2.1:1), so labels on green are always black.

### Accent (Interactive)
- **Interactive Teal** (`#1076a8`): The real working color of the site. Carries primary CTAs, inline links, focus rings, and active states. This is what an audit of the live site actually finds.
- **Teal Hover** (`#0c5d85`): One notch darker — hover/press on teal CTAs and links.
- **Teal Soft** (`#e7f1f6`): Faint teal wash behind informational callouts and tip chips.
- **On Accent** (`#ffffff`): White text on teal passes AA (≈5.1:1).

### Interactive (States)
- **Link** (`#1076a8`): Inline link color — identical to the CTA teal.
- **Link Hover** (`#0c5d85`): Hovered link with the underline thickening.
- **Focus** (`#1076a8`): The 2px focus ring color (with a 2px offset) on every focusable element.
- **Disabled** (`#767676` text on `#e3e3e3` fill): Disabled control treatment.

### Neutral Scale
- **Ink** (`#000000`) — headlines, body
- **Text Muted** (`#666666`) — secondary text, captions, meta, breadcrumbs
- **Text Soft** (`#767676`) — helper text, placeholders, disabled labels
- **Surface Soft** (`#f5f5f5`) — alternate section band, input fill, hovered tile
- **Surface Strong** (`#e3e3e3`) — disabled fill, separator ground (also the hairline tone)
- **Surface Dark** (`#333333`) — footer ground, charcoal CTA bands
- **Surface Dark Elev** (`#4a4a4a`) — footer column dividers, hovered footer rows

### Surface & Borders
- **Canvas** (`#ffffff`) — page floor and default card surface
- **Surface Soft** (`#f5f5f5`) — gray break band, input fill
- **Surface Dark** (`#333333`) — footer + charcoal panels
- **Border** (`#e3e3e3`) — default 1px hairline on cards and dividers
- **Border Strong** (`#666666`) — full input border, emphasized rule
- **Border On Dark** (`#5e5e5e`) — footer column separators

### Shadow Colors
At rest, Deloitte uses hairline `#e3e3e3` borders rather than shadows. Shadows are reserved for interaction and overlay: a soft `rgba(0,0,0,0.12)` lift on card hover, `rgba(0,0,0,0.16)` under the mega-menu, and `rgba(0,0,0,0.24)` on modal dialogs over a `rgba(0,0,0,0.55)` scrim. There are no colored or atmospheric shadows.

### Semantic
- **Success** (`#86bc25` text/icon on `#eef7e0`) — confirmation reuses Deloitte green
- **Warning** (`#ed8b00` on `#fdf0dc`) — advisory amber for non-blocking notices
- **Danger** (`#da291c` on `#fbe9e7`) — error states, validation, destructive confirm
- **Info** (`#1076a8` on `#e7f1f6`) — informational badges, identical to interactive teal

## 3. Typography Rules

### Font Family

**Primary**: `Open Sans`. Fallback chain: `Aptos, Helvetica, Arial, sans-serif` (Aptos is the live site's first fallback — Microsoft's default — reflecting Deloitte's Microsoft-heavy enterprise stack). Open Sans is a humanist sans-serif by Steve Matteson, free and open under the Apache License / SIL OFL, hosted directly on Google Fonts. It is one of the most legible, most neutral, and most widely deployed web faces in the world — exactly the "safe, institutional, accessible" choice a Big-4 firm makes. There is no separate display face; display and body share Open Sans, with hierarchy built entirely from size and weight.

**Mono**: a system monospace stack (`ui-monospace, SFMono-Regular, "SF Mono", Menlo`) appears only in the rare code or data context — it has no presence on marketing chrome.

**OpenType features**: none used aggressively. Open Sans is deployed as-shipped. The one mandatory typographic discipline is **weight**: headlines at 300, not 600/700.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| display-hero | Open Sans | 64 | 300 | 1.05 | -0.01em | Largest hero headline — light weight is the brand signature |
| display-lg | Open Sans | 48 | 300 | 1.1 | -0.01em | Section-opener display |
| h1 | Open Sans | 40 | 300 | 1.1 | 0 | Primary page headline — observed live at weight 300 |
| h2 | Open Sans | 32 | 300 | 1.15 | 0 | Section headline — also light 300 on production |
| h3 | Open Sans | 24 | 400 | 1.25 | 0 | Sub-section heading — weight steps up to 400 |
| h4 | Open Sans | 20 | 600 | 1.3 | 0 | Card title / small heading — first semibold tier |
| subhead | Open Sans | 20 | 400 | 1.4 | 0 | Lead paragraph beside a display headline |
| body-lg | Open Sans | 18 | 400 | 1.6 | 0 | Hero subhead, lead body |
| body | Open Sans | 16 | 400 | 1.6 | 0 | Default body — generous 1.6 line-height |
| body-sm | Open Sans | 14 | 400 | 1.5 | 0 | Card body, footer body, fine print |
| body-emphasis | Open Sans | 16 | 600 | 1.6 | 0 | Inline emphasis within body |
| label | Open Sans | 13 | 600 | 1.4 | 0.01em | Form labels, badge text |
| caption | Open Sans | 12 | 400 | 1.4 | 0.02em | Captions, meta, timestamps |
| button | Open Sans | 16 | 600 | 1.2 | 0 | Button label — semibold for clickable weight |
| eyebrow | Open Sans | 13 | 600 | 1.4 | 0.08em | Tracked uppercase eyebrow above headlines |
| link | Open Sans | 16 | 400 | 1.6 | 0 | Inline body link, teal |
| nav-link | Open Sans | 16 | 600 | 1.2 | 0 | Top-nav category labels |
| quote | Open Sans | 28 | 300 | 1.35 | 0 | Pull-quote — light weight on charcoal panels |

### Principles

- **Light-weight display is the brand voice.** Headlines at weight 300 read as calm and authoritative; switching to 700 makes Deloitte look like a generic SaaS site. The contrast between 300 display and 400 body carries the tone.
- **One family, hierarchy by size + weight.** Open Sans does everything. Never introduce a second display face — the neutrality is intentional.
- **Body stays full-strength black.** `#000000` body type, not gray, on white. Deloitte does not dim body copy to imply hierarchy; it uses size and white space instead.
- **Generous line-height on body.** 1.6 at 16/18px gives the editorial, readable rhythm a consulting site needs for long-form insight content.
- **Tracked uppercase eyebrows are allowed.** Unlike the strict Carbon-style sentence-case rule, Deloitte uses tracked `0.08em` uppercase 13px eyebrows above section headlines.
- **Button labels are semibold (600).** The one place weight goes up deliberately — buttons read as clickable.
- **Keep the green out of type color.** Body and headlines are black; the green is for the wordmark and accents, never for setting a paragraph.

## 4. Component Stylings

### Buttons

**`button-primary`** — The default CTA. Interactive teal `#1076a8` fill, white label, button type (16/600), generous `20px 44px` padding (≈60px tall), softened `13px` corners. Hover darkens to `#0c5d85` in 150ms. No transform, no border. This is the working CTA on the live site.

**`button-secondary`** — Black solid (`#000000`) with white label, same padding and corners. The high-authority second action paired with the teal primary.

**`button-ghost`** — Transparent fill with a 1px teal border and teal label, `18px 42px` padding (1px less to compensate for the border). Tertiary CTA on white surfaces. A `button-ghost-on-dark` variant swaps to a white border + white label for charcoal hero / footer surfaces.

**`button-brand-green`** — The rare signature CTA in Deloitte green `#86bc25`. Label is always **black** (`on-brand: #000000`) — white fails contrast on the green. Reserved for high-impact brand moments, not everyday actions.

**`link-arrow`** — Inline text link with a trailing chevron ("Read the report ›") in teal. The most common "learn more" affordance; no background, no border.

### Cards

**`card`** — Default content tile. White surface, 1px `#e3e3e3` hairline, gentle 12px corners, 24px padding, no shadow at rest. On hover (`card-hover`) it lifts with a soft `0 8px 24px rgba(0,0,0,0.12)` shadow and the title shifts to teal.

**`feature-card`** — Soft-gray (`#f5f5f5`) variant used to break a run of white cards; 32px padding, 12px corners, borderless.

**`insight-card`** — The report/article card: full-bleed image on top, then eyebrow + title + meta in the body. 12px corners, hairline border, no top padding (image is flush). The workhorse of Deloitte's insight grids.

**`quote-card`** — Inverted pull-quote panel on charcoal `#333333`, light-weight 28px quote text in white, a green `#86bc25` accent rule, 48px padding, 12px corners.

**`cta-banner`** — Full-width charcoal `#333333` band near the page bottom, 64px vertical padding, square corners (full-bleed), light-weight headline + a teal or white-outline CTA.

### Badges, Tags, Pills

**`badge`** — Topic/category chip in faint green wash `#eef7e0` with deep-green `#5c8a1a` text, 4px corners, `4px 10px` padding, label type (13/600). A **`badge-teal`** variant uses teal wash `#e7f1f6` / `#0c5d85` text for informational chips. Badges are small, low-saturation, and rectangular-soft — never loud full-color pills.

### Inputs / Forms

**`input`** — Full 1px `#666666` border (not a single underline — Deloitte uses a complete box), white fill, black text, 8px corners, `12px 16px` padding.

**`input-focused`** — Border thickens to 2px teal `#1076a8` with a 2px focus ring offset outside. No glow.

**`input-error`** — 2px red `#da291c` border with a caption-size error message below in `#da291c`.

Labels sit above fields in label type (13/600). Placeholders use `#767676`.

### Navigation

**`top-nav`** — Sticky white header, 64px tall, with a 1px `#e3e3e3` bottom hairline. The black `Deloitte.` wordmark (green period) anchors the left; nav categories (nav-link, 16/600) center; search and locale switch right. Categories open a full-width **`mega-menu`** — a white panel with a 1px border, 32px×48px padding, and multi-column link lists under section heads. The menu fades and drops 8px on open.

**`footer`** — Charcoal `#333333` footer, 64px×48px padding, with the wordmark, 4–6 columns of light-gray (`#cccccc`) links, a social-icon row, and a legal/privacy fine-print row. The only large inverted surface above the page break. Column heads in white body-sm/600, link lists in body-sm/400 `#cccccc`.

### Decorative

There is essentially no decorative chrome. Visual interest comes from large editorial photography and the occasional green accent rule. The quote-card's green tick and the wordmark period are the only consistent uses of brand green outside the logo lockup.

## 5. Layout Principles

### Spacing System

- **Base unit**: 4px.
- **Scale**: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96`
- Card interior padding: 24px (default), 32px (feature), 48px (quote panel).
- Primary CTA padding: `20px 44px` — the generous padding is part of the brand's spacious feel.
- Form input padding: `12px 16px`.
- Section padding: 96px vertical between major bands on desktop, 48px on mobile.

### Grid & Container

- 12-column grid, max content width **1280px**, prose width **720px** for long-form insight reading.
- Card grids: 3-up at desktop, 2-up at tablet, 1-up at mobile.
- Header height: 64px sticky.
- Generous outer gutters keep content off the viewport edges even at full width.

### Whitespace Philosophy

White space is the primary hierarchy tool. Deloitte trusts large vertical gaps, generous card padding, and roomy line-height (1.6 body) to do the work other brands hand to color and shadow. The page feels uncrowded and editorial — closer to a magazine than a dense enterprise dashboard.

### Section Cadence

White → soft-gray (`#f5f5f5`) → white, with a charcoal `#333333` band (quote panel or CTA banner) appearing once or twice per page for emphasis. The charcoal is reserved for moments that need weight; the rest of the page stays light and airy. Each major section opens with a tracked uppercase eyebrow, a light-weight (300) headline, and a 16–18px body lead.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| None | 0px | Full-bleed CTA bands, top-nav, footer edges |
| Micro | 2px | Tiny markers, rare inline tags |
| Small | 4px | Badges, chips, small controls |
| Medium | 8px | Inputs, small buttons, dropdown items |
| Large | 12px | Cards, tiles, quote panels — the dominant card radius |
| CTA | 13px | Primary CTAs — softened rectangle that reads near-pill on short buttons |
| X-Large | 16px | Large media containers, hero image masks |
| Pill | 9999px | Avatar / icon-only round controls (rare) |

Deloitte's geometry is soft-but-reserved: nothing is hard-square except full-bleed bands, and nothing is an aggressive pill except round avatars. The 12px card / 13px CTA pairing is the signature — gentle, modern, not playful.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | No shadow, no border | Hero text, body type, full-bleed bands |
| 1 — Hairline | 1px `#e3e3e3` border on white | Cards, inputs, dividers at rest |
| 2 — Soft band | `#f5f5f5` background on white | Alternate sections, feature cards, hovered tiles |
| 3 — Hover lift | `0 8px 24px rgba(0,0,0,0.12)` | Hovered cards / insight tiles |
| 4 — Overlay | `0 12px 32px rgba(0,0,0,0.16)` | Mega-menu, dropdown panels |
| 5 — Modal | `0 16px 48px rgba(0,0,0,0.24)` over `rgba(0,0,0,0.55)` scrim | Centered dialogs |
| 6 — Inverted | `#333333` charcoal surface | Footer, CTA bands, quote panels |
| Focus | `0 0 0 2px #1076a8` ring with 2px offset | Focused interactive elements |

### Shadow Philosophy

At rest, hierarchy is carried by hairline borders and surface tone, not shadow — the page is intentionally flat and clean. Shadows are an *interaction and overlay* language: a soft lift on hover, a deeper drop under menus, the deepest under modals. There are no colored shadows, no permanent ambient elevation on cards, and no neumorphic effects. The progression is strictly tied to z-depth (rest → hover → overlay → modal).

## 8. Interaction & Motion

### Easing

- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hovers, color swaps, fades.
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — mega-menu open, drawer slide; a snappier, more expressive curve.
- **Entrance**: `cubic-bezier(0, 0, 0.2, 1)` — scroll-in reveals (deceleration only).
- **Exit**: `cubic-bezier(0.4, 0, 1, 1)` — elements leaving (acceleration only).

### Durations

| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Button color swap, link underline, small hovers |
| Standard | 240ms | Card hover lift, mega-menu fade, image crossfade |
| Slow | 320ms | Drawer slide, large surface reveal |

### Per-Component Micro-States

- **Button hover**: background swaps `#1076a8` → `#0c5d85` in 150ms — no transform, no scale.
- **Card hover**: shadow rises from none → `0 8px 24px rgba(0,0,0,0.12)` and the title color shifts to teal over 240ms. A small upward translate (≈2px) may accompany the lift.
- **Link hover**: teal underline appears / thickens in 150ms.
- **Input focus**: border transitions 1px `#666666` → 2px `#1076a8` plus a 2px ring, 150ms.
- **Mega-menu open**: panel fades and drops 8px → 0 over 240ms with the emphasized curve.

### Page Transitions

Pages load without elaborate transitions; the persistent sticky header and footer provide continuity. On-scroll content reveals (fade + small rise) are common on insight grids and hero sections, all using the entrance curve.

### Reduced Motion

`prefers-reduced-motion: reduce` is honored. Transform-based motion (the card rise, the menu drop, scroll-reveal translates) is suppressed; transitions collapse to opacity and color only, which preserves interaction feedback without movement.

## 9. Accessibility & A11y

### Contrast Pairs

- **Ink on canvas**: `#000000` on `#ffffff` — **21.0:1** (AAA).
- **Black on green**: `#000000` on `#86bc25` — **10.1:1** (AAA). This is why labels on the brand green are black.
- **White on green**: `#ffffff` on `#86bc25` — **≈2.1:1** (FAILS AA). Never put white text on the green; always use black.
- **White on teal**: `#ffffff` on `#1076a8` — **≈5.1:1** (AA at body, AAA at large) — the CTA pairing.
- **Muted on canvas**: `#666666` on `#ffffff` — **5.7:1** (AA at body, AAA at large).
- **White on charcoal**: `#ffffff` on `#333333` — **12.6:1** (AAA) — footer/CTA-band text.
- **Light-gray on charcoal**: `#cccccc` on `#333333` — **7.5:1** (AAA) — footer body links.

### Focus Indicators

A 2px teal `#1076a8` ring with a 2px offset on every interactive element. Inputs additionally show a 2px teal border on focus. The ring contrasts clearly against both the white canvas and the charcoal footer.

### ARIA Patterns

- **Mega-menu**: trigger carries `aria-expanded` and `aria-controls`; the panel is keyboard-traversable; Esc closes and returns focus to the trigger.
- **Dialogs**: `role="dialog"` + `aria-modal="true"`, focus trap, `aria-labelledby` on the title; Esc closes.
- **Tabs / accordions**: standard `role="tablist"`/`aria-selected` and `aria-expanded`/`aria-controls` patterns.
- **Links**: self-describing link text — avoid "click here"; "Read the report" names its target.

### Keyboard Navigation

Skip-to-main-content is the first focusable element (present on the live site as a teal skip link). Tab order: skip-link → top-nav (wordmark, nav categories, search, locale) → hero CTA → card grid in DOM order → footer columns. All controls reachable and operable by keyboard; the focus ring is always visible.

### Screen Reader Hints

Decorative imagery and the green wordmark dot carry `aria-hidden`/empty alt; informative images get descriptive alt. Icon-only controls (search, menu toggle) carry an `aria-label` matching their tooltip. Eyebrows are styled text, not headings, so they don't pollute the heading outline.

### Reduced Motion

`prefers-reduced-motion: reduce` is respected — all transforms suppressed, opacity/color transitions retained.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 640px | Single column; display-hero scales 64px → ~36px; nav becomes hamburger drawer |
| Tablet | 1024px | Card grid 3-up → 2-up; mega-menu may collapse to accordion |
| Desktop | 1280px | Default layout; full mega-menu; max content width |
| Wide | 1536px | Outer gutters expand; content stays capped at 1280px |

### Touch Targets

Minimum 48px tap target; the primary CTA is already ~60px tall, comfortably exceeding it. Nav links and footer rows pad to 48px tap height on touch. Inputs hold a 48px+ touch height.

### Per-Component Collapsing

- **Top nav**: collapses to a hamburger drawer below 1024px; wordmark and search stay visible.
- **Mega-menu**: becomes a nested accordion inside the mobile drawer.
- **Card grid**: 3-up → 2-up at 1024px → 1-up at 640px.
- **Display type**: hero 64px scales toward 36px on mobile while holding weight 300 and the 1.05–1.1 line-height.
- **Footer**: 4–6 column link grid → 2-column at tablet → 1-column (tap-to-expand sections) at mobile.
- **Quote / CTA bands**: padding compresses 64px → 32px; full-bleed width maintained.

### Image Behavior

Hero photography uses art-directed crops between breakpoints (wide landscape → portrait on mobile) so the subject stays centered when the layout goes single-column. Insight-card images hold a fixed aspect ratio and crop to fill.

### Container Queries

Most responsive logic lives at document breakpoints. Card components can use container queries where a card appears in both a wide and narrow column so its internal layout responds to its own width rather than the viewport.

## 11. Content & Voice

### Tone

Deloitte's voice is **authoritative, measured, and globally professional** — the register of a senior advisor, not a startup. Headlines favor confident statements of capability and outcome ("Together makes progress", "Make an impact that matters") over hype or imperatives. The language is inclusive, future-facing, and free of slang; it carries gravitas without coldness.

### Microcopy Patterns

- **Button verbs**: "Explore", "Learn more", "Read the report", "Get in touch", "Discover", "View insights". Calm and content-oriented, not urgent.
- **Error messages**: plain and helpful — "Please enter a valid email address." No cute or apologetic copy.
- **Success confirmations**: brief and factual — "Thank you. We'll be in touch."
- **Loading**: a simple spinner or "Loading…" in muted text; no playful loaders.

### Empty States

Sparse on marketing. Where they appear (insight search), the copy is direct: "No results found. Try a different search or browse all insights," with a teal link back to the full index.

### CTA Verb Conventions

- "Explore" / "Discover" — the most common entry CTAs into topic areas.
- "Read the report" / "View insights" — content-action verbs matched to the asset.
- "Get in touch" / "Contact us" — Deloitte's preferred lead phrasing over "Request a demo".
- "Learn more ›" — the tertiary arrow-link affordance.

The voice avoids "Buy now", "Sign up free", "Click here" — those read as transactional consumer marketing, not professional-services advisory.

## 12. Dark Mode & Theming

The public marketing site is **light-only above the footer** — pure-white canvas, black ink, no global dark theme. The charcoal `#333333` footer, the occasional charcoal CTA band, and the charcoal quote panels are *local inversions* for emphasis, not a system-wide dark mode.

If a derivative work needs a dark theme, the recommended token swap is:

- `bg`: `#ffffff` → `#1a1a1a`
- `surface-soft`: `#f5f5f5` → `#2a2a2a`
- `text`: `#000000` → `#f5f5f5`
- `text-muted`: `#666666` → `#b0b0b0`
- `border`: `#e3e3e3` → `#3a3a3a`
- `accent` (teal): `#1076a8` → `#3da3d6` (brighter teal for dark surfaces; preserve AA on dark)
- `brand` (green): `#86bc25` stays — the green reads well on dark and is identity-locked
- `on-brand`: `#000000` stays black on green even in dark mode (contrast rule is absolute)

Headlines remain weight 300 in dark mode — the light-display discipline is theme-independent.

## 13. Lineage & Influences

Deloitte's visual identity descends from **Swiss / International Typographic Style** corporate modernism — the grid-disciplined, sans-serif, restraint-as-confidence school that defined blue-chip professional-services branding from the mid-20th century onward. The pure-white canvas, the single neutral sans, the trust in white space over ornament, and the refusal of decorative color all sit squarely in that lineage. Where many enterprises chose Helvetica, Deloitte settled on Open Sans — a humanist, screen-optimized, openly-licensed descendant of the same tradition — and paired it with a light-weight (300) display treatment that reads as quiet authority rather than corporate shout.

The defining brand decision is chromatic minimalism plus one signature detail: the green `#86bc25` period in the `Deloitte.` wordmark. It is the firm's entire color personality compressed into a single dot — a move in the same family as deliberately reductive corporate marks where one small element carries the whole identity. The rest of the system is monochrome (black/white/charcoal) with a working teal for interaction, so the green never has to compete. This is restraint as a brand strategy: the firm projects seriousness by *withholding* color, then spends its one chromatic move on the most-seen pixel of all — the logo.

**Influences absorbed:**

- **Swiss / International Typographic Style** — grid discipline, neutral sans, function over ornament; the foundation of Deloitte's restraint. ([Wikipedia](https://en.wikipedia.org/wiki/International_Typographic_Style))
- **Open Sans** — Steve Matteson's humanist, openly-licensed sans that carries the whole hierarchy. ([Google Fonts](https://fonts.google.com/specimen/Open+Sans))
- **Corporate modernism (Helvetica era)** — the blue-chip "serious = neutral sans on white" convention Deloitte modernizes. ([Wikipedia](https://en.wikipedia.org/wiki/Helvetica))
- **Editorial / broadsheet layout** — large light-weight headlines, eyebrows, and long-form insight reading at 720px prose width. ([Wikipedia](https://en.wikipedia.org/wiki/Editorial_design))
- **PwC** — peer Big-4 site with similar white-canvas restraint and a single accent (orange) instead of green. ([PwC](https://www.pwc.com))
- **McKinsey & Company** — peer professional-services site sharing the editorial, photography-led, restrained-color approach. ([McKinsey](https://www.mckinsey.com))

**What it rejects:**

- Color maximalism — no gradients, no neon, no second decorative accent beyond the working teal.
- Bold display weights — headlines are 300, not 700; boldness would undercut the gravitas.
- Heavy ambient shadows — hierarchy is hairline borders and white space; shadows are interaction-only.
- Playful or urgent microcopy — no "Buy now", no countdown urgency; the voice is advisory.

## 14. Do's and Don'ts

### Do

- Keep the canvas pure white and the ink true black (`#000000`) — the high-contrast monochrome base is the brand.
- Set headlines in Open Sans at **weight 300**. The light display is the signature; resist bolding.
- Use the green `#86bc25` for the wordmark and rare brand accents only — let it own identity, not action.
- Use the teal `#1076a8` for every CTA, link, and focus ring — it is the real interactive color.
- Put **black** text on the green (`on-brand: #000000`); white text fails contrast on `#86bc25`.
- Use generous white space and 1.6 line-height on body — the editorial breathing room is intentional.
- Keep corners soft-reserved: 8px inputs, 12px cards, ~13px CTAs. No hard squares (except full-bleed bands), no aggressive pills.
- Lean on hairline `#e3e3e3` borders at rest; bring in shadows only on hover and overlays.
- Reserve charcoal `#333333` for the footer, CTA bands, and quote panels — emphasis moments, not the whole page.
- Use tall, generously-padded primary CTAs (`20px 44px`, ~60px tall).

### Don't

- Don't use the green as a default button fill — it's identity, not the working CTA color.
- Don't put white text on the green. Ever. Use black (10:1 vs 2:1).
- Don't bold the headlines to 600/700 — weight 300 is the brand; bolding makes it look like generic SaaS.
- Don't introduce a second decorative accent. Black, white, green, and the working teal are the entire palette.
- Don't square off the cards or pill the buttons — the 12px / 13px softened geometry is the signature.
- Don't dim body copy to gray to imply hierarchy — keep body black; use size and space instead.
- Don't pile permanent shadows on resting cards — at rest they're hairline-bordered and flat.
- Don't use urgent or transactional microcopy ("Buy now", "Sign up free") — the voice is advisory.
- Don't swap Open Sans for a quirky display face — neutrality is the point; Open Sans is openly licensed anyway.
- Don't forget the green period in the wordmark — it's the single most recognizable element of the identity.

## 15. Agent Prompt Guide

### Quick Color Reference

- Canvas: `#ffffff`
- Ink: `#000000`
- Deloitte Green (wordmark / brand accent): `#86bc25`
- On-Green text (always): `#000000`
- Interactive Teal (CTAs / links): `#1076a8`
- Teal Hover: `#0c5d85`
- Text Muted: `#666666`
- Border Hairline: `#e3e3e3`
- Charcoal (footer / bands): `#333333`
- Footer Body Text: `#cccccc`

### Example Component Prompts

- "Create a hero with a 64px Open Sans headline at **weight 300** and `-0.01em` tracking on a pure-white canvas, an 18px Open Sans body subhead at weight 400 with 1.6 line-height, and a teal `#1076a8` primary CTA with white 16px/600 label, `20px 44px` padding, and `13px` corners. No gradient, no bold headline."
- "Design a content card on white with a 1px `#e3e3e3` hairline border, `12px` corners, 24px padding. Title in 20px Open Sans / 600, body in 16px Open Sans / 400 black with 1.6 line-height, and a teal 'Read the report ›' arrow link. On hover, raise a soft `0 8px 24px rgba(0,0,0,0.12)` shadow and shift the title to teal."
- "Build the Deloitte wordmark treatment: the word 'Deloitte' in black Open Sans semibold followed by a green `#86bc25` period. The green appears ONLY in that period — do not use it as a button or link color."
- "Design a charcoal pull-quote panel: `#333333` background, 28px Open Sans / 300 white quote text, a thin green `#86bc25` accent rule on the left, 48px padding, `12px` corners."
- "Create a form input: white fill, full 1px `#666666` border, `8px` corners, `12px 16px` padding, black text. On focus, thicken the border to 2px teal `#1076a8` and add a 2px teal focus ring with offset. Label above in 13px / 600."
- "Build the footer: full-width charcoal `#333333` band, `64px 48px` padding, the black-on-charcoal wordmark, 4–6 columns of light-gray `#cccccc` links in 14px Open Sans / 400, column heads in white / 600, and a legal fine-print row."

### Iteration Guide

1. **Audit headline weight first.** Every headline should be Open Sans **300**. If anything 24px+ is 600 or 700, drop it to 300 — this is the #1 brand tell.
2. **Audit the green's job.** Green `#86bc25` belongs to the wordmark and rare accents only. If green is filling buttons or links, move that role to teal `#1076a8`.
3. **Check on-green text.** Any text on green must be black. If you see white on `#86bc25`, fix it — it fails contrast.
4. **Audit color sprawl.** Outside black/white/charcoal + green + teal, there should be nothing but semantic red/amber. Any extra accent is drift.
5. **Audit corners.** 8px inputs, 12px cards, ~13px CTAs. No hard squares on interactive elements, no full pills on text buttons.
6. **Audit resting shadows.** Cards at rest are hairline-bordered and flat. Strip permanent box-shadows; reserve shadow for hover/overlay.
7. **Audit white space.** Body line-height 1.6, generous section padding, roomy CTA padding (`20px 44px`). If it feels cramped, it's not Deloitte.
8. **Audit voice.** CTAs read "Explore", "Read the report", "Get in touch" — advisory, not urgent. Replace any "Buy now" / "Sign up free" copy.