---
version: alpha
name: "Snowflake"
website: "https://www.snowflake.com"
description: >-
  An enterprise data-cloud platform whose marketing site pairs ultra-heavy Texta display in pure black with isometric line-art illustrations against a white canvas — the hero "MAKING AI REAL FOR BUSINESS" runs at 88px / weight 900 with no tracking adjustment, sitting beside an axonometric snow-blue city scene rendered in single-pixel line-weight on a sky-blue base. The chromatic system is split: pure white and pure black carry every typographic surface, while a single cool snowflake-blue voltage (#249edc) does all the brand voltage work — CTA pill fills, link text, and the icon family on the platform diagram. Lato runs the body tier at 14–18px / 400; Texta carries every display, h2, and uppercase eyebrow at weights 800–900. The radius scale is bimodal — 8px on cards, fully-rounded 45px pills on CTAs — and the only chromatic moment outside the snowflake blue is a deep #11567f navy used on the dark "Streamline your architecture" band beneath the platform diagram.

seo:
  title: "Snowflake Design System for React — snowflake blue, Texta + Lato, 16 components"
  metaDescription: "Snowflake's marketing system pairs an 88px Texta-Black hero on white with isometric line-art and a single snowflake-blue CTA pill. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Heavy editorial display — 88px Texta at weight 900 carries the hero, the heaviest display weight in the data-cloud category"
    - "Single cool-blue voltage — snowflake blue #249edc fills the CTA pill, link text, and the platform-diagram icons; 133 occurrences total"
    - "Bimodal radius scale — 8px on cards (21 occurrences), 45px fully-rounded pills on CTAs (32 occurrences); the system skips 16–24px corners on interactive elements"
    - "Texta + Lato pairing — Texta carries display and uppercase eyebrows, Lato runs every body and nav surface; no third typeface anywhere"
    - "Isometric line-art over photography — axonometric city scenes in single-pixel snowflake blue replace stock photography in every above-fold composition"
  tags:
    - "Analytics & Data"
    - "AI & LLM Platforms"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Snowflake's marketing site holds a position the rest of the data-cloud category abandoned. The hero headline "Making AI Real for Business" sits at 88px Texta at weight 900, all-caps, pure black on pure white, with no tracking adjustment and no underlying gradient. Where Databricks and dbt lean on chromatic gradients and product-screen collages, Snowflake renders an axonometric line-art city in single-pixel snowflake blue beside the headline. The composition reads closer to a corporate annual report than to a SaaS hero — heavy display type plus technical illustration, no photography, no motion overlay above the fold.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 16 color tokens drawn from the 120 CSS custom properties Snowflake exposes on the page, organized into a brand-voltage tier centered on snowflake blue (#249edc), a structural ink-on-canvas split (black for body, deep navy #11567f for the inverted band), and a small set of semantic accents the page barely renders. 11 typography tokens span Texta in three display sizes plus an uppercase eyebrow tier at 12–16px / 800, and Lato across body, nav, and small-label tiers. 16 components cover the hero, the snowflake-blue pill CTA, the 8px-rounded feature cards on the white canvas, the dark navy panel beneath the platform diagram, and the form-input ladder.

    Feed this file to Claude or Cursor and it reproduces Snowflake's specific moves: heavy 800–900-weight Texta display rather than the 500–600 weights most data brands use, single snowflake-blue voltage rather than a multi-accent palette, isometric line-art instead of product screenshots, and the bimodal radius split between 8px cards and 45px pills. The one move worth borrowing only if you have a single recognizable brand color and one product story to tell: the heavy-display-over-line-art composition, which trades visual softness for editorial weight.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.snowflake.com"
      title: "Snowflake — official site"
      description: "Snowflake's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Snowflake's primary brand color?"
      answer: "Snowflake's brand voltage is snowflake blue (#249edc), wired into the CSS as --ui-01, --text-02, and --summit-bg-blue. It appears 133 times in the captured marketing page — 58 as text, 64 as border, 11 as background. The blue carries the hero CTA pill, every inline link, the snowflake icons throughout the platform diagram, and the isometric line-art illustration that sits beside the hero headline. A lighter sky-blue (#76d0f1) and a darker navy (#11567f) sit in the broader palette but do almost no work on the captured marketing surface — snowflake blue does the entire chromatic load."
    - id: "typography"
      title: "What typefaces does Snowflake use, and what should I use as substitutes?"
      answer: "Snowflake runs two voices: Texta for every display, h2, and uppercase eyebrow (weights 800–900), and Lato for every body and nav surface (weights 400–500). The hero h1 hits 88px Texta at weight 900 with 74px line-height; the h2 sits at 48px / 900. Body copy is Lato 14–18px / 400. The closest open-source substitute for Texta is Manrope at weight 800 or Inter at weight 900; Lato is itself open-source via Google Fonts and transfers cleanly. The weight contrast — 900 display over 400 body — is the move to preserve."
    - id: "illustration-style"
      title: "Why does Snowflake use line-art instead of product screenshots?"
      answer: "The hero composition trades a product-screen mockup for an axonometric line-art city scene drawn entirely in single-pixel snowflake-blue strokes on a soft sky-blue base. The choice reads as deliberate distance from the dashboard-collage convention that Databricks, dbt, and Looker all use — Snowflake is selling a data platform abstract enough that a literal screenshot would undersell it. Line-art lets the page evoke infrastructure (buildings, roads, the city-as-system metaphor) without committing to a single product surface. Photography appears only inside the testimonial-tile band below the fold."
    - id: "radius-philosophy"
      title: "What is Snowflake's corner-radius philosophy?"
      answer: "The system is bimodal: 8px on the feature cards and statistic tiles (21 occurrences) and a fully-rounded 45px pill on CTAs (32 occurrences — the dominant radius value). There is no 12–24px middle tier for interactive elements; a surface is either a small-step rounded card or a full pill. The pill treatment carries the snowflake-blue CTA, the secondary white-on-blue pill below the platform diagram, and the rounded badges in the testimonial strip. The 8px feature card sits one step softer than the typical 4–6px data-tools radius."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React data-platform marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Snowflake's specific moves: heavy 900-weight uppercase display in Texta over Lato body, single snowflake-blue voltage on every CTA and link, isometric line-art instead of product screenshots, and the bimodal radius split. The token references resolve cleanly — {colors.snowflake-blue} for the voltage, {colors.ink} for body text, {typography.display-xl} for the hero. The one move that only works at scale: the heavy editorial display tone requires a brand strong enough to carry uppercase pure-black headlines without a softening accent."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#249edc"
  primary-light: "#76d0f1"
  primary-pale: "#c6edf1"
  primary-soft: "#ecf1f5"
  navy-deep: "#11567f"
  navy-darker: "#042130"
  ink: "#000000"
  ink-soft: "#333333"
  ink-muted: "#535862"
  ink-secondary: "#666666"
  ink-tertiary: "#706f6f"
  canvas: "#ffffff"
  divider: "#a0bbcc"
  hairline: "#cccccc"
  link-classic: "#0000ee"
  shadow: "#98a2b3"

typography:
  display-xl:
    fontFamily: "Texta, sans-serif"
    fontSize: 88px
    fontWeight: 900
    lineHeight: 74px
    letterSpacing: 0
  display-lg:
    fontFamily: "Texta, sans-serif"
    fontSize: 64px
    fontWeight: 900
    lineHeight: 52.48px
    letterSpacing: 0
  display-md:
    fontFamily: "Texta, sans-serif"
    fontSize: 48px
    fontWeight: 900
    lineHeight: 43.2px
    letterSpacing: 0
  heading-lg:
    fontFamily: "Texta, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: 0
  heading-sm:
    fontFamily: "Texta, sans-serif"
    fontSize: 24px
    fontWeight: 800
    lineHeight: 26px
    letterSpacing: 0
  eyebrow-md:
    fontFamily: "Texta, sans-serif"
    fontSize: 16px
    fontWeight: 800
    lineHeight: 17.6px
    letterSpacing: "0.4px"
  eyebrow-sm:
    fontFamily: "Texta, sans-serif"
    fontSize: 14px
    fontWeight: 800
    lineHeight: 18px
    letterSpacing: 0
  body-lg:
    fontFamily: "Lato, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0
  body-md:
    fontFamily: "Lato, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "Lato, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  caption:
    fontFamily: "Lato, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0
  nav-link:
    fontFamily: "Lato, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18.2px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  pill: "45px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "38px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "38px"
    borderColor: "{colors.primary}"
  button-dark:
    backgroundColor: "{colors.navy-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "38px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "16px 32px"
    height: "80px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  eyebrow-label:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-lg}"
  card-feature:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "32px"
    borderColor: "{colors.divider}"
  card-stat:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "32px"
  card-dark:
    backgroundColor: "{colors.navy-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "48px 32px"
  card-light-blue:
    backgroundColor: "{colors.primary-pale}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "32px"
  text-input:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "12px 18px"
    height: "47px"
    borderColor: "{colors.canvas}"
  divider-rule:
    backgroundColor: "{colors.divider}"
    height: "1px"
---

## Overview

Snowflake's marketing site holds the heaviest display weight in the data-cloud category. **Industrial display, line-art chrome.** The hero "Making AI Real for Business" runs at 88px Texta weight 900 in pure ink (`{colors.ink}` — #000000) on pure canvas (`{colors.canvas}` — #ffffff), all-caps, with normal letter-spacing and a 74px line-height that pulls the words into a compact rectangle. Where Databricks runs DM Sans at weight 500 and dbt sets Polymath at weight 600, Snowflake commits to weight 900 — the heaviest available cut, sustained across hero (88px), h2 (48px), and h3 (24px) tiers. The display tier never softens.

Beside the headline sits an axonometric line-art city — buildings, roads, and a single rotated snowflake mark drawn in single-pixel snowflake-blue strokes (`{colors.primary}` — #249edc) on a soft sky-blue base. Where most data brands lean on dashboard collages or photographic mood pieces, Snowflake commits to technical illustration — the city scene reads as infrastructure metaphor without ever showing a product UI. This is the **city-as-system** move: the brand's marketing chrome treats data infrastructure the way an annual report treats a transport network.

The chromatic system is binary plus voltage. Black and white carry every typographic surface; snowflake blue (133 occurrences) does the entire chromatic load — CTA fills, link text, eyebrow labels, the line-art illustration, and the snowflake icons in the platform diagram. A deep navy (`{colors.navy-deep}` — #11567f) handles the single inverted band below the fold ("Streamline your architecture. Smash data silos."), and a pale sky-blue (`{colors.primary-pale}` — #c6edf1) carries soft surface tints. There are no chromatic accents beyond these.

**Key Characteristics:**
- Heavy Texta display tier — 88px / 900 hero, 48px / 900 h2, 24px / 800 h3. No 500–700 weight tier exists for headlines anywhere on the page.
- Single snowflake-blue voltage (`{colors.primary}` — #249edc) — 133 occurrences across CTA pill fills, link text, the eyebrow labels above feature cells, and the line-art illustration.
- Pure black ink on pure white canvas — `{colors.ink}` is true #000000 and `{colors.canvas}` is true #ffffff; no near-black tone for body text and no off-white for surfaces.
- Texta + Lato split — Texta carries every display and uppercase eyebrow, Lato runs body and nav. No third typeface.
- Bimodal radius scale — `{rounded.sm}` 8px on feature cards (21 occurrences) and `{rounded.pill}` 45px on CTAs (32 occurrences — dominant). No 12–24px middle tier on interactive elements.
- Isometric line-art over photography — single-pixel snowflake-blue strokes replace dashboard collages in every above-fold composition.
- Single inverted band — `{colors.navy-deep}` (#11567f) carries one full-bleed section below the platform diagram; the rest of the page sits on white.
- 16px base spacing module (42 occurrences). Major rhythm at `{spacing.base}` (16px), `{spacing.xl}` (32px), `{spacing.2xl}` (48px), with section padding at 96px.

## Colors

### Brand

- **Snowflake Blue** (`{colors.primary}` — #249edc): frequency 133. Used as text (58), border (64), background (11). The single brand voltage — fills the hero CTA pill, the eyebrow labels above feature cells, every inline link, the snowflake icons inside the platform diagram, and the line-art illustration strokes. Wired in CSS as `--ui-01`, `--text-02`, and `--summit-bg-blue`. Does the entire chromatic load.
- **Snowflake Pale** (`{colors.primary-pale}` — #c6edf1): frequency 6, all as background. Used as the soft sky-blue tint on the hero illustration backdrop and on the "lead with Snowflake" testimonial card. Wired as a brand-layer color the extraction surfaces but with no canonical CSS variable.
- **Snowflake Light** (`{colors.primary-light}` — #76d0f1): declared as `--ui-11` and `--text-06`. Reserved for the platform-diagram icon accents and not rendered prominently on the captured marketing surface.
- **Snowflake Soft** (`{colors.primary-soft}` — #ecf1f5): frequency 12 as background. The pale steel-blue used on the statistic tiles ("the Snowflake Cloud" stat block) and on the secondary feature cards. Wired as `--summit-bg-ltblue` and `--ui-background-08`.

### Navy

- **Navy Deep** (`{colors.navy-deep}` — #11567f): frequency 4 — 2 as text, 2 as background. Carries the single inverted band beneath the platform diagram ("Streamline your architecture. Smash data silos."). Wired as `--ui-02`, `--ui-background-04`, `--text-07`. The only saturated dark in the system.
- **Navy Darker** (`{colors.navy-darker}` — #042130): frequency 2, as background. Used inside the dark testimonial overlay band.

### Text

- **Ink** (`{colors.ink}` — #000000): frequency 2920 as text — the dominant text color. Every display, every h2, every body paragraph. Wired as `--text-01`, `--ui-background-02`, `--ui-03`. Pure black, never softened to a near-black; the heavy Texta display tier needs the maximum contrast to read as editorial.
- **Ink Soft** (`{colors.ink-soft}` — #333333): frequency 21. Secondary running-text tone — used inside longer-form paragraphs and on the testimonial body copy. Wired as `--ui-background-09`.
- **Ink Muted** (`{colors.ink-muted}` — #535862): frequency 25. Tertiary text on caption rows and small labels.
- **Ink Secondary** (`{colors.ink-secondary}` — #666666): frequency 33. The body-paragraph color the marketing hero uses below the H1 — slightly lighter than the body display ink. Wired as `--text-05`.
- **Ink Tertiary** (`{colors.ink-tertiary}` — #706f6f): the secondary-text variable Snowflake exposes as `--text-secondary` but uses sparingly.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 382 — 171 as text (when reversed on the navy band), 44 as background, 167 as border. Pure white floor, never softened to a cream. Wired as `--ui-background-01`, `--ui-background-05`, `--text-04`, `--ui-05`.

### Hairline

- **Divider** (`{colors.divider}` — #a0bbcc): the hairline between body sections — a soft slate-blue rule used as the divider beneath the platform diagram and around the testimonial cards. Wired as `--divider-01` and `--text-03`.
- **Hairline** (`{colors.hairline}` — #cccccc): frequency 16 as border. Used inside the form-input field borders and around small chip elements. Wired as `--ui-06`, `--ui-12`, and `--summit-border`.

### Semantic

- **Link Classic** (`{colors.link-classic}` — #0000ee): frequency 30 as text. The browser-default blue used on a small number of inline links the page hasn't overridden. Distinct from the snowflake-blue voltage; reads as a residual default rather than as a brand decision.
- **Shadow** (`{colors.shadow}` — #98a2b3): frequency 16, all as shadow. The system uses a cool slate-gray for elevation rather than tinted black — wired as `--ui-13`.

## Typography

### Font Families

The system runs two voices: **Texta** for every display, h2, h3, and uppercase eyebrow surface (weights 700–900), and **Lato** for every body, nav, and small-caption surface (weights 400–500). Fallbacks walk to `sans-serif` with no system-ui safety stack declared on the captured surface. The pairing is deliberate — heavy editorial display in a contemporary grotesk plus open-source workhorse sans for running text — closer to a corporate annual report than to a typical SaaS marketing page.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 88px | 900 | 74px | Hero h1 ("Making AI Real for Business") |
| `{typography.display-lg}` | 64px | 900 | 52.48px | Large section displays — uppercase, all-caps |
| `{typography.display-md}` | 48px | 900 | 43.2px | Section h2 ("Simplify Enterprise Data and AI") |
| `{typography.heading-lg}` | 30px | 700 | 30px | Sub-section titles |
| `{typography.heading-sm}` | 24px | 800 | 26px | h3 / feature-card titles |
| `{typography.eyebrow-md}` | 16px | 800 | 17.6px | Uppercase eyebrow labels above feature cells (0.4px tracking, snowflake blue) |
| `{typography.eyebrow-sm}` | 14px | 800 | 18px | Smaller uppercase eyebrow labels |
| `{typography.body-lg}` | 18px | 400 | 26px | Hero sub-paragraph and primary running text |
| `{typography.body-md}` | 16px | 400 | 24px | Default running text |
| `{typography.body-sm}` | 14px | 400 | 21px | Caption rows, secondary copy |
| `{typography.caption}` | 12px | 500 | 16px | Small uppercase labels and footnote text |
| `{typography.nav-link}` | 14px | 500 | 18.2px | Top-nav link labels |

### Principles

Display weight stays at 900. The hero h1 at 88px / 900 with 74px line-height is the editorial weight statement — confidence by mass, not by tracking or color. Stripe at weight 300 sits at the opposite end; Snowflake holds the maximum cut. The 48px h2 and 24px h3 maintain weight 800–900 rather than stepping down to a 500–600 sub-heading tier. There is no semibold or medium variant of Texta on the page.

Lato carries the body register. The 18px / 400 hero sub-paragraph is the workhorse running-text style; the 16px / 400 body is the default everywhere else. Lato 14px / 500 carries the top-nav links — slightly heavier than body to read against the white canvas. The uppercase eyebrow tier (Texta at 12–16px / 800 with 0.4px tracking) carries small-caps duty that an italic or small-caps variant would normally handle.

### Note on Font Substitutes

Texta is a licensed display family from Latinotype. The closest open-source substitute at the 800–900 weights is **Manrope** at weight 800, or **Inter** at weight 900 with -0.04em tracking adjustment to match Texta's tighter cap height. **Lato** is itself open-source via Google Fonts and transfers cleanly at every body size; no substitute is needed.

## Layout

### Spacing System

- **Base unit:** 16px — the dominant gap value, appearing 42 times in the captured page.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px · `{spacing.4xl}` 96px.
- **Section padding (vertical):** ~96px between major sections on the white canvas; ~128px around the hero.
- **Card internal padding:** `{spacing.xl}` (32px) for feature cards and `{spacing.2xl}` (48px) for the dark navy panel — the inverted band sits noticeably more generous than the white cards.
- **Top-nav padding:** `{spacing.base}` (16px) vertical, `{spacing.xl}` (32px) horizontal.

### Grid & Container

- **Max content width:** ~1200px on the hero and platform diagram, ~1280px on the testimonial band.
- **Hero block:** white canvas with the headline + CTA stack left-aligned at ~50% column width, and the axonometric line-art illustration occupying the right ~50%.
- **Below-fold sections:** centered displays with 3-up feature cells split into three equal columns, each cell carrying an icon, a snowflake-blue eyebrow, an h3 title, and a 1–2 line body paragraph.
- **Platform diagram:** a single full-width composition mapping the Snowflake AI Data Cloud's modules — Apps and Collaboration, Snowflake Intelligence, Apps and Applications, and so on — with snowflake-icon nodes wired by 1px lines.
- **Dark navy band:** full-bleed `{colors.navy-deep}` panel beneath the platform diagram, carrying the "Streamline your architecture" headline in reversed white on the saturated navy.

### Rhythm

The page alternates between **white-canvas density** and a **single inverted band**. The hero is generous (96px top/bottom, single sentence). The platform diagram is dense. The "Streamline your architecture. Smash data silos." band inverts the chrome to navy with white text. The testimonial card grid returns to white. This single moment of inversion is the page's structural device — every other section terminates on the same pure-white floor.

## Elevation

The system has essentially **no shadow tier**. The captured page has 16 shadow occurrences — almost all confined to a soft cool-gray (`{colors.shadow}` — #98a2b3) used on the platform-diagram node tiles and the testimonial card hover states. Depth comes from surface-color contrast (navy band over white canvas, pale-blue stat cards over white) rather than from layered elevation.

- **Flat (no shadow):** hero, every editorial band, feature cells, footer — 99% of surfaces.
- **Card elevation:** the platform-diagram node tiles sit with a `card-shadow: 0 16px 16px rgba(0,0,0,.16)` — the only meaningful shadow on the page.
- **Tonal lift:** the pale-blue statistic tiles (`{colors.primary-soft}`) lift off the white floor by ~3% lightness — visible but soft.

## Shapes

The radius scale is **bimodal**: 8px on cards, fully-rounded pills on every interactive surface.

- **Small-step (cards):** `{rounded.xs}` 2px (9 occurrences — text input borders and small chips), `{rounded.sm}` 8px (21 — feature cards, statistic tiles, navy band, testimonial cards), `{rounded.md}` 12px (18 — secondary card layouts), `{rounded.lg}` 16px (6 — larger feature cards), `{rounded.xl}` 24px (5 — the platform-diagram outer container).
- **Pill (interactive):** `{rounded.pill}` 45px (32 occurrences — dominant) carries the hero CTA, the secondary "Try Snowflake" pill, the inverted-band CTA on the navy panel, and the testimonial badges. A 48px pill variant appears 5 times for larger CTA surfaces.
- **No middle tier on interactive elements:** the scale skips 12–24px corners entirely on buttons and links. Either a surface is a small-step rounded card or it's a fully-rounded pill.

The pill treatment is the warmest surface in the system. The snowflake-blue pill on the white hero is the single most-tappable element on the page.

## Components

**`button-primary`** — The signature CTA. Snowflake-blue `{colors.primary}` fill, white text, fully-rounded `{rounded.pill}` 45px pill, 8x16 padding, 38px height. "Summit 26" registration is the canonical above-fold instance, paired with a left-aligned snowflake mark.

**`button-secondary`** — Transparent fill with snowflake-blue text and a 1px snowflake-blue border, `{rounded.pill}` 45px pill. Used for "Learn more" and tertiary CTAs across the feature cells.

**`button-dark`** — Navy `{colors.navy-deep}` fill with white text, fully-rounded pill. The CTA variant that appears on the inverted band beneath the platform diagram.

**`top-nav`** — White `{colors.canvas}` surface, 80px height, 16x32 padding. Snowflake wordmark flush left, product-nav links (Why Snowflake, Platform, Solutions, Resources, About) center, "Login" + "Get Started" cluster flush right.

**`nav-link`** — Transparent background, black ink text in `{typography.nav-link}` (14px / 500 Lato), 8x12 padding. No hover background visible in the captured surface.

**`hero-heading`** — Black text on the white hero, Texta 88px / 900, all-caps with normal tracking. The display tier — confidence by mass, sustained across every h-level.

**`section-heading`** — Black text, Texta 48px / 900 with 43.2px line-height. Used for "Simplify Enterprise Data and AI," "Leading companies lead with Snowflake," and the inverted-band display reversed in white.

**`eyebrow-label`** — Snowflake-blue text in Texta 16px / 800 uppercase with 0.4px letter-spacing. Sits above every feature-cell title and above section displays — the small-caps tier the system uses instead of a serif sub-head.

**`body-paragraph`** — Default body running-text at Lato 18px / 400 in `{colors.ink-secondary}` (#666666). The hero sub-paragraph and section leads use this color rather than pure black ink.

**`card-feature`** — White surface, 1px `{colors.divider}` border, `{rounded.sm}` 8px radius, 32px internal padding. The default content card on the white canvas — holds feature explanations, snowflake-icon pictograms, and a snowflake-blue eyebrow.

**`card-stat`** — Pale-blue `{colors.primary-soft}` fill, black text, `{rounded.sm}` 8px radius, 32px padding. The statistic tile — carries large numerics (-40% / 50%) on the testimonial strip.

**`card-dark`** — Navy `{colors.navy-deep}` fill, white text, `{rounded.sm}` 8px radius, 48x32 padding. The "Streamline your architecture" panel — the single inverted card on the page.

**`card-light-blue`** — Pale snowflake-blue `{colors.primary-pale}` fill (#c6edf1), black text, `{rounded.sm}` 8px radius. Carries the soft-blue testimonial cards in the customer band.

**`text-input`** — Transparent fill, white text, 1px white border (sits on the dark navy panel where the form lives), `{rounded.xs}` 2px radius, 12x18 padding, 47px height. The newsletter form sits inside the dark band.

**`divider-rule`** — 1px `{colors.divider}` rule used between body sections and beneath the testimonial band.

## Do's and Don'ts

**Do** keep the display tier at Texta weight 900. The hero at 88px / 900 with 74px line-height is the editorial weight statement; dropping to weight 700 or 500 softens the page into a generic SaaS marketing site and loses the annual-report tone.

**Do** treat snowflake blue as the single chromatic voltage. The system has exactly one brand color across all 133 occurrences — multiplying it into a multi-accent palette dilutes the only chromatic signal on the page.

**Do** use isometric line-art instead of dashboard collages. The single-pixel snowflake-blue strokes are the page's signature visual move — replacing them with product screenshots or photography breaks the city-as-system metaphor.

**Do** keep CTAs on the 45px pill. Every interactive surface on the page uses the fully-rounded pill; mixing in a 6–8px rounded button creates two competing button languages.

**Don't** soften pure black ink to a near-black charcoal or warm-gray. The system uses true `{colors.ink}` for body text (2920 occurrences); the heavy Texta display tier needs the maximum contrast against the pure-white canvas. A near-black ink reads as a corporate convention compromise on this surface.

**Don't** introduce a 12–24px middle radius on interactive elements. The system is bimodal — small-step (2–8px) on cards or full pill (45px) on CTAs. Adding a 16px button radius reads as borrowed from a different design language.

**Don't** use the navy `{colors.navy-deep}` (#11567f) for body text or borders. It is the inverted-band canvas color — using it as a structural ink would compete with the pure black body tier and weaken the single-inversion structural device.

**Don't** render the snowflake blue at saturated CTA strength on background fills larger than the pill. The brand color is a voltage on small surfaces — using it as a full-bleed background steals the role the navy `{colors.navy-deep}` panel performs.

## Known Gaps

- **Dark mode:** the captured marketing surface is light-only. The Snowflake product app (`app.snowflake.com`) carries a dark variant not represented here.
- **Hover and focus states:** the captured surface exposes resting states only. The full state matrix (hover, active, focus ring, disabled tint) for `{component.button-primary}` and `{component.text-input}` lives in the product UI.
- **Form input error states:** `{component.text-input}` carries the resting state; error / validation styling is not exposed on the captured marketing surfaces.
- **Motion:** the platform diagram animates on scroll-into-view but the spec captures end-state values only. Easing curves, duration, and stagger timing live in the live page runtime.
- **Product surfaces:** this DESIGN.md captures the marketing site only. Snowsight (the product dashboard), the Marketplace, and the documentation site carry their own surface tokens not represented here.
- **Sub-brand palettes:** the declared `{colors.navy-darker}` and `{colors.primary-light}` belong to sub-brand contexts (Summit event chrome, AI feature accents) and appear sparingly on the captured marketing surface.
- **The CSS exposes a `--text-09` purple-to-pink gradient** for AI feature accents — this gradient is not rendered on the captured surface but is wired into the system for sub-brand contexts.