---
version: alpha
name: Snowflake
description: Enterprise data cloud design language — white and deep-navy dual surfaces, signature Snowflake Blue accent, Texta Black display headings with uppercase transforms, generous pill-radius buttons, and a deliberate all-caps labeling pattern throughout.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f2f5f8"             # light cool-gray card surface
  surface-blue: "#76d0f1"        # pale ice-blue surface — CSS var --text-06

  # Dark surfaces (deep navy)
  background-dark: "#0d1b2a"    # CSS var --color-bg-dark — deepest navy hero
  background-dark-raised: "#1b2e42"  # CSS var --color-bg-dark-raised — elevated dark surface

  # Text / ink
  ink: "#000000"
  ink-secondary: "#535862"       # cool slate-gray secondary text
  ink-muted: "#666666"           # tertiary text
  ink-inverted: "#ffffff"        # text on dark surfaces
  on-primary: "#ffffff"

  # Brand accent
  primary: "#29b5e8"             # Snowflake Blue — extracted from _raw palette; canonical brand hue
  primary-mid: "#249edc"         # hover / border variant of brand blue
  primary-deep: "#11567f"        # CSS var --color-text-link — dark link / dark-bg text accent
  primary-light: "#76d0f1"       # CSS var --text-06 — pale ice tint used on dark surfaces

  # Interaction states
  primary-hover: "#1f86bb"       # dembrandt hover of #249edc
  text-hover: "#249edc"          # nav link color-shift-to value on hover

  # Semantic
  success: "#4ade80"             # live badge green (rgb 74,222,128)
  border: "#cdcdcd"              # 1px solid border on inputs, opaque approx of rgb(205,205,205)
  border-card: "#cccccc"         # card/div border, opaque approx of rgba(204,204,204,0.5) over white — Google format requires hex
  border-blue: "#249edc"         # active border / button outline blue

  # Shadow tints
  shadow-soft: "#98a2b3"         # opaque approx of rgba(152,162,179,0.1) — Google format requires hex
  shadow-medium: "#98a2b3"       # same base hue at 0.25 opacity level — Google format requires hex

  # Tag / badge tints
  tag-blue-bg: "#b8e7f8"         # opaque approx of rgba(118,208,241,0.3) over white — Google format requires hex
  tag-bg-light: "#ecf1f5"        # blog card tag neutral background

typography:
  display-hero:
    fontFamily: "Texta, Helvetica Neue, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 900
    lineHeight: 0.84
    letterSpacing: 0px

  display:
    fontFamily: "Texta, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 900
    lineHeight: 0.82
    letterSpacing: 0px

  heading-section:
    fontFamily: "Texta, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: 0px

  heading-large:
    fontFamily: "Texta, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0px

  heading-sub:
    fontFamily: "Texta, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px

  body-large:
    fontFamily: "Lato, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

  body:
    fontFamily: "Lato, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px

  nav-link:
    fontFamily: "Lato, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px

  button-ui:
    fontFamily: "Texta, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0px

  label-uppercase:
    fontFamily: "Lato, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.2px

  caption:
    fontFamily: "Lato, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    border: 1px solid {colors.primary}
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    border: 1px solid {colors.primary-hover}

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    border: 1px solid {colors.background}
  button-secondary-hover:
    backgroundColor: "{colors.surface}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    border: 1px solid {colors.ink}
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-ghost-blue:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-mid}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    border: 1px solid {colors.primary-mid}
  button-ghost-blue-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    padding: 24px
    border: 1px solid {colors.border-card}

  card-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.md}"
    padding: 24px

  badge-tag:
    backgroundColor: "{colors.tag-blue-bg}"
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.xs}"
    padding: 6px

  badge-neutral:
    backgroundColor: "{colors.tag-bg-light}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 3px 6px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"  # was {colors.ink-inverted} (#ffffff) — white on white background = 1:1; {colors.ink} (#000000) = 21:1
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 18px
    border: 1px solid {colors.border}
  input-focus:
    border: 1px solid {colors.primary}
    backgroundColor: "{colors.background-dark-raised}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  nav-bar-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
---

# Snowflake Design System

## Overview

Snowflake's design language is enterprise data made luminous. The system pivots between two distinct modes: a clean arctic white (`{colors.background}`) for informational and product sections, and a deep nautical navy (`{colors.background-dark}`, `{colors.background-dark-raised}`) for hero sections and data-cloud showcases. The dualism isn't arbitrary — white communicates openness and scalability, while the dark navy grounds the brand in the gravitas of infrastructure. The effect is of looking through a portal into a vast, controlled data environment.

The typographic backbone is Texta — a commercial geometric sans-serif with extreme weight range. On snowflake.com, Texta almost exclusively appears at Black (900) weight in full uppercase, resulting in display headlines that feel stamped rather than set, engineered rather than designed. Paired with this is Lato for all body and navigation text — the combination keeps the brand voice assertive at scale while remaining legible at reading sizes. Uppercase transforms at 88px with line-height 0.84 create condensed, poster-like text towers that are a direct visual reference to data density.

The signature interaction color is Snowflake Blue (`{colors.primary}`, `{colors.primary-mid}`) — a bright cyan-leaning sky blue that appears as the exclusive CTA color, active border indicator, hover state for navigation links, and badge text. This singular hue is applied with discipline: it marks every actionable surface and nothing else. Pill-shaped buttons (45–48px border-radius) give the UI a notably approachable edge for an enterprise product, contrasting with the heavy uppercase headlines in a way that communicates both power and accessibility.

**Key Characteristics:**
- Dual-mode surfaces: white light canvas + deep navy (`{colors.background-dark}`) for hero/product sections
- Texta Black 900 weight with uppercase transforms on all display and section headings
- Lato for body, nav, and UI text — clean, readable, workhorse sans
- Snowflake Blue (`{colors.primary}`) as the sole CTA and interactive accent
- Pill buttons (border-radius 45px) across all CTA variants — soft edges on hard data
- Dark navy CSS variables (`--color-bg-dark`, `--color-bg-dark-raised`) for layered dark surfaces
- Pale ice-blue tint (`{colors.primary-light}`) exposed as `--text-06` for overlay and surface tint use on dark
- Uppercase labels (12px, weight 700, 1.2px letter-spacing) as the systematic tagging/categorization pattern
- Dual-layer low-alpha card shadows using `{colors.shadow-soft}` as the tint base
- Tag/badge system using light blue-tint backgrounds for content categorization on blog and resource cards

## Colors

### Surfaces
- **White** (`{colors.background}`): Primary light canvas. Everything informational sits here.
- **Cool Gray** (`{colors.surface}`): Subtle card and row backgrounds on light sections.
- **Deep Navy** (`{colors.background-dark}`): Hero sections, CTAs, dark promotional strips. CSS var `--color-bg-dark`.
- **Navy Raised** (`{colors.background-dark-raised}`): Elevated dark surfaces, interactive dark cards. CSS var `--color-bg-dark-raised`.

### Brand Accent
- **Snowflake Blue** (`{colors.primary}`): The brand's single chromatic anchor. Primary CTAs, active borders, hover link states.
- **Blue Mid** (`{colors.primary-mid}`): Button borders, ghost-button outlines, interactive borders.
- **Blue Deep** (`{colors.primary-deep}`): Text links on light, white-button text labels. CSS var `--color-text-link`.
- **Ice Tint** (`{colors.primary-light}`): Pale blue overlay tint used on dark backgrounds. CSS var `--text-06`.
- **Blue Hover** (`{colors.primary-hover}`): Button hover darkening of brand blue.

### Text
- **Black** (`{colors.ink}`): Body text on light surfaces.
- **Slate** (`{colors.ink-secondary}`): Secondary descriptive text, captions.
- **Mid Gray** (`{colors.ink-muted}`): Tertiary text, meta labels.
- **White** (`{colors.ink-inverted}`): Text on all dark surfaces.
- **Nav Hover** (`{colors.text-hover}`): Navigation links shift to brand blue on hover.

### Semantic & Decoration
- **Success Green** (`{colors.success}`): Live badge indicator dots.
- **Tag Blue Bg** (`{colors.tag-blue-bg}`): Content tag/badge background (tinted blue, opaque approx of rgba(118,208,241,0.3) over white — Google format requires hex).
- **Tag Neutral Bg** (`{colors.tag-bg-light}`): Secondary tag background, light gray-blue.

### Borders & Shadows
- **Border** (`{colors.border}`): Standard 1px input and container border.
- **Border Card** (`{colors.border-card}`): Card and section divider borders.
- **Border Blue** (`{colors.border-blue}`): Active/focus state border for inputs and selected tabs.
- **Shadow Soft** (`{colors.shadow-soft}`): Dual-layer card shadow tint. Opaque approx of rgba(152,162,179,0.1/0.25) — Google format requires hex.

## Typography

### Font Families
- **Texta** (licensed, loaded as custom webfont): Geometric sans with extreme weight range. Used exclusively for display and heading text. Closest Google Fonts analog: `Barlow`, weight 800–900.
- **Lato** (Google Fonts): Humanist sans. Used for body, navigation, forms, and captions.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 88px Texta 900 uppercase — campaign hero titles |
| `display` | 64px Texta 900 uppercase — major section headers |
| `heading-section` | 48px Texta 900 uppercase — section breaks |
| `heading-large` | 40px Texta 900 — large subheadings, sometimes mixed case |
| `heading-sub` | 28px Texta 700 — card titles, feature names |
| `body-large` | 20px Lato 400 — hero subtitles, intro copy |
| `body` | 16px Lato 400 — default body, card descriptions |
| `nav-link` | 16px Lato 500 — navigation, inline links |
| `button-ui` | 16px Texta 800 — all CTA button labels |
| `label-uppercase` | 12px Lato 700 with 1.2px tracking — tag badges, category labels |
| `caption` | 12px Lato 400 — fine print, metadata |

### Principles
- **Uppercase as authority**: Texta Black 900 with `text-transform: uppercase` is the signature Snowflake typographic move. Headlines aren't set in lowercase or title-case — they're set in uppercase as stamps.
- **Extreme weight contrast**: Texta 900 for display, Lato 400 for body — there's no middle ground. This binary weight system makes hierarchy instantly legible.
- **Compressed line-heights on display**: `line-height: 0.82–0.92` for large headings creates densely stacked text that mirrors data compression — the visual metaphor is intentional.
- **Lato as the workhorse**: Every non-heading surface uses Lato. Its humanist letterforms soften the heavy uppercase Texta headings and keep reading comfortable at paragraph length.
- **Button text is Texta, not Lato**: At 16px weight 800, button labels carry the same assertive tone as headings — CTAs are not afterthoughts.

## Layout

### Spacing System
Base unit: **8px**. Scale in YAML — `xs` (4px) through `4xl` (96px). Snowflake's page sections use generous vertical spacing, typically 64–96px between major sections, creating the "enterprise breathing room" feel common across data-infrastructure brands.

### Grid & Container
- Max content width: approximately 1200–1240px (confirmed via dembrandt breakpoints at 1200px and 1240px)
- Full-width dark-navy hero sections with contained, centered text and CTAs
- Card grids: typically 3-column on desktop, 2-column at tablet
- Left-aligned logo, right-aligned navigation CTAs (start for free, contact)

### Whitespace Philosophy
- **Wide section margins**: 64–96px top/bottom padding in major page sections — data at rest, not hurried
- **Compressed headings, spacious body**: Tight line-height headings (0.82–0.92) above generous body text creates a weighted, authoritative reading pace
- **Card padding**: 24px standard interior padding on both light and dark card variants

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Baseline surfaces, text blocks |
| Card (Level 1) | `rgba(152,162,179,0.1) 0 10px 20px, rgba(152,162,179,0.25) 0 2px 6px` | Standard content cards |
| Elevated (Level 2) | `rgba(0,0,0,0.1) 0 4px 2px -2px` | Sticky nav on scroll |
| Dialog (Level 3) | `rgba(0,0,0,0.2) 0 4px 16px` | Modals, overlays |
| Focus Ring | `rgba(33,150,243,0.3) 0 0 1px` + `1px solid {colors.primary}` border | Input focus states |

**Shadow Philosophy**: Snowflake uses a dual-layer shadow pattern on cards — a wide diffuse layer at very low opacity combined with a tight close shadow at moderate opacity. The tint is cool-gray rather than brand-tinted. The result is an elevation that reads as precise engineering rather than expressive design — depth measured in millimeters, not atmospheres.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Tab active borders, flush elements |
| `xs` | 2px | Small badges, tag indicators, cookie consent UI |
| `sm` | 4px | Input fields, badge/tag containers, select elements |
| `md` | 8px | Cards, image containers, small interactive blocks |
| `lg` | 12px | Larger card containers, content blocks |
| `pill` | 9999px | All CTA buttons — the signature shape element |

The radius vocabulary is binary in practice: functional elements use tight `{rounded.sm}` or `{rounded.md}` corners, while buttons are always fully pill-shaped. This creates a clear visual distinction between data containers (sharp) and actions (soft) — a meaningful semantic signal embedded in shape.

## Components

The complete component spec lives in the YAML block above.

### Button variants
- **`button-primary`** — Snowflake Blue fill with white Texta 800 labels, fully pill-shaped (45px radius, 16px 32px padding). The primary CTA across all sections.
- **`button-secondary`** — White fill with `{colors.primary-deep}` text. Used as lighter-weight action alongside a primary blue button.
- **`button-ghost`** — White fill with black border and black text. Used for secondary actions on light backgrounds ("Skip to content", utility actions).
- **`button-ghost-blue`** — White fill with `{colors.primary-mid}` border and text. Used for "View Customers", "View Sessions" style secondary CTAs alongside a filled primary.

### Cards
- **`card`** — White surface, 8px radius, 1px `{colors.border-card}` border, 24px padding, dual-layer shadow. Standard content and resource cards.
- **`card-dark`** — Deep navy `{colors.background-dark}` surface, white text. Used in product feature sections.

### Badges / Tags
- **`badge-tag`** — Ice-blue tinted background (`{colors.tag-blue-bg}`), uppercase 12px labels with 0.5px tracking. Blog category and resource type tagging.
- **`badge-neutral`** — Light gray-blue background, 2px radius. Compact content tags on advanced cards.

### Inputs
- **`input`** — Default: transparent (appears on dark surface) with white text, 1px low-alpha border, 4px radius, 12px 18px padding.
- **`input-focus`** — Border switches to `{colors.primary}` with blue box-shadow ring. Accessible focus indication.

### Navigation
- **`nav-bar`** — Light mode: white background, black text links. Dark mode: `{colors.background-dark}` with white text. Both use Lato 500, right-side CTAs include one blue filled button ("Start for free") and one ghost ("Contact").

## Do's and Don'ts

### Do
- Use Texta 900 uppercase for all display and section headings — this is the visual identity
- Apply `{colors.primary}` exclusively for CTAs, active borders, and the navigation hover state
- Use pill radius (`{rounded.pill}`) for all interactive buttons without exception
- Maintain the sharp/pill shape dichotomy: data containers use `{rounded.sm}` or `{rounded.md}`, actions use `{rounded.pill}`
- Use `{colors.background-dark}` for hero sections and product spotlights — the navy anchors the data-cloud positioning
- Apply the dual-surface typography split: Texta for brand text, Lato for functional and reading text
- Use `{colors.primary-light}` (the ice tint) only as a surface overlay or decorative element on dark sections
- Match button variants to surface: blue-fill on dark sections, white-fill or ghost on light sections

### Don't
- Don't introduce mid-weight Texta (400–600) — the system is Texta 800–900 for headings, Lato for everything else
- Don't use lowercase Texta on major headings — the uppercase transform is the brand signature
- Don't apply `{colors.primary}` as a background fill for containers or cards — it's an action color, not a surface
- Don't use rounded buttons with less than 40px radius — anything below pill reads as inconsistent
- Don't mix Texta and Lato at the same hierarchy level — keep the role-based split absolute
- Don't use the deep navy (`{colors.background-dark}`) for inline card backgrounds in light-mode sections — reserve it for full-width hero and feature sections
- Don't apply drop shadows heavier than the dual-layer card shadow — the system uses engineering restraint, not expressive depth
- Don't omit uppercase transforms on Texta display text — without the transform, the design loses its core visual characteristic

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, condensed nav, stacked CTAs |
| Mobile | 425–768px | Single column layout, hamburger nav |
| Tablet | 768–1024px | 2-column grids, nav starts expanding |
| Desktop | 1024–1240px | Full layout, mega-nav, 3-column card grids |
| Large Desktop | >1240px | Max-width centered at ~1200px, generous outer margins |

### Touch Targets
- All pill buttons use 16px top/bottom padding, ensuring adequate touch height (~48–52px rendered height)
- Navigation links at 16px Lato 500 maintain comfortable tap zone in hamburger mode

### Collapsing Strategy
- Hero headings compress: 88px → 64px → 48px across breakpoints
- Navigation: mega-menu → sticky condensed bar → hamburger drawer
- Card grids: 3-column → 2-column → single-column stacked
- Dark hero sections maintain full-width at all breakpoints; inner content centers and reflows
- Button pairs: side-by-side → stacked full-width on mobile

### Image Behavior
- Photography and product screenshots use `border-radius: 8px 0 0 8px` or `0 8px 8px 0` for asymmetric card-edge treatment
- Full-width section backgrounds maintain aspect ratio with object-fit cover
- Dark-section illustrations (data mesh, snowflake crystal graphics) scale proportionally within contained widths

---

## Agent Prompt Guide

### Quick Color Reference
- Light canvas: `{colors.background}` / `{colors.surface}`
- Dark hero canvas: `{colors.background-dark}` / `{colors.background-dark-raised}`
- Brand CTA: `{colors.primary}` (#29b5e8)
- Link / button text on white: `{colors.primary-deep}` (#11567f)
- Body text: `{colors.ink}` / `{colors.ink-secondary}`
- Inverted text: `{colors.ink-inverted}`
- Border: `{colors.border}` / `{colors.border-card}`

### Example Component Prompts

- "Create a Snowflake-style hero section on a dark navy background (`{colors.background-dark}`). Display headline at 88px Texta weight 900, uppercase, white, line-height 0.84. Subtext at 20px Lato weight 400, line-height 1.5, white. Two buttons side-by-side: primary filled blue (`{colors.primary}`, `{rounded.pill}`, 16px 32px padding, Texta 800 white) and ghost white border (`{colors.ink-inverted}` border, `{rounded.pill}`, 16px 32px, Texta 800 white text)."
- "Build a Snowflake content card: white background, 8px border-radius, 1px solid `{colors.border-card}` border, dual-layer shadow (`rgba(152,162,179,0.1) 0 10px 20px, rgba(152,162,179,0.25) 0 2px 6px`), 24px inner padding. Title at 28px Texta weight 700. Body at 16px Lato 400 line-height 1.6. A tag badge: `{colors.tag-blue-bg}` background, 12px Lato 700 uppercase with 1.2px letter-spacing, `{rounded.xs}` radius, 6px padding."
- "Design a Snowflake-branded CTA button: `{colors.primary}` fill, white Texta 800 label, `{rounded.pill}` radius, 16px 32px padding, 1px solid `{colors.primary}` border. Hover state: `{colors.primary-hover}` background."
- "Create a Snowflake global navigation bar: white `{colors.background}` strip, left-positioned wordmark logo. Navigation links at 16px Lato 500 `{colors.ink}`, hover shifts link color to `{colors.text-hover}` with 0.3s ease transition. Right side: ghost outline button (border `{colors.ink}`, Texta 800, pill) and filled primary CTA (`{colors.primary}`, Texta 800, pill)."
- "Build a dark-mode data feature section: `{colors.background-dark}` full-width background. Section eyebrow label: 12px Lato 700 uppercase, 1.2px letter-spacing, `{colors.primary-light}` text. Section heading: 48px Texta 900 uppercase, white, line-height 0.92. Feature cards in a 3-column grid: `{colors.background-dark-raised}` surface, white text, 8px radius, 24px padding. Footer CTA row: two pill buttons — filled blue primary and white-border ghost."

### Iteration Guide

1. Decide mode first: white (`{colors.background}`) for product detail, dark navy (`{colors.background-dark}`) for hero and brand moments
2. All display text is Texta 900 uppercase — if it's a heading, it caps; if it's body copy, it's Lato 400
3. Blue (`{colors.primary}`) appears only on interactive elements — never as a background fill for containers
4. All buttons are pill-shaped — `{rounded.pill}` is non-negotiable; use border-color to distinguish filled vs ghost variants
5. Shadows at the dual-layer engineering level — wide diffuse + tight close, cool-gray tint, very low alpha
6. Tag badges use ice-tint backgrounds with uppercase Lato 700 labels — never colored text on white, always tinted-bg + dark text
7. On dark sections, inject ice-blue (`{colors.primary-light}`) as a surface highlight or eyebrow text accent to maintain brand color presence without overwhelming the navy

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Snowflake. Brand names and trademarks belong to their respective owners.