# Xata · Design system migration spec

> Source: https://xata.io  ·  Curated by OpenDesign  ·  en

> Excellent example of developer-focused dark mode design with technical precision

## 1. Identity DNA

The design system for Xata is built as a precision instrument for database workflows, where every component serves a specific technical function. Like a well-engineered tool, the interface prioritizes clarity and accuracy over decoration, creating an environment where developers can work with confidence. This systematic approach reflects the product's core purpose: providing instant, reliable Postgres branching.

**One-liner:** Modern developer tool for instant Postgres branching
**Keywords:** developer · database · postgres · branching · tooling
**Analogy:** A precision instrument for database workflows

## 2. Color

The color system establishes a high-contrast dark mode built on monochromatic precision, using a minimal accent only where primary actions demand attention. A dark background anchors the interface, while white ink ensures maximum readability for technical content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0D0D` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#888888` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.07)` | divider |

**Color principle:** High contrast dark mode with monochromatic precision and minimal accent

The guiding principle is visual restraint—color serves function, never decoration.

## 3. Typography

Typography is divided into two distinct roles: geometric sans-serif headlines establish structure with tight tracking, while monospace fonts handle body and interface text to reinforce technical precision. This creates a clear hierarchy where the system speaks with two complementary voices—one for navigation, one for data.

- **Display:** geometric-sans
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 500 | -1px | Headlines |

**Type rules:**
- Headlines use geometric-sans with tight tracking
- Body and UI text use monospace for technical precision
- Muted text for secondary information

## 4. Spacing

Spacing follows an 8px baseline grid, creating a consistent rhythm that organizes information without visual clutter.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px baseline grid with generous whitespace for clarity

## 5. Surfaces

Surfaces are defined by subtle depth and minimal borders, creating layered planes without heavy shadows. Thin, semi-transparent lines separate elements, while inset highlights and soft shadows provide just enough dimensionality to establish hierarchy.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid rgba(255, 255, 255, 0.07)

## 6. Layout

The layout skeleton employs a fixed-width centered container that provides a stable frame for content. A clean grid structure organizes information with generous whitespace, ensuring the interface remains uncluttered even with dense technical content.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Fixed width centered layout with clean grid

## 7. Motion & Interaction

Motion philosophy centers on smooth, purposeful transitions that guide attention without distraction. Effects use consistent cubic-bezier easing over 0.3 seconds, with transforms and opacity changes that feel precise and controlled rather than decorative.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions
  - Transform effects on hover
  - Backdrop filter transitions

- **Hover:** Subtle brightness change and box shadow
- **Click:** Scale down slightly
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Focus outlines with sufficient contrast

## 8. Voice & Don'ts

Voice and editorial tone are technical and precise, using direct statements about capability rather than persuasive language. Headlines speak with bold clarity, while calls to action use clear verbs in monospace type.

- **Tone:** Technical and precise, professional
- **Headline style:** Direct, bold statements about capability
- **CTA style:** Clear action verbs with monospace font
- **Avoid:** Marketing buzzwords / Excessive exclamation points / Overly casual language

### Don'ts
- ❌ 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

The system deliberately avoids serif typography, bright primary colors, rounded cards, busy backgrounds, excessive padding, and italic text—each exclusion reinforces the commitment to technical clarity.

## System Prompt (paste into AI tool)

```
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.
```