Design system sections
17 / REFERENCES
Official design-system references and the principles adapted for kirupa.com.
Agent Instructions / references
You are applying external design-system guidance to KIRUPA. Use official references for principles: host consistency and contextual tone from Shopify, shared tokens and color roles from Material, stable semantic roles across themes from Carbon, and precise states plus first-class Markdown from Geist. Adapt those principles to KIRUPA's actual source. Do not replace its palette, fonts, art, or interaction style with another brand, copy proprietary assets/prose, or install their UI framework. Cite the reference and label recommendations separately from verified site behavior. 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.
Shopify's Polaris guidance emphasizes fitting the host surface, accessibility, responsive layout, and clear action names. Its content guidance separates a stable voice from a tone that changes with context. Here that means a playful tutorial and a plain error can still belong to the same site; compare the examples in Voice & Tone.
Material documents design tokens as shared building blocks and colors by role. Carbon is especially explicit that token roles stay the same across themes while values change. Try the resolved token specimen to see KIRUPA's existing properties change values without changing jobs.
Vercel Geist organizes foundations, components, and assets, exposes Markdown, and documents default/hover/active roles precisely. This reference adopts discoverable small Markdown documents and explicit states, not Geist's visual identity. The component example and current icon grid make those parts inspectable.
No third-party design framework is added. The linked official documentation supports these high-level principles; detailed claims about inaccessible JavaScript-rendered reference pages have not been invented.
- Do credit the principle and its official source.
- Do not copy proprietary prose, artwork, or a framework just to make KIRUPA look fashionable.
