CURATED · OPEN · FREE

PocketBase

A developer-focused backend that emphasizes simplicity and approachability through a clean, friendly UI.

devinfra

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://pocketbase.io

📦 Browse pack contents →

Identity DNA

open-sourcebackendsimplicityall-in-one

A friendly, approachable toolkit that simplifies complex backend infrastructure into a single, accessible file.

Color

#25272dInk

#111b27Ink soft

#ffffffBG

#e8eaeeBG soft

#b8dbd6BG quiet

#617079Muted

rgba(37,39,45,0.12)Line

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

Typography

humanist-sans · monospace

display48px · 600
h228px · 600
body15px · 400
code14px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px baseline grid with generous section padding.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(37,39,45,0.12)

rgba(0, 0, 0, 0.06) 0px 2px 5px 0px · rgba(0, 0, 0, 0.06) 0px 3px 10px 3px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

150mssmall

150msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth color and background transitions on hover. · Filter and bottom position transitions for interactive elements.

Subtle background and color shifts on interactive elements. · Standard pointer feedback.

Components

button Clean, slightly rounded (4px) buttons with distinct dark borders and subtle shadows; primary uses dark background.
card White background with a subtle drop shadow and a soft, rounded border radius.
chip Small, pill-shaped tags (999px radius) for feature lists and status indicators.
input Rounded pill-shaped search bars with a light background.
hero Large pastel teal background (#b8dbd6) with bold text and a prominent UI screenshot.

Voice & Don'ts

Tone Helpful, direct, and developer-focused.
Headlines Concise and bold, emphasizing the core value proposition.
CTAs Action-oriented and straightforward (e.g., 'Read the documentation', 'Live demo').

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.
Avoid: Excessive marketing jargon or flowery language.
Avoid: Aggressive sales tones or complex sales funnels.
Avoid: Dense, unreadable technical documentation without clear structure.

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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