Does Drizzle have a primary brand color?

No — Drizzle's CSS custom properties expose no brand color token. There is no --primary, no --brand, no --accent in the variable namespace. The entire rendered marketing surface runs on an achromatic gray scale: near-black #222222 for headlines and ink text (978 text occurrences), mid-gray #444444 for secondary labels (also 978), dark charcoal #282b3b for sidebar chrome, off-white #ffffff/#fafafa for card surfaces and backgrounds, and border gray #e8e8e8 for hairlines. The only chromatic moment is cobalt blue #006be6, which appears on 10 external reference link texts and 10 link borders — clearly a browser-default-adjacent link color rather than a brand accent. The page reads as intentionally monochrome.

What typeface does Drizzle use?

Drizzle uses the system-ui fallback stack for all prose, headings, and navigation — there is no custom or branded typeface loaded. The hero headline runs system-ui at 40px / weight 700 for the largest display moment, and section headings at 32px / weight 600. Body copy runs at 14px / weight 400 for the primary reading tier. The only non-system font is Menlo (with a system monospace fallback) at 9.75px / weight 500 for inline code chips, and a system mono stack at 12px for sidebar navigation tree entries. On macOS, system-ui resolves to San Francisco; on Windows to Segoe UI; on Linux to Noto Sans. The page renders slightly differently across platforms by design — Drizzle appears to have made no effort to normalize the reading experience across operating systems.

What corner-radius does Drizzle use on cards and components?

The dominant radius is 8px (141 occurrences), used on feature cards, the performance benchmark panels, the studio data-table card, and the runtime integration chip grid. The second tier is 2px (77 occurrences), used on inline code annotation chips and the syntax tokens inside code blocks. A 50% radius (50 occurrences) applies to the avatar circles in the team and contributor strip. 5px (25 occurrences) appears on the release badge chip, 12px (22 occurrences) on the search modal overlay, and 4px (20 occurrences) on secondary surface elements. The system does not use a pill radius on buttons or CTAs — the maximum non-circular radius is 12px.

What does the performance benchmark section look like in Drizzle's design?

The benchmark section is a two-panel comparison layout showing avg queries/second and avg latency (min/max) for Drizzle versus competitors (Bun SQLite at 13k vs Drizzle at 13k, etc.). Each panel is a gray hairline-bordered card with an embedded line/area chart rendered in a light blue/gray fill. The panels share a 2-column grid layout with 8px internal padding and system-ui labels at 12px / weight 500. The numbers ('5.3k', '2.2k') render in system-ui at 14–16px / weight 700. There is no brand color in the charts — the comparison lines appear in near-neutral blue-grays. The

Can I use this DESIGN.md to build a Drizzle-style documentation or ORM 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 Drizzle's specific moves: achromatic gray scale with no brand accent, system-ui headlines at 40px / weight 700, Menlo at 9.75px for inline code chips, 8px card rounding, and cobalt links as the only chromatic moment. All token references resolve cleanly: {colors.ink} for near-black text, {colors.canvas} for the off-white background, {colors.hairline} for card borders. One important caveat: the 'no brand color' pattern only reads as a deliberate aesthetic choice if the documentation is genuinely dense and technical. For a landing page targeting non-technical buyers, the pattern risks reading as an unfinished design rather than a confident one.

Drizzle ORM Design System

Drizzle ORM's design system as a DESIGN.md file — no primary brand color, dark gray #222222 ink, system-ui at 40px display, Menlo monospace, 8px radius.

About Drizzle ORM DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source orm.drizzle.team

Backend, Database & DevOps
Developer Tools & IDEs

Drizzle's marketing page does not have a brand color. The CSS custom properties expose no --primary, no --accent, no brand hex in any variable name — the entire rendered surface runs on a cool dark-gray scale anchored by near-black charcoal ink (#222222) and mid-gray body text (#444444). The hero headline "ORM for you to settle" uses system-ui at 40px / weight 700 in the same charcoal as every other heading on the page, and the animated stacked emoji above it (three drizzle water-drop emoji) are the only non-gray visual decoration. Unlike Prisma, which holds a single teal CTA in reserve, or PlanetScale, which pairs a brand violet with a white canvas, Drizzle withholds color entirely and names the tool after the weather. The restraint is the brand.

The DESIGN.md file packages this into machine-readable tokens. Inside: 15 color tokens on a strict achromatic gray ladder from near-black #222222 to off-white #ffffff, plus a cobalt link accent #006be6 (the system's only chromatic moment, appearing 20 times on external reference links); 13 typography tokens using the system-ui sans stack for all prose and Menlo/system-mono for two distinct code tiers; 8 radius values dominated by 8px (141 occurrences); 9 spacing values on a mixed 8–12px rhythm; and 16 component definitions covering the gray-surface release badge, the two-column performance benchmark panel, the runtime integration chip grid, and the Drizzle Studio data-table panel.

Feed this file to Claude or Cursor and it reproduces Drizzle's specific moves: no brand color, only cobalt links; system-ui headlines at modest weights rather than a display typeface; monospace at 9–12px for inline code and sidebar trees; and 8px card geometry throughout. The one move worth borrowing for any documentation-first tool: the willingness to make the page look like a very good README rather than a marketing site. Drizzle reads like a tool by developers who respect that their audience will evaluate the code, not the colors.

What makes it distinct

No primary brand colorthe CSS custom properties declare no brand hex; the entire system runs on a cool achromatic gray scale with a single cobalt link accent
Emoji as the brand illustration layerthe hero stacks three drizzle emoji above the headline rather than custom SVG artwork or photography
Two-speed monospaceMenlo at 9.75px for inline code chips and a system mono stack at 12px for sidebar tree entries; monospace at tiny sizes signals the ORM's SQL-native philosophy
8px dominant radius (141 occurrences)card geometry is consistently mid-soft with a 2px base tier for syntax annotation chips
Gray scale onlyno gradient, no shadow illustration, no chromatic accent beyond the cobalt link color; the page reads as a documentation entry point, not a marketing surface

Live at orm.drizzle.team

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

orm.drizzle.team

Explore Drizzle ORM

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Drizzle ORM design system FAQ

Common questions about Drizzle ORM'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.

Drizzle ORM — official site

Drizzle ORM's 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.