PlayerZero Design System

Overview

PlayerZero's visual identity is that of a precision engineering tool dressed in editorial restraint. The canvas runs warm-white ({colors.canvas}) — not clinical, but slightly cream-tinted — against which near-black ink ({colors.ink}) and a single voltage-coral accent ({colors.accent}) do almost all the work. There is no gradient sky, no neon glow, no texture overlay. The system trusts size, weight discipline, and generous whitespace to create hierarchy, reserving {colors.accent} for the exact moments where action is demanded: the primary CTA button, the branded span within the hero headline ("Collaborative AI"), and link interactions.

The typeface architecture splits cleanly between two families: Geist (Vercel's proprietary grotesque) owns every display and headline role, rendered at weight 400 — never bolder — with aggressive negative letter-spacing that pulls characters together into dense, confident blocks. Body text falls back to sans-serif (the system stack) at 15px with relaxed positive tracking (0.5px), creating a comfortable reading rhythm that contrasts deliberately with the tight headlines. Monospaced code references use Geist Mono, maintaining typographic cohesion even in technical contexts.

Shape language is dominated by the pill ({rounded.pill}): every button, every input field wrapper, every tag-like element is fully rounded. This softness balances the geometric severity of the isometric infrastructure illustration that anchors the hero — a wireframe city of rectangular service blocks connected by faint lines, labeled with small blue badges ({component.badge}). Cards and containers default to {rounded.md} (8px), keeping contained content feeling approachable without drifting into playful territory.

The site operates as a single long-scroll landing page with three distinct atmospheric zones: the announcement-to-hero conversion band (dark bar → white hero → coral CTA), the scrollable feature/proof sections (alternating white and {colors.surface-soft} bands), and the utility footer. A persistent cookie consent banner overlays the bottom viewport, styled as a floating sheet with its own button dialect.

Key Characteristics:

• Warm white canvas ({colors.canvas}) with no cool undertones — the entire page breathes warmth.
• Single accent color {colors.accent} (#e65532) used exclusively on CTAs, headline emphasis, and interactive links.
• Geist typeface at weight 400 for ALL headings — hierarchy comes from size and letter-spacing, never boldness.
• Pill-radius ({rounded.pill}) on every interactive surface: buttons, inputs, tags.
• Isometric wireframe illustration style with {colors.illustration-line} strokes and minimal {colors.illustration-label-text} badges.
• Sticky top-nav with glassmorphic backdrop (rgba(255,255,255,0.95) + backdrop-blur).
• Input fields wrapped in a {rounded.lg} container with internal spacing; focus state draws a {colors.border-focus} ring.
• Motion is uniformly subtle: 150ms–300ms transitions via cubic-bezier(0.4, 0, 0.2, 1).
• Maximum content width of 1280px (nav) / 1440px (main), centered with 24px horizontal gutters.

Colors

Brand & Accent

• Primary ({colors.primary} — #300204): Deep near-black with infinitesimal warm undertone. Used as the structural text color for headlines and high-emphasis body copy where maximum contrast against {colors.canvas} is needed. Functions as the "brand black."
• Primary Hover ({colors.primary-hover} — #d63720): Darker coral variant used on {component.button-primary-hover} state.
• Primary Active ({colors.primary-active} — #c42f1a): Deepest coral for pressed/active button states.
• Accent ({colors.accent} — #e65532): The signature voltage coral. Appears on {component.button-primary}, the "AI" word in the hero headline ({component.hero-headline-accent}), all clickable links, and the primary cookie banner CTA. This is the only chromatic color in the system.
• Accent Light ({colors.accent-light} — #d55f3f): Slightly lighter coral for secondary hover states or decorative accents.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline. Used for the page background, {component.top-nav}, {component.hero-band}, and {component.card} backgrounds.
• Surface Soft ({colors.surface-soft} — #f8f8f6): Extremely subtle warm gray. Applied to alternating content bands below the hero to create sectional separation without hard dividers.
• Surface Warm ({colors.surface-warm} — #f0efeb): Noticeably warmer gray. Used for subtle inset surfaces or secondary background zones.
• Surface Dark ({colors.surface-dark} — #111010): Near-black. Reserved exclusively for the {component.announcement-bar} strip at the very top of the viewport.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White with elevation context. Used on {component.cookie-banner} and floating panels that sit above the base layer.

Text / Ink

• Ink ({colors.ink} — #1a1817): The primary reading color for body text, nav labels, and most UI copy. Near-black with a hint of warmth.
• Body ({colors.body} — #300204): Deeper ink variant used for the most prominent text elements (hero subheads, major paragraphs). Functionally interchangeable with ink but semantically heavier.
• Muted ({colors.muted} — #78716c): Medium-warm-gray. Used for secondary text: nav links in default state, descriptions under headlines, cookie banner legal copy.
• Muted Strong ({colors.muted-strong} — #57534e): Darker muted for tertiary text that still needs reasonable readability.
• On Primary ({colors.on-primary} — #ffffff): White text for rendering atop {colors.primary}, {colors.accent}, or any dark background.
• On Dark ({colors.on-dark} — #ffffff): White text for {colors.surface-dark} surfaces (announcement bar).
• On Surface ({colors.on-surface} — #1a1817): Alias for {colors.ink} when referencing text-on-surface semantics explicitly.
• Inverse ({colors.inverse} — #ffffff): White text for any inverted/dark-context usage.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e5): Light neutral border. Used on {component.top-nav} bottom edge, {component.divider} rules, and card outlines.
• Hairline Soft ({colors.hairline-soft} — #f0efe9): Barely-visible separator for extremely subtle division.
• Border Input ({colors.border-input} — #e5e5e5): Default input field border matching the hairline family.
• Border Focus ({colors.border-focus} — #e65532): Coral-colored focus ring applied to inputs on interaction, matching the accent system.

Semantic

• Error ({colors.error} — #d63720): Red for validation errors, destructive actions, or alert states.
• Success ({colors.success} — #16a34a): Green for confirmation states, successful submissions.
• Link ({colors.link} — #e65532): Coral — identical to {colors.accent}. All inline links render in this color.
• Link Hover ({colors.link-hover} — #d63720): Darker coral on link hover, matching {colors.primary-hover}.
• Warning ({colors.warning} — #ffaa00): Amber for cautionary notices.
• Info ({colors.info} — #2563eb): Blue for informational callouts.

Decorative / Illustration

• Illustration Line ({colors.illustration-line} — #d6d3ce): Warm-light gray stroke color for the isometric wireframe drawing. Deliberately low-contrast so the illustration reads as background texture.
• Illustration Label BG ({colors.illustration-label-bg} — #e8f0fe): Very pale blue background for small floating labels ("SIRP", "Salesforce") within the illustration.
• Illustration Label Text ({colors.illustration-label-text} — #1a73e8): Blue label text matching the label background hue.

Typography

Font Family

PlayerZero employs a dual-family type system anchored by Geist, Vercel's proprietary grotesque sans-serif. Geist handles every display and headline role — from the 64px display-xl (used deeper in the page) down through the 48px hero headline ({typography.display-lg}) and 36px section titles ({typography.title-md}). It is always rendered at weight 400 with negative letter-spacing that scales with size (-1.6px at 64px, -1.2px at 48px, -0.9px at 36px), creating a dense, modern, tightly-set character block that signals technical confidence without aggression.

Body copy, UI labels, captions, and button text fall back to the system sans-serif stack (ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji"...). This pragmatic choice ensures fast loading and native feel for reading content. Body text sits at 15px ({typography.body-md}) with an unusually spacious line-height of 1.6 (24px on a 15px font) and slight positive letter-spacing (+0.5px), producing an airy, highly readable paragraph texture that contrasts intentionally with the tight headlines.

Monospaced code snippets and technical references use Geist Mono at 13px ({typography.mono}), maintaining typographic family cohesion even in syntax-highlighted contexts. Additionally, a custom pixel-art font GeistPixelSquare is loaded for icon/glyph usage (observed in the cookie banner's logo mark).

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 400 | 1.1 (-1.6px) | -1.6px | Section headlines far down-page | | {typography.display-lg} | 48px | 400 | 1.0 (-1.2px) | -1.2px | Hero headline ("Collaborative AI for software work.") | | {typography.title-md} | 36px | 400 | 1.11 (-0.9px) | -0.9px | Section titles (H2-level) | | {typography.title-sm} | 24px | 500 | 1.33 | -0.5px | Subsection titles, card headers | | {typography.body-md} | 15px | 400 | 1.6 (24px) | +0.5px | Paragraphs, descriptions, input placeholders | | {typography.body-sm} | 14px | 400 | 1.5 | +0.25px | Secondary body text, list items | | {typography.caption} | 13px | 400 | 1.46 | +0.2px | Metadata, timestamps, legal text | | {typography.button} | 14px | 500 | 1.25 | 0 | Button labels, CTA text, nav links | | {typography.label} | 13px | 500 | 1.38 | +0.02em | Field labels, badge text, small UI tags | | {typography.mono} | 13px | 400 | 1.5 | 0 | Code snippets, technical references | | {typography.pixel-icon} | 16px | 500 | 1.0 | 0 | Pixel-art glyph marks (cookie logo) |

Principles

The typography system's defining discipline is weight restraint. No element in the entire visible page exceeds font-weight 500 (reserved for {typography.button} and {typography.label}), and headlines are strictly weight 400. This is a deliberate departure from the common pattern of bolding H1s to 700 or 800; instead, PlayerZero achieves hierarchy through dramatic size jumps (48px → 15px = 3.2× ratio), aggressive negative letter-spacing on large text, and strategic color splitting (the "AI" span in coral vs. the rest of the headline in ink).

Letter-spacing directionality is another signature move: large type loses space between characters (negative tracking), making it feel denser and more engineered, while body text gains space (positive tracking), making it feel open and breathable. This opposing treatment creates a rhythmic tension between display and reading content.

Color-as-hierarchy is used sparingly but effectively. Only one word in the entire hero headline receives the {colors.accent} treatment — "AI" — turning it into a focal magnet. Links throughout inherit the same coral, creating a consistent "actionable thing" signal. All other text remains in the {colors.ink} / {colors.muted} grayscale spectrum.

There is no italic convention observed, no uppercase transform on labels, and no underline decoration on links (hover likely adds underline or color shift per Tailwind defaults, but the base state is clean).

Note on Font Substitutes

Geist is proprietary to Vercel and not available on Google Fonts. For implementations requiring open-source alternatives:

• Headlines/Display: Replace Geist, "Geist Fallback" with Inter (Google Fonts) at matching sizes and weights. Inter shares Geist's grotesque DNA, tall x-height, and circular bowls. Apply the same negative letter-spacing manually.
• Body: The existing sans-serif system stack already degrades gracefully; no substitution needed.
• Mono: Replace "Geist Mono", "Geist Mono Fallback" with JetBrains Mono or Fira Code (Google Fonts) for code contexts.
• CSS Variable Pattern: Define --font-heading: 'Inter', sans-serif; and --font-mono: 'JetBrains Mono', monospace; at the :root level, then reference in Tailwind config or utility classes.

If Geist self-hosting is possible (woff2 files are served from /media/ paths in the source), use the @font-face declarations already present in the extracted CSS which cover Latin, Cyrillic, and extended Unicode ranges with variable weight support (100–900 in a single file).

Layout

Spacing System

• Base unit: 4px (implied by the {spacing.sm} = 6px and {spacing.xs} = 4px progression; practical minimum increment).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (4px — icon gaps, inner tight padding), {spacing.sm} (6px — compact gaps between sibling elements), {spacing.md} (8px — standard gap between related items), {spacing.base} (12px — form field margins, nav item spacing), {spacing.lg} (16px — card padding, section-internal margins), {spacing.xl} (20px — comfortable component spacing), {spacing.xxl} (24px — container horizontal padding, card generous padding), {spacing.section-sm} (32px — minor vertical band padding), {spacing.section} (40px — standard section vertical padding), {spacing.section-lg} (56px — major section breaks), {spacing.hero} (64px — hero vertical breathing room).
• Section padding (vertical): {spacing.section-lg} (56px) for major content bands below the fold; {spacing.hero} (64px) for the hero zone itself.
• Card internal padding: {spacing.xxl} (24px) per {component.card} and {component.card-soft}.
• Gutters: Horizontal page gutter is {spacing.xxl} (24px) on both sides of the centered max-width container. Nav-specific gutter matches.

Grid & Container

The layout uses a centered, max-width-constrained container model with two distinct widths:

• Main container: 1440px max-width ({component.container-main}), used by <main> and <section> elements. This allows the hero illustration and wide feature bands to breathe across nearly the full viewport on large screens.
• Content/nav container: 1280px max-width ({component.container-content}), used by <nav> and text-heavy content columns. This creates a subtle inset effect where navigation and reading columns are slightly narrower than illustration areas.

The hero section uses a two-column implicit grid: left column (~559px based on article width observation) holds the text headline + input group, right column holds the isometric illustration. At desktop width these sit side-by-side with roughly 40–60% split favoring the illustration.

No explicit CSS Grid or Flexbox column count was observable in the static extraction, but the Tailwind class presence (flex, max-w-7xl) suggests a flex-based responsive column collapse strategy.

Whitespace Philosophy

PlayerZero practices editorial-airy whitespace. The hero alone commands 64px of vertical padding before content begins, and the distance between the headline end and the input field start is approximately 32–40px. Section bands below the hero maintain 56px vertical padding. This generosity prevents the technical subject matter (AI, software infrastructure, incident resolution) from feeling dense or enterprise-overwhelming. Whitespace is asymmetric where needed — the hero text column is left-aligned with significant right-margin to let the illustration dominate the visual field.

Header Architecture

┌─────────────────────────────────────────────────────────────────────┐
│ [ANNOUNCEMENT BAR — full-width, bg: surface-dark, h: 36px]         │
│ "Introducing SIM-1: Models that simulate..."              [link→]  │
├─────────────────────────────────────────────────────────────────────┤
│ [TOP NAV — max-w: 1280px centered, h: 64px, sticky]                │
│ ┌─ PLAYERZERO logo ───┐  Product ▾  Resources  Company ▾   [Login] │
│ │                      │                                    [Demo]  │
│ └──────────────────────┘                                             │
│ [border-bottom: hairline]                                            │
└─────────────────────────────────────────────────────────────────────┘

Navigation follows a classic SaaS pattern: flush-left wordmark logo, center-left navigation links with dropdown carets (Product ▾, Company ▾), flush-right utility pair (outline {component.button-secondary} "Login" + filled {component.button-primary} "Book a Demo"). The nav sits on {colors.canvas} with a {colors.hairline} bottom border. On scroll, the header gains a sticky position with bg-background/95 (near-opaque white) and backdrop-blur for a frosted-glass effect.

Hero Section

┌─────────────────────────────────────────────────────────────────────┐
│ [HERO BAND — bg: canvas, pt: 64px, pb: 64px]                       │
│                                                                     │
│  ┌─ TEXT COLUMN (left, ~560px) ──────────────────────────┐         │
│  │                                                       │         │
│  │  "Collaborative <coral>AI</coral> for software work." │         │
│  │  [display-lg, color: ink/accent split]                 │         │
│  │                                                       │         │
│  │  "PlayerZero builds a living model of your            │         │
│  │   software, performs the work, and improves           │         │
│  │   with every outcome."                                │         │
│  │  [body-md, color: muted]                              │         │
│  │                                                       │         │
│  │  ┌─ INPUT GROUP (rounded: lg) ───────────────┐        │         │
│  │  │ [email input]               [Get a demo]  │        │         │
│  │  └───────────────────────────────────────────┘        │         │
│  │                                                       │         │
│  └───────────────────────────────────────────────────────┘         │
│                                                                     │
│  ┌─ ILLUSTRATION COLUMN (right, remaining width) ──────┐           │
│  │                                                      │           │
│  │  [Isometric wireframe city — service blocks,         │           │
│  │   connection lines, floating labels (SIRP,           │           │
│  │   Salesforce, etc.), stroke: illustration-line]     │           │
│  │                                                      │           │
│  └──────────────────────────────────────────────────────┘           │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

The hero is the conversion anchor of the page. Its visual weight splits between the typographic left column (which does the persuasive work) and the illustrative right column (which provides conceptual grounding). The headline uses color-splitting — "Collaborative AI" appears in {colors.accent}, "for software work." in {colors.ink} — creating immediate visual interest before a single word is read. The subhead in {colors.muted} sits 24–32px below, followed by the email capture form wrapped in a {rounded.lg} container with a coral {component.button-primary} submit button labeled "Get a demo."

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base page surface, hero band, footer | | 1 (Hairline outline) | 1px {colors.hairline} border, no shadow | Nav bottom border, divider lines, input default state | | 2 (Soft raise) | {extensions.shadows.xs} (0 1px 2px rgba(0,0,0,0.05)) | Subtle card lift, non-modal floating elements | | 3 (Modal/Dropdown) | {extensions.shadows.sm} (0 1px 3px rgba(0,0,0,0.1)) | Dropdown menus, tooltip containers | | 4 (Banner/Elevated panel) | {extensions.shadows.md} (0 18px 48px rgba(17,16,16,0.06)) | Cookie consent banner, notification toasts | | 5 (Prominent overlay) | {extensions.shadows.lg} (0 24px 60px rgba(17,16,16,0.15)) | Modal dialogs, large feature callout cards | | 6 (Dramatic) | {extensions.shadows.xl} (0 30px 70px rgba(0,0,0,0.3)) | Marketing showcase cards, hero illustration frame |

Philosophy: PlayerZero favors color-block over shadow for most depth cues. The page is predominantly flat — cards often have no shadow at all, differentiated from the canvas by {colors.surface-soft} background alone. When shadows do appear, they are neutral-toned (no blue or colored tint) and extremely subtle, never competing with content. The cookie banner is the most elevated element on screen (level 4–5), appropriate for its role as an interruptive overlay. The hero illustration exists in a conceptual depth space — it uses perspective and occlusion (isometric projection) rather than CSS shadows to create dimensionality.

Decorative Depth

The isometric wireframe illustration constitutes the primary decorative depth element. Rendered in {colors.illustration-line} (warm light gray) with no fill on the rectangular service blocks, it reads as a ghosted architectural blueprint floating behind the hero text. Small {component.badge} elements float atop specific blocks with pale blue backgrounds and blue text, simulating labeling in a diagramming tool. This technique gives the page intellectual texture without adding visual noise or competing with the conversion-focused hero copy.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small badges, tiny tags, inner element rounding | | {rounded.DEFAULT} | 6px | Default fallback radius (rarely used directly) | | {rounded.md} | 8px | Card corners ({component.card}), panel containers | | {rounded.lg} | 16px | Input field wrappers ({component.text-input}), hero input group container | | {rounded.xl} | 25.6px | Large featured card corners (observed in CSS, likely for showcase elements) | | {rounded.pill} | 9999px (full) | All buttons ({component.button-primary}, {component.button-secondary}), pills, tags | | {rounded.full} | 9999px (full) | Avatar circles, icon-only circular buttons |

The dominant shape vocabulary is pill for anything interactive and moderate roundness (8–16px) for containers. Sharp corners (0px) are avoided entirely — even the cookie banner, which might traditionally be sharp-edged, uses {rounded.DEFAULT} (6px) on its internal buttons. The 25.6px value for {rounded.xl} is unusually precise, suggesting it may derive from a specific design-tool export rather than a token-round number; it should be preserved as-is for fidelity.

Photography Geometry

No photographic imagery is present on the visible page. The hero illustration is vector/wireframe art (isometric line drawing), not photography. If photography were introduced elsewhere on the site (team photos, customer logos, screenshots), it would likely follow the {rounded.md} (8px) convention established by cards, possibly with a subtle {extensions.shadows.sm} lift. Aspect ratios cannot be determined from current data.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button. Background {colors.accent}, white text {colors.on-primary} at {typography.button} weight/size, fully pill-rounded ({rounded.pill}), padded 10px 24px. Used for "Book a Demo" in the nav, "Get a demo" in the hero form, and "Allow all" in the cookie banner. State variants: {component.button-primary-hover} (darkens to {colors.primary-hover}), {component.button-primary-active} (deepens further to {colors.primary-active}). Transition on background-color is 150ms via cubic-bezier(0.4, 0, 0.2, 1). No visible border or shadow in default state.

{component.button-secondary} — Ghost/outline-style secondary action. Transparent background with {colors.ink} text, same pill shape and padding as primary. Used for "Login" in the nav. Variant {component.button-secondary-outline} maintains the transparent-base pattern. Hover likely inverts to a subtle background fill or shifts text color toward {colors.accent}.

{component.button-large} — Scaled-up primary variant with increased padding (12px 28px) for hero-level prominence. Same color tokens as {component.button-primary}. Used when the CTA demands more physical presence than the standard button.

{component.cookie-button-primary} — Primary action within the cookie consent dialog. Visually similar to {component.button-primary} but with {rounded.DEFAULT} (6px) instead of pill, and 12px 24px padding — slightly taller, less rounded, fitting the banner's more utilitarian aesthetic. Background {colors.accent}, text {colors.on-primary}.

{component.cookie-button-secondary} — Secondary action in cookie banner ("Customize"). Transparent background, {colors.ink} text, {rounded.DEFAULT} (6px). May gain a hairline border on hover.

Cards & Containers

{component.card} — Standard content card. White ({colors.surface-elevated}) background, {colors.ink} text at {typography.body-md}, {rounded.md} (8px) corners, {spacing.xxl} (24px) internal padding. No default shadow — relies on background contrast against {colors.surface-soft} page bands. Used for feature descriptions, testimonial blocks, or pricing tiers below the fold.

{component.card-soft} — Variant with {colors.surface-soft} background for subtle differentiation from the base canvas. Same padding and radius as {component.card}. Used in alternating-band layouts where the card needs to blend with its parent section background.

{component.cookie-banner} — Full-width (or near-full-width) fixed-position banner at viewport bottom. White background, {typography.body-sm} text, zero border-radius (rectangular edges), generous {spacing.xxl} horizontal and {spacing.xl} vertical padding. Contains {component.cookie-banner-title}, {component.cookie-banner-body}, and button pair. Elevation: {extensions.shadows.lg}. Includes a close button (X) in the top-right corner.

Inputs & Forms

{component.text-input} — Email/text input field. White background, {colors.ink} placeholder/text at {typography.body-md}, {rounded.lg} (16px) corners, 12px 16px internal padding, 48px fixed height. Default border is {colors.border-input} (1px solid #e5e5e5). Used in the hero email capture form alongside {component.button-primary}.

{component.text-input-focus} — Focus state of text input. Background remains white, border transitions to {colors.border-focus} (coral, matching {colors.accent}). A subtle ring/shadow may appear per Tailwind's ring utility (not fully extractable from static CSS). Focus transition timing: 150ms cubic-bezier(0.4, 0, 0.2, 1) on box-shadow and color.

{component.hero-input-group} — Composite wrapper around the email input + submit button. Transparent background, {rounded.lg} outer radius matching the input, 4px internal gap between input and button. Creates a unified "search-bar-like" appearance where the button appears attached to the input field.

Navigation

{component.top-nav} — Main navigation header. Full-viewport-width, {colors.canvas} background, 64px height, {colors.hairline} bottom border. Contains {component.nav-logo}, {component.nav-link} items, and button utilities. Max content width 1280px centered with 24px horizontal padding.

{component.top-nav-sticky} — Scrolled state of the nav. Becomes position: sticky; top: 0 with background-color: rgba(255,255,255,0.95) and backdrop-filter: blur() for a frosted-glass effect. Z-index 50 (very high) to stay above all content including the cookie banner.

{component.nav-logo} — PlayerZero wordmark. Text-based (no image logo observed in nav), renders in {colors.ink} at {typography.title-sm} (24px, weight 500). Flush-left in the nav container.

{component.nav-link} — Navigation menu items ("Product", "Resources", "Company"). {colors.muted} text at {typography.body-sm}. Some include dropdown caret indicators (▾). Hover state ({component.nav-link-hover}) shifts text to {colors.ink}.

{component.announcement-bar} — Thin top strip above the nav. {colors.surface-dark} background, {colors.on-dark} (white) text at {typography.caption} size. Contains introductory text about SIM-1 models with a "Learn more →" link. Height ~36px, full-viewport width.

Signature Components

{component.hero-band} — The primary hero section container. {colors.canvas} background, generous {spacing.hero} (64px) vertical padding, {spacing.xxl} horizontal. Holds {component.hero-headline}, {component.hero-subhead}, {component.hero-input-group}, and the illustration column. Typography reference: {typography.display-lg}.

{component.hero-headline} — Main H1 text: "Collaborative AI for software work." {typography.display-lg}, {colors.ink} base color. The word "AI" is wrapped in a separate {component.hero-headline-accent} span colored {colors.accent}.

{component.hero-headline-accent} — Color-variant span within the headline. Identical typography to {component.hero-headline} but text color is {colors.accent} (coral). Creates the branded focal point in the hero text.

{component.hero-subhead} — Descriptive paragraph below headline. {typography.body-md}, {colors.muted} color. Reads: "PlayerZero builds a living model of your software, performs the work, and improves with every outcome."

{component.hero-illustration} — Right-column isometric wireframe graphic. Conceptual (non-component in the DOM sense), described here as a layout zone. Uses {colors.illustration-line} for stroke work, contains nested {component.badge} labels. No background color (transparent/canvas).

{component.badge} — Small floating label tag. {colors.illustration-label-bg} (pale blue) background, {colors.illustration-label-text} (blue) text at {typography.label}, {rounded.sm} (4px) corners, 4px 8px padding. Observed labeling "SIRP" and "Salesforce" within the hero illustration.

{component.divider} — Horizontal rule line. 1px height, {colors.hairline} color, full-width or container-width. Used between major sections.

{component.footer} — Page footer (partially inferred). {colors.canvas} background, {colors.muted} text at {typography.caption}, {spacing.section-lg} vertical padding. Likely contains links, legal text, copyright.

Do's and Don'ts

Do

• Do reserve {colors.accent} (#e65532) exclusively for actionable elements: primary CTAs, the branded headline span, and clickable links. Let it be the single color that "pops" against the warm-white canvas.
• Do apply {typography.display-lg} (or larger) at weight 400 only — never increase headline weight beyond 400. Trust the size differential (48px vs 15px body) and negative letter-spacing to carry hierarchy.
• Do use {rounded.pill} on every button, input wrapper, and pill-tag. Consistent full rounding is a core shape-language signal of this system.
• Do wrap email/text inputs in a {rounded.lg} (16px) container with 12px 16px internal padding and 48px minimum height. Inputs should feel spacious and touch-friendly.
• Do alternate between {colors.canvas} and {colors.surface-soft} (#f8f8f6) for section backgrounds when building multi-band pages below the hero. This creates subtle zoning without heavy dividers.
• Do set body copy to 15px ({typography.body-md}) with 1.6 line-height and +0.5px letter-spacing. The airy readability is intentional and distinct from tighter headline treatment.
• Do use the sticky-nav glassmorphism pattern (rgba(255,255,255,0.95) + backdrop-blur) when implementing {component.top-nav-sticky} — it's a refined depth cue that keeps navigation accessible without blocking content.
• Do keep the cookie consent banner ({component.cookie-banner}) at elevation {extensions.shadows.lg} with 6px rounded corners on internal buttons — it should feel important but not aggressive.
• Do render code/technical references in {typography.mono} (Geist Mono, 13px) to maintain the system's typographic coherence even in syntax contexts.
• Do apply {extensions.shadows.xs} or {extensions.shadows.sm} sparingly — most cards in this system are flat, differentiated by background color alone.

Don't

• Don't use gradients, glows, or textured backdrops anywhere. The canvas is solid {colors.canvas} or {colors.surface-soft} — full stop. No radial gradients behind the hero, no mesh gradients in footers.
• Don't introduce a second brand color. {colors.accent} is the sole voltage color. If you need a secondary semantic color (warning, success, info), draw from the {colors.warning} / {colors.success} / {colors.info} tokens — don't invent new brand hues.
• Don't bold headlines or subheads. The weight-400 discipline is foundational. If something needs emphasis, use size increase or the {colors.accent} color trick instead.
• Don't use sharp-cornered rectangles (0px radius) on any user-facing component. Even the cookie banner's close area respects the rounded vocabulary. Minimum radius is {rounded.sm} (4px).
• Don't expand the border-radius palette beyond the defined tokens. The 25.6px {rounded.xl} value is unusual but intentional — preserve it exactly rather than rounding to 24px or 26px.
• Don't place {colors.ink} text on {colors.surface-dark} — use {colors.on-dark} (white) instead. The dark announcement bar requires inversion.
• Don't add drop shadows to the hero illustration. Its depth comes from isometric perspective and line-weight variation, not CSS shadows.
• Don't make the nav taller than 64px. The {component.top-nav} height is a fixed constraint that establishes the page's vertical rhythm starting point.
• Don't use letter-spacing values outside the defined tokens' ranges. Large type gets negative tracking (down to -1.6px), body type gets positive (up to +0.5px). Never apply positive tracking to a display headline or negative to a paragraph.

Motion & Animation

Transition Tokens

/* Core UI transitions — extracted from Tailwind utility classes */
--transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), outline-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-shadow: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-full: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform: transform 0.5s ease;
--transition-cookie: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-grid: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

The following keyframe names were detected in the stylesheet (likely provided by Tailwind UI, shadcn/ui, or third-party scripts):

• setting-flash — Brief flash/highlight animation for settings toggles.
• sd-fadeIn — Simple opacity fade-in (likely "slide-dialog" or similar component library).
• sd-blurIn — Fade-in combined with blur-from-zero (modal/dialog entrance).
• sd-slideUp — Slide upward + fade (sheet/panel enter from bottom).
• highlight-fade / highlight-fade-dark — Pulsing highlight effect for drawing attention.
• enter / exit — Generic transition keyframes (probably react-transition-group or framer-motion).
• spin, pulse, bounce — Standard Tailwind utility keyframes for loading states.
• collapsible-down / collapsible-up / accordion-down / accordion-up — Height-animation keyframes for expandable content regions.
• shiny-text — Gradient-shimmer sweep across text (marketing polish).
• swipe-out-* (left/right/up/down) — Exit animations for dismissible elements.

Interaction Patterns

• Button hover/press: Background color transitions over 150ms (cubic-bezier(0.4, 0, 0.2, 1)) from {colors.accent} → {colors.primary-hover} → {colors.primary-active}.
• Input focus: Border color shifts to {colors.border-focus} (coral) with optional ring expansion; transition covers box-shadow 0.15s + color 0.15s.
• Nav stickiness: Header transitions from opaque white to rgba(255,255,255,0.95) with backdrop-blur on scroll. Content beneath blurs subtly.
• Cookie banner: Enters with slide-up animation (sd-slideUp or equivalent), dismisses with swipe-out or fade-out. Opacity transition 200ms.
• Link hover: Text color shifts from {colors.link} to {colors.link-hover} over 150ms; likely gains underline via text-decoration-color transition.
• Accordion/collapsible: Content sections animate their grid-template-rows property over 300ms for smooth expand/collapse (observed in FAQ or feature-detail areas).
• Scroll-triggered reveals: While not explicitly extractable from static CSS, the presence of sd-fadeIn, sd-blurIn, and enter keyframes strongly suggests intersection-observer-driven fade-up or blur-in animations as elements enter the viewport during scrolling.

Overall motion philosophy: Subtle, fast (150–300ms default), ease-in-out or ease-out curves. Nothing bounces excessively. The brand voice is engineering-precise, not playful — motion should reinforce competence and responsiveness, not delight-for-delight's-sake.

Imagery Style

• Primary style: Isometric wireframe/technical illustration. The hero features a 3D-perspective architectural drawing resembling a city of server racks, service blocks, and connecting pipelines — all rendered in thin, low-contrast lines ({colors.illustration-line}).
• Color treatment: Monochromatic warm-grayscale base (strokes only, no fills on the rectangular forms) with selective color pop on floating labels (blue background + blue text per {component.badge} tokens).
• Line quality: Uniform thin strokes, likely 1px or 1.5px, with no variation in weight. Clean, CAD-diagram or Figma-auto-layout aesthetic.
• Subject matter: Abstract representation of software infrastructure — named services (SIRP, Salesforce, Jira/Claude implied by context) as labeled boxes in a spatial arrangement suggesting connectivity, observability, and system topology.
• Role in layout: Supports the hero text column rather than dominating. Positioned right-of-center, it occupies roughly 50–55% of the hero width, acting as conceptual grounding for the "living model of your software" claim.
• Transparency/opacity: The illustration appears fully opaque (not faded), but its low-contrast line color makes it recede visually behind the high-contrast headline text.
• No photography observed: The visible page contains no photographic elements — no team portraits, no device mockups, no customer headshots. The visual language is entirely typographic + illustrative.
• Potential extensions: Based on the "engineering world model" positioning, deeper pages likely feature dashboard screenshots (UI chrome in {colors.surface-soft} cards), architecture diagrams (same isometric style), and possibly terminal/code output captures using {typography.mono} styling.

Icon System

• Library: Lucide (detected via framework analysis — iconLibs: ["lucide"] in Tailwind config metadata).
• Specific icons observed:
  • Chevron/down-caret (▾) — dropdown indicators on "Product" and "Company" nav items.
  • Arrow-right (→) — "Learn more" link in announcement bar, "Customize >" in cookie banner.
  • Close/X — cookie banner dismiss button (top-right).
  • Menu/hamburger — likely present in mobile nav (not visible in desktop screenshot).
  • External-link — potentially on resource links.
• Treatment: Stroke-based (Lucide's default), currentColor inheritance (icons adopt parent text color), typically 16px–20px size aligned with adjacent {typography.body-sm} or {typography.button} text.
• Pixel-icon exception: The Cookiebot logo mark in the banner uses GeistPixelSquare — a custom bitmap/pixel font rendering a geometric glyph. This is a special-case icon system limited to that one instance.
• Button icons: The "Book a Demo" and "Get a demo" buttons appear text-only (no icon prefix/suffix) in the screenshot. Icon-buttons (if present elsewhere) would follow Lucide conventions at 20px inside a 40×40px touch target with {rounded.pill} or {rounded.full} background.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — Vercel-hosted, Geist-native, optimal for SaaS marketing sites
- Styling:        Tailwind CSS v4 (utility-first, detected as tailwindLikely: true)
- Fonts:          Self-hosted Geist + Geist Mono (via @font-face declarations in /media/ paths)
                   Fallback: Inter (headlines), JetBrains Mono (code)
- Animation:      Tailwind-built-in transitions + Framer Motion (for scroll-triggered reveals)
                   Optional: shadcn/ui animation primitives (sd-fadeIn, sd-slideUp keyframes detected)
- Icons:          Lucide React (consistent with detected library)
- Component lib:  shadcn/ui (inferred from sd-* keyframe naming convention and Tailwind patterns)
- Forms:          React Hook Form + Zod (for email capture validation)
- Analytics:      Google Tag Manager (GTM-NCF7P7WW detected in noscript)
- Consent:        Cookiebot (CybotCookiebot* classes detected throughout)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hero stacks text above illustration; nav collapses to hamburger; input group becomes full-width stacked (input above button); cookie banner becomes full-width sheet | | Tablet | 640–1024px | Two-column hero begins; nav may show abbreviated menu; container padding reduces to 16px; illustration scales down | | Desktop | 1024–1280px | Full nav visible; hero two-column at intended ratio; max-content constraints active (1280px nav / 1440px main) | | Wide | > 1280px | Container maxes out; hero illustration gains additional horizontal breathing room; gutters remain 24px |

Touch Targets

• {component.button-primary}: ~44px height × variable width (padding 10px 24px) — meets WCAG AAA 44×44px minimum comfortably.
• {component.button-secondary}: Same dimensions as primary — compliant.
• {component.text-input}: 48px fixed height × full available width — exceeds minimum; thumb-friendly.
• {component.cookie-button-primary}: 12px 24px padding yields ~44px height — compliant.
• Nav links: Inherited from {typography.body-sm} (14px) with ~12px vertical padding — may need padding increase to 16px vertically on mobile to hit 44px.

Collapsing Strategy

• Navigation: Desktop shows full horizontal menu (Logo — Product ▾ — Resources — Company ▾ — [Login] [Book a Demo]). On mobile, this collapses to: hamburger menu → slide-out drawer (right or bottom sheet using sd-slideUp keyframe) containing stacked links, then CTA buttons at bottom.
• Hero columns: Desktop: text-left (~45%) + illustration-right (~55%). Tablet: maintains side-by-side but with reduced type size (possibly 36px headline). Mobile: stacks vertically — headline → subhead → full-width input group → illustration below (scaled to ~70% width, centered).
• Input group: Desktop: input field + button inline (flex-row). Mobile: stacks to flex-column — input fills width, button sits below at full width.
• Cookie banner: Remains bottom-fixed on all breakpoints but adjusts internal layout — buttons may stack vertically on narrow viewports, text reflows to narrower measure.
• Announcement bar: Text truncates with ellipsis or wraps to two lines on mobile; "Learn more →" link may move to second line.
• Illustration behavior: On mobile, the isometric drawing likely scales to 80–100% of container width, maintaining aspect ratio. Complex labels (SIRP, Salesforce) may reduce in count or size to avoid crowding. No observed art-direction change (no separate mobile illustration asset indicated).

Iteration Guide

1. Start with the shell: Build a Next.js App Router project with Tailwind CSS v4. Configure the tailwind.config.ts to accept the color, typography, spacing, and radius tokens from the YAML frontmatter as design tokens (use CSS variables or Tailwind's theme.extend).
2. Font setup first: Self-host Geist and Geist Mono woff2 files (use the @font-face declarations from the extracted CSS). Define CSS variables --font-sans: ui-sans-serif, system-ui, sans-serif; --font-heading: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; and map them to Tailwind's fontFamily.sans, fontFamily.heading, fontFamily.mono.
3. Implement the header trio: Build {component.announcement-bar} (dark strip) → {component.top-nav} (sticky, glassmorphic) → {component.hero-band} (canvas, 64px padding) in exact vertical order. Get the nav logo, link items, and Login/Demo buttons positioned correctly before moving to hero content.
4. Build the hero conversion unit: Implement the two-column hero layout. Left column: {component.hero-headline} with the color-split "AI" span, {component.hero-subhead}, {component.hero-input-group} (input + {component.button-primary}). Right column: placeholder for isometric illustration (use an SVG or img tag with correct aspect ratio). Match the vertical rhythm: headline → 24–32px gap → subhead → 32px gap → input group.
5. Wire up state variants: For each component with -active or -focus entries in the frontmatter, implement the corresponding pseudo-class (:active, :focus) or data-attribute (data-state="active") styling. Use the transition tokens from the Motion section for timing.
6. Add the cookie banner: Implement {component.cookie-banner} as a fixed-bottom overlay with z-40 or higher. Include the Cookiebot-style layout: icon/left, title + body text center, button column right. Add the dismiss X button. Use sd-slideUp entry animation.
7. Extend with scroll sections: Below the hero, create alternating bands using {colors.canvas} and {colors.surface-soft} backgrounds. Each band gets {spacing.section-lg} (56px) vertical padding. Place {component.card} or {component.card-soft} instances inside for feature/content areas.
8. Validate with linter: Run npx @google/design.md lint DESIGN.md after implementation. Fix any broken-ref (token path doesn't exist), contrast-ratio (accessibility failure), or orphaned-token (defined but unused) warnings.
9. Polish motion last: Once static layout is accurate, add scroll-triggered animations using Framer Motion's useInView or Intersection Observer. Map to the detected keyframes: fade-up for feature cards, blur-in for modals, collapsible animations for accordions.
10. Test responsive breakpoints: Verify mobile (< 640px), tablet (768px), and desktop (1280px+) layouts. Ensure nav collapses properly, hero stacks, input group goes full-width, and touch targets remain ≥44px.

Font Setup Implementation Detail:

/* In globals.css or equivalent */
@font-face {
  font-family: 'Geist';
  src: url('/media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/media/geist-mono.woff2') format('woff2'); /* Adjust path from actual assets */
  font-display: swap;
  font-weight: 400;
}

:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading: 'Geist', 'Geist Fallback', var(--font-sans);
  --font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, monospace;
}

If Geist files are unavailable, substitute with:

• Headings: font-family: 'Inter', var(--font-sans); (Google Fonts CDN)
• Mono: font-family: 'JetBrains Mono', monospace; (Google Fonts CDN)

Known Gaps

• Hover state specifics: Per the no-hover policy, exact :hover color/transform values for buttons, links, and nav items are documented as separate components (button-primary-hover, nav-link-hover) but visual appearance (e.g., whether links gain underline, whether buttons lift by 1px) is inferred, not extracted.
• Mobile navigation pattern: The hamburger-menu drawer, its slide-out direction (left/right/bottom), animation curve, and z-index stacking relative to the cookie banner are assumed based on convention, not observed.
• Form validation states: Beyond text-input-focus, error state styling (red border, error message text, icon appearance) is not present in the visible DOM. Reference {colors.error} for these implementations.
• Below-fold content: Sections below the hero (features, social proof, pricing, integrations, FAQ, final CTA, footer) are entirely inferred from typical SaaS landing page patterns. Their specific layout, card counts, and content are unknown.
• Dashboard/app surfaces: As a product site (not the app itself), authenticated views, sidebar navigation, data tables, charts, and settings panels are out of scope for this specification.
• Dark mode: The site declares extensions.mode: "light" and uses a force-light class on the root. Dark mode tokens (inverted surfaces, adjusted text colors) are not defined. If dark mode is added later, invert canvas ↔ ink, adjust surface tokens to dark grays, and retain {colors.accent} as the stable accent.
• Illustration asset specifics: The isometric hero illustration's exact SVG paths, dimensions, layer structure, and whether it animates (subtle parallax, line-draw reveal) are not determinable from CSS alone. Treat it as a static image/SVG with the color tokens specified.
• Cookie banner third-party styling: Many visual properties on cookie banner elements (CybotCookiebot* classes) come from Usercentrics/Cookiebot's injected stylesheet, not PlayerZero's design system. These may conflict with custom tokens if the vendor updates their CSS.
• Precise shadow values on complex elements: Some shadow declarations in the extracted CSS contain five comma-separated box-shadow layers where four are rgba(0,0,0,0) 0 0 0 0 (no-op) and only the final layer carries actual shadow. These have been simplified to their effective single-layer equivalents in {extensions.shadows} for clarity.
• lab() and oklab() color values: Several colors in the raw CSS use perceptual color spaces (lab(), oklab()) rather than sRGB hex. These have been converted to their approximate hex equivalents for token definition, but exact perceptual fidelity may vary slightly on wide-gamut displays.