DOL Studio - Design system + tooling docs
One source of truth for DOL Edu visual language.
Tokens, components, icons, illustrations, UI style guide, Figma intent - packaged as one design system that ships from Figma to code without translation loss.
Foundations
Section titled “Foundations”UI Style Guide
Tailwind + DS-Token recipes for code-facing surfaces. CORE.md canonical entry plus landing / practice / data-entry product extensions.
DS Guideline (Figma intent)
Design intent + rationale per topic: typography, color, spacing, radius, shadow - plus DIRECTION.md philosophy for cross-topic anti-patterns.
Figma AI
AI-tooling for Figma: variable registry, component registry, naming convention, workflows. Token-cost reduced 96–99% per task vs single-file.
Operations
DS-Token bridge troubleshooting, workflow ops, platform evolution notes. Runbooks for breakages + sync flows.
Browse the library
Section titled “Browse the library”Tokens
3,000+ DS-Token color, typography, spacing, radius, shadow values. Live previews + Quick-copy snippets.
Components
71 components - Figma source, status, tags. Filter by domain, category, status.
Icons
2,410 SVG icons - searchable by name or category. Click to copy slug for code/Figma usage.
Illustrations
293 brand illustrations - paginated grid, search by tag, light/dark adaptive PNG.
Companion apps
Section titled “Companion apps”DOL Wiki
Product specs, UX flows, domain knowledge, operational runbooks. 840 docs covering DOL English + DOL Kid + shared capabilities.
Playground
Interactive demos for Practice, Test, AI Tutor surfaces. Live runtime playground built on @dol/ui primitives.
For AI agents
Section titled “For AI agents”DOL Studio is the complete design system package - tokens (Tailwind v4 mapping + dark mode), UI style guide (code recipes + anti-patterns), Figma intent (semantic rationale), KID variant + cross-system + DOL DS guideline + Operations runbooks.
- Code work →
ai-entry/CODE-UI.md- router + hard rules + self-check - Figma work →
ai-entry/FIGMA-AI.md- router + Q-gates + scope-scan
Astro+Starlight migration is at MVP feature parity with legacy Vite+React Studio. Token browser, components catalog (71 entries with live demos on 60+), icon catalog (2410 SVGs), illustration catalog (293 PNGs), and 109 token detail pages all shipped. See MIGRATION-STATUS.md.