<!--
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: Accenture
tagline: Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward.
updated_at: 2026-05-28T22:15:39.999Z
published_at: 2026-05-28T22:15:39.999Z
author: webdesignhot
source_url: https://www.accenture.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [dark, structured, sans, enterprise, consulting, purple]
preview_swatch: ['#0a0a0a', '#a600ff', '#ffffff']
related: []
description: 'Accenture''s site is a dark-canvas, big-statement consulting identity built around one electric brand purple — `#a600ff` (rgb 166, 0, 255) — and the company''s signature `>` greater-than mark, the "always moving forward" glyph that appears beside the logotype, inside CTAs, and as a decorative slash across hero compositions. The dominant surface is near-black (`#0a0a0a`) carrying white Graphik type; display headlines run large and bold ("Let There Be Change", "Reinvent with bold change") in a confident enterprise-consulting register. The single chromatic voltage is the purple — it carries the `>` mark, the primary CTA, the link hover, the focus ring, and the rare full-bleed accent band — while everything else stays in a disciplined grayscale of near-black grounds and white-to-gray ink. Graphik (Commercial Type) is the entire hierarchy: geometric, neutral, and slightly warm, set bold for display and regular for body. The result is gravitas with momentum — a dark, premium, forward-leaning system where the purple `>` does all the work that a second brand color would in a less disciplined identity.'


# 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
  accent: brand-bright
  muted: text-muted
  border: border
  ring: brand

colors:
  bg: '#0a0a0a'                  # canvas — the dark hero ground that anchors the brand
  bg-pure: '#000000'             # pure-black sections — full-bleed hero, video backdrops
  surface: '#141414'             # raised card ground on the dark canvas
  surface-soft: '#1c1c1c'        # hovered card / nested panel ground
  surface-strong: '#262626'      # input fill, separator fill on dark
  surface-light: '#ffffff'       # the inverted light section — editorial / research bands
  surface-light-soft: '#f2f2f2'  # alternate-row stripe on the light inversion
  text: '#ffffff'                # primary ink — every headline and body line on dark
  text-strong: '#ffffff'
  text-body: '#e6e6e6'           # body copy on dark — a hair off pure white for long reads
  text-muted: '#a3a3a3'          # sub-headlines, captions, footer body on dark
  text-soft: '#6b6b6b'           # disabled, fine print, helper text on dark
  text-on-light: '#0a0a0a'       # ink on the inverted white sections
  text-on-light-mute: '#525252'  # muted ink on the white inversion
  brand: '#a600ff'               # Accenture purple — rgb(166,0,255). The single voltage.
  brand-bright: '#be4bff'        # lighter purple — gradient top stop, hover lift on dark
  brand-deep: '#7d00c4'          # deeper purple — pressed CTA, gradient bottom stop
  brand-soft: 'rgba(166,0,255,0.12)'  # faint purple wash — selected chip, focus halo fill
  on-brand: '#ffffff'            # text on the purple CTA / band
  border: '#2e2e2e'              # default 1px hairline on dark surfaces
  border-strong: '#4d4d4d'       # heavier divider, hovered input outline
  border-on-light: '#e0e0e0'     # hairline inside the white inversion
  link: '#ffffff'                # body links are white with an underline on dark
  link-hover: '#a600ff'          # link hover shifts to brand purple
  focus: '#a600ff'               # 2px purple focus ring
  scrim: 'rgba(0,0,0,0.7)'       # modal / menu backdrop over the dark canvas
  success: '#3ad29f'             # confirmation states
  success-soft: 'rgba(58,210,159,0.14)'
  warning: '#ffb800'             # advisory banners
  warning-soft: 'rgba(255,184,0,0.14)'
  danger: '#ff5252'              # error states on dark
  danger-soft: 'rgba(255,82,82,0.14)'
  info: '#a600ff'                # info accent — identical to brand
  info-soft: 'rgba(166,0,255,0.12)'

typography:
  display:
    family: 'Graphik, "Graphik Web", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [500, 600, 700]
    opentype-features: []
  body:
    family: 'Graphik, "Graphik Web", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 700, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 40, weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    eyebrow:         { size: 13, weight: 600, lineHeight: 1.4,  tracking: '0.08em',   family: body }
    button:          { size: 16, weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    nav-link:        { size: 15, weight: 500, lineHeight: 1.3,  tracking: '0',        family: body }
    link:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  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: '#a600ff'
    color: '#ffffff'
    radius: 9999
    padding: '14px 28px'
    font: button
    use: 'Primary CTA. Purple pill with white label and a trailing > mark. "Let there be change", "Explore careers".'
  button-primary-hover:
    bg: '#be4bff'
    color: '#ffffff'
    radius: 9999
    use: 'Hover lift — purple brightens one notch and the > mark nudges right ~3px.'
  button-secondary:
    bg: 'transparent'
    color: '#ffffff'
    border: '1px solid #ffffff'
    radius: 9999
    padding: '14px 28px'
    font: button
    use: 'Outlined white pill on the dark canvas — secondary action paired with primary.'
  button-secondary-hover:
    bg: '#ffffff'
    color: '#0a0a0a'
    radius: 9999
    use: 'Outlined button inverts to solid white with dark label on hover.'
  button-ghost:
    bg: 'transparent'
    color: '#ffffff'
    radius: 0
    padding: '8px 0'
    font: button
    use: 'Text + > chevron, no background. "Read more >". The > carries the purple on hover.'
  button-on-light:
    bg: '#a600ff'
    color: '#ffffff'
    radius: 9999
    padding: '14px 28px'
    use: 'Same purple pill placed on the inverted white sections — purple still passes on white.'
  card:
    bg: '#141414'
    color: '#ffffff'
    border: '1px solid #2e2e2e'
    radius: 12
    padding: '24px'
    use: 'Default content card on dark. Hairline border, soft 12px radius, no heavy shadow.'
  card-hover:
    bg: '#1c1c1c'
    color: '#ffffff'
    border: '1px solid #4d4d4d'
    radius: 12
    use: 'Hovered card — ground lifts a step, border strengthens, a purple > may appear bottom-right.'
  feature-card:
    bg: '#141414'
    color: '#ffffff'
    radius: 12
    padding: '32px'
    use: 'Larger feature / insight tile with an eyebrow, headline, and trailing > link.'
  insight-card:
    bg: '#ffffff'
    color: '#0a0a0a'
    border: '1px solid #e0e0e0'
    radius: 12
    padding: '24px'
    use: 'Research / insight tile on the inverted white sections — dark ink on white.'
  cta-band:
    bg: '#a600ff'
    color: '#ffffff'
    radius: 0
    padding: '64px'
    font: h1
    use: 'Full-bleed purple accent band near a section break — the single largest expanse of brand color.'
  text-input:
    bg: '#1c1c1c'
    color: '#ffffff'
    border: '1px solid #2e2e2e'
    radius: 8
    padding: '12px 16px'
    use: 'Input on dark — surface-soft fill, hairline border, 8px radius.'
  text-input-focused:
    bg: '#1c1c1c'
    color: '#ffffff'
    border: '2px solid #a600ff'
    radius: 8
    use: 'Focused input — border becomes 2px purple with a faint purple halo.'
  badge:
    bg: 'rgba(166,0,255,0.12)'
    color: '#be4bff'
    radius: 9999
    padding: '4px 12px'
    font: caption
    use: 'Topic / category chip — soft purple fill with bright-purple label.'
  badge-solid:
    bg: '#a600ff'
    color: '#ffffff'
    radius: 9999
    padding: '4px 12px'
    use: '"New" / featured chip — solid purple pill.'
  top-nav:
    bg: '#0a0a0a'
    color: '#ffffff'
    radius: 0
    height: 64
    border-bottom: '1px solid #2e2e2e'
    font: nav-link
    use: 'Dark sticky bar — Accenture logotype + purple > left, category links center, search/locale right.'
  footer:
    bg: '#000000'
    color: '#a3a3a3'
    radius: 0
    padding: '64px 32px'
    use: 'Pure-black footer. Logotype + > top-left, multi-column link grid in muted gray, legal row beneath.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0.6, 0.2, 1)'
  ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
  ease-exit: 'cubic-bezier(0.4, 0, 1, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  button-hover: 'purple brightens #a600ff → #be4bff in 150ms; trailing > nudges right ~3px'
  card-hover: 'ground lifts #141414 → #1c1c1c in 240ms; border strengthens; no transform scale'
  reveal: 'section content fades + rises 16px → 0 on scroll-in with ease-entrance, 320ms'
  reduced-motion: 'respects prefers-reduced-motion: reduce — reveals and > nudges drop to opacity-only.'

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

shadows:
  none: 'none'
  hairline: '0 0 0 1px #2e2e2e'                       # the 1px border doubles as flat elevation
  card-hover: 'rgba(0,0,0,0.5) 0 8px 24px'            # subtle lift on hovered cards over dark
  glow-brand: '0 0 0 4px rgba(166,0,255,0.25)'        # purple focus / selected halo
  modal: 'rgba(0,0,0,0.6) 0 16px 48px'                # dialog elevation over scrim

accessibility:
  contrast-text-on-bg: 19.6           # #ffffff on #0a0a0a — AAA at all sizes
  contrast-text-on-brand: 3.9         # #ffffff on #a600ff — AA large only; bump weight/size for CTA labels
  contrast-brand-on-bg: 4.4           # #a600ff on #0a0a0a — AA at large / UI, use for > marks and accents
  contrast-muted-on-bg: 7.6           # #a3a3a3 on #0a0a0a — AAA
  focus-ring: '2px solid #a600ff + 4px rgba(166,0,255,0.25) outer halo'
  reduced-motion-honored: true
  touch-target-min: 48
  keyboard-nav: 'Tab order: skip-link → top-nav (logo, categories, search, locale) → hero CTA → card grid → footer columns. Purple focus ring visible on every interactive element.'

dark-mode: native     # The brand IS dark — near-black canvas with white type is the default. Light sections are deliberate inversions for editorial/research bands, not a separate theme.
---

## 1. Visual Theme & Atmosphere

Accenture's site is a **dark-canvas, big-statement consulting identity** — near-black grounds (`#0a0a0a`, dropping to pure `#000000` on full-bleed hero and video sections) carrying confident white Graphik type, with a single electric voltage running through everything: Accenture purple, `#a600ff` (rgb 166, 0, 255). The dark hero is not a dark-mode option; it *is* the brand. Where most enterprise consultancies open on white and reach for navy, Accenture opens in the dark and lets the purple cut through it.

The defining mark is the **`>` greater-than glyph** — Accenture's "always moving forward" symbol. It sits beside the logotype, trails inside primary CTAs ("Let there be change >"), terminates "Read more >" links, and recurs as a decorative slash across hero compositions. The `>` is the brand's verb made into a shape: every place the eye expects an arrow, Accenture uses its own forward-leaning mark instead. It almost always carries the purple, or turns purple on interaction, so the accent color and the signature glyph reinforce each other.

Display type is **large, bold, and declarative**. Hero headlines run up to 80px at weight 700 with tight negative tracking ("Let There Be Change", "Reinvent with bold change", "Total enterprise reinvention"). The register is enterprise-consulting confidence — short imperative statements, not feature lists. Graphik (Commercial Type) handles the entire hierarchy: a neutral, geometric, slightly warm grotesque that reads as premium without being cold. Bold for display, regular for body; hierarchy comes from size and weight, never from a second typeface.

The system reaches for color **rarely and deliberately**. Purple marks the `>`, the primary CTA pill, the link hover, the focus ring, topic chips, and the occasional full-bleed accent band. Everything else lives in a disciplined grayscale: near-black grounds, white-to-gray ink, and thin `#2e2e2e` hairlines. Because the canvas is dark, the white type does the heavy lifting and the purple gets to be precious — a small dose of one electric color reads as far more premium on near-black than the same purple would on white.

There is one recurring inversion: **white editorial / research bands**. On insight, research, and case-study sections, Accenture flips to a white ground with dark ink — a deliberate "now we're being substantive" register shift. The purple `>` and purple pill survive the flip (purple passes legibly on both grounds), so the brand stays continuous even as the canvas inverts. The result is gravitas with momentum: dark, premium, forward-leaning, and unmistakably anchored to one glyph and one color.

**Key Characteristics:**
- Dark canvas is the default — near-black `#0a0a0a` (pure `#000000` on full-bleed hero) carrying white Graphik type.
- Single chromatic voltage: Accenture purple `#a600ff` carries the `>` mark, primary CTA, link hover, focus ring, and accent bands. No second brand color.
- The `>` greater-than mark ("always moving forward") is the signature — beside the logotype, inside CTAs, terminating links, slashed across heroes.
- Graphik across the entire hierarchy — bold (700) for big display statements, regular (400) for body.
- Big declarative headlines up to 80px ("Let There Be Change") in an enterprise-consulting register.
- Pill CTAs (`radius: 9999`) — purple solid for primary, white outline for secondary — each with a trailing `>`.
- Grayscale discipline everywhere the purple isn't: near-black grounds, white-to-gray ink, thin `#2e2e2e` hairlines.
- Deliberate white inversion bands for editorial / research content; the purple survives the flip.
- Cards carry hierarchy with hairline borders + a subtle ground lift on hover, not heavy shadows.
- Premium-by-restraint: one color, one glyph, one face — the system's discipline is its identity.

## 2. Color Palette & Roles

### Canvas
- **Canvas** (`#0a0a0a`): The default page floor — the dark hero ground that anchors the entire brand.
- **Canvas Pure** (`#000000`): Full-bleed hero, video backdrops, and the footer ground — pure black where maximum drama is wanted.
- **Surface** (`#141414`): Raised card ground on the dark canvas — one step up from the floor.
- **Surface Soft** (`#1c1c1c`): Hovered card / nested panel ground and input fill — a second step of lift.
- **Surface Strong** (`#262626`): Heavier input fill, separator fill, and disabled surfaces on dark.
- **Surface Light** (`#ffffff`): The inverted white section — editorial, research, and case-study bands.
- **Surface Light Soft** (`#f2f2f2`): Alternate-row stripe inside the white inversion.

### Text
- **Ink** (`#ffffff`): Primary text — every display headline and emphasis line on the dark canvas.
- **Body** (`#e6e6e6`): Long-form body copy on dark — a hair off pure white to soften long reads.
- **Text Muted** (`#a3a3a3`): Sub-headlines, captions, footer body, breadcrumb on dark.
- **Text Soft** (`#6b6b6b`): Disabled labels, fine print, helper text on dark.
- **Ink on Light** (`#0a0a0a`): Headlines and body on the inverted white sections.
- **Muted on Light** (`#525252`): Muted ink (sub-heads, captions) inside the white inversion.

### Brand
- **Accenture Purple** (`#a600ff`): The single voltage — `>` mark, primary CTA pill, link hover, focus ring, accent band. rgb(166, 0, 255).
- **Brand Bright** (`#be4bff`): Lighter purple — gradient top stop, CTA hover lift, bright-purple chip labels on dark.
- **Brand Deep** (`#7d00c4`): Deeper purple — pressed CTA state, gradient bottom stop.
- **Brand Soft** (`rgba(166,0,255,0.12)`): Faint purple wash — selected chip fill, focus halo, subtle hover ground.
- **On Brand** (`#ffffff`): Text/label on the purple CTA and purple band.

### Borders
- **Border** (`#2e2e2e`): Default 1px hairline on dark surfaces — cards, inputs, dividers.
- **Border Strong** (`#4d4d4d`): Heavier divider and hovered-input / hovered-card outline.
- **Border on Light** (`#e0e0e0`): Hairline inside the white inversion sections.

### Interactive
- **Link** (`#ffffff`): Inline body links are white with an underline on the dark canvas.
- **Link Hover** (`#a600ff`): Hovered link shifts to brand purple — the color follows the cursor.
- **Focus** (`#a600ff`): 2px purple ring with a soft `rgba(166,0,255,0.25)` outer halo on every focused element.

### Shadow Colors
The dark canvas resists heavy shadow as a hierarchy device — depth comes from ground lift (`#141414` → `#1c1c1c`) and hairline strengthening. Where shadow appears it's the subtle `rgba(0,0,0,0.5) 0 8px 24px` card-hover lift and the `rgba(0,0,0,0.6) 0 16px 48px` modal elevation. The purple `glow-brand` halo (`0 0 0 4px rgba(166,0,255,0.25)`) is the only chromatic "shadow" — a focus/selected ring, not a drop shadow.

### Semantic
- **Success** (`#3ad29f` on `rgba(58,210,159,0.14)`) — confirmation states, calibrated to read on dark.
- **Warning** (`#ffb800` on `rgba(255,184,0,0.14)`) — advisory banners.
- **Danger** (`#ff5252` on `rgba(255,82,82,0.14)`) — error states on dark (brightened red for contrast on near-black).
- **Info** (`#a600ff` on `rgba(166,0,255,0.12)`) — identical to brand; informational accents.

## 3. Typography Rules

### Font Family

**Primary**: `Graphik` (Commercial Type, by Christian Schwartz). Fallback chain: `"Graphik Web", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif`. Graphik is a neutral geometric grotesque with a slight warmth — clean enough to read as enterprise, distinctive enough to read as *Accenture's* enterprise rather than default-Helvetica. It is a true single-family hierarchy: display, body, eyebrow, and caption all ride the same face, with hierarchy built from size and weight rather than a typeface change.

**Display vs body**: Display sizes run bold (700/600) with tight negative tracking for the big declarative statements; body sits at regular (400) with comfortable 1.55 line-height for readability on the dark canvas. The contrast between a 700-weight 80px hero and a 400-weight 16px body is the typographic engine of the brand — confidence up top, calm in the read.

**Companions**: There is no marketing serif and no decorative display face. A monospace stack exists for the rare code/data surface but does not appear in marketing chrome. Graphik carries everything visible.

**OpenType features**: No aggressive feature use on marketing — no decorative alternates, no tabular-figure swaps in chrome. The face is used as shipped; the negative tracking on display sizes (`-0.03em` at hero scale) is the one mandatory typographic detail.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| display-hero | Graphik | 80 | 700 | 1.0 | -0.03em | — | Largest hero statement — "Let There Be Change" scale |
| display-lg | Graphik | 56 | 700 | 1.05 | -0.02em | — | Section-opener headlines |
| h1 | Graphik | 40 | 700 | 1.1 | -0.018em | — | Page title, major section heading |
| h2 | Graphik | 32 | 600 | 1.2 | -0.012em | — | Sub-section heading, card-collection title |
| h3 | Graphik | 24 | 600 | 1.25 | -0.005em | — | Feature card title, FAQ heading |
| h4 | Graphik | 20 | 600 | 1.3 | 0 | — | Small card title, list heading |
| body-lg | Graphik | 18 | 400 | 1.55 | 0 | — | Hero subhead, lead paragraph |
| body | Graphik | 16 | 400 | 1.55 | 0 | — | Default body across the system |
| body-sm | Graphik | 14 | 400 | 1.5 | 0 | — | Card body, footer column body |
| label | Graphik | 13 | 500 | 1.4 | 0 | — | Form label, dense UI label |
| eyebrow | Graphik | 13 | 600 | 1.4 | 0.08em | — | Tracked sentence/upper eyebrow above headlines |
| button | Graphik | 16 | 600 | 1.2 | 0 | — | Every CTA label across the system |
| nav-link | Graphik | 15 | 500 | 1.3 | 0 | — | Top-nav category labels |
| link | Graphik | 16 | 400 | 1.55 | 0 | — | Inline body link, white + underline on dark |
| caption | Graphik | 12 | 500 | 1.4 | 0.02em | — | Captions, meta, fine print |

### Principles

- **Bold-display / regular-body is the brand voice.** Graphik at 700 for hero scale plus 400 for body gives the confident-then-calm cadence that defines Accenture. Don't set body bold or display light — both flatten the contrast.
- **Tight tracking on display, neutral on body.** Negative tracking (`-0.03em` at 80px) keeps big statements tight and assertive; body stays at `0` for readability on dark.
- **One face only.** Graphik carries display, body, eyebrow, caption. Introducing a serif or a second sans is drift — the brand's typographic identity is the single neutral grotesque.
- **The eyebrow earns the tracking.** The 13px eyebrow uses `0.08em` letter-spacing (often upper- or sentence-case) above headlines. It's the one place positive tracking is allowed.
- **Headlines are statements, not labels.** Size the hero for short imperative copy ("Reinvent with bold change"), not for long sentences — the type system assumes 3–6 word headlines.
- **Body retains near-white on dark.** Long-form body uses `#e6e6e6` (a hair off pure white) to reduce glare on near-black; headlines stay pure `#ffffff` for maximum punch.
- **Hierarchy by weight + size, never by color.** Don't tint headlines purple to suggest importance — purple is reserved for the `>`, CTAs, and accents.

## 4. Component Stylings

### Buttons

**`button-primary`** — The signature CTA. A purple pill: background `#a600ff`, label `#ffffff` at button type (16/600), `radius: 9999`, padding `14px 28px`, and a trailing `>` mark. Hover brightens to `#be4bff` over 150ms and the `>` nudges right ~3px; pressed deepens to `#7d00c4`. No border, no heavy shadow — the purple pill and the moving `>` are the whole affordance.

**`button-secondary`** — Outlined white pill on dark. Transparent background, 1px `#ffffff` border, white label, same pill radius and padding. On hover it inverts to a solid white fill with dark `#0a0a0a` label. Paired with primary for two-action hero rows.

**`button-ghost`** — Text + `>` chevron, no background, no border. White label that picks up the purple on hover, with the `>` carrying the brand color. Used for "Read more >", "Explore >", inline content actions.

**`button-on-light`** — The same purple pill placed on the inverted white sections. Purple `#a600ff` passes legibly on white, so the primary CTA stays consistent across both grounds; only the surrounding ink flips.

### Cards

**`card`** — Default content card on dark. Background `#141414`, white ink, 1px `#2e2e2e` hairline, `radius: 12`, 24px padding. No heavy drop shadow at rest. On hover (`card-hover`) the ground lifts to `#1c1c1c`, the border strengthens to `#4d4d4d`, and a small purple `>` may surface bottom-right to signal "this card is a link".

**`feature-card`** — Larger feature / insight tile. Same dark chrome, 32px padding, with an eyebrow (13/600, tracked), an h3 headline, body copy, and a trailing `>` link. The workhorse of insight and capability grids.

**`insight-card`** — The card on the inverted white sections. Background `#ffffff`, dark `#0a0a0a` ink, 1px `#e0e0e0` hairline, `radius: 12`, 24px padding. Used in research / case-study grids where the band itself is light.

**`cta-band`** — Full-bleed purple accent band near a section break. Background `#a600ff`, white headline at h1 scale, 64px padding, a white-outline or white-solid CTA inside. The single largest expanse of brand color on the page — used sparingly so it stays an event.

### Inputs / Forms

**`text-input`** — Input on dark. Background `#1c1c1c` (surface-soft), white text, 1px `#2e2e2e` border, `radius: 8`, padding `12px 16px`. Placeholder in `#6b6b6b`.

**`text-input-focused`** — The focused state swaps the hairline for a 2px `#a600ff` border with a faint `rgba(166,0,255,0.25)` halo. The purple ring is the focus signal — no separate glow on the field's interior.

**`text-input-error`** — Border becomes 2px `#ff5252` with a caption-sized validation message in danger color below.

### Badges, Tags, Pills

**`badge`** — Topic / category chip. Soft purple fill (`rgba(166,0,255,0.12)`) with a bright-purple `#be4bff` label, `radius: 9999`, padding `4px 12px`, caption type. Reads as a quiet purple echo on the dark ground.

**`badge-solid`** — "New" / featured chip. Solid `#a600ff` fill with white label, same pill shape. Used to flag fresh content or a featured capability.

### Navigation

**`top-nav`** — Dark sticky bar, 64px tall. Background `#0a0a0a`, white type, 1px `#2e2e2e` bottom hairline. The Accenture logotype with its purple `>` anchors the left; category links (Capabilities / Industries / About / Careers) run center in nav-link type; search and locale icons sit right. On hover, category labels gain a thin purple underline.

**`footer`** — Pure-black footer (`#000000`) with the logotype + `>` top-left and a multi-column link grid in muted `#a3a3a3`. Column heads in body-sm/600 white, link lists in body-sm/400 muted. Below: social-icon strip, locale selector, and a fine-print legal row. Padding 64px×32px.

### Decorative

The recurring decorative element is the **`>` mark itself** — oversized and slashed across hero compositions, occasionally rendered as a purple-to-bright-purple gradient (`#7d00c4` → `#be4bff`). It is the one ornament the system allows. Heroes may also carry a full-bleed image or muted video behind the white headline, dimmed with a dark scrim so the type holds contrast.

## 5. Layout Principles

### Spacing System

- **Base unit**: 4px.
- **Scale**: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96`.
- Card interior padding: 24px on default cards, 32px on feature cards, 64px on the CTA band.
- Button padding: 14px vertical, 28px horizontal — pill CTAs run generous to feel premium.
- Section padding: 96px vertical between major bands on desktop, 48px on mobile.

### Grid & Container

- 12-column grid at desktop, collapsing to 8 / 4 columns at tablet / mobile.
- Max content width: 1280px; long-form prose constrains to ~720px for readable line length on dark.
- Card grids: 3-up at desktop, 2-up at tablet, 1-up at mobile.
- Hero compositions frequently break the grid — the oversized `>` and full-bleed imagery extend edge-to-edge while the headline stays on the content column.

### Whitespace Philosophy

The dark canvas does the work that whitespace does on a light site — generous near-black grounds let the white headlines and the single purple accent breathe without needing large empty gaps. Sections separate via ground change (near-black → pure-black → white inversion) and hairline dividers, not via vast vertical air. Content is confident and spacious, never cramped, but the drama comes from contrast against the dark rather than from emptiness.

### Section Cadence

Dark → dark → white inversion → dark, with the occasional full-bleed purple band as punctuation. The white editorial sections are the deliberate "substance" beats; the purple band is the "act now" beat. Pure black is reserved for the most cinematic moments — hero and footer. The rhythm reads: cinematic dark hero → capability cards on near-black → white research band → purple CTA band → pure-black footer.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Tiny indicators, inline tags inside dense UI |
| Small | 4px | Small chips, inline code, compact controls |
| Medium | 8px | Inputs, selects, small menus |
| Comfortable | 12px | Cards, feature tiles, media frames — the default card radius |
| Large | 16px | Large media panels, modal corners |
| Pill | 9999px | Every CTA button and every topic / category chip |

The system pairs **pill CTAs** with **softly-rounded 12px cards** — the buttons are fully round, the containers are gently rounded. This is the opposite of a flat-square system: Accenture's rounding signals approachable premium rather than engineered rigor. The `>` mark is the only "sharp" geometry in the layout, and it's a glyph, not a container.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | No shadow, no border | Hero text, body type, footer body on the dark canvas |
| 1 — Hairline | 1px `#2e2e2e` border on `#141414` | Default cards, inputs, dividers |
| 2 — Ground lift | `#141414` → `#1c1c1c` + `#4d4d4d` border | Hovered cards, nested panels |
| 3 — Card hover shadow | `rgba(0,0,0,0.5) 0 8px 24px` | Lifted card on hover over dark |
| 4 — Brand halo | `0 0 0 4px rgba(166,0,255,0.25)` | Focused / selected element |
| 5 — Modal | `rgba(0,0,0,0.6) 0 16px 48px` over `rgba(0,0,0,0.7)` scrim | Centered dialogs, mega-menu overlays |

### Shadow Philosophy

On a dark canvas, drop shadows read poorly — a black shadow on near-black is nearly invisible. So Accenture carries depth primarily through **ground lift and hairline strengthening**: a hovered card steps from `#141414` to `#1c1c1c` and its border brightens. A soft `rgba(0,0,0,0.5)` lift appears on hover to add just enough separation, and the modal layer uses a deeper shadow plus a 70%-opacity scrim. The one chromatic "elevation" is the purple focus halo — it's how the brand signals attention without resorting to a glow on every surface.

## 8. Interaction & Motion

### Easing

- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — the default for hover swaps, color transitions, ground lifts.
- **Emphasized**: `cubic-bezier(0.2, 0.6, 0.2, 1)` — the `>` nudge, CTA hover, larger surface moves; a slight overshoot reads as "forward momentum".
- **Entrance**: `cubic-bezier(0, 0, 0.2, 1)` — section content rising into view on scroll.
- **Exit**: `cubic-bezier(0.4, 0, 1, 1)` — element leaving / menu collapsing.

### Durations

| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Button color swap, link-to-purple shift, `>` nudge |
| Standard | 240ms | Card ground lift, border strengthen, menu fade |
| Slow | 320ms | Section reveal-on-scroll, full-bleed band entrances |

### Per-Component Micro-States

- **Button hover**: purple brightens `#a600ff` → `#be4bff` in 150ms; the trailing `>` nudges right ~3px with the emphasized curve — the brand's signature motion.
- **Card hover**: ground lifts `#141414` → `#1c1c1c` in 240ms; border strengthens to `#4d4d4d`; a purple `>` may fade in bottom-right. No scale transform.
- **Link hover**: color transitions white → `#a600ff` in 150ms; underline thickens.
- **Input focus**: border swaps 1px `#2e2e2e` → 2px `#a600ff` in 150ms with the purple halo fading in.
- **Section reveal**: content fades and rises 16px → 0 on scroll-in with the entrance curve over 320ms.

### Page Transitions

No heavy page-transition chrome — pages load with the persistent dark top-nav holding steady. The signature motion is the on-scroll reveal (content rising 16px into view) and the `>` nudge on hover, not a full-page fade or slide.

### Reduced Motion

`prefers-reduced-motion: reduce` is honored. The scroll reveals, the `>` nudge, and any transform-based motion drop to opacity-only or are suppressed entirely. Color swaps (link → purple, button brighten) remain because they're essential interaction feedback and don't constitute motion.

## 9. Accessibility & A11y

### Contrast Pairs

- **Text on canvas**: `#ffffff` on `#0a0a0a` — **19.6:1** (AAA at all sizes). The core pairing is maximally legible.
- **Body on canvas**: `#e6e6e6` on `#0a0a0a` — ~16.9:1 (AAA). Slightly softened white still clears AAA.
- **Muted on canvas**: `#a3a3a3` on `#0a0a0a` — ~7.6:1 (AAA). Safe for sub-heads and captions.
- **Text on brand**: `#ffffff` on `#a600ff` — **3.9:1** (AA for large text / UI components only; **fails AA for normal body text**). The purple CTA is fine because the label is 16px weight-600 (large-text threshold) — but never set small white body copy on the purple band without enlarging it.
- **Brand on canvas**: `#a600ff` on `#0a0a0a` — ~4.4:1 (AA for large text and UI components). Good for the `>` mark and accent UI; for small purple body copy, prefer `#be4bff` (lighter, higher contrast on dark).
- **Brand on light**: `#a600ff` on `#ffffff` — ~3.9:1 (AA large only). On the white inversion, treat purple as a large-element / UI accent, not body text.

### Focus Indicators

Every interactive element shows a 2px `#a600ff` focus ring with a soft 4px `rgba(166,0,255,0.25)` outer halo. On the dark canvas this purple ring is high-contrast and unmistakable; on the white inversion the same purple ring still passes as a focus indicator (the halo provides the additional separation). Inputs additionally show the focused 2px purple border on the field itself.

### ARIA Patterns

- **Mega-menu / nav**: the top-nav category triggers use `aria-expanded` and `aria-controls` pointing to their dropdown panel; Esc closes and returns focus to the trigger.
- **Dialogs**: `role="dialog"` + `aria-modal="true"`, focus trap, `aria-labelledby` on the title. Esc closes; Tab cycles within.
- **Card-as-link**: when a whole card is clickable, wrap the headline in the real `<a>` and stretch its hit area — don't attach the link only to the decorative `>`. Decorative `>` glyphs get `aria-hidden="true"`.
- **Tabs / accordions**: standard `role="tablist"`/`role="tab"` and `aria-expanded` disclosure patterns with arrow-key navigation.

### Keyboard Navigation

Tab order: skip-link → top-nav (logotype, category links, search, locale) → hero CTA(s) → card grid in row order → CTA band → footer columns. The purple focus ring is visible on every step. The skip-to-content link is the first focusable element and is essential on a dark site where losing the focus indicator against near-black is costly.

### Screen Reader Hints

Prefer visible, self-describing link text over `aria-label`. The decorative `>` mark must never be the accessible name of a control — it carries no meaning to a screen reader, so it's `aria-hidden` and the real label ("Read the report", "Explore careers") carries the semantics. Icon-only buttons (search, locale) get an `aria-label` matching their visible tooltip.

### Reduced Motion

`prefers-reduced-motion: reduce` is honored — scroll reveals, the `>` nudge, and transform motion drop to opacity-only.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 640px | Single column; display-hero scales 80px → ~40px; nav becomes hamburger; CTAs full-width |
| Tablet | 1024px | Card grid 3-up → 2-up; mega-menu collapses to drawer |
| Desktop | 1280px | Default layout; 12-column grid; 3-up card rows |
| Wide | 1536px | Outer gutters expand; hero `>` and full-bleed media gain breathing room |

### Touch Targets

48px minimum tap target. Pill CTAs already exceed this via their 14px vertical padding plus 16px label. Top-nav links grow to 48px tap height on touch; footer link rows pad to 48px; the hamburger and search icons hold a 48px hit area.

### Collapsing Strategy

- **Top nav**: category links collapse to a full-screen dark hamburger overlay below 1024px. Logotype + `>` and search stay on the bar.
- **Mega-menu**: desktop multi-column dropdown becomes a stacked, tap-to-expand drawer on tablet/mobile.
- **Card grid**: 3-up → 2-up at 1024px → 1-up at 640px.
- **Display type**: `display-hero` 80px scales toward ~40px on mobile while holding weight 700 and the tight tracking.
- **CTA pair**: side-by-side primary + secondary stack vertically and go full-width below 640px.
- **Footer**: multi-column link grid → 2-column at tablet → single-column accordion (tap-to-expand sections) on mobile.

### Image Behavior

Full-bleed hero media uses art-direction crops on mobile (wide 16:9 → portrait 4:5) so the subject stays centered under the headline. The decorative `>` scales proportionally and may move from a slashed overlay to a smaller corner mark on mobile. The dark scrim over hero media intensifies on small screens to keep the white headline legible.

### Container Queries

Marketing logic lives mostly at the document breakpoint level. Card grids that appear inside variable-width panels (sidebars, related-content rails) use container queries so a card collapses to its single-column layout based on the rail width rather than the viewport.

## 11. Content & Voice

### Tone

Accenture's voice is **confident, declarative, and forward-leaning** — short imperative statements over feature lists. "Let There Be Change." "Reinvent with bold change." "We are committed to your success." The register is senior-consulting: it speaks to executives, assumes scale, and leads with transformation rather than tooling. Never breathless, never cute — assured.

### Microcopy Patterns

- **Button verbs**: "Explore", "Discover", "Learn more", "Read the report", "Get in touch", "Explore careers" — each typically trailed by a `>`.
- **Eyebrows**: a tracked 13px line above headlines naming the topic ("Capabilities", "Our latest thinking", "Careers").
- **Error messages**: stated plainly. "Please enter a valid email address." No apologetic or jokey copy.
- **Success confirmations**: brief. "Thank you — we'll be in touch." "Subscription confirmed."

### Empty States

Sparse on marketing. Where they appear (insight search), copy is direct: "No results found. Try a different topic." A single ghost CTA ("Clear filters >") sits below.

### CTA Verb Conventions

- "Explore >" / "Discover >" — the default forward-action verbs; the `>` reinforces the momentum.
- "Read the report" / "Watch the video" — content-action verbs matched to the asset.
- "Get in touch" / "Contact us" — Accenture's preferred lead phrasing over "Request a demo".
- "Explore careers >" — the recruiting CTA, always with the `>`.
- The system avoids "Click here", "Buy now", "Sign up free" — those read consumer, not consulting. Every primary CTA earns its trailing `>`.

## 12. Dark Mode & Theming

Accenture is a **dark-native** brand — the near-black canvas with white type is the default, not a toggle. There is no separate "dark mode" to enable; the page ships dark. The deliberate inversions are the *light* bands — white editorial / research sections that exist for contrast and substance, not as a theme.

If a derivative work needs an explicit light theme (rather than the brand's occasional white band), the recommended token swap is:

- `bg`: `#0a0a0a` → `#ffffff`
- `surface`: `#141414` → `#f2f2f2`
- `text`: `#ffffff` → `#0a0a0a`
- `text-body`: `#e6e6e6` → `#262626`
- `text-muted`: `#a3a3a3` → `#525252`
- `border`: `#2e2e2e` → `#e0e0e0`
- `brand`: `#a600ff` → `#a600ff` (unchanged — purple passes on both grounds; this is why the brand survives the inversion)
- `link`: `#ffffff` → `#0a0a0a` (link hover stays `#a600ff` on both)

Note the brand purple is **theme-invariant** — `#a600ff` clears the large-text/UI threshold on both `#0a0a0a` and `#ffffff`, which is exactly why Accenture can flip the canvas mid-page without changing its accent. The `>` mark and the purple pill are the continuity thread across both grounds.

## 13. Lineage & Influences

Accenture's visual identity descends from the **2000 rebrand** that split the firm from Andersen Consulting — the name "Accenture" ("accent on the future") arrived with the lowercase logotype and the superscript-like `>` over the "t", the original "always moving forward" mark. The 2020 refresh under Wolff Olins escalated that mark into the standalone purple `>` glyph and built the system around it, replacing earlier orange/purple gradient treatments with the single saturated `#a600ff` voltage and the "Let There Be Change" platform.

The dark-canvas, big-statement, single-accent approach sits in the lineage of **premium agency and platform sites** — the discipline of one electric color on near-black, the oversized declarative headline, the reductive single-glyph mark. It rejects the busy, link-dense, blue-and-white "reference catalog" register of older enterprise consulting sites in favor of editorial confidence. It borrows the *restraint* of Swiss-modernist single-accent systems while rejecting their lightness — Accenture keeps the discipline but moves it onto a dramatic dark ground. What it explicitly avoids: multiple competing brand colors, decorative gradients beyond the purple `>`, rounded-corner consumer softness, and the small-print density of legacy consultancy chrome.

**Named influences:**

- [Wolff Olins](https://www.wolffolins.com) — role: brand consultancy behind Accenture's 2020 identity and the `>` system. The single-glyph, single-color discipline is their signature.
- [Commercial Type / Graphik](https://commercialtype.com/catalog/graphik) — role: foundry and typeface; Graphik is the neutral geometric grotesque carrying the entire hierarchy.
- [Pentagram](https://www.pentagram.com) — role: lineage of reductive, single-mark corporate identities and editorial confidence that Accenture's system draws on.
- [IBM Carbon / Plex](https://carbondesignsystem.com) — role: peer enterprise identity; Accenture shares the single-accent, disciplined-system ethos but inverts the canvas to dark and rounds its corners.
- [Stripe](https://stripe.com) — role: peer premium-tech identity; shares the dark-hero, gradient-accent, big-statement register that Accenture applies to consulting.

## 14. Do's and Don'ts

### Do

- Start dark. Near-black `#0a0a0a` canvas with white Graphik type is the default register — not a mode you opt into.
- Use the `>` mark as the signature. Beside the logotype, trailing every primary CTA, terminating "Read more >" links, and slashed across heroes.
- Reserve `#a600ff` purple for the `>`, primary CTA, link hover, focus ring, chips, and the rare accent band. One voltage, used sparingly.
- Set display bold (700) and body regular (400). The confident-then-calm contrast is the typographic engine.
- Use pill CTAs (`radius: 9999`) and softly-rounded 12px cards. Round buttons, gently-rounded containers.
- Carry card depth with ground lift (`#141414` → `#1c1c1c`) and hairline strengthening, not heavy drop shadows on the dark ground.
- Animate the `>` — nudge it right ~3px on CTA hover with the emphasized curve. That forward motion is on-brand.
- Use the white inversion for editorial / research bands, and keep the purple alive across the flip.
- Keep the purple focus ring (2px + halo) visible on every interactive element — a dark site loses focus state easily.
- Write short, declarative, executive-register headlines ("Reinvent with bold change"), not feature lists.

### Don't

- Don't open on white as the default. The brand is dark-native; a white-canvas hero reads as a different company.
- Don't introduce a second brand color. The system is grayscale + one purple — orange, blue, or green is drift.
- Don't make the decorative `>` the accessible name of a control. It's `aria-hidden`; the visible label carries the semantics.
- Don't set small white body text on the purple band — `#ffffff` on `#a600ff` is only 3.9:1, fine for large/600 labels, failing for body. Enlarge or re-weight it.
- Don't bold the body or lighten the display — both collapse the weight contrast that defines the voice.
- Don't square the CTAs. Accenture CTAs are full pills; flat-square buttons read as IBM, not Accenture.
- Don't pile drop shadows on dark cards — they're nearly invisible on near-black. Lift the ground instead.
- Don't tint headlines purple to suggest importance. Hierarchy is weight + size; purple is for the `>`, CTAs, and accents.
- Don't use "Click here", "Buy now", or "Sign up free" — they read consumer. Use "Explore >", "Discover >", "Get in touch".
- Don't drop the trailing `>` from primary CTAs. The mark is the brand's verb; a CTA without it is incomplete.

## 15. Agent Prompt Guide

### Quick Color Reference

- Canvas: `#0a0a0a`
- Canvas Pure: `#000000`
- Surface: `#141414`
- Surface Hover: `#1c1c1c`
- Ink: `#ffffff`
- Body: `#e6e6e6`
- Text Muted: `#a3a3a3`
- Accenture Purple: `#a600ff`
- Brand Bright: `#be4bff`
- Border: `#2e2e2e`

### Example Component Prompts

- "Create a dark hero on `#0a0a0a` with an 80px Graphik display headline at weight 700 and `-0.03em` tracking — 'Let there be change' — a white 18px Graphik subhead at weight 400, and a primary CTA that's a fully-rounded purple `#a600ff` pill with a white 16px/600 label and a trailing `>` mark that nudges right on hover. Add a subtle oversized purple `>` slashed across the background. No second color."
- "Design a content card on `#141414` with a 1px `#2e2e2e` hairline border and 12px corners, 24px padding. White 24px Graphik/600 title, `#e6e6e6` body, and a ghost 'Read more >' link where the `>` turns `#a600ff`. On hover, lift the ground to `#1c1c1c`, strengthen the border to `#4d4d4d`, and fade a small purple `>` into the bottom-right. No drop shadow at rest."
- "Build a CTA pair on dark: a primary purple `#a600ff` pill ('Explore careers >', white label, `radius: 9999`, 14×28px padding) beside a secondary outlined white pill ('Get in touch') that inverts to a solid white fill with `#0a0a0a` label on hover."
- "Create a white editorial inversion band: `#ffffff` ground, `#0a0a0a` headline at 40px Graphik/700, dark body, and insight cards with a 1px `#e0e0e0` border and 12px corners. Keep the primary CTA as the same purple `#a600ff` pill — the purple must survive the flip."
- "Design a dark input: `#1c1c1c` fill, 1px `#2e2e2e` border, 8px corners, 12×16px padding, `#6b6b6b` placeholder. On focus, swap to a 2px `#a600ff` border with a soft `rgba(166,0,255,0.25)` halo."
- "Build a pure-black footer (`#000000`): logotype with a purple `>` top-left, multi-column link grid in `#a3a3a3`, column heads in white 14px/600, link lists in 14px/400 muted, and a fine-print legal row beneath. 64×32px padding."

### Iteration Guide

1. **Audit the canvas first.** It should be near-black `#0a0a0a` (or pure `#000000` on full-bleed hero). If the hero is white, it's the wrong brand — flip it dark.
2. **Audit the `>` mark.** Every primary CTA should end in `>`, the logotype should carry it, and "read more" links should trail it. If the `>` is missing, the entry isn't Accenture yet.
3. **Audit color sprawl.** Only `#a600ff` (and its bright/deep/soft variants) outside grayscale + semantic. Any orange, blue, or green is drift — strip it.
4. **Audit display weight.** Graphik display at 700 with tight negative tracking; body at 400. If a hero headline is lighter than 600 or the body is bold, fix the contrast.
5. **Audit corners.** Pills (`9999`) on every CTA and chip; soft 12px on cards. If buttons are square or sharp-cornered, round them to pills.
6. **Audit shadows on dark.** Heavy `box-shadow` on near-black is invisible and off-brand — replace card depth with a ground lift (`#141414` → `#1c1c1c`) and a stronger border.
7. **Audit purple-on-purple contrast.** White body text on the purple band fails AA — either enlarge it to large-text/600 or move it off the band. Use `#be4bff` for small purple text on dark.
8. **Honor the rhythm.** Dark hero → capability cards on near-black → white research band → purple CTA band → pure-black footer. The cadence, and the moving `>`, are the brand.

---

*Theme-toggle audit: score=0, signals=[none]*