Design

Design System

Ported from AGENKO-resources/design-system — a complete design language for PageKit products.

Specs

Document	Covers
Tokens	CSS custom properties (light/dark)
Colors	Palette + accent palettes + semantic colors
Typography	Font stacks, type scale, usage
Layout	Shell, wrap, spacing, grid, breakpoints
Components	Buttons, cards, tables, badges, inputs
Patterns	Auth, command palette, overlays, toasts

Token Cheatsheet

Token	Purpose
`--ink`	Primary text
`--soft`	Secondary text
`--muted`	Tertiary text
`--faint`	Disabled text
`--bg`	Page background
`--panel`	Card backgrounds, modals
`--panel-2`	Hover backgrounds, code blocks
`--line`	Borders
`--line-2`	Hover borders, stronger dividers
`--acc`	Primary accent (default indigo `#4f46ff`)
`--green` / `--green-bg`	Success states
`--amber` / `--amber-bg`	Warning states
`--red` / `--red-bg`	Error states
`--nav-glass`	Navigation glass background
`--nav-blur`	Navigation backdrop blur

Radii — Flat by Design

css

--r-sm: 0px;
--r-md: 0px;
--r-lg: 0px;
--r-xl: 0px;
--r-pill: 0px;

Override --r-md once to round all corners.

Motion

css

--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

Source of Truth

The canonical design system lives in docs/design-system/. The runtime CSS variables are in packages/config/tailwind/tokens.css and packages/config/tailwind/theme.css.

File Structure

text

docs/
├── design-system/
│   ├── tokens.md
│   ├── colors.md
│   ├── typography.md
│   ├── layout.md
│   ├── components.md
│   └── patterns.md
packages/config/
└── tailwind/
    ├── web.css          # Landing + hosted blog
    ├── dashboard-entry.css  # Studio
    └── docs-entry.css   # Docs site

Runtime Source of Truth

Entry	Used by
`web.css`	`apps/web`
`dashboard-entry.css`	`apps/dashboard`
`docs-entry.css`	`apps/docs`