PocketSeed Design System · v1

The visual language behind PocketSeed.

Tokens, type, and components. Drop-in ready for any project, decks, web apps, marketing pages, internal tools.

Philosophy

Designed to coexist.

Modern, friendly, light, inviting. Not loud. PocketSeed lives inside other brands, a retailer's product page, a consultancy's report, a brand's marketing, so the system has to fit beside them without changes, and never compete with the host's voice.

Think of it as a nutrition label on a package: a recognisable visual language for proof and data that works on a cereal box, a tofu tray, and a fancy pasta jar without changes. Strong because it's predictable. Restrained on purpose.

Content does the work. The system is the frame, never the picture. Cues toward sustainability and trustworthy-tech are quiet, no leafy nature scenes, no organic gradients. We sit comfortably next to those topics; we don't describe them.

Read the full philosophy →
Voice & tone

Calm, intelligent, principled.

We sound like the colleague who understands both the creative ambition and the regulatory reality, and helps you bridge the gap. Not corporate. Not preachy. We don't moralise. We don't shame. We help.

Confident, not aggressive. Structured, not bureaucratic. Modern, not trendy. Closest brand references: Stripe, Notion, Patagonia's environmental reporting. Not an audit firm, a regulator, or a compliance platform.

Four pillars run through everything: Guidance, we help teams navigate complexity. Intelligence, structured reasoning that surfaces what matters. Integrity, claims built to withstand scrutiny. Flow, replace chaotic email chains with composable evidence.

Read the full voice & tone →

Specimens

How to use

One line, no install

The repo is public, jsDelivr serves it as a CDN. Drop this in the <head> of any page:

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/AGKDesigns/PocketSeed-Design-System-001@v1/css/pocketseed.css">

Then use the classes. Every component is prefixed .ps- so it never clashes with whatever else is on the page.

Pin to @v1 for the latest 1.x · @v1.0.0 for an exact version · @main to follow the latest commit (will move). For copy / bundler / framework usage, see the README.

Using it with an AI

Building something with Claude, ChatGPT, or any other code-generating model? Point it at the system. The repo is public, so the model can fetch the rules and components directly.

For a Claude project (claude.ai), Cursor, or any system-prompt setup, paste this into the project knowledge or custom instructions:

Use the PocketSeed Design System for all UI and copy.

Visual rules, components, and patterns:
  https://github.com/AGKDesigns/PocketSeed-Design-System-001/blob/main/DESIGN.md

Voice, tone, terminology, and UX copy:
  https://github.com/AGKDesigns/PocketSeed-Design-System-001/blob/main/VOICE.md

Browseable spec site (every component, every pattern):
  https://pocketseed-design-system.pages.dev

Adopt the system in any HTML page with one line:

  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/AGKDesigns/PocketSeed-Design-System-001@v1/css/pocketseed.css">

Then use the .ps-* classes. Read DESIGN.md before writing code,
and VOICE.md before writing any user-facing text.

For Claude Code in a project repo, drop a reference into CLAUDE.md:

## Design system

This project uses the PocketSeed Design System.

- Visual rules → https://github.com/AGKDesigns/PocketSeed-Design-System-001/blob/main/DESIGN.md
- Voice & copy → https://github.com/AGKDesigns/PocketSeed-Design-System-001/blob/main/VOICE.md
- Components → use .ps-* classes from
  https://cdn.jsdelivr.net/gh/AGKDesigns/PocketSeed-Design-System-001@v1/css/pocketseed.css

Read DESIGN.md before writing UI, and VOICE.md before writing copy.

DESIGN.md is written specifically for AI agents, direction, accent rule, surface rules, component vocabulary, common mistakes, and copy-paste pattern recipes.