SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from snowflake.com’s public web pages. Not affiliated with or endorsed by snowflake.com. The real site is snowflake.com ↗

snowflake.com logo

Unofficial style guide

snowflake.comstyle guide

snowflake.com’s website (snowflake.com) uses Texta for its headings and body text. Its palette is led by Midnight Blue (#042130), Light Cyan (#D4F0FA) and Dodger Blue (#249EDC), with #000000 text on #FFFFFF. Captured from the live site on 28 October 2026.

Typefaces
Texta, Lato, Space Mono
Palette
4 neutrals, 11 colours, 2 gradients
Captured
28 Oct 2026 · added by @sitestyleguide
https://www.snowflake.com/en/ Screenshot
Screenshot of the snowflake.com homepage on a desktop screen
Screenshot of snowflake.com on a 1440 px desktop screen, 28 Oct 2026.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title
Snowflake AI Data Cloud
● 23 / 60 characters
Meta description
Snowflake powers AI, data engineering, applications, and analytics on a trusted, scalable AI Data Cloud—eliminating silos and accelerating innovation.
● 150 / 160 characters
og:title
The Snowflake AI Data Cloud - Mobilize Data, Apps, and AI
og:description
Snowflake enables organizations to collaborate, build AI-powered data apps, and unlock data insights—all within a secure and scalable AI Data Cloud.
Language
en
Theme colour
#ffffff

In search results

snowflake.comhttps://www.snowflake.com/en/

Snowflake AI Data Cloud

Snowflake powers AI, data engineering, applications, and analytics on a trusted, scalable AI Data Cloud—eliminating silos and accelerating innovation.

When shared

The image snowflake.com shares with links

snowflake.com

The Snowflake AI Data Cloud - Mobilize Data, Apps, and AI

Snowflake enables organizations to collaborate, build AI-powered data apps, and unlock data insights—all with…

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used
  • White 47.5%
  • Black 14.1%
  • Cool Dark Grey 8.2%
  • Light Grey 6.1%
  • Midnight Blue 3.9%
  • Light Cyan 3.6%
  • Dodger Blue 3.6%
  • Royal Blue 2.6%
  • Deep Sky Blue 1.9%
  • Medium Violet Red 1.9%
  • Cadet Blue 1.9%
  • Sky Blue 1.8%
  • Steel Blue 1%
  • Powder Blue 0.8%
  • Light Pink 0.8%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure
  • White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 0
    On text
    21.00:1 AAA
    On white
    —

    Background, text, theme · .solution-center-hero__certification>.snowflake-title-v2-line>span:first-child::, .sf-modes #work-panel .titlebar

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 100
    On text
    —
    On white
    21.00:1 AAA

    Text, background, border · .case-study-25 .snowflake-case-study-card-description p:nth-child(2):not(:has(a), .content-chip--has-desc .snowflake-title-v2-line:nth-child(2)

  • Cool Dark Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    15 10 0 62
    On text
    2.94:1 Fail
    On white
    7.14:1 AAA

    Text · .case-study-25 li, .case-study-25 .snowflake-case-study-card-description p

  • Light Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 20
    On text
    13.08:1 AAA
    On white
    1.61:1 Fail

    Border · .button-tabs .border-top, .nav-item--si

Colours

Brand colours and accents, most used first
  • Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    92 31 0 81
    On text
    1.27:1 Fail
    On white
    16.60:1 AAA

    Background · .section__prefooter-25::after, .platform-diagram .platform-diagram__platform-button:hover

  • Light Cyan

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    15 4 0 2
    On text
    17.64:1 AAA
    On white
    1.19:1 Fail

    Background · inline style on <div>, .agenda-item

  • Dodger Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    84 28 0 14
    On text
    7.00:1 AAA
    On white
    3.00:1 AA large

    Background, text, border · .section--summit-bg-blue, div.overflow-bottom--blue::after

  • Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    87 32 0 50
    On text
    2.66:1 Fail
    On white
    7.89:1 AAA

    Background · .partner-tier-tag.elite h6, div.overflow-bottom--mid-blue::after

  • Deep Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    82 22 0 9
    On text
    8.87:1 AAA
    On white
    2.37:1 Fail

    Background, border · .list--blue-bullets li::before, .ai-summary li::before

  • Medium Violet Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 57 33 31
    On text
    4.17:1 AA large
    On white
    5.04:1 AA

    Background · .partner-tier-tag.premier h6

  • Cadet Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    50 7 0 37
    On text
    6.08:1 AA
    On white
    3.45:1 AA large

    Background · .partner-tier-tag.select h6

  • Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    47 15 0 8
    On text
    11.23:1 AAA
    On white
    1.87:1 Fail

    Text, background · .summit-pricing-block__tile.is-past .black-blue-text-color .snowflake-title-v2-l, .hp-hero__eyebrow a:hover

  • Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    89 26 0 29
    On text
    5.04:1 AA
    On white
    4.16:1 AA large

    Text · .sf-modes .rp-count, .sf-modes td.pk

  • Powder Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    18 2 0 5
    On text
    16.79:1 AAA
    On white
    1.25:1 Fail

    Background · inline style on <div>

  • Light Pink

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 31 18 10
    On text
    9.88:1 AAA
    On white
    2.13:1 Fail

    Background · inline style on <div>

Gradients

  • linear-gradient(to bottom,#fff 0,rgba(255,255,255,.85) 30%,rgba(255,255,255,.45) 60%,rgba(255,255,255,0) 100%)

  • linear-gradient(180deg,#202c35 -7.5%,#fff0 51.25%,#202c35 107.69%)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Texta

Aa 400 Aa 900

Texta

Self-hosted · weights 400, 700, 800, 900 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 900

Lato

Self-hosted · weights 400, 500, 600, 900 · headings · shown in a stand-in if you don’t have it

Aa 700

Space Mono

System font, or not loaded on this page · weights 700 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS
Heading 1 — Texta

snowflake.com

Heading 2 — Texta

Snowflake AI Data Cloud

Heading 3 18px / 1.1 Texta

Snowflake AI Data Cloud

Heading 4 — Texta

Snowflake AI Data Cloud

Heading 5 14px Texta

Snowflake AI Data Cloud

Heading 6 16px Texta

Snowflake AI Data Cloud

Paragraph 10px / 1.1 weight 800 · uppercase · Texta

Snowflake powers AI, data engineering, applications, and analytics on a trusted, scalable AI Data Cloud—eliminating silos and accelerating …

Link 15px / 1.3 weight 400 · Texta

Read more about snowflake.com

Sizes in use

Most common across the site
  • 48pxline .9 · 8 rules
  • 30pxline 1 · 6 rules
  • 18pxline 24px · 9 rules
  • 16pxline 22px · 16 rules
  • 15pxline 1.3 · 7 rules
  • 14pxline 16px · 13 rules
  • 12pxline 16px · 10 rules
  • 10px6 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.button-tabs .snowflake-navigation-container .snowflake-tabs-navigation-item · #F6F9FA · radius 48px

Corner radius

  • 8px · 18×
  • 4px · 12×
  • 16px · 9×
  • 24px · 9×
  • 12px · 7×
  • 100% · 6×

Shadows

  • 0 2px 6px 0 rgba(152,162,179,.25),0 10px 20px 0 rgba(152,162,179,.10)
  • 0 10px 20px 0 rgb(152 162 179 / .1),0 2px 6px 0 rgb(152 162 179 / .25)
  • 2px 4px 10px 0 rgb(156 156 156 / .52)
  • rgba(152,162,179,.1) 0 10px 20px 0

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

767
768
991
992
1023
1024
1200
1367

On a scale of 0 to 1440 px.

Content widths (max-width)

1300 px
520 px
400 px
380 px
350 px
340 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

  • ● FineThe title is 23 characters, short enough to show in full in search results.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does snowflake.com use?
snowflake.com’s website uses two typefaces: Texta (headings and body text), self-hosted; Lato, self-hosted.
What are snowflake.com’s brand colours?
The main colours on snowflake.com are Midnight Blue (#042130), Light Cyan (#D4F0FA), Dodger Blue (#249EDC), Royal Blue (#11567F), Deep Sky Blue (#29B5E8) and Medium Violet Red (#B14C77).
What colour is snowflake.com’s text and background?
Body text is #000000 on a #FFFFFF background.
Where is snowflake.com’s logo from?
The logo shown in this guide was found on snowflake.com’s homepage. For official logo files and usage rules, check snowflake.com’s own brand or press page.
Is this snowflake.com’s official style guide?
No. SiteStyleGuide made it from snowflake.com’s public web pages on 28 October 2026, and isn’t affiliated with snowflake.com. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

snowflake-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* snowflake.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/snowflake.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-dark-grey: #535862;
  --colour-light-grey: #CCCCCC;
  --colour-midnight-blue: #042130;
  --colour-light-cyan: #D4F0FA;
  --colour-dodger-blue: #249EDC;
  --colour-royal-blue: #11567F;
  --colour-deep-sky-blue: #29B5E8;
  --colour-medium-violet-red: #B14C77;
  --colour-cadet-blue: #5094A0;
  --colour-sky-blue: #7CC7EB;
  --colour-steel-blue: #1485B4;
  --colour-powder-blue: #C6EDF1;
  --colour-light-pink: #E59DBC;
  --gradient-1: linear-gradient(to bottom,#fff 0,rgba(255,255,255,.85) 30%,rgba(255,255,255,.45) 60%,rgba(255,255,255,0) 100%);
  --gradient-2: linear-gradient(180deg,#202c35 -7.5%,#fff0 51.25%,#202c35 107.69%);

  /* Typefaces */
  --font-headings: 'Texta', sans-serif;
  --font-buttons: 'Texta', sans-serif;
  --font-other: 'Space Mono', monospace;

  /* Type scale */
  --text-h3: 18px;
  --leading-h3: 1.1;
  --text-h5: 14px;
  --text-h6: 16px;
  --text-p: 10px;
  --leading-p: 1.1;
  --text-a: 15px;
  --leading-a: 1.3;

  /* Shape */
  --radius-1: 8px;
  --radius-2: 4px;
  --radius-3: 16px;
  --radius-4: 24px;
  --radius-5: 12px;
  --radius-6: 100%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 991px;
  --breakpoint-4: 992px;
  --breakpoint-5: 1023px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1367px;
  --max-width-1: 1300px;
  --max-width-2: 520px;
  --max-width-3: 400px;
  --max-width-4: 380px;
  --max-width-5: 350px;
  --max-width-6: 340px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

Run snowflake.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/snowflake.com" title="snowflake.com style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Websites whose lead colour is closest to snowflake.com’s

Captured from snowflake.com on 28 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by snowflake.com; this guide describes the public website for reference.