Design Tokens

brand.logo.url

Canonical wordmark URL (white for dark backgrounds) — always use this for headers, presentations, demos

brand.logo.same-origin

Primary wordmark for dark surfaces

brand.logo.wordmark-light

Wordmark for light surfaces (dark text + green X)

brand.logo.wordmark-mono

Single-color white wordmark — for monochrome contexts

brand.logo.wordmark-accent

Hero/marketing wordmark with pink + green accent lines — do not use in product UI

brand.logo.mark

X-only square mark on dark background — favicon, nav, compact badges

brand.logo.mark-light

X-only square mark for light backgrounds

brand.logo.social-square

Padded square wordmark for social media profile pictures / app icons

brand.logo.alt

brand.company.name

brand.company.tagline

brand.slide-mode.dark.background

Template owns the dark background — never set #0D1117 in HTML

brand.slide-mode.dark.text-primary

brand.slide-mode.dark.text-body

brand.slide-mode.dark.text-subtle

brand.slide-mode.dark.text-muted

brand.slide-mode.dark.divider

brand.slide-mode.dark.card-surface

brand.slide-mode.dark.palette

Dark slides use marketing palette colors

brand.slide-mode.light.background

brand.slide-mode.light.text-primary

brand.slide-mode.light.text-body

brand.slide-mode.light.text-subtle

Slide subtitle gray — darkened to meet WCAG 2 AA 3:1 as large (≥24px) display text on white slides and the light card-surface

brand.slide-mode.light.divider

brand.slide-mode.light.card-surface

brand.slide-mode.light.palette

Light slides use enterprise palette colors

brand.opacity-levels.values

colors.marketing.electric-green

Primary brand color — Electric Green

colors.marketing.cyber-blue

Secondary brand color — Cyber Blue

colors.marketing.hot-magenta

Accent brand color — Hot Magenta

colors.marketing.volt-yellow

Highlight color — Volt Yellow

colors.enterprise.professional-green

Enterprise primary — Professional Green (triadic)

colors.enterprise.enterprise-blue

Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.executive-magenta

Enterprise accent — Executive Magenta (triadic)

colors.enterprise.enterprise-violet

Complement of Professional Green

colors.neutral.white

colors.neutral.deep-space

Background

colors.neutral.slate

Surface

colors.neutral.steel

Secondary text

colors.neutral.light-gray

colors.semantic.primary

Default primary — enterprise mode

colors.semantic.secondary

Default secondary — enterprise mode

colors.semantic.accent

Default accent — enterprise mode

colors.semantic.destructive

colors.scale-green.10

Whisper

colors.scale-green.20

Soft

colors.scale-green.40

Light

colors.scale-green.60

Medium

colors.scale-green.100

Enterprise / dark

colors.scale-green.base

Electric Green

colors.scale-green.darker

colors.scale-green.text

Professional green darkened to meet WCAG 2 AA (≥4.5:1) as text on light surfaces (eyebrows, link hover, success chip text)

colors.scale-blue.10

Ice

colors.scale-blue.20

Frost

colors.scale-blue.40

Sky

colors.scale-blue.60

Bright

colors.scale-blue.100

Ocean / enterprise

colors.scale-blue.base

Cyber Blue

colors.scale-blue.deep

colors.scale-blue.darker

colors.scale-magenta.10

Blush

colors.scale-magenta.20

Pink

colors.scale-magenta.40

Rose

colors.scale-magenta.60

Hot

colors.scale-magenta.100

Rich / enterprise

colors.scale-magenta.base

Hot Magenta

colors.scale-magenta.darker

Wine

colors.marketing.electric-green-rgb

RGB components of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-06

6% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-08

8% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-10

10% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-12

12% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-15

15% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-20

20% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-25

25% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-30

30% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-35

35% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-40

40% opacity of Primary brand color — Electric Green

colors.marketing.electric-green-alpha-48

48% opacity of Primary brand color — Electric Green

colors.marketing.cyber-blue-rgb

RGB components of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-06

6% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-08

8% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-10

10% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-12

12% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-15

15% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-20

20% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-25

25% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-30

30% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-35

35% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-40

40% opacity of Secondary brand color — Cyber Blue

colors.marketing.cyber-blue-alpha-48

48% opacity of Secondary brand color — Cyber Blue

colors.marketing.hot-magenta-rgb

RGB components of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-06

6% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-08

8% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-10

10% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-12

12% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-15

15% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-20

20% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-25

25% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-30

30% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-35

35% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-40

40% opacity of Accent brand color — Hot Magenta

colors.marketing.hot-magenta-alpha-48

48% opacity of Accent brand color — Hot Magenta

colors.marketing.volt-yellow-rgb

RGB components of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-06

6% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-08

8% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-10

10% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-12

12% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-15

15% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-20

20% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-25

25% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-30

30% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-35

35% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-40

40% opacity of Highlight color — Volt Yellow

colors.marketing.volt-yellow-alpha-48

48% opacity of Highlight color — Volt Yellow

colors.enterprise.professional-green-rgb

RGB components of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-06

6% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-08

8% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-10

10% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-12

12% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-15

15% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-20

20% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-25

25% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-30

30% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-35

35% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-40

40% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.professional-green-alpha-48

48% opacity of Enterprise primary — Professional Green (triadic)

colors.enterprise.enterprise-blue-rgb

RGB components of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-06

6% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-08

8% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-10

10% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-12

12% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-15

15% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-20

20% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-25

25% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-30

30% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-35

35% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-40

40% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.enterprise-blue-alpha-48

48% opacity of Enterprise secondary — Enterprise Blue (triadic)

colors.enterprise.executive-magenta-rgb

RGB components of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-06

6% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-08

8% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-10

10% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-12

12% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-15

15% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-20

20% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-25

25% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-30

30% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-35

35% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-40

40% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.executive-magenta-alpha-48

48% opacity of Enterprise accent — Executive Magenta (triadic)

colors.enterprise.enterprise-violet-rgb

RGB components of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-06

6% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-08

8% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-10

10% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-12

12% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-15

15% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-20

20% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-25

25% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-30

30% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-35

35% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-40

40% opacity of Complement of Professional Green

colors.enterprise.enterprise-violet-alpha-48

48% opacity of Complement of Professional Green

colors.neutral.white-rgb

RGB components of colors.neutral.white

colors.neutral.white-alpha-06

6% opacity of colors.neutral.white

colors.neutral.white-alpha-08

8% opacity of colors.neutral.white

colors.neutral.white-alpha-10

10% opacity of colors.neutral.white

colors.neutral.white-alpha-12

12% opacity of colors.neutral.white

colors.neutral.white-alpha-15

15% opacity of colors.neutral.white

colors.neutral.white-alpha-20

20% opacity of colors.neutral.white

colors.neutral.white-alpha-25

25% opacity of colors.neutral.white

colors.neutral.white-alpha-30

30% opacity of colors.neutral.white

colors.neutral.white-alpha-35

35% opacity of colors.neutral.white

colors.neutral.white-alpha-40

40% opacity of colors.neutral.white

colors.neutral.white-alpha-48

48% opacity of colors.neutral.white

colors.neutral.deep-space-rgb

RGB components of Background

colors.neutral.deep-space-alpha-06

6% opacity of Background

colors.neutral.deep-space-alpha-08

8% opacity of Background

colors.neutral.deep-space-alpha-10

10% opacity of Background

colors.neutral.deep-space-alpha-12

12% opacity of Background

colors.neutral.deep-space-alpha-15

15% opacity of Background

colors.neutral.deep-space-alpha-20

20% opacity of Background

colors.neutral.deep-space-alpha-25

25% opacity of Background

colors.neutral.deep-space-alpha-30

30% opacity of Background

colors.neutral.deep-space-alpha-35

35% opacity of Background

colors.neutral.deep-space-alpha-40

40% opacity of Background

colors.neutral.deep-space-alpha-48

48% opacity of Background

colors.neutral.slate-rgb

RGB components of Surface

colors.neutral.slate-alpha-06

6% opacity of Surface

colors.neutral.slate-alpha-08

8% opacity of Surface

colors.neutral.slate-alpha-10

10% opacity of Surface

colors.neutral.slate-alpha-12

12% opacity of Surface

colors.neutral.slate-alpha-15

15% opacity of Surface

colors.neutral.slate-alpha-20

20% opacity of Surface

colors.neutral.slate-alpha-25

25% opacity of Surface

colors.neutral.slate-alpha-30

30% opacity of Surface

colors.neutral.slate-alpha-35

35% opacity of Surface

colors.neutral.slate-alpha-40

40% opacity of Surface

colors.neutral.slate-alpha-48

48% opacity of Surface

colors.neutral.steel-rgb

RGB components of Secondary text

colors.neutral.steel-alpha-06

6% opacity of Secondary text

colors.neutral.steel-alpha-08

8% opacity of Secondary text

colors.neutral.steel-alpha-10

10% opacity of Secondary text

colors.neutral.steel-alpha-12

12% opacity of Secondary text

colors.neutral.steel-alpha-15

15% opacity of Secondary text

colors.neutral.steel-alpha-20

20% opacity of Secondary text

colors.neutral.steel-alpha-25

25% opacity of Secondary text

colors.neutral.steel-alpha-30

30% opacity of Secondary text

colors.neutral.steel-alpha-35

35% opacity of Secondary text

colors.neutral.steel-alpha-40

40% opacity of Secondary text

colors.neutral.steel-alpha-48

48% opacity of Secondary text

colors.neutral.light-gray-rgb

RGB components of colors.neutral.light-gray

colors.neutral.light-gray-alpha-06

6% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-08

8% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-10

10% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-12

12% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-15

15% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-20

20% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-25

25% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-30

30% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-35

35% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-40

40% opacity of colors.neutral.light-gray

colors.neutral.light-gray-alpha-48

48% opacity of colors.neutral.light-gray

component.button.default.padding-block

12px — vertical padding

component.button.default.padding-inline

24px — horizontal padding

component.button.default.radius

component.button.default.font-size

component.button.default.font-weight

component.button.default.line-height

component.button.default.border-width

component.button.primary.bg

component.button.primary.fg

component.button.primary.bg-hover

component.button.primary.border-color

component.button.primary.shadow

component.button.secondary.bg

component.button.secondary.fg

component.button.secondary.bg-hover

component.button.secondary.border-color

component.button.secondary.shadow

component.button.accent.bg

component.button.accent.fg

component.button.accent.bg-hover

component.button.accent.border-color

component.button.accent.shadow

component.card.base.padding-block

component.card.base.padding-inline

component.card.base.radius

component.card.base.border-width

component.card.raised.bg

component.card.raised.border-color

component.card.raised.fg

component.card.raised.title-fg

component.card.raised.shadow

component.card.glass.bg

component.card.glass.border-color

component.card.glass.fg

component.card.glass.title-fg

component.card.glass.shadow

component.card.outlined.bg

component.card.outlined.border-color

component.card.outlined.fg

component.card.outlined.title-fg

component.card.outlined.shadow

component.input.base.padding-block

component.input.base.padding-inline

component.input.base.radius

component.input.base.font-size

component.input.base.line-height

component.input.base.border-width

component.input.default.bg

component.input.default.fg

component.input.default.placeholder-fg

component.input.default.border-color

component.input.focused.bg

component.input.focused.fg

component.input.focused.border-color

component.input.focused.ring-color

component.input.focused.ring-width

component.input.disabled.bg

component.input.disabled.fg

component.input.disabled.border-color

component.input.disabled.opacity

component.input.error.bg

component.input.error.fg

component.input.error.border-color

component.input.error.ring-color

component.nav.base.padding-block

component.nav.base.padding-inline

component.nav.base.height

component.nav.surface.bg

component.nav.surface.border-color

component.nav.link.rest-fg

component.nav.link.hover-fg

component.nav.link.active-fg

component.nav.link.font-weight

component.nav.link.underline-color

effects.shadow.sm

effects.shadow.md

effects.shadow.lg

effects.shadow.xl

effects.shadow.2xl

effects.shadow.inner

effects.shadow.primary-lg

Green-tinted brand shadow

effects.shadow.primary-hover

effects.shadow.accent-hover

effects.transition.fast

effects.transition.base

effects.transition.slow

effects.transition.slower

effects.slide-transition.default

All slides default

effects.slide-transition.section-break

Into section break

effects.slide-transition.within-slide

Within-slide elements

effects.gradient.hero

Primary brand gradient — AI energy

effects.gradient.cyber

effects.gradient.neural

effects.gradient.full

effects.gradient.enterprise

Enterprise accent gradient

effects.gradient.image-overlay

Dark slide hero image overlay

effects.gradient.marketing.hero

Marketing-site hero canvas wash

effects.gradient.marketing.cta

Marketing CTA button fill — Electric → Professional Green

effects.gradient.marketing.divider

Section divider line — fades in/out from electric green

effects.gradient.marketing.overlay-dark

Top-to-bottom dark fade for hero image readability

effects.gradient.marketing.overlay-spotlight

Soft radial spotlight (avoid hard 'orb' look — keep ≤18% center alpha)

marketing.semantic.text.primary.dark

Hero / headline text on dark marketing surfaces

marketing.semantic.text.primary.light

Hero / headline text on light marketing surfaces

marketing.semantic.text.body.dark

marketing.semantic.text.body.light

marketing.semantic.text.subtle.dark

marketing.semantic.text.subtle.light

marketing.semantic.text.eyebrow.dark

Section eyebrow / kicker on dark marketing surfaces (not a generic accent)

marketing.semantic.text.eyebrow.light

AA-safe professional green — eyebrow / kicker text on light marketing surfaces (≥4.5:1)

marketing.semantic.text.inverse.dark

Inverted text — used when an inset panel flips background

marketing.semantic.text.inverse.light

marketing.semantic.surface.canvas.dark

Page-level marketing canvas (deep-space body bg)

marketing.semantic.surface.canvas.light

marketing.semantic.surface.panel.dark

Marketing card / panel surface

marketing.semantic.surface.panel.light

marketing.semantic.surface.inverse.dark

Inverted section that flips bg context on an otherwise dark page

marketing.semantic.surface.inverse.light

marketing.semantic.surface.divider.dark

marketing.semantic.surface.divider.light

marketing.semantic.link.rest.dark

marketing.semantic.link.rest.light

marketing.semantic.link.hover.dark

marketing.semantic.link.hover.light

AA-safe professional green — link hover text on light marketing surfaces (≥4.5:1)

marketing.semantic.link.visited.dark

marketing.semantic.link.visited.light

marketing.semantic.action.primary.bg.dark

marketing.semantic.action.primary.bg.light

marketing.semantic.action.primary.fg.dark

marketing.semantic.action.primary.fg.light

marketing.semantic.action.primary.bg-hover.dark

Professional green hover — keeps the dark (#0D1117) CTA label at ≥4.5:1 on the dark-theme primary button (electric-green rest darkens here, not to near-black)

marketing.semantic.action.primary.bg-hover.light

marketing.semantic.action.secondary.bg.dark

marketing.semantic.action.secondary.bg.light

marketing.semantic.action.secondary.fg.dark

marketing.semantic.action.secondary.fg.light

marketing.semantic.action.secondary.bg-hover.dark

marketing.semantic.action.secondary.bg-hover.light

marketing.semantic.action.accent.bg.dark

marketing.semantic.action.accent.bg.light

marketing.semantic.action.accent.fg.dark

marketing.semantic.action.accent.fg.light

marketing.semantic.action.accent.bg-hover.dark

marketing.semantic.action.accent.bg-hover.light

marketing.chamber.surface-textures.audit-rows

Trust chamber — repeating linear-gradient stripes evoke audit row striping.

marketing.chamber.surface-textures.blueprint-grid

Knowledge-layer chamber — orthogonal grid lines at low opacity, schematic register.

marketing.chamber.surface-textures.dashed-lines

How-it-works chamber — horizontal dashed lines marking process stages.

marketing.chamber.surface-textures.paper-warm

Editorial chamber — warm paper tint, evokes essay register.

marketing.chamber.surface-textures.cyan-radial

Closing chamber — cyan radial wash behind decision moment.

marketing.chamber.voice-register.essay

Italic Newsreader carries the H2. Newsreader body. Optional drop cap, optional pull-quote with green left rule.

marketing.chamber.voice-register.schematic

Sans display, mono pillars, no italic. Blueprint surface treatment.

marketing.chamber.voice-register.product

Sans body, mono evidence labels, one italic-Newsreader lede or pull-quote.

marketing.chamber.voice-register.editorial-close

Italic-Newsreader H2 + italic subhead; magenta primary CTA. Closing chamber exception allows up to three italic moments.

marketing.chamber.gradient-allow-list.grad-hero

Green-to-cyan gradient (--grad-hero). Allowed on at most three surfaces: (1) hero H1 accent span, (2) hero stat number, (3) optional Closing-CTA tagline accent. Anywhere else it becomes wallpaper. Sub-stat numbers and card stats stay solid var(--green).

marketing.chamber.magenta-allow-list.closing-cta-primary-button

var(--magenta) on the Closing-CTA primary button fill.

marketing.chamber.magenta-allow-list.closing-cta-tagline

var(--magenta) on the Closing-CTA tagline (the emergency-brake line).

marketing.chamber.magenta-allow-list.sticky-cta-bar-primary-button

var(--magenta) on the sticky mid-page CTA primary button. Anywhere else is drift.

spacing.semantic.xs

0.5rem — tightest gap

spacing.semantic.sm

1rem

spacing.semantic.md

1.5rem — grid baseline

spacing.semantic.lg

2rem

spacing.semantic.xl

2.5rem

spacing.semantic.2xl

3rem

spacing.semantic.3xl

4rem

spacing.numeric.0

spacing.numeric.1

4px

spacing.numeric.2

8px — base unit

spacing.numeric.3

12px

spacing.numeric.4

16px

spacing.numeric.5

20px

spacing.numeric.6

24px

spacing.numeric.8

32px

spacing.numeric.10

40px

spacing.numeric.12

48px

spacing.numeric.16

64px

spacing.numeric.20

80px

spacing.numeric.24

96px

spacing.numeric.32

128px

spacing.container.sm

spacing.container.md

spacing.container.lg

spacing.container.xl

spacing.container.2xl

spacing.container.3xl

spacing.container.full

1440px — max-width

spacing.radius.sm

6px

spacing.radius.md

8px

spacing.radius.lg

12px

spacing.radius.xl

16px

spacing.radius.2xl

20px

spacing.radius.full

spacing.slide-grid.canvas-width

spacing.slide-grid.canvas-height

spacing.slide-grid.content-height

Header 90px + footer 90px

spacing.slide-grid.margin

spacing.slide-grid.padding

spacing.slide-grid.headline-y

spacing.slide-grid.body-y

spacing.slide-grid.right-column-x

Two-column layout

typography.font-family.heading

Display headings, UI text, body in product/proof chambers

typography.font-family.body

Body voice in product chambers (loaded as a local variable font; falls back to Plus Jakarta Sans where unavailable)

typography.font-family.serif

Editorial display + body in essay chambers. Italic Newsreader is the brand's voice gesture — one moment per chamber.

typography.font-family.mono

Eyebrows, chamber counters, pill labels, wayfinding links, architectural footnotes. Never body.

typography.font-family.slide

Used in slide HTML (Figma strips class names)

typography.font-weight.normal

typography.font-weight.medium

typography.font-weight.semibold

typography.font-weight.bold

typography.font-weight.extrabold

typography.font-weight.black

typography.line-height.none

typography.line-height.hero

Hero headings (48px+)

typography.line-height.heading

Large headings (32-44px)

typography.line-height.subheading

Medium headings (24-32px)

typography.line-height.snug

typography.line-height.body

Optimal reading rhythm

typography.line-height.loose

typography.font-size.xs

12px

typography.font-size.sm

14px — minimum readable

typography.font-size.base

20px — body text base

typography.font-size.lg

23px

typography.font-size.xl

26px

typography.font-size.2xl

29px

typography.font-size.3xl

32px

typography.font-size.4xl

36px

typography.font-size.5xl

40px

typography.font-size.6xl

46px

typography.font-size.7xl

52px

typography.font-size.8xl

58px — Display

typography.heading-size.h1-hero

56-72px — Hero page title

typography.heading-size.h1

40-48px — Page titles

typography.heading-size.h2

32-44px — Section headings

typography.heading-size.h3

26-36px — Subsection headings

typography.heading-size.h4

22-30px — Card titles

typography.slide-typography.title

weight: 800, lineHeight: 1.05, letterSpacing: -0.02em

typography.slide-typography.subtitle

weight: 400, lineHeight: 1.30

typography.slide-typography.h2

weight: 700, lineHeight: 1.10, letterSpacing: -0.01em

typography.slide-typography.h3

weight: 700, lineHeight: 1.15, letterSpacing: -0.01em

typography.slide-typography.body

weight: 400, lineHeight: 1.50

typography.slide-typography.caption

weight: 400, lineHeight: 1.40, letterSpacing: 0.01em

typography.slide-typography.stat

weight: 900, lineHeight: 1.00, letterSpacing: -0.03em

typography.slide-typography.stat-label

weight: 600, lineHeight: 1.30, letterSpacing: 0.04em

typography.slide-typography.code

weight: 400, lineHeight: 1.60

typography.slide-typography.eyebrow

weight: 600, lineHeight: 1.20, letterSpacing: 0.10em

typography.marketing.hero.font-size

48-80px responsive — homepage / page hero

typography.marketing.hero.font-weight

typography.marketing.hero.line-height

typography.marketing.hero.letter-spacing

typography.marketing.lede.font-size

20-26px responsive — hero subheading / section lede

typography.marketing.lede.font-weight

typography.marketing.lede.line-height

typography.marketing.lede.letter-spacing

typography.marketing.eyebrow.font-size

14px — section kicker

typography.marketing.eyebrow.font-weight

typography.marketing.eyebrow.line-height

typography.marketing.eyebrow.letter-spacing

typography.marketing.stat.font-size

48-88px responsive — landmark numbers

typography.marketing.stat.font-weight

typography.marketing.stat.line-height

typography.marketing.stat.letter-spacing

typography.marketing.stat-label.font-size

14px — supporting label under stat

typography.marketing.stat-label.font-weight

typography.marketing.stat-label.line-height

typography.marketing.stat-label.letter-spacing

typography.composite.voice-moment.font-family

One per chamber — italic Newsreader. The brand's voice gesture; once per chamber except Closing (up to 3) and Stat-moment (caption + body envelope counts as one).

typography.composite.voice-moment.font-style

One per chamber — italic Newsreader. The brand's voice gesture; once per chamber except Closing (up to 3) and Stat-moment (caption + body envelope counts as one).

typography.composite.voice-moment.font-weight

One per chamber — italic Newsreader. The brand's voice gesture; once per chamber except Closing (up to 3) and Stat-moment (caption + body envelope counts as one).

typography.composite.voice-moment.font-size

One per chamber — italic Newsreader. The brand's voice gesture; once per chamber except Closing (up to 3) and Stat-moment (caption + body envelope counts as one).

typography.composite.voice-moment.line-height

One per chamber — italic Newsreader. The brand's voice gesture; once per chamber except Closing (up to 3) and Stat-moment (caption + body envelope counts as one).

typography.composite.voice-moment.letter-spacing

One per chamber — italic Newsreader. The brand's voice gesture; once per chamber except Closing (up to 3) and Stat-moment (caption + body envelope counts as one).

typography.composite.wayfinding.font-family

Eyebrows, dotted-underline wayfinding links. Mono, uppercase, tracked. Never body.

typography.composite.wayfinding.font-style

Eyebrows, dotted-underline wayfinding links. Mono, uppercase, tracked. Never body.

typography.composite.wayfinding.font-weight

Eyebrows, dotted-underline wayfinding links. Mono, uppercase, tracked. Never body.

typography.composite.wayfinding.font-size

Eyebrows, dotted-underline wayfinding links. Mono, uppercase, tracked. Never body.

typography.composite.wayfinding.line-height

Eyebrows, dotted-underline wayfinding links. Mono, uppercase, tracked. Never body.

typography.composite.wayfinding.letter-spacing

Eyebrows, dotted-underline wayfinding links. Mono, uppercase, tracked. Never body.

typography.composite.wayfinding.text-transform

Eyebrows, dotted-underline wayfinding links. Mono, uppercase, tracked. Never body.

typography.composite.chamber-counter.font-family

Two-character zero-padded chamber prefix (e.g. `01 — THE WEDGE`). aria-hidden in code so screen readers announce only the eyebrow.

typography.composite.chamber-counter.font-style

Two-character zero-padded chamber prefix (e.g. `01 — THE WEDGE`). aria-hidden in code so screen readers announce only the eyebrow.

typography.composite.chamber-counter.font-weight

Two-character zero-padded chamber prefix (e.g. `01 — THE WEDGE`). aria-hidden in code so screen readers announce only the eyebrow.

typography.composite.chamber-counter.font-size

Two-character zero-padded chamber prefix (e.g. `01 — THE WEDGE`). aria-hidden in code so screen readers announce only the eyebrow.

typography.composite.chamber-counter.line-height

Two-character zero-padded chamber prefix (e.g. `01 — THE WEDGE`). aria-hidden in code so screen readers announce only the eyebrow.

typography.composite.chamber-counter.letter-spacing

Two-character zero-padded chamber prefix (e.g. `01 — THE WEDGE`). aria-hidden in code so screen readers announce only the eyebrow.

typography.composite.chamber-counter.text-transform

Two-character zero-padded chamber prefix (e.g. `01 — THE WEDGE`). aria-hidden in code so screen readers announce only the eyebrow.

ui-colors.semantic.success.light

Enterprise Professional Green

ui-colors.semantic.success.dark

Marketing Electric Green

ui-colors.semantic.warning.light

Darkened Volt Yellow — meets WCAG 2 AA 3:1 as a UI/icon/accent color on light surfaces (not used as body text)

ui-colors.semantic.warning.dark

Volt Yellow

ui-colors.semantic.error.light

Executive Magenta

ui-colors.semantic.error.dark

Hot Magenta

ui-colors.semantic.info.light

Enterprise Blue

ui-colors.semantic.info.dark

Cyber Blue

ui-colors.chip.critical-fg.light

Executive Magenta — full strength on light surfaces

ui-colors.chip.critical-fg.dark

Hot Magenta at scale-magenta-60 — lightened from full-strength

ui-colors.chip.critical-bg.light

ui-colors.chip.critical-bg.dark

ui-colors.chip.critical-border.light

ui-colors.chip.critical-border.dark

ui-colors.chip.urgent-fg.light

Dark gold — Volt Yellow darkened to meet WCAG 2 AA 4.5:1 as chip text on urgent-bg over every light surface (raised and app-bg)

ui-colors.chip.urgent-fg.dark

Volt Yellow

ui-colors.chip.urgent-bg.light

ui-colors.chip.urgent-bg.dark

ui-colors.chip.urgent-border.light

ui-colors.chip.urgent-border.dark

ui-colors.chip.standard-fg.light

Slate — neutral chip text on light

ui-colors.chip.standard-fg.dark

Steel tint — neutral chip text on dark

ui-colors.chip.standard-bg.light

ui-colors.chip.standard-bg.dark

ui-colors.chip.standard-border.light

ui-colors.chip.standard-border.dark

ui-colors.chip.info-fg.light

Enterprise Blue

ui-colors.chip.info-fg.dark

Cyber Blue

ui-colors.chip.info-bg.light

ui-colors.chip.info-bg.dark

ui-colors.chip.info-border.light

ui-colors.chip.info-border.dark

ui-colors.chip.success-fg.light

Professional Green darkened to meet WCAG 2 AA 4.5:1 as chip text on success-bg over every light surface (raised and app-bg)

ui-colors.chip.success-fg.dark

Electric Green

ui-colors.chip.success-bg.light

ui-colors.chip.success-bg.dark

ui-colors.chip.success-border.light

ui-colors.chip.success-border.dark

ui-colors.surface.base.light

ui-colors.surface.base.dark

Deep Space

ui-colors.surface.raised.light

ui-colors.surface.raised.dark

Slate

ui-colors.surface.overlay.light

ui-colors.surface.overlay.dark

ui-colors.surface.app-bg.light

Subtle gray below the glass on light theme

ui-colors.surface.app-bg.dark

Deeper than Deep Space — the "void" behind glass panels

ui-colors.surface.glass.light

ui-colors.surface.glass.dark

ui-colors.surface.glass-solid.light

ui-colors.surface.glass-solid.dark

ui-colors.interactive.hover

4% Electric Green tint

ui-colors.interactive.focus

8% Electric Green tint — accompanies focus ring

ui-colors.interactive.active

12% Electric Green tint

ui-colors.interactive.disabled-opacity

Apply to entire element — 40% opacity

ui-colors.border.default.light

ui-colors.border.default.dark

ui-colors.border.subtle.light

ui-colors.border.subtle.dark

ui-colors.border.strong.light

ui-colors.border.strong.dark

ui-colors.border.interactive.light

Enterprise Green for focused/active borders

ui-colors.border.interactive.dark

Electric Green for focused/active borders

ui-colors.border.glass.light

ui-colors.border.glass.dark

ui-colors.border.glass-subtle.light

ui-colors.border.glass-subtle.dark

ui-colors.context.marketing.primary

ui-colors.context.marketing.secondary

ui-colors.context.marketing.accent

ui-colors.context.enterprise.primary

ui-colors.context.enterprise.secondary

ui-colors.context.enterprise.accent

ui-colors.opacity.0

ui-colors.opacity.5

ui-colors.opacity.10

ui-colors.opacity.15

ui-colors.opacity.20

ui-colors.opacity.25

ui-colors.opacity.30

ui-colors.opacity.40

ui-colors.opacity.50

ui-colors.opacity.60

ui-colors.opacity.70

ui-colors.opacity.75

ui-colors.opacity.80

ui-colors.opacity.85

ui-colors.opacity.90

ui-colors.opacity.95

ui-colors.opacity.100

ui-colors.text.primary.light

ui-colors.text.primary.dark

ui-colors.text.body.light

ui-colors.text.body.dark

ui-colors.text.subtle.light

Steel-blue darkened to meet WCAG 2 AA 4.5:1 as secondary/supporting text on every light surface (base, raised, and the darker app-bg)

ui-colors.text.subtle.dark

ui-colors.text.muted.light

Steel-blue darkened to meet WCAG 2 AA 4.5:1 as placeholder/muted text on every light surface (base, raised, and the darker app-bg)

ui-colors.text.muted.dark

ui-colors.text.muted-alpha.light

Low-alpha black captions on glass — alpha raised to meet WCAG 2 AA 4.5:1 over every light surface (base, raised, app-bg)

ui-colors.text.muted-alpha.dark

Low-alpha white captions on glass — alpha raised to meet WCAG 2 AA 4.5:1 over dark surfaces

ui-effects.shadow.primary

Green-tinted brand shadow

ui-effects.shadow.secondary

Blue-tinted brand shadow

ui-effects.shadow.accent

Magenta-tinted brand shadow

ui-effects.shadow.primary-hover

ui-effects.shadow.accent-hover

ui-effects.shadow.colored

Generic branded glow

ui-effects.text-shadow.primary-sm

ui-effects.text-shadow.primary-md

ui-effects.text-shadow.primary-lg

ui-effects.text-shadow.secondary

ui-effects.elevation.sm

Resting card

ui-effects.elevation.md

Hovered card

ui-effects.elevation.panel

Heavy drop shadow for glass panels on dark app-bg

ui-effects.radius.sm

ui-effects.radius.md

ui-effects.radius.lg

ui-effects.radius.xl

ui-effects.radius.2xl

ui-effects.radius.full

ui-effects.radius.panel

Glass panel corner — matches radius.xl

ui-effects.radius.nav

ui-effects.blur.panel

Heavy blur for glass panels — 80px gives frosted-glass look

ui-effects.blur.light

Light blur for overlays / tooltips

ui-effects.duration.micro

ui-effects.duration.fast

ui-effects.duration.base

ui-effects.duration.slow

ui-effects.duration.slower

ui-effects.duration.animation

ui-effects.easing.premium

Smooth deceleration — default for UI interactions

ui-effects.easing.elastic

Springy overshoot — toggles, switches

ui-effects.easing.back

Slight overshoot — modals, drawers

ui-effects.easing.smooth

Standard material — existing slide transitions

ui-effects.easing.spring

Energetic bounce — buttons, badges

ui-effects.easing.bounce

Playful bounce — toasts, tooltips

ui-effects.focus-ring.width

ui-effects.focus-ring.offset

ui-effects.focus-ring.style

ui-effects.gradient.text

Heading shimmer — animate with gradient-shimmer keyframe

ui-effects.gradient.text-size

Background-size for shimmer animation

ui-layout.z-index.base

Default stacking context

ui-layout.z-index.dropdown

Dropdown menus and select popovers

ui-layout.z-index.sticky

Sticky headers and navigation

ui-layout.z-index.overlay

Overlay backdrops

ui-layout.z-index.modal

Modal dialogs and drawers

ui-layout.z-index.toast

Toast notifications

ui-layout.z-index.tooltip

Tooltips — always on top

ui-layout.grid.columns

Default column count

ui-layout.grid.gutter-sm

Tight gutter for mobile

ui-layout.grid.gutter-md

Default gutter

ui-layout.grid.gutter-lg

Comfortable gutter for wide screens

ui-layout.touch-target.mobile

WCAG 2.5.8 Target Size Enhanced — minimum for mobile

ui-layout.touch-target.desktop

Comfortable desktop minimum

ui-layout.touch-target.minimum

WCAG 2.5.5 Target Size Minimum — absolute floor

ui-layout.section-padding.none

ui-layout.section-padding.sm

32px — tight section

ui-layout.section-padding.md

64px — default section

ui-layout.section-padding.lg

96px — spacious section

ui-layout.panel.padding

Default glass panel interior padding

ui-layout.panel.padding-compact

Compact interior padding (sidebars, narrow panels)

ui-layout.panel.padding-hero

Hero panel interior padding

ui-layout.panel.gap

Default gap between glass panels in a page layout

ui-layout.panel.gap-sm

Tighter gap for inner panel content

ui-layout.panel.nav-height

Top nav bar height used across DAM routes

ui-layout.breakpoint.sm

Mobile landscape / small tablet

ui-layout.breakpoint.md

Tablet portrait

ui-layout.breakpoint.lg

Tablet landscape / small desktop

ui-layout.breakpoint.xl

Desktop

ui-layout.breakpoint.2xl

Large desktop

ui-typography.font-family.ui

App UI font — matches brand

ui-typography.font-family.code

ui-typography.letter-spacing.tighter

Display headings

ui-typography.letter-spacing.tight

Section headings

ui-typography.letter-spacing.tight-medium

ui-typography.letter-spacing.tight-subtle

Subheadings

ui-typography.letter-spacing.normal

Body text

ui-typography.letter-spacing.wide

Kickers and labels

ui-typography.letter-spacing.wide-small

Eyebrow text and caps

ui-typography.heading-spacing.h1-margin-top

40px

ui-typography.heading-spacing.h1-margin-bottom

24px

ui-typography.heading-spacing.h2-margin-top

32px

ui-typography.heading-spacing.h2-margin-bottom

16px

ui-typography.heading-spacing.h3-margin-top

24px

ui-typography.heading-spacing.h3-margin-bottom

12px

ui-typography.heading-spacing.h4-margin-top

20px

ui-typography.heading-spacing.h4-margin-bottom

8px

ui-typography.heading-spacing.scroll-margin-top

96px — clearance for sticky headers on anchor nav