---
name: PocketBase
description: "Excellent example of a developer-focused tool that balances technical utility with a highly approachable, clean, and friendly visual language."
version: alpha

colors:
  background: "#ffffff"
  primary: "#25272d"
  secondary: "#111b27"
  neutral: "#617079"
  bg-soft: "#e8eaee"
  bg-quiet: "#b8dbd6"
  line: "rgba(37,39,45,0.12)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.25px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"
  code:
    fontFamily: humanist-sans
    fontSize: 14.5px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#25272d`)** — uses `ink` token
- **Secondary text (`#111b27`)** — uses `ink-soft` token
- **Muted (`#617079`)** — uses `muted` token
- **Borders (`rgba(37,39,45,0.12)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Standard 4px baseline grid with generous section padding.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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