# dbt · Design system migration spec

> Source: https://www.getdbt.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern developer tool aesthetic, balancing authority and approachability with clean typography and bold accent colors.

## 1. Identity DNA

The dbt design system is the modern industrial workshop for data pipelines—a place where authority meets precision. Built on the identity of an open standard for modern, AI-ready data transformation, it pairs the reliability of a well-oiled machine with the clarity of a clean blueprint.

**One-liner:** The open standard for modern, AI-ready data transformation.
**Keywords:** open standard · data transformation · AI-ready · developer tool
**Analogy:** A modern industrial workshop for data pipelines

## 2. Color

The palette is high-contrast ink on clean white, punctuated by a vibrant orange accent for primary actions. This stark foundation ensures readability and directs focus with purpose.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F3FF` | card background |
| `--ink` | `#030711` | body text |
| `--ink-soft` | `#374151` | secondary text |
| `--muted` | `#6B7280` | placeholder |
| `--accent` | `#FE6703` | single accent |
| `--line` | `rgba(3,7,17,0.1)` | divider |

**Color principle:** High-contrast ink on clean white, punctuated by a vibrant orange accent for primary actions.

Every color choice reinforces a principle of clarity and decisive action.

## 3. Typography

The typographic voice is a studied contrast: headlines use a transitional serif for authority, while body text employs a clean humanist sans for readability. Code snippets are set in a neutral monospace font, maintaining the system's technical honesty.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.05 | 600 | -1px | Hero headline |
| h2 | 32px | 1.2 | 600 | -0.5px | Section headline |
| body | 16px | 1.5 | 400 | 0px | Main body text |

**Type rules:**
- Headlines use a transitional serif for authority
- Body text uses a clean humanist sans for readability
- Code snippets use a neutral monospace font

## 4. Spacing

A consistent 4px base grid establishes the rhythmic foundation for all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 px
- **Rhythm:** Consistent 4px base grid with generous section padding (64px)

## 5. Surfaces

Surfaces are defined by depth and delineation, using thin 1px borders for cards and inputs. Subtle, layered shadows provide just enough elevation to separate elements without visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 3px rgba(0,0,0,0.1)
  - 0 4px 6px rgba(0,0,0,0.1)
- **Borders:** Thin 1px borders for cards and inputs, heavier borders for interactive elements.

## 6. Layout

The layout skeleton is a standard 12-column grid, providing a robust structure for content. Responsive breakpoints for mobile and tablet ensure the framework adapts cleanly across contexts.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard 12-column grid with responsive breakpoints for mobile and tablet.

## 7. Motion & Interaction

Motion is minimal and purposeful, serving only as clear UI feedback. Subtle fade and scale transitions on hover states use standard easing to feel predictable and immediate.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle fade and scale transitions for hover states
  - Standard easing for most interactive elements

- **Hover:** Subtle color shifts or background changes on interactive elements.
- **Click:** Standard pointer cursor with immediate visual feedback.
- **Transition:** 150ms to 200ms transitions for color, background, and transform properties.
- **Keyboard:** Standard focus ring for keyboard navigation.

## 8. Voice & Don'ts

The editorial voice is authoritative, professional, and slightly technical. It favors bold, declarative headlines and direct, action-oriented calls to action, avoiding slang, overly casual language, and hype-filled buzzwords.

- **Tone:** Authoritative, professional, and slightly technical.
- **Headline style:** Bold, declarative statements emphasizing speed, trust, and modern standards.
- **CTA style:** Direct and action-oriented (e.g., 'Get started with dbt', 'Book a demo').
- **Avoid:** Slang / Overly casual language / Hype-filled buzzwords

### Don'ts
- ❌ don't use playful or whimsical typography — screenshot shows a serious transitional-serif for headlines
- ❌ don't use a muted or monochrome palette — screenshot shows a vibrant orange accent color
- ❌ don't use heavy drop shadows — screenshot shows clean, flat surfaces with minimal elevation
- ❌ don't use rounded containers for all elements — screenshot shows sharp-edged buttons and cards
- ❌ don't use dense, crowded layouts — screenshot shows generous whitespace and clear sections
- ❌ don't use complex decorative illustrations — screenshot shows simple, clean iconography

The system deliberately excludes playful typography, muted palettes, and dense, crowded layouts.

## System Prompt (paste into AI tool)

```
The dbt Labs site is a modern developer tool SaaS focused on data transformation and AI readiness. It uses a clean, professional aesthetic with a primary white background, near-black ink, and a vibrant orange accent. Typography combines a transitional-serif for headlines with a humanist-sans for body text, and a monospace font for code. The layout is spacious with a 12-column grid. Key elements include large hero sections, clean white cards with thin borders, and prominent orange call-to-action buttons. Critical constraints: avoid playful or whimsical elements, never use a muted palette, and maintain generous whitespace throughout. The overall feel is authoritative, trustworthy, and technically precise.
```