---
version: alpha
name: "Accenture"
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."
colors:
  bg: "#0a0a0a"
  bg-pure: "#000000"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  surface-strong: "#262626"
  surface-light: "#ffffff"
  surface-light-soft: "#f2f2f2"
  text: "#ffffff"
  text-strong: "#ffffff"
  text-body: "#e6e6e6"
  text-muted: "#a3a3a3"
  text-soft: "#6b6b6b"
  text-on-light: "#0a0a0a"
  text-on-light-mute: "#525252"
  brand: "#a600ff"
  brand-bright: "#be4bff"
  brand-deep: "#7d00c4"
  brand-soft: "rgba(166,0,255,0.12)"
  on-brand: "#ffffff"
  border: "#2e2e2e"
  border-strong: "#4d4d4d"
  border-on-light: "#e0e0e0"
  link: "#ffffff"
  link-hover: "#a600ff"
  focus: "#a600ff"
  scrim: "rgba(0,0,0,0.7)"
  success: "#3ad29f"
  success-soft: "rgba(58,210,159,0.14)"
  warning: "#ffb800"
  warning-soft: "rgba(255,184,0,0.14)"
  danger: "#ff5252"
  danger-soft: "rgba(255,82,82,0.14)"
  info: "#a600ff"
  info-soft: "rgba(166,0,255,0.12)"
typography:
  display:
    fontFamily: "Graphik"
    fontSize: "80px"
    lineHeight: 1.55
    letterSpacing: "-0.03em"
  body:
    fontFamily: "Graphik"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

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.

## Colors

### 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.

## Typography

### 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.

## Layout

### 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.

### 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.

## Elevation & Depth

| 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.

## Shapes

| 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.

## Components

### 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.

### 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.

### 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.

### 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 `>`.

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.

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.

## 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.

### 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]*