Opinionated knowledge
Philosophy, foundations, brand, motion, a11y — code-embedded, source-cited.
Open CanonDesign bible · 2026
Stop shippingAI slop.Ship taste.
AwesomeDS is the taste layer for people and AI agents — a living Canon, semantic tokens, accessible React, and motion with a job. Built so the next UI you generate feels human, not average.
- canon rules
- 47
- cited sources
- 128
- live components
- 32
- agent skills
- 5
Evidence graph healthy
Why it exists
Models default to the median. You need a point of view.
Ask an LLM for a landing page and you get Inter, a purple gradient, three emoji cards. AwesomeDS steers off the center — with doctrine you can open, contracts you can run, and evidence you can verify.
DOCTRINE EXECUTABLE Tokens + React + motion
Semantic OKLCH tokens, full-state components, purpose-led motion recipes.
Browse componentsVERBS Five agent skills
AwesomeDS · MakeAwesomeDS · AwesomeHTML · AwesomeReview · AwesomeMotion.
Agent guidance
Meet Dotto
A little joy in the system.
Serious systems don’t have to feel sterile. Dotto is the mascot of the CMY mark — playful motion that still respects reduced-motion preferences.
- Waves hello
- Thinks carefully
- Cheers a ship
How it works
Read. Build. Prove.
One production loop. Agents get finite, safe choices. People keep judgment and the final call.
- 01START
Read the Canon
Begin from principles and rule IDs — not screenshots or vibes.
Enter the Canon - 02BUILD
Compose live contracts
Semantic tokens, complete component states, purpose-led motion.
Open components - 03VERIFY
Prove every choice
Trace claims to sources. Run gates. Check system status.
Open status
Aesthetics with receipts
Not opinions. Readings.
Design references sell taste. AwesomeDS ships taste with a paper trail you can validate — locally, in CI, or from an agent.
- 47
- canonical ruleseach linked to evidence
- 128
- structured sourcesfreshness-tracked
- 32
- live componentsfull state contracts
- 100%
- coveragerules with implementation
The CMY identity
Three primaries. One designed spectrum.
Cyan · magenta · yellow — subtractive mixing as the logomark. An OKLCH spectrum as the signature stripe. White paper, dark ink. Never a dark hero.
Read the brand bible- Cyan
#15C7DE - Magenta
#FF2EA6 - Yellow
#FFD400
Live components
The documentation is executable.
Real @awesome-ds/react primitives — labels, focus, status, and state contracts. Not a static mockup.
Action contract
@awesome-ds/reactSpecific intent gives agents a safer decision boundary.
Evidence connected
Canon implementation coverage100%
Canon implementation coverage: 100%
Motion library
Movement with a job to do.
Replay intent-based recipes. Each declares where it belongs, where it does not, and what replaces it under reduced motion.
Enter
Introduce new content without layout shift.
enterFeedback
Acknowledge an explicit user action.
feedbackReveal
Guide attention once, then become still.
revealQuick start
Point an agent here. Or install the skills.
Tell the agent to read design-system/INDEX.md first, then open only the modules it needs.
git clone https://github.com/Yu-aimaker/AwesomeDesignSystem.git
cd AwesomeDesignSystem
./install.sh/AwesomeDSBuild or refine any UI with taste/MakeAwesomeDSGenerate a brand’s own design system/AwesomeHTMLPolish notes into a single-file HTML doc/AwesomeReviewAudit UI for slop and a11y failures/AwesomeMotionDesign purpose-driven motion
Reference Atlas
Trust signals belong beside the claim.
Ownership, evidence class, last verification, drift risk, freshness, and linked rules. A logo wall is not provenance.
ref.w3c.wcag-22WCAG 2.2w3c- Verified
- Freshness
- healthy
- Linked rules
- 5
ref.vercel.web-interface-guidelinesVercel Web Interface Guidelinesvercel- Verified
- Freshness
- healthy
- Linked rules
- 3
ref.apple.higApple Human Interface Guidelinesapple- Verified
- Freshness
- healthy
- Linked rules
- 13
Four ways in