What is dbt Labs' primary brand color?

dbt Labs' brand voltage is transform orange — wired in CSS as --color-transform-orange-600 (#fe6703, the saturated 'fire-orange' on the CTA pill) and --color-transform-orange-500 (#ff8c00, the brighter 'amber' used inside ribbon gradients and the AI-ready accent strip). The orange appears in two places on the captured marketing surface: the primary CTA pill ('Get demo', 'Read announcement') and the two ribbon-arcs that frame the hero video mockup. There is no secondary orange CTA, no hover-state variant rendered, and no inline-link orange — the brand color is held in deliberate reserve against the near-black-on-white body chrome.

What typefaces does dbt Labs use, and what should I use as substitutes?

dbt Labs runs three voices: Polymath for every display and h2 surface (a custom serif-influenced grotesk at weights 400–700), Polymath-text for every body and nav surface (a sibling display-text variant at weights 400–500), and IBM Plex Mono for small-caps eyebrows, code blocks, and metadata strips. The hero h1 sits at 64px Polymath weight 600; body at 14–18px Polymath-text weight 400; mono at 10–16px IBM Plex Mono weight 400–500. Polymath is a custom proprietary family from dbt Labs' brand refresh. The closest open-source substitute is Inter at weights 600/400 with a slight tracking adjustment; IBM Plex Mono is itself open-source via Google Fonts and transfers cleanly.

Why does dbt Labs use gradient backdrops on feature cards?

The three main product-feature cards each carry a distinct gradient backdrop — purple-to-blue on the 'Transform data with SQL' card, orange-to-magenta on the 'Interactive lineage across projects' card, and cyan-to-violet on the 'Automatically refactor models' card. The gradients work as narrative devices: each card is about a different product capability (Fusion engine for SQL transformation, lineage UI, refactor automation) and the color shift signals the change in subject. The 13 brand-layer hex codes the extraction surfaces — #6355fd, #6a00ff, #062ae0, #be43b0, #d535c2, #23daff, #4400ff, #ff8c00, #ff2600, #ffde39, #ffae00, #fff069, #7853fd — all appear exclusively inside these card backdrops, never as standalone UI surfaces.

Why is the ink called 'terminal black' in the CSS variables?

dbt Labs' design tokens are namespaced --color-terminal-black-50 through --color-terminal-black-950 — a developer-tools naming convention that signals the brand's positioning even before any color is applied. The 'terminal-black' family runs from #f9fafb (50, the lightest off-white) through #030711 (950, the dominant near-black ink) in 9 steps. The naming distinguishes the structural ink ladder from the 'transform-orange' brand voltage and from the 'coalesce-purple' sub-brand (used for the Coalesce conference). The convention reflects dbt's analytics-engineer audience — colors are tokens you reference by name, not by hue.

Can I use this DESIGN.md to build my own React analytics-tool marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce dbt Labs' specific moves: near-black ink on pure white as the primary surface, single transform-orange voltage on the CTA only, gradient-fill feature cards for distinct product narratives, IBM Plex Mono small-caps eyebrows, and the 12 / 16px radius ladder. The token references resolve cleanly without invention. The one move that only works at scale: the gradient-feature-card strategy requires the cards to each carry a distinct product story — applying the same pattern to a homogeneous feature set reads as decorative rather than as informational.

dbt Labs Design System

dbt Labs' marketing system pairs near-black ink on white with transform orange #fe6703 CTAs and gradient feature cards.

About dbt Labs DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source getdbt.com

Analytics & Data
Developer Tools & IDEs

dbt Labs' marketing site positions the analytics engineer as the audience and the marketing chrome reflects it. The hero "The open standard for modern, AI-ready data transformation" sits at 64px Polymath weight 600 in near-black on a pure-white canvas, framed by two transform-orange ribbon-arcs (a left-side cyan-violet glow and a right-side orange swoosh) that wrap around a paired video mockup beneath. The composition reads closer to a developer-conference keynote than to a SaaS pricing page — restrained display type plus dynamic abstract chrome, with the brand orange surfacing only on the primary CTA pill and on the AI-ready accent strip.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens drawn from the 42 raw hex values rendered on the page — the near-black ink (`#030711`, 757 occurrences, wired as `--color-terminal-black-950`) as the dominant text and border surface, transform orange (#fe6703 / #ff8c00, the brand-layer voltage) on CTAs and inline accents, and a constellation of 13 gradient-only brand hex codes (purple, blue, magenta, cyan, yellow) that appear exclusively inside feature-card backdrops. 16 typography tokens span Polymath (display) and Polymath-text (body) at weights 400–600 plus IBM Plex Mono for small-caps eyebrows, code blocks, and metadata strips. 18 components cover the orange-pill primary CTA, the gradient feature cards, the dark IDE-mockup panels, the hairline-bordered customer cards, and the form-input ladder.

Feed this file to Claude or Cursor and it reproduces dbt Labs' specific moves: near-black on white as the primary surface, single transform-orange voltage on the CTA only, gradient-fill feature cards for the three product narratives, and the 12 / 16px radius ladder with no 8px or 20px middle tier. The token references resolve cleanly — `{colors.transform-orange}` for the CTA voltage, `{colors.terminal-black}` for ink, `{typography.display-xl}` for the hero. The one move worth borrowing only if your product is itself developer-facing: the gradient-feature-card strategy works because the three cards each carry a distinct product story (Fusion engine, lineage, refactor) — applying the same pattern to a homogeneous feature set would read as decorative rather than as informational.

What makes it distinct

Single transform-orange voltage#fe6703 fills the primary CTA pill and a single inline highlight on the hero; the brand color is held in reserve against the near-black ink
Gradient feature cardsthe 3 main product-feature panels cycle through purple-blue, orange-magenta, and cyan-violet gradients; 13 brand-layer hex codes appear only inside these card backdrops
Polymath + Polymath-text + IBM Plex MonoPolymath carries display at 600 weight, Polymath-text runs body at 400–500, IBM Plex Mono handles small-caps eyebrows and code metadata
12 / 16px radius ladder30 occurrences of 12px on smaller surfaces, 36 of 16px on cards; the system has no 8px or 20px tier
Terminal-black palettethe color tokens are named --color-terminal-black-50 through 950, signaling the developer-tools positioning even before any color is applied

Live at getdbt.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

getdbt.com

Explore dbt Labs

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

dbt Labs design system FAQ

Common questions about dbt Labs's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

dbt Labs — official site

dbt Labs' public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.