Shader Development StudioLegacy format

Border radius: _None detected._

• duration-fast: all

• duration-fast: none

Concise, confident, implementation-focused. Avoid filler preambles.

When creating or updating a component guideline for this system, follow this sequence:

1. State the intent — one sentence on what the component does and why it exists.

2. Map tokens — list every color, spacing, typography, and radius token the component uses. No raw values.

3. Define anatomy — break the component into named parts (container, label, icon, etc.) with their token assignments.

4. Specify states — document every state: default, hover, focus-visible, active, disabled, loading, error, empty.

5. Describe interactions — keyboard, pointer, and touch behavior, including edge cases (long content, overflow, truncation).

6. Add accessibility criteria — write testable pass/fail checks (e.g. "focus ring must be visible at 3:1 contrast").

7. List anti-patterns — concrete examples of misuse with a brief explanation of why each is wrong.

8. Close with a QA checklist — a mechanical list of verifiable items (see Definition of Done below).

Every component guideline produced from this system must contain these sections, in order:

1. Overview — purpose, when to use, when not to use.

2. Tokens and foundations — all referenced tokens from the tables above.

3. Anatomy and variants — named parts, variant matrix, responsive behavior.

4. States and interactions — full state table, keyboard/pointer/touch behavior.

5. Accessibility — ARIA attributes, contrast requirements, focus management, screen reader behavior.

6. Content guidelines — copy length, tone, capitalisation, placeholder text rules.

7. Anti-patterns — explicit examples of what not to build, with reasoning.

Every component built against this system must:

• Reference only tokens defined in the tables above — no hardcoded hex, px, or font values.

• Define all interactive states: default, hover, focus-visible, active, disabled, loading, error.

• Specify responsive behavior at the smallest and largest supported breakpoint.

• Handle edge cases: empty state, overflow / truncation, maximum content length.

• Include keyboard navigation (Tab, Enter, Escape, Arrow keys where applicable).

• Document ARIA roles, labels, and live-region behavior where relevant.

• Include known page component density: - Buttons: 9 detected

• Links: 9 detected

• Navigation: 1 elements

• Lists: 1 detected

A component is not complete until every item below is checked:

• Renders correctly in its default state (smoke test).

• All states documented and visually verified (hover, focus, disabled, loading, error, empty).

• All visual values use design tokens — zero hardcoded values.

• Keyboard navigation works without a pointer.

• No critical accessibility violations (contrast, ARIA, focus order).

• Tested at smallest and largest breakpoint.

• Anti-patterns section lists at least one concrete misuse example.

• Documentation covers purpose, usage, props/API, and limitations.