# References

## Agent Instructions

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.

## Reference

Official design-system references and the principles adapted for kirupa.com.

[Shopify's Polaris guidance](https://shopify.dev/docs/apps/design) 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](/design/voice.htm).

[Material](https://m3.material.io/foundations/design-tokens/overview) documents design tokens as shared building blocks and colors by role. [Carbon](https://www.carbondesignsystem.com/building-blocks/foundations/themes/overview) is especially explicit that token roles stay the same across themes while values change. Try the [resolved token specimen](/design/foundations.htm#specimen-tokens) to see KIRUPA's existing properties change values without changing jobs.

[Vercel Geist](https://vercel.com/geist/introduction) 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](/design/components.htm#specimen-components) and [current icon grid](/design/icons.htm#asset-catalog) 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.

## Sources

- [https://shopify.dev/docs/apps/design](https://shopify.dev/docs/apps/design)
- [https://shopify.dev/docs/apps/design/content](https://shopify.dev/docs/apps/design/content)
- [https://m3.material.io/foundations/design-tokens/overview](https://m3.material.io/foundations/design-tokens/overview)
- [https://m3.material.io/styles/color/roles](https://m3.material.io/styles/color/roles)
- [https://www.carbondesignsystem.com/building-blocks/foundations/themes/overview](https://www.carbondesignsystem.com/building-blocks/foundations/themes/overview)
- [https://vercel.com/geist/introduction](https://vercel.com/geist/introduction)
- [https://vercel.com/geist/colors](https://vercel.com/geist/colors)

[Section page and specimens](/design/references.htm) | [Instruction index](/design/index.md) | [Plain prompt](/design/agent/references.txt)