# KIRUPA DESIGN SYSTEM

Read this first. Fetch only the section you need, not the complete catalog.

## Agent Instructions

You are working on kirupa.com. Preserve its existing semantic CSS tokens, source components, six visual styles, readable teaching voice, and asset licenses. This is a tutorial section: include the shared head, header, and footer at request time, place Design System in the left navigation, and use the tutorial's Filed under metadata and title typography. The outer page keeps normal chat and link sounds; isolated specimens never alter saved preferences or call live posting, chat, or presence services. Keep each section on its own linked page and /design/ as a compact index. Do not add a separate header or orange hero. Place each specimen directly after its relevant explanatory paragraph, without a separate preview heading or boilerplate. Use blueEmphasis on links that need to look like links inside tutorial body content, and inlineCode for class names and identifiers. Read the relevant section below: its first block is a task-scoped system prompt. Source-backed conventions and new recommendations are labeled separately. Never treat bot backstories as human facts. Podcast captions use Born2bSportyV10, matching the clip engine; the font is not bundled here. Illustration callouts use the author-confirmed Permanent Marker font; inspect the BFS/Merkle examples before creating artwork. Keep navigation and reference descriptions short and factual.

Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.

## Choose a section

- [Foundations](/design/sections/foundations.md) - [prompt only](/design/agent/foundations.txt)
- [Themes](/design/sections/themes.md) - [prompt only](/design/agent/themes.txt)
- [Components](/design/sections/components.md) - [prompt only](/design/agent/components.txt)
- [Icons & Artwork](/design/sections/icons.md) - [prompt only](/design/agent/icons.txt)
- [Illustrations](/design/sections/illustrations.md) - [prompt only](/design/agent/illustrations.txt)
- [Twemoji](/design/sections/emoji.md) - [prompt only](/design/agent/emoji.txt)
- [Sounds](/design/sections/sounds.md) - [prompt only](/design/agent/sounds.txt)
- [Motion](/design/sections/motion.md) - [prompt only](/design/agent/motion.txt)
- [Voice & Tone](/design/sections/voice.md) - [prompt only](/design/agent/voice.txt)
- [Video & Podcasts](/design/sections/media.md) - [prompt only](/design/agent/media.txt)
- [Who's Online](/design/sections/online.md) - [prompt only](/design/agent/online.txt)
- [kirupaBot Chat](/design/sections/chat.md) - [prompt only](/design/agent/chat.txt)
- [Forums](/design/sections/forums.md) - [prompt only](/design/agent/forums.txt)
- [Forum Bots](/design/sections/bots.md) - [prompt only](/design/agent/bots.txt)
- [Accessibility](/design/sections/accessibility.md) - [prompt only](/design/agent/accessibility.txt)
- [Implementation](/design/sections/extend.md) - [prompt only](/design/agent/extend.txt)
- [References](/design/sections/references.md) - [prompt only](/design/agent/references.txt)

## Fetch data only when needed

- [manifest.json](/design/manifest.json): HTML/Markdown/prompt URLs, counts, collection shards, font availability.
- [components.json](/design/components.json): 24 component records, selectors, usage, sources, and individual preview fragments.
- [illustrations.json](/design/illustrations.json): 12 example records, provenance, font, palette, geometry recommendations, and checklist.
- [themes.json](/design/themes.json): enabled styles, preset palettes, modes.
- [tokens.json](/design/tokens.json): 401 exact custom-property names, selector scopes, and declarations.
- [assets.json](/design/assets.json): 11649 asset entries. Prefer a collection shard from the manifest.
- [sounds.json](/design/sounds.json): 32 recordings and 31 actual-function WAV renders.
- [bots.json](/design/bots.json): 13 configured profiles plus explicitly unknown identifiers.
- [inventory.json](/design/inventory.json): exact scope, exclusions, source/build mappings and hashes.

[Section index](/design/) | [Optional complete guide](/design/guide.md) | [Legacy Design Center](/design/archive.htm)

## Extend

Edit readable shared sources in `ssi/newDesign/src/` and run `node .github/tools/build-assets.mjs` first. Then update the reviewed source JSON and run `node tools/build_design_system.mjs`; run both builders with `--check`. Set each specimen's zero-based `afterParagraph` to the explanation it illustrates. Add component records in `components.source.json` and illustration records in `illustrations.source.json`. Commit sources and outputs, but deploy only served outputs. Check specimens, accessibility, and source contracts before release. Deployment requires separate authorization.