CURATED · OPEN · FREE

dbt

The open standard for modern, AI-ready data transformation.

devdata

↓ Download design system (60 MB)Open in OpenDesign

Visit: https://www.getdbt.com

📦 Browse pack contents →

Identity DNA

open standarddata transformationAI-readydeveloper tool

A modern industrial workshop for data pipelines

Color

#FE6703Accent

#030711Ink

#374151Ink soft

#FFFFFFBG

#F5F3FFBG soft

#6B7280Muted

rgba(3,7,17,0.1)Line

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

Typography

transitional-serif · humanist-sans · monospace

display48px · 600
h232px · 600
body16px · 400

Headlines use a transitional serif for authority · Body text uses a clean humanist sans for readability · Code snippets use a neutral monospace font

Spacing

4px

8px

12px

16px

24px

32px

40px

48px

64px

Consistent 4px base grid with generous section padding (64px)

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Thin 1px borders for cards and inputs, heavier borders for interactive elements.

0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px rgba(0,0,0,0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle fade and scale transitions for hover states · Standard easing for most interactive elements

Subtle color shifts or background changes on interactive elements. · Standard pointer cursor with immediate visual feedback.

Components

button Primary buttons use a vibrant orange fill with black text and rounded corners. Secondary buttons use a transparent fill with a black border.
card White cards with subtle rounded corners (12px) and thin borders, often containing an icon, headline, and body text.
input Standard text inputs with rounded corners and thin borders.
hero Large, centered headline in a transitional serif font, followed by a subheadline and a prominent call-to-action button.

Voice & Don'ts

Tone Authoritative, professional, and slightly technical.
Headlines Bold, declarative statements emphasizing speed, trust, and modern standards.
CTAs Direct and action-oriented (e.g., 'Get started with dbt', 'Book a demo').

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
Avoid: Slang
Avoid: Overly casual language
Avoid: Hype-filled buzzwords

Inside the pack — real screenshots

dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko