Corgi Insurance Design System

Overview

Corgi Insurance presents a founder-first insurance platform that merges startup velocity with approachable warmth. The visual identity orbits around a vibrant orange ({colors.primary} — #ff5c00) that commands attention without aggression—deployed strategically on announcement banners, primary CTAs, and accent text within headlines. The canvas is pristine white ({colors.canvas}), creating high-contrast staging for near-black ink ({colors.ink-deep} — #191919) headlines rendered in a proprietary heroHeading typeface at dramatic 60–72px scales with aggressive letter-spacing compression (-1.92px to -2.3px).

The typography architecture is intentionally tripartite: Geist carries all body copy and UI microtype with its clean geometric skeleton; heroHeading (a custom compressed sans-serif) owns the theatrical display moments; and f37Bolton (a monospace face) provides technical credibility for section titles, creating a subtle "engineer-built" signifier that resonates with the startup audience. This mono treatment on {typography.title-lg} and {typography.title-sm} roles is the single most distinctive typographic move in the system—it signals transparency and modularity, core brand values.

Shape language favors confident roundness: buttons settle at {rounded.lg} (16px), cards breathe at {rounded.xl} (24px), and navigation pills use {rounded.md} (12px). Shadows are notably restrained—the system prefers color-block separation and generous whitespace over heavy drop shadows, though {extensions.shadows.sm} provides gentle elevation when needed. A whimsical illustration dialect (the cape-wearing corgi mascot) injects personality into the hero band, signaling that this is insurance built by people who understand startup culture's blend of seriousness and playfulness.

Key Characteristics:

• Brand voltage lives in {colors.primary} orange—used for CTAs, announcement bars, and headline accent spans, never as background fill for large areas
• Display headings use {typography.display-lg} at 60px/500 weight with -1.92px letter-spacing in the custom heroHeading face
• Section titles employ {typography.title-lg} monospace (f37Bolton) at 32px, creating a technical/editorial contrast against body copy
• All body text renders in Geist at 20px ({typography.body-md})—notably larger than industry standard, prioritizing readability
• Buttons use {rounded.lg} (16px) with compact 35px height, feeling modern and tappable
• The nav uses a frosted-glass effect (rgba(255,255,255,0.85)) with a subtle {colors.hairline} bottom border
• Spacing operates on a 4px base unit with generous {spacing.hero} (160px) vertical rhythm in the hero band
• Signature coral ({colors.signature-coral} — #ff405d) appears as a secondary accent for error states and delicate highlights

Colors

Brand & Accent

• Primary ({colors.primary} — #ff5c00): The flagship orange—used on {component.button-primary}, the {component.announcement-bar}, headline accent text ("Speed of Compute"), and link interactions. Carries all brand energy.
• Primary Hover ({colors.primary-hover} — #ff7d33): Lightened orange state for {component.button-primary-hover} interactions.
• Primary Active ({colors.primary-active} — #ff9d66): Further lightened for pressed/active states on {component.button-primary-active}.
• Primary Dark ({colors.primary-dark} — #cc4a00): Deepened orange for hover states on links and text rendered in primary color.
• Signature Coral ({colors.signature-coral} — #ff405d): Secondary brand accent—appears in error badges ({component.badge-error}) and as a warm contrast to the dominant orange.
• Signature Coral Light ({colors.signature-coral-light} — #ffe9ec): Pale pink wash for error-state background fills.
• Signature Orange Light ({colors.signature-orange-light} — #ffdec0): Pale orange tint for informational badge backgrounds ({component.badge}).

Surface

• Canvas ({colors.canvas} — #ffffff): The universal base layer—hero bands, card backgrounds, nav foundation, logo strip.
• Surface Soft ({colors.surface-soft} — #f6f6f6): Near-white gray for subtle sectional alternation or disabled surface areas.
• Surface Strong ({colors.surface-strong} — #e1e1e1): Medium gray used for the nav bottom border ({component.top-nav}) and divider lines.
• Surface Dark ({colors.surface-dark} — #191919): Near-black surface for {component.button-secondary} (the "Book a demo" dark button) and potential inverted sections.

Text

• Ink ({colors.ink} — #1d1d1d): Primary text color for body copy, navigation items, and general UI text.
• Ink Deep ({colors.ink-deep} — #191919): Slightly darker variant for maximum-contrast headlines ({component.hero-headline}) and logo strip marks.
• Body ({colors.body} — #4a4a4a): Standard secondary text color for navigation items, captions, and supporting content.
• Body Alt ({colors.body-alt} — #4e4e4e): Slightly warmer gray variant used in the hero subheadline ({component.hero-subheadline}).
• Muted ({colors.muted} — #606060): Tertiary text for placeholder or de-emphasized information.
• Muted Soft ({colors.muted-soft} — #7b7b7b): Lightest text gray—active state text color for {component.button-secondary-active}.
• On Primary ({colors.on-primary} — #ffffff): White text for all elements on {colors.primary} and {colors.primary-dark} backgrounds.
• On Dark ({colors.on-dark} — #ffffff): White text for elements on {colors.surface-dark} backgrounds.
• On Surface Dark ({colors.on-surface-dark} — #ffffff): White text for dark-section contexts (potential footer inversions).

Hairlines & Borders

• Hairline ({colors.hairline} — #e1e1e1): Default border color for the nav separator and subtle dividers.
• Border Input ({colors.border-input} — #bdbdbd): Slightly darker border for form inputs ({component.text-input}), ensuring adequate contrast against white fields.

Semantic

• Error ({colors.error} — #ff405d): Aligned with signature coral—used for validation errors and destructive actions.
• Success ({colors.success} — #00a86b): Green for confirmation states (inferred from brand palette logic).
• Link ({colors.link} — #ff5c00): Links inherit the primary orange, maintaining brand coherence.
• Link Hover ({colors.link-hover} — #cc4a00): Darkened orange on link hover for clear interaction feedback.

Typography

Font Family

Corgi's type system rests on three distinct faces, each carrying semantic weight:

Geist serves as the workhorse—a modern geometric sans-serif (Vercel's open-source typeface) with exceptional readability at the oversized 20px body scale. It handles all body copy, UI labels, button text, navigation items, and caption-level information. The fallback stack includes system fonts (ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans") ensuring graceful degradation.

heroHeading is a proprietary compressed display face (served as a WOFF2 data URI) reserved exclusively for the heroic moments—the H1 "Business Insurance at the Speed of Compute." and any subsequent display-level statements. Its tight letter-spacing (-1.92px at 60px) and 500 weight create newspaper-headline authority while remaining web-native. Falls back to Arial with metric overrides preserving the intended proportions.

f37Bolton provides the system's monospace voice—a clean, slightly condensed mono face deployed for all section titles (H2/H3 at 32px, H4 at 20px) and small technical labels (13px). This choice signals engineering credibility and modular transparency—core to Corgi's "built for founders by founders" positioning. Falls back to ui-monospace → SFMono → Consolas → "Courier New".

Additionally, Material Symbols Sharp is loaded for iconography, and Georgia appears in one serif context (likely a decorative or testimonial element not visible in the primary above-fold).

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 500 | 1 | -2.3px | Extra-large hero headlines (potential) | | {typography.display-lg} | 60px | 500 | 1 | -1.92px | Primary hero H1 headline | | {typography.title-lg} | 32px | 400 | 1 | -1.024px | Section titles on dark/inverted backgrounds | | {typography.title-md} | 32px | 400 | 1 | -1.024px | Section titles on light backgrounds | | {typography.title-sm} | 20px | 400 | 1 | -0.64px | Subsection titles, card headers | | {typography.body-lg} | 20px | 400 | 1.2 | -0.3px | Lead paragraphs, hero subheadlines | | {typography.body-md} | 20px | 400 | 1.2 | -0.3px | Standard body copy | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Secondary body text, descriptions | | {typography.caption} | 14px | 400 | 1.43 | 0 | Metadata, timestamps, fine print | | {typography.button} | 16px | 500 | 1.25 | 0 | Primary and secondary button labels | | {typography.button-small} | 14px | 400 | 1.2 | -0.21px | Navigation items, small CTAs | | {typography.mono} | 13px | 400 | 1.38 | 0 | Form input values, technical labels | | {typography.label-md} | 14px | 500 | 1.4 | 0 | Field labels, table headers |

Principles

The typography system makes a deliberate, counter-intuitive choice: body copy at 20px is significantly larger than the 16px web standard. This reflects Corgi's accessibility-forward and founder-audience positioning—startup founders read quickly and appreciate scannable, generous text. The 1.2 line-height at this size creates comfortable reading rhythm without excessive vertical spacing.

Hierarchy is achieved through size and face contrast, not weight escalation. Notice that {typography.display-lg} (60px/500) is only marginally bolder than {typography.body-md} (20px/400)—the 3x size differential and switch to heroHeading does the heavy lifting. Similarly, section titles don't go bold; they switch to monospace (f37Bolton), which creates visual separation through genre difference rather than weight. This is a sophisticated move: it keeps the type palette calm while making structural boundaries obvious.

Letter-spacing is aggressively negative on display and title scales (-0.64px to -2.3px), giving headlines a tightened, editorial feel that suggests confidence and modernity. Body text carries a subtle -0.3px tracking improvement, enhancing the Geist face's already-excellent legibility.

The mixed-color headline technique—rendering "Business Insurance at the" in {colors.ink-deep} and "Speed of Compute." in {colors.primary}—is a signature moment that should be preserved as a pattern for key value propositions.

Note on Font Substitutes

For implementations without access to Corgi's proprietary font files:

• heroHeading → Substitute with Inter (variable font) at 500 weight, applying font-stretch: condensed if available, or Arial Narrow with transform: scaleX(0.85) as fallback. Define CSS variable --font-heading.
• f37Bolton → Substitute with JetBrains Mono or SF Mono (system). Define CSS variable --font-mono. The monospace is critical to the brand's technical aesthetic—do not substitute with a proportional font.
• Geist → Available open-source from Vercel, or substitute with Plus Jakarta Sans (closest geometric match). Define CSS variable --font-sans.

Layout

Spacing System

• Base unit: 4px (with 5px and 6px exceptions for specific component tuning).
• Tokens: {spacing.xxs} (4px — icon gaps, tight internal padding), {spacing.xs} (5px — rare micro-adjustment), {spacing.sm} (8px — inline gaps between small elements), {spacing.md} (12px — most common internal padding, card gaps), {spacing.lg} (16px — standard component padding), {spacing.xl} (20px — button-adjacent spacing, form gaps), {spacing.2xl} (24px — section-internal margins), {spacing.3xl} (32px — major block spacing), {spacing.4xl} (64px — between major sections), {spacing.section} (80px — vertical section padding), {spacing.hero} (160px — hero top padding).
• Section padding (vertical): {spacing.section} (80px) — used between major content blocks below the hero; {spacing.hero} (160px) for the hero band's top breathing room.
• Card internal padding: {spacing.xl} (20px) per axis on {component.card}, though the exact value may vary by card density.
• Gutters: Page-level horizontal gutter is approximately {spacing.lg} (16px) on mobile, scaling to {spacing.2xl} (24px) or more on desktop within a max-width container.

Grid & Container

• Max content width: 1440px (observed on main, section, and header containers), with an inner max-width of 1600px referenced in the nav wrapper class.
• Editorial density: The hero employs a roughly 50/50 split between text column (left) and illustration column (right), with the text column constrained to approximately 600-700px for optimal readability of the 60px headline.
• Grid behavior: The nav uses a flexbox layout with justify-between for logo/menu/CTA distribution. The logo strip below the hero appears to use a flex row with even distribution or CSS grid for the customer logos.
• Hero column splits: Text content occupies the left ~50% with left alignment; the corgi illustration occupies the right ~50% with right alignment or centered positioning, overlapping the text column slightly for dynamic composition.

Whitespace Philosophy

Corgi embraces generous, confident whitespace. The 160px hero top padding ({spacing.hero}) and 80px section rhythms create an editorial, premium feel that distances the brand from cluttered insurance competitors. This is "startup landing page" density—not "enterprise SaaS dashboard" density nor "ecommerce marketplace" density. Whitespace is used as a structural element, not just absence of content.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [🔔 Announcement Bar — bg:{colors.primary}] [× close]          │ ← 40px height, full-width orange
├─────────────────────────────────────────────────────────────────┤
│ [🐕 Corgi]  [Tech ▾] [Small biz ▾] [Products ▾] ...  [Log in]   │
│                                    [Book a demo][Get insured]   │ ← 72px height, frosted glass
│ ─────────────────────────────────────────────────────────────── │ ← {colors.hairline} bottom border (desktop only)
└─────────────────────────────────────────────────────────────────┘
                    ↑ max-width: 1600px inner container

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│     160px top padding ({spacing.hero})                          │
│                                                                 │
│  ┌─────────────────────┐    ┌───────────────────────────┐       │
│  │                     │    │                           │       │
│  │  Business Insurance │    │    ╭─────────────╮        │       │
│  │  at the *Speed of   │    │    │  🐕✈️ (corgi  │        │       │
│  │  Compute.*          │    │    │  in cape)    │        │       │
│  │                     │    │    ╰─────────────╯        │       │
│  │  No confusion, no   │    │                           │       │
│  │  waiting...         │    │    (cloud/sky bg image)   │       │
│  │                     │    │                           │       │
│  │  [ Get insured now ]│    │                           │       │
│  │                     │    │                           │       │
│  └─────────────────────┘    └───────────────────────────┘       │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ ARTISAN   AthenaHQ   Bland®   deel.   Slash   Eragon  │   │ ← Logo strip
│  │ intryc   Origami   Philo                                 │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Logo Strip Section

Below the hero CTA, a horizontal band displays customer/trust logos in monochrome (likely grayscale or single-color) at {typography.title-lg} scale (32px monospace), creating social proof through recognizable startup names. Background is {colors.canvas}, text color {colors.ink-deep} or {colors.muted} depending on visual weight.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base surfaces, hero band, logo strip | | 1 (Hairline) | 1px {colors.hairline} border-bottom | Nav separator line | | 2 (Input) | 1px {colors.border-input} border, no shadow | Form field outlines | | 3 (Elevated) | {extensions.shadows.xs} (4px blur, 25% opacity) | Subtle card lift | | 4 (Floating) | {extensions.shadows.sm} (16px blur, 30% opacity) | Dropdowns, tooltips, modals | | 5 (Modal) | {extensions.shadows.lg} (24px blur, 35% opacity) | Dialog boxes, overlay panels | | 6 (Dramatic) | {extensions.shadows.xl} (28px blur, 40% opacity) | Promotional cards, feature callouts |

Philosophy: Corgi's depth system is notably restrained. The default state is flat—cards often sit shadowless on the white canvas, relying on {colors.surface-soft} alternation or border treatments rather than elevation to create separation. When shadows do appear, they use a single shadow layer (unlike multi-layer Material Design shadows), keeping the visual noise low. The frosted-glass nav (rgba(255,255,255,0.85)) is the primary depth mechanism in the above-fold experience, creating layering through opacity rather than shadow.

Decorative Depth

The hero section employs photographic/illustrated depth rather than CSS-generated depth: a sky/cloud backdrop image with the corg mascot illustration appearing to float in 3D space, plus a vintage engraved-style hand illustration (visible at lower-left of hero) adding texture. These are bitmap/SVG assets, not CSS gradients or patterns.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 4px | Small tags, input fields ({component.text-input}) | | {rounded.sm} | 8px | Minor containers, internal elements | | {rounded.md} | 12px | Navigation pills ({component.nav-item}) | | {rounded.lg} | 16px | All buttons (primary, secondary, ghost variants) | | {rounded.xl} | 24px | Cards ({component.card}), large containers | | {rounded.2xl} | 32px | Feature highlight boxes, hero-internal cards | | {rounded.pill} | 9999px | Badges ({component.badge}, {component.badge-error}) |

Shape Philosophy: Corgi consistently applies {rounded.lg} (16px) to every button variant—this creates a unified "squircle" button language that feels modern and touch-friendly. Cards go one step softer at 24px. The system avoids sharp rectangles entirely (minimum radius is 4px), reinforcing the friendly, accessible brand personality. Pill shapes are reserved exclusively for badge/tag elements.

Photography Geometry

The hero features:

• Corgi mascot illustration: Full-color, likely with transparent background, positioned in the right column with slight overlap into the text zone. Appears to be a 3D-rendered or highly-polished 2D illustration of a corgi wearing a red superhero cape, flying through clouds.
• Vintage hand engraving: Black-and-white stippled/engraved style hand reaching upward (lower-left of hero), adding artistic sophistication and possibly symbolizing "reach" or "support."
• Logo strip marks: Typographic/logotype-only, rendered in monospace font at 32px, likely with reduced opacity or grayscale treatment for visual hierarchy.
• Aspect ratios: Hero imagery appears to be roughly 1:1 or 4:3 for the corgi, positioned to balance the 60px headline's visual weight.

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-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.announcement-bar} — Full-width orange banner at the very top of the viewport announcing the fundraise ("Announcing our $106M Fundraise at a $2.6B Valuation | Series B1"). Background {colors.primary}, text {colors.on-primary} at {typography.body-sm} scale. Contains a close button ({component.close-announcement}) positioned absolute-right. Height is compact (~40px) to minimize vertical space consumption while maintaining visibility.

{component.top-nav} — Fixed-position navigation bar with frosted glass background (rgba(255,255,255,0.85)), sitting directly below the announcement bar. Contains the Corgi logo (left), navigation menu items with dropdown carets (center-left), "Log in" link (center-right), and two CTAs (right): {component.button-secondary} ("Book a demo") and {component.button-primary} ("Get insured"). Bottom border uses {colors.hairline}. Height is 72px. Includes a hidden desktop-only bottom accent line ({colors.ink-deep}, 1px) that reveals on xl+ breakpoints.

{component.nav-item} — Individual navigation links ("Tech companies", "Small businesses", "Products", etc.) styled as transparent-background pills with {colors.body} text at {typography.button-small}. Rounded {rounded.md} (12px), height 39px, horizontal padding 16px. Includes dropdown caret indicator. On hover, transitions to {component.nav-item-hover} with {colors.surface-soft} background and {colors.ink-deep} text.

{component.button-primary} — The primary call-to-action ("Get insured" in nav, "Get insured now" in hero). Background {colors.primary}, text {colors.on-primary} at {typography.button} (16px/500). Rounded {rounded.lg} (16px), height 35px, horizontal padding 16px. Minimum width 100px. No border (transparent border for layout stability). State variants: {component.button-primary-hover} (lightens to {colors.primary-hover}), {component.button-primary-active} (further lightens to {colors.primary-active}). This is the highest-voltage interactive element in the system.

{component.button-secondary} — The dark alternative CTA ("Book a demo"). Background {colors.surface-dark} (#191919), text {colors.on-dark} at {typography.button}. Same dimensions and radius as primary: {rounded.lg}, 35px height, 16px padding, min-width 96px. Creates strong visual pairing with primary—orange vs. near-black offers clear hierarchical choice. State variants: {component.button-secondary-hover} (background shifts to {colors.body} #4a4a4a), {component.button-secondary-active} (background shifts to {colors.muted-soft} #7b7b7b).

{component.button-ghost} — Transparent background button for icon-only actions (menu close, etc.). Text {colors.ink} at {typography.body-sm}, no background, no border, 39px × 39px square. On hover ({component.button-ghost-hover}), text color shifts to {colors.primary}—a delightful micro-interaction that reinforces brand color on interaction.

{component.close-announcement} — Small close icon button (×) positioned absolute within {component.announcement-bar}. Text color is rgba(255,255,255,0.8) (80% white), becoming full white on hover. Size 24px, padding 4px. Minimal footprint to avoid distracting from the announcement message.

Cards & Containers

{component.hero-band} — The primary above-the-fold container spanning full viewport width. Background {colors.canvas}, padded {spacing.hero} (160px) on top. Houses the headline, subheadline, CTA, illustration, and logo strip. No border, no shadow—relies on whitespace and the sky backdrop image for visual interest.

{component.logo-strip} — Horizontal band below the hero CTA displaying customer logos/trust marks. Background {colors.canvas}, vertical padding {spacing.section} (80px). Logos render in {typography.title-lg} (32px monospace) in {colors.ink-deep} or muted tones. Evenly spaced via flex or grid. Serves as social proof element.

{component.logo-strip-item} — Individual logo/text mark within the strip. Transparent background, {colors.ink-deep} text at monospace 32px. No interaction state observed (non-clickable or minimal hover).

{component.card} — Standard content card. Background {colors.canvas}, text {colors.ink} at {typography.body-md}. Rounded {rounded.xl} (24px), padding {spacing.xl} (20px). Used for pricing tiers, feature descriptions, or content modules below the fold. May include {extensions.shadows.sm} elevation when floating above {colors.surface-soft} backgrounds.

{component.card-elevated} — Elevated card variant with {extensions.shadows.sm} shadow applied, for use when cards sit on non-white surfaces or need to pop visually.

{component.footer} — Page footer (inferred). Background {colors.canvas}, text {colors-muted} at {typography.body-sm}. Generous padding {spacing.section} vertical, {spacing.lg} horizontal. Likely contains legal links, contact info, and secondary navigation.

Inputs & Forms

{component.text-input} — Form text input field. Background {colors.canvas}, text {colors.ink} at {typography.mono} (13px monospace—an unusual but technically-appropriate choice for form data). Border 1px solid {colors.border-input}, rounded {rounded.xs} (4px-ish, specifically 9.44px extracted). Compact internal padding (~6.3px vertical, ~9.4px horizontal). The monospace font choice for input values aligns with the brand's technical/transparency positioning. Focus state ({component.text-input-focus}) would add focus ring or border color shift per implementation conventions.

Navigation

{component.top-nav} — Described above in Buttons section; the principal navigation container with fixed positioning, frosted glass effect, and z-index layering for overlay behavior.

{component.nav-item} — Described above; individual menu item with dropdown support.

Badges & Indicators

{component.badge} — Informational badge/tag. Background {colors.signature-orange-light} (pale orange wash), text {colors.primary-dark} at {typography.caption} (14px). Fully rounded ({rounded.pill}), padding 4px horizontal, 12px vertical. Used for status indicators or category labels.

{component.badge-error} — Error-state badge. Background {colors.signature-coral-light} (pale pink), text {colors.signature-coral} at {typography.caption}. Same pill geometry as {component.badge}. Used for validation errors or alert states.

Signature Components

{component.hero-headline} — The H1 "Business Insurance at the Speed of Compute." Uses {typography.display-lg} (60px/500/-1.92px) in heroHeading face. Color is {colors.ink-deep} for the majority of the text, with "Speed of Compute." span rendered in {colors.primary} (orange) using {component.hero-accent-text}. This mixed-color treatment is a signature brand moment—preserve it exactly for primary value propositions.

{component.hero-accent-text} — The orange-colored span within the hero headline. Inherits {typography.display-lg} metrics but applies {colors.primary} as text color. Creates the visual "pop" that draws the eye to the key differentiator.

{component.hero-subheadline} — Supporting paragraph below the headline: "No confusion, no waiting. Get a quote in minutes. Modular coverage, built for founders by founders." Uses {typography.body-md} (20px/400) in {colors.body-alt} (#4e4e4e). Line height 1.2. Positioned with top margin separating it from the headline.

{component.hero-cta-container} — Wrapper for the hero CTA button(s). Applies {spacing.xl} (20px) top margin to create breathing room between the subheadline and the action. Contains {component.button-primary} ("Get insured now").

Do's and Don'ts

Do

• Do use {colors.primary} orange sparingly and strategically—on CTAs, announcement bars, and headline accent spans only. Let the white canvas carry most of the visual load.
• Do maintain the 20px body text size ({typography.body-md}) for all readable content—this is intentionally larger than standard and core to the brand's accessibility stance.
• Do apply {typography.title-lg} / {typography.title-md} (32px monospace f37Bolton) to all section headings. The monospace title treatment is the system's most distinctive typographic signature.
• Do use {rounded.lg} (16px) for every button—primary, secondary, ghost, and any new button variants you create. Consistent squircle geometry unifies the interactive vocabulary.
• Do preserve the mixed-color headline pattern from {component.hero-headline}: render the key value proposition phrase in {colors.primary} while the rest stays {colors.ink-deep}.
• Do apply the frosted-glass effect (rgba(255,255,255,0.85)) to the fixed nav background, with a {colors.hairline} bottom border for definition.
• Do use {spacing.hero} (160px) as the top padding for hero-like bands, and {spacing.section} (80px) for standard section vertical rhythm.
• Do keep shadows minimal—prefer flat cards on {colors.canvas} or subtle {extensions.shadows.xs} elevation. Reserve {extensions.shadows.lg} and above for true overlays (modals, dropdowns).
• Do use {typography.mono} (13px f37Bolton) for form input values—the technical monospace feel extends to data entry, reinforcing the "built by engineers" brand cue.
• Do set the nav height to 72px and the announcement bar to 40px—these fixed heights create predictable vertical rhythm across the page.
• Do render logo strips in monospace at 32px ({typography.title-lg}) with muted or {colors.ink-deep} color for cohesive social proof presentation.

Don't

• Don't use {colors.primary} as a large background fill—it's too energetic for anything beyond CTAs, thin announcement bars, and text accents. Use {colors.surface-soft} or {colors.signature-orange-light} for tinted backgrounds instead.
• Don't bold the display headings—they're intentionally weight 500 (medium) at most, letting size and the custom heroHeading face carry authority. Avoid font-weight: 700 on {typography.display-lg} or {typography.display-xl}.
• Don't substitute a proportional font for f37Bolton on section titles—the monospace voice is essential to the brand's technical credibility. If the font isn't available, use JetBrains Mono or SF Mono, never Inter or Geist for titles.
• Don't use sharp corners (0px radius) anywhere in the system—the minimum is {rounded.xs} (4px) on inputs, and buttons must be {rounded.lg} (16px). Zero-radius elements break the friendly, modern shape language.
• Don't apply heavy multi-layer shadows—Corgi uses single-layer shadows with moderate blur. Avoid Material-Design-style triple-shadow stacks unless implementing a true modal/dropdown.
• Don't shrink body text below 16px ({typography.body-sm}) for primary content—the 20px standard ({typography.body-md}) is a deliberate readability choice. Reserve 14px and below for captions, labels, and truly auxiliary information.
• Don't use {colors.signature-coral} (#ff405d) as a primary action color—it's strictly an error/accent token. Keep {colors.primary} orange as the sole conversion color.
• Don't remove the letter-spacing negative values from display and title typography—the -1.92px to -2.3px tracking is intentional and creates the tight, editorial headline aesthetic.
• Don't place the logo strip immediately adjacent to the hero CTA without {spacing.section} (80px) vertical breathing room—the whitespace between conversion intent and social proof is psychologically important.
• Don't implement dropdown menus with heavy backgrounds or borders—nav items are transparent pills that gain {colors.surface-soft} background on hover, maintaining the airy feel.

Motion & Animation

Transition Tokens

--transition-transform-base: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), scale 0.3s cubic-bezier(0.4, 0, 0.2, 1), rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform-fast: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), translate 0.2s cubic-bezier(0.4, 0, 0.2, 1), scale 0.2s cubic-bezier(0.4, 0, 0.2, 1), rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-layout: padding 0.075s cubic-bezier(0.4, 0, 0.2, 1), margin 0.075s cubic-bezier(0.4, 0, 0.2, 1);
--transition-morph: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1), clip-path 0.42s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.42s cubic-bezier(0.32, 0.72, 0, 1);
--transition-enter: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
--transition-bounce: transform 0.48s cubic-bezier(0.34, 1.7, 0.5, 1), translate 0.48s cubic-bezier(0.34, 1.7, 0.5, 1), scale 0.48s cubic-bezier(0.34, 1.7, 0.5, 1), rotate 0.48s cubic-bezier(0.34, 1.7, 0.5, 1);
--transition-color: background-color 0.3s cubic-bezier(0, 0, 0.2, 1), transform 0.3s cubic-bezier(0, 0, 0.2, 1);

Keyframe Animations

• pulse — Subtle scale pulse for attention-drawing elements (likely the announcement bar or notification indicators).
• enter — Element entrance animation (probably fade + slight upward translate) for scroll-triggered reveals.
• exit — Element exit animation (fade + downward translate) for dismissed elements like the announcement bar.
• accordion-down / accordion-up — Height-based expansion/collapse for FAQ or collapsible content sections.
• caret-blink — Text input cursor blinking for focused form fields.
• saas-risk-progress — Progress bar animation for risk assessment or coverage configuration tools (inferred from naming).
• suffix-pop-in — Animated appearance for pricing suffixes or decorative text elements (e.g., "/mo" popping in after price).

Interaction Patterns

• Nav scroll behavior: The {component.top-nav} likely transitions from transparent/frosted to fully opaque on scroll, potentially shrinking in height (the transition-t class prefix suggests transform-based scroll behavior).
• Button press: Primary and secondary buttons use pressable-smooth-corner class indicating a smooth corner-radius morph on press (the --transition-morph token with 0.42s duration and border-radius property).
• Accordion expansion: FAQ or detail sections expand with accordion-down keyframe, using the 0.42s morph easing for smooth height + border-radius changes.
• Announcement bar dismiss: Clicking {component.close-announcement} triggers exit animation (0.42s ease-out) collapsing the bar vertically.
• Dropdown reveal: Nav menu items with carets likely trigger a dropdown with enter animation (0.42s bounce-style easing).
• Hover color shifts: Nav items, buttons, and ghost buttons transition text/background colors using --transition-color (0.3s ease-out).
• Scroll-triggered reveals: Content sections below the fold probably fade/slide in using enter keyframe triggered by IntersectionObserver.
• Bouncy micro-interactions: The --transition-bounce token (0.48s with overshoot cubic-bezier) suggests playful spring physics on certain interactions—possibly the corgi mascot or celebration confetti.

Imagery Style

• Hero illustration: 3D-rendered or highly polished 2D digital illustration of a Pembroke Welsh Corgi wearing a red superhero cape, depicted in flight through a cloudy sky. Style is warm, approachable, slightly cartoonish but professionally rendered—positioning the brand as friendly and dynamic rather than corporate-stiff.
• Vintage engraving: Black-and-white stippled/engraved-style illustration of a human hand reaching upward (lower-left of hero). Adds artistic sophistication and possibly symbolizes "support," "reach," or "human touch." High-contrast, detailed linework reminiscent of 19th-century scientific illustrations.
• Sky backdrop: Soft, photographic or painterly sky with cumulus clouds in pale blues and whites. Creates atmospheric depth behind the corgi without competing with foreground content. Likely a subtle gradient or blurred photograph.
• Logo treatment: Customer/trust logos rendered as clean logotypes (text-only or simplified marks) in monochrome (grayscale or single {colors.ink-deep} color). No colorful logos—the restraint keeps focus on the brand.
• Photography style (inferred): If photography exists elsewhere on the site, it likely follows the same warm, professional, startup-aesthetic—founder portraits in natural lighting, office environments with soft bokeh, avoiding stock-photo clichés.
• Illustration role: Imagery supports rather than dominates—the corgi is memorable but doesn't overshadow the headline. The hand engraving is subtle texture, not focal point.
• Color treatment: Illustrations use full, saturated color (especially the red cape contrasting with {colors.primary} orange brand), while logos are desaturated to recede visually.
• No gradients in UI: The interface itself avoids gradient backgrounds (except possibly subtle image overlays)—brand color is solid {colors.primary}, surfaces are flat {colors.canvas} or {colors.surface-soft}.
• Aspect ratios: Hero imagery appears roughly 1:1 to 4:3, positioned to balance the text column's visual mass.

Icon System

• Library: Material Symbols Sharp (Google's icon font, loaded as WOFF2 from /_next/static/media/material-symbols-sharp.0brr5qufqoip9.woff2). This is the "Sharp" variant with clean geometric cuts, matching the brand's modern-technical aesthetic.
• Specific icons observed:
  • Dropdown/down-chevron (▾) on nav items ("Tech companies ▾", "Small businesses ▾", etc.)
  • Close/X icon (×) on announcement bar dismissal
  • Menu/hamburger icon (implied for mobile nav toggle)
  • Possible external-link or arrow icons on CTAs (not clearly visible in static extraction)
• Treatment: Icons use currentColor inheriting from parent text color. Size varies by context: 16px–20px in navigation, 16px for close buttons, potentially 24px for standalone icon buttons. Alignment is optically centered with adjacent text (using flexbox centering).
• Stroke vs fill: Material Symbols Sharp uses filled/iconic style (not outlined), providing solid visual weight that matches the bold headline type and orange CTAs.
• Custom SVG potential: The corgi logo mark (next to "Corgi" wordmark in nav) is likely a custom SVG, not part of the Material Symbols set.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — evident from __next_s script injection, font loading strategy, and file structure
- Styling:        Tailwind CSS v3+ — confirmed by utility class patterns (flex, h-[39px], rounded-[12px], btn-text-small, pressable-smooth-corner)
- Fonts:          Self-hosted WOFF2 for heroHeading, f37Bolton, Geist, and Material Symbols Sharp (all served from /_next/static/media/)
- Animation:      CSS keyframes + Tailwind transition utilities (no GSAP/Framer Motion detected in above-fold; animations are CSS-native)
- Icons:          Material Symbols Sharp (Google) via @font-face + text-icon classes
- Component lib:  Custom components (no shadcn/radix detected — bespoke button, nav, and card classes)
- Build tool:     Next.js内置 (Turbopack or webpack)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout, hamburger nav, stacked hero (text above illustration), compressed spacing | | Tablet | 640px – 1024px | Two-column hero begins, nav may show partial items, logo strip wraps to 2-3 rows | | Desktop | 1024px – 1280px | Full nav visible, hero 50/50 split, logo strip single row | | Wide | > 1280px (xl) | Nav bottom accent line reveals, max-width container (1440–1600px) centers content |

Touch Targets

• {component.button-primary}: 35px height × min 100px width — below WCAG AAA 44×44 minimum. Consider increasing height to 44px on mobile for touch accessibility, or ensure padding compensates.
• {component.button-secondary}: 35px height × min 96px width — same concern as primary. Recommend 44px minimum on touch devices.
• {component.nav-item}: 39px height × variable width — closer to target but still under 44px. Acceptable if tap area extends beyond visual bounds via padding.
• {component.text-input}: ~25px total height (padding + font) — significantly below 44px. Form inputs should be enlarged to 44–48px height on mobile.
• {component.button-ghost}: 39px × 39px — meets icon-button norms but shy of 44px. Acceptable for secondary actions.
• {component.close-announcement}: 24px × 24px — well below 44px. Should have invisible padding expanding hit area to 44px minimum.

Collapsing Strategy

• Navigation: On mobile (< 1024px), the horizontal nav items collapse into a hamburger menu ({component.button-ghost} menu icon triggers a slide-over drawer). The drawer likely uses enter/exit animations with the 0.42s morph easing.
• Hero layout: Mobile stacks the headline, subheadline, and CTA vertically above the corgi illustration (which may shrink to 60–70% width or move below the text). Font size for {typography.display-lg} likely reduces to 36–42px on mobile (using responsive type scale).
• Logo strip: Wraps from single row to 2–3 rows on tablet, potentially becoming a horizontal-scroll carousel on mobile with snap points.
• CTA pair: In the nav, "Book a demo" (secondary) may hide on mobile, leaving only "Get insured" (primary) visible—or both stack vertically.
• Announcement bar: Text may truncate with ellipsis on narrow viewports, or font-size reduce from 14px ({typography.body-sm}) to 12px.
• Spacing compression: {spacing.hero} (160px) likely reduces to 80–100px on mobile; {spacing.section} (80px) reduces to 48–64px.

Image Behavior

• Corgi illustration: On mobile, likely scales down to 250–350px width and positions below the headline text (or as a subtle background element). May reduce opacity to avoid competing with text.
• Hand engraving: May hide entirely on mobile (decorative element, low information density) or shrink to <150px width with reduced opacity.
• Sky backdrop: Maintains full-bleed coverage at all breakpoints; may crop to focus on cloud formations on narrower viewports.
• Customer logos: Reduce from 32px ({typography.title-lg}) to 20–24px on mobile; some logos may hide to fit 4–6 visible marks in the viewport.

Iteration Guide

1. Initialize with Next.js + Tailwind CSS — Match the detected stack. Set up tailwind.config.ts with the color, typography, spacing, and borderRadius tokens from the YAML frontmatter as design tokens. Use CSS variables for values that need runtime access (frosted-glass alpha, shadow opacities).

2. Load fonts exactly as specified — Self-host Geist, heroHeading, and f37Bolton as WOFF2 (or use Vercel's Geist CDN, find a f37Bolton source or substitute JetBrains Mono). Define CSS variables --font-sans: Geist, ..., --font-heading: 'heroHeading', ..., --font-mono: 'f37Bolton', ....

3. Build the announcement bar + nav first — These are fixed-position elements that frame everything else. Implement {component.announcement-bar} (orange, 40px, close button), then {component.top-nav} (frosted glass, 72px, logo + nav items + dual CTAs). Test the nav collapse to hamburger at < 1024px.

4. Implement the hero band with exact type specs — The 60px heroHeading headline with -1.92px letter-spacing is the visual anchor. Render "Speed of Compute." in {colors.primary} as a span within the {colors.ink-deep} headline. Set body text to 20px Geist. Position the Corgi illustration (use a placeholder colored rectangle with "Corgi Illustration" label initially).

5. Create the button system as primitives — Build {component.button-primary}, {component.button-secondary}, and their hover/active variants as reusable components. Ensure all use {rounded.lg} (16px) and 35px height. Add the pressable-smooth-corner class for the border-radius morph on press.

6. Add the logo strip — Monospaced 32px (typography.title-lg) text items in a flex/grid row. Grayscale or {colors.ink-deep} color. 80px vertical padding.

7. Implement below-fold sections iteratively — Each new section should decide: Does it use {typography.title-lg} (mono) for its heading? Is it on {colors.canvas} or {colors.surface-soft}? Does it need {component.card} with 24px radius? Follow the pattern established by hero + logo strip.

8. Layer in motion last — Add the CSS custom properties for transitions (--transition-transform-base, --transition-morph, etc.). Implement scroll-triggered reveals using IntersectionObserver + enter keyframe. Add accordion behavior with accordion-down/accordion-up if building FAQ sections.

9. Run accessibility audits — Fix touch targets below 44×44px (buttons, inputs, close icon). Ensure color contrast ratios meet WCAG AA: {colors.primary} (#ff5c00) on {colors.on-primary} (#ffffff) passes; {colors.body} (#4a4a4a) on {colors.canvas} (#ffffff) passes; verify all combinations.

10. Validate with design.md lint — Run npx @google/design.md lint DESIGN.md to catch broken token references, orphaned components, or missing documentation entries before shipping.

Font Setup for Implementation:

/* In globals.css or tailwind.config */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'heroHeading';
  src: url('/fonts/hero-heading.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'f37Bolton';
  src: url('/fonts/f37-bolton.woff2') format('woff2');
  font-display: swap;
}

:root {
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  --font-heading: 'heroHeading', Arial, sans-serif;
  --font-mono: 'f37Bolton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
}

If proprietary fonts are unavailable:

• heroHeading → Use Inter with font-stretch: condensed and letter-spacing: -0.03em as approximate substitute
• f37Bolton → Use JetBrains Mono (free, Google Fonts) — closest visual match for the technical monospace vibe
• Geist is free from Vercel (github.com/vercel/geist-font) or use Plus Jakarta Sans

Known Gaps

• Hover state specifics: While we document {component.button-primary-hover} and similar tokens based on CSS class names (hover:bg-[#ff7d33]), the exact visual appearance of hover states on cards, nav items, and links is inferred from class names rather than directly observable in a static screenshot.
• Loading/skeleton states: No loading skeletons, spinners, or pending-state UI were visible in the above-fold content. These will need to be designed following the existing color/shape/tokens (e.g., skeleton background in {colors.surface-soft}, pulse animation).
• Form validation states: Beyond {component.text-input-focus}, we lack extracted styles for error states (red border? error message? icon?), success states, or disabled inputs. Infer from {colors.error} (#ff405d) and {colors.success} (#00a86b) tokens.
• Dark mode: The entire extracted design is light mode ({extensions.mode}: "light"). No dark mode token mappings, surface inversions, or dark-specific components were detectable. A dark theme would require systematic inversion decisions (canvas → #191919, ink → #fff, etc.).
• Dashboard/authenticated surfaces: The screenshot shows only the public marketing landing page. Dashboard UI, quote builder interfaces, policy management views, and authenticated-user layouts are not represented here—these may introduce new components (tables, charts, sidebar nav) not in this spec.
• Mobile navigation drawer: The collapsed mobile nav (hamburger → slide-over panel) structure is inferred from the presence of a menu-close button class but not visually documented. Animation details (slide direction, width, backdrop blur) are assumed.
• Exact pixel values for fractional radii: Input fields show borderRadius: 9.43973px — this is likely a calculated/rem value from Tailwind's arbitrary value syntax (rounded-[9.43973px]). The "true" design intent may be a cleaner value like 8px or 10px; we preserve the extracted literal but note it may be an artifact.
• Footer design: The footer is referenced in components but not visible in the above-fold screenshot. Its actual layout (columns, links, newsletter signup, legal text) is undocumented here.
• Pricing/coverage configurator: The meta description mentions modular coverage (CGL, D&O, Tech E&O, Cyber, EPLI) but no configuration UI, pricing tables, or comparison cards were extractable from the provided viewport. This would be a significant sub-system requiring its own component extensions.
• Illustration assets: The corgi mascot, vintage hand engraving, and sky backdrop are described visually but no asset specifications (formats, dimensions, file sizes, licensing) are available. These would need to be sourced or recreated by an illustrator/3D artist.