# PocketBase · Design system migration spec

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

> Excellent example of a developer-focused tool that balances technical utility with a highly approachable, clean, and friendly visual language.

## 1. Identity DNA

PocketBase operates like a well-organized toolbox: it consolidates complex backend infrastructure into a single, manageable file. Its design DNA reflects this, prioritizing clarity, approachability, and functional simplicity over decorative flair. The result is a system that feels both technically capable and welcoming to the developer at the terminal.

**One-liner:** A developer-focused backend that emphasizes simplicity and approachability through a clean, friendly UI.
**Keywords:** open-source · backend · simplicity · all-in-one
**Analogy:** A friendly, approachable toolkit that simplifies complex backend infrastructure into a single, accessible file.

## 2. Color

The color system is built on a foundation of high-contrast neutrality, using dark grays and white for maximum readability. A friendly pastel teal serves as the primary hero color, creating a welcoming and distinct entry point without overwhelming the functional interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#e8eaee` | card background |
| `--bg-quiet` | `#b8dbd6` | quiet area |
| `--ink` | `#25272d` | body text |
| `--ink-soft` | `#111b27` | secondary text |
| `--muted` | `#617079` | placeholder |
| `--line` | `rgba(37,39,45,0.12)` | divider |

**Color principle:** High-contrast, clean, and functional palette with a friendly pastel teal hero and standard dark grays for maximum readability.

The guiding principle is balance—using a single, soft chromatic accent against a disciplined neutral canvas to achieve both warmth and clarity.

## 3. Typography

Typography is assigned clear roles: the humanist sans-serif Source Sans Pro carries the primary UI and body text with a clean, readable voice, while the monospaced Ubuntu Mono provides a technical counterpoint for all code and snippet contexts. The scale is pragmatic, distinguishing between hero headlines, section headers, general text, and technical content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 600 | -0.5px | Hero headline |
| h2 | 28px | 1.2 | 600 | -0.25px | Section headers |
| body | 15px | 1.6 | 400 | 0 | General text |
| code | 14.5px | 1.4 | 400 | 0 | Code snippets |

**Type rules:**
- Use Source Sans Pro for primary UI and body text.
- Use Ubuntu Mono for all code blocks and technical snippets.
- Maintain strict text alignment and consistent line heights.

## 4. Spacing

Spacing adheres to a standard 4px baseline grid, creating a consistent and predictable rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px baseline grid with generous section padding.

## 5. Surfaces

Surfaces are defined by lightness and subtle depth, using clean white backgrounds with soft, rounded borders. A consistent shadow system provides just enough elevation to separate content without visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 2px 5px 0px
  - rgba(0, 0, 0, 0.06) 0px 3px 10px 3px
- **Borders:** 1px solid rgba(37,39,45,0.12)

## 6. Layout

The layout skeleton is a centered, single-column structure for the core landing experience, promoting focused reading. This narrow column then gives way to a wide container for dashboard previews, demonstrating the system's flexibility within a clean framework.

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

**Skeleton:** Centered single-column layout for the landing page with a wide container for the dashboard preview.

## 7. Motion & Interaction

Motion is strictly utilitarian, serving only to confirm interaction and state change. Transitions are brief and uniform, focused on color, background, and filter properties to provide immediate, functional feedback.

- **Durations:** micro 150ms · small 150ms · medium 150ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover.
  - Filter and bottom position transitions for interactive elements.

- **Hover:** Subtle background and color shifts on interactive elements.
- **Click:** Standard pointer feedback.
- **Transition:** Unified 0.15s transition for color, background, and filter properties.
- **Keyboard:** Standard focus ring behaviors typical of clean UI frameworks.

## 8. Voice & Don'ts

The editorial voice is helpful, direct, and tailored for a developer audience. It favors concise, bold headlines and action-oriented calls to action, stripping away marketing abstraction to focus on utility and documentation.

- **Tone:** Helpful, direct, and developer-focused.
- **Headline style:** Concise and bold, emphasizing the core value proposition.
- **CTA style:** Action-oriented and straightforward (e.g., 'Read the documentation', 'Live demo').
- **Avoid:** Excessive marketing jargon or flowery language. / Aggressive sales tones or complex sales funnels. / Dense, unreadable technical documentation without clear structure.

### Don'ts
- ❌ Don't use a dark hero section — screenshot shows a bright pastel teal (#b8dbd6) background instead.
- ❌ Don't use decorative, playful, or script fonts — screenshot uses clean humanist-sans (Source Sans Pro) and monospace (Ubuntu Mono).
- ❌ Don't use heavy, glowing gradients — screenshot uses flat colors, subtle shadows, and clean borders.
- ❌ Don't use rounded, bubbly buttons — screenshot uses slightly rounded (4px) buttons with distinct dark borders.
- ❌ Don't rely on a single high-chroma accent color — screenshot uses a balanced palette of grays, teal, and code syntax colors.
- ❌ Don't clutter the interface with excessive animations — screenshot shows a very static, functional, and clean UI.
- ❌ Don't use decorative icons — screenshot uses simple, functional Remixicon line icons.

The system deliberately excludes decorative typography, heavy gradients, and aggressive sales narratives, trusting in functional clarity to communicate value.

## System Prompt (paste into AI tool)

```
PocketBase is an open-source backend positioned as a simple, all-in-one solution for developers, featuring a clean and functional UI. The visual system uses a light, approachable palette anchored by a pastel teal hero (#b8dbd6), standard dark grays (#25272d), and white surfaces (#ffffff), with no single dominant high-chroma accent color. Typography relies on Source Sans Pro (humanist-sans) for body and display text, and Ubuntu Mono for code snippets. The layout is centered and spacious, emphasizing clarity and readability. Critical design constraints: do not use dark hero sections; stick to clean humanist-sans and monospace fonts; avoid heavy gradients; use functional icons; maintain a 4px baseline grid; avoid excessive or decorative animations; and ensure all interactive elements use clean, slightly rounded borders.
```