CURATED · OPEN · FREE

Drizzle ORM

A modern, fast ORM for TypeScript and JavaScript.

devtoolsorm

↓ Download design system (8 MB)Open in OpenDesign

Visit: https://orm.drizzle.team

📦 Browse pack contents →

Identity DNA

ORMTypeScriptJavaScriptDatabaseDeveloper

Like a clean, fast toolkit for developers to manage data efficiently.

Color

#222222Ink

#444444Ink soft

#FFFFFFBG

#FAFAFABG soft

#F1F2F3BG quiet

#71687BMuted

rgba(33, 39, 46, 0.12)Line

High contrast on a clean white background with subtle gray structural elements.

Typography

sans-serif · monospace

display48px · 700
h232px · 600
body16px · 400
small12px · 400

System sans-serif stack is the primary typeface. · Monospace font is used for code snippets and technical labels. · Handwritten font is used selectively for playful annotations.

Spacing

4px

8px

12px

16px

20px

24px

32px

40px

64px

Consistent 4px base grid with generous padding in sections.

Surfaces

sm · 2px

md · 8px

lg · 20px

pill · 999px

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.08) 0px 0px 0px 1px · rgba(0, 0, 0, 0.075) 0px 2px 4px 0px · rgb(255, 255, 255) 0px 0px 1px 1px inset

Layout

1200container

12columns

24pxgutter

768 / 1024breakpoints

Centered content container with responsive stacking.

Motion & Interaction

200msmicro

300mssmall

800msmedium

ease-in-outeasing

Smooth color transitions on hover · Opacity fade-ins

Subtle background color change or color transition. · No dramatic change, standard pointer cursor.

Components

button Ghost or outlined styles with rounded corners.
card White surface with subtle border and soft shadow.
chip Small rounded badge with background color.
input Clean outlined input with rounded corners.
hero Large left-aligned text with accompanying playful illustration.

Voice & Don'ts

Tone Technical but accessible, slightly playful.
Headlines Direct, action-oriented, and concise.
CTAs Simple text links or outlined buttons.

don't use dark mode — screenshot shows a bright white background
don't use gradient backgrounds — screenshot shows flat solid colors
don't use rounded pill buttons everywhere — screenshot shows standard rectangular or slightly rounded buttons
don't use drop shadows on all elements — screenshot shows mostly flat surfaces with subtle borders
don't use a single high-chroma accent color — screenshot shows a mostly monochrome palette
don't use decorative serifs — screenshot shows clean sans-serif typography
Avoid: Overly corporate language
Avoid: Dense walls of text without visual breaks
Avoid: Aggressive or loud colors

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a developer tools SaaS site for an ORM, featuring a clean, minimalist design with a white background. Key colors include deep charcoal text (#222222) and light gray borders (#E5E7EB). Typography uses a standard sans-serif stack for body text and a monospace stack for code. The design relies on generous white space and subtle borders rather than heavy shadows. Critical donts: don't use dark mode, don't add gradient backgrounds, and don't use decorative fonts. The layout is centered and responsive, with a focus on clear hierarchy and readability.

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