dbt Labs Design System

Overview

dbt Labs' marketing site positions the analytics engineer as the audience and the marketing chrome reflects it. Analytics-engineer voltage. Where Snowflake leans on uppercase Texta-900 over isometric line-art and Databricks holds a cream-into-navy editorial inversion, dbt Labs runs near-black ink ({colors.terminal-black} — #030711) on a pure-white canvas with a single saturated transform-orange ({colors.primary} — #fe6703) reserved for the primary CTA. The hero — a single sentence about the open standard for AI-ready data transformation — sits at 64px Polymath weight 600, framed by two ribbon-arc gradients (a cyan-violet glow on the left and an orange swoosh on the right) that wrap around a paired video mockup beneath. Restraint in display weight, dynamic abstract chrome in the surround.

The chromatic system is structural plus gradient. The terminal-black ink does 757 occurrences of structural work — 384 as text, 371 as borders, 2 as background. Transform orange handles the CTA voltage and the AI-ready accent strip. Below the fold, three main product-feature cards each carry a distinct gradient backdrop: purple-to-blue on the "Transform data with SQL" card (the Fusion engine narrative), orange-to-magenta on the "Interactive lineage across projects" card, and cyan-to-violet on the "Automatically refactor models" card. The 13 brand-layer hex codes the extraction surfaces — #6355fd, #6a00ff, #062ae0, #be43b0, #d535c2, #23daff, #4400ff, #ff8c00, #ff2600, #ffde39, #ffae00, #fff069, #7853fd — appear exclusively inside these card backdrops, never as standalone UI surfaces. The gradients work as narrative devices: each card is about a different product capability and the color shift signals the change in subject.

Typography is three voices. Polymath (a custom proprietary display family) carries every h-level surface at weight 600. Polymath Text (the sibling text-variant) runs body and nav at weights 400–500. IBM Plex Mono does the work of an uppercase eyebrow tier, code blocks, and metadata strips at 10–16px / 500. The pairing reads as engineering-credible — display weight 600 holds the line on warmth without tipping into bold authority, and the mono eyebrow tier signals the developer-tools audience the way a sans-uppercase label would not.

Key Characteristics:

• Near-black on white as the primary surface — {colors.terminal-black} (#030711, 757 occurrences) is the dominant ink, paired with the pure-white canvas (163 occurrences).
• Single transform-orange voltage ({colors.primary} — #fe6703) reserved for the primary CTA pill and the AI-ready accent strip; the brighter {colors.primary-bright} (#ff8c00) handles inline ribbon gradients.
• Three gradient feature cards — purple-blue on "Transform data with SQL," orange-magenta on "Interactive lineage," cyan-violet on "Automatically refactor." 13 brand-layer hex codes appear only inside these card backdrops.
• Polymath + Polymath Text + IBM Plex Mono — three families, with Polymath at display, the text-variant at body, and IBM Plex Mono at eyebrows and metadata.
• 12 / 16px radius ladder — 30 occurrences of 12px on smaller surfaces, 36 of 16px on cards; the system has no 8px or 20px middle tier.
• Fully-rounded CTA — {rounded.full} 9999px on the primary and secondary buttons; cards stay at 12–16px.
• Terminal-black naming — the structural ink ladder runs --color-terminal-black-50 through --color-terminal-black-950, a developer-tools naming convention that signals the audience before any color is applied.
• 16px base spacing module (57 occurrences). Major rhythm at {spacing.base} (16px), {spacing.lg} (24px), {spacing.2xl} (40px), with section padding at 48–64px between bands.

Colors

Brand

• Transform Orange ({colors.primary} — #fe6703): frequency 5 — 4 as background, 1 as gradient. The dominant CTA voltage — wired as --color-transform-orange-600. Fills the primary "Get demo" pill in the top-nav and the "Read announcement" pill above the hero. Held in deliberate reserve against the near-black ink.
• Transform Orange Bright ({colors.primary-bright} — #ff8c00): frequency 8 — 2 as background, 6 as gradient. Wired as --color-transform-orange-500. The brighter amber variant used inside the AI-ready ribbon-arc and the "Works with your IDEs" stripe card.
• Transform Orange Deep ({colors.primary-deep} — #dd5604): wired as --color-transform-orange-700 but absent from the captured render. Reserved for hover/press states.

Gradient Palette

These 13 brand-layer hex codes appear exclusively inside gradient feature-card backdrops, never as standalone UI surfaces:

• Coalesce Purple ({colors.coalesce-purple} — #632ff5): frequency 21 — wired as --color-coalesce-purple-600. The dominant purple gradient stop, used on the "Transform data with SQL" card backdrop.
• Coalesce Purple Mid ({colors.coalesce-purple-mid} — #7853fd): frequency 1 as gradient. The mid-stop on the purple ribbon.
• Coalesce Purple Deep ({colors.coalesce-purple-deep} — #5720e1): wired as --color-coalesce-purple-700. The deepest purple variant.
• Coalesce Purple Pale ({colors.coalesce-purple-pale} — #9786ff): wired as --color-coalesce-purple-400. The light end-stop on purple ribbons.
• Electric Blue ({colors.electric-blue} — #062ae0): frequency 6 — 2 background, 4 gradient. The blue stop on the purple-to-blue ribbon-arc behind the hero video.
• Cyan ({colors.cyan} — #23daff): frequency 4 as gradient. The bright cyan stop on the "Automatically refactor" card backdrop.
• Magenta ({colors.magenta} — #be43b0): frequency 2 as gradient. The magenta stop on the orange-to-magenta ribbon over the "Interactive lineage" card.
• Pink ({colors.pink} — #d535c2): frequency 1 as gradient. A brighter pink-magenta on the lineage card.
• Amber ({colors.amber} — #ffae00): frequency 2 — 1 background, 1 gradient. The mid-amber on the AI-ready ribbon.
• Yellow ({colors.yellow} — #ffde39): frequency 4 as gradient. The yellow stop on the orange-to-yellow ribbon over the "Works with your IDEs" panel.
• Yellow Pale ({colors.yellow-pale} — #fff069): frequency 1 as gradient. The pale-yellow end-stop.

Surface

• Terminal Black ({colors.terminal-black} — #030711): frequency 757 — 384 as text, 371 as borders, 2 as background. The dominant near-black ink — carries every body paragraph, every hero h1, every nav link, and the dark "Works with your IDEs" panel background. Wired as --color-terminal-black-950. Pure near-black with a slight blue undertone (OKLCH hue 260).
• Terminal Black 800 ({colors.terminal-black-800} — #1e2939): frequency 10 — 5 text, 5 border. The slightly-lighter dark used on icon strokes and on the IDE-mockup panels. Wired as --color-terminal-black-800.
• Terminal Black 500 ({colors.terminal-black-500} — #6a7282): frequency 2. The mid-gray used on muted body-paragraph copy beneath the hero. Wired as --color-terminal-black-500.
• Terminal Black 200 ({colors.terminal-black-200} — #e5e7eb): frequency 16 — 4 background, 12 border. The dominant hairline tone — used on every card outline, every input border, and the divider beneath the customer logo wall. Wired as --color-terminal-black-200.
• Canvas ({colors.canvas} — #ffffff): frequency 163 — 70 as text (reversed on dark surfaces), 23 as background, 70 as border. Pure white floor across the entire above-fold and the body bands.

Semantic

• Blue Link ({colors.blue-link} — #0467b7): wired as --color-blue-600 but absent from the captured render. Reserved for inline-link text in long-form prose contexts (blog posts, documentation).

Typography

Font Families

The system runs three voices: Polymath for every display, h2, h3 surface (weights 400–700); Polymath Text for every body, nav, and emphasis surface (weights 400–600); and IBM Plex Mono for small-caps eyebrows, code blocks, and metadata strips (weights 400–500). Polymath and Polymath Text are custom proprietary families from dbt Labs' brand refresh — display and text-variant siblings that share metrics but differ in stroke contrast (Polymath has higher contrast, Polymath Text reads tighter at body sizes). IBM Plex Mono is open-source via Google Fonts.

The mono tier does the labor a sans uppercase eyebrow tier would normally do. The "FROM YOUR LABS" or "WHO IT'S FOR" labels above section headings render in IBM Plex Mono 12–14px / 500 — the result reads quietly technical without committing to an italic or small-caps variant of the body family.

Hierarchy

Principles

Display weight stays at 600. The hero h1 at 64px / 600 sits one step heavier than dbt's nearest peers (Databricks at 500, Snowflake at 900) — a deliberate middle that holds engineering-credible authority without committing to either editorial restraint or industrial mass. Polymath at 600 reads as a contemporary serif-influenced grotesk, slightly higher contrast than Inter, with measured display tracking.

The body-variant Polymath Text does the running-text labor. The pairing — display at Polymath, body at Polymath Text — is closer to a print magazine's serif/sans split than to a typical SaaS marketing page's single-family hierarchy. The mono eyebrow tier at IBM Plex Mono 12–14px / 500 carries the small-caps duty an italic or true small-caps variant would normally handle.

Note on Font Substitutes

Polymath is a custom proprietary display family from dbt Labs' 2024 brand refresh, with a sibling Polymath Text variant. The closest open-source substitute is Inter at weights 600/400 with a slight tracking adjustment (-0.01em on display sizes to match Polymath's tighter cap height); General Sans is closer in feel but not free. For the mono tier, IBM Plex Mono is itself open-source via Google Fonts — no substitute is needed.

Layout

Spacing System

• Base unit: 16px — the dominant gap value, appearing 57 times in the captured page.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 48px · {spacing.4xl} 64px.
• Section padding (vertical): ~64px between major sections on the white canvas (the dominant compound-padding value at 64px 0px, 11 occurrences).
• Card internal padding: {spacing.2xl} (40px) for the gradient feature cards and 24px for the customer cards.
• Top-nav padding: {spacing.base} (16px) vertical, {spacing.lg} (24px) horizontal.

Grid & Container

• Max content width: ~1136px on display headlines, ~1312px on the gradient feature-card band, ~1456px on the customer logo wall and footer.
• Hero block: white canvas with the headline centered, framed by two ribbon-arc gradients (cyan-violet left, orange right) that wrap around the paired video mockup beneath.
• Gradient feature-card band: stacked single-column layout with three full-width cards — "Transform data with SQL" (purple gradient), "Interactive lineage across projects" (orange-magenta gradient), "Automatically refactor models" (cyan-violet gradient). Each card pairs a left-column heading / body / CTA with a right-column dark IDE mockup showing the actual product UI.
• "Choose dbt" band: 3-up feature cells on white, divided by hairlines, each carrying an icon + heading + body paragraph.
• "Works with your IDEs" stripe: a single full-width orange-amber gradient panel listing IDE integrations (Cursor, Claude Code, dbt Studio, VS Code).
• Customer logo wall: monochrome customer logos arranged in a 5-column grid, each rendered in the terminal-black ink at uniform size.

Rhythm

The page alternates between white density and gradient bursts. The hero is white with the ribbon-arcs as the only chromatic moment. The gradient feature-card band is the page's chromatic high point — three full-width gradient panels in succession. The "Choose dbt" 3-up returns to white density. The "Works with your IDEs" amber stripe inverts again. The customer band returns to white. This rhythm — white-dense / gradient-burst — is the page's structural device.

Elevation

The system has essentially no shadow tier. The captured page has no extracted shadow values; depth comes entirely from gradient surfaces and from {colors.terminal-black-200} hairline borders on cards.

• Flat (no shadow): hero, every body band, the customer cards, the footer — 100% of surfaces.
• Gradient elevation: the three feature cards each carry a saturated gradient backdrop that lifts them visually off the white canvas — gradient as elevation.
• Hairline outlines: {colors.terminal-black-200} (#e5e7eb) carries every card outline and input border. Single hairline tone across the system.

Shapes

The radius scale is two-step: 12px and 16px on cards, fully-rounded pill on CTAs.

• {rounded.none} 0px — full-bleed bands and the top-nav surface.
• {rounded.xs} 4px (5 occurrences) — small chips and narrow input borders.
• {rounded.sm} 8px (3 occurrences) — secondary card variants.
• {rounded.md} 12px (30 occurrences) — the dominant smaller-surface radius. Inputs, secondary chips, the IDE-mockup panels inside feature cards.
• {rounded.lg} 16px (36 occurrences) — the dominant card radius. Every gradient feature card, every customer card, the "Works with your IDEs" stripe.
• {rounded.full} 9999px — the primary CTA pill ({component.button-primary}), the secondary outlined CTA, the ghost CTA.

There is no 8px or 20px middle tier and no 24px+ tier. The system commits to 12 and 16 as the card radius, with the CTA going to a fully-rounded pill. The pill treatment is the warmest surface in the system — the transform-orange "Get demo" pill on the white hero is the single most-tappable element on the page.

Components

button-primary — The signature CTA. Transform-orange {colors.primary} fill, white text, fully-rounded {rounded.full} pill, 12x24 padding, 44px height. "Get demo" is the canonical top-nav instance; "Read announcement" appears above the hero h1.

button-secondary — White fill with terminal-black text and a 1px {colors.terminal-black-200} border, fully-rounded pill. Used for "Book a Demo" and tertiary CTAs across the body.

button-ghost — Transparent fill with terminal-black text, fully-rounded pill. The lightest interactive surface — used inside chat-widget popovers and secondary nav clusters.

top-nav — White surface, 64px height, 16x24 padding. dbt Labs wordmark flush left, product-nav links (Product, Solutions, Customers, Resources, Community, Pricing) center, "Get demo" transform-orange CTA + login cluster flush right.

nav-link — Transparent background, terminal-black text in {typography.nav-link} (16px / 400 Polymath Text), 8x16 padding. No hover background visible in the captured surface.

hero-heading — Terminal-black text on the white hero, Polymath 64px / 600. The display tier — engineering-credible authority without committing to either editorial restraint or industrial mass.

section-heading — Terminal-black text, Polymath 48px / 600. Used for "Choose dbt for speed, trust, and delivering real results," "Top companies use dbt to deliver real impact," "Find dbt everywhere."

body-paragraph — Default terminal-black running-text at Polymath Text 16px / 400. The hero sub-paragraph and section leads.

body-paragraph-muted — {colors.terminal-black-500} (#6a7282) variant for secondary copy beneath the hero h1.

eyebrow-mono — Transform-orange text in IBM Plex Mono 14px / 500. Sits above section displays — the small-caps tier the system uses instead of a colored eyebrow sans. The single chromatic moment of orange outside the CTA pill.

card-feature-purple — Coalesce-purple {colors.coalesce-purple} fill, white text, {rounded.lg} 16px radius, 40px internal padding. The "Transform data with SQL" feature card — pairs the heading / body / CTA on the left with a dark IDE mockup on the right.

card-feature-orange — Transform-orange-bright {colors.primary-bright} fill, white text, {rounded.lg} 16px radius, 40px padding. The "Interactive lineage across projects" card.

card-feature-cyan — Cyan {colors.cyan} fill, terminal-black text, {rounded.lg} 16px radius, 40px padding. The "Automatically refactor models and columns" card — the lightest gradient backdrop, hence dark text.

card-ide-dark — Terminal-black {colors.terminal-black} fill, white text, {rounded.md} 12px radius, 24px padding. The IDE-mockup panel that sits inside each gradient feature card — shows the dbt Fusion engine and lineage UI in monospace.

card-customer — White fill, terminal-black text, 1px {colors.terminal-black-200} border, {rounded.lg} 16px radius, 24px padding. The customer-quote card — holds product testimonials from JetBlue, KPMG, and similar enterprise references.

card-ide-stripe — Transform-orange-bright {colors.primary-bright} fill, terminal-black text, {rounded.lg} 16px radius, 24px padding. The "Works with your IDEs" stripe panel listing integration logos (Cursor, Claude Code, dbt Studio, VS Code).

text-input — White surface, terminal-black text, 1px {colors.terminal-black-200} border, {rounded.md} 12px radius, 12x16 padding, 44px height. Form-field outline for the demo-request and newsletter forms.

Do's and Don'ts

Do keep the transform-orange CTA the single primary chromatic moment outside gradient cards. The system has one orange surface on the body chrome — multiplying it into secondary buttons or inline accents dilutes the only chromatic voltage on the page.

Do use the gradient feature cards as narrative devices. Each card backdrop signals a different product capability (Fusion engine on purple, lineage on orange-magenta, refactor on cyan). Applying the same gradient to all three or to a homogeneous feature set reads as decorative rather than as informational.

Do render small-caps eyebrows in IBM Plex Mono 12–14px / 500. The system uses no sans uppercase eyebrow tier — reaching for an all-caps Polymath Text label breaks the typographic split.

Do keep display weight at Polymath 600. The hero at 64px / 600 sits deliberately in the middle ground between editorial restraint (Stripe at 300) and industrial mass (Snowflake at 900). Bumping to 700+ reads as a fintech-style shout.

Don't use {colors.terminal-black-200} (#e5e7eb) for background fills or text — it is a hairline-only token (the dominant border surface). For a light surface, use {colors.canvas} (#ffffff); for an off-white, the system does not expose a token.

Don't introduce an 8px or 20px middle radius on cards. The system commits to 12 and 16 as the card scale; adding a middle value softens the contrast between body chrome and the fully-rounded CTA pill.

Don't apply gradient backdrops to general body surfaces. The 13 brand-layer hex codes ({colors.coalesce-purple}, {colors.cyan}, {colors.magenta}, etc.) exist only inside the three product-feature cards and the "Works with your IDEs" stripe — using them as standalone UI backgrounds reads as decorative chaos.

Don't swap {colors.terminal-black} (#030711) for a softer slate-gray or charcoal. The system commits to the near-pure-black ink against the pure-white canvas; softening to a slate undercuts the developer-tools positioning the --color-terminal-black-950 token name signals.

Known Gaps

• Hover and focus states: the captured surface exposes resting states only. The {colors.primary-deep} (#dd5604) variant is wired as --color-transform-orange-700 but absent from the captured render — reserved for the hover/press state on the primary CTA.
• Form input states: {component.text-input} carries the resting state; error / validation styling lives inside the demo-request flow not exposed on the marketing surface.
• Dark mode for body bands: the captured marketing surface is light-only. The dbt Cloud product UI carries a dark variant not represented here.
• Motion: the ribbon-arc gradients animate on scroll (subtle parallax) and the gradient feature cards have hover-state interaction; the spec captures end-state values only. Easing curves, duration, and stagger timing live in the live page runtime.
• Product surfaces: this DESIGN.md captures the marketing site only. The dbt Cloud IDE, the lineage UI, the Studio (Cursor-like dbt-specific editor), and the dbt Docs surface each carry their own token systems not represented here.
• Coalesce sub-brand: the --color-coalesce-purple-* family is wired as the sub-brand identity for the Coalesce conference (coalesce.getdbt.com). On the main marketing site it appears only inside gradient feature-card backdrops, not as a standalone sub-brand chrome surface.
• Polymath custom-family substitution: Polymath and Polymath Text are proprietary; reproducing the system at scale without the licensed family is a real limitation. Inter at weights 600/400 is the closest open-source approximation but has different stroke contrast.