Doppler Design System

Overview

Doppler presents a sophisticated, high-contrast dark-mode interface built for developer trust and security-first messaging. The design language lives in deep navy territory—a near-black canvas ({colors.surface} at #1c1624) that makes the electric-neon-green accent ({colors.accent} at #00f575) pop with urgent energy. This isn't merely aesthetic; the voltage green maps directly to the brand's promise of action, security activation, and the "start free" conversion moment that appears consistently across every major touchpoint.

The typographic voice is deliberately restrained yet distinctive. Using a custom typeface—DopplerRepro, a geometric sans with humanist undertones—the system avoids bold weights entirely. Headlines sit at {typography.display-lg} with a modest font-weight: 450, relying instead on generous sizing (48px for hero headlines) and tight letter-spacing (-0.96px) to command attention. Body copy breathes at {typography.body-md} (18px/400), rendered in warm silver-gray ({colors.body}) that recedes gracefully against the dark field, letting the white ink ({colors.ink}) of primary messaging take precedence.

Where brand personality emerges most vividly is in the secondary color story: a signature purple-lavender ({colors.signature-purple} at #b997ff) reserved exclusively for section headlines and emphasis words within hero copy. When the headline reads "Secure secrets. Prevent breaches.," the word "breaches" glows in this violet tone, creating a visual rhythm that guides the eye through key value propositions. Supporting surfaces layer subtly—from the baseline {colors.surface} through {colors.surface-elevated} and {colors.surface-card} variants—creating depth without resorting to heavy drop shadows. Cards float on {extensions.shadows.lg} elevation, while the cookie consent banner wears a subtle {colors.border-glow} stroke that feels intentional rather than decorative.

The shape language is consistently rounded but never playful. Buttons use {rounded.DEFAULT} (12px), cards land at {rounded.lg} (20px), and the sign-in button stretches to {rounded.xl} (120px)—a pill-like treatment that signals its secondary status. This controlled roundness, paired with the dark atmosphere and neon punctuation, positions Doppler as both enterprise-serious and startup-agile: a secrets management tool that respects engineering culture while demanding attention.

Key Characteristics:

• Deep navy canvas ({colors.surface} — #1c1624) with electric-green CTAs ({colors.accent} — #00f575) providing the sole brand voltage
• Lavender-purple ({colors.signature-purple} — #b997ff) reserved for h2-level headlines and inline emphasis only
• Custom DopplerRepro typeface across all roles, never exceeding weight 450 (medium), with negative letter-spacing on display sizes
• Multi-layered surface system from transparent overlays ({colors.surface-soft}) to elevated cards ({colors.surface-elevated})
• Generous rounding vocabulary: 8px for small elements, 12px for buttons, 20px for cards, 120px for pill-shaped secondary actions
• Dashboard preview surfaces using {component.dashboard-preview-card} with strong shadow elevation ({extensions.shadows.lg})
• Navigation links in silver body text ({colors.body}) brightening to white ({colors.ink}) on interaction
• Glow-stroke border treatment ({colors.border-glow}) on modal/banner surfaces for subtle depth signaling
• Motion system at 300ms with Material-standard easing ({extensions.motion.easing}) and bounce variant available

Colors

Brand & Accent

• Primary ({colors.primary} — #1c1624): Deep navy-black used as the main canvas background, text-on-accent contrast color, and foundational surface tone.
• On Primary ({colors.on-primary} — #ffffff): Pure white for text sitting atop dark surfaces or the primary background.
• Accent Green ({colors.accent} — #00f575: Electric neon green—the single highest-voltage color, used exclusively for primary CTA buttons ("Start for Free"), the logo mark, and success-state indicators.
• Accent Dark ({colors.accent-dark} — #00cc61): Darker green for pressed/active states on {component.button-primary-active}.
• Accent Hover ({colors.accent-hover} — #00ff80): Lighter green for hover states on {component.button-primary-hover}.
• Signature Purple ({colors.signature-purple} — #b997ff: Lavender-violet used for all h2-level section headlines and inline emphasis within hero copy (the word "breaches" in the hero headline).
• Signature Violet ({colors.signature-violet} — #6b13f5): Deeper violet used as background for highlighted call-to-action surfaces like the "Take a self-guided tour" button inside the dashboard preview.

Surface

• Canvas ({colors.canvas} — #00f575): The designated canvas token (maps to accent per pre-assigned value); actual page background is {colors.surface}.
• Surface Base ({colors.surface} — #1c1624): Primary page background, header background, and footer field.
• Surface Elevated ({colors.surface-elevated} — #2d2734): Slightly lighter navy for raised cards, cookie banner backgrounds, and integration card surfaces.
• Surface Strong ({colors.surface-strong} — #241e2c): Mid-tone navy for dashboard inner panels, integration card inner surfaces, and content areas needing separation from base.
• Surface Soft ({colors.surface-soft} — rgba(242, 241, 237, 0.04)): Near-transparent white at 4% opacity for subtle row highlighting, hover states on list items, and background fills.
• Surface Medium ({colors.surface-medium} — rgba(242, 241, 237, 0.08)): Slightly more visible overlay at 8% opacity for active/hovered container backgrounds.
• Surface Card ({colors.surface-card} — #241e2c): Dedicated card surface matching {colors.surface-strong}, used by {component.dashboard-preview-card}.

Text / Ink

• Ink ({colors.ink} — #f1f0ec): Warm off-white for primary headlines, hero copy, navigation logo, and highest-priority text elements.
• Body ({colors.body} — #d0c9c4): Warm silver-gray for body paragraphs, navigation links in default state, sidebar labels, and secondary information.
• Body Muted ({colors.body-muted} — rgba(242, 241, 237, 0.64)): Semi-transparent ink at 64% opacity for placeholder text, tertiary labels, and de-emphasized descriptions.
• Muted ({colors.muted} — #cccccc): Neutral gray for code snippets, metadata, timestamp displays, and technical annotations.
• Dark Text ({colors.dark-text} — #000000): Pure black for text on accent-green backgrounds ({component.button-primary}, {component.cookie-button-accept}).
• On Accent ({colors.on-accent} — #1c1624): Navy black for readable text on the neon green accent surface.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(242, 241, 237, 0.12)): Subtle border at 12% opacity for card outlines, divider lines, and input fields in default state.
• Hairline Soft ({colors.hairline-soft} — rgba(242, 241, 237, 0.08)): Even softer border at 8% opacity for minimal separation needs.
• Border Glow ({colors.border-glow} — rgba(185, 151, 255, 0.3)): Lavender-tinted border at 30% opacity creating a soft glow effect around the cookie consent modal and other floating banners.

Semantic

• Error ({colors.error} — #ff4444): Red for error states, validation failures, and alert messaging.
• Success ({colors.success} — #00f575): Maps to accent green for confirmation states, successful operations, and positive indicators.
• Warning ({colors.warning} — #ffaa00): Amber/orange for caution notices and warning-level messages.
• Info ({colors.info} — #6b13f5): Violet for informational callouts and neutral highlights.
• Link ({colors.link} — #b997ff): Lavender purple for inline links and clickable text references.
• Link Active ({colors.link-active} — #d4bbff): Lighter lavender for visited or active link states.

Typography

Font Family

The entire system runs on DopplerRepro, a custom geometric sans-serif typeface served via WOFF2 with font-display: swap. Four faces are loaded: Regular (400) and Bold (700), each with an italic counterpart. A carefully crafted fallback stack uses __DopplerRepro_Fallback_a18e76 (a metrics-adjusted Arial proxy with 107.91% size-adjust, 92.3% ascent override) before landing on sans-serif. This ensures that even if the custom font fails to load, spacing and vertical rhythm remain consistent. An Inter subset is also loaded for potential icon or UI micro-copy usage, though it does not appear in the primary type hierarchy. DopplerRepro plays every role—display, body, caption, and button—with weight being the sole differentiator between importance levels.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 450 | 1.2 | -1.12px | Reserved for mega-headlines (not observed in current viewport; future-proofing) | | {typography.display-lg} | 48px | 450 | 1.2 | -0.96px | Hero h1 headline—"Secure secrets. Prevent breaches." | | {typography.title-md} | 32px | 450 | 1.2 | -0.64px | Section h2 headlines—"Your central hub for secure integrations"—in {colors.signature-purple} | | {typography.body-lg} | 20px | 400 | 1.4 | -0.2px | Lead paragraphs, feature descriptions, enlarged body context | | {typography.body-md} | 18px | 400 | 1.4 | -0.18px | Standard body copy, hero subhead paragraph text | | {typography.body-sm} | 15px | 400 | 1.47 | 0 | Navigation links, metadata, smaller body text | | {typography.caption} | 14px | 400 | 1.43 | 0 | Dashboard sidebar items, badges, labels, fine print | | {typography.label-md} | 15px | 700 | 1.33 | 0 | Navigation links (bold variant), small labels needing emphasis | | {typography.button} | 16px | 400 | 1.5 | 0 | Button text, CTA labels, actionable interface text | | {typography.nav-link} | 15px | 700 | 1.33 | 0 | Top navigation menu items (Platform, Solutions, Resources) |

Principles

Doppler's typography system is defined by what it refuses to do as much as what it embraces. Weights never exceed 450 in headline contexts and 700 in navigation-only scenarios—there is no "bold" (800+) anywhere in the system. Hierarchy is established through a three-variable matrix: size first, color second, letter-spacing third. The 48px hero headline commands through sheer scale; the 32px section headline steps down in size but gains identity through the {colors.signature-purple} lavender treatment. Negative letter-spacing tightens display sizes (-0.96px at 48px, -0.64px at 32px) giving headlines a modern, compact feel, while body text relaxes to -0.18px or zero tracking for readability.

Color plays a structural role in type hierarchy. Primary ink is {colors.ink} (off-white) for headlines and critical paths; {colors.body} (silver) carries the burden of extended reading; {colors.body-muted} at 64% opacity handles truly tertiary information. Inline emphasis within headlines—such as the word "breaches" glowing in purple—uses color alone, not weight or italic, to create rhythmic interest. This is a system that trusts the reader's eye to follow contrast rather than demanding attention through weight.

Line heights are consistently spacious: 1.2 for display sizes (allowing descenders breathing room), 1.4–1.5 for body and button text (comfortable scanning). There are no uppercase transformations outside of the brand logo lockup itself; even navigation items render in Title Case with normal casing.

Note on Font Substitutes

DopplerRepro is a proprietary typeface not available on Google Fonts or public CDNs. For open-source reimplementation, substitute Inter (available at fonts.google.com) as the closest match—it shares the geometric skeleton, similar x-height, and supports the 400/700 weight range needed. Define CSS variables as follows:

:root {
  --font-sans: 'Inter', '__DopplerRepro_Fallback_a18e76', ui-sans-serif, system-ui, sans-serif;
}

If Inter is unavailable, IBM Plex Sans provides a reasonable fallback with slightly more humanist character. Avoid system-ui alone, as the metrics-adjusted Arial fallback in Doppler's own stack produces noticeably different spacing.

Layout

Spacing System

• Base unit: 4px (with 2px and 6px as half/1.5x increments).

• Tokens:

  • {spacing.xxs} (2px): Micro-adjustments, hairline offsets, tight icon gaps
  • {spacing.xs} (4px): Icon internal padding, badge gaps
  • {spacing.sm} (6px): Small component gaps, compact spacing
  • {spacing.md} (8px): Most common gap—between nav items, grid gutters, card internal spacing
  • {spacing.lg} (10px): Button padding axis, form element spacing
  • {spacing.xl} (14px): Button padding cross-axis, larger internal gaps
  • {spacing.xxxl} (16px): Container horizontal padding, card padding
  • {spacing.section-sm} (20px): Small section spacing
  • {spacing.section-md} (28px): Vertical nav link padding, modal padding
  • {spacing.section-lg} (32px): Component block spacing, card padding large
  • {spacing.section-xl} (40px): Medium section vertical padding
  • {spacing.section} (72px): Major section gaps (hero to next band)
  • {spacing.section-xxl} (80px): Hero section vertical padding, largest gaps
  • {spacing.nav-padding-y} (28px): Navigation link vertical padding
  • {spacing.gap-component} (8px): Gap between sibling components in a group
  • {spacing.gap-layout} (72px): Gap between major layout bands

• Section padding (vertical): {spacing.section-xxl} (80px) on the hero band; {spacing.section} (72px) between subsequent sections.

• Card internal padding: {spacing.md} (8px) for dense dashboard cards; {spacing.section-lg} (32px) for marketing/integration cards.

• Gutters: Desktop container uses 20px horizontal padding (from extracted header max-width 1412px with 20px pad).

Grid & Container

• Max content width: 1412px (extracted from header container width).
• Density choice: Editorial-dense for the dashboard preview (multi-column project grid), but airy for marketing copy (single-column hero text ~600px wide).
• Desktop grid behavior: Hero section splits roughly 45%/55% (text left, illustration right). The dashboard preview card occupies the right column as a self-contained 12-column-ish internal grid with sidebar + main content area.
• Hero column splits: Left column holds headline (max ~600px readable line length) with subhead and CTA below; right column holds the {component.dashboard-preview-card} floating illustration.

Whitespace Philosophy

Doppler employs generous vertical whitespace with tight horizontal density. Section gaps of 72–80px create clear narrative breaks between hero, integrations, and footer bands. However, within the dashboard preview card itself, information density is high—sidebar items pack tightly, project cards arrange in a grid with minimal gutters. This mirrors the product's actual UX: spacious marketing storytelling transitioning into information-rich tool interfaces.

Header Architecture

┌─────────────────────────────────────────────────────────────────────────┐
│ [🌿 Logo]   Platform ▾  Solutions ▾  Resources ▾  Customers  Pricing  │
│                                                     Get Demo  [Start→] [Sign In]│
└─────────────────────────────────────────────────────────────────────────┘
  ↑20px pad                                                                   ↑20px pad
  └────────────────────────── 1412px max-width container ──────────────────────┘

Navigation uses flush-left logo, center-weighted dropdown menus with chevron indicators, and flush-right utility actions. The "Start for Free" button carries {colors.accent} green; "Sign In" uses the pill-rounded {component.sign-in-button} style. On mobile, this collapses to the {component.mobile-menu-button} hamburger (96×96px touch target).

Hero Section

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│  Secure secrets.              ┌───────────────────────────────────┐     │
│  Prevent breaches.            │  🌿 Doppler HQ     🔍 Search...   │     │
│                               │  ───────────────────────────────  │     │
│  For every engineer           │  Sidebar  │  Projects Grid         │     │
│  on your team...              │          │  ┌────┐ ┌────┐ ┌────┐  │     │
│                              │  Projects │  │card│ │card│ │card│  │     │
│  [Start for Free →]          │  Activity │  └────┘ └────┘ └────┘  │     │
│                              │  ...      │                          │     │
│                              │          │  [✨ Take a tour]        │     │
│                              │          └──────────────────────────┘     │
└─────────────────────────────────────────────────────────────────────────┘
  ↑80px vertical pad                                                    ↑
  └──────────────────────── Left: ~45% ──── Right: 55% ─────────────────┘

The hero pairs a left-column narrative (headline with inline purple accent, 18px body copy, green CTA) against a right-column "product window"—the dashboard preview card showing realistic UI chrome (sidebar, search, project grid, tour CTA button in violet).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, {colors.surface} background | Page background, header bar, footer | | 1 – Hairline outline | {colors.hairline} 1px border | Input fields, card dividers, subtle separators | | 2 – Soft raise | {extensions.shadows.sm} (0 2px 8px rgba 0,0,0,0.15) | Small cards, tooltips, dropdown menus | | 3 – Modal/Dashboard card | {extensions.shadows.lg} (0 8px 30px rgba 0,0,0,0.45) | Dashboard preview card, floating panels | | 4 – Banner glow | {colors.border-glow} border + slight lift | Cookie consent banner, toast notifications |

Philosophy: Doppler's depth system favors color-layering over heavy shadows. Surfaces progress from #1c1624 → #2d2734 → #241e2c, each step lighter, creating z-axis distinction through luminosity shifts. The heaviest shadow ({extensions.shadows.lg}) appears only on the dashboard preview card—a deliberate choice to make that element feel like a "window" into the actual product, lifted above the marketing surface. The cookie banner's glow-stroke ({colors.border-glow}) adds a subtle purple aura suggesting it's a temporary, dismissible overlay rather than permanent chrome.

Decorative Depth

Background decoration includes thin curved vector lines (visible in the screenshot as sweeping arcs behind the hero content) rendered in {colors.hairline} or lighter tones. These organic curves soften the geometric precision of the UI components and add a sense of "flow" and connectivity—appropriate for a platform managing secrets across distributed systems. These are likely implemented as absolute-positioned SVGs or CSS pseudo-elements with minimal opacity, ensuring they never compete with content.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Dashboard project cards, search inputs, small inner containers | | {rounded.DEFAULT} | 12px | Primary buttons, tour button, standard interactive elements | | {rounded.md} | 16px | Cookie banner outer container, modal corners | | {rounded.lg} | 20px | Dashboard preview card, integration marketing cards, large surface containers | | {rounded.xl} | 120px | Sign-in button (fully pill-shaped), opt-out cookie button | | {rounded.pill} | 9999px | Badge pills (config count badges in dashboard) |

Photography Geometry

No photographic imagery is present in the viewport screenshot. The dashboard preview is a constructed UI mockup (CSS/SVG-based), not a screenshot raster. If photography were added to the system, the rounded-card vocabulary suggests images would be clipped to {rounded.lg} (20px) when contained in marketing cards, or {rounded.sm} (8px) for avatar-style thumbnails within the dashboard interface. Full-bleed hero imagery would be unusual given the dark-canvas + floating-card approach currently employed.

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 principal call-to-action throughout the site. Background {colors.accent} (neon green), text {colors.dark-text} (black for contrast), type {typography.button} at 16px/400, rounded {rounded.DEFAULT} (12px), padding 10px 16px. Contains arrow icon indicator ("→") after label text. Appears in header, hero, and cookie banner accept action. Active variant ({component.button-primary-active}) darkens to {colors.accent-dark}; hover ({component.button-primary-hover}) lightens to {colors.accent-hover}. No box-shadow; relies on background color change alone for interactivity.

{component.button-secondary} — Transparent-background button for secondary actions like "Get Demo" (text-only link style) or outlined treatments. Text {colors.ink}, same dimensions as primary. Variant {component.button-secondary-outline} may carry a {colors.hairline} border for definition against complex backgrounds.

{component.sign-in-button} — Pill-shaped authentication link in the header's rightmost slot. Transparent background, {colors.ink} text, dramatically rounded to {rounded.xl} (120px—nearly full pill), padding 8px 20px. Its extreme roundness signals it's a "side door" rather than the primary conversion path.

{component.cookie-button-opt-out} — Secondary action in the cookie consent banner. Transparent background with likely {colors.hairline} border (implied from screenshot), {colors.ink} text, {rounded.xl} (120px pill shape), generous padding {spacing.lg} {spacing.section-lg} (16px 32px). Paired beside the accept button.

{component.cookie-button-accept} — Primary action in cookie consent banner. Mirrors {component.button-primary} styling—{colors.accent} background, {colors.dark-text} text—but with larger padding and {rounded.xl} pill shape to match its neighbor. Both cookie buttons sit side-by-side with gap.

Cards & Containers

{component.dashboard-preview-card} — The hero's centerpiece: a realistic product UI mockup floating on the right side of the hero band. Background {colors.surface-card} (#241e2c), rounded {rounded.lg} (20px), padding {spacing.md} (8px internally), elevated with {extensions.shadows.lg} (heavy shadow). Contains three internal zones: top bar (logo + search), left sidebar (navigation stack), main area (project grid + tour CTA). This is arguably the most visually complex component in the system, serving as a "trust signal" that shows rather than tells.

{component.dashboard-project-card} — Individual project tiles within the dashboard preview grid. Background {colors.surface-soft} (4% white overlay), rounded {rounded.sm} (8px), padding {spacing.sm} (8px). Contains project name, description snippet, and config count badge ({component.dashboard-badge}). Arranged in a 2–3 column grid within the preview card's main area.

{component.dashboard-sidebar} — Left rail of the dashboard preview showing navigation items (Projects, Change Requests, Activity, etc.). Transparent background, text in {colors.body} (silver), type {typography.caption} (14px). Items are vertically stacked with consistent spacing.

{component.dashboard-sidebar-item} — Individual sidebar navigation entry. Default state uses {colors.body} text; active/highlighted state ({component.dashboard-sidebar-item-active}) switches to {colors.ink} (white). May include a small icon prefix.

{component.dashboard-tour-button} — Call-to-action inside the dashboard preview's main area: "Take a self-guided tour". Background {colors.signature-violet} (deep violet #6b13f5), text {colors.ink} (white for readability on violet), rounded {rounded.DEFAULT} (12px), padding {spacing.md} {spacing.lg} (8px 10px). Includes sparkle/cursor icon prefix. This button demonstrates how the violet accent tier works as a "tertiary CTA" below the green primary.

{component.dashboard-search-input} — Search field in the dashboard preview header. Background {colors.surface-soft} (subtle fill), text {colors.body} (placeholder color), type {typography.caption}, rounded {rounded.sm} (8px), compact padding 6px {spacing.md}. Contains magnifying glass icon and keyboard shortcut hint.

{component.dashboard-badge} — Small pill tag showing counts like "3 configs" or "4 configs". Background {colors.surface-elevated} (lighter navy), text {colors.body}, type {typography.caption}, rounded {rounded.pill} (fully rounded), tight padding 2px {spacing.sm}. Used as metadata annotation on project cards.

{component.integration-card} — Marketing-section card showcasing CI/CD integrations. Background {colors.surface-elevated} (#2d2734), rounded {rounded.lg} (20px), generous padding {spacing.section-lg} (32px). Would contain integration logo, name, and description. Variant {component.integration-card-surface-inner} uses {colors.surface-strong} for inner differentiation if needed.

{component.cookie-banner} — Fixed-position consent notice at bottom of viewport. Background {colors.surface-elevated}, text {colors.body}, type {typography.body-sm}, rounded {rounded.md} (16px), padding {spacing.section-md} (28px). Carries {colors.border-glow} stroke (lavender tint) for visibility against dark content. Max-width constrained (~512px implied from screenshot class max-w-lg). Contains explanatory text and two action buttons ({component.cookie-button-opt-out}, {component.cookie-button-accept}).

Navigation

{component.top-nav} — Sticky header spanning full viewport width. Background {colors.surface} (navy), height auto with vertical padding. Contains logo left, menu center, utilities right. Uses z-index: 100 and position: sticky to remain visible during scroll.

{component.top-nav-link} — Dropdown-triggerable navigation item (Platform, Solutions, Resources, Customers, Pricing). Transparent background, text {colors.body} (silver), type {typography.nav-link} (15px/700), padding {spacing.nav-padding-y} {spacing.md} (28px 8px). Includes chevron-down indicator and gap for icon. Hover variant ({component.top-nav-link-hover}) transitions text to {colors.ink} (white); active ({component.top-nav-link-active}) maintains white. Transition timing follows {extensions.motion.duration} (300ms) with standard easing.

{component.mobile-menu-button} — Hamburger/menu toggle visible only on mobile breakpoint (lg:hidden). Square 96×96px touch target, transparent background, {colors.ink} text/icon color. No border, no radius.

{component.logo-container} — Brand mark in header left. Contains the Doppler wordmark with green accent dot/sparkle icon. Transparent background, {colors.ink} color.

Signature Components

{component.hero-band} — Full-viewport hero section. Background {colors.surface} (extends page bg), padding {spacing.section-xxl} {spacing.xxxl} (80px 16px vertical/horizontal). Contains the two-column layout (text + dashboard card).

{component.hero-headline} — Main h1 text "Secure secrets." — {colors.ink}, {typography.display-lg} (48px/450/-0.96px tracking). Line height 1.2 allows comfortable reading.

{component.hero-headline-accent} — Second line of headline "Prevent breaches." — identical typography specs but {colors.signature-purple} (lavender #b997ff). This color switch is the primary typographic "moment" in the system.

{component.hero-subhead} — Paragraph below headline explaining the value prop. {colors.body} (silver), {typography.body-md} (18px/400/-0.18px), max-width constrained for readability (~600px implied).

{component.hero-cta-group} — Container holding the primary CTA button and any secondary actions. Flex layout with {spacing.gap-component} (8px) between children.

{component.section-headline} — h2 for sections below the hero (e.g., "Your central hub for secure integrations"). {colors.signature-purple} (lavender), {typography.title-md} (32px/450/-0.64px). Every major section transition uses this lavender treatment to establish hierarchy below the white hero headline.

{component.section-description} — Body copy accompanying section headlines. {colors.body}, {typography.body-md} or {typography.body-lg} depending on prominence.

{component.footer} — Page bottom region. {colors.surface} background, {colors.body} text, {typography.body-sm} (15px). Likely contains link columns, legal text, and social icons (not fully visible in screenshot).

Do's and Don'ts

Do

• Do reserve {colors.accent} (neon green) exclusively for primary conversion actions. It should appear on no more than 2–3 visible buttons per viewport to maintain its voltage.
• Do apply {colors.signature-purple} (lavender) to all h2-level section headlines to create consistent visual rhythm as users scroll through content bands.
• Do use {typography.display-lg} at weight 450 (not 700) for hero headlines—the system's authority comes from scale and tight tracking, not heaviness.
• Do layer surfaces progressively: {colors.surface} → {colors.surface-elevated} → {colors.surface-strong} when nesting cards or panels, to create depth without heavy shadows.
• Do apply {rounded.xl} (120px) to pill-shaped secondary actions like Sign In and Opt-Out, distinguishing them from primary 12px-radius buttons.
• Do include the {colors.border-glow} lavender stroke on floating modals (cookie banner, toasts) to signal their temporary, overlaid nature.
• Do use {typography.body-md} (18px) for body copy minimum—nothing smaller than 15px ({typography.body-sm}) should appear in reading contexts.
• Do maintain 72–80px vertical gaps between major sections ({spacing.section} / {spacing.section-xxl}) to preserve the editorial, breathable feel.
• Do apply {extensions.shadows.lg} elevation only to the dashboard preview card—it's the one element that should feel like a "window" lifted off the surface.
• Do keep navigation link text at {colors.body} (silver) default, brightening to {colors.ink} (white) on hover/active states via the 300ms color transition.

Don't

• Don't use {colors.accent} for anything other than CTAs, the logo mark, or success states. Never deploy it as a background wash, heading color, or decorative element—it loses impact immediately.
• Don't apply weight greater than 450 to headlines or 700 to navigation. The DopplerRepro face at higher weights doesn't exist in the loaded font set and would trigger browser synthetic bolding, breaking the refined aesthetic.
• Don't place {colors.ink} (off-white) text on {colors.surface-elevated} or lighter surfaces without checking contrast—the combination falls below WCAG AA for smaller sizes.
• Don't invent new border radius values beyond the eight defined tokens ({rounded.sm} through {rounded.pill}). The 120px pill and 8–20px range cover every observed case.
• Don't add gradient backdrops or image textures to the hero canvas. The surface is solid {colors.surface} (#1c1624)—depth comes from floating cards and decorative SVG curves, not background processing.
• Don't use the lavender {colors.signature-purple} for body text or UI labels. Its role is strictly headline/emphasis-level; applying it to prose would exhaust its visual distinctiveness.
• Don't collapse the dashboard preview card's internal complexity into a simplified representation. Its multi-zone layout (search + sidebar + grid + CTA) serves as a crucial credibility signal.
• Don't omit the negative letter-spacing on display typography. The -0.96px (at 48px) and -0.64px (at 32px) values are essential to the modern, tight character of the typeface at large sizes.
• Don't mix Inter (fallback) into primary headings if DopplerRepro loads successfully. The custom face carries specific proportions that define the brand's typographic voice.
• Don't apply hover states via static CSS classes meant for JavaScript toggles. The system separates Default/Active/Pressed as discrete component entries ({component.button-primary-active}); hover is implementation-specific.

Motion & Animation

Transition Tokens

--transition-colors: 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), 
                      text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                      fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                      stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);

--transform-standard: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transform-bounce-in: transform 0.3s cubic-bezier(0.8, 0.01, 0.11, 0.98);
--transform-bounce-out: transform 0.3s cubic-bezier(0.8, 0.01, 0.11, 0.9);

--transition-all: all 0.3s ease;

Keyframe Animations

• pulse — Subtle opacity/scale pulse for loading indicators or attention-drawing elements (likely used on the tour button sparkle icon).
• gradientAnimation — Animated gradient shift, possibly applied to decorative background elements or the curved vector lines.
• scroll — Marquee/scrolling motion for testimonial strips or partner logo carousels (observed in keyframes list though not visible in current viewport).
• calendly-bouncedelay — Staggered bounce delay for multi-dot loading indicators (likely embedded widget-related).

Interaction Patterns

• Color transitions on navigation links: Nav items smoothly interpolate from {colors.body} (silver) to {colors.ink} (white) over 300ms using Material-standard easing. This applies to :hover, :focus, :active, and group-hover states.
• Button background shifts: {component.button-primary} transitions between {colors.accent}, {colors.accent-hover}, and {colors.accent-dark} states via the --transition-colors token.
• Transform animations on enter/exit: Elements appearing from scroll-triggered reveals likely use --transform-bounce-in (overshooting cubic-bezier) for a lively, non-mechanical entrance.
• Cookie banner slide-up: The fixed-bottom consent modal probably animates from translateY(100%) to translateY(0) using --transform-standard or bounce easing on mount.
• Dashboard card parallax: The hero's right-column dashboard preview may have subtle translateY offset tied to scroll position (parallax) to enhance depth perception.
• Focus rings: Interactive elements gain a {colors.signature-violet} or {colors.accent} outline ring on keyboard focus, transitioning opacity over 150–200ms.

The overall motion level is moderate ({extensions.motion.level}): purposeful transitions on every state change, animated entrances for major sections, but no continuous ambient motion (no rotating globes, pulsing particles). Animations serve clarity and polish, not entertainment.

Imagery Style

• Primary visual mode: Constructed UI mockup (the dashboard preview card) rather than photography or illustration. This is a "show-the-product" approach using CSS/SVG to simulate real interface chrome.
• Dashboard preview aesthetic: High-fidelity recreation of the actual Doppler app interface—including sidebar navigation, search bar, project cards in grid formation, and a highlighted tour CTA. Colors match the live product's dark theme.
• Decorative background elements: Thin, sweeping curved vector lines in {colors.hairline} opacity, positioned absolutely behind hero content. These suggest connectivity/network topology without literal depiction.
• Iconography within UI: Small functional icons (sparkle cursor on tour button, chevrons on nav items, search magnifying glass, sidebar navigation glyphs) rendered as inline SVGs or icon font.
• Logo treatment: Wordmark "Doppler" in {colors.ink} with a green ({colors.accent}) spark/dot accent mark replacing the 'o' or adjacent to it—creating a memorable brand signature.
• No photography detected: Current viewport contains no photos, team headshots, or stock imagery. The system relies on typography, color, and simulated UI to convey trust and capability.
• Illustration style if extended: Given the geometric, precise nature of existing elements, any added illustration would likely be flat-vector, monoline or subtle gradient-fill, using {colors.signature-purple} and {colors.ink} against the dark canvas.
• Image rounding convention: Any future imagery placed inside {component.integration-card} or similar marketing cards should be clipped to {rounded.lg} (20px) to match container geometry.
• Screenshot-as-depth strategy: The dashboard preview functions as "imagery"—it's a visual proof point that the product is real, tangible, and thoughtfully designed.

Icon System

• Library: Custom SVG icons (no third-party icon library detected in extracted data). Icons appear to be hand-crafted or sourced from a private set matching Doppler's brand guidelines.
• Specific icons observed:
  • Sparkle/Cursor (on "Take a self-guided tour" button): Glowing star or magic-wand cursor shape indicating guided experience
  • Chevron Down (on Platform, Solutions, Resources nav items): Downward-pointing vee indicating dropdown availability
  • Arrow Right (on "Start for Free" button): Simple rightward arrow indicating forward progression
  • Search/Magnifying Glass (dashboard preview search field): Standard search glyph
  • Menu/Hamburger (mobile nav toggle): Three-line menu icon (implied by lg:hidden button)
  • Sidebar navigation icons: Small glyphs next to Projects, Change Requests, Activity, etc. (specific shapes not clearly resolved)
  • Settings/Gear: Visible in sidebar item list
  • Document/File: Docs sidebar item icon
  • Users/Community: Community sidebar item icon
  • Lock/Shield: Share Secret sidebar item icon (appropriate for secrets management context)
• Treatment: Stroke-based or hybrid stroke-fill rendering (consistent with modern icon systems). Color is almost certainly currentColor inheriting from parent text color. Sizes align with adjacent typography: 16–20px for button icons, 14–16px for nav/sidebar icons, 20–24px for the tour button's prominent sparkle.
• Alignment: Icons are vertically centered with text using flexbox (items-center class pattern observed in button structures). Gap between icon and text is {spacing.md} (8px) based on gap-8 Tailwind class extraction.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — detected via __next/static font URLs and pageProps structure
- Styling:        Tailwind CSS v3+ — confirmed by utility class patterns (flex, gap-8, rounded-12, bg-flourescent-green, etc.)
- Fonts:          Custom WOFF2 hosting via Next.js font optimization (__DopplerRepro_a18e76); fallback to adjusted Arial metrics
- Animation:      Tailwind transition utilities + CSS @keyframes for pulse/gradientAnimation/scroll; Framer Motion optional for scroll-triggered reveals
- Icons:          Custom SVG components (inline React components or sprite sheet); no external library required
- Component lib:  Custom components (no shadcn/Radix detected); potentially Radix primitives for dropdowns/accessibility under the hood
- Deploy:        Vercel (implied by Next.js + font optimization patterns)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single column hero; hamburger menu replaces horizontal nav; dashboard preview card stacks below or hides; cookie banner full-width with stacked buttons | | Tablet | 768px – 1024px | Two-column hero begins (narrower ratios); navigation may condense; dashboard preview shrinks but remains visible | | Desktop | 1024px – 1412px | Full two-column hero (45/55 split); horizontal nav with dropdowns; dashboard preview at full fidelity | | Wide | > 1412px | Content centers in 1412px max-width container; horizontal padding increases; hero columns may spread further apart |

Touch Targets

• {component.button-primary}: Padding 10px × 16px yields approximately 40px+ height (with 16px font + padding), meeting WCAG AAA 44×44px minimum when combined with typical tap area expansion.
• {component.mobile-menu-button}: Explicitly 96×96px (h-24 w-24 = 24 × 4px = 96px), far exceeding minimums—excellent thumb accessibility.
• {component.top-nav-link}: Vertical padding 28px creates ~56px+ tap height, easily tappable.
• {component.cookie-button-opt-out} / {component.cookie-button-accept}: 16px × 32px padding creates ~52px+ height, well above 44px threshold.
• {component.sign-in-button}: 8px × 20px padding with 120px radius creates a generous pill target.

Collapsing Strategy

• Navigation: Horizontal menu (Platform ▾, Solutions ▾, etc.) collapses to {component.mobile-menu-button} hamburger at lg: breakpoint (1024px). Dropdown panels become a full-screen overlay or accordion drawer.
• Hero layout: Two-column (headline left, dashboard right) stacks to single column on mobile. Headline takes full width; dashboard preview either moves below fold or converts to a simplified illustration.
• Dashboard preview card: Internal grid (3-column project cards) collapses to single-column or 2-column on tablet, single-column on mobile. Sidebar may hide or become a horizontal scroll.
• Cookie banner: Remains fixed bottom but reduces max-width, stacks Opt-Out/Accept buttons vertically (or keeps horizontal with reduced padding), and adjusts text size.
• Section padding: Vertical padding compresses from 80px ({spacing.section-xxl}) to 40–48px on mobile to conserve screen real estate.
• Typography scaling: Display headline may reduce from 48px to 32–36px on mobile; body text stays at 18px or drops to 16px for comfort.

Image Behavior

• Dashboard preview card: On mobile, this constructed UI mockup likely scales down proportionally (width: 100% of container minus padding) or is replaced with a simplified version to avoid illegible micro-text. Internal grid reflows.
• Future photography: Any added hero imagery would adopt object-fit: cover with aspect-ratio constraints (likely 16:10 or 4:3), maintaining {rounded.lg} corner clipping. On mobile, these would go full-bleed (edge-to-edge) or maintain container margins.
• Integration logos (if added): Would constrain to 48–64px squares or circles within {component.integration-card}, scaling down to 40px on mobile with maintained aspect ratio.

Iteration Guide

1. Build the foundation first: Initialize a Next.js project with Tailwind CSS. Define all CSS custom properties from the YAML frontmatter (colors as --color-*, spacing as --space-*, radii as --radius-*, typography as --font-*). Reference these variables in your Tailwind config's theme.extend so utility classes resolve to exact spec values.

2. Implement the dark canvas: Set background-color: {colors.surface} (#1c1624) on <body>. Ensure your CSS reset handles color-scheme: dark and adjusts default text colors to {colors.ink}. Test that {colors.accent} green renders vibrantly against this navy.

3. Load DopplerRepro correctly: Host the four WOFF2 files (Regular/Bold × Normal/Italic) in public/fonts/. Configure Next.js next/font or CSS @font-face with the exact family name __DopplerRepro_a18e76 and the fallback stack including __DopplerRepro_Fallback_a18e76. Verify the 400 and 700 weights render distinctly.

4. Build components top-down: Start with {component.top-nav} (sticky, full-width, {colors.surface} bg). Then {component.hero-band} with its two-column grid. Implement {component.button-primary} with its three states (default/active/hover) as separate CSS classes or Tailwind variants. Build {component.dashboard-preview-card} last—it's the most complex element and depends on smaller components ({component.dashboard-sidebar-item}, {component.dashboard-project-card}).

5. Respect the color hierarchy strictly: When styling a new element, ask: Is this a primary CTA? Use {colors.accent}. Is this a section headline? Use {colors.signature-purple}. Is this body copy? Use {colors.body}. Is this a surface? Choose from the five-step surface scale. Never invent a new color without adding it to the frontmatter palette.

6. Apply motion intentionally: Add transition-colors duration-300 (Tailwind) or the CSS custom property --transition-colors to every interactive element. Use --transform-bounce-in for scroll-triggered reveals (consider Framer Motion's useInView or Intersection Observer). Avoid animating properties that cause layout thrashing (width, height, top, left); stick to transform, opacity, and color.

7. Implement responsive breakpoints in order: Mobile-first. Write the mobile single-column layout, then layer md: (768px), lg: (1024px), and xl: (1280px+) modifiers for desktop behavior. Ensure {component.mobile-menu-button} shows only below lg: and the horizontal nav shows only at lg: and above.

8. Validate accessibility: Check contrast ratios: {colors.ink} on {colors.surface} passes easily; {colors.dark-text} on {colors.accent} passes; {colors.body} on {colors.surface-elevated} needs verification. Ensure all interactive elements have focus-visible outlines in {colors.signature-violet} or {colors.accent}. Confirm touch targets exceed 44×44px on mobile viewports.

9. Run linting: After completing implementation, execute npx @google/design.md lint DESIGN.md to catch broken token references, orphaned components, or missing entries. Fix any warnings before shipping.

10. Font setup for substitution: If DopplerRepro cannot be licensed, substitute with Inter from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

:root {
  --font-sans: 'Inter', '__DopplerRepro_Fallback_a18e76', ui-sans-serif, system-ui, sans-serif;
}

Adjust letter-spacing values slightly (Inter may need -0.02em less negative tracking than DopplerRepro at equivalent sizes). Always declare the custom property and reference it via font-family: var(--font-sans).

Known Gaps

• Hover state specifics: While {component.button-primary-hover} and {component.top-nav-link-hover} document destination states, the exact intermediate hover styling (e.g., whether buttons gain subtle box-shadow or transform: translateY(-1px) on hover) is not extractable from a static screenshot. Implementation should follow platform conventions (subtle lift or brightness increase).
• Dropdown panel designs: Navigation items show chevron indicators implying dropdown menus, but the panel contents (links, descriptions, illustrations) are not visible. These must be designed following the established card/surface vocabulary.
• Form validation states: Beyond the dashboard search input, no form fields (email inputs, password fields, signup forms) were captured. Error ({colors.error}), warning ({colors.warning}), and success (colors.success}) input border/background treatments are inferred but unverified.
• Loading/skeleton states: No loading spinners, skeleton placeholders, or pending-state UI were visible. Recommend implementing shimmer effects using {colors.surface-soft} animated gradients for content loading.
• Authenticated/dashboard surfaces: The screenshot captures the marketing landing page with a dashboard preview mockup, not the actual authenticated application. Real dashboard surfaces (settings pages, secret editors, audit logs) may introduce new component patterns not documented here.
• Sub-brand or enterprise tier theming: No evidence of white-label variants, enterprise-tier palette shifts, or feature-flagged visual differences. If Doppler offers Teams/Enterprise/Business tiers with distinct branding, those palettes are absent.
• Pixel-exact surface color sampling: Some surface colors (particularly {colors.surface-elevated} at #2d2734 and {colors.surface-strong} at #241e2c) were sampled from CSS variable values; verify these against design source files if available, as compressed screenshots can shift perceived values.
• Footer complete structure: Only the top portion of the page is visible; footer link columns, newsletter signup, legal text, and social media icon row are undocumented. Extend using {component.footer} token as base.
• Accessibility focus indicators: While focus-visible states are recommended, the exact focus ring style (outline offset, color mixing, border replacement) is not present in the extracted CSS. Design a consistent focus treatment using {colors.signature-violet} or {colors.accent} at 2–3px offset.
• Print stylesheet: No print-optimized styles detected. For a developer-tools product, printable documentation or secret-export views may need a print stylesheet converting {colors.surface} to white and {colors.ink} to black.