<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Snowflake
tagline: Deeper cyan #249EDC pill CTAs over a white canvas — the AI Data Cloud rendered in Texta black-weight broadsheet headlines and the snowflake glyph as the literal brand mark.
updated_at: 2026-05-28T00:00:00+12:00
published_at: 2026-05-28T00:00:00+12:00
author: webdesignhot
source_url: https://www.snowflake.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas, dev-tools]
tags: [light, structured, sans, enterprise, data, cyan-cta, pill, data-cloud]
preview_swatch: ['#ffffff', '#249EDC', '#000000']
related: []
description: 'Snowflake operates a payment-rail-confident enterprise-data identity online — a stark white canvas, a deeper saturated cyan (#249EDC, "Snowflake Cyan" — measurably deeper than the lighter #29B5E8 swatches floating around third-party brand-asset sites), pill-shaped CTAs at 45–48px radius (NOT modern-SaaS 8–12px corners), and the geometric six-fold snowflake glyph as the literal brand mark. Display type is Texta — a geometric humanist sans from Latinotype, set in weight 900 (heavy black) at 64px broadsheet scale, NOT Inter or system-sans. Where Databricks reaches for orange-on-charcoal heat and MongoDB picks neon green-pill-on-teal, Snowflake stays restrained: deeper cyan as the only chromatic anchor, broadsheet-scale Texta black-weight headlines, pure-black (#000) body text on white, the snowflake glyph anchoring every brand moment. Coverage spans homepage, the "AI Data Cloud" positioning hub, the Snowflake Marketplace, pricing, the Snowflake Summit 26 hero, and developer / Snowpark surfaces.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: brand-light
  muted: text-muted
  border: border
  ring: brand-deep

colors:
  bg: '#ffffff'                    # canvas — homepage, product pages, docs, pricing, marketplace
  bg-surface: '#f5fafd'            # subtle cyan-tinted surface for nested cards
  bg-soft: '#eaf4fb'               # softer surface — feature wash, marketplace tiles
  bg-feature: '#dfeff9'            # very soft cyan wash — feature callouts
  bg-deep: '#0F2A3A'               # deep navy ground — occasional hero / footer ground
  bg-midnight: '#091C28'           # deeper navy — modal scrim, dense footer
  bg-ink: '#000000'                # pure black — body text canvas anchor
  surface: '#f5fafd'               # alias of bg-surface
  text: '#000000'                  # ink — pure black, verified on snowflake.com body
  text-charcoal: '#111111'         # secondary headings — near-black, slight lift off pure
  text-slate: '#2A2A2A'            # sub-titles
  text-steel: '#444444'            # body running-text emphasis on light gray cards
  text-stone: '#6B6B6B'            # captions, secondary meta
  text-muted: '#9A9A9A'            # disabled, placeholder
  text-on-deep: '#ffffff'          # white text on the deep navy band
  text-on-deep-muted: '#B6D2E2'    # muted on deep navy
  brand: '#249EDC'                 # Snowflake Cyan — DEEPER saturation than the commonly-cited #29B5E8 swatch. Verified 2026-05-28.
  brand-light: '#45AEE3'           # secondary cyan — Summit 26 event chip, lighter pair
  brand-bright: '#3DB5E8'           # brighter cyan — hover lift on primary CTA
  brand-deep: '#1A82B8'             # deeper cyan — pressed state, focus rings, link text at body sizes
  brand-dark: '#0F2A3A'             # deep navy — link hover, headline accent, deep hero ground
  brand-soft: '#C6E6F6'             # soft cyan tint — badges, marketplace tags
  brand-wash: '#DFEFF9'             # softest cyan wash — feature callouts, hover surface
  brand-mid: '#6AC4EA'             # mid cyan — illustrations, gradient stops
  on-brand: '#ffffff'              # WHITE on Snowflake Cyan — high contrast at button weights
  on-brand-deep: '#ffffff'         # white on brand-deep
  accent-coral: '#FF7A59'          # rare warm accent — AI use-case illustrations
  accent-violet: '#7B61FF'         # rare cool accent — vector / ML use cases
  accent-emerald: '#16A672'        # rare data-positive accent — semantic success
  accent-amber: '#F5B400'          # rare warm accent — analytics use cases
  link: '#1A82B8'                  # link cyan — brand-deep doubles as link
  link-hover: '#0F2A3A'            # hovered link drops to brand-dark
  border: '#D8DFE5'                # default 1px hairline — cool gray
  border-soft: '#E8EDF1'           # softer hairline
  border-strong: '#B0BBC4'         # stronger outline — secondary button rest
  border-on-deep: '#1B3F55'        # divider on deep navy ground
  semantic-success: '#16A672'      # confirmation green
  semantic-warning-bg: '#FFF6E0'
  semantic-warning-text: '#8A6A1A'
  semantic-error: '#D8333C'
  semantic-info: '#1A82B8'

typography:
  display:
    family: '"Texta", "Texta Heavy", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 700, 900]
  body:
    family: '"Texta", "Texta Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 700]
  mono:
    family: '"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
    weights: [400, 500]
  scale:
    hero-display:        { size: 64, weight: 900, lineHeight: 1.05, tracking: '-0.02em',  family: display, notes: 'homepage h1 — "The AI Data Cloud" — Texta BLACK 900, broadsheet scale' }
    display-lg:          { size: 56, weight: 900, lineHeight: 1.08, tracking: '-0.018em', family: display, notes: 'product page heroes — Cortex AI, Snowpark, Marketplace' }
    heading-1:           { size: 44, weight: 900, lineHeight: 1.15, tracking: '-0.015em', family: display, notes: 'major section heads — full black weight held all the way down' }
    heading-2:           { size: 32, weight: 700, lineHeight: 1.20, tracking: '-0.01em',  family: display, notes: 'sub-section heads — drops from 900 to 700' }
    heading-3:           { size: 24, weight: 700, lineHeight: 1.25, tracking: '-0.005em', family: display, notes: 'card titles, callout heads' }
    heading-4:           { size: 20, weight: 700, lineHeight: 1.30, tracking: '0',        family: display, notes: 'inline emphasis heads' }
    heading-5:           { size: 18, weight: 700, lineHeight: 1.35, tracking: '0',        family: body,    notes: 'smallest heading' }
    subtitle:            { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body,    notes: 'hero subhead, intro paragraphs — Texta Book' }
    body-lg:             { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-md:             { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body,    notes: 'default body — pure black on white' }
    body-md-medium:      { size: 16, weight: 500, lineHeight: 1.55, tracking: '0',        family: body,    notes: 'body emphasis' }
    body-sm:             { size: 14, weight: 400, lineHeight: 1.50, tracking: '0',        family: body }
    body-sm-medium:      { size: 14, weight: 500, lineHeight: 1.50, tracking: '0',        family: body }
    caption:             { size: 13, weight: 400, lineHeight: 1.40, tracking: '0',        family: body }
    caption-bold:        { size: 13, weight: 700, lineHeight: 1.40, tracking: '0',        family: body }
    micro:               { size: 12, weight: 500, lineHeight: 1.40, tracking: '0',        family: body }
    micro-uppercase:     { size: 12, weight: 700, lineHeight: 1.40, tracking: '0.08em',   family: body, transform: uppercase, notes: 'eyebrow labels — wider tracking; weight 700 to hold against Texta heavy displays' }
    button-md:           { size: 15, weight: 700, lineHeight: 1.30, tracking: '0',        family: body, notes: 'CTA labels — weight 700 calibrated for the cyan pill ground' }
    button-sm:           { size: 14, weight: 700, lineHeight: 1.30, tracking: '0',        family: body }
    code-md:             { size: 14, weight: 400, lineHeight: 1.55, tracking: '0',        family: mono }
    code-sm:             { size: 13, weight: 400, lineHeight: 1.50, tracking: '0',        family: mono }

radius:
  micro: 4
  sm: 8
  md: 12
  lg: 16
  xl: 24
  xxl: 32
  pill: 9999
  full: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 120]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 72

components:
  button-primary:
    backgroundColor: brand
    textColor: on-brand
    rounded: pill
    padding: '14px 28px'
    use: 'every primary CTA — Get Started, Start for Free, Talk to an Expert — FULL PILL (45–48px radius), never sharp corners'
  button-primary-hover:
    backgroundColor: brand-bright
    textColor: on-brand
    rounded: pill
  button-primary-pressed:
    backgroundColor: brand-deep
    textColor: on-brand
    rounded: pill
  button-primary-disabled:
    backgroundColor: border
    textColor: text-muted
    rounded: pill
  button-secondary:
    backgroundColor: transparent
    textColor: text
    rounded: pill
    padding: '14px 28px'
    border: '1px solid border-strong'
    use: 'less-committed pill pair next to primary on light surfaces — pure-black text on transparent'
  button-on-deep:
    backgroundColor: brand
    textColor: on-brand
    rounded: pill
    padding: '14px 28px'
    use: 'cyan pill stays cyan pill over deep navy hero — no shape or color shift'
  button-secondary-on-deep:
    backgroundColor: transparent
    textColor: text-on-deep
    rounded: pill
    padding: '14px 28px'
    border: '1px solid border-on-deep'
    use: 'transparent pill outline on deep navy ground'
  button-ghost:
    backgroundColor: transparent
    textColor: text
    rounded: pill
    padding: '8px 16px'
    use: 'inline pill ghost — nav menu trigger, dropdown opener — still pill, just smaller'
  hero-band-light:
    backgroundColor: bg
    textColor: text
    padding: 120
    use: 'homepage hero — white canvas with Texta 64/900 headline + cyan pill CTA + snowflake glyph watermark + customer logo strip below'
  hero-band-deep:
    backgroundColor: bg-deep
    textColor: text-on-deep
    padding: 120
    use: 'occasional deep-navy hero — Snowflake Summit 26, AI Data Cloud campaign, enterprise pages'
  feature-card:
    backgroundColor: bg
    textColor: text
    rounded: md
    padding: 32
    border: '1px solid border'
    use: '3-up benefit grid on light surfaces'
  feature-card-soft:
    backgroundColor: bg-soft
    textColor: text
    rounded: md
    padding: 32
    use: '3-up grid with soft cyan tint — solutions, capabilities'
  feature-callout-cyan:
    backgroundColor: bg-feature
    textColor: text
    rounded: md
    padding: 32
    use: 'soft cyan wash callout band — AI Data Cloud highlights'
  pricing-tier-card:
    backgroundColor: bg
    textColor: text
    rounded: md
    padding: 32
    border: '1px solid border'
    use: 'standard pricing tier — Standard / Enterprise / Business Critical / Virtual Private'
  pricing-tier-card-featured:
    backgroundColor: bg-surface
    textColor: text
    rounded: md
    padding: 32
    border: '2px solid brand'
    use: 'featured tier — surface tint + cyan ring (Enterprise is typically featured)'
  marketplace-tile:
    backgroundColor: bg
    textColor: text
    rounded: md
    padding: 24
    border: '1px solid border'
    use: 'Snowflake Marketplace data product / app tile'
  marketplace-tile-tag:
    backgroundColor: brand-soft
    textColor: brand-dark
    rounded: pill
    padding: '4px 12px'
    use: 'category tag pill on marketplace tile — Data, App, Model, Connector'
  customer-logo-tile:
    backgroundColor: bg
    textColor: text-stone
    padding: 24
    use: 'monochrome customer logo strip tile — Square, Adobe, Capital One, Pfizer, EA'
  customer-quote-card:
    backgroundColor: bg-surface
    textColor: text
    rounded: md
    padding: 40
    use: 'customer quote card — pull-quote + logo + spokesperson'
  text-input:
    backgroundColor: bg
    textColor: text
    rounded: sm
    padding: '12px 16px'
    height: 44
    border: '1px solid border'
  text-input-focus:
    border: '2px solid brand-deep'
  badge-pill:
    backgroundColor: brand-soft
    textColor: brand-dark
    rounded: pill
    padding: '4px 12px'
    use: 'NEW, GA, PREVIEW, AVAILABLE NOW'
  badge-summit:
    backgroundColor: brand-light
    textColor: on-brand
    rounded: pill
    padding: '6px 14px'
    use: 'Summit 26 event chip — lighter cyan #45AEE3, white text'
  badge-uppercase:
    backgroundColor: transparent
    textColor: text-charcoal
    use: 'micro-uppercase eyebrow label'
  cta-band-deep:
    backgroundColor: bg-deep
    textColor: text-on-deep
    padding: 96
    use: 'pre-footer CTA — deep navy with cyan pill + outline-on-deep pair'
  cta-band-cyan-wash:
    backgroundColor: bg-feature
    textColor: text
    rounded: md
    padding: 64
    use: 'soft cyan callout strip — secondary CTA placement'
  code-block:
    backgroundColor: bg-deep
    textColor: text-on-deep
    rounded: sm
    padding: 20
    use: 'fenced code on docs / Snowpark / developer pages — Snowflake SQL, Python'
  code-inline:
    backgroundColor: bg-soft
    textColor: brand-dark
    rounded: micro
    padding: '2px 6px'
    use: 'inline code in prose — JetBrains Mono on soft cyan'
  top-nav:
    backgroundColor: bg
    textColor: text
    height: 72
    use: 'sticky white nav — snowflake glyph + "Snowflake" wordmark left, cyan pill CTA right'
  footer:
    backgroundColor: bg-midnight
    textColor: text-on-deep-muted
    padding: 96

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.16, 1, 0.3, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 360
  reduced-motion: 'respects prefers-reduced-motion: reduce — transitions reduced to opacity-only at 120ms; section-on-scroll reveals skip translate offset; snowflake glyph rotation paused'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient: '0 1px 2px rgba(15, 42, 58, 0.04)'
  standard: '0 4px 12px rgba(15, 42, 58, 0.08)'
  elevated: '0 12px 32px rgba(15, 42, 58, 0.12)'
  deep: '0 24px 48px rgba(15, 42, 58, 0.16)'
  ring: '0 0 0 3px rgba(36, 158, 220, 0.35)'
  on-deep: 'none — dark canvases use brightness-step elevation rather than shadow'

accessibility:
  contrast-text-on-bg: 21.0                # AAA — #000000 on #ffffff (pure black, max contrast)
  contrast-charcoal-on-bg: 18.9            # AAA — #111111 on #ffffff
  contrast-slate-on-bg: 13.6               # AAA — #2A2A2A on #ffffff
  contrast-steel-on-bg: 9.7                # AAA — #444444 on #ffffff
  contrast-stone-on-bg: 5.0                # AA — #6B6B6B on #ffffff at body sizes
  contrast-on-deep: 13.4                   # AAA — #ffffff on #0F2A3A
  contrast-on-brand: 3.2                   # AA Large — #ffffff on #249EDC (button-md at 15/700 qualifies)
  contrast-on-brand-deep: 5.0              # AA — #ffffff on #1A82B8
  contrast-link-on-bg: 5.0                 # AA — #1A82B8 on #ffffff
  focus-ring: '3px solid rgba(36, 158, 220, 0.35) with 2px offset on light; 2px solid #ffffff with 2px offset on deep navy'
  reduced-motion-honored: true

dark-mode: 'dual-mode by section, not global toggle — marketing surface is overwhelmingly white with pure-black body text. The deep navy (#0F2A3A / #091C28) appears as occasional hero, CTA band, code block, and footer ground. Snowflake does not ship a marketing-wide dark theme; the deep navy is structural, used for emphasis rather than as a user preference. The in-product Snowsight console has its own dark/light theme behind login.'

lineage:
  summary: 'Snowflake descends from the enterprise data-warehouse marketing tradition — AWS Redshift''s enterprise-blue palette (which Snowflake displaced as the cloud-native default), Oracle and Teradata''s deep-navy authority, and the more recent Stripe-influenced documentation-as-product canon. The signature cyan Snowflake brand color (#249EDC) is the brand''s own contribution — most enterprise data brands stay in deep navy (Oracle, IBM, Teradata) or charcoal (Databricks); Snowflake''s saturated-yet-restrained cyan reads as deliberately post-Oracle, more SaaS than mainframe. The dual-mode brand (white middle, deep navy bookends) borrows from AWS''s marketing pages and MongoDB''s deep-teal hero pattern, but Snowflake weights the white surface heavily and uses deep navy only for emphasis — opposite to MongoDB''s structural hero-band weighting. The customer-logo-heavy cadence borrows from Salesforce and ServiceNow''s enterprise-credibility playbook. The choice of Texta (Latinotype) at weight 900 places Snowflake in a different typographic neighborhood than peers running Inter (Vercel, Linear, Stripe) — Texta is a distinctive geometric humanist face with a stronger black weight that gives the brand its "data-utility-for-grown-ups" broadsheet register. The 45–48px pill geometry on every CTA is the brand''s most counter-intuitive choice — every modern-SaaS playbook (Stripe, Linear, Vercel) lands on 6–12px corners; Snowflake stays committed to the pill, which reads as payment-rail-confident, not over-friendly. The snowflake glyph itself is the brand''s most distinctive asset: a six-fold geometric mark that scales from favicon to billboard.'
  influences:
    - name: Databricks
      role: Direct competitor in the data-lakehouse category — the orange-on-charcoal foil that makes Snowflake's restrained cyan-on-white legible by contrast
      url: https://www.databricks.com
    - name: MongoDB
      role: Database-product peer with a dual-mode structural brand and a distinctive product-color signature (green pill vs Snowflake's cyan pill — both committed to pill geometry)
      url: https://www.mongodb.com
    - name: AWS
      role: The cloud platform Snowflake runs on, and the Redshift product Snowflake displaced as the default cloud warehouse — Snowflake borrows the dual-mode brand pattern from AWS's marketing
      url: https://aws.amazon.com
    - name: Confluent
      role: Streaming-data peer with a similarly enterprise-blue palette; Snowflake's saturated cyan distinguishes against Confluent's deeper, navier brand blue
      url: https://www.confluent.io
    - name: Latinotype (Texta)
      role: The Chilean type foundry behind Texta — the geometric humanist sans Snowflake runs at weight 900 on every display headline, giving the brand its broadsheet register
      url: https://www.latinotype.com
---

## 1. Visual Theme & Atmosphere

Snowflake's marketing surface is the **payment-rail-confident enterprise-data identity online**. Where Databricks reaches for orange-on-charcoal heat and MongoDB lands on neon green-pill-on-teal, Snowflake stays restrained and saturated: a stark white canvas, a single deeper cyan (`#249EDC`, "Snowflake Cyan" — measurably deeper than the lighter `#29B5E8` swatches circulating on third-party brand-asset sites) that signals every CTA, **pill-shaped CTAs at 45–48px radius** (NOT modern-SaaS 8–12px corners), and the geometric six-fold snowflake glyph that does double duty as logomark and product symbol. The whole system reads as *credible data-utility infrastructure for grown-ups* — which is exactly the bet for a company selling petabyte-scale data warehousing to Fortune 500 finance and pharma buyers.

The signature `#249EDC` is the brand's defining chromatic moment. It's a **deeper, more saturated cyan** than the commonly-cited `#29B5E8` swatch — the third-party brand-asset sites are off by a couple of percentage points in saturation. Verified live on snowflake.com 2026-05-28 via Chrome DevTools, the actual primary brand color reads `#249EDC` with a secondary lighter cyan `#45AEE3` reserved for the Summit 26 event chip and similar lighter-pair moments. The deeper saturation reads as more confident, less casual — the difference between a SaaS cyan and a payment-rail cyan. White on `#249EDC` meets WCAG AA Large at 3.2 contrast at button weights; for body-weight elements the system drops to the deeper `#1A82B8` to hold AA.

Display type is **Texta** — a geometric humanist sans from Latinotype, NOT Inter or Helvetica. The site historically used Texta and continues to do so; the Latinotype face is the brand's distinctive typographic asset. Texta has rounded humanist proportions with a strong black weight that Inter doesn't match. Hero `h1` sizes hit **64px at weight 900** with -0.02em tracking — broadsheet scale, full black weight, more like a Sunday-paper masthead than a SaaS hero. The 900 weight is the brand's most aggressive typographic choice; it carries headlines like "The AI Data Cloud" with newspaper-mast authority. Body type drops to **16px / 400 Texta Book** with 1.55 line-height, set in **pure black `#000`** (verified) on white — maximum contrast, no warm-navy softening.

The page rhythm alternates **white feature grid → soft-cyan callout → customer logo strip → product mockup → deep navy CTA band → deep navy footer**. The deep navy bookends emphasize the white middle. Customer logos are the brand's credibility lever — Square, Adobe, Capital One, Pfizer, EA, NBC Universal — and they appear at near every viewport, monochrome on the white canvas. The Snowflake Marketplace surface introduces a tile grid with cyan category pills.

The brand's secondary signal is the **snowflake glyph** itself — a geometric six-fold mark that scales from favicon to billboard. It appears as the logomark, as a watermark behind hero illustrations, as a section divider, and as the loading spinner inside the product. The mark is single-color cyan (`#249EDC`) on white, white on deep navy, and never carries a gradient.

**Key Characteristics:**
- **Snowflake Cyan** (`#249EDC`) — DEEPER than the commonly-cited `#29B5E8`. Verified live 2026-05-28.
- **Secondary cyan** (`#45AEE3`) — Summit 26 event chip; lighter pair.
- **White canvas** with **pure-black** (`#000`) body text — maximum contrast, no warm tint.
- **Texta** display at weight 900 — NOT Inter, NOT Helvetica. Latinotype geometric humanist sans.
- **64px hero h1 at weight 900** — broadsheet scale; black weight is the brand's most aggressive choice.
- **Pill radius (45–48px)** on every primary CTA — never the modern-SaaS 8–12px corners. Snowflake stays committed to the pill.
- **Snowflake glyph** as logomark, watermark, divider, loading spinner — single-color, never gradient.
- **Customer logo strip** at near every viewport — Square, Adobe, Capital One, Pfizer, EA, NBC.
- **Marketplace tile grid** with cyan category-tag pills (Data, App, Model, Connector).
- **JetBrains Mono** on code surfaces — Snowpark Python, SQL examples, fenced blocks.
- 96–120px section padding; 120px on hero, 96px on CTA bands.
- **White-on-cyan** CTA pairing — Snowflake's calibration leans toward enterprise convention.

## 2. Color Palette & Roles

### Primary
- **Bg / Canvas** (`#ffffff`): The default page floor for marketing, docs, pricing, marketplace, blog.
- **Bg Deep** (`#0F2A3A`): Deep navy ground — Snowflake Summit 26 hero, AI Data Cloud campaign, pre-footer CTA.
- **Bg Midnight** (`#091C28`): Deeper navy — footer ground, modal scrim.
- **Text / Ink** (`#000000`): Display headlines and body — **pure black**, verified live. Snowflake does NOT use a warm-navy ink; the brand commits to maximum-contrast pure black on white.
- **Brand / Snowflake Cyan** (`#249EDC`): The deeper saturated cyan that signals every CTA, every active state, every brand moment. Verified 2026-05-28.

### Brand & Cyan
- **Brand Light** (`#45AEE3`): Secondary cyan — Summit 26 event chip, occasional lighter-pair moments where the primary cyan would feel too saturated.
- **Brand Bright** (`#3DB5E8`): Brighter cyan for hover lift on primary CTAs.
- **Brand Deep** (`#1A82B8`): Deeper cyan — pressed state, focus rings, link text (where the vivid brand cyan would fail AA on body sizes).
- **Brand Dark** (`#0F2A3A`): Deep navy — link hover, headline accents, deep hero ground. Same hex as `bg-deep`.
- **Brand Soft** (`#C6E6F6`): Soft cyan tint — marketplace tags, badges, "NEW / GA" pills.
- **Brand Wash** (`#DFEFF9`): Softest cyan wash — feature callouts, hover surface on tiles.
- **Brand Mid** (`#6AC4EA`): Mid cyan — used inside illustrations and gradient stops only, never on marketing chrome.
- **On Brand** (`#ffffff`): WHITE on Snowflake Cyan. Note the deliberate choice — not near-black, not navy. White meets AA Large at button-weight sizes (15px / 700); for smaller text the system drops to `#1A82B8` solid bg.

### Accent — Use-case Illustrations
Used inside specific use-case illustrations only — never on marketing chrome.
- **Accent Coral** (`#FF7A59`): Warm accent — AI use-case illustrations, occasional Cortex AI moments.
- **Accent Violet** (`#7B61FF`): Cool accent — vector search / ML use cases.
- **Accent Emerald** (`#16A672`): Data-positive accent — semantic success, growth metrics in dashboards.
- **Accent Amber** (`#F5B400`): Warm accent — analytics use-case illustrations.

### Interactive
- **Link** (`#1A82B8`): Body-text link — uses `brand-deep` for AA contrast (the vivid `#249EDC` would fail at body sizes).
- **Link Hover** (`#0F2A3A`): Pressed link state — drops to `brand-dark`.
- **Selected**: Selection bg uses `brand` at 20% alpha over `brand-wash`.

### Neutral Scale
- **Ink / Text** (`#000000`): Display, body — **pure black**, verified on snowflake.com. The brand does NOT use a warm-navy ink. Maximum contrast.
- **Charcoal** (`#111111`): Secondary headings, footer link headings — minor lift off pure black.
- **Slate** (`#2A2A2A`): Sub-titles, secondary body emphasis.
- **Steel** (`#444444`): Body emphasis on light gray cards.
- **Stone** (`#6B6B6B`): Captions, breadcrumbs, meta lines.
- **Muted** (`#9A9A9A`): Disabled, placeholder, on-deep-muted.

### Surface & Borders
- **Surface** (`#f5fafd`): Subtle cyan-tinted surface for nested cards.
- **Bg Soft** (`#eaf4fb`): Softer surface — feature wash, marketplace tile hover, inline code.
- **Bg Feature** (`#dfeff9`): Soft cyan wash callout surface — AI Data Cloud highlights, feature blocks.
- **Border** (`#D8DFE5`): Default 1px hairline — slightly cool gray.
- **Border Soft** (`#E8EDF1`): Lighter hairline for nested borders.
- **Border Strong** (`#B0BBC4`): Stronger outline — secondary button rest, table headers.
- **Border On Deep** (`#1B3F55`): Divider on deep navy ground.

### Shadow Colors
- **Ambient** (`rgba(15, 42, 58, 0.04)`): Barely-visible card shadow. Shadow color tints navy rather than pure gray — keeps shadow temperature consistent with brand.
- **Standard** (`rgba(15, 42, 58, 0.08)`): Default elevated card.
- **Elevated** (`rgba(15, 42, 58, 0.12)`): Floating popovers, dropdowns, marketplace tile hover.
- **Deep** (`rgba(15, 42, 58, 0.16)`): Modals, dialogs.
- Deep navy canvases use **brightness-step elevation** rather than shadow — `#0F2A3A` → `#091C28` → `#1B3F55`.

### Semantic
- **Success** (`#16A672`): Confirmation green — same hex as accent-emerald.
- **Warning Bg** (`#FFF6E0`) / **Warning Text** (`#8A6A1A`): Caution callouts.
- **Error** (`#D8333C`): Validation errors, destructive actions.
- **Info** (`#1A82B8`): Info notices — same as brand-deep / link.

## 3. Typography Rules

### Font Family
- **Primary**: `"Texta", "Texta Heavy", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`. **Texta (Latinotype) carries every text role.** Verified live on snowflake.com 2026-05-28 — the `h1` resolves to Texta. The brand does NOT run on Inter; the lighter Inter substitution that some third-party brand-spec sites assume is incorrect. Texta is a geometric humanist face from the Chilean foundry Latinotype with rounded terminals, humanist proportions, and a distinctive heavy/black weight (900) that Inter doesn't match. The black weight is what gives Snowflake its broadsheet register.
- **Mono**: `"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace`. JetBrains Mono on every code surface — Snowflake SQL examples, Snowpark Python snippets, fenced blocks on the developer pages.
- **Substitutes**: Texta is a commercial Latinotype face. If unavailable, **Helvetica Neue** (or Helvetica) is the closest open-system pair — geometric grotesque, but without Texta's humanist warmth. Avoid substituting Inter — Inter's hairline-uniform stroke and lack of a true black weight changes the brand voice entirely. JetBrains Mono is on Google Fonts.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| hero-display | Texta | 64 | 900 | 1.05 | -0.02em | — | Homepage hero h1 — "The AI Data Cloud" — Texta BLACK 900 |
| display-lg | Texta | 56 | 900 | 1.08 | -0.018em | — | Product page heroes — Cortex AI, Snowpark, Marketplace |
| heading-1 | Texta | 44 | 900 | 1.15 | -0.015em | — | Major section heads — full black weight held all the way down |
| heading-2 | Texta | 32 | 700 | 1.20 | -0.01em | — | Sub-section heads — drops from 900 to 700 |
| heading-3 | Texta | 24 | 700 | 1.25 | -0.005em | — | Card titles, callout heads |
| heading-4 | Texta | 20 | 700 | 1.30 | 0 | — | Inline emphasis heads |
| heading-5 | Texta | 18 | 700 | 1.35 | 0 | — | Smallest heading |
| subtitle | Texta | 18 | 400 | 1.55 | 0 | — | Hero subhead, intro paragraphs — Texta Book |
| body-lg | Texta | 18 | 400 | 1.55 | 0 | — | Long-form prose, customer quotes |
| body-md | Texta | 16 | 400 | 1.55 | 0 | — | Default body — pure black on white |
| body-md-medium | Texta | 16 | 500 | 1.55 | 0 | — | Body emphasis |
| body-sm | Texta | 14 | 400 | 1.50 | 0 | — | Footer body, secondary copy |
| body-sm-medium | Texta | 14 | 500 | 1.50 | 0 | — | Card metadata, marketplace meta |
| caption | Texta | 13 | 400 | 1.40 | 0 | — | Photo captions, image meta |
| caption-bold | Texta | 13 | 700 | 1.40 | 0 | — | Card category labels |
| micro | Texta | 12 | 500 | 1.40 | 0 | — | Tiny meta text, breadcrumbs |
| micro-uppercase | Texta | 12 | 700 | 1.40 | 0.08em | uppercase | Uppercase eyebrow labels — wider tracking; weight 700 |
| button-md | Texta | 15 | 700 | 1.30 | 0 | — | Primary CTA labels — weight 700 on the cyan pill |
| button-sm | Texta | 14 | 700 | 1.30 | 0 | — | Nav CTAs, secondary buttons |
| code-md | JetBrains Mono | 14 | 400 | 1.55 | 0 | — | Fenced code blocks, Snowpark examples |
| code-sm | JetBrains Mono | 13 | 400 | 1.50 | 0 | — | Inline code in prose |

### Principles
- **Display runs at weight 900 (BLACK).** This is the brand's most aggressive typographic choice and what distinguishes Snowflake from Inter-running peers. The black weight gives "The AI Data Cloud" headlines their broadsheet authority — heavier than Inter's 700, heavier than Helvetica Black, full Latinotype weight.
- **Headings step down from 900 to 700 below 44px.** The 900 weight holds through `heading-1` (44px); `heading-2` and below drop to 700 to keep small-size headings legible without crossing into stencil-ink density.
- **Buttons run weight 700 at 15px** — slightly larger than peer brands (Stripe 14 / 500, Vercel 14 / 500) to hold weight against the cyan pill ground.
- **Negative tracking** scales linearly: -0.02em at 64px, -0.018em at 56px, -0.015em at 44px, -0.01em at 32px. Stops at 0 below 24px.
- **Body line-height is 1.55** — calibrated for the dense paragraph rhythm of enterprise solution pages.
- **Body text is pure black `#000`** on white — verified live. The brand commits to maximum contrast; no warm-navy softening.
- **Wider 0.08em tracking** on micro-uppercase eyebrow labels — generously spaced compared to peer brands. Enterprise-formal.
- **JetBrains Mono on every code surface** — no system fallback at the first level. The mono separation is the developer-trust contract.
- **No serif anywhere** — Snowflake is single-family Texta discipline (with JetBrains Mono for code).

## 4. Component Stylings

### Buttons (5 variants)

**`button-primary`** — The signature Snowflake Cyan **pill**. Background `#249EDC`, text `#ffffff` (white, NOT near-black), type 15px / 700 Texta, padding 14×28px, **full pill radius (45–48px)**. The pill geometry is the brand's most counter-intuitive choice given the modern-SaaS pull toward 6–12px corners — Snowflake stays committed to the pill, which reads as payment-rail-confident rather than over-friendly.
- *Hover*: `button-primary-hover` brightens to `#3DB5E8`.
- *Pressed*: `button-primary-pressed` deepens to `#1A82B8`.
- *Disabled*: Background `#D8DFE5`, text `#9A9A9A`.
- *On-deep variant*: Identical cyan pill on deep navy bands — no color or shape shift.

**`button-secondary`** — Transparent pill with `#B0BBC4` border. Text `#000000` (pure black). Same pill shape, same 14×28px padding. The "less-committed" pair next to primary on light surfaces.

**`button-secondary-on-deep`** — Transparent pill with `#1B3F55` border. Text `#ffffff`. Same pill. Used over deep navy hero bands and pre-footer CTAs.

**`button-ghost`** — Inline pill ghost. Transparent, text `#000000`, smaller padding (8×16px), still full pill radius. Used for nav menu triggers and dropdown openers. Note: Snowflake's discipline keeps every button-shaped element on pill geometry — there is no non-pill button variant in the system.

### Cards

**`hero-band-light`** — Homepage hero. White canvas, pure-black text, 120px vertical padding. Texta 64/900 headline ("The AI Data Cloud") + Texta 18/400 subtitle + cyan pill primary CTA + secondary pill outline pair. Snowflake glyph as decorative watermark behind type, or product mockup floating right.

**`hero-band-deep`** — Occasional deep navy hero — Snowflake Summit 26, AI Data Cloud campaign, enterprise solution pages. Deep navy canvas (`#0F2A3A`), white text, 120px vertical padding. Cyan pill stays cyan pill on deep — no shape or color shift.

**`feature-card`** — 3-up benefit grid card on light surfaces. White background, 12px (md) radius, 32px padding, 1px `#D8DFE5` border. Carries icon (cyan `#249EDC` glyph), heading-3 title in Texta 24/700, body-md description in Texta 16/400 pure black.

**`feature-card-soft`** — 3-up grid with soft cyan tint. Background `#eaf4fb`, no border, otherwise identical. Used on the "Capabilities" and "Solutions" surfaces.

**`feature-callout-cyan`** — Soft cyan wash callout band. Background `#DFEFF9`, dark text, 12px radius, 32px padding. AI Data Cloud highlights, Cortex AI feature blocks.

**`code-block`** — Fenced code on docs / Snowpark / developer pages. Background `#0F2A3A` (deep navy), white text in JetBrains Mono, 8px (sm) radius, 20px padding. The deep navy bg ties code visually to the brand's deep hero language. Note: code blocks use a tighter radius (8px) than the rest of the card system (12px) — code reads as data-y at a tighter corner.

**`code-inline`** — Inline code in prose. Background `#eaf4fb` (bg-soft), text `#0F2A3A` (brand-dark), 4px micro radius, 2×6px padding, JetBrains Mono 13px.

### Pricing (4-tier vertical)

**`pricing-tier-card`** — Standard / Enterprise / Business Critical / Virtual Private Snowflake. White, 12px radius, 32px padding, 1px `#D8DFE5` border. Plan name in heading-4 (Texta 20/700), price/credits in heading-1 (Texta 44/900/-0.015em — full black weight on the price), feature checklist in body-md pure black, primary cyan pill CTA at bottom.

**`pricing-tier-card-featured`** — Featured tier (typically Enterprise). Surface shifts to `#f5fafd` AND border thickens to 2px solid `#249EDC`. The cyan ring is the signal — no badge text needed.

**`pricing-comparison-row`** — Comparison table row. Hairline `#D8DFE5` divider, 12px vertical padding, label left + checkmarks across 4 plan columns. Wide tracking on uppercase column headers keeps the table breathable.

### Snowflake Marketplace

**`marketplace-tile`** — Data product / app tile in the Marketplace grid. White, 12px radius, 24px padding, 1px `#D8DFE5` border. Provider logo + product name in heading-4 (Texta 20/700), body-sm description, category-tag pill, "Get" CTA in cyan ghost pill form.

**`marketplace-tile-tag`** — Category-tag pill. Background `#C6E6F6` (brand-soft), text `#0F2A3A` (brand-dark), full pill, 4×12px padding, type caption-bold (13 / 700). The marketplace tags share pill geometry with the CTAs — every pill-shaped element in the system uses the same radius family.

**`customer-quote-card`** — Pull-quote card. Background `#f5fafd` (surface), 12px radius, 40px padding. Large quote text in heading-3 Texta 24/700, customer logo above, spokesperson name + title in body-sm-medium. Used inside hero bands and as standalone callouts.

### Badges & Pills

**`badge-pill`** — "NEW", "GA", "PREVIEW", "AVAILABLE NOW". Background `#C6E6F6`, text `#0F2A3A`, full pill, 4×12px padding, type micro-uppercase (12 / 700 / 0.08em).

**`badge-summit`** — Summit 26 event chip. Background `#45AEE3` (brand-light — the secondary lighter cyan), text `#ffffff` (white), full pill, 6×14px padding. This is the one place the secondary cyan `#45AEE3` lives — the event chip is the brand's nod to a lighter pair without diluting the primary cyan.

**`badge-uppercase`** — Section eyebrow. Transparent, text `#111111` (charcoal), type micro-uppercase (12 / 700 / 0.08em).

### Inputs / Forms

**`text-input`** — White, 8px (sm) radius, 12×16px padding, 44px height, 1px `#D8DFE5` border. Note: inputs use a tighter radius (8px) than cards (12px) — inputs sit in the "data-entry" register and read better at a tighter corner than the buttons or cards.

**`text-input-focus`** — Border thickens to 2px solid `#1A82B8` (brand-deep). Outer 3px ring at 35% alpha appears via box-shadow.

### Navigation

**`top-nav`** — 72px-tall sticky white bar. Snowflake glyph + "Snowflake" wordmark left (Texta 18/700 + cyan `#249EDC` glyph), horizontal menu (Platform / Solutions / Pricing / Resources / About) center, "Sign In" text link + cyan pill "Start for Free" button right. Stays white on every page including deep navy hero pages. The 72px height (taller than typical 64px) gives the cyan glyph more room.

**`footer`** — Deep midnight ground (`#091C28`), white headings, `#B6D2E2` link tone. Multi-column — Products / Solutions / Resources / Company / Legal — with social icons strip and language picker. 96px vertical padding.

### CTA Bands

**`cta-band-deep`** — Pre-footer CTA. Deep navy (`#0F2A3A`), white text, 96px padding. Headline in heading-1 (Texta 44/900), subhead in body-lg, primary cyan pill + secondary outline-on-deep pill pair.

**`cta-band-cyan-wash`** — Soft cyan callout strip. Background `#DFEFF9`, dark text, 12px radius, 64px padding. Used as secondary CTA placement between content bands — quieter than the deep navy variant.

## 5. Layout Principles

### Spacing System
Base unit **4px**. Tokens: `xxs:4 · xs:8 · sm:12 · md:16 · lg:20 · xl:24 · xxl:32 · xxxl:40 · section-sm:48 · section:64 · section-lg:96 · hero:120`. Section padding alternates: 64px between minor bands, 96px between major bands, 120px for hero spaces. Card internal padding: 24px marketplace tile, 32px feature card, 32px pricing tier card, 40px customer quote card.

### Grid & Container
- **Max content width**: 1280px centered, with 32px horizontal breathing room.
- **Header**: 72px tall (taller than typical 64px to give the snowflake glyph room).
- **Hero**: Full-width white or deep-navy band, 120px padding, type column constrained to ~720px with mockup or watermark glyph floating right.
- **3-up feature grid**: 3 columns desktop, 2 tablet, 1 mobile.
- **Pricing tier grid**: 4-up at desktop with Enterprise featured (cyan ring), 2-up tablet, 1-up mobile.
- **Marketplace tile grid**: 4-up at desktop with left-rail category filter (240px wide).
- **Customer logo strip**: 6-up at desktop, wraps to 3×2 on tablet.

### Whitespace Philosophy
Snowflake leans on **generous whitespace as enterprise-trust signal**. Light pages use 96–120px section padding to keep the white canvas from feeling cramped. Customer logo strips get their own breathing room — 96px above and below — because the named logos (Square, Adobe, Pfizer) carry credibility weight that requires visual emphasis. Marketplace tile grids use 24px gutters, which is tighter than the rest of the system but appropriate for browse-density.

### Section Cadence
Page rhythm: white hero band → customer logo strip → 3-up feature grid → soft-cyan callout → product mockup → customer quote card → pricing teaser → deep navy CTA band → deep midnight footer. The deep navy bookends the white middle. On the Snowflake Summit 26 and AI Data Cloud campaign pages the opening hero flips to deep navy — these are the exceptions, used to signal "campaign" rather than "always-on product page."

## 6. Shapes & Radius Scale

| Tier | Token | Value | Use |
|---|---|---|---|
| Micro | micro | 4px | Inline code pills, tiny data-table chips |
| Small | sm | 8px | Form inputs, code blocks — tighter than cards |
| Medium | md | 12px | **Feature cards, pricing tier cards, marketplace tiles, customer quote cards, callout bands** |
| Large | lg | 16px | Hero illustration containers |
| XL | xl | 24px | Decorative containers (rare) |
| XXL | xxl | 32px | Reserved — rarely used |
| Pill | pill | 9999px | **EVERY CTA — primary, secondary, ghost, on-deep, on-light. Also: category tags, NEW/GA badges, Summit chip.** Every button-shaped element in the system is a pill. |

**The pill on every CTA is non-negotiable.** Snowflake's pill geometry (45–48px effective radius for the standard button height) is the brand's most counter-intuitive choice given modern-SaaS's pull toward 6–12px corners. The pill says *payment-rail-confident enterprise utility*, not *over-friendly consumer SaaS*. The contrast with peer enterprise brands (Stripe also uses pill; Vercel and Linear use 6–8px corners; Databricks uses 8px corners) is part of Snowflake's signal: the pill aligns it with payment-rail credibility rather than developer-tools modernism.

Cards stay at 12px (md) to feel solid and stable; inputs and code blocks drop to 8px (sm) for the slightly tighter "this is data-entry" feel. The system never uses sharp corners — even the smallest decorative element gets at least 4px (micro).

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow | Body sections, top nav (until scrolled), deep navy hero bands |
| 1 — Ambient | `0 1px 2px rgba(15, 42, 58, 0.04)` | Sticky nav after scroll |
| 2 — Standard | `0 4px 12px rgba(15, 42, 58, 0.08)` | Default elevated cards (feature, pricing, marketplace) |
| 3 — Elevated | `0 12px 32px rgba(15, 42, 58, 0.12)` | Floating popovers, dropdowns, marketplace tile hover |
| 4 — Deep | `0 24px 48px rgba(15, 42, 58, 0.16)` | Modals, dialogs |
| 5 — Brightness-step | `#0F2A3A` → `#091C28` → `#1B3F55` | Deep navy canvas elevation — no shadow |

### Shadow Philosophy
Light surfaces use **navy-tinted shadows** rather than pure-gray. The shadow color `rgba(15, 42, 58, X)` matches the deep navy hero — keeps the temperature consistent with the brand. Deep navy canvases use **brightness-step elevation** because shadows are invisible on dark grounds; the system layers via `#0F2A3A` → `#091C28` → `#1B3F55`.

Product mockups inside hero bands carry their own internal depth (cards inside the Snowsight dashboard mockup), so the surrounding container stays quiet. The snowflake glyph watermark behind hero type is rendered at very low opacity (~6%) so it adds atmosphere without competing with the headline.

There is no atmospheric glow or spotlight effect — Snowflake's depth is entirely structural, never decorative. The closest decorative effect is the cyan glow on the focus ring (`0 0 0 3px rgba(36, 158, 220, 0.35)`), which only appears on keyboard focus.

## 8. Interaction & Motion

### Easing Curves
- **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for color, border, opacity transitions.
- **Emphasized ease**: `cubic-bezier(0.16, 1, 0.3, 1)` — section-on-scroll reveals, mockup pan-in, snowflake glyph rotation.

### Duration Buckets
- **Fast (150ms)**: Color transitions on hover, focus ring expansion, link hover.
- **Standard (240ms)**: Card hover lift, button press feedback, dropdown opens, marketplace tile hover.
- **Slow (360ms)**: Mockup pan-in, modal entrance, hero illustration reveal, snowflake glyph slow rotation.

### Per-Component Micro-States
- **Button hover (primary pill)**: Background brightens from `#249EDC` → `#3DB5E8` over 150ms; no transform — the pill shape is the brand, transform would distort the signature.
- **Button press (primary pill)**: Background drops to `#1A82B8` over 100ms.
- **Button hover (secondary pill)**: Border thickens from 1px → 1.5px (effective via inset box-shadow); text color shifts from `#000000` → `#1A82B8`.
- **Card hover (feature)**: Card lifts via `translateY(-2px)` over 240ms; shadow intensifies to elevated.
- **Marketplace tile hover**: Card lifts `translateY(-2px)`; border shifts from `#D8DFE5` → `#249EDC`; provider logo subtly desaturates by 20%.
- **Link hover**: Text color shifts from `#1A82B8` → `#0F2A3A` over 150ms; underline thickens from 1px → 2px.
- **Input focus**: Border recolors from `#D8DFE5` → 2px `#1A82B8` over 150ms; outer 3px ring at 35% alpha appears.
- **Snowflake glyph idle**: Subtle 360° rotation over ~40s (one full rotation), paused on hover and under reduced-motion.

### Page Transitions
Standard browser navigation. Section-on-scroll reveals are a 360ms fade-in-up (24px offset) gated by `IntersectionObserver`. Pricing tier cards stagger in left-to-right with 80ms increments. Snowsight mockups inside hero bands animate via subtle parallax (-3% vertical translate on scroll). Snowflake glyph watermark fades in at 6% opacity over 600ms on first scroll.

### Reduced Motion
`prefers-reduced-motion: reduce` honored: all transforms removed, transitions reduced to opacity-only at 120ms, parallax disabled, card hover lifts removed (cards stay flat), snowflake glyph rotation paused. Marketplace tile hover keeps only the border color change.

## 9. Accessibility & A11y

### Contrast Pairs
- **Text on bg**: `#000000` on `#ffffff` = **21.0** — AAA at every size. Maximum contrast — pure black on white is verified live.
- **Charcoal on bg**: `#111111` on `#ffffff` = **18.9** — AAA.
- **Slate on bg**: `#2A2A2A` on `#ffffff` = **13.6** — AAA.
- **Steel on bg**: `#444444` on `#ffffff` = **9.7** — AAA.
- **Stone on bg**: `#6B6B6B` on `#ffffff` = **5.0** — AA at body sizes; do not use below 14px.
- **On-deep on bg-deep**: `#ffffff` on `#0F2A3A` = **13.4** — AAA.
- **On-brand on brand**: `#ffffff` on `#249EDC` = **3.2** — AA Large at button-md (15 / 700) and larger. Button labels meet the threshold; smaller "white-on-cyan" would fail. For any text-on-cyan below 18px, the system substitutes `brand-deep` `#1A82B8` which lifts contrast to 5.0.
- **On-brand-deep on brand-deep**: `#ffffff` on `#1A82B8` = **5.0** — AA at body sizes.
- **Link on bg**: `#1A82B8` on `#ffffff` = **5.0** — AA.
- **Hover link on bg**: `#0F2A3A` on `#ffffff` = **13.4** — AAA.

### Focus Indicators
On light surfaces, every focusable element shows a **3px outer ring at 35% alpha** `rgba(36, 158, 220, 0.35)` with 2px offset. The semi-transparent cyan ring is visible against white without dominating. On deep navy surfaces, the ring switches to 2px solid `#ffffff` with 2px offset — solid white reads cleanly on the navy ground where the cyan glow would blend in.

### ARIA Patterns
- **Buttons**: Native `<button>` elements; `aria-label` only when icon-only (e.g., snowflake-glyph-only nav home).
- **Pricing comparison table**: `<table>` with `<thead>` and `<th scope="row">`. The featured-tier cyan-ring is reinforced with `aria-label="Most popular plan"` on the column header.
- **Marketplace tile grid**: `<article>` for each tile with `aria-labelledby` referencing the product title. Category filter rail uses `aria-live="polite"` for active filter announcement.
- **Code blocks**: `<pre><code>` with `aria-label` describing the language ("Snowflake SQL example", "Snowpark Python example").
- **Navigation**: `<nav aria-label="Primary">`; mobile drawer uses `aria-expanded` on the trigger.
- **Snowsight mockup**: Wrapped in `<figure>` with `<figcaption>` describing the dashboard view.

### Keyboard Navigation
Tab order follows visual reading order. Skip-link at top of every page jumps to `<main>`. Mobile nav drawer traps focus when open; Escape closes. Marketplace category filter rail is keyboard-navigable; arrow keys move within the rail, Enter toggles. Pricing comparison table is keyboard-navigable across columns.

### Screen Reader Hints
Snowsight mockups use descriptive `alt` text describing the dashboard ("Snowsight dashboard showing warehouse usage, query history, and credit consumption"). The snowflake glyph in nav uses `aria-label="Snowflake home"`. Code blocks include `<span class="sr-only">Code example:</span>` prefixes. Customer logos use `alt="Adobe customer logo"` style labels — never decorative-only on the credibility strip.

### Reduced Motion Handling
All transforms removed. Card hover lifts removed. Marketplace tile lift removed (only border color change preserved). Snowsight mockup parallax disabled. Snowflake glyph rotation paused.

## 10. Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Hero h1 64→36px; mockup stacks below type column; nav collapses to hamburger; pricing tier grid stacks 1-up; marketplace grid 1-up |
| Tablet | 640–1024px | Hero h1 48px; mockup right-aligned; 3-up feature grid stays; pricing tier grid 2-up; marketplace grid 2-up with category filter as drawer |
| Desktop | 1024–1280px | Full hero h1 64px; 3-up feature grid; 4-up pricing; 4-up marketplace with left-rail filter |
| Wide | > 1280px | Content caps at 1280px; outer breathing room expands |

### Touch Targets
- Primary CTA pill: 48px height (14px padding × 2 + 15px line-height × 1.3 + ample touch area). Meets WCAG AAA. The pill geometry naturally hits the 44px minimum without intervention.
- Marketplace tile CTAs: full-width pill on mobile.
- Pricing comparison row tap targets: 44px minimum via padding.
- Snowflake glyph in nav: 44×44px touch target even though visual size is smaller.

### Collapsing Strategy
Top nav collapses to hamburger below 1024px. 3-up feature grid: 3 → 2 → 1. Pricing tier grid: 4 → 2 → 1; comparison table converts to horizontally-scrollable swipe at <1024px with sticky plan headers. Marketplace category filter becomes a drawer (slide-in from left) on tablet/mobile.

### Image Behavior
Snowsight mockups retain native aspect ratios; horizontal scroll preserved on mobile. Customer logos stay at native widths; logo strip wraps to 3×2 on mobile from 6-up. Marketplace tile thumbnails maintain 1:1 across breakpoints.

## 11. Content & Voice

### Tone
**Calm, credible, data-utility-for-grown-ups.** Snowflake writes for data engineers, analytics leaders, CIOs, and increasingly AI/ML practitioners. Headlines describe outcomes ("Mobilize Your Data", "The AI Data Cloud") rather than features, set in Texta 64/900 broadsheet weight that lends them newspaper-mast authority. Body copy supports with concrete capability statements and named customer proof. The voice avoids both "magic" framing and dry enterprise jargon — it sits between Databricks's confident technical density and AWS's restrained enterprise authority. Marginally more friendly than Databricks; significantly less playful than MongoDB.

### Microcopy Patterns
- **CTA verbs**: "Start for Free", "Get Started", "Talk to an Expert", "View Pricing", "Read the Docs". The "Free" qualifier appears prominently — the 30-day trial is genuinely robust ($400 in credits) and the marketing leans into that.
- **Section labels**: 12px micro-uppercase eyebrow at 0.08em tracking, Texta 700 — "AI DATA CLOUD", "MARKETPLACE", "CORTEX AI", "SNOWPARK".
- **Marketplace product titles**: Provider-led — "Capital One — Slingshot for Snowflake" not "Slingshot". The provider attribution is part of the trust signal.
- **Summit 26 event chip**: Lighter cyan `#45AEE3` pill with white text — the one place the secondary cyan lives.

### Empty States
Where empty states appear (marketplace search, pricing calculator, query examples), the recipe is: a single line in `text-stone` ("No data products match 'foo' — try a broader category") with a brand-deep link to the full Marketplace.

### Error Messages
Pattern: short, declarative, action-oriented. "Connection refused — verify your IP allowlist in Snowsight" not "Oops!". Errors carry an icon-x in `#D8333C` and inline guidance with a code snippet for resolution where applicable.

### Success Confirmations
Single-line toast in `text` color over `surface` background with a `semantic-success` (`#16A672`) accent stripe at the left. "Warehouse resumed" not "Success!".

### CTA verb conventions
The brand prefers simple, declarative present-imperative: "Start for Free", "Get Started", "Talk to an Expert", "View Pricing". Pricing CTAs add specificity: "Start Your Free Trial", "Calculate Your Costs", "Contact Sales". The "Free" qualifier is intentionally prominent everywhere — the 30-day, $400-credit trial is the brand's lead conversion mechanism.

## 12. Dark Mode & Theming

Snowflake ships a **dual-mode brand by section, not by user preference**. There is no light/dark toggle on snowflake.com — instead, hero bands and footers ship in deep navy (`#0F2A3A` / `#091C28`) while documentation, marketing, marketplace, and pricing pages stay white. The dual-mode is structural to the brand identity rather than a theme. The deep navy is used for emphasis and bookending, not as a global ground.

The in-product **Snowsight console** ships its own dark/light theme system (separate from this marketing spec), behind login. The marketing site doesn't expose those theme tokens. Snowsight's dark theme uses `#0F1419` ground rather than the marketing `#0F2A3A` — the in-product palette is calibrated for long-session terminal-style work, not for marketing emphasis.

If a future marketing-wide dark theme ships, the natural mapping would be: bg → `#091C28`, text → `#ffffff`, surface → `#0F2A3A`, border → `#1B3F55`, code-block stays `#0F2A3A` (it's already navy), brand stays `#249EDC`. Pricing tier cards and marketplace tiles would need a darker variant — `#0F2A3A` background with `#1B3F55` border. The cyan brand would need no adjustment — `#249EDC` on `#091C28` meets AAA at large sizes.

## 13. Lineage & Influences

Snowflake descends from the **enterprise data-warehouse marketing tradition** — AWS Redshift's enterprise-blue palette (which Snowflake displaced as the cloud-native default), Oracle and Teradata's deep-navy authority, and the more recent Stripe-influenced documentation-as-product canon. The signature deeper cyan brand color (`#249EDC`) is Snowflake's own contribution to the genre — there's no clear precedent for "saturated cyan as primary data-warehouse CTA color." Most enterprise data brands stay in deep navy (Oracle, IBM, Teradata) or charcoal (Databricks); Snowflake's saturated cyan reads as deliberately *post-Oracle*, more SaaS than mainframe, but the deeper saturation keeps it from drifting into consumer-friendly territory.

The dual-mode brand (white middle, deep navy bookends) traces back to AWS's marketing pages and to MongoDB's deep-teal-hero pattern, but Snowflake's commitment is to a predominantly white surface with deep navy used for emphasis — the opposite weighting of MongoDB's structural dual-mode where hero bands carry the brand. Snowflake's customer-logo-heavy cadence borrows from Salesforce and ServiceNow's enterprise-credibility playbook, where named Fortune 500 logos do the heavy lifting before any product copy appears.

The choice of **Texta at weight 900** is one of Snowflake's most distinctive moves. Texta is from Latinotype (Santiago, Chile), a geometric humanist sans with rounded terminals and a genuinely heavy black weight that Inter doesn't replicate. This places Snowflake in a different typographic neighborhood than Inter-running peers (Vercel, Linear, Stripe) — the Texta black gives the brand a broadsheet quality, like a Sunday-paper masthead rather than a SaaS hero. Third-party brand-spec sites that claim Snowflake runs on Inter are wrong; Texta is the live brand face verified 2026-05-28.

The **45–48px pill geometry on every CTA** is Snowflake's most counter-intuitive choice. The modern-SaaS playbook (Stripe's 6px, Linear's 8px, Vercel's 8px) has converged on slightly-rounded corners that read as "design-forward." Snowflake stays committed to the full pill, which lands the brand closer to payment-rail confidence (Stripe also uses pill on primary CTAs) than to developer-tools modernism. The contrast with Databricks (8px corners) is the most direct enterprise-data peer comparison.

The snowflake glyph itself is the brand's most distinctive visual element. The six-fold geometric mark scales from favicon to billboard without losing recognition — comparable in functional terms to MongoDB's leaf, Stripe's slash, or Cloudflare's orange. Among direct competitors: Databricks's flame mark is more aggressive and warmer; MongoDB's leaf is more organic and friendlier; Confluent's stream-mark is more abstract. Snowflake's glyph sits in the "credible technical infrastructure" register.

The brand's positioning has evolved through three eras: "the data warehouse for the cloud" (pre-IPO), "the data cloud" (2020 IPO through 2024), and the current "the AI Data Cloud" (2024–present). The visual identity has held remarkably stable across this evolution — the cyan (in current `#249EDC` saturation), the snowflake glyph, the white canvas, the deep navy emphasis bands, the Texta black-weight typography, and the pill CTA geometry are all unchanged.

- **Databricks** — Direct competitor in the data-lakehouse category; the orange-on-charcoal foil that makes Snowflake's restrained cyan-on-white legible by contrast. https://www.databricks.com
- **MongoDB** — Database-product peer with the dual-mode structural brand and a distinctive product-color signature (green pill vs Snowflake's cyan pill — both committed to pill geometry). https://www.mongodb.com
- **AWS** — The cloud platform Snowflake runs on (and the Redshift product Snowflake displaced as the default cloud warehouse). Snowflake borrows the dual-mode brand pattern from AWS's marketing. https://aws.amazon.com
- **Confluent** — Streaming-data peer with a similarly enterprise-blue palette; Snowflake's saturated cyan distinguishes against Confluent's deeper, navier brand blue. https://www.confluent.io
- **Latinotype (Texta)** — The Chilean type foundry behind Texta — the geometric humanist sans Snowflake runs at weight 900 on every display headline. https://www.latinotype.com

## 14. Do's and Don'ts

### Do
- Use **Snowflake Cyan (`#249EDC`)** as the single brand signal — every primary CTA, every active state, every brand moment. This is the DEEPER cyan, verified 2026-05-28 — NOT the lighter `#29B5E8` that some third-party brand-asset sites cite.
- Use **white text on the cyan pill** at button-md sizes (15px / 700+). The 3.2 AA Large contrast meets WCAG for buttons of this weight.
- Use **pill radius (45–48px effective)** on every primary, secondary, and ghost button — square corners or modern-SaaS 8–12px corners are wrong. The pill is the brand's geometric commitment.
- Use **Texta** (Latinotype) on every display and body — NOT Inter, NOT Helvetica. Texta is the live brand face.
- Run **display headlines at weight 900 (BLACK)** — the heavy weight is the brand's broadsheet signal. 700 only kicks in below `heading-1` (44px).
- Use **pure black `#000`** for body text on white — the brand commits to maximum contrast.
- Anchor major marketing pages with a **white hero band**; reserve deep navy hero bands for campaign moments (Summit 26, AI Data Cloud, enterprise).
- Use **JetBrains Mono** on every code surface — Snowpark Python, SQL examples, fenced blocks.
- Apply **0.08em tracking** on micro-uppercase eyebrow labels (wider than peer brands — enterprise-formal).
- Use the soft cyan (`#C6E6F6`) for marketplace category tags and "NEW / GA" badges, with brand-dark (`#0F2A3A`) text.
- Reserve the **secondary cyan `#45AEE3`** for the Summit 26 event chip and similar lighter-pair moments — never as a primary brand color.
- Keep button labels at **Texta 15 / 700** — slightly larger than peer brands, calibrated to hold weight against the cyan pill ground.
- Apply **navy-tinted shadows** `rgba(15, 42, 58, X)` rather than pure-gray shadows.
- Use the **snowflake glyph + "Snowflake" wordmark** pairing in the nav — never the glyph alone except as a favicon or loading spinner.
- Anchor every product page with **named customer logos** (Square, Adobe, Capital One, Pfizer, EA).
- Use **brand-deep (`#1A82B8`)** for any text-on-cyan below 18px — the vivid `#249EDC` fails AA at body sizes.

### Don't
- Don't use the lighter `#29B5E8` swatch from third-party brand-asset sites. The live brand cyan is `#249EDC` — deeper, more saturated.
- Don't put near-black text on the cyan pill. Snowflake uses **white-on-cyan**, opposite of MongoDB's near-black-on-green calibration.
- Don't use sharp corners or modern-SaaS 8–12px corners on CTAs. Every primary, secondary, and ghost button is **full pill** (45–48px effective radius). The pill is non-negotiable.
- Don't substitute Inter for Texta. Inter's hairline-uniform stroke and lack of a true black weight changes the brand voice entirely. Texta's heavy 900 black is what gives Snowflake its broadsheet register.
- Don't drop hero headlines to weight 700 or below. Display runs at **900** all the way through `heading-1`.
- Don't use a warm-navy ink for body text. Body is **pure black `#000`** on white — verified live.
- Don't use the vivid `#249EDC` as a body-text link color — it fails AA at body sizes. Use `#1A82B8` (brand-deep).
- Don't introduce a serif. The single-family Texta discipline (with JetBrains Mono for code) is the brand.
- Don't use the secondary `#45AEE3` as a primary brand cyan. It's reserved for the Summit 26 chip and similar lighter-pair moments.
- Don't apply box-shadow elevation on deep navy canvases — shadows are invisible. Use `#0F2A3A` → `#091C28` brightness-step.
- Don't repeat the deep-navy hero treatment in two consecutive bands. Cadence requires alternation: white hero → 3-up feature → soft-cyan callout → deep navy CTA.
- Don't use the use-case accent palette (coral, violet, emerald, amber) outside use-case illustrations.
- Don't bold body text beyond 500. Body emphasis goes to weight 500 — never 600+ (heading weights only).
- Don't add a gradient to the snowflake glyph. The mark is single-color cyan on white, white on deep navy, never gradient.
- Don't crowd the cyan pill — one primary CTA per viewport. Two cyans in one band desaturates the brand signal.
- Don't tighten the 0.08em tracking on uppercase labels. The wide tracking is the enterprise-formal signal.

## 15. Agent Prompt Guide

### Quick Color Reference
```
Bg / Canvas:     #ffffff (white — homepage, docs, pricing, marketplace, blog)
Bg Deep:         #0F2A3A (deep navy — campaign hero, pre-footer CTA)
Bg Midnight:    #091C28 (deeper navy — footer ground)
Text:            #000000 (PURE BLACK — verified live; no warm-navy softening)
Charcoal:        #111111 (secondary headings)
Slate:           #2A2A2A (sub-titles)
Stone:           #6B6B6B (captions)
Brand:           #249EDC (Snowflake Cyan — DEEPER than the commonly-cited #29B5E8. Verified 2026-05-28.)
Brand Light:     #45AEE3 (secondary cyan — Summit 26 chip only)
Brand Bright:    #3DB5E8 (hover lift)
Brand Deep:      #1A82B8 (pressed, focus ring, link text at body sizes)
Brand Dark:      #0F2A3A (link hover, deep hero ground — same hex as bg-deep)
Brand Soft:      #C6E6F6 (marketplace tags, NEW/GA badges)
Brand Wash:      #DFEFF9 (soft cyan callout wash)
On-Brand:        #ffffff (WHITE on Snowflake Cyan)
Surface:         #f5fafd (subtle cyan-tinted nested surface)
Border:          #D8DFE5 (1px hairline — cool gray)
Link:            #1A82B8 (brand-deep — AA at body sizes)
```

### Example Component Prompts

1. "Create a homepage hero on `#ffffff` white canvas with **Texta 64px / weight 900 / -0.02em tracking** pure-black headline `#000000` ('The AI Data Cloud'), 18px / 400 `#444444` subhead in Texta Book, primary **cyan pill CTA** (`#249EDC` bg, `#ffffff` text, **full pill radius 45–48px**, 14×28px padding, button-md weight 700 at 15px Texta) and secondary outline pill button (transparent, `#000000` text, 1px `#B0BBC4` border, same pill radius). 120px vertical padding. Snowflake glyph at 6% opacity as decorative watermark behind type. Customer logo strip (Square, Adobe, Capital One, Pfizer, EA, NBC) below at 96px margin. DO NOT use Inter or Helvetica — Texta is the brand face."

2. "Build a 3-up feature grid on `#ffffff` canvas: each card on `#ffffff`, 12px md radius, 32px padding, 1px `#D8DFE5` border. Each card carries a cyan glyph icon (`#249EDC`), heading-3 title in **Texta 24 / 700**, body-md description in **Texta 16 / 400 pure black `#000`**."

3. "Compose a 4-tier pricing comparison: Standard / Enterprise / Business Critical / Virtual Private. Each card 12px md radius, 32px padding, 1px `#D8DFE5` border (Enterprise tier shifts to `#f5fafd` background AND border thickens to 2px solid `#249EDC` cyan ring — that ring IS the 'most popular' signal, no badge text). Plan name in heading-4 (Texta 20/700), price/credits in heading-1 (**Texta 44/900/-0.015em — full black weight on the price**), feature checklist in body-md, full-width **cyan pill CTA** at bottom (45–48px radius)."

4. "Design a Snowflake Marketplace tile: `#ffffff` background, 12px md radius, 24px padding, 1px `#D8DFE5` border. Provider logo top-left, category tag **pill** (`#C6E6F6` bg, `#0F2A3A` text, full pill radius, 4×12px padding, micro-uppercase Texta weight 700 at 0.08em tracking) top-right, product title in heading-4 (Texta 20/700), body-sm description, 'Get' CTA in cyan ghost pill form. Tile hover: lifts `translateY(-2px)`, border shifts to `#249EDC`, provider logo desaturates 20%."

5. "Create a code block for Snowpark Python: `#0F2A3A` deep navy background, white text in JetBrains Mono 14px / 400 / 1.55 line-height, 8px sm radius (tighter than card md), 20px padding. Inline code in body uses `#0F2A3A` text on `#eaf4fb` background, JetBrains Mono 13px, 4px micro radius, 2×6px padding."

6. "Build a top nav: 72px tall sticky white bar with cyan snowflake glyph (`#249EDC`) + 'Snowflake' wordmark left (**Texta 18 / 700**), horizontal menu (Platform / Solutions / Pricing / Resources / About) center in body-md-medium Texta (`#000000`), 'Sign In' text link + **cyan pill 'Start for Free' button** right (full pill, 45–48px radius). Stays white on every page including deep navy campaign hero pages."

7. "Compose a pre-footer CTA band: `#0F2A3A` deep navy ground, white text, 96px vertical padding. Headline in heading-1 (**Texta 44/900**), subhead in body-lg Texta Book (`#B6D2E2`), primary **cyan pill CTA** (`#249EDC` bg stays the same — no color or shape shift on deep navy, 45–48px radius) + secondary outline-on-deep pill button (transparent, white text, 1px `#1B3F55` border, same pill)."

8. "Add a Summit 26 event chip on the homepage hero: lighter cyan **`#45AEE3`** bg (the secondary cyan — the ONE place this color lives), white text, full pill radius, 6×14px padding, type micro-uppercase Texta 12 / 700 / 0.08em tracking. Reads 'SNOWFLAKE SUMMIT 26 — JUNE 2-5 SAN FRANCISCO'."

### Iteration Guide
1. **Start with the white canvas as default.** Deep navy (`#0F2A3A`) is for emphasis bookends only — opening hero (campaign pages only) and pre-footer CTA.
2. **One Snowflake Cyan per viewport.** Two cyans in one band desaturates the brand signal. The cyan should always read as a single destination.
3. **The cyan is `#249EDC` — DEEPER than the commonly-cited `#29B5E8`.** Verified live 2026-05-28. Use the deeper saturation; the lighter swatch reads wrong on the white canvas.
4. **White text on cyan pill CTAs, not near-black.** Snowflake's calibration is opposite to MongoDB's. The white-on-cyan is the enterprise-convention signal.
5. **Use full pill radius (45–48px) on every CTA — never 8px, never 12px corners.** Pill geometry is the brand's most counter-intuitive commitment given modern-SaaS's pull toward slightly-rounded rects. Snowflake stays on pill.
6. **Texta at weight 900 on display headlines, NOT Inter.** Texta is the live brand face from Latinotype. The black weight is the broadsheet signal — third-party brand-spec sites claiming Inter are wrong.
7. **Pure black `#000` body text on white.** No warm-navy softening — Snowflake commits to maximum contrast.
8. **Customer logos before product copy.** Named Fortune 500 logos (Square, Adobe, Capital One, Pfizer, EA) are the brand's credibility lever.
9. **Use JetBrains Mono on every code surface — no system fallback at the first level.** The mono separation is the developer-trust contract.
10. **Headings step down from 900 to 700 below 44px.** The 900 weight holds through `heading-1`; `heading-2` and below drop to 700.
11. **0.08em tracking on uppercase eyebrow labels.** Wider than peer brands — enterprise-formal.
12. **Navy-tinted shadows, never pure-gray.** `rgba(15, 42, 58, X)` keeps shadow temperature consistent with the brand.
13. **The snowflake glyph is the brand's most distinctive asset.** Use it as logomark, watermark, divider, loading spinner — single-color, never gradient, never alone in nav without the wordmark.
14. **Reserve the secondary cyan `#45AEE3` for the Summit 26 event chip only.** It's the lighter-pair moment, not a primary brand color.

---

*Theme-toggle audit: score=0, signals=[none]*