Databricks

Overview

Databricks is a unified data and AI platform designed for enterprise teams who demand both technical precision and visual clarity. The design system embodies 'Technical Minimalism'—a philosophy that strips away ornament while preserving sophistication through intentional color, measured typography, and purposeful whitespace. The brand personality is authoritative yet approachable: confident in its technical capabilities, but never condescending. The UI evokes a sense of control and clarity, transforming complex data workflows into intuitive, navigable experiences. Voice: direct, data-driven, solution-oriented. Example: 'Lakebase is serverless Postgres for applications that scale—no infrastructure overhead, full SQL power.'

Colors

The Databricks color system is anchored by a vibrant, action-oriented red (#eb1600) that commands attention on CTAs and critical UI elements. This primary red is paired with a deep navy secondary (#1b5162) used for secondary actions and supporting UI, and a near-black tertiary (#0b2026) reserved for the darkest surfaces and high-contrast text. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f5 → #eeede9 → #dce0e2) to create visual hierarchy without resorting to shadows. On-surface text is a sophisticated dark blue-gray (#1b3139, rgb(27, 49, 57)) that reads as authoritative without harshness. The outline palette (#778694 for primary, #c4ccd6 for variant) provides subtle borders and dividers. Primary (#eb1600) is used exclusively for high-prior

Typography

The type system is built on DM Sans, a geometric sans-serif that conveys technical competence while remaining warm and accessible. Display (60px, weight 500, -0.02em tracking) anchors hero sections with commanding presence. Headline-lg (40px, weight 500) and headline-md (28px, weight 500) establish section hierarchy with consistent -0.01em to 0em tracking. Body text (16px–18px, weight 400) maintains legibility at all sizes with 24–28px line-height. Labels and UI text use weight 500 at 12–14px with 0.01em tracking for precision. Code snippets use DM Mono at 14px, weight 400. All text over busy backgrounds or reduced-contrast surfaces receives a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) to ensure readability. Headings use weight 500 (not 600 or 700) to maintain the brand's refined, n

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a 24px gutter on desktop and 12px on mobile. Sections are separated by 40px (lg spacing) vertically, with 24px (md spacing) used for component-level separation. The container max-width of 1280px ensures content never feels stretched on ultra-wide displays. Whitespace is generous and intentional: the hero section uses 40px+ margins to create breathing room around the headline and CTAs. Forms and input groups use 12px gaps between fields (sm spacing) to avoid visual clutter. The grid is fluid below 768px, collapsing to single-column layouts with 12px gutters. All spacing adheres to the 8px unit system (4px, 12px, 24px, 40px, 64px) to maintain rhythm and predictability.

Elevation & Depth

Depth in the Databricks system is achieved through subtle, layered shadows and strategic use of surface colors rather than dramatic drop shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards, Inputs): 1px border in #c4ccd6 with a soft shadow of 0 2px 3px rgba(27, 49, 57, 0.02). Level 3 (Elevated Cards, Modals on hover): 0 4px 8px rgba(27, 49, 57, 0.04), 0 9px 13px rgba(27, 49, 57, 0.035). Level 4 (Drawer Cards, Prominent Overlays): 0 16px 24px rgba(27, 49, 57, 0.04), 0 32px 40px rgba(27, 49, 57, 0.05), 0 72px 104px rgba(27, 49, 57, 0.07). Shadows use the on-surfa

Shapes

The Databricks shape language is 'Precision Geometry'—sharp, intentional, and functional. Buttons and small interactive elements use 2px radius (sm) for a crisp, technical feel. Standard cards and containers use 8px radius (md) to soften edges while maintaining clarity. Larger containers and modals use 12px radius (lg). Input fields and search boxes use full 9999px radius (full) to create a distinct, approachable input aesthetic. The 2px default for buttons reflects the brand's technical rigor: not rounded enough to feel soft, but not sharp enough to feel harsh. This consistency across all int

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (#eb1600 background, white text, 8px 24px padding, 40px height, 2px radius) are used for high-priority actions like 'Try Databricks' and 'Explore the product'. On hover, the background transitions to #ff5f46 (primary-fixed) over 0.2s. Secondary buttons (#1b5162 background) support lower-priority actions like 'See demo'. Ghost buttons have transparent backgrounds with a 1px border (#778694) and on-surface text, transitioning to a light gray background on hover. All buttons use DM Sans weight 500 at 14px with 0.01em tracking.

Containers & Surfaces Cards use a 1px border in #c4ccd6 with 24px padding and 8px radius. The background is pure white (#ffffff) with a subtle shadow (0 2px 3px rgba(27, 49, 57, 0.02

Do's and Don'ts

**Do**

• Do use primary red (#eb1600) exclusively for high-priority CTAs and focus states—never for decorative elements or secondary UI.
• Do maintain 24px gutters and 40px section spacing to preserve the generous, uncluttered aesthetic that defines the brand.
• Do apply the 0.2s ease transition to all interactive state changes (hover, focus, active) for a smooth, professional feel.
• Do use DM Sans weight 500 for all headings and UI labels to maintain the refined, non-aggressive tone.
• Do layer shadows subtly using the rgba(27, 49, 57, opacity) color to maintain visual harmony and avoid harsh depth.
• Do use the full 9999px radius exclusively for input fields and search boxes to create a distinct, approachable input aesthetic.

**Don't**

• Don't use secondary red (#ff5f46) or orange tones for primary CTAs—reserve these for hover states and secondary emphasis only.
• Don't apply rounded corners larger than 12px to cards or containers; the brand uses precision geometry, not soft, organic shapes.
• Don't use drop shadows with high opacity or blur values; all shadows use rgba(27, 49, 57) at ≤7% opacity for subtlety.
• Don't mix DM Sans with other typefaces in the same component; maintain typographic consistency across all UI elements.
• Don't compress whitespace below 12px (sm spacing) in forms or below 24px (md spacing) between sections—the brand relies on breathing room.
• Don't use the tertiary navy (#0b2026) for body text or interactive elements; reserve it for the darkest backgrounds only.