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 →

Specimens

Colors

Ink, paper, brand teal/blue/green, accent presets, and on-ink alpha layers.

→ 02

Typography

Inter for UI, Instrument Serif for editorial accents, JetBrains Mono for micro-type. Two ramps: slide and web.

→ 03

Components

Cards, pills, bullets, the orb, the browser frame, the ask-bar, buttons, stats and more.

→ 04

Patterns

Slide chrome, hero treatments, feature grids, the dark "on ink" surface, quote callouts.

→ 05

Slide template

A 1920×1080 slide stage scaled to fit any container — copy-paste starting point for new decks.

→ 06

Web page

The same language applied to a marketing landing page — proves it scales beyond decks.

→ 07

Forms & web app

Inputs, selects, checkboxes, dropdowns, alerts, modals, avatars, tabs. The product UI starter kit.

→ 08

Login

Sign-in screen with side-by-side dark pitch panel. The auth pattern, ready to lift.

→

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. The full philosophy, rules,
and component vocabulary are at:

  https://github.com/AGKDesigns/PocketSeed-Design-System-001/blob/main/DESIGN.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.

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

## Design system

This project uses the PocketSeed Design System. Before writing UI,
read https://github.com/AGKDesigns/PocketSeed-Design-System-001/blob/main/DESIGN.md
and use .ps-* classes from
https://cdn.jsdelivr.net/gh/AGKDesigns/PocketSeed-Design-System-001@v1/css/pocketseed.css

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