Axelerant Brand Identity (branding.md v1.2.0)

Canonical visual reference for the live axelerant.com. Every visual decision defers to this file. Tokens live in src/styles.css; this doc and that file must stay in sync.

v1.2.0 changes (post-launch consolidation):

- Type & Spacing System v1.0 promoted to canonical (was Phase 1). .t-, .btn-, .field, .textarea, .chip, .section-y are the required primitives — no ad-hoc text-2xl font-semibold for headings.

- Two orange roles formalized: --ax-orange #F25A02 (brand fill: logo, gradient, brand surfaces) vs --sys-accent #EA580C (interactive: buttons, links, chips, focus rings, .accent-italic). Legacy text-vermilion / text-teal / bg-coral now resolve to --sys-accent for auto-alignment.

- Default surface neutralized further: --ax-off-white and --paper are #FAFAF9 (was #ECEBE6). Cream retired from defaults.

- Sharp-shadow focus motif adopted for textareas and framed inputs: 8px 8px 0 0 var(--sys-accent).

- Container locks published: .container-page (max 1280) and .container-chrome (max 1440), both with px-6 md:px-10.

- Font pipeline: self-hosted (@fontsource-variable) plus a Fraunces 600 subset (Fraunces Subset) declared first in --font-display to cut LCP.

---

1. Color tokens

1.1 Brand (primary)

1.2 System accent (interactive)

Distinct from --ax-orange. This is the color that appears on buttons, links, form focus, chips, and .accent-italic. Warmer / slightly cooler than the brand fill and tuned for WCAG 4.5:1 on paper.

Rule of thumb: fills that ARE the brand use --ax-orange. Actions that USE the brand use --sys-accent. Never swap them on a button.

1.3 Tints and shades

• Orange family: --ax-orange-deep #C24700 (hover, deep gradient stop), --ax-orange-mid #FFA342, --ax-orange-light #FFDCB6, --ax-orange-tint #FFF1E5.
• Yellow family: --ax-yellow-mid #FFE066, --ax-yellow-light #FFF4B8.

1.4 Neutrals

1.5 Legacy tokens (back-compat only)

Navy + blue were retired. Tokens still exist but resolve into the warm family. Do not introduce new uses.

• --ax-navy → #161616 (Onyx)
• --ax-blue → #C24700 (orange-deep)
• --ax-blue-mid → #F9C902 (Tuscan Sun)
• --ax-blue-light → #FFE066
• --ax-blue-tint → #FFF4B8
• --color-vermilion / --color-teal / --color-coral → --sys-accent
• --color-vermilion-soft / --color-teal-soft → --ax-orange-tint

The one sanctioned blue on the site is the Grow lens accent (cobalt).

---

2. Lens accents (locked)

Each of the four lenses owns one color. Do not swap.

Utilities: bg-lens-strategy, text-lens-grow, etc. Cobalt for Grow is the only sanctioned blue on the site.

---

3. Brand gradient

--brand-gradient: linear-gradient(90deg,
  #F25A02 0%, #FFA342 22%, #F9C902 50%, #C24700 78%, #161616 100%);

Orange → Tuscan Sun → deep orange → Onyx. Vertical variant --brand-gradient-vertical. Classes: .bg-brand-gradient, .bg-brand-gradient-v, .brand-gradient-drift (18s ambient pan), .bg-brand-gradient-animated (9s aurora border).

• Hero panels, section openers, deck cover slides, loading screens, environmental graphics.
• Never on button backgrounds. Never behind body text. Not on every section (loses meaning). Not on tiny areas (transitions need space).

---

4. Typography (Type & Spacing System v1.0)

4.1 Families

• Display / Serif: Fraunces 600 SemiBold. Loaded as Fraunces Subset first (17 KB normal / 21 KB italic covering U+0020–00FF + common punctuation), then Fraunces Variable as fallback for extended glyphs.
• Body / UI: Inter Variable with cv02 cv03 cv04 cv11 ss01 kern calt liga enabled.
• Mono: JetBrains Mono Variable. Used for eyebrows, chips, buttons, code.
• Signature (contact page only): Caveat 600.

Fraunces variation settings for display sizes: "opsz" 80, "SOFT" 50. For rare body-sized Fraunces: "opsz" 14, "SOFT" 25.

4.2 Type scale (desktop → tablet → mobile)

Rules:

• Line-height is unitless so it scales with the responsive size.
• Body, small, caption, eyebrow, chip HOLD desktop size across breakpoints.
• Never split a .t-* class into ad-hoc font-size + line-height. Use the class.
• 12px mono is pill-only — never a data-cell font.

4.3 Signature accent move (§4.5)

Class .t-accent (heading-local) and .accent-italic (any element) = Fraunces Italic 600 in --sys-accent. Once, maybe twice per page. Never on long phrases (> 4–5 words), whole headlines, body emphasis (use Inter italic), client names, or technical terms.

We're an AI-native agency rooted in <span className="t-accent">Excellence, Openness, and Kindness</span>.

---

5. Controls

5.1 Buttons (.btn-primary, .btn-secondary, .link-text)

Shared: 48px tall, 24px horizontal padding, 0px radius, JetBrains Mono 14px uppercase +1px tracking, 10px gap to arrow, 20px arrow.

• .btn-primary — fill --sys-accent, white text, no border. Hover → --sys-accent-hover. Active → --sys-accent-active + translateY(1px). Focus → 2px --sys-accent outline, 2px offset. Loading → transparent text + white spinner.
• .btn-secondary — transparent fill, 1px --ink border, --ink text. Hover → fills to --ink, text flips to --paper.
• .link-text — same typography, no height/padding, sits inline as a CTA. Color --sys-accent.
• .link-inline — prose link. --sys-accent, underlined, 3px offset, 1px thickness.

Never place the brand gradient on a button.

5.2 Fields (.field) and textareas (.textarea)

• Field: 48px tall, 16px horizontal padding, Inter 16px, 1px rgba(27,26,23,0.24) border, 0px radius. Focus lifts bottom border to 2px --sys-accent (no ring). Invalid → --err-red (#B91C1C). Disabled → 4% ink wash.
• Textarea: same border, but focus swaps to 2px ink border + sharp shadow 8px 8px 0 0 var(--sys-accent). This is the recognisable brand focus motif (also used by .input-frame).
• Label: .field-label mono 14px uppercase +1.7px tracking --ink-soft, 8px below-margin.
• Error message: .field-error Inter 14px --err-red.

5.3 Chips and tags

• .chip — solid fill --sys-accent, white text, pill (--radius-pill 999px), 6px/12px padding, mono 12px uppercase +0.7px tracking.
• .chip-outline — transparent, --ink text, 1px rgba(27,26,23,0.3) border.
• .chip-index — numbered stat pill, no bg, --ink-soft.

---

6. Layout, spacing, containers

6.1 Spacing grid (4px)

--space-1 4 · --space-2 8 · --space-3 12 · --space-4 16 · --space-5 24 · --space-6 32 · --space-7 48 · --space-8 64 · --space-9 96 · --space-10 128.

Tailwind utilities: p-space-5, gap-space-4, mt-space-6, etc.

6.2 Section rhythm

• --section-y = 96px desktop / 72px tablet / 56px mobile. Apply via .section-y, .section-y-t, .section-y-b.
• --stack-gap = 24px. .stack > + sets that vertical rhythm.
• --grid-gutter = 32px desktop / 16px mobile. Use .grid-gutter.

6.3 Containers

Home page and all content routes use .container-page. Nav / footer / full-bleed chrome use .container-chrome.

6.4 Radius

--radius = 0.25rem (sharp corners preserved from Editorial Dossier). Buttons and fields use --btn-radius 0 (fully square). Chips use --radius-pill 999px.

---

7. Surfaces and dark mode

7.1 Light (default)

• Body: --paper #FAFAF9, ink --charcoal #1B1A17.
• Muted band: --paper-dim #F1F1EF.
• Elevated card: --surface-elevated #FFFFFF.
• Blog long-form: .blog-surface lifts paper to #FDFCFA.

7.2 Dark (§3.8)

• Surface: --ax-onyx #161616. Elevated #262626.
• Text: off-white #F2F2F2. Secondary #B8BCC2.
• Lifted accents: orange #FF7A2E, cobalt #4FAAFF (Grow lens only).
• Use .on-dark wrapper to auto-swap .t-body, .t-eyebrow, .link-inline, .btn-secondary for dark surfaces.

7.3 On-dark text roles

• --on-dark-heading #F4F1EA
• --on-dark-body rgba(244,241,234,0.66)
• --on-dark-meta rgba(255,255,255,0.4)

---

8. Motion

• .reveal / .reveal-stagger — opacity + 16px translateY, 400ms ease-out. Stagger delays 0/80/160/240/320/400 ms. Toggled by .is-visible via IntersectionObserver. Never wrap above-the-fold LCP elements (heroes, primary headline) — CLS/LCP regression.
• .brand-gradient-drift — 18s slow ambient pan behind hero copy.
• .bg-brand-gradient-animated / .bg-brand-gradient-border — 9s linear aurora pan for framed feature cards.
• .animate-logo-marquee — 75s linear infinite, translateX(-50%) loop with duplicated track.
• .brad-anim — corner-brad pop-in, 520ms cubic-bezier(0.34, 1.56, 0.64, 1).
• .exec-spotlight / @keyframes exec-glow — Executive Walkthrough mode pulses.
• .journey-flow — 6s ease-in-out ambient sweep for journey ribbons.

All motion respects prefers-reduced-motion: reduce. Keep it that way.

---

9. Shadows

---

10. Structural / dossier layer (preserved)

• Sharp corners (radius 0.25rem).
• Corner brads (.brads + .brad-bl / .brad-br inside a position: relative parent) on dossier cards.
• Structural TopNav — charcoal stripe + divided cells, not a rounded sticky bar.
• .paper-grain / .grain subtle noise overlays (3–3.5% opacity, multiply).
• .rule-divider for 1px section rules.
• Generous whitespace. Density is not the aesthetic.

---

11. Logo

• Mark component: src/components/walkthrough/AxelerantMark.tsx. Source PNG is already tangerine. Do not recolor the PNG.
• Footer logo height: 45px global.
• Never recreate the wordmark in Fraunces or Inter — it's custom-drawn.
• On dark surfaces, render client logos as solid-white silhouettes via CSS mask (see SanityCaseStudyView.tsx reference).

---

12. Forbidden pairings

• Yellow text on white (contrast failure).
• Orange + yellow large adjacent fills ("construction site"). The gradient does the transition.
• Onyx text on Onyx; cobalt text on Onyx without lift.
• Pure black #000 anywhere (use --ax-onyx).
• Brand gradient on a button, on body-text background, or on every section.
• New uses of --ax-blue* / --ax-navy outside the Grow lens.
• Ad-hoc text-white / bg-black / raw hex in components. Always semantic tokens.
• .t-* classes split into hand-tuned font-size + line-height. Use the class.
• Wrapping the hero / LCP headline in .reveal.

---

13. Quick-reference cheatsheet

// Section shell
<section className="section-y">
  <div className="container-page">
    <p className="t-eyebrow text-accent-sys">Case study</p>
    <h2 className="t-h2 mt-space-3">
      Race day traffic, <span className="t-accent">held.</span>
    </h2>
    <p className="t-subtitle mt-space-4 text-ink-soft max-w-[52ch]">
      A composable DXP that stays up under global spikes.
    </p>
    <div className="mt-space-6 flex gap-space-4">
      <button className="btn-primary">Book a discovery <span className="arrow">→</span></button>
      <a className="link-text">Read the case <span className="arrow">→</span></a>
    </div>
  </div>
</section>

// Form field
<label className="field-label" htmlFor="email">Work email</label>
<input id="email" type="email" className="field" placeholder="you@company.com" />

---

Sync rule

Any change to color, type, spacing, motion, or control specs updates both this file and src/styles.css in the same commit. Version bump on the top of this file. src/styles.css header comment references the current version.