Maze

Light-first canvas (#ffffff with 33 measured background occurrences) paired with #000000 doing the dominant reading layer (1571 text occurrences) and #212121 carrying secondary text emphasis (138 occurrences). Cool gray #d0d5d2 (5 occurrences) for muted surfaces, dividers, input borders. The marketing surface refuses a chromatic brand accent — no paint hex carries CTAs or hero ornament. The only saturated hex measured is #1863dc, a one-element inline link reserved for body prose. The single gradient captured is incidental, not a brand vehicle.

• Pure black #000000 (weights 300/400) — primary reading text and display, 1571 measured text occurrences
• Slate dark #212121 — secondary text emphasis, 138 measured text occurrences
• Off-white #ffffff — primary canvas background, 33 measured surface occurrences
• Cool gray #d0d5d2 — muted surfaces, dividers, input borders, 5 measured surface occurrences
• Reserved blue #1863dc — inline link only, never a fill or button (1 measured text occurrence)
• No chromatic brand accent — buttons resolve as black-on-white or white-on-black; no brand paint, no gradient hero

One incidental gradient captured in the layout — not a brand atmosphere vehicle. The marketing register depends on flat color and typographic weight, not gradient warmth.

• Single display family: Phonic (custom neo-grotesque, self-hosted). Body fallback: ui-sans-serif system stack at weight 400/700.
• Display weight discipline: weight 300 (Light) is the entire display tier from 22 px to 58 px headlines. Do not substitute Phonic Medium or Bold for display — the light-weight commitment is the brand's posture.
• Display sizes captured: 22 / 28 / 46 / 58 px on hero and section headlines. Line-heights tight at 1.05-1.1.
• Body sizes: 14 / 16 / 17 px ui-sans-serif. Body line-height generous at 1.4-1.7.
• Bold reserved for body emphasis only (weight 700 ui-sans-serif). Phonic never appears in bold.
• No italic in display or body — italic is not part of the brand's typographic vocabulary.
• Paragraph max 55-65 ch at 16 px body; hero copy holds 35-45 ch at 46-58 px Phonic Light for editorial pacing.

• Custom non-Tailwind scale: 1 / 4 / 8 / 10 / 12 / 16 / 20 / 22 px dominate the captured layout, with 24 / 26 / 32 / 40 px appearing at lower frequency. The 22 px increment is the signature off-grid step that breaks the 4 px utility rhythm.
• Container max-width 1280 px, with narrow content tiers captured for mobile clusters, body paragraphs, and editorial pull-quotes.
• Section vertical rhythm: editorial pacing rather than fixed cadence — driven by argument structure, not section count.
• Card and pull-quote padding: 16-22 px on desktop (use the 22 px off-grid step for editorial rhythm), 8-16 px on mobile.
• Gutter values for flex/grid: 4 / 8 / 12 / 16 px — tighter than typical Tailwind, supporting the typographic-first composition.

• Primary elevation is no elevation — the brand depends on flat type-on-paper reading register. Cards differentiate via 1 px borders or background shift, not drop shadow.
• Border-driven differentiation: 1 px solid borders at #d0d5d2 for card outlines, no rounded shadow stacks.
• Layering depth comes from typographic scale and whitespace placement, not from blur or elevation tokens.
• Focus state uses a 2 px solid ring on #000000 — high-contrast, no blur, no glow.

• Pick radius from the 4 / 8 / 12 / 16 / 20 px scale; never half-pixel or magic values.
• Buttons and inputs: 8-12 px radius (medium); cards and pull-quotes: 16-20 px (the upper end of the scale, for editorial weight).
• Avoid pill / fully-rounded shapes outside of method-tag chips — Maze's geometry is rectangular-with-corners-softened, not stadium-rounded.
• Icons stay 16-22 px in UI; method-tag chips at 14 px text + 4 px vertical padding.

• Hero CTA button (primary dark)

  background

  #000000

  color

  #ffffff

  padding

  12px 22px

  borderRadius

  8px

  fontSize

  14px

  fontWeight

  400

  fontFamily

  ui-sans-serif, system-ui, sans-serif

  transition

  opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1)

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-lg bg-black px-[22px] py-3 font-sans text-sm font-normal text-white transition-opacity duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:opacity-80

• Hero CTA button (secondary outline)

  background

  transparent

  color

  #000000

  padding

  12px 22px

  borderRadius

  8px

  border

  1px solid #d0d5d2

  fontSize

  14px

  fontWeight

  400

  fontFamily

  ui-sans-serif, system-ui, sans-serif

  transition

  background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1)

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-lg border border-[#d0d5d2] bg-transparent px-[22px] py-3 font-sans text-sm font-normal text-black transition-colors duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-[#f7f7f7]

• Hero display headline (Phonic Light)

  fontFamily

  Phonic, ui-sans-serif, system-ui, sans-serif

  fontStyle

  normal

  fontSize

  58px

  fontWeight

  300

  lineHeight

  63.8px

  letterSpacing

  0

  color

  #000000

  Tailwind

  Copy

  font-[Phonic] text-[58px] font-light leading-[63.8px] tracking-normal text-black

• Inline link (reserved blue)

  display

  inline

  color

  #1863dc

  textDecoration

  underline

  textUnderlineOffset

  2px

  fontWeight

  400

  Tailwind

  Copy

  inline text-[#1863dc] underline underline-offset-2 font-normal

• Method tag chip (Recruit / Research / Analyze)

  display

  inline-flex

  padding

  4px 12px

  borderRadius

  20px

  background

  #ffffff

  border

  1px solid #d0d5d2

  color

  #000000

  fontSize

  14px

  fontWeight

  400

  fontFamily

  ui-sans-serif, system-ui, sans-serif

  Tailwind

  Copy

  inline-flex items-center rounded-full border border-[#d0d5d2] bg-white px-3 py-1 font-sans text-sm font-normal text-black

• Two timing tiers: interactive feedback (0.15-0.25s) and section-level reveals (0.4-0.5s). A separate ambient tier reaches 60s for hero atmospheric drift.
• Easing mix: linear for ambient drift, cubic-bezier(0.4, 0, 0.2, 1) and (0, 0, 0.2, 1) for interactive feedback, ease-in-out for section reveals. The mix is intentional — single-easing systems feel mechanical at this composition.
• GSAP runtime is required for the sticky-pinned hero choreography (`window._gsap` evidence in capture). CSS-only transitions cannot stitch the multi-frame timeline reliably.
• Respect `prefers-reduced-motion` — opacity transitions become instant, sticky-pinned hero snaps to its first frame, ambient drifts pause.

• Buttons confirm with a 0.25s opacity dim — not a translate or scale. Motion is for reveal, not affordance.
• Links underline on hover with the reserved #1863dc inline-link blue — never an accent shift on display text.
• Method-tag chips on hover hold their #d0d5d2 border, no fill change — the chip is a label, not a button.
• Cursor stays default on body content; pointer reserved for genuine interactives.

Bootstrap-legacy adjacent: sm=576 (not Tailwind 640) / md=768 / lg=1024 / xl=1280 / 2xl=1536. Container narrows on mobile to the captured tiers and expands to 1024-1280 on desktop. The sticky-pinned hero remains pinned across all breakpoints; states stack vertically on the smallest screens (no horizontal scroll).

• Mobile (< 576 px): single column, narrow container, vertical rhythm 40-64 px between sections, hero condensed to a single headline state on the smallest screens.
• Tablet (576-1024 px): two-column hero permitted; method tags wrap to two rows.
• Desktop (> 1024 px): full grid, 1280 px max container, sticky-pinned hero plays at full h:200vh through GSAP timeline.
• Phonic Light display sizes: 58 px hero / 46 px section / 28 px sub on desktop; 40 / 32 / 22 px on mobile.

• Pure black #000000 on near-pure-white #ffffff yields ~21:1 contrast — exceeds WCAG AAA. Maintain this ratio for body reading; never drop body text below #212121 (~16:1, AAA).
• Focus ring is 2 px solid #000000 — high-visibility, no blur. Never remove `:focus-visible` outline in favor of a color-only cue, since the brand has no chromatic accent to lean on.
• Phonic Light at weight 300 only used for sizes ≥ 22 px to maintain readability; never set body or UI text in Phonic Light.
• Reserved inline-link #1863dc on white yields ~7:1 contrast — passes AAA. Use it only for inline body links, never as a button or fill.
• Sticky-pinned hero must respect `prefers-reduced-motion` — snap to first frame, no scroll-driven opacity fade, ambient drifts pause.
• Method-tag chips include both visual icon and text label; never style a raw `<div>` as a tag without a semantic role.

Phonic, Roobert, and Roobert Pro all self-hosted (45 @font-face declarations captured in total — Phonic carries display, Roobert variants supplement body/UI roles, three Maze-specific icon font families carry product glyphs). Tailwind-adjacent setup with custom spacing tokens including the 22 px off-grid step. Sticky-pinned hero composition implemented via CSS sticky positioning on an h:200vh container with multiple absolute children whose opacity is animated by a GSAP scroll timeline.

• Self-host Phonic via `next/font/local`; preload only Phonic Light (weight 300). Body/UI uses ui-sans-serif fallback (no body font preload needed).
• Define Tailwind-adjacent theme with custom spacing tokens including --space-22 alongside the 4 px utility scale. Use the 22 px tier for editorial rhythm.
• Sticky-pinned hero: CSS `<section class="sticky h-[200vh]">` containing absolute-positioned hero state divs. Drive opacity transitions via GSAP timeline tied to scroll progress (ScrollTrigger plugin recommended).
• Method-tag chips: CSS `<span>` with rounded-full + 1 px border. Hover via `transition: border-color 0.4s cubic-bezier(0, 0, 0.2, 1)`.

• Reserve Phonic Light weight 300 for display only (sizes ≥ 22 px) — hero, section titles, editorial pull-quotes.
• Resolve buttons and CTAs as black-on-white or white-on-black — no chromatic brand accent.
• Pull spacing values from the 1-22 px-anchored custom scale; preserve the 22 px off-grid step.
• Use sticky-pinned multi-frame hero only when copy is genuinely three-act; otherwise stick to a single-frame hero.
• Drive scroll choreography through GSAP timelines, not chained CSS transitions, when the composition requires multi-state cross-fade.
• Treat every section as an editorial spread — typography first, illustration second.

• Don't use Phonic Light in dashboard, transactional UI, or product surfaces — Light weight belongs to display only.
• Don't add a chromatic brand accent — Maze's identity is the refusal of paint color. Adding even one CTA hex erases the typographic-monolith register.
• Don't replicate the GSAP timeline on micro-interactions inside the product — for hover states and form feedback, native CSS ease-out feels expected.
• Don't add transform / scale / translate to hover micro-interactions — Maze's hover vocabulary is opacity and color only.
• Don't pill-round buttons (border-radius > 20 px on rectangles) — Maze's geometry is rectangular-with-soft-corners.
• Don't drop body text contrast below 16:1 — Maze's near-pure-white canvas demands high-contrast reading layers.

• Near-pure-white #ffffff background only — no off-white (#fafafa, #f7f7f7) substitutions for the primary canvas. The brand depends on the literal #ffffff.
• Single-family display discipline is non-negotiable — substituting Phonic with Inter or another sans dilutes the typographic-monolith tone.
• Custom spacing scale must include the 22 px off-grid step — replacing it with strict 4 px utility increments breaks the editorial rhythm.
• Container max-width 1280 px — wider compositions break the editorial pacing.
• Sticky-pinned multi-frame hero requires h:200vh container with sticky positioning and a GSAP scroll timeline — half-measures break the typographic argument.

• Background grep: `#ffffff` appears as `bg-white` or `background-color: rgb(255, 255, 255)` on body and section wrappers; no other primary canvas color.
• Font-family grep: `Phonic` appears only on `display`, `hero`, or `editorial` selectors at weight 300; body and UI use the `ui-sans-serif` system stack.
• No-accent grep: no saturated brand-paint hex appears as `bg-*` or fills on CTAs; the only saturated hex on the page is `#1863dc` reserved for inline links.
• Spacing grep: every padding/margin/gap value belongs to {1, 4, 8, 10, 12, 16, 20, 22}px primarily, with {24, 26, 32, 40}px appearing only at low frequency.
• Border-radius grep: every value belongs to {4, 8, 12, 16, 20}px.
• Motion grep: `transition-duration` values come from {0.15s, 0.25s, 0.4s, 0.5s}; ambient drifts may extend up to 60s. Easings are drawn from {linear, cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1), ease-in-out}.
• GSAP detection: runtime probe finds `window._gsap` defined (sticky-pinned hero choreography requires it).
• Sticky-pinned grep: hero `<section>` has `position: sticky` + `h-[200vh]`; child hero states are positioned absolutely with opacity animated via GSAP timeline.