Databricks DESIGN.md

Overview

Visual Theme & Atmosphere

Databricks presents the visual language of high-stakes enterprise data infrastructure translated into confident, approachable design. The canvas opens on pure white (#ffffff) layered with deep teal headings (#1B3139) and accented by a single blazing red-orange — Lava 600 (#FF3621) — that functions as the brand's sole action color. This isn't the cautious blue of generic SaaS; it's a bold, volcanic tone that signals the platform's origins in Apache Spark and its promise to handle the heaviest workloads at speed.

The typography is built entirely on DM Sans, a geometric humanist sans-serif commissioned for its legibility across dense data interfaces. Display headlines run at weight 500 (Medium) at large sizes — a moderate, confident choice that avoids both the feather-light luxury of fintech and the heavy-handed boldness of legacy enterprise. Body text and most headings use weight 400 (Regular), giving the system an open, readable quality even when dense with technical content. DM Mono serves as the monospaced companion for code depictions and data labels.

The color system is anchored by a dual-background architecture: Navy 900 (#0B2026) provides deep, immersive dark sections for product showcases and feature demonstrations, while Oat Medium (#EEEDE9) and Oat Light (#F9F7F4) offer warm, neutral off-white surfaces that avoid clinical sterility. The teal body color (#1B3139) sits between these two poles as the functional UI ink — dark enough for strong contrast, warm enough to avoid the coldness of black.

Key Characteristics:

• DM Sans as the sole brand typeface — geometric humanist, weight 400/500 duality
• Lava 600 (#FF3621) as the single CTA color — bold, volcanic, unmistakable
• Navy 900 (#0B2026) for immersive dark sections; Oat surfaces for warm neutrals
• Square-cornered buttons (0px radius) — engineering precision, no decorative rounding
• Pill-radius tabs (20px) on product navigation against dark backgrounds
• Link color (#016BC1) — distinct enterprise blue for inline references
• DM Mono for all code/technical display contexts

Primary tasks

• Run the ETL pipelines that feed a demand-forecasting model
• Track machine-learning experiments and register models with MLflow
• Query the same data with SQL for business intelligence
• Govern data access across Azure and AWS workloads in one place
• Check starting prices in DBUs without booking a demo call

Brand Narrative

Databricks was founded in 2013 by Ali Ghodsi, Ion Stoica, Matei Zaharia, and five other co-founders from UC Berkeley's AMPLab — the research lab that created Apache Spark, the open-source distributed computing engine that would become the backbone of big data processing globally. The founding premise was direct: Spark had demonstrated that data analytics didn't need to be slow, brittle, or locked into proprietary systems, but productizing it for enterprises required a platform layer that AMPLab researchers weren't positioned to build. Databricks was that company.

The platform evolved from a managed Spark service into the Data Intelligence Platform — a unified lakehouse architecture that combines data warehousing, data engineering, machine learning, and business intelligence. The signature concept, the Lakehouse, merges the flexibility of a data lake with the reliability of a data warehouse, resolving a decade-long industry tension between the two approaches. The term was coined by Databricks researchers and published as an academic paper before becoming a product category.

The Lava 600 (#FF3621) brand color signals this Spark origin — volcanic, energetic, technically rigorous. It is not a corporate red; it is the color of combustion and computation. The Navy 900 (#0B2026) and Oat palette provide the stable infrastructure beneath that intensity: warm, grounded, built to last.

Databricks refused the VC-funded pivot to black-box AI; its bet was on open, composable architecture (Delta Lake, MLflow, Unity Catalog as open-source projects) paired with enterprise cloud delivery. As of 2025–2026, Databricks is valued at over $62B and serves thousands of enterprise customers across Azure, AWS, and GCP.

Principles

1. Open first. Databricks built its moat on open-source projects (Spark, Delta Lake, MLflow) rather than proprietary lock-in. UI implication: the platform surfaces data in standard formats; the design language avoids false urgency or dark patterns that obscure pricing or capabilities.
2. Simple to start, infinite to scale. The onboarding surface should feel as accessible as a trial button; the platform scales to exabyte workloads. UI implication: primary CTAs are direct ("Try Databricks", "Start free trial"); complexity is surfaced progressively.
3. Data and AI are one system. The lakehouse thesis unified what were separate silos. UI implication: navigation and information architecture reflect a unified platform, not a suite of separate tools.
4. Precision is a feature. Pricing is stated in DBUs with starting prices visible without a demo call. UI implication: typography uses no decorative tracking; documentation is peer-to-peer and dense rather than dumbed down.
5. Infrastructure deserves beautiful design. The Lava-and-Navy palette is a deliberate refusal of the gray-and-blue enterprise default. UI implication: every surface should reflect the conviction that data infrastructure can be both rigorous and visually distinctive.

Personas

Personas below are fictional archetypes informed by publicly observable Databricks user segments (data engineers, ML scientists, data analysts, enterprise architects), not individual people.

Aarav Mehta, 32, Seattle. Senior data engineer at a Fortune 500 retailer, responsible for the ETL pipelines that feed the company's demand-forecasting models. Evaluates Databricks on Spark performance benchmarks and Delta Lake ACID guarantees, not marketing copy. Trusts tools whose documentation is written by engineers for engineers. Would immediately distrust a pricing page that hid per-unit costs behind a "contact sales" wall.

Dr. Sarah Chen, 37, San Francisco. ML research scientist at a healthcare AI company using Databricks MLflow for experiment tracking and model registry. Chose Databricks over alternatives because the open-source first approach means her team can run MLflow locally before committing to the managed service. Values the platform's willingness to publish research papers rather than keeping architecture decisions proprietary.

Marcus Williams, 45, Chicago. VP of Data Infrastructure at a major financial institution. Evaluates Databricks on Unity Catalog's governance controls and compliance posture. Cares about the platform's multicloud flexibility — his bank has Azure and AWS workloads that need a unified governance layer. Finds the Databricks brand visually credible for presenting to a C-suite: serious, technical, not flashy.

Elena Kowalski, 28, Austin. Data analyst at a scale-up company. Uses Databricks SQL (previously Databricks SQL Analytics) for business intelligence queries. Came to Databricks from a pure warehouse background; appreciates that the platform lets her run SQL alongside the data engineering team's Spark jobs on the same data layer. Finds the visual design cleaner and more modern than legacy warehouse vendors.

Colors

Primary Brand

• Lava 600 (#FF3621): The Databricks signature. All primary CTAs ("Try Databricks", "Start free trial", "Explore the product"). A saturated red-orange that functions as the system's single interactive action color.
• Lava Pressed (#EB1600): Darker Lava variant for pressed/hover states on primary buttons. Not documented as a separate token but observed in interaction states.
• Navy 900 (#0B2026): The deepest background color. Used for full-width dark brand sections, feature showcases, and hero overlays. Not black — a very dark teal that retains brand warmth.

Functional UI

• Teal Body (#1B3139): Primary text, headings, nav labels, and secondary button backgrounds. The system's ink color — warm, dark, distinct from Navy.
• Teal Mid (#1B5162): Secondary teal for language-selector and sub-UI elements. Slightly lighter than Teal Body.
• Link Blue (#016BC1): All inline text links and reference anchors. A classic enterprise blue that signals clickability within dense technical content.
• Muted Blue-Gray (#90A5B1): Secondary text, caption, metadata, muted labels.
• Cloud Blue (#EDF2F8): Very light blue-gray tint for decorative tab backgrounds on dark surfaces (observed as rgba(237,242,248,0.1)).

Surfaces

• White (#ffffff): Page canvas, cards, modal backgrounds, primary section backgrounds.
• Oat Medium (#EEEDE9): Warm neutral surface for sections, cookie banners, and muted UI containers. The "paper" of the system.
• Oat Light (#F9F7F4): Lightest warm neutral surface for subtle section separation.
• Near-White (#F4F4F4): Hairline surface for dividers and subtle separations.

Semantic Colors

• Success Green (#468254): Success state text and badge color. Data-validated green for positive signals.
• Success Surface (#F9FFFA): Very light green tint for success badge backgrounds.

Typography

Font Family

• Primary: DM Sans (Google Fonts) — the single brand typeface for all marketing, product, and documentation surfaces
• Monospace: DM Mono (Google Fonts) — all code depictions, technical data labels, and terminal-style displays
• Fallback: sans-serif for DM Sans; monospace for DM Mono

Hierarchy

Principles

• Weight simplicity: DM Sans 400 (Regular) and 500 (Medium) cover the entire system. No bold (700) on primary content — tabs use 700 only for the active state indicator.
• No custom letter-spacing: Databricks does not apply custom tracking at any scale — DM Sans's default metrics are used throughout. This reinforces the engineer's preference for clean defaults.
• Regular at display: Unlike Stripe's weight-300 whisper, Databricks uses Regular (400) for most page H1s — a grounded, unshowy confidence.
• Mono for data: DM Mono is reserved exclusively for code and technical displays, never used in marketing prose.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px (section)
• Notable: Hero buttons use generous horizontal padding (24px) for command presence; nav buttons use tighter 12px horizontal padding

Grid & Container

• Centered max-width layout (~1200px content area)
• Hero: centered single or two-column with the 60px DM Sans headline and dual CTA buttons
• Feature sections: alternating full-width dark (Navy #0B2026) and white/Oat sections
• Product tabs row: horizontal scrollable pill row against dark background
• Pricing: card grid for product category tiles

Whitespace Philosophy

• Enterprise generosity: Despite being a data-dense platform, Databricks's marketing site is generously spaced — sections breathe with 64px+ vertical rhythm.
• Dark sections as contrast: Navy #0B2026 full-width sections create dramatic contrast against white, functioning as visual resets rather than decorative accents.
• Square precision: 0px radius on CTAs signals engineering discipline — this is infrastructure software, not consumer B2C.

Border Radius Scale

• Zero (0px): Primary buttons, secondary buttons — the signature engineering aesthetic
• Micro (2px): Cookie/preference UI, minor form inputs
• Pill (20px): Product navigation tabs on dark sections
• Standard (4px): Badges, small status indicators

Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA buttons: 40px height, generous 24px horizontal padding
• Nav tabs: 40px height, 12–16px padding for comfortable tapping
• Nav links: full header height (65px zone) for easy touch

Collapsing Strategy

• Hero: 60px headline scales to ~36px on mobile; DM Sans weight 500 maintained
• Navigation: horizontal link bar → hamburger or collapsed menu
• Dark feature sections: maintain full-width treatment, compress internal padding
• Product tab row: horizontal scroll on narrow viewports
• Pricing cards: 3-column → single column stacked

Elevation & Depth

Shadow Philosophy: Databricks uses restraint with shadows — the primary depth signals are the dramatic alternation between white and Navy #0B2026 sections, not elevation layers. Cards on white surfaces receive a subtle teal-tinted shadow (rgba(27,49,57,...)) rather than neutral black, tying elevation to the brand's teal palette.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card: 0px 2px 8px rgba(27,49,57,0.12)
• shadow.elevated: 0px 4px 16px rgba(27,49,57,0.16)

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — infrastructure software signals reliability through steadiness. Decorative banner animations on the Databricks homepage include a pause control as a first-class affordance (observed as an accessibility-forward <button> element). Tab transitions use motion-standard / ease-standard. No spring, no overshoot, no bounce — data pipelines don't bounce. Under prefers-reduced-motion: reduce, all transitions collapse to motion-instant; the decorative banner animation is paused.

Components

Buttons

Primary (Lava)

• Background: #FF3621
• Text: #ffffff
• Radius: 0px
• Padding: 8px 24px
• Height: 40px
• Font: 16px DM Sans weight 500
• Use: Primary CTA — "Try Databricks", "Start free trial", "Explore the product"

Secondary (Navy)

• Background: #1B3139
• Text: #ffffff
• Radius: 0px
• Padding: 8px 24px
• Height: 40px
• Font: 16px DM Sans weight 500
• Use: Secondary CTA — "See demo", "Request a pricing quote"

Tertiary (Oat)

• Background: #EEEDE9
• Text: #1B3139
• Radius: 2px
• Padding: 12px 10px
• Font: 16px DM Sans weight 400
• Use: Muted/preference actions — cookie settings, manage preferences

Cards & Containers

Product Pricing Card

• Background: #ffffff
• Text: #1B3139
• Radius: 0px
• Use: Pricing page product tiles — Data Engineering, Data Warehousing

Dark Feature Panel

• Background: #0B2026
• Text: #ffffff
• Use: Full-width dark sections for product demos and feature showcases

Oat Surface Section

• Background: #EEEDE9
• Text: #1B3139
• Use: Alternating warm-neutral content sections

Tabs

Product Tab — Active

• Background: #ffffff
• Text: #1B3139
• Radius: 20px
• Padding: 12px 16px
• Height: 40px
• Font: 16px DM Sans weight 700
• Use: Active state on dark-background tab row — Platform, Database, AI, BI

Product Tab — Inactive

• Background: rgba(237, 242, 248, 0.1)
• Text: #ffffff
• Radius: 20px
• Padding: 12px 16px
• Height: 40px
• Font: 16px DM Sans weight 500
• Use: Inactive product section tabs on dark Navy background

Badges

Success Badge

• Background: #F9FFFA
• Text: #468254
• Radius: 4px
• Font: 14px DM Sans weight 400
• Use: Positive state indicators, availability badges

Inputs & Forms

Default Text Input

• Background: #ffffff
• Text: #1B3139
• Border: 1px solid #EEEDE9
• Radius: 2px
• Font: 16px DM Sans Regular
• Focus: 1px solid #FF3621
• Use: Form fields, search inputs

Verified: 2026-06-22 Tier 1 sources: https://www.databricks.com/ (live inspect), https://www.databricks.com/product/pricing (live inspect), https://www.databricks.com/product/data-intelligence-platform (live inspect), https://brand.databricks.com/ (official brand portal — Lava 600 #FF3621, Navy 900 #0B2026, Oat Medium #EEEDE9, Oat Light #F9F7F4, DM Sans / DM Mono confirmed) Tier 2 sources: getdesign.md/databricks — not found (404); styles.refero.design/?q=databricks — no Databricks listing found after search Conflicts unresolved: none. Brand portal hex (#FF3621) vs. live inspect CTA (rgb(235,22,0) = #EB1600): live CTA appears to use a rendered variant; brand official Lava 600 = #FF3621 is authoritative and used as primary. Both documented.

States

Do's and Don'ts

Do

• Use DM Sans for all text — it's the only brand typeface
• Use DM Mono for code, data labels, and technical displays
• Apply Lava 600 (#FF3621) exclusively for primary CTAs — it's the action signal
• Use 0px radius on buttons — square corners communicate engineering precision
• Use Navy 900 (#0B2026) for immersive dark sections
• Use Teal (#1B3139) as the body text color, not pure black
• Apply pill radius (20px) only for navigation tabs on dark backgrounds
• Use Oat Medium (#EEEDE9) for warm neutral sections and surfaces

Don't

• Use warm orange-red (#FF3621) for anything other than primary action buttons
• Round primary CTA buttons — Databricks CTAs are sharp-cornered (0px)
• Use pure black (#000000) as body color — the system uses Teal #1B3139
• Use #FF3621 as a text color in running prose — it's for buttons only
• Add decorative gradients or complex shadows — the system is precise and clean
• Use weight 700 in DM Sans on headings — reserve it for active tab state only
• Use DM Mono for body text — it's strictly for code/data contexts
• Mix multiple accent colors — Lava is the single active hue

Voice & Tone

Databricks's voice is precise, ambitious, and technically confident — the voice of a platform that emerged from academia (UC Berkeley's AMPLab) and never left behind its conviction that the right architecture solves the hardest problems. The homepage headline "The database your AI agents deserve" is emblematic: assertive, technically specific, quietly provocative. Marketing copy treats the data engineer and data scientist as intelligent peers, not as buyers to be persuaded with superlatives.

Voice samples (verbatim, verified live 2026-06-22):

• "The database your AI agents deserve" — home hero H1 (verified live)
• "Build and run apps, agents and AI on your data" — product section H2 (verified live)
• "Intelligent. Simple. Private." — platform positioning H2 (verified live)

Forbidden register: vague superlatives ("revolutionary", "industry-leading", "best-in-class" as empty filler), consumer-app enthusiasm ("🚀 We're excited to…"), jargon without definition in user-facing copy, passive voice on CTAs.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Lava 600 (#FF3621)
• Secondary CTA: Teal (#1B3139)
• Background: White (#ffffff)
• Dark section bg: Navy 900 (#0B2026)
• Warm surface: Oat Medium (#EEEDE9)
• Heading/body text: Teal (#1B3139)
• Muted text: Blue-Gray (#90A5B1)
• Link: Enterprise Blue (#016BC1)
• Success: Green (#468254)

Example Component Prompts

• "Create a hero section on white background. H1 at 60px DM Sans weight 500, color #1B3139. Subtext at 18px weight 400, #90A5B1. Two CTAs: primary Lava #FF3621 bg, white text, 0px radius, 8px 24px padding — 'Try for free'; secondary #1B3139 bg, white text, same geometry — 'See demo'."
• "Design a dark feature section: #0B2026 background, white headings at 48px DM Sans weight 500. Tab row with pill buttons (20px radius): active tab white bg + #1B3139 text weight 700; inactive tabs rgba(237,242,248,0.1) bg + white text weight 500."
• "Build a pricing card: white background, 0px radius. H3 at 28px DM Sans weight 400, #1B3139. Body at 16px weight 400, #1B3139. Link in #016BC1. Lava CTA at bottom."
• "Create a badge: #F9FFFA background, #468254 text, 4px radius, 14px DM Sans weight 400."

Iteration Guide

1. DM Sans is the only typeface — never substitute another sans
2. Use weight 400 for most content; 500 for CTAs and key headings; 700 only for active tab state
3. 0px radius on all buttons — sharp corners are intentional brand design
4. Lava (#FF3621) is the single CTA color — do not use it for icons, text, or decorations
5. Teal (#1B3139) is both the body text color and the secondary button background
6. Navy (#0B2026) for immersive dark sections — not Teal, not black
7. DM Mono for any code or technical data display
8. Oat Medium (#EEEDE9) for warm-neutral surfaces, not gray

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #ff3621 measures 3.62:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, nav-tab-inactive. Text #ffffff on #edf2f81a measures 1.13:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.