--- name: Databricks tagline: Signature Databricks Red #EB1600 over stark white canvas — the lakehouse brand that picked red while every other data tool picked blue. updated_at: 2026-05-28T00:00:00.000Z published_at: 2026-05-27T23:16:57.179Z author: webdesignhot source_url: https://www.databricks.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas, dev-tools] tags: [light, structured, sans, enterprise, data, red-cta, lakehouse] preview_swatch: ['#ffffff', '#1b3139', '#EB1600'] related: [] description: 'Databricks carries the most distinctive color positioning in enterprise data — a saturated Databricks Red (#EB1600) primary against a stark white canvas, deployed where every direct competitor (Snowflake cyan, MongoDB green, BigQuery blue) sits in cooler hues. The system runs on DM Sans with technical-register voice ("Data + AI Platform", "the lakehouse"), anchors hero compositions with the slanted Databricks wordmark, and structures product pages around Mosaic AI, MLflow, and Delta Lake card grids over a deep teal-navy secondary surface (#1b3139). Customer logo walls (Comcast, Shell, Block, Mastercard, Rolls-Royce, AT&T) carry the credibility weight, and the "Try Databricks" red pill is the single most repeated visual signal across the marketing surface — product, pricing, blog, customer stories, and the AI Summit conference page all converge on the same red CTA.' # 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: accent-orange muted: text-muted border: border ring: brand colors: bg: '#ffffff' # canvas — marketing, product pages, docs bg-dark: '#1b3139' # canvas-dark — deep teal-navy secondary surface bg-deep: '#0a0a0a' # near-black — premium tier, AI Summit page bg-surface: '#f6f7f9' # subtle surface — feature cards on light bg-soft: '#fafbfc' # softer surface for nested content bg-feature: '#fff4f1' # surface-feature — soft red wash for callouts surface: '#f6f7f9' # alias of bg-surface text: '#1b3139' # ink — display + body emphasis (deep teal-navy) text-charcoal: '#243640' # charcoal — secondary headings text-slate: '#445566' # slate — sub-titles text-steel: '#5e7382' # steel — body running-text text-stone: '#7a8b97' # stone — captions, metadata text-muted: '#a3b1bc' # muted — disabled, placeholder text-on-brand: '#ffffff' # WHITE on red CTA — Databricks calibration on-brand: '#ffffff' # alias on-dark: '#ffffff' # white text on dark teal canvas on-dark-muted: '#a3b1bc' # muted on dark canvas brand: '#EB1600' # Databricks Red — primary CTA, the signature brand-deep: '#E0250F' # deeper red hover brand-pressed: '#B71D08' # pressed state brand-dark: '#9B1A07' # ember — used inside illustrations brand-soft: '#ffe1da' # soft red tint surface brand-teal-deep: '#1b3139' # signature deep teal-navy brand-teal: '#243d48' # mid-teal — secondary dark surface brand-teal-light: '#2f5260' # lighter teal for nested dark cards accent-orange: '#FF8B4A' # accent — Mosaic AI illustrations accent-amber: '#FFB400' # accent — data warehouse callouts accent-violet: '#8B5CF6' # accent — AI/ML use case accent-cyan: '#00A1C9' # accent — Delta Lake illustrations link: '#0a5fb8' # documentation link blue link-hover: '#073f7c' border: '#dde2e6' # hairline default border-soft: '#eceff2' # softer hairline border-strong: '#bcc5cd' # stronger outline — secondary button border-dark: '#2f5260' # divider on dark canvas semantic-success: '#00875A' # confirmation green semantic-warning-bg: '#fff7e0' semantic-warning-text: '#7a5a00' semantic-error: '#D7263D' semantic-info: '#0a5fb8' typography: display: family: '"DM Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' weights: [400, 500, 600, 700] body: family: '"DM Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' weights: [400, 500, 600] mono: family: '"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.00, tracking: '-0.03em', family: display, notes: 'homepage hero h1 — slanted wordmark register' } display-lg: { size: 64, weight: 700, lineHeight: 1.05, tracking: '-0.025em', family: display, notes: 'product page heroes — Mosaic AI, Delta Lake' } h1: { size: 48, weight: 700, lineHeight: 1.10, tracking: '-0.018em', family: display } h2: { size: 36, weight: 600, lineHeight: 1.20, tracking: '-0.012em', family: display } h3: { size: 28, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 22, weight: 600, lineHeight: 1.30, tracking: '0', family: body } h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body } subtitle: { size: 20, weight: 400, lineHeight: 1.50, tracking: '0', family: body, notes: 'hero subheads, intro paragraphs' } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-medium: { size: 16, weight: 500, lineHeight: 1.55, tracking: '0', family: body } 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 } label: { size: 13, weight: 500, lineHeight: 1.40, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.40, tracking: '0.02em', family: body } eyebrow: { size: 12, weight: 600, lineHeight: 1.40, tracking: '0.08em', family: body, transform: uppercase } button: { size: 14, weight: 600, lineHeight: 1.30, tracking: '0', family: body } code: { 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: 2 sm: 4 md: 8 lg: 12 xl: 16 xxl: 24 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: md padding: '12px 22px' use: 'every primary CTA — Try Databricks, Get Started, See Demo' button-primary-pressed: backgroundColor: brand-pressed textColor: on-brand rounded: md button-primary-disabled: backgroundColor: border textColor: text-muted rounded: md button-secondary: backgroundColor: transparent textColor: text rounded: md padding: '12px 22px' border: '1px solid border-strong' use: 'less-committed pair next to primary — Watch Demo, Contact Sales' button-on-dark: backgroundColor: brand textColor: on-brand rounded: md padding: '12px 22px' use: 'red CTA holds the same on dark teal hero — no color shift' button-secondary-on-dark: backgroundColor: transparent textColor: on-dark rounded: md padding: '12px 22px' border: '1px solid border-dark' use: 'outline button on dark teal-navy hero' button-ghost: backgroundColor: transparent textColor: text rounded: md padding: '8px 12px' use: 'inline ghost — nav menu, dropdown trigger' hero-band-light: backgroundColor: bg textColor: text padding: 120 use: 'homepage hero — white canvas, product mockup right, red pill CTA' hero-band-dark: backgroundColor: bg-dark textColor: on-dark padding: 120 use: 'product hero — deep teal-navy ground (Mosaic AI, Delta Lake pages)' feature-card: backgroundColor: bg textColor: text rounded: lg padding: 32 border: '1px solid border' use: '3-up benefit grid on light surfaces' feature-card-dark: backgroundColor: brand-teal textColor: on-dark rounded: lg padding: 32 use: '3-up benefit grid on dark teal hero band' product-card: backgroundColor: bg-surface textColor: text rounded: lg padding: 32 use: 'Mosaic AI / MLflow / Delta Lake product surface cards on homepage' feature-callout-red: backgroundColor: bg-feature textColor: text rounded: lg padding: 32 use: 'soft red wash callout — featured release blocks' customer-story-card: backgroundColor: bg textColor: text rounded: lg padding: 32 border: '1px solid border' use: 'customer story tile — logo + outcome stat + quote' pricing-tier-card: backgroundColor: bg textColor: text rounded: lg padding: 32 border: '1px solid border' use: 'pricing tier — Standard / Premium / Enterprise per cloud' pricing-tier-card-featured: backgroundColor: bg-dark textColor: on-dark rounded: lg padding: 32 use: 'featured tier — Premium often inverts to dark teal' blog-card: backgroundColor: bg textColor: text rounded: lg padding: 24 border: '1px solid border' use: 'engineering blog card — research-paper credible register' badge-pill: backgroundColor: brand-soft textColor: brand-dark rounded: pill padding: '4px 10px' use: 'NEW, GA, PUBLIC PREVIEW' badge-uppercase: backgroundColor: transparent textColor: text-charcoal use: 'eyebrow label — uppercase 12px / 600 / 0.08em tracking' customer-logo-tile: backgroundColor: bg textColor: text-stone padding: 24 use: 'monochrome logo wall — Comcast, Shell, Block, Mastercard' text-input: backgroundColor: bg textColor: text rounded: md padding: '12px 16px' height: 44 border: '1px solid border' text-input-focus: border: '2px solid brand' cta-band-dark: backgroundColor: bg-dark textColor: on-dark padding: 96 use: 'pre-footer CTA — deep teal-navy with red pill + outline-on-dark pair' cta-band-red: backgroundColor: brand textColor: on-brand padding: 96 use: 'rare full-red CTA band — conference / launch moments only' code-block: backgroundColor: bg-dark textColor: on-dark rounded: md padding: 20 use: 'fenced code on docs and engineering blog — Python, SQL, Spark' top-nav: backgroundColor: bg textColor: text height: 72 use: 'sticky white nav — slanted Databricks wordmark left + red pill CTA right' footer: backgroundColor: bg-dark textColor: on-dark-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: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — transitions reduced to opacity-only at 100ms; section-on-scroll reveals skip translate offset' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: '0 1px 2px rgba(27,49,57,0.04)' standard: '0 4px 12px rgba(27,49,57,0.08)' elevated: '0 12px 32px rgba(27,49,57,0.12)' deep: '0 24px 48px rgba(27,49,57,0.16)' ring: '0 0 0 3px rgba(255,54,33,0.35)' on-dark: 'none — dark teal canvases use brightness-step elevation rather than shadow' accessibility: contrast-text-on-bg: 12.6 # AAA — #1b3139 on #ffffff contrast-body-on-bg: 7.4 # AAA — #445566 on #ffffff contrast-stone-on-bg: 4.5 # AA — #7a8b97 on #ffffff at body sizes contrast-on-dark: 12.6 # AAA — #ffffff on #1b3139 contrast-on-brand: 4.5 # AA — #ffffff on #EB1600 (at button size 14/600) contrast-link-on-bg: 7.1 # AAA — #0a5fb8 on #ffffff focus-ring: '3px solid rgba(255,54,33,0.35) with 2px offset' reduced-motion-honored: true dark-mode: 'dual-mode by section, not global toggle — light pages (marketing default, docs, customer stories, pricing) stay white; product hero bands (Mosaic AI, Delta Lake, Data Intelligence Platform) and the global footer ship in deep teal-navy #1b3139. The AI Summit conference site shifts to near-black #0a0a0a with the same red CTA. There is no user-facing light/dark toggle on databricks.com; the dual-mode rhythm is structural to the brand.' --- ## 1. Visual Theme & Atmosphere Databricks ships the most contrarian color choice in enterprise data marketing. While Snowflake leans on cyan blue, MongoDB owns vivid green, and BigQuery sits in Google's flat blues, Databricks calibrated its entire identity around a single saturated red-orange — **Databricks Red `#EB1600`** — deployed as the primary CTA across every product, pricing, and customer-story page. The red carries the brand the way Stripe's purple gradient or Linear's monochrome carries those brands: it's a destination color, the moment your eye lands on a Databricks page. The page rhythm is **white-first**. Most marketing surfaces (homepage above the fold, customer story index, pricing, blog) ship on stark white canvas with deep teal-navy `#1b3139` text. The dark teal-navy reads as ink — it carries the same hex as the secondary dark surface used for product hero bands (Mosaic AI, Delta Lake, the Data Intelligence Platform overview). The dual-role means the brand has only two true colors plus the red signal: white, near-black-teal, and the red. Every other accent (`#FF8B4A` warm orange, `#FFB400` amber, `#8B5CF6` violet, `#00A1C9` Delta cyan) is reserved for illustrations inside specific product cards — never marketing chrome. Type is **DM Sans** at display sizes (80px / 700 / -0.03em on the hero, 64px on product heroes), with a strongly negative tracking that gives Databricks headlines their compressed, engineered feel. The slanted Databricks wordmark — the signature mark with its italicized "Databricks" cap and the small red square — anchors the top-nav and pairs visually with the red pill CTA on the right side of the bar. The wordmark's slant is the brand's only italicized type element; everything else stays upright, which makes the wordmark feel intentional and signature rather than stylistic. The voice register sits **research-paper credible** rather than Snowflake's warmer "data cloud, your way" tone. Headlines describe lakehouse architecture ("Data + AI Platform", "Unify all your data, analytics, and AI"); body paragraphs cite Apache Spark, MLflow, Delta Lake, and Unity Catalog by name. The engineering blog is genuinely technical — code samples in Python and SQL, architectural diagrams, and benchmark data — and the marketing pages mirror that register at a higher level. Customer logos are the second-loudest signal after the red CTA. The logo wall (Comcast, Shell, Block, Mastercard, Rolls-Royce, AT&T, Walgreens, Toyota) runs as a monochrome strip below the hero, and each customer story page leads with the brand mark + an outcome stat ("80% reduction in time-to-insight", "10x query performance") in display-lg type. The credibility lever is enterprise logo density — Databricks is not selling to startups. **Key Characteristics:** - **Databricks Red `#EB1600`** — saturated red-orange, the single most recognizable brand signal. Sharp 8px radius (not pill), not rounded, decisive. - **Stark white canvas `#ffffff`** — the default page floor. Generous 96–120px section padding. - **Deep teal-navy `#1b3139`** — dual-role as ink color AND dark hero surface. Same hex serves both. - **DM Sans** display at weight 700 with -0.03em tracking — compressed engineered headline feel. - **Slanted Databricks wordmark** — the brand's signature mark, italicized cap + small red square. - **Customer logo wall** — Comcast, Shell, Block, Mastercard, Rolls-Royce. Enterprise density is the credibility lever. - **Mosaic AI / MLflow / Delta Lake** product cards on homepage — the product surface architecture is the IA. - **Research-paper voice** — Apache Spark heritage cited, technical benchmarks visible. - **Single red CTA per viewport** — "Try Databricks", "Get Started", "See Demo". - **8px radius on buttons** — square corners read as engineered/technical; pill radius reserved for badges. ## 2. Color Palette & Roles ### Primary - **Bg / Canvas** (`#ffffff`): The default page floor for marketing, product pages, customer stories, blog, pricing, docs. - **Bg Dark / Canvas Dark** (`#1b3139`): Deep teal-navy product hero ground. Same hex as `text` (ink and dark surface share a role — this is intentional). - **Bg Deep** (`#0a0a0a`): Near-black, reserved for the AI Summit conference page and premium-tier strips. - **Text / Ink** (`#1b3139`): Display headlines, body emphasis, dark surface ground. - **Brand / Primary CTA** (`#EB1600`): Databricks Red — the unmistakable action color. ### Brand & Dark - **Brand Deep** (`#E0250F`): Deeper red for hover state. - **Brand Pressed** (`#B71D08`): Pressed state — slightly muddier red. - **Brand Dark** (`#9B1A07`): Ember variant — used inside Mosaic AI illustration accents. - **Brand Soft** (`#ffe1da`): Soft red tint surface for callouts and badges. - **Brand Teal Deep** (`#1b3139`): Signature dark surface. - **Brand Teal** (`#243d48`): Mid-teal — secondary dark surface, often inside dark feature cards. - **Brand Teal Light** (`#2f5260`): Lighter teal — nested dark cards, dividers on dark. ### Accent — Use-case Illustrations Used inside specific product illustrations and architecture diagrams only — never on marketing chrome. - **Accent Orange** (`#FF8B4A`): Mosaic AI warm illustrations. - **Accent Amber** (`#FFB400`): Data warehouse callouts, BI surface cards. - **Accent Violet** (`#8B5CF6`): AI / ML model serving illustrations. - **Accent Cyan** (`#00A1C9`): Delta Lake illustrations, lakehouse architecture diagrams. ### Interactive - **Link** (`#0a5fb8`): Documentation link blue (intentionally cooler than the brand red to read as "non-CTA navigation"). - **Link Hover** (`#073f7c`): Pressed link state. - **Selected**: Selection bg uses brand at 18% alpha. ### Neutral Scale - **Ink / Text** (`#1b3139`): Display, body emphasis, dark surface ground. - **Charcoal** (`#243640`): Secondary headings, footer headings. - **Slate** (`#445566`): Sub-titles, secondary body. - **Steel** (`#5e7382`): Body running-text default. - **Stone** (`#7a8b97`): Captions, breadcrumbs, metadata. - **Muted** (`#a3b1bc`): Disabled, placeholder, on-dark-muted. ### Surface & Borders - **Surface** (`#f6f7f9`): Subtle cool-gray tint for product cards on light. - **Bg Soft** (`#fafbfc`): Softer surface for nested content. - **Bg Feature** (`#fff4f1`): Soft red wash — featured release callouts, launch announcements. - **Border** (`#dde2e6`): Default 1px hairline. - **Border Soft** (`#eceff2`): Lighter hairline. - **Border Strong** (`#bcc5cd`): Stronger outline — secondary button. - **Border Dark** (`#2f5260`): Divider on dark teal canvas. ### Shadow Colors - **Ambient** (`rgba(27,49,57,0.04)`): Barely-visible card shadow. - **Standard** (`rgba(27,49,57,0.08)`): Default elevated card. - **Elevated** (`rgba(27,49,57,0.12)`): Floating popovers. - **Deep** (`rgba(27,49,57,0.16)`): Modals. - Dark canvases use **brightness-step elevation** rather than shadow — `#1b3139` → `#243d48` → `#2f5260`. ### Semantic - **Success** (`#00875A`): Confirmation — uses a green that won't compete with the brand red. - **Warning Bg** (`#fff7e0`) / **Warning Text** (`#7a5a00`): Caution callouts. - **Error** (`#D7263D`): Validation errors. Intentionally close to brand red but slightly cooler — error red and brand red coexist on the same page only rarely. - **Info** (`#0a5fb8`): Info notices — same as link blue. ## 3. Typography Rules ### Font Family - **Primary**: `"DM Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`. DM Sans (Google Fonts, designed by Colophon Foundry / Indian Type Foundry) carries every text role. - **Mono**: `"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`. JetBrains Mono fits the engineering-blog technical register; system mono is fallback. - **Substitutes**: If DM Sans is unavailable, **Inter** is the closest open-source pair (slightly tighter cap-height; consider letter-spacing -0.005em adjustment to match DM Sans's compressed feel at display sizes). Both are Google Fonts. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | DM Sans | 80 | 700 | 1.00 | -0.03em | — | Homepage hero h1 | | display-lg | DM Sans | 64 | 700 | 1.05 | -0.025em | — | Product page heroes (Mosaic AI, Delta Lake) | | h1 | DM Sans | 48 | 700 | 1.10 | -0.018em | — | Major section heads | | h2 | DM Sans | 36 | 600 | 1.20 | -0.012em | — | Sub-section heads | | h3 | DM Sans | 28 | 600 | 1.25 | -0.005em | — | Card titles, product surface heads | | h4 | DM Sans | 22 | 600 | 1.30 | 0 | — | Inline emphasis heads | | h5 | DM Sans | 18 | 600 | 1.35 | 0 | — | Smallest heading | | subtitle | DM Sans | 20 | 400 | 1.50 | 0 | — | Hero subheads, intro paragraphs | | body-lg | DM Sans | 18 | 400 | 1.55 | 0 | — | Engineering blog body, long-form | | body | DM Sans | 16 | 400 | 1.55 | 0 | — | Default marketing body | | body-medium | DM Sans | 16 | 500 | 1.55 | 0 | — | Body emphasis | | body-sm | DM Sans | 14 | 400 | 1.50 | 0 | — | Footer body, secondary copy | | body-sm-medium | DM Sans | 14 | 500 | 1.50 | 0 | — | Card metadata | | label | DM Sans | 13 | 500 | 1.40 | 0 | — | Form labels, inline tags | | caption | DM Sans | 12 | 500 | 1.40 | 0.02em | — | Image captions, fine print | | eyebrow | DM Sans | 12 | 600 | 1.40 | 0.08em | — | Uppercase section labels | | button | DM Sans | 14 | 600 | 1.30 | 0 | — | CTA labels | | code | JetBrains Mono | 14 | 400 | 1.55 | 0 | — | Fenced code, engineering blog | | code-sm | JetBrains Mono | 13 | 400 | 1.50 | 0 | — | Inline code, breadcrumb tokens | ### Principles - **Hero display goes heavy (700).** Unlike MongoDB's 500-weight discipline, Databricks pushes display headlines to weight 700 — the heavier weight reinforces the "compressed engineered" character and ties visually to the slanted Databricks wordmark's bold cap. - **Negative tracking scales linearly** with size: -0.03em at 80px, -0.025em at 64px, -0.018em at 48px, easing back to 0 below 28px. The tighter tracking is what makes Databricks display type feel "set", not "typed". - **Body line-height 1.55** for long-form content. The engineering blog routinely runs 1500+ word posts; the looser line-height keeps technical paragraphs readable. - **Eyebrow labels at 0.08em tracking** — generous spacing, smaller than MongoDB's 1px but more than Linear-style 0.04em. Reads as "technical caption", not "fashion label". - **JetBrains Mono on engineering blog code.** Documentation may fall back to system mono, but the engineering blog uniformly uses JetBrains Mono for ligature support in code samples (`=>`, `!=`, `->`). - **Button labels at weight 600.** Standard SaaS button weight; the heavier display weights mean buttons don't need to over-compensate. - **No serifs anywhere.** DM Sans carries the entire system. Single-family discipline is part of the brand. ## 4. Component Stylings ### Buttons (5 variants) **`button-primary`** — The signature Databricks Red CTA. Background `#EB1600`, text `#ffffff` (white), type 14px / 600 DM Sans, padding 12×22px, **8px radius (not pill — sharp engineered corners)**. Used on every primary action: "Try Databricks", "Get Started Free", "See Demo", "Contact Us". - *Hover*: Background brightens via `filter: brightness(1.08)` over 150ms; no transform. - *Pressed*: `button-primary-pressed` drops to `#B71D08` over 80ms. - *Disabled*: Background `#dde2e6`, text `#a3b1bc`. - *On-dark variant*: Identical red on dark teal-navy bands — no color shift between light and dark surfaces. **`button-secondary`** — Transparent with `#bcc5cd` border. Text `#1b3139`. Same 8px radius, same 12×22px padding. The "less-committed" pair next to primary on light surfaces — "Watch Demo", "Read the Docs". **`button-secondary-on-dark`** — Transparent with `#2f5260` border. Text `#ffffff`. Same 8px radius. Used over deep teal-navy hero bands. **`button-ghost`** — Inline ghost. Transparent, text `#1b3139`, smaller padding (8×12px), 8px radius. Used in nav menu, dropdown triggers, table-row action menus. **`button-link`** — Pure text link with the brand red underline on hover. Body-medium 16 / 500, color `#0a5fb8`, underline shifts color on hover. The non-pill text-link form for "Learn more about Mosaic AI →" patterns. ### Cards **`hero-band-light`** — Homepage hero. White canvas (`#ffffff`), dark teal-navy text, 120px vertical padding. Display-hero headline (80 / 700 / -0.03em) + 20px subtitle + primary red CTA + secondary outline pair. Product mockup (Databricks workspace screenshot) floats right or below. **`hero-band-dark`** — Product hero band (Mosaic AI, Delta Lake, Data Intelligence Platform). Deep teal-navy canvas (`#1b3139`), white text, 120px padding. Same headline scale, white primary CTA pair (the red CTA holds its color over dark). **`feature-card`** — 3-up benefit grid card on light surfaces. White background, 12px radius, 32px padding, 1px `#dde2e6` border. Icon glyph (deep teal-navy or accent color), h3 title (28 / 600), body description (16 / 400 `#445566`). **`feature-card-dark`** — 3-up grid on dark teal hero band. Background `#243d48`, white text, 12px radius, 32px padding, no border. **`product-card`** — Mosaic AI / MLflow / Delta Lake / Unity Catalog product surface card on homepage. Background `#f6f7f9` (subtle cool-gray surface), 12px radius, 32px padding, no border. Product logo + h3 title + 2-line description + "Learn more →" link in body-medium blue. **`feature-callout-red`** — Soft red wash callout band. Background `#fff4f1`, dark text, 12px radius, 32px padding. Featured release blocks, launch announcements, "New: Mosaic AI Agent Bricks GA" style. **`customer-story-card`** — Customer story tile. White, 12px radius, 32px padding, 1px `#dde2e6` border. Customer logo at top, h3 outcome stat ("80% reduction in time-to-insight"), 1-line quote in body-medium, "Read the story →" link. **`code-block`** — Fenced code on docs and engineering blog. Background `#1b3139` (deep teal-navy), white text in JetBrains Mono 14 / 400 / 1.55, 8px radius, 20px padding. Syntax-highlighting uses warm orange (`#FF8B4A`) for keywords, amber (`#FFB400`) for strings — calibrated to feel warm rather than the typical IDE cool palette. ### Pricing (3-tier per cloud) **`pricing-tier-card`** — Standard / Premium / Enterprise tiers, available per cloud (AWS, Azure, GCP). White, 12px radius, 32px padding, 1px `#dde2e6` border. Tier name in h4, price tagline (e.g. "$0.15 per DBU") in h2, feature checklist in body, full-width red CTA at bottom. **`pricing-tier-card-featured`** — Featured tier (typically Premium). **Inverts to dark teal-navy `#1b3139` background, white text** — the inversion is the badge. Red CTA stays red, gaining contrast against the dark ground. **`pricing-comparison-row`** — Comparison table row. Hairline divider, 12px vertical padding, label left + checkmarks across plan columns. ### Engineering Blog Cards **`blog-card`** — Research-style blog post tile. White, 12px radius, 24px padding, 1px `#dde2e6` border. Optional 16:9 thumbnail at top, category tag pill (`#fff4f1` bg, `#9B1A07` text), post title in h4 (22 / 600), author + date meta in body-sm `#7a8b97`. Click expands to full post. ### Badges & Pills **`badge-pill`** — "NEW", "GA", "PUBLIC PREVIEW", "PRIVATE PREVIEW". Background `#ffe1da`, text `#9B1A07`, full pill (9999px), 4×10px padding, type eyebrow (12 / 600 / 0.08em / uppercase). **`badge-uppercase`** — Section eyebrow. Transparent, text `#243640`, type eyebrow (12 / 600 / 0.08em). ### Inputs / Forms **`text-input`** — White, 8px radius, 12×16px padding, 44px height, 1px `#dde2e6` border. **`text-input-focus`** — Border thickens to 2px solid `#EB1600` (the brand red functions as the focus ring color — high contrast on white, instantly recognizable as Databricks). ### Navigation **`top-nav`** — 72px-tall sticky white bar. Slanted Databricks wordmark (with the small red square) anchors the left side; horizontal menu (Why Databricks / Product / Solutions / Resources / Pricing / Login) center; "Try Databricks" red pill CTA on the right. Stays white on every page including product hero pages — the nav is constant. **`footer`** — Deep teal-navy ground (`#1b3139`), white headings, `#a3b1bc` link tone. Multi-column — Platform / Solutions / Resources / Customers / Company / Legal. 96px vertical padding. Customer logo strip above the link grid on most pages. ### CTA Bands **`cta-band-dark`** — Pre-footer CTA. Deep teal-navy (`#1b3139`), white text, 96px padding. Headline in h1, subhead in subtitle, primary red CTA + secondary outline-on-dark pair. **`cta-band-red`** — Rare full-red CTA band. Background `#EB1600`, white text, 96px padding. Reserved for conference / launch moments (Data + AI Summit registration page). ## 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 blog card, 32px feature/product/pricing/customer-story card. ### Grid & Container - **Max content width**: 1280px centered, with 32px horizontal breathing room on desktop, 24px on tablet, 16px on mobile. - **Hero**: Full-width band, 120px padding, type column constrained to ~720px with product mockup floating right or below. - **3-up product card grid**: 3 columns desktop (Mosaic AI / Lakeflow / Delta Lake row), 2 tablet, 1 mobile. - **4-up feature grid**: 4 columns desktop on benefit pages. - **Pricing tier grid**: 3-up at desktop with the featured tier in column 2 (Premium typically). - **Customer logo wall**: 6-up at desktop, 3-up tablet, 2-up mobile; native monochrome SVGs at unified height (~32px). - **Engineering blog**: Single-column prose ~720px wide with full-width code blocks breaking out of the prose column. ### Whitespace Philosophy The white-first canvas needs generous breathing room to avoid feeling sterile. Section padding sits at 96–120px on major bands — larger than peer SaaS brands (Vercel uses ~80px). The white space is what lets the saturated red CTA land as an event rather than a button. Tight section padding undermines the brand: red-on-white at 64px padding feels aggressive; red-on-white at 120px padding feels confident. ### Section Cadence Homepage rhythm: white hero band → customer logo wall (white) → 3-up product card grid (light surface) → dark teal product showcase band → 3-up benefit feature grid (white) → customer story strip (white) → red callout strip → dark pre-footer CTA → dark footer. The single dark hero appearance mid-page provides visual rest before returning to white for the customer story strip. Product pages (Mosaic AI, Delta Lake, Data Intelligence Platform) lead with a dark teal hero band instead of white, then return to white for the feature grid. The dark-first product hero signals "this is product, not marketing". ## 6. Shapes & Radius Scale | Tier | Token | Value | Use | |---|---|---|---| | Micro | micro | 2px | Inline tags inside data tables, dense table cells | | Standard | sm | 4px | Compact rows, dense badges | | Comfortable | md | 8px | **Buttons** (primary, secondary, ghost), form inputs, code blocks | | Large | lg | 12px | Feature cards, product cards, pricing tier cards, customer story cards | | XL | xl | 16px | Hero illustration containers | | XXL | xxl | 24px | Decorative containers (rare) | | Pill | pill | 9999px | Badges, status pills, NEW/GA/PREVIEW chips | The 8px radius on every button is the signature shape choice — Databricks intentionally avoided MongoDB's pill aesthetic and Stripe's slightly-rounded form. The square-but-softened corner reads as engineered / technical / decisive. Pill radius is **reserved for badges only**; using a pill button would read as wrong, the same way sharp-cornered green CTAs read as wrong on MongoDB. Cards sit at 12px to feel solid and stable. Code blocks at 8px feel slightly tighter, matching the button radius — code and CTAs share a "decisive rectangle" language. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow | Body sections, top nav (until scrolled), dark hero bands | | 1 — Ambient | `0 1px 2px rgba(27,49,57,0.04)` | Sticky nav after scroll | | 2 — Standard | `0 4px 12px rgba(27,49,57,0.08)` | Default elevated cards (feature, product, pricing, customer story) | | 3 — Elevated | `0 12px 32px rgba(27,49,57,0.12)` | Floating popovers, dropdowns, nav mega-menu | | 4 — Deep | `0 24px 48px rgba(27,49,57,0.16)` | Modals, dialogs, full-screen contact forms | | 5 — Brightness-step | `#1b3139` → `#243d48` → `#2f5260` | Dark canvas elevation — no shadow | ### Shadow Philosophy Light surfaces use **teal-tinted shadows** (cool gray-blue at low alpha), which echo the brand's ink color rather than pure black. Dark teal canvases use **brightness-step elevation** — shadows are invisible on dark grounds, so the system layers via `#1b3139` → `#243d48` → `#2f5260`. Customer logo cards sit flat (no shadow); they're meant to feel like a credibility wall, not interactive surfaces. No glow effects, no gradient overlays on cards, no neumorphism. The closest decorative depth is the Databricks workspace mockup inside hero bands, which carries its own internal UI depth (the workspace shows real Spark notebooks with cell shadows). Surrounding card containers stay quiet. ## 8. Interaction & Motion ### Easing Curves - **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for color, border, opacity transitions on buttons, links, form fields. - **Emphasized ease**: `cubic-bezier(0.16, 1, 0.3, 1)` — section-on-scroll reveals, mockup pan-in, product card hover lift. ### Duration Buckets - **Fast (150ms)**: Color transitions on hover, focus ring expansion, link hover. - **Standard (240ms)**: Card hover lift, button press feedback, dropdown opens, mega-menu reveal. - **Slow (320ms)**: Mockup pan-in, modal entrance, hero illustration reveal. ### Per-Component Micro-States - **Button hover (primary)**: Background brightens via `filter: brightness(1.08)` over 150ms; no transform. The brightness rather than color-swap keeps the red feeling like the same red. - **Button press**: Background drops to `#B71D08` over 80ms. - **Button hover (secondary)**: Border color shifts from `#bcc5cd` → `#1b3139` over 150ms; text stays in place. - **Card hover (feature/product)**: Card lifts via `translateY(-2px)` over 240ms; shadow intensifies from standard → elevated. - **Customer story card hover**: Card lifts `translateY(-2px)`; the outcome stat number subtly scales via `transform: scale(1.02)` to draw the eye. - **Link hover**: Underline color shifts from `#0a5fb8` → `#073f7c` over 150ms. - **Input focus**: Border recolors from `#dde2e6` → 2px `#EB1600` over 150ms; outer 3px ring at `rgba(255,54,33,0.35)` appears as the focus halo. - **Nav mega-menu**: Opens via opacity fade + 8px translateY drop over 240ms emphasized ease. ### Page Transitions Standard browser navigation. Section-on-scroll reveals are a 320ms fade-in-up (24px offset) gated by `IntersectionObserver`. Product card grids stagger in left-to-right with 80ms increments. Databricks workspace mockups inside hero bands animate via subtle parallax (-2% vertical translate on scroll). ### Reduced Motion `prefers-reduced-motion: reduce` honored: all transforms removed, transitions reduced to opacity-only at 100ms, parallax disabled, card hover lifts removed (cards stay flat). Customer story outcome-stat scale is removed. Mega-menu opens instantly. ## 9. Accessibility & A11y ### Contrast Pairs - **Text on bg**: `#1b3139` on `#ffffff` = **12.6** — AAA at every size. - **Body on bg**: `#445566` on `#ffffff` = **7.4** — AAA at body sizes. - **Stone on bg**: `#7a8b97` on `#ffffff` = **4.5** — AA at body sizes; do not use below 14px. - **On-dark on bg-dark**: `#ffffff` on `#1b3139` = **12.6** — AAA. - **On-brand on brand**: `#ffffff` on `#EB1600` = **4.5** — AA at button size (14/600). The contrast meets AA at the button label size; the brand calibrated the red shade specifically to clear AA with white text. A lighter red would fail. - **On-feature**: `#1b3139` on `#fff4f1` = **11.8** — AAA. - **Link on bg**: `#0a5fb8` on `#ffffff` = **7.1** — AAA. ### Focus Indicators Every focusable element shows a **3px ring at `rgba(255,54,33,0.35)`** with 2px offset. The brand red doubles as the focus ring — using a translucent variant rather than the solid red keeps the ring visible without clashing on red CTAs (a solid red ring around a red button would disappear). On primary CTAs the focus ring is rendered as a 2px white inset outline + the 3px red translucent outer ring. ### ARIA Patterns - **Buttons**: Native `