--- version: alpha name: Databricks description: Enterprise data intelligence platform — deep forest-teal canvases, sharp-cornered geometry, a single blazing red-orange CTA, and DM Sans/DM Mono type pairing that fuses engineer confidence with editorial legibility. colors: # Canvas + surfaces background: "#1b3139" # deep forest teal — primary dark canvas surface: "#ffffff" # light surface for card/content areas surface-teal: "#1b5162" # mid-teal — secondary dark surface surface-light: "#eeede9" # warm off-white — light-mode panels surface-muted: "#5a6f77" # desaturated teal — tertiary surface # Brand primary: "#eb1600" # Databricks red-orange — CTAs only primary-bright: "#ff5f46" # lighter red-orange variant on-primary: "#ffffff" primary-hover: "#c81300" # was hover from dembrandt palette # Text / ink ink: "#ffffff" # was #1b3139 — matched background exactly (1:1 contrast); primary body text on dark canvas must be white ink-inverted: "#ffffff" # primary text on dark canvas ink-secondary: "#90a5b1" # cool-teal muted text ink-on-light: "#1b3139" # deep teal text for light surfaces (inputs, badges) on-surface: "#5a6f77" # secondary text on light surfaces # Links / interactive link: "#016bc1" # default link blue link-hover: "#1883fd" # hover link blue # Semantic info: "#8acaff" # light sky blue — info / data accent # Borders border: "#90a5b1" # muted teal-gray border border-dark: "#1b3139" # dark canvas border # Shadow tints (brand-tinted, teal-dark) shadow-soft: "#1b3139" # was rgba(27,49,57,0.07) — Google format requires hex typography: display-hero: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 88px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px display: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 1.13 letterSpacing: 0px heading-section: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.17 letterSpacing: -0.48px heading-sub: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0px heading-card: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.29 letterSpacing: 0px body-large: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px body: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px label-mono: fontFamily: "DM Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" fontSize: 16px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "DM Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0px caption-mono: fontFamily: "DM Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.0 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: 20px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 24px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink-inverted}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 24px border: "1px solid {colors.ink-inverted}" button-secondary-hover: backgroundColor: "{colors.surface-teal}" textColor: "{colors.ink-inverted}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 24px border: "1px solid {colors.ink-inverted}" button-ghost: backgroundColor: "transparent" textColor: "{colors.link}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 0px button-ghost-hover: backgroundColor: "transparent" textColor: "{colors.link-hover}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 0px card: backgroundColor: "{colors.surface}" rounded: "{rounded.none}" padding: 24px border: "1px solid {colors.border}" card-dark: backgroundColor: "{colors.surface-teal}" rounded: "{rounded.none}" padding: 24px nav: backgroundColor: "{colors.background}" textColor: "{colors.ink-inverted}" typography: "{typography.nav-link}" padding: 16px 24px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink-on-light}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px border: "1px solid {colors.border}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px border: "1px solid {colors.link}" badge: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink-on-light}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 4px 8px badge-dark: backgroundColor: "{colors.surface-teal}" textColor: "{colors.ink-inverted}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 4px 8px tag-mono: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.label-mono}" rounded: "{rounded.none}" padding: 2px 0px --- # Databricks Design System ## Overview Databricks carries a brand language born from data infrastructure — dark, precise, and purposefully utilitarian. The dominant canvas is `{colors.background}`, a deep forest teal that signals enterprise-grade depth without the cold anonymity of pure black. Against this ground, a single `{colors.primary}` red-orange functions as a high-stakes alert: this is the one CTA you should click. The hierarchy is almost austere in its restraint; nothing competes with that red-orange, and everything else recedes into disciplined teal-gray neutrals. Typography is the technical heart of the system. DM Sans (at 500 weight for display, 400 for body) provides clean geometric shapes that lean humanist without being warm — the kind of type that belongs equally in a pitch deck and a developer console. DM Mono enters the system as an accent face for labels, code snippets, and category tags, its uppercase treatment giving it the visual weight of a technical annotation rather than body copy. Together they communicate: data-serious, never data-sterile. Geometry is radically flat. Buttons have zero corner radius — a sharp-edged confidence that distinguishes Databricks from the rounded softness of consumer SaaS. This sharpness extends to card containers, rule separators, and the overall grid, creating a rectilinear precision that reads as control and rigor. The one kinetic exception: tab and panel transitions at 0.2s with material-standard easing, subtle enough to feel polished without breaking the industrial mood. **Key Characteristics:** - Deep forest teal `{colors.background}` as the hero canvas — not black, not navy, but a distinctly Databricks chromatic signature - A single unambiguous CTA color: `{colors.primary}` red-orange, used only on the primary action button — never decorative - Zero corner radius on buttons (`{rounded.none}`) — flat-edge geometry that signals infrastructure precision - Dual typeface system: DM Sans for hierarchy and body, DM Mono in uppercase for labels, category tags, and code contexts - 500 weight display text — DM Sans medium strikes between a confident bold and a refined light - Multi-layer teal-tinted shadows (`rgba(27,49,57,…)`) that reinforce the canvas hue throughout elevation - Link color `{colors.link}` on light backgrounds, shifting to `{colors.info}` on dark for accessible contrast - DM Mono uppercase label-mono style (`{typography.label-mono}`) as a data-annotation convention - An 8px base spacing system (4/8/16/24/32/48/64/96px scale) aligned with standard grid discipline - Breakpoint density at 23 stops — mobile-aggressive optimization expected for developer and enterprise audiences - Sharp card borders using `{colors.border}` muted teal-gray — structure without visual noise - No pill buttons — the brand rejects soft consumer shapes at every interactive layer ## Colors ### Primary - **Forest Teal** (`{colors.background}`): The signature dark canvas. Used across hero sections, navigation, and full-bleed feature rows. The darkest expression of the Databricks brand. - **White** (`{colors.surface}`): Light surface for content cards, documentation panels, and form areas. Never warm — pure contrast with the dark canvas. - **Mid-Teal** (`{colors.surface-teal}`): Secondary dark surface for nested panels, dark card variants, and product screenshots placed on `{colors.background}`. - **Warm Off-White** (`{colors.surface-light}`): Subtle warm neutral for light-mode sections and background fills that need relief from pure white. ### Brand Accent - **Databricks Red-Orange** (`{colors.primary}`): The only true action color in the system. Applied exclusively to primary CTAs ("Explore the platform", "Try Databricks"). On hover, deepens to `{colors.primary-hover}` — same shape, more weight. - **Bright Red-Orange** (`{colors.primary-bright}`): A lighter variant of the signature red-orange, used in graphic illustrations, data visualizations, and marketing imagery. ### Text States - **Ink Inverted** (`{colors.ink-inverted}`): White text on all dark surfaces. - **Ink** (`{colors.ink}`): Deep teal for body text on light surfaces. - **Ink Secondary** (`{colors.ink-secondary}`): Muted teal-gray for secondary copy, metadata, and timestamps. - **Link Blue** (`{colors.link}`): Standard interactive link on light backgrounds. - **Link Hover** (`{colors.link-hover}`): Brighter blue on link hover — smooth step up in saturation. - **Info** (`{colors.info}`): Sky blue for info-state indicators and data accent details. - **Border** (`{colors.border}`): Muted teal-gray for card edges, dividers, and form outlines. ## Typography ### Font Family - **Primary**: `DM Sans`, with fallbacks: `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif`. Self-hosted via woff2 (400, 500, 600, 700 weights). Geometric humanist sans with no custom OpenType features configured — clean and neutral. - **Monospace**: `DM Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`. Used strictly at uppercase text-transform for label-mono and caption-mono contexts. Self-hosted woff2. ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values. | Token | Use | |---|---| | `display-hero` | Hero headline — 88px, weight 500, DM Sans | | `display` | Section feature headline — 64px, weight 500 | | `heading-section` | Section H2 — 48px, weight 500, –0.48px tracking | | `heading-sub` | Sub-section H3 — 32px, weight 500 | | `heading-card` | Card title — 28px, weight 500 | | `body-large` | Lead paragraph / feature description — 20px | | `body` | Standard body copy — 16px, weight 400, 1.5 line-height | | `nav-link` | Navigation items — 16px, weight 500 | | `button-ui` | Button labels — 16px, weight 500, line-height 1.0 | | `label-mono` | Category labels, status tags — DM Mono 16px uppercase | | `caption` | Helper text, timestamps — 12px DM Sans | | `caption-mono` | Code-adjacent captions — DM Mono 12px uppercase | ### Principles - DM Sans weight 500 (medium) is the display standard — not bold, not light; a precise midpoint that feels authoritative without aggression - DM Mono uppercase is used strictly as annotation — it marks technical categories and data labels, never paragraphs - Letter-spacing is near-zero throughout; the faces' native spacing is trusted, not overridden - Line-height relaxes from 1.0 at hero scale to 1.5 at body — each tier breathes in proportion to reading distance - No web-font swap from system-ui; self-hosted woff2 ensures DM Sans renders consistently across enterprise environments ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. An 8px grid governs all spacing decisions. The scale is generous at the top (96px at `{spacing.4xl}`) and granular at the bottom (4px at `{spacing.xs}`), supporting the full range from page-section breathing room to inline badge padding. ### Grid & Container - Max content width: ~1280px - Full-bleed hero sections at 100vw, content constrained inside - Feature sections alternate between full-bleed dark (`{colors.background}`) and contained light (`{colors.surface}`) panels - Logo bars and trust rails use horizontal scroll or flex-wrap at narrow widths ### Whitespace Philosophy - Section-level spacing is generous — 96px vertical gaps separate hero from content, creating a premium editorial pace - Within cards and panels, 24px internal padding is the baseline; denser UIs (dashboards, data tables) drop to 16px - Horizontal white space on desktop text columns limits line length to ~60-70ch for reading comfort ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Navigation bar, inline elements, form fields | | Subtle (Level 1) | `0px 4px 8px rgba(27,49,57,0.04)` | Product thumbnails, light cards | | Card (Level 2) | `0px 16px 24px rgba(27,49,57,0.04), 0px 9px 13px rgba(27,49,57,0.035)` | Feature cards, panel containers | | Elevated (Level 3) | `0px 32px 40px rgba(27,49,57,0.05), 0px 16px 24px rgba(27,49,57,0.04)` | Dialog-weight panels, product screenshots | | Dialog (Level 4+) | `0px 72px 104px rgba(27,49,57,0.07), 0px 32px 40px rgba(27,49,57,0.05)` | Modals, large product previews, hero floaters | | Focus Ring | `0 0 0 2px {colors.link}` | Keyboard focus on interactive elements | **Shadow Philosophy**: Databricks uses a 6-layer, brand-tinted shadow system where every layer is tinted with the `{colors.shadow-soft}` forest-teal hue. This means shadows don't read as generic black-on-white — they warm slightly toward the canvas tone, tying elevation back to the dark-teal brand identity. The result is depth that feels native to the product rather than generic. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Buttons (all variants), large cards, nav, most containers | | `xs` | 2px | Nav tabs, micro-indicators, progress bars | | `sm` | 4px | Inline tags, small badges, form inputs, minor pills | | `md` | 20px | Tab selectors, pill-style toggle elements | | `pill` | 9999px | Cookie search fields, select-all toggles | The Databricks radius system is intentionally polarized: almost everything is sharp (`{rounded.none}` or `{rounded.xs}`), with `{rounded.md}` reserved for tab-navigation pills. This binary geometry keeps the interface feeling technical and purposeful — no casual rounding, no consumer-SaaS softness. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button variants - **`button-primary`** — `{colors.primary}` red-orange fill, white text, 0px radius, 8px 24px padding. The only high-priority action. One per viewport is the ideal; two is acceptable; three breaks the system. - **`button-secondary`** — `{colors.background}` dark teal fill with white border and white text. For "See demo" and secondary actions on dark hero backgrounds. - **`button-ghost`** — Transparent fill, `{colors.link}` blue text, no border. For tertiary actions and inline prompts ("Learn more →"). ### Cards Cards are flat-edged (`{rounded.none}`) with a 1px `{colors.border}` outline. Light-mode cards use `{colors.surface}` white. Dark-mode variants use `{colors.surface-teal}` for nested product screenshots and feature callouts. Internal padding is 24px at standard card scale. ### Inputs Standard inputs use `{colors.surface}` background with `{rounded.sm}` 4px corners and `{colors.border}` outline. On focus the border shifts to `{colors.link}` blue — the only blue highlight in an otherwise teal-and-red system. ### Badges / Tags Badges come in two variants: `{components.badge}` for light-surface contexts (warm off-white background, dark ink), and `{components.badge-dark}` for dark panels (surface-teal background, white ink). The `{components.tag-mono}` variant uses DM Mono uppercase for technical classification labels without a background fill. ### Navigation Sticky top navigation on `{colors.background}` dark teal. Logo at left, main nav links in `{typography.nav-link}` weight 500, CTA button ("Try Databricks") in `{colors.primary}` at top-right. Mega-menu panels reveal product categories with feature cards. Mobile collapses to hamburger with full-height drawer. ## Do's and Don'ts ### Do - Use `{colors.primary}` exclusively for the single most important CTA on any page — its power comes from scarcity - Apply `{rounded.none}` to all button shapes; the sharp edge is the Databricks typographic signature - Use `{typography.label-mono}` (DM Mono uppercase) for category labels, status indicators, and technical tags — never DM Sans in lowercase for these roles - Build on `{colors.background}` for hero sections and feature bands; reserve `{colors.surface}` white for reading-heavy content areas - Tint shadows with `{colors.shadow-soft}` (the forest-teal value) to maintain brand coherence across elevation levels - Reference `{colors.link}` for interactive focus rings and form field highlights — the one blue accent on dark teal backgrounds - Maintain generous vertical section spacing (`{spacing.4xl}` at 96px) between major page sections - Self-host DM Sans and DM Mono via woff2 to ensure rendering consistency in enterprise environments ### Don't - Don't use `{colors.primary}` red-orange as a decorative highlight, data-viz accent, or icon fill — it signals immediate action only - Don't soften button corners with any border-radius; even `{rounded.sm}` 4px erodes the sharp geometric identity - Don't mix DM Mono lowercase with DM Mono uppercase contexts — Mono is uppercase-only in this system's annotation convention - Don't apply the 6-layer shadow stack to flat UI elements (nav items, form fields) — elevation should follow actual content stacking, not decoration - Don't introduce mid-saturation blues, greens, or purples as UI colors — the palette is teal-dark + red-orange + blue-link; additional hues dilute the signal structure - Don't let line length in body text exceed ~70ch; DM Sans body at 1.5 line-height reads best in a contained column - Don't use `{colors.ink-secondary}` for CTA labels or primary navigation — it's a helper-text weight, not action weight - Don't place two `{components.button-primary}` red-orange CTAs in the same visual field; the second one cancels the first ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile XS | <400px | Single-column, stacked hero, full-width buttons | | Mobile | 400–767px | Max single column, reduced hero font size, hamburger nav | | Tablet | 768–1099px | Two-column grid begins, side-by-side feature cards | | Desktop | 1100–1365px | Full navigation, 3–4 column grids, product screenshot revealed | | Large Desktop | >1366px | Content constrained to ~1280px, larger hero type | ### Touch Targets - Primary buttons maintain minimum 44px height on mobile via padding adjustments - Navigation hamburger target area is 44px × 44px - Card tap areas extend to full card container for mobile ergonomics ### Collapsing Strategy - Navigation collapses from full mega-menu to hamburger drawer at 991px - Hero headline scales from 88px (desktop) down through 64px, 48px, 32px at successive breakpoints - Multi-column feature grids shift to single-column stacked layouts below 768px - Product screenshots in hero sections are hidden or reduced on mobile to prevent viewport crowding ### Image Behavior - Hero product screenshots use responsive containers, scaling proportionally - Logo bar images (partner logos) flex-wrap and reduce size on narrow viewports - Background images in CTA banners shift from decorative to hidden on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Text (on dark): `{colors.ink-inverted}` - Text (on light): `{colors.ink}` - Brand accent / CTA: `{colors.primary}` - Secondary text: `{colors.ink-secondary}` - Border: `{colors.border}` - Link: `{colors.link}` ### Example Component Prompts - "Build a hero section using `{colors.background}` (#1b3139) as the full-bleed background, white (`{colors.ink-inverted}`) headline in `{typography.display-hero}` (DM Sans 88px 500 weight), a lead paragraph in `{typography.body-large}` (DM Sans 20px 400), and a CTA button with `{components.button-primary}` (background `{colors.primary}` #eb1600, 0px border-radius, 8px 24px padding, DM Sans 16px 500 white text). Place a secondary 'See demo' button using `{components.button-secondary}` immediately to the right." - "Create a feature card using `{components.card}` (white background, 0px border-radius, 24px padding, 1px `{colors.border}` #90a5b1 outline). Card title in `{typography.heading-card}` (DM Sans 28px 500), body text in `{typography.body}` (DM Sans 16px 400 line-height 1.5), and a category label in `{typography.label-mono}` (DM Mono 16px 500 uppercase, color `{colors.ink-secondary}`)." - "Build a primary CTA button: background `{colors.primary}` #eb1600, text color `{colors.on-primary}` #ffffff, font `{typography.button-ui}` (DM Sans 16px 500), border-radius `{rounded.none}` 0px, padding 8px 24px. On hover, background shifts to `{colors.primary-hover}` #c81300, transition 0.15s cubic-bezier(0.4,0,0.2,1) over background-color." - "Design a top navigation bar on `{colors.background}` (#1b3139). Left: Databricks logo in white. Center: nav links in `{typography.nav-link}` (DM Sans 16px 500) using `{colors.ink-inverted}` white. Right: 'Try Databricks' button with `{components.button-primary}` styling. Sticky positioning, height 64px, horizontal padding `{spacing.xl}` 32px." - "Create a dark-surface content panel using `{components.card-dark}` (background `{colors.surface-teal}` #1b5162, 0px border-radius, 24px padding). Title in DM Sans 24px 700 white, supporting text in `{typography.body}` white, status tag using `{components.tag-mono}` (DM Mono uppercase, `{colors.ink-secondary}` color, no background). Apply a Level 2 card shadow tinted with `{colors.shadow-soft}` (#1b3139)." ### Iteration Guide 1. Start with `{colors.background}` (#1b3139) as the full-page canvas; only introduce `{colors.surface}` white sections for reading-heavy content areas 2. Brand accent `{colors.primary}` marks exactly one action per section — preserve its scarcity or the hierarchy collapses 3. All display text in DM Sans weight 500; all annotation/label text in DM Mono uppercase; body at weight 400 4. Elevation via the 6-layer teal-tinted shadow stack; no generic black box-shadows — keep `rgba(27,49,57,…)` tint across all levels 5. Link and focus states use `{colors.link}` #016bc1; this is the system's only blue accent — don't introduce secondary blues 6. Border radius is binary: `{rounded.none}` 0px for interactive elements and containers, `{rounded.sm}` 4px maximum for form inputs 7. DM Mono at 12px uppercase (`{typography.caption-mono}`) makes technical category tags and data annotations legible without competing with body type hierarchy --- ## 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 Databricks. Brand names and trademarks belong to their respective owners.