---
title: "Drizzle ORM design system"
variant: extended
source: https://orm.drizzle.team/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/orm-drizzle-team)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Drizzle ORM · Design System

> Quiet surfaces, playful details, developer-first clarity.

**Theme:** light · **Industry:** devtools · **Source:** https://orm.drizzle.team/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Drizzle’s homepage pairs a restrained white-and-gray interface with hand-drawn character art and dense, practical product evidence. A compact sans-serif system, subtle outlines, and broad white space keep benchmarks, integrations, studio previews, and community content easy to scan.

## North star

Keep the interface nearly monochrome and information-dense, then use small hand-drawn details to add warmth without competing with product evidence.

## Overview

The visual strategy is intentionally quiet: pure white (#ffffff) dominates the canvas, while pale gray (#f6f6f7) distinguishes soft panels and cards. Medium charcoal (#444444) carries most text; the darker blue-gray (#282b3b) and near-black tones (#222222, #0a0a0a) are reserved for selective labels, code-like details, and emphasis. Hairline borders (#e8e8e8) define cards without making the interface feel heavy. System sans-serif typography supplies a familiar developer-tool tone, with compact labels and monospace reserved for small code or data tokens. The layout centers content in a relatively narrow column, alternating feature explanations with product evidence, integrations, and community material. Hand-drawn droplet mascots and small illustrations provide warmth against otherwise functional UI captures and tables. Generous vertical pauses separate sections, while internal card layouts remain dense and information-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and the clean backgrounds behind product previews, cards, and open content areas. |
| Soft Graphite | `#444444` | `--color-soft-graphite` | neutral | Main body copy, ordinary links, and most readable text across the light interface. |
| Cloud Panel | `#f6f6f7` | `--color-cloud-panel` | surface | Quiet section panels, soft card surfaces, and muted utility controls. |
| Fine Divider | `#e8e8e8` | `--color-fine-divider` | semantic | Thin card and component outlines that separate content without strong contrast. |
| Midnight Slate | `#282b3b` | `--color-midnight-slate` | neutral | Secondary muted text and selected dark UI emphasis, including darker action treatments. |
| Near Ink | `#222222` | `--color-near-ink` | neutral | Headings, button labels, and other high-contrast text accents. |
| Carbon Black | `#0a0a0a` | `--color-carbon-black` | neutral | Tiny badge and monospace-style details; not a broad page background or dominant brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f7` (Cloud Panel) · `--color-text` → `#444444` (Soft Graphite) · `--color-text-muted` → `#282b3b` (Midnight Slate) · `--color-border` → `#e8e8e8` (Fine Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#444444` | `#ffffff` | 9.74:1 | AAA |
| `#444444` | `#f6f6f7` | 9.02:1 | AAA |
| `#282b3b` | `#ffffff` | 14.01:1 | AAA |
| `#282b3b` | `#f6f6f7` | 12.97:1 | AAA |

### Gradients

- `linear-gradient(270deg, rgba(250, 250, 250, 0), rgba(255, 255, 255, 0.58) 90%, rgb(255, 255, 255))`
- `linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(255, 255, 255, 0.58) 90%, rgb(255, 255, 255))`
- `linear-gradient(270deg, rgba(247, 247, 247, 0), rgba(247, 247, 247, 0.7) 50%, rgb(248, 248, 248))`
- `linear-gradient(90deg, rgba(247, 247, 247, 0), rgba(247, 247, 247, 0.7) 50%, rgb(248, 248, 248))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 500, 700, 400, 600 | Headings, body copy, navigation, links, buttons, and interface labels. | Inter |
| Menlo | `--font-mono` | webfont | 500, 700 | Small code-like labels and data tokens within technical interface details. | Roboto Mono |

- **ui-sans-serif:** Use a clean system-style sans; measured weights span 400–700. Keep tracking neutral and casing natural, with compact labels.
- **Menlo:** Use sparingly at small sizes, with medium or bold weight; preserve a technical, compact feel.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 600 | 1.5 | 0 | — | ui-sans-serif | Hero headline introducing the ORM in a concise, prominent line. |
| h2 | 20px | 500 | 1.5 | 0 | — | ui-sans-serif | Section headings for features, performance, pricing, and community. |
| body | 16px | 400 | 1.5 | 0 | — | ui-sans-serif | Explanatory copy, supporting descriptions, and general page text. |
| caption | 12px | 500 | 1.42 | 0 | — | ui-sans-serif | Small supporting notes, contributor labels, and compact metadata. |
| button | 14px | 500 | 1 | 0 | — | ui-sans-serif | Primary and secondary action labels. |
| link | 12px | 700 | 1.42 | 0 | — | ui-sans-serif | Compact bold links within navigation and supporting content. |
| code | 10px | 500 | normal | 0 | — | Menlo | Small monospace tokens in technical previews and data labels. |

OpenType features in use: `"calt", "rlig", "ss01"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 9, 10, 12, 16, 20 px.
- Section rhythm 36px · element gap 6px · card padding 10px · max content width —.

Use a centered, restrained content column with a compact top navigation and announcement strip. The hero pairs a short headline and quick links with a playful product illustration. Continue through vertically separated feature sections, alternating text with tables, charts, integration grids, and Studio imagery. Align most content to a shared center, but let product previews span wider than accompanying copy. Maintain a compact rhythm inside cards and a generous rhythm between major sections; avoid inventing a fixed maximum width not present in the measurements.

## Shape & elevation

- Radius: button `3px` · input `4px` · card `8px` · media `50%` · badge `2px` · link `9999px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `7px` · pill `9999px`
- Shadow `sm` (card, input, other): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.075) 0px 2px 4px 0px`
- Shadow `inset` (other, text): `rgb(205, 205, 230) 0px -2px 0px 0px inset, rgb(255, 255, 255) 0px 0px 1px 1px inset, rgba(30, 35, 90, 0.4) 0px 1px 2px 1px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.06) 0px 1px 0px 0px`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The page is mostly flat, with white space doing more work than shadow. Use pale surfaces and fine gray borders to separate cards and controls; measured cards use rounded corners. Apply only a restrained soft shadow to selected controls or previews, and keep layered effects subtle so interface evidence remains legible.

## Imagery

Use hand-drawn droplet mascots and small playful sketches as distinctive accents, especially near hero and feature content. Pair them with realistic product captures: benchmark charts, database tables, integration logos, and community posts. Keep illustrations lightly colored and outlined; avoid polished 3D or large photographic backgrounds. Screenshots should remain crisp, rectangular, and information-rich.

## Components

### Top navigation

A slim header with brand mark, centered pill-like navigation, and compact utility controls on the right; separate it with a faint hairline.

### Hero quick links

Short headline and language badges sit beside four compact shortcut tiles on soft gray surfaces.

### Feature card

White card with a fine #e8e8e8 outline, softly rounded corners, and concise technical content.

### Benchmark preview

A tidy grid of charts and runtime controls, presented as a product capture with restrained panel borders.

### Integration list

Compact rows of provider names and small logos arranged in a simple two-column surface.

### Dark action button

Use a compact dark slate fill for prominent actions, with short, legible white labeling and minimal decoration.

### Community feed

A multi-column stream of testimonial cards with small avatars, short text, and occasional embedded media.

### Measured component styles

- **Primary button** (“Get Started”): background #f6f6f7 · text #222222 · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Secondary button** (“Give us a star”): background #fbfbfc · text #282b3b · border 1px solid #e4e5e6 · radius 3px · padding 10px 20px · 500 14px ui-sans-serif
- **Link** (“syntax.fm”): transparent background · text #444444 · radius 0px · padding 0px · 500 12px ui-sans-serif
- **Input** (“Bun v1.3.13 / Bun SQL Bun v1.3.13 / node”): background #ffffff · text #222222 · radius 4px · padding 0px 12px 0px 30px · 500 12px ui-sans-serif · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0,
- **Card** (“ORM v0.32.1 release improved indexes API”): background #ffffff · text #444444 · border 1px solid #e8e8e8 · radius 8px · padding 8px 12px · 500 12px ui-sans-serif
- **Badge** (“sort”): background #fafafa · text #0a0a0a · border 1px solid #e4e5e6 · radius 2px · padding 1px 3px · 500 9.75px Menlo

## Do

- Keep the main canvas white and visually quiet.
- Use pale gray panels to group practical interface content.
- Favor concise headings and compact, readable labels.
- Use hand-drawn mascots as small supporting accents.
- Show real-looking technical evidence in charts and tables.
- Separate major sections with generous vertical pauses.

## Don't

- Do not introduce large saturated brand-color blocks.
- Do not turn every card into a heavily elevated panel.
- Do not replace the simple sans-serif system with display typography.
- Do not use decorative gradients as a dominant page treatment.
- Do not let mascot art obscure product details or text.
- Do not compress major sections into one dense dashboard.

## Agent prompt

Build a new developer-tool page in the Drizzle visual style. Use Gallery White (#ffffff) as the canvas, Cloud Panel (#f6f6f7) for quiet grouping, Soft Graphite (#444444) for primary reading text, and Fine Divider (#e8e8e8) for subtle outlines. Reserve Midnight Slate (#282b3b), Near Ink (#222222), and Carbon Black (#0a0a0a) for selective emphasis and tiny technical details. Use a clean system sans-serif with neutral tracking and a small monospace accent for code. Center the content in a restrained column, make the header compact, and alternate concise feature copy with crisp charts, tables, and integration previews. Add a few hand-drawn mascot accents, not large decorative scenes. Keep card elevation subtle, internal data compact, and section transitions spacious.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Three-column link groups beneath a compact brand and social area. | grouped navigation, social links | brand mark, small link lists, thin separator |

## Source CSS custom properties (selected)

```css
--astro-code-color-text: #414141;
--astro-code-color-background: transparent;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/orm-drizzle-team