# Cockroach Labs · Design system migration spec

> Source: https://www.cockroachlabs.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a developer-focused SaaS platform that balances technical authority with a clean, accessible visual system and a highly effective use of a single brand color for conversion.

## 1. Identity DNA

Cockroach Labs designs its interface like a modern data center: orderly, robust, and built for constant operation. The system establishes a foundation of reliability and scale, positioning the database as the essential, non-negotiable layer of business infrastructure.

**One-liner:** A cloud-agnostic, PostgreSQL-compatible database platform for modern, mission-critical applications.
**Keywords:** database · cloud-native · distributed · enterprise · reliability
**Analogy:** A modern infrastructure company that positions its database as the foundational system of record for business-critical applications.

## 2. Color

The color system operates on a monochrome base of black, white, and light greys, creating a clean, high-contrast canvas. This restraint is deliberate, making the singular, vibrant purple accent a powerful signal for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FCFCFD` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#6933FF` | placeholder |
| `--accent` | `#6933FF` | single accent |
| `--line` | `rgba(234, 236, 240, 1)` | divider |

**Color principle:** High-contrast, clean interface using a vibrant purple accent to highlight primary actions against a monochrome base.

The principle is clarity through contrast: a neutral foundation ensures the accent color's functional purpose is never ambiguous.

## 3. Typography

Typography relies on a humanist sans-serif pair, Poppins and Open Sans, to project a tone that is both friendly and professionally authoritative. This choice supports a technical feel without sacrificing readability.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 600 | -0.5px | Main hero headline |
| heading | 40px | 1.2 | 500 | -0.3px | Section headings |
| body | 18px | 1.6 | 400 | 0 | General paragraph text |

**Type rules:**
- Use humanist sans-serif (Poppins/Open Sans) for a friendly yet professional technical feel.
- Maintain tight negative letter-spacing for large display type to create a cohesive visual block.
- Ensure body text has ample line-height (1.5-1.7) for technical readability.

## 4. Spacing

Spacing adheres to a strict 4px grid with consistent 24px gutters, creating a measured, predictable rhythm that underpins the layout's stability.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid based spacing with consistent 24px gutters for layout alignment.

## 5. Surfaces

Surfaces employ subtle depth through soft, minimal shadows and a consistent light grey border. This creates clear, tangible containers for content without visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 2px 4px 0px rgba(0, 0, 0, 0.075)
  - 0px 0px 5px 0px rgb(128, 128, 128)
- **Borders:** 1px solid #EAECF0

## 6. Layout

The layout is built on a 12-column grid, with full-width hero sections alternating with centered content containers. This structured skeleton prioritizes generous whitespace and clear visual hierarchy.

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

**Skeleton:** Full-width hero sections alternating with centered content containers.

## 7. Motion & Interaction

Motion is minimal and functional, designed to confirm interaction rather than decorate. The philosophy is one of polished efficiency, using brief transitions to provide clear feedback.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover (0.2s).
  - Rightward movement for interactive elements or arrows.

- **Hover:** Subtle color shifts or background fills for links and buttons.
- **Click:** Immediate response with standard cursor pointer.
- **Transition:** Smooth 0.2s transitions for colors, backgrounds, and borders.
- **Keyboard:** Standard focusable elements with visible outlines.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and technical, focusing on declarative statements about reliability and scale. It avoids unbacked buzzwords and overly playful language, maintaining a tone of authoritative simplicity.

- **Tone:** Professional, confident, and authoritative, focusing on reliability and scale.
- **Headline style:** Bold, declarative statements that position the product as a critical infrastructure choice.
- **CTA style:** Action-oriented and direct, emphasizing free entry points or team consultation.
- **Avoid:** Overly playful language / Vague marketing buzzwords without technical backing / Dense, unformatted technical jargon in hero sections

### Don'ts
- ❌ Don't use a wide, decorative serif font — the screenshot shows a clean, modern humanist sans-serif approach.
- ❌ Don't use a muted, desaturated color palette — the screenshot features a vibrant, high-chroma purple accent.
- ❌ Don't use complex, heavy drop shadows — the screenshot uses very subtle, soft elevation for depth.
- ❌ Don't center-align all hero text — the screenshot shows the main headline and supporting copy aligned to the left.
- ❌ Don't use decorative or handwritten font styles — the screenshot maintains a strictly professional, clean aesthetic.
- ❌ Don't use dark backgrounds for primary CTAs — the screenshot uses a bright purple solid fill for the 'Start free' button.

The system deliberately excludes decorative elements, muted palettes, and complex shadows that would dilute its focused, functional aesthetic.

## System Prompt (paste into AI tool)

```
Cockroach Labs is a developer-focused SaaS platform for cloud-native databases. Its design is clean and authoritative, utilizing a humanist sans-serif type system (Poppins/Open Sans) and a monochrome palette (black/white/grey) punctuated by a vibrant purple accent (#6933FF). The layout is structured around large, bold typography and generous whitespace to convey reliability and scale. Critical design rules: avoid decorative serifs, avoid desaturated palettes, avoid complex heavy shadows, and maintain the distinct purple accent for all primary user actions. It targets technical decision-makers with a premium, trustworthy feel.
```