CURATED · OPEN · FREE

Xata

Modern developer tool for instant Postgres branching

devdb

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://xata.io

📦 Browse pack contents →

Identity DNA

developerdatabasepostgresbranchingtooling

A precision instrument for database workflows

Color

#FFFFFFInk

#0D0D0DBG

#888888Muted

rgba(255, 255, 255, 0.07)Line

High contrast dark mode with monochromatic precision and minimal accent

Typography

geometric-sans · monospace

display48px · 500

Headlines use geometric-sans with tight tracking · Body and UI text use monospace for technical precision · Muted text for secondary information

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px baseline grid with generous whitespace for clarity

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(255, 255, 255, 0.07)

0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset · 0px 4px 6px -1px rgba(0, 0, 0, 0.2) · 0px 2px 4px -2px rgba(0, 0, 0, 0.2) · 0px 0px 2.56702px 0px rgba(52, 211, 153, 0.192)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Fixed width centered layout with clean grid

Motion & Interaction

150msmicro

300mssmall

800msmedium

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

Smooth opacity transitions · Transform effects on hover · Backdrop filter transitions

Subtle brightness change and box shadow · Scale down slightly

Components

button Purple background with white text, slightly rounded
card Dark subtle background with thin border and subtle shadow
chip Outline style with muted text for status indicators
input Dark background with subtle border
hero Large monospace headline with dark background and scattered UI elements

Voice & Don'ts

Tone Technical and precise, professional
Headlines Direct, bold statements about capability
CTAs Clear action verbs with monospace font

Don't use serif fonts — screenshot shows monospace and geometric sans
Don't use bright primary colors — screenshot shows muted purple accent only on buttons
Don't use rounded cards — screenshot shows rectangular cards with small radius
Don't use busy backgrounds — screenshot shows dark solid backgrounds with subtle patterns
Don't use large padding — screenshot shows compact spacing for density
Don't use italic text — screenshot shows all upright typography
Avoid: Marketing buzzwords
Avoid: Excessive exclamation points
Avoid: Overly casual language

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a developer tool SaaS website for database management with a dark mode design. The site uses monospace typography throughout for technical precision, with geometric sans-serif for headlines. Key colors include #0D0D0D for background, #FFFFFF for ink, and muted purple for primary buttons. The layout is clean and centered with generous whitespace. Critical don'ts: avoid serif fonts, don't use bright primary colors, avoid rounded cards. The design prioritizes clarity and technical accuracy with minimal visual noise.

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