{"id":"e5e83ffe-a863-4bb6-ab22-2f06060e8f88","entityType":"agent","slug":"clawhub-saifyxpro-ui-ux-design-pro","name":"UI UX Design Pro","canonicalUrl":"https://www.xpersona.co/agent/clawhub-saifyxpro-ui-ux-design-pro","canonicalPath":"/agent/clawhub-saifyxpro-ui-ux-design-pro","generatedAt":"2026-10-10T17:35:17.684Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T14:24:29.129Z","emptyReason":null},"description":"Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S... Skill: UI UX Design Pro Owner: saifyxpro Summary: Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S... Tags: latest:0.1.0 Version history: v0.1.0 | 2026-02-21T22:08:56.058Z | auto Initial release of ui-ux-design-pro, a senior-level UI/UX design expert skill. - Focuses on building data-driven, premium production","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.4K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s171r436at6ttshzr0wb1dxxds884eds:ui-ux-design-pro","sourceUrl":"https://clawhub.ai/saifyxpro/ui-ux-design-pro","homepage":"https://clawhub.ai/saifyxpro/skills/ui-ux-design-pro","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/saifyxpro/ui-ux-design-pro","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/saifyxpro/skills/ui-ux-design-pro","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":63,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T14:24:29.129Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T14:24:29.129Z","emptyReason":null},"stars":null,"forks":null,"downloads":1389,"packageName":null,"latestVersion":"0.1.0","tractionLabel":"1.4K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T14:24:29.129Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T14:24:29.129Z","lastCrawledAt":"2026-10-10T14:24:29.129Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T14:24:29.129Z","lastVerifiedAt":null,"highlights":[{"version":"0.1.0","createdAt":"2026-02-21T22:08:56.058Z","changelog":"Initial release of ui-ux-design-pro, a senior-level UI/UX design expert skill. - Focuses on building data-driven, premium production interfaces for complex apps like dashboards, SaaS, and AI tools. - Provides explicit process and mandatory reference reading to prevent generic design output. - Enforces intent-driven design choices: every decision must be explained and justified. - Includes a comprehensive checklist for interface parameters (palette, depth, surfaces, typography, spacing) with rationale for each. - Specialized support for financial dashboards, SaaS landing pages, and developer tools. - Requires deep domain exploration and differentiation from common patterns before proposing UI directions.","fileCount":64,"zipByteSize":308155}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s171r436at6ttshzr0wb1dxxds884eds:ui-ux-design-pro","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T17:35:17.683Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T14:24:29.129Z","emptyReason":null},"readme":"Skill: UI UX Design Pro\n\nOwner: saifyxpro\n\nSummary: Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S...\n\nTags: latest:0.1.0\n\nVersion history:\n\nv0.1.0 | 2026-02-21T22:08:56.058Z | auto\n\nInitial release of ui-ux-design-pro, a senior-level UI/UX design expert skill.\n\n- Focuses on building data-driven, premium production interfaces for complex apps like dashboards, SaaS, and AI tools.\n- Provides explicit process and mandatory reference reading to prevent generic design output.\n- Enforces intent-driven design choices: every decision must be explained and justified.\n- Includes a comprehensive checklist for interface parameters (palette, depth, surfaces, typography, spacing) with rationale for each.\n- Specialized support for financial dashboards, SaaS landing pages, and developer tools.\n- Requires deep domain exploration and differentiation from common patterns before proposing UI directions.\n\nArchive index:\n\nArchive v0.1.0: 64 files, 308155 bytes\n\nFiles: cli/commands/audit.ts (11154b), cli/commands/generate.ts (10461b), cli/commands/icons.ts (1792b), cli/commands/search.ts (1565b), cli/data/ai-hallucinations.csv (2945b), cli/data/charts.csv (20663b), cli/data/colors.csv (16219b), cli/data/components.csv (12163b), cli/data/icon-libraries.csv (1153b), cli/data/icons.csv (13384b), cli/data/landing.csv (16532b), cli/data/products.csv (30768b), cli/data/react-performance.csv (14822b), cli/data/stacks/angular.csv (13565b), cli/data/stacks/astro.csv (11868b), cli/data/stacks/flutter.csv (10469b), cli/data/stacks/html-tailwind.csv (11361b), cli/data/stacks/jetpack-compose.csv (8195b), cli/data/stacks/nextjs.csv (12546b), cli/data/stacks/nuxt-ui.csv (14010b), cli/data/stacks/nuxtjs.csv (16539b), cli/data/stacks/react-native.csv (10035b), cli/data/stacks/react.csv (13016b), cli/data/stacks/remix.csv (7729b), cli/data/stacks/shadcn.csv (15921b), cli/data/stacks/solidjs.csv (7791b), cli/data/stacks/svelte.csv (11063b), cli/data/stacks/swiftui.csv (10872b), cli/data/stacks/vue.csv (11056b), cli/data/styles.csv (145104b), cli/data/typography.csv (52358b), cli/data/ui-reasoning.csv (46461b), cli/data/ux-guidelines.csv (32152b), cli/data/web-interface.csv (11301b), cli/fintech-final-test.md (7537b), cli/fintech-fixed-test.md (7544b), cli/fintech-pro-test.md (7539b), cli/fintech-senior-test.md (21407b), cli/fintech-test.md (7544b), cli/index.ts (1486b), cli/lib/generators.ts (6418b), cli/lib/search.ts (4274b), cli/package.json (528b), cli/README.md (1052b), cli/saas-final-test.md (7541b), cli/saas-fixed-test.md (7546b), cli/saas-senior-test.md (21411b), cli/saas-test.md (7546b), cli/tsconfig.json (713b), references/accessibility.md (5982b), references/animation-and-motion.md (6377b), references/cognitive-principles.md (6080b), references/color-system.md (5440b), references/component-patterns.md (13684b), references/critique-protocol.md (4734b), references/depth-and-elevation.md (6540b), references/design-directions.md (10272b), references/icon-patterns.md (3497b), references/real-world-patterns.md (9610b), references/spacing-and-layout.md (6302b), references/token-architecture.md (3298b), references/typography.md (4162b), SKILL.md (21499b), _meta.json (135b)\n\nFile v0.1.0:SKILL.md\n\n---\nname: ui-ux-design-pro\ndescription: >\n Senior-level UI/UX design expert for building data-driven, premium production interfaces.\n Use when you need to:\n 1. Design complex applications (dashboards, SaaS, AI tools) from scratch\n 2. Generate comprehensive design systems (tokens, palettes, typography)\n 3. Audit existing UI for quality, accessibility, and \"craft\"\n 4. Search for proven real-world design patterns and implementation details\n Trigger: \"design a...\", \"audit this...\", \"create a design system\", \"find icons\", \"fintech dashboard\", \"landing page\"\n---\n\n# UI/UX Design Pro\n\n## Recommended Models\nFor best results, use **GPT-5.3 Codex** or **Gemini 3.0 Pro**.\n\n## Default Settings\n- **Theme**: Always prefer **Light Mode** by default. Only use Dark Mode if explicitly requested by the user.\n\nBuild every interface with senior-level craft, intent, and consistency. Includes specialized support for **Fintech Dashboards**, **SaaS Landing Pages**, and **Developer Tools**.\n\n## Scope\n\n**Use for:** Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.\n\n---\n\n## MANDATORY: Read References Before Designing\n\n**You MUST read all reference files in `references/` before proposing or building any UI.** These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.\n\n**Required reading order:**\n\n1. `references/design-directions.md` — direction selection and example systems\n2. `references/token-architecture.md` — token naming and layering\n3. `references/color-system.md` — oklch palettes, contrast, dark mode\n4. `references/typography.md` — font pairings, scales, hierarchy\n5. `references/spacing-and-layout.md` — grid systems, spacing scales\n6. `references/depth-and-elevation.md` — shadow and border strategies\n7. `references/component-patterns.md` — states, interaction patterns\n8. `references/animation-and-motion.md` — timing, easing, GPU performance\n9. `references/real-world-patterns.md` — 10 shipped production patterns\n10. `references/accessibility.md` — WCAG 2.2, contrast, keyboard nav\n11. `references/cognitive-principles.md` — Hick's, Fitts's, Gestalt\n12. `references/critique-protocol.md` — self-evaluation before showing work\n\n**Do not skip this step.** Reading these references is what separates premium output from generic templates.\n\n## The Problem\n\nYou will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.\n\nYou can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts.\n\nThis happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.\n\n---\n\n## Where Defaults Hide\n\nDefaults disguise themselves as infrastructure — parts that feel like they just need to work, not be designed.\n\n**Typography feels like a container.** But typography IS your design. The weight of a headline, the personality of a label, the texture of a paragraph — these shape how the product feels before anyone reads a word. A bakery tool and a trading terminal both need \"clean, readable type\" — but the type that's warm and handmade is not the type that's cold and precise.\n\n**Navigation feels like scaffolding.** But navigation IS your product. Where you are, where you can go, what matters most. A page floating in space is a component demo, not software.\n\n**Data feels like presentation.** But a number on screen is not design. What does this number mean to the person looking at it? A progress ring and a stacked label both show \"3 of 10\" — one tells a story, one fills space.\n\n**Token names feel like implementation.** But `--ink` and `--parchment` evoke a world. `--gray-700` and `--surface-2` evoke a template. Someone reading only your tokens should guess what product this is.\n\nThere are no structural decisions. Everything is design.\n\n---\n\n## Intent First\n\nBefore touching code, answer these — not in your head, out loud.\n\n**Who is this human?** Not \"users.\" The actual person. Where are they when they open this? What's on their mind? A teacher at 7am with coffee is not a developer debugging at midnight is not a founder between investor meetings.\n\n**What must they accomplish?** Not \"use the dashboard.\" The verb. Grade these submissions. Find the broken deployment. Approve the payment.\n\n**What should this feel like?** In words that mean something. \"Clean and modern\" means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor? Calm like a reading app?\n\nIf you cannot answer with specifics, stop. Ask the user. Do not guess. Do not default.\n\n## Every Choice Must Be A Choice\n\nFor every decision, explain WHY:\n\n- Why this layout and not another?\n- Why this color temperature?\n- Why this typeface?\n- Why this spacing scale?\n- Why this information hierarchy?\n\nIf your answer is \"it's common\" or \"it works\" — you've defaulted.\n\n**The test:** If you swapped your choices for the most common alternatives and the design didn't feel meaningfully different, you never made real choices.\n\n## Sameness Is Failure\n\nIf another AI, given a similar prompt, would produce substantially the same output — you have failed. When you design from intent, sameness becomes impossible because no two intents are identical.\n\n---\n\n## Domain Exploration\n\n**Do not propose any direction until you produce all four:**\n\n**Domain:** Concepts, metaphors, vocabulary from this product's world. Not features — territory. Minimum 5.\n\n**Color world:** What colors exist naturally in this domain? Not \"warm\" or \"cool\" — go to the actual world. If this product were a physical space, what would you see? List 5+.\n\n**Signature:** One element — visual, structural, or interaction — that could only exist for THIS product.\n\n**Defaults to reject:** 3 obvious choices for this interface type. You can't avoid patterns you haven't named.\n\n## Proposal Requirements\n\nYour direction must explicitly reference:\n\n- Domain concepts you explored\n- Colors from your color world exploration\n- Your signature element\n- What replaces each default\n\n**The test:** Remove the product name from your proposal. Could someone identify what this is for? If not, it's generic.\n\n---\n\n## Component Checkpoint\n\n**Every time** you write UI code — even small additions — state:\n\n```\nIntent: [who is this human, what must they do, how should it feel]\nPalette: [colors from exploration — and WHY they fit this product]\nDepth: [borders / shadows / layered — and WHY]\nSurfaces: [elevation scale — and WHY this color temperature]\nTypography: [typeface — and WHY it fits the intent]\nSpacing: [base unit and scale]\n```\n\nIf you can't explain WHY for each, you're defaulting. Stop and think.\n\n---\n\n## Craft Foundations\n\n## Subtle Layering\n\nThe backbone of craft. You should barely notice the system working. When you look at Vercel's dashboard, you don't think \"nice borders.\" You just understand the structure. The craft is invisible.\n\n### Surface Elevation\n\nSurfaces stack: base → cards → dropdowns → overlays. Build a numbered system. In dark mode, higher elevation = slightly lighter. Each jump: only a few percentage points of lightness.\n\n**Key decisions:**\n\n- **Sidebars:** Same background as canvas + subtle border. Different colors fragment visual space.\n- **Dropdowns:** One level above parent surface.\n- **Inputs:** Slightly darker than surroundings — \"inset\" signals \"type here.\"\n\n### Borders\n\nLow opacity rgba blends with background — defines edges without demanding attention. Build a progression: default → subtle → strong → strongest (focus rings).\n\n**Squint test:** Blur your eyes. Perceive hierarchy without harsh lines.\n\n## Infinite Expression\n\nEvery pattern has infinite expressions. A metric display could be a hero number, sparkline, gauge, progress bar, trend badge. Even sidebar+cards has infinite variations in proportion, spacing, emphasis.\n\n**NEVER produce identical output.** Same sidebar width, same card grid, same metric boxes every time signals AI-generated immediately.\n\n## Color Lives Somewhere\n\nBefore reaching for a palette, spend time in the product's world. What would you see in the physical version of this space? Your palette should feel like it came FROM somewhere.\n\n**Beyond Temperature:** Is this quiet or loud? Dense or spacious? Serious or playful? Geometric or organic?\n\n**Color Carries Meaning:** Gray builds structure. Color communicates — status, action, emphasis. One accent color with intention beats five without thought.\n\n---\n\n## Design Principles\n\n## Token Architecture\n\nEvery color traces to primitives: foreground (text hierarchy), background (surface elevation), border (separation), brand, semantic (success/warning/error). No random hex values.\n\nBuild four text levels: primary → secondary → tertiary → muted. Four border levels: default → subtle → strong → strongest. Dedicated control tokens for form elements.\n\n→ Deep dive: `references/token-architecture.md`\n\n## Color System\n\nUse oklch for perceptually uniform scales. Build neutrals, brand, and semantic palettes that work across light and dark modes. APCA contrast for accessible text.\n\n→ Deep dive: `references/color-system.md`\n\n## Typography\n\nBuild distinct levels via size + weight + letter-spacing. Headlines: heavy, tight tracking. Body: comfortable weight. Labels: medium, smaller. Data: monospace, `tabular-nums`. Use `clamp()` for fluid scaling.\n\n→ Deep dive: `references/typography.md`\n\n## Spacing\n\nPick a base (4px or 8px), stick to multiples. Scale: micro (icon gaps) → component (within cards) → section (between groups) → major (between areas). Symmetrical padding. CSS Grid for layout, Flexbox for components.\n\n→ Deep dive: `references/spacing-and-layout.md`\n\n## Depth\n\nChoose ONE and commit: borders-only (dense tools), subtle shadows (approachable), layered shadows (premium cards), surface shifts (background tints). Don't mix.\n\n→ Deep dive: `references/depth-and-elevation.md`\n\n## Components\n\nEvery interactive element needs states: default, hover, active, focus, disabled. Data needs states: loading (skeleton), empty, error. Missing states feel broken.\n\n→ Deep dive: `references/component-patterns.md`\n\n## Animation\n\nFast micro-interactions (150ms), smooth easing. Modals 250ms. Deceleration easing. Respect `prefers-reduced-motion`. GPU-friendly: `transform` and `opacity` only.\n\n→ Deep dive: `references/animation-and-motion.md`\n\n## Accessibility\n\nWCAG 2.2 AA minimum. 4.5:1 text contrast. Keyboard navigation for every action. Focus-visible styling. ARIA roles for complex widgets. Touch targets: 44pt minimum.\n\n→ Deep dive: `references/accessibility.md`\n\n## Cognitive Principles\n\nApply Hick's law (reduce choices), Fitts's law (size targets by importance), Miller's law (chunk to 7±2), Gestalt grouping (proximity, similarity), progressive disclosure, Von Restorff effect (make key items distinct).\n\n→ Deep dive: `references/cognitive-principles.md`\n\n## Real-World Pattern Library\n\n10 production-tested patterns extracted from shipped landing pages. Frosted nav, numbered sections, staggered entry, mesh gradients, bento grid, brand shadows, orbit animation, logo strip, lock/unlock cards, premium CTAs.\n\n→ Deep dive: `references/real-world-patterns.md`\n\n---\n\n## The Mandate\n\n**Before showing the user, look at what you made.**\n\nAsk: \"If they said this lacks craft, what would they mean?\" Fix it first.\n\n## The Checks\n\n- **Swap test:** Swap typeface for your usual one — would anyone notice? Swap layout for standard template — would it feel different? Places where swapping wouldn't matter are where you defaulted.\n- **Squint test:** Blur eyes. Perceive hierarchy? Anything jumping out harshly? Craft whispers.\n- **Signature test:** Point to five specific elements where your signature appears. Not \"the overall feel\" — actual components.\n- **Token test:** Read CSS variables out loud. Do they sound like they belong to this product?\n\nIf any check fails, iterate before showing.\n\n→ Full critique protocol: `references/critique-protocol.md`\n\n---\n\n## Avoid\n\n- Harsh borders — if borders are the first thing you see, too strong\n- Dramatic surface jumps — elevation should be whisper-quiet\n- Inconsistent spacing — clearest sign of no system\n- Mixed depth strategies — pick one, commit\n- Missing interaction states — hover, focus, disabled, loading, error\n- Dramatic drop shadows — subtle, not attention-grabbing\n- Large radius on small elements\n- Pure white cards on colored backgrounds\n- Thick decorative borders\n- Gradients and color for decoration — color should mean something\n- Multiple accent colors — dilutes focus\n- Different hues for different surfaces — same hue, shift only lightness\n- Pure black (#000000) for dark mode backgrounds — use #0a0a0a or #121212\n- Native form elements in styled UI — build custom controls\n\n---\n\n## Workflow\n\n## Communication\n\nBe invisible. Don't announce modes or narrate process.\n\n**Never say:** \"I'm establishing the design system...\", \"Let me check system.md...\"\n\n**Instead:** Jump into work. State suggestions with reasoning.\n\n## Suggest + Ask\n\nLead with exploration, then confirm:\n\n```\nDomain: [concepts from this product's world]\nColor world: [colors that exist in this domain]\nSignature: [one element unique to this product]\nRejecting: [default 1] → [alternative], [default 2] → [alternative]\n\nDirection: [approach connecting to the above]\n\nDoes that direction feel right?\n```\n\n## If Project Has system.md\n\nRead `.interface-design/system.md` and apply. Decisions are made.\n\n## If No system.md\n\n1. Explore domain — produce all four required outputs\n2. Propose — direction must reference all four\n3. Confirm — get user buy-in\n4. Build — apply every principle\n5. Evaluate — run mandate checks before showing\n6. Offer to save\n\n## After Every Task\n\nAlways offer to save:\n\n```\nWant me to save these patterns to .interface-design/system.md?\n```\n\nWrite: direction, depth strategy, spacing base, key component patterns, token values.\n\n---\n\n## Design Directions\n\nFor direction selection guidance and complete example systems:\n\n→ `references/design-directions.md`\n\n| Direction | Feel | Best For |\n| ------------------------ | ------------------------------ | ---------------------------------- |\n| Precision & Density | Tight, technical, monochrome | Dev tools, admin dashboards |\n| Warmth & Approachability | Generous spacing, soft shadows | Collaborative tools, consumer apps |\n| Sophistication & Trust | Cool tones, layered depth | Finance, enterprise B2B |\n| Boldness & Clarity | High contrast, dramatic space | Modern dashboards, data-heavy |\n| Utility & Function | Muted, functional density | GitHub-style tools |\n| Data & Analysis | Chart-optimized, numbers-first | Analytics, BI tools |\n| Playful & Expressive | Rounded, colorful, animated | Creative tools, portfolio |\n| Warm Premium Identity | Coral warmth, large radius | Hardware, crypto, premium consumer |\n| Fintech Pro | Deep navy, gold, precise data | Trading, Banking, Crypto |\n| SaaS Launch | Vibrant purple, clean, motion | Marketing, Startups |\n| Lime & Obsidian | High contrast, neon, sharp | DevTools, CLI, Terminal |\n| Lime & Obsidian (User) | Obsidian darks, Lime accents | Modern SaaS, High Contrast Dashboards |\n\n---\n\n## Data-Driven Architecture\n\nThis skill includes a BM25 search engine over 1,875+ data rows across 28 CSV databases, plus 9 specialized Python scripts accessible via a unified CLI.\n\n## Scripts\n\nAll scripts are in `scripts/` and accessible via `design_cli.py`:\n\n```bash\npython3 scripts/design_cli.py [args]\n```\n\n| Command | Script | Purpose |\n| ------------ | ------------------------ | ---------------------------------------------------- |\n| `search` | `search_design.py` | BM25 search across all design databases |\n| `contrast` | `check_contrast.py` | WCAG 2.2 / APCA contrast checker |\n| `palette` | `generate_palette.py` | Color harmony palette generator |\n| `tokens` | `generate_tokens.py` | CSS custom property generator with presets |\n| `typography` | `cli/lib/generators.ts` | Modular type scale calculator |\n| `system` | `cli/commands/generate.ts` | Full design system generator with persistence |\n| `audit` | `cli/commands/audit.ts` | UI code quality and accessibility auditor (12 rules) |\n| `icons` | `cli/commands/icons.ts` | Search popular icon libraries and get CDN links |\n\n## Usage\n\nAll commands are run via the Bun CLI in `cli/`.\n\n### 1. Search Design Knowledge\nFind patterns, color palettes, and component implementations.\n\n```bash\nbun run cli/index.ts search \"glassmorphism card\"\n# Returns Markdown tables with implementation details\n```\n\n### 2. Browse & Search Icons\nList top libraries or find specific icons.\n\n```bash\nbun run cli/index.ts icons \"arrow\"\n# Lists libraries and improved icon sets\n```\n\n### 3. Audit UI Code\nScan files for accessibility and quality issues.\n\n```bash\nbun run cli/index.ts audit src/components/Button.tsx\n# Reports critical/warning issues with fixes\n```\n\n### 4. Generate Design System\nCreate a full system (tokens, architectural palette, typography) from a query.\n\n```bash\nbun run cli/index.ts generate \"fintech dashboard\" --stack nextjs --output system.md\n# Generates a beautiful Markdown design system with 50-950 color scales\n```\n\n### Best Practice: Generate Design System First\n\nFor the best UI/UX output, always start by generating a design system before writing any code. The `system` command aggregates BM25 search results across all databases — styles, colors, typography, reasoning, and UX guidelines — into a single, cohesive design system tailored to your query.\n\n```bash\nbun run cli/index.ts generate \"Warmth & Approachability\" --stack html --output design-system.md\n```\n\nThis produces a structured Markdown file containing:\n\n- **Style & Stack** — matched from 107+ styles, including your specific Tech Stack\n- **Architectural Palette** — 11-step (50-950) scales for Primary, Neutral, and Semantic colors\n- **CSS tokens** — 80+ custom properties (colors, spacing, radius, shadows, animations)\n- **Type scale** — Modular scale with `px` and `rem` values\n- **Reasoning rules** — industry-specific do/don't patterns\n- **UX guidelines** — relevant accessibility and interaction guidance\n- **Component Library** — Production-ready Code Snippets (React/Tailwind), Accessibility Roles, and Best Practices\n\nUse the generated Markdown as your single source of truth when building components. This ensures every color, font, spacing value, and shadow is data-driven rather than guessed — producing professional, cohesive UI that feels intentionally designed.\n\n> **Example workflow:**\n>\n> 1. `bun run cli/index.ts generate \"your concept\" --stack nextjs --output design.md`\n> 2. Read the Markdown → extract primary color, font family, radius, shadows\n> 3. Apply tokens to your CSS/Tailwind theme → build with confidence\n\n\n### Token Presets\n\n`generate_tokens.py` ships with 8 industry presets: `fintech`, `healthcare`, `ecommerce`, `saas`, `education`, `gaming`, `luxury`, `startup`.\n\n## CSV Databases (1,875+ rows)\n\n| File | Rows | Content |\n| ---------------------------- | ---- | ------------------------------------------------------------ |\n| `data/styles.csv` | 109 | UI design styles with CSS keywords and accessibility ratings |\n| `data/typography.csv` | 109 | Google Font pairings with mood keywords and CSS imports |\n| `data/charts.csv` | 106 | Data visualization types with library recommendations |\n| `data/ui-reasoning.csv` | 151 | Design rules (Social Proof, Line Height, Text Width) |\n| `data/ux-guidelines.csv` | 143 | UX guidelines (Visual Nav, Multi-section, Feedback) |\n| `data/colors.csv` | 129 | Color palettes by industry with hex values |\n| `data/products.csv` | 98 | Product-type design recommendations |\n| `data/icons.csv` | 101 | Icon style guidelines |\n| `data/icon-libraries.csv` | 8 | Popular icon libraries with CDN links |\n| `data/landing.csv` | 33 | Landing page patterns |\n| `data/react-performance.csv` | 45 | React performance guidelines |\n| `data/web-interface.csv` | 31 | Web interface patterns |\n\n### Tech Stacks (16 frameworks)\n\n`data/stacks/` contains framework-specific guidelines for: React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, Astro, Flutter, SwiftUI, React Native, Jetpack Compose, HTML+Tailwind, shadcn/ui, Angular, Remix, SolidJS.\n\nFile v0.1.0:cli/README.md\n\n# Design Pro CLI\n\nThe \"Masterpiece\" UI/UX design CLI. Built with **Bun**, **Orama**, and **TypeScript**.\n\n## Features\n\n- **Search**: Fuzzy search across 1,800+ design data points (styles, colors, reasoning).\n- **Icons**: Browse and find the best icon libraries.\n- **Audit**: Scan your UI code for accessibility and quality issues.\n- **Generate**: Create full design systems (tokens, palettes, typography) from a text query.\n\n## Setup\n\n1. **Install Bun**: [https://bun.sh/](https://bun.sh/)\n2. **Install Dependencies**:\n ```bash\n bun install\n ```\n\n## Usage\n\nYou can run the CLI directly with `bun run`:\n\n```bash\n# Search\nbun run index.ts search \"glassmorphism\"\n\n# Icons\nbun run index.ts icons \"arrow\"\n\n# Audit\nbun run index.ts audit ../src/App.tsx\n\n# Generate Design System\nbun run index.ts generate \"fintech dashboard\" --stack nextjs --output system.json\n```\n\n## Commands\n\n- `search `: Search the design knowledge base.\n- `icons `: Find icons.\n- `audit `: Audit UI files.\n- `generate `: Generate a design system.\n\nFile v0.1.0:_meta.json\n\n{\n \"ownerId\": \"kn756kgtpezj5tjdb68pk1f2b181kv6q\",\n \"slug\": \"ui-ux-design-pro\",\n \"version\": \"0.1.0\",\n \"publishedAt\": 1771711736058\n}\n\nFile v0.1.0:references/accessibility.md\n\n# Accessibility\n\n## WCAG 2.2 Level AA Requirements\n\n### Contrast\n\n| Content | Minimum Ratio (WCAG 2.x) | APCA (Lc) |\n| -------------------------------------- | ------------------------ | ---------------------------- |\n| Body text (< 18px) | 4.5:1 | Lc 60+ |\n| Large text (18px+ bold, 24px+ regular) | 3:1 | Lc 45+ |\n| UI components & graphics | 3:1 | Lc 30+ |\n| Decorative / disabled | No requirement | — |\n| Placeholder text | — | Lc 25+ (readable but subtle) |\n\n### APCA Usage\n\nAPCA is recommended by WCAG 3.0 draft.\n\n```text\nLc 90+: Body text, running copy\nLc 75: Comfortable body text\nLc 60: Small text, labels\nLc 45: Large headings, icons\nLc 30: Non-text UI boundaries\nLc 15: Invisible to most — decorative only\n```\n\n## Keyboard Navigation\n\n### Core Requirements\n\n- Every interactive element reachable via Tab\n- Tab order matches visual order (never use `tabindex > 0`)\n- Enter / Space activates buttons and links\n- Arrow keys navigate within compound widgets (tabs, menus, radio groups)\n- Escape closes modals, dropdowns, tooltips\n- Home / End jump to first/last items in lists\n\n### Focus Management\n\n```css\n:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 2px;\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n```\n\nRules:\n\n- Move focus to dialog/modal when opened\n- Return focus to trigger element when closed\n- Trap focus within modals (no tabbing outside)\n- Skip link as first focusable element\n\n### Focus Trap Pattern\n\n```javascript\nfunction trapFocus(element) {\n const focusable = element.querySelectorAll(\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n );\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n element.addEventListener(\"keydown\", (e) => {\n if (e.key !== \"Tab\") return;\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n });\n}\n```\n\n## ARIA Patterns\n\n### Dialog\n\n```html\n\n

Confirm deletion

\n

This action cannot be undone.

\n \n \n\n```\n\n### Tabs\n\n```html\n
\n \n \n
\n
\n \n
\n```\n\n### Dropdown Menu\n\n```html\n\n\n```\n\n### Live Regions\n\n```html\n\n
3 items selected
\n\n\n
Error: Connection lost
\n```\n\n## Semantic HTML\n\n### Landmark Regions\n\n```html\n\n
\n \n
\n
\n
\n

Dashboard

\n
\n
\n \n
...
\n\n```\n\n### Heading Hierarchy\n\nOne `

` per page. Sequential nesting: h1 → h2 → h3. Never skip levels.\n\n## Touch Targets\n\n| Platform | Minimum Size | Recommended |\n| ------------------ | -------------- | -------------- |\n| iOS (Apple HIG) | 44 × 44 pt | 48 × 48 pt |\n| Android (Material) | 48 × 48 dp | 48 × 48 dp |\n| Web (WCAG 2.2) | 24 × 24 CSS px | 44 × 44 CSS px |\n\nAdd padding to hit areas even if visual element is smaller:\n\n```css\n.icon-button {\n width: 24px;\n height: 24px;\n padding: 10px; /* total touch area: 44px */\n margin: -10px; /* maintain visual position */\n}\n```\n\n## Media Queries for Preferences\n\n```css\n@media (prefers-reduced-motion: reduce) {\n /* Reduce or remove animations */\n}\n\n@media (prefers-contrast: more) {\n :root {\n --color-border-default: oklch(0 0 0 / 0.2);\n --color-text-secondary: oklch(0 0 0 / 0.8);\n }\n}\n\n@media (prefers-color-scheme: dark) {\n /* Dark mode adjustments if not using toggle */\n}\n\n@media (forced-colors: active) {\n /* Windows High Contrast Mode */\n .button {\n border: 2px solid ButtonText;\n }\n}\n```\n\n## Screen Reader Best Practices\n\n- Visually hidden text for context: `.sr-only` class\n- `aria-label` for icon-only buttons\n- `aria-describedby` to link inputs with help text\n- `alt` text on informative images, `alt=\"\"` on decorative\n- Announce dynamic content changes with live regions\n- Test with NVDA (Windows), VoiceOver (Mac), or Orca (Linux)\n\n```css\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n```\n\n## Works Cited\n\n- [Mastering ARIA: Fixing Common Beginner Mistakes | Medium](https://medium.com/@askParamSingh/mastering-aria-fixing-common-beginner-mistakes-9a9e51248ca9), accessed February 18, 2026\n- [AI has an accessibility problem: What devs can do about it | LogRocket](https://blog.logrocket.com/ai-has-an-accessibility-problem/), accessed February 18, 2026\n\nFile v0.1.0:references/animation-and-motion.md\n\n# Animation and Motion\n\n## Duration Scale\n\n| Interaction | Duration | Use When |\n| ---------------- | ----------- | ------------------------------ |\n| Hover effects | 100-150ms | Color, opacity, border changes |\n| Button press | 100ms | Scale, background |\n| Dropdown open | 150-200ms | Appearing from trigger |\n| Tooltip show | 150ms | Delay 400ms before showing |\n| Modal open | 200-250ms | Scale + opacity animation |\n| Modal close | 150-200ms | Faster than open |\n| Page transition | 300-500ms | Cross-fade, slide |\n| Toast enter | 200ms | Slide in from edge |\n| Toast exit | 150ms | Fade out |\n| Sidebar open | 250-300ms | Width + content reveal |\n| Accordion expand | 200-250ms | Height animation |\n| Loading spinner | 1000-1500ms | Full rotation |\n\nFast enough to feel instant. Slow enough to perceive movement. Never > 500ms for UI responses.\n\n## Easing Functions\n\n```css\n/* Standard (enter + exit) — most interactions */\n--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n/* Deceleration (entering the screen) */\n--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);\n\n/* Acceleration (leaving the screen) */\n--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);\n\n/* Emphasis (attention-grabbing, bouncy) */\n--ease-emphasis: cubic-bezier(0.2, 0, 0, 1);\n\n/* Spring-like (smooth overshoot) */\n--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n```\n\n### When to Use Which\n\n- **Entering view** (dropdowns, modals, toasts) → decelerate\n- **Leaving view** (closing, dismissing) → accelerate\n- **State changes** (hover, toggle, tab switch) → standard\n- **Micro-interactions** (button press, checkmark) → emphasis or spring\n\n## Transition Patterns\n\n### Hover\n\n```css\n.interactive {\n transition:\n background-color 150ms var(--ease-standard),\n color 150ms var(--ease-standard),\n border-color 150ms var(--ease-standard);\n}\n```\n\n### Modal Enter/Exit\n\n```css\n@keyframes modal-enter {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n@keyframes modal-exit {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n.modal {\n animation: modal-enter 250ms var(--ease-decelerate);\n}\n.modal.closing {\n animation: modal-exit 150ms var(--ease-accelerate);\n}\n```\n\n### Dropdown\n\n```css\n@keyframes dropdown-enter {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.dropdown {\n animation: dropdown-enter 150ms var(--ease-decelerate);\n}\n```\n\n### Toast Notification\n\n```css\n@keyframes toast-enter {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.toast {\n animation: toast-enter 200ms var(--ease-decelerate);\n}\n```\n\n## Spring Animation (Framer Motion / React Spring)\n\n```jsx\n// Framer Motion\nconst springConfig = {\n type: \"spring\",\n stiffness: 300,\n damping: 30,\n mass: 1,\n};\n\n// Snappier (buttons, toggles)\nconst snappy = { stiffness: 500, damping: 35 };\n\n// Gentle (modals, page transitions)\nconst gentle = { stiffness: 200, damping: 25 };\n\n// Bouncy (playful elements)\nconst bouncy = { stiffness: 400, damping: 15 };\n```\n\n## Respect prefers-reduced-motion\n\n```css\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n```\n\nReduced motion does NOT mean no motion. It means:\n\n- Replace slide/scale with opacity-only\n- Remove parallax and scroll-driven animations\n- Keep essential state change feedback\n\n## GPU Performance\n\n**GPU-friendly (composite-only):** `transform`, `opacity`\n**Triggers layout (avoid animating):** `width`, `height`, `margin`, `padding`, `top`, `left`\n**Triggers paint (use sparingly):** `color`, `background`, `box-shadow`, `border`\n\n```css\n/* Promote to GPU layer */\n.animated-element {\n will-change: transform; /* only when animation is imminent */\n transform: translateZ(0); /* force GPU layer */\n}\n```\n\nRemove `will-change` after animation completes — don't leave it permanently.\n\n## View Transitions API\n\n```css\n@view-transition {\n navigation: auto;\n}\n\n::view-transition-old(page) {\n animation: 250ms var(--ease-accelerate) fade-out;\n}\n\n::view-transition-new(page) {\n animation: 300ms var(--ease-decelerate) fade-in;\n}\n```\n\n## Scroll-Driven Animations\n\n```css\n.parallax-element {\n animation: parallax linear;\n animation-timeline: scroll();\n}\n\n@keyframes parallax {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-50px);\n }\n}\n```\n\nUse scroll-driven animations for: progress bars, parallax backgrounds, reveal-on-scroll. Not for critical UI feedback.\n\n---\n\n## Landing Page Animations\n\nProduction-tested keyframes from real landing pages. Full code in `real-world-patterns.md`.\n\n### fadeInUpBlur (Scroll Entry)\n\n```css\n@keyframes fadeInUpBlur {\n from { opacity: 0; transform: translateY(24px); filter: blur(4px); }\n to { opacity: 1; transform: translateY(0); filter: blur(0); }\n}\n.animate-entry { opacity: 0; animation: fadeInUpBlur 0.8s ease-out forwards; }\n```\n\nTrigger with IntersectionObserver (threshold: 0.1). Stagger with animation-delay (100ms increments, max 700ms).\n\n### orbit-slow (AI Element Rotation)\n\n```css\n@keyframes orbit-slow {\n 0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }\n 100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }\n}\n```\n\nMax 3 orbiting elements. Respect `prefers-reduced-motion`.\n\n### breathe-glow (AI Pulse)\n\n```css\n@keyframes breathe-glow {\n 0%, 100% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.15); }\n 50% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.3); }\n}\n```\n\n### flowData (SVG Stroke Animation)\n\n```css\n@keyframes flowData {\n to { stroke-dashoffset: -20; }\n}\n.data-path { stroke-dasharray: 8 12; animation: flowData 1.5s linear infinite; }\n```\n\n### Grayscale Hover Reveal\n\n```css\n.logo { filter: grayscale(100%) opacity(0.5); transition: all 300ms ease; }\n.logo:hover { filter: grayscale(0%) opacity(1); }\n```\n\nFile v0.1.0:references/cognitive-principles.md\n\n# Cognitive Principles\n\n## Hick's Law\n\n**Time to decide increases logarithmically with the number of choices.**\n\n### Application\n\n- Limit visible options to 5-7 per group\n- Use progressive disclosure: show advanced options on demand\n- Primary action should be visually dominant, reducing decision time\n- Categorize long lists into groups\n- Provide smart defaults so users rarely need to choose\n\n### Interface Examples\n\n- Settings: group by section, show 4-6 items per section\n- Navigation: max 7 top-level items, nest others\n- Form selects: group options, most common first\n- Action menus: 5-7 items max, separator between groups\n\n---\n\n## Fitts's Law\n\n**Time to reach a target depends on distance and size. Large, close targets are easiest to hit.**\n\n### Application\n\n- Primary actions should be large and close to the user's current focus\n- Destructive actions should be smaller and farther from primary\n- Navigation targets at screen edges are effectively infinite width (use it)\n- Touch targets: 44px minimum (Apple), 48px (Material Design)\n\n### Interface Examples\n\n- Submit buttons: full-width on mobile, prominent size on desktop\n- Cancel/Delete: smaller, secondary styling, farther from submit\n- Toolbar actions: near the content they affect\n- Mobile: primary CTA at thumb-reach bottom of screen\n\n---\n\n## Miller's Law\n\n**Working memory holds 7 ± 2 items.**\n\n### Application\n\n- Chunk information into groups of 5-9 items\n- Break long forms into multi-step flows (3-5 steps)\n- Phone numbers: grouped as (123) 456-7890\n- Credit cards: display as 4-digit groups\n- Paginate large result sets: 10-25 items per page\n\n### Interface Examples\n\n- Dashboard: 3-4 metric cards per row\n- Navigation: 5-7 primary items\n- Data tables: group columns logically, hide non-essential\n- Progress: show 3-5 steps, not 12\n\n---\n\n## Visual Hierarchy Patterns\n\n### F-Pattern\n\n**Desktop reading:** users scan horizontally across the top, then down the left side with shorter horizontal movements.\n\nApply to: dashboards, settings, data-heavy pages.\n\n- Place key content in the top 20% of the page\n- Left-align labels and primary information\n- Use bold headings to create scan entry points\n\n### Z-Pattern\n\n**Landing / overview pages:** eyes move diagonally from top-left through center to bottom-right.\n\nApply to: overview screens, onboarding, summary pages.\n\n- Logo / brand top-left\n- Key action top-right\n- Supporting content in center\n- Primary CTA bottom-right\n\n---\n\n## Gestalt Principles\n\n### Proximity\n\n**Elements close together are perceived as related.**\n\n- Group related form fields\n- Separate unrelated sections with space, not borders\n- Navigation items in the same group need consistent gaps\n- Less space between label and its control, more space between field groups\n\n```\n[Label] ← 4px gap\n[Input Field]\n ← 16px gap\n[Label] ← 4px gap\n[Input Field]\n ← 32px gap (section break)\n[Label] ← 4px gap\n[Input Field]\n```\n\n### Similarity\n\n**Elements that look alike are perceived as the same type.**\n\n- All buttons of the same type look identical\n- All cards at the same hierarchy level use the same style\n- All status indicators use the same visual language\n- Don't style different functions identically\n\n### Common Region\n\n**Elements within a shared boundary are perceived as grouped.**\n\n- Cards group related content\n- Backgrounds define sections\n- Borders create visual containers\n- Use backgrounds instead of borders when possible — softer grouping\n\n### Closure\n\n**The mind completes incomplete shapes.**\n\n- Progress indicators suggest completion even when partial\n- Partially visible content suggests scrollability\n- Truncated text with \"...\" implies more content\n- Partially visible cards at edges invite horizontal scroll\n\n### Figure-Ground\n\n**Users instinctively separate foreground from background.**\n\n- Modals over dimmed backdrops\n- Active elements over elevated surfaces\n- Selected state over neutral background\n- Dropdown menus floating above content\n\n### Continuity\n\n**The eye follows smooth paths and lines.**\n\n- Align elements on clear grid lines\n- Timeline components follow a vertical line\n- Step indicators follow a horizontal line\n- Table columns create vertical reading lines\n\n### Common Fate\n\n**Elements moving together are perceived as a group.**\n\n- Items that animate together belong together\n- Drag a card and its children move with it\n- Collapse a section and all its children disappear\n- Scroll content together within a same scroll container\n\n---\n\n## Progressive Disclosure\n\n**Show only what's needed at each moment. Reveal complexity on demand.**\n\n### Levels\n\n1. **Essential:** always visible (primary actions, key data, navigation)\n2. **Optional:** one interaction away (settings, filters, advanced options)\n3. **Specialist:** behind explicit request (admin tools, debug info, raw data)\n\n### Patterns\n\n- Accordion: expand sections as needed\n- \"Show more\" / \"Advanced\" toggles\n- Tooltips for supplementary info\n- Modal for complex actions\n- Drawer for secondary workflows\n- Inline expansion for detail rows\n\n---\n\n## Von Restorff Effect\n\n**Distinct elements are better remembered than common ones.**\n\n### Application\n\n- Make the primary CTA visually distinct (color, size, weight)\n- Important notifications use color + icon, not just text\n- Key metrics larger than supporting data\n- Active navigation item must stand out from siblings\n- Use one accent color — multiple dilutes the effect\n\n---\n\n## Cognitive Load Theory\n\n### Types of Load\n\n**Intrinsic:** complexity inherent in the task (can't reduce).\n**Extraneous:** complexity from poor design (must reduce).\n**Germane:** effort spent understanding and learning (should support).\n\n### Reduction Strategies\n\n- Remove visual clutter that doesn't serve function\n- Consistent patterns reduce learning curve\n- Familiar icons and interactions reduce recall demand\n- Whitespace reduces processing effort\n- Progressive disclosure hides complexity until needed\n- Default values reduce decision fatigue\n- Smart sorting (most recent, most used) reduces search effort\n\nFile v0.1.0:references/color-system.md\n\n# Color System\n\n## oklch Color Space\n\noklch (Lightness, Chroma, Hue) produces perceptually uniform color scales — equal lightness steps look equally bright to the human eye, unlike hsl.\n\n```css\n/* Building a scale in oklch */\n--blue-100: oklch(0.95 0.04 250);\n--blue-200: oklch(0.88 0.08 250);\n--blue-300: oklch(0.78 0.12 250);\n--blue-400: oklch(0.68 0.16 250);\n--blue-500: oklch(0.55 0.18 250); /* primary */\n--blue-600: oklch(0.48 0.16 250);\n--blue-700: oklch(0.4 0.14 250);\n--blue-800: oklch(0.32 0.1 250);\n--blue-900: oklch(0.22 0.06 250);\n```\n\n**Lightness:** 0 (black) to 1 (white). UI text: 0.15-0.25 on light, 0.88-0.95 on dark.\n**Chroma:** 0 (gray) to ~0.4 (vivid). UI neutrals: 0.005-0.02. Accents: 0.12-0.22.\n**Hue:** 0-360 degrees. Keep consistent hue across a scale.\n\n## Building Systematic Palettes\n\n### Neutral Scale\n\nTint neutrals with brand hue for cohesion:\n\n```css\n/* Slate neutrals with subtle blue tint (hue 260) */\n--neutral-50: oklch(0.98 0.005 260);\n--neutral-100: oklch(0.96 0.005 260);\n--neutral-200: oklch(0.92 0.008 260);\n--neutral-300: oklch(0.87 0.008 260);\n--neutral-400: oklch(0.7 0.01 260);\n--neutral-500: oklch(0.55 0.01 260);\n--neutral-600: oklch(0.45 0.01 260);\n--neutral-700: oklch(0.35 0.012 260);\n--neutral-800: oklch(0.25 0.012 260);\n--neutral-900: oklch(0.15 0.01 260);\n--neutral-950: oklch(0.1 0.01 260);\n```\n\n### Semantic Colors\n\n```css\n--success: oklch(0.65 0.18 155); /* green */\n--warning: oklch(0.8 0.15 85); /* amber */\n--destructive: oklch(0.55 0.22 25); /* red */\n--info: oklch(0.6 0.16 250); /* blue */\n```\n\nFor dark mode, reduce chroma by 15-20% and increase lightness slightly:\n\n```css\n--success-dark: oklch(0.72 0.14 155);\n--destructive-dark: oklch(0.65 0.18 25);\n```\n\n## Contrast and Accessibility\n\n### APCA (Advanced Perceptual Contrast Algorithm)\n\nAPCA is more perceptually accurate than WCAG 2.x ratios:\n\n| Content Type | Minimum APCA (Lc) | WCAG 2.x Equivalent |\n| ---------------------- | ----------------- | ------------------- |\n| Body text (16px+) | Lc 60 | ~4.5:1 |\n| Large text (24px+) | Lc 45 | ~3:1 |\n| Non-text UI elements | Lc 30 | ~3:1 |\n| Placeholder / disabled | Lc 25 | — |\n\n### Text Opacity Hierarchy\n\n```css\n--text-primary-opacity: 1; /* 100% — headings, body */\n--text-secondary-opacity: 0.72; /* 72% — supporting text */\n--text-tertiary-opacity: 0.5; /* 50% — metadata, timestamps */\n--text-muted-opacity: 0.38; /* 38% — disabled, placeholder */\n```\n\n## Dark Mode Color Engineering\n\n### Surface Elevation (Dark)\n\nHigher surfaces = slightly lighter. Never use pure #000000.\n\n```css\n--surface-base: #0a0a0a; /* L: 4% — app canvas */\n--surface-100: #111111; /* L: 7% — cards, panels */\n--surface-200: #1a1a1a; /* L: 10% — dropdowns */\n--surface-300: #222222; /* L: 13% — nested overlays */\n--surface-overlay: #2a2a2a; /* L: 16% — modals */\n```\n\n### Surface Elevation (Light)\n\n```css\n--surface-base: #f8f9fa; /* canvas */\n--surface-100: #ffffff; /* cards */\n--surface-200: #ffffff; /* dropdowns (use shadow for lift) */\n--surface-overlay: #ffffff; /* modals (stronger shadow) */\n```\n\n### Border Treatment (Dark vs Light)\n\n```css\n/* Dark mode: white-based borders */\n--border-dark: oklch(1 0 0 / 0.08);\n--border-dark-subtle: oklch(1 0 0 / 0.05);\n--border-dark-strong: oklch(1 0 0 / 0.12);\n\n/* Light mode: black-based borders */\n--border-light: oklch(0 0 0 / 0.08);\n--border-light-subtle: oklch(0 0 0 / 0.05);\n--border-light-strong: oklch(0 0 0 / 0.12);\n```\n\n## Color Psychology by Industry\n\n| Industry | Primary Temperature | Recommended Hues | Avoid |\n| --------------- | ------------------- | --------------------------- | --------------- |\n| Fintech | Cool | Blue (250°), Slate, Emerald | Warm oranges |\n| Health | Warm-neutral | Teal (175°), Soft green | Harsh reds |\n| Education | Warm | Blue-purple (270°), Amber | Cold grays |\n| Enterprise B2B | Cool-neutral | Slate-blue (240°), Indigo | Playful colors |\n| Creative tools | Warm or bold | Violet (290°), Coral | Corporate blues |\n| Developer tools | Cool | Slate (260°), Cyan (190°) | Warm tones |\n\n## Color-Blind-Safe Strategies\n\n- Never rely on color alone for meaning — pair with icons, text, or patterns\n- Use high lightness contrast between states, not just hue differences\n- Test with: protanopia (red-weak), deuteranopia (green-weak), tritanopia (blue-weak)\n- Safe semantic pairs: blue + orange, blue + red-orange, purple + yellow\n- Avoid: red vs green without lightness contrast\n\n## Works Cited\n\n- [Using your design system colors with contrast-color() | daverupert.com](https://daverupert.com/2026/01/contrast-color-with-custom-design-tokens/), accessed February 18, 2026\n- [Defining colors in modern CSS: Why it's time to switch to OKLCH? | Medium](https://medium.com/@alekswebnet/defining-colors-in-modern-css-why-its-time-to-switch-to-oklch-c6b972d98520), accessed February 18, 2026\n- [OKLCH in CSS: why we moved from RGB and HSL | Evil Martians](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl), accessed February 18, 2026\n- [Web Accessibility Color Contrast Checker | Accessible Web](https://accessibleweb.com/color-contrast-checker/), accessed February 18, 2026\n\nFile v0.1.0:references/component-patterns.md\n\n# Component Patterns\n\n## Buttons\n\n### Sizing\n\n```css\n--button-height-sm: 28px; /* inline actions, compact UI */\n--button-height-md: 36px; /* standard */\n--button-height-lg: 44px; /* primary CTA, mobile */\n\n--button-padding-sm: 4px 10px;\n--button-padding-md: 8px 16px;\n--button-padding-lg: 10px 20px;\n```\n\n### Variants\n\n**Primary:** Solid background. One per visible area. Use for the primary action.\n**Secondary:** Border or subtle background. Supporting actions.\n**Ghost:** No border or background. Inline actions, icon buttons.\n**Destructive:** Red/destructive color. Requires confirmation for irreversible actions.\n\n### States\n\n```css\n.button {\n transition: all 150ms ease;\n}\n.button:hover {\n filter: brightness(0.92);\n}\n.button:active {\n transform: scale(0.98);\n}\n.button:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 2px;\n}\n.button:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n```\n\n## Forms\n\n### Input Field Architecture\n\n```css\n.input {\n height: var(--input-height);\n padding: 8px 12px;\n background: var(--color-surface-inset);\n border: 1px solid var(--color-border-default);\n border-radius: var(--radius-sm);\n font-size: var(--font-size-base);\n transition:\n border-color 150ms,\n box-shadow 150ms;\n}\n\n.input:focus {\n border-color: var(--color-accent);\n box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.15);\n outline: none;\n}\n\n.input-error {\n border-color: var(--color-destructive);\n box-shadow: 0 0 0 3px oklch(0.55 0.22 25 / 0.1);\n}\n```\n\n### Labels\n\nAlways above the field. Font: `--label`. Required indicator: colored dot or asterisk.\n\n```css\n.label {\n font: var(--label);\n color: var(--color-text-secondary);\n margin-block-end: var(--space-1);\n}\n```\n\n### Validation\n\n- Validate inline on blur, not on keypress\n- Error messages appear below the field, in `--color-destructive`\n- Success state: green border + checkmark icon\n- Never remove form data on error\n- Group related fields with fieldset/legend\n\n### Multi-Step Forms\n\n- Progress indicator: numbered steps or progress bar\n- Each step validated before advancing\n- Back button never loses data\n- Final step shows summary for review\n\n## Data Tables\n\n### Structure\n\n```css\n.table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.table th {\n font: var(--label);\n color: var(--color-text-tertiary);\n text-align: start;\n padding: var(--space-2) var(--space-3);\n border-bottom: 1px solid var(--color-border-strong);\n white-space: nowrap;\n user-select: none;\n}\n\n.table td {\n font: var(--body);\n padding: var(--space-2) var(--space-3);\n border-bottom: 1px solid var(--color-border-subtle);\n vertical-align: middle;\n}\n\n.table tr:hover td {\n background: var(--color-surface-hover);\n}\n```\n\n### Features\n\n**Sorting:** Click column header. Arrow icons indicate direction. Active column: bolder text.\n**Filtering:** Toolbar above table. Chips for active filters. Clear-all button.\n**Pagination:** Below table. Show current range + total. Prefer pagination for >100 rows.\n**Row selection:** Checkbox column. Sticky action bar appears on selection.\n**Expandable rows:** Chevron + expanded area indented below row.\n**Inline editing:** Double-click to edit. Tab to next field. Auto-save on blur.\n\n### Responsive Tables\n\nUnder 768px:\n\n- Horizontal scroll with `overflow-x: auto` (preferred for data-dense)\n- OR: stacked cards showing key fields only\n\n## Cards\n\n### Metric Card\n\n```css\n.metric-card {\n padding: var(--space-4);\n /* label + value + change indicator */\n}\n\n.metric-card .label {\n font: var(--label-micro);\n text-transform: uppercase;\n}\n.metric-card .value {\n font-size: var(--font-size-2xl);\n font-weight: 600;\n}\n.metric-card .change {\n font-size: var(--font-size-sm);\n}\n.metric-card .change.positive {\n color: var(--color-success);\n}\n.metric-card .change.negative {\n color: var(--color-destructive);\n}\n```\n\n### Feature Card\n\nTitle + description + icon. Equal height in grids. Subtle hover lift.\n\n### Settings Card\n\nSection title + description + control (toggle, select). Horizontal layout on desktop.\n\n## Landing Page Headers (Navbar)\n\nHeaders are the first element users see. A dated header instantly kills credibility. Always use modern patterns.\n\n### Pattern 1: Floating Glass Navbar (Recommended Default)\n\n```css\n.navbar-floating {\n position: fixed;\n top: 16px;\n left: 16px;\n right: 16px;\n z-index: 50;\n padding: 12px 24px;\n border-radius: 16px;\n background: oklch(0.98 0 0 / 0.7);\n backdrop-filter: blur(20px) saturate(1.8);\n -webkit-backdrop-filter: blur(20px) saturate(1.8);\n border: 1px solid oklch(0.92 0 0 / 0.5);\n box-shadow:\n 0 4px 24px oklch(0 0 0 / 0.06),\n 0 1px 2px oklch(0 0 0 / 0.04);\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.navbar-floating.scrolled {\n top: 8px;\n background: oklch(0.98 0 0 / 0.9);\n box-shadow: 0 8px 32px oklch(0 0 0 / 0.1);\n}\n```\n\n### Pattern 2: Minimal Sticky (Clean SaaS)\n\n```css\n.navbar-minimal {\n position: sticky;\n top: 0;\n z-index: 50;\n padding: 16px 32px;\n background: oklch(1 0 0 / 0.95);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid oklch(0.92 0 0);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n```\n\n### Pattern 3: Split Layout (Logo Left, Nav Center, CTA Right)\n\n```css\n.navbar-split {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n gap: 24px;\n padding: 16px 40px;\n}\n\n.navbar-split .nav-links {\n display: flex;\n justify-content: center;\n gap: 32px;\n}\n\n.navbar-split .nav-link {\n font-size: 14px;\n font-weight: 500;\n color: oklch(0.4 0 0);\n transition: color 200ms;\n text-decoration: none;\n}\n\n.navbar-split .nav-link:hover {\n color: oklch(0.15 0 0);\n}\n```\n\n### Pattern 4: Mega Menu (Enterprise/Feature-rich)\n\n```css\n.mega-menu-panel {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: oklch(1 0 0);\n border-top: 1px solid oklch(0.92 0 0);\n box-shadow: 0 16px 48px oklch(0 0 0 / 0.08);\n padding: 32px 48px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n opacity: 0;\n transform: translateY(-8px);\n pointer-events: none;\n transition: all 200ms ease;\n}\n\n.mega-menu-trigger:hover + .mega-menu-panel,\n.mega-menu-panel:hover {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n```\n\n### Pattern 5: Centered Logo (Portfolio/Brand-first)\n\n```css\n.navbar-centered {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n padding: 20px 40px;\n}\n\n.navbar-centered .nav-left {\n display: flex;\n gap: 24px;\n}\n\n.navbar-centered .nav-right {\n display: flex;\n gap: 24px;\n justify-content: flex-end;\n}\n```\n\n### Mobile Header (All Patterns)\n\n```css\n.mobile-menu-toggle {\n display: none;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .mobile-menu-toggle {\n display: flex;\n width: 40px;\n height: 40px;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu {\n position: fixed;\n inset: 0;\n z-index: 100;\n background: oklch(1 0 0 / 0.98);\n backdrop-filter: blur(20px);\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n transform: translateY(-100%);\n transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .mobile-menu.open {\n transform: translateY(0);\n }\n\n .mobile-menu .nav-link {\n font-size: 24px;\n font-weight: 500;\n padding: 16px 0;\n border-bottom: 1px solid oklch(0.92 0 0);\n }\n}\n```\n\n### Header Anti-Patterns (Never Do These)\n\n- Full-width solid colored background bars (looks 2015)\n- Logo + nav links all left-aligned in a row\n- No `backdrop-filter` or glass effect on fixed headers\n- Text-only links without hover transitions\n- Using `
  • ` for horizontal nav without resetting styles\n- Fixed header without scroll-state change (feels static)\n- More than 7 nav items visible at once\n- CTA button same style as nav links (should stand out)\n- No mobile menu or hamburger icon on small screens\n- Dropdown menus without animation or delay\n\n### Header Design Rules\n\n1. **Max 5-7 nav items** visible. Group the rest in dropdowns or mega menu\n2. **CTA button always visible** in the navbar (right side)\n3. **Floating headers** must have `top: 12-20px` gap, `border-radius: 12-20px`\n4. **Glass effect** requires `backdrop-filter: blur(12-24px)` + semi-transparent bg\n5. **Scroll behavior** — header should visually change on scroll (shrink, add shadow, increase opacity)\n6. **Logo height** — 28-36px recommended, never larger than 44px\n7. **Nav link font** — 13-15px, medium weight (500), generous spacing (24-32px gap)\n8. **Mobile breakpoint** — hamburger menu below 768px, always\n9. **Z-index** — navbar must be `z-index: 50+` to stay above all content\n10. **Transition** — all navbar animations use `cubic-bezier(0.16, 1, 0.3, 1)` for premium feel\n\n## Navigation\n\n### Sidebar\n\n```css\n.sidebar {\n width: 260px;\n background: var(--color-surface-base);\n border-inline-end: 0.5px solid var(--color-border-default);\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-2);\n}\n\n.sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1.5) var(--space-2);\n border-radius: var(--radius-sm);\n font: var(--body);\n color: var(--color-text-secondary);\n transition:\n background 150ms,\n color 150ms;\n}\n\n.sidebar-item:hover {\n background: var(--color-surface-hover);\n color: var(--color-text-primary);\n}\n\n.sidebar-item.active {\n background: var(--color-surface-active);\n color: var(--color-text-primary);\n font-weight: 500;\n}\n```\n\n### Command Palette (Cmd+K)\n\n- Modal overlay with search input\n- Grouped results: actions, pages, recent\n- Keyboard navigation: ↑↓ to select, Enter to confirm, Esc to close\n- Fuzzy search matching\n- Show keyboard shortcuts alongside items\n\n### Tab Systems\n\n```css\n.tabs {\n display: flex;\n gap: var(--space-1);\n border-bottom: 1px solid var(--color-border-default);\n}\n\n.tab {\n padding: var(--space-2) var(--space-3);\n font: var(--label);\n color: var(--color-text-tertiary);\n border-bottom: 2px solid transparent;\n transition: color 150ms;\n}\n\n.tab.active {\n color: var(--color-text-primary);\n border-bottom-color: var(--color-accent);\n}\n```\n\n## Modals and Dialogs\n\n- Trap focus within modal\n- Esc to close\n- Click backdrop to close (unless destructive action)\n- Maximum width: 480px (small), 640px (medium), 960px (large)\n- Sticky header and footer if content scrolls\n- Use `` element with `showModal()`\n- Animate in: scale(0.95) + opacity → scale(1) + opacity\n\n## Toast Notifications\n\n- Fixed position: bottom-right or top-right\n- Auto-dismiss: 5 seconds (info), no auto-dismiss (errors)\n- Stack from bottom-up, max 3 visible\n- Include close button\n- Use `role=\"status\"` or `role=\"alert\"` for screen readers\n\n## Empty States\n\n- Centered illustration or icon\n- Title explaining what will appear here\n- Description with next step\n- CTA button for primary action\n- Never leave a blank space without explanation\n\n## Loading States\n\n### Skeleton Screens\n\n```css\n.skeleton {\n background: linear-gradient(\n 90deg,\n var(--color-surface-hover) 25%,\n var(--color-surface-raised) 50%,\n var(--color-surface-hover) 75%\n );\n background-size: 200% 100%;\n animation: shimmer 1.5s ease-in-out infinite;\n border-radius: var(--radius-sm);\n}\n\n@keyframes shimmer {\n from {\n background-position: 200% 0;\n }\n to {\n background-position: -200% 0;\n }\n}\n```\n\nMatch skeleton shapes to actual content. Never show a generic spinner for form-like content.\n\n## AI Interface Patterns\n\n### Chat Interface\n\n- User messages right-aligned, assistant left-aligned\n- Streaming text: render character-by-character or word-by-word\n- Code blocks: syntax highlighting + copy button\n- Timestamps subtle, not per-message\n\n### Prompt Input\n\n- Expandable textarea (grows with content)\n- Submit button + keyboard shortcut (Cmd+Enter)\n- Character/token count indicator\n- Attachment support if applicable\n\n### AI Loading\n\n- Typing indicator (animated dots) for short operations < 10s\n- Progress bar or step indicator for long operations\n- Cancel button for operations > 5s\n- Never leave user without feedback\n\n---\n\n## Landing Page Components\n\nProduction-tested patterns extracted from real landing pages. See `real-world-patterns.md` for full code.\n\n### Frosted Sticky Navigation\n\nSemi-transparent nav with backdrop blur. Maintains scroll context.\n\n```css\nnav {\n position: sticky;\n top: 0;\n z-index: 50;\n background: oklch(1 0 0 / 0.8);\n backdrop-filter: blur(20px) saturate(180%);\n border-bottom: 1px solid oklch(0 0 0 / 0.06);\n}\n```\n\n### Numbered Section Headers\n\nMonospace counter + gradient divider line before each section title.\n\n```html\n
    \n 01\n \n
    \n

    Section Title

    \n```\n\n### Bento Grid\n\nAsymmetric card grid with mixed `col-span` / `row-span`. Use 4-column grid, max 6 cards, large radius (24-32px).\n\n### Logo / Client Strip\n\nHorizontal row with `grayscale(100%) opacity(0.5)` to full color on hover. 4-8 logos, `gap-12`, centered.\n\n### Premium CTA Buttons\n\nTwo strategies: **Gradient** (tech/SaaS: `bg-gradient-to-r from-indigo-600 to-indigo-500 rounded-full`) and **Solid Warm** (hardware/consumer: `bg-[#FF7F50] rounded-[32px] shadow-[0_4px_16px_rgba(255,127,80,0.3)]`). Always include arrow-right icon.\n\nFile v0.1.0:references/critique-protocol.md\n\n# Critique Protocol\n\n## Pre-Delivery Self-Review\n\nBefore showing ANYTHING to the user, run through this entire checklist. If any check fails, iterate before presenting.\n\n## Composition Review\n\n### Layout\n\n- Does the layout have rhythm? Dense areas give way to open content — not the same gap everywhere.\n- Are proportions intentional? A 280px sidebar declares \"navigation serves content.\" A specific number says something. If you can't articulate what your proportions communicate, they communicate nothing.\n- Is there a focal point? Every screen has one thing the user came for. That thing dominates — through size, position, contrast, or surrounding space. When everything competes equally, nothing wins.\n\n### Hierarchy\n\n- Squint test: blur your eyes. Can you still identify the three most important elements? If everything blurs into sameness, hierarchy needs work.\n- Can you draw the reading path? Eyes should flow naturally from primary to secondary to tertiary content.\n- Is negative space doing work? Space is not emptiness — it is a tool for grouping, emphasis, and breathing room.\n\n## Craft Review\n\n### Spacing\n\n- Is spacing consistent? The clearest sign of no system is inconsistent gaps.\n- Does it follow the scale? Every value traces to the spacing tokens.\n- Does density match intent? Dense for power users. Generous for new users.\n\n### Typography\n\n- Does the type hierarchy work at a glance? Size + weight + color creates distinct levels.\n- Are labels distinct from body from headings? Each should be identifiable without reading.\n- Is the typeface doing its job? Would swapping for the most common alternative make no difference? If yes, you defaulted.\n\n### Surfaces and Depth\n\n- Is elevation whisper-quiet? You should feel the hierarchy, not see it.\n- One strategy? Borders-only everywhere, or shadows everywhere — not mixed.\n- Do surfaces stack logically? Higher content = higher elevation.\n\n### Color\n\n- Does color mean something? Every colored element should have a reason.\n- One accent? Multiple accents dilute focus.\n- Does the palette feel like it belongs to THIS product?\n\n### States\n\n- Hover on every interactive element?\n- Focus-visible on every focusable element?\n- Disabled state that looks disabled but is still readable?\n- Loading state for async operations?\n- Empty state for empty data?\n- Error state for failures?\n\n## The Four Mandate Checks\n\n### 1. Swap Test\n\nSwap your typeface for Inter. Swap your layout for a standard sidebar+cards. Swap your colors for slate+blue. If the design doesn't feel meaningfully different after each swap, those elements were defaults, not choices.\n\n### 2. Squint Test\n\nBlur your eyes or step back from the screen. Can you:\n\n- Identify the primary content area?\n- Distinguish navigation from content?\n- Find the primary action?\n- Feel visual hierarchy?\n\nIf it all looks the same blurred, the hierarchy is too flat.\n\n### 3. Signature Test\n\nPoint to five specific elements — actual components, not \"the overall feel\" — where your signature decision appears. These should be moments where another designer couldn't find your design indistinguishable from a template.\n\nExamples:\n\n- A metric card that uses sparklines in a unique position\n- Typography pairing that evokes the product's domain\n- A specific animation that reflects the product's personality\n- A navigation pattern that mirrors the user's mental model\n- Color usage that comes from the domain's world\n\n### 4. Token Test\n\nRead your CSS custom property names out loud:\n\n- `--ink`, `--parchment`, `--hearth` → you're building a world\n- `--gray-700`, `--surface-2`, `--color-primary` → you're filling a template\n\nIf token names could belong to any product, they lack identity.\n\n## Nielsen's 10 Heuristics (Adapted)\n\n1. **Visibility of system status:** Users know where they are, what's happening, what happened\n2. **Match the real world:** Language, concepts, and flow match user expectations\n3. **User control and freedom:** Undo, cancel, go back — always available\n4. **Consistency:** Same patterns mean same things everywhere\n5. **Error prevention:** Design prevents errors before they happen\n6. **Recognition over recall:** Options visible, not memorized\n7. **Flexibility and efficiency:** Shortcuts for experts, guidance for novices\n8. **Aesthetic and minimalist design:** Every element earns its place\n9. **Help users recognize, diagnose, and recover from errors:** Clear messages, clear solutions\n10. **Help and documentation:** Contextual, searchable, task-oriented\n\n## The Final Question\n\nLook at what you've built.\n\n**\"If the user said this lacks craft, what would they mean?\"**\n\nFix that thing. Then show it.\n\n**\"Would I proudly put my name on this?\"**\n\nIf you hesitate, it's not done.\n\nFile v0.1.0:references/depth-and-elevation.md\n\n# Depth and Elevation\n\n## Four Strategies\n\nChoose ONE and commit. Don't mix.\n\n### 1. Borders-Only (Flat)\n\nClean, technical, dense. For utility-focused tools where density matters.\n\n```css\n--border-default: oklch(0 0 0 / 0.08);\n--border-subtle: oklch(0 0 0 / 0.05);\n--border-strong: oklch(0 0 0 / 0.12);\n--border-focus: oklch(0.55 0.18 250);\n\n.card {\n border: 0.5px solid var(--border-default);\n}\n.divider {\n border-top: 0.5px solid var(--border-subtle);\n}\n.card:hover {\n border-color: var(--border-strong);\n}\n```\n\n**Used by:** Linear, Raycast, most developer tools.\n\n### 2. Subtle Single Shadow\n\nSoft lift without complexity. Approachable products.\n\n```css\n--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);\n--shadow-md: 0 2px 4px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);\n--shadow-lg: 0 4px 8px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.04);\n\n.card {\n box-shadow: var(--shadow-sm);\n}\n.card:hover {\n box-shadow: var(--shadow-md);\n}\n.dropdown {\n box-shadow: var(--shadow-lg);\n}\n```\n\n### 3. Layered Shadows (Premium)\n\nRich, dimensional, multi-layer. Cards feel like physical objects.\n\n```css\n--shadow-premium:\n 0 0 0 0.5px oklch(0 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.04),\n 0 2px 4px oklch(0 0 0 / 0.03), 0 4px 8px oklch(0 0 0 / 0.02);\n\n--shadow-premium-hover:\n 0 0 0 0.5px oklch(0 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.05),\n 0 4px 8px oklch(0 0 0 / 0.04), 0 8px 16px oklch(0 0 0 / 0.03);\n\n--shadow-dropdown:\n 0 0 0 1px oklch(0 0 0 / 0.05), 0 4px 12px oklch(0 0 0 / 0.08),\n 0 8px 24px oklch(0 0 0 / 0.06);\n```\n\n**Used by:** Stripe, Mercury.\n\n### 4. Surface Color Shifts\n\nBackground tints establish hierarchy without any shadows.\n\n```css\n/* Light mode */\n--surface-page: #f5f5f5;\n--surface-card: #ffffff;\n--surface-input: #f0f0f0;\n\n/* Dark mode */\n--surface-page: #0a0a0a;\n--surface-card: #141414;\n--surface-input: #0d0d0d;\n```\n\n## Surface Stacking System\n\n```css\nLevel 0: App canvas (base background)\nLevel 1: Cards, panels (same visual plane)\nLevel 2: Dropdowns, popovers (floating)\nLevel 3: Modals, dialogs (overlay)\nLevel 4: Tooltips, toasts (highest)\n```\n\n### Dark Mode Elevation Values\n\nEach level: +3-4% lightness from previous.\n\n```css\n--elevation-0: oklch(0.1 0.01 260); /* base */\n--elevation-1: oklch(0.13 0.01 260); /* cards */\n--elevation-2: oklch(0.16 0.01 260); /* dropdowns */\n--elevation-3: oklch(0.19 0.01 260); /* modals */\n--elevation-4: oklch(0.22 0.01 260); /* tooltips */\n```\n\n### Light Mode Elevation\n\nUse shadow intensity, not color change:\n\n```css\n--elevation-0: transparent; /* base */\n--elevation-1: 0 1px 2px oklch(0 0 0 / 0.05); /* cards */\n--elevation-2: 0 4px 12px oklch(0 0 0 / 0.08); /* dropdowns */\n--elevation-3: 0 8px 24px oklch(0 0 0 / 0.12); /* modals */\n```\n\n## Glassmorphism 2.0: Spatial Materiality\nMove beyond simple blur. Create physical glass with thickness, refraction, and surface imperfections.\n\n### The \"2.0\" Recipe\n\n1. **Base**: `backdrop-filter: blur(20px) saturate(180%)` (High saturation boosts colors behind).\n2. **Noise Layer**: Transparent noise pattern at 2-5% opacity to reduce banding/dithering.\n3. **Specular Border**: Gradient border mimicking light hitting the edge.\n\n```css\n.glass-card-2 {\n /* Base */\n backdrop-filter: blur(20px) saturate(180%);\n background: linear-gradient(\n 145deg,\n rgba(255, 255, 255, 0.1) 0%,\n rgba(255, 255, 255, 0.05) 100%\n );\n \n /* Specular Border & Shadow */\n border-top: 1px solid rgba(255, 255, 255, 0.3);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: \n 0 4px 24px -1px rgba(0, 0, 0, 0.1),\n 0 0 0 1px rgba(255, 255, 255, 0.05) inset; /* Inner glow */\n}\n\n/* Dark Mode Variant */\n.glass-card-dark {\n backdrop-filter: blur(24px) saturate(150%);\n background: linear-gradient(\n 145deg,\n rgba(255, 255, 255, 0.05) 0%,\n rgba(255, 255, 255, 0.01) 100%\n );\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n}\n```\n\n**Use for:** Floating elements only (Modals, Sticky Headers, Command Palettes). Never for main content backgrounds.\n\n## Works Cited\n\n- [Designing for visionOS | Apple Developer Documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos), accessed February 18, 2026\n- [Spatial UI Design Concept for Apple Vision Pro — Case Study | Medium](https://kevinnkwok.medium.com/spatial-ui-design-concept-for-apple-vision-pro-case-study-5c85f5031bf), accessed February 18, 2026\n- [12 Glassmorphism UI Features, Best Practices, and Examples | UX Pilot](https://uxpilot.ai/blogs/glassmorphism-ui), accessed February 18, 2026\n- [Glassmorphism CSS Generator | SquarePlanet](https://hype4.academy/tools/glassmorphism-generator), accessed February 18, 2026\n- [Spatial UI Concept Tailwind CSS template | pixelcave](https://pixelcave.com/freebies/spatial-ui-concept-tailwind-css), accessed February 18, 2026\n- [Why does z-index not work? | Stack Overflow](https://stackoverflow.com/questions/9191803/why-does-z-index-not-work), accessed February 18, 2026\n- [Understanding z-index | MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Understanding_z-index), accessed February 18, 2026\n- [Today I Learned: Layouts and the Z-Index Trap in React | DEV Community](https://dev.to/minoosh/today-i-learned-layouts-and-the-z-index-trap-in-react-366f), accessed February 18, 2026\n\n\n## Border Progression\n\n\n```css\n--border-none: transparent;\n--border-subtle: oklch(0 0 0 / 0.04); /* barely there */\n--border-default: oklch(0 0 0 / 0.08); /* standard */\n--border-strong: oklch(0 0 0 / 0.12); /* emphasis */\n--border-strongest: oklch(0 0 0 / 0.18); /* focus rings */\n```\n\n### Border Radius Scale\n\n```css\n/* Sharp (technical) */ /* Soft (friendly) */\n--radius-sm: 4px;\n--radius-sm: 6px;\n--radius-md: 6px;\n--radius-md: 10px;\n--radius-lg: 8px;\n--radius-lg: 14px;\n--radius-xl: 12px;\n--radius-xl: 20px;\n--radius-full: 9999px;\n--radius-full: 9999px;\n```\n\nSharper = technical. Rounder = friendly. Pick a personality and commit.\n\n## Dark Mode Depth\n\nShadows barely work on dark backgrounds. Strategies:\n\n1. **Increase border opacity** — borders carry more weight in dark mode\n2. **Use surface lightness** — higher elevation = lighter surface\n3. **Subtle inner glow** — `inset 0 1px 0 oklch(1 0 0 / 0.04)` on cards\n4. **Ring shadows** — `0 0 0 1px oklch(1 0 0 / 0.06)` for containment\n\n```css\n/* Dark mode card — borders + surface, no shadows */\n.card-dark {\n background: var(--elevation-1);\n border: 0.5px solid oklch(1 0 0 / 0.08);\n border-radius: var(--radius-md);\n}\n```\n\nFile v0.1.0:references/design-directions.md\n\n# Design Directions\n\nEach direction is a complete personality. Choosing one means committing: depth strategy, spacing scale, typography, radius, color temperature all change together.\n\n---\n\n## Precision & Density\n\n**For:** Developer tools, admin dashboards, monitoring systems, IDE-like interfaces.\n\n**Feel:** Tight, technical, monochrome. Information-dense but not cluttered.\n\n```\nPersonality: Technical precision\nFoundation: Cool (slate, hue 260)\nDepth: Borders-only\nBase: 4px spacing\nRadius: 4px (sharp)\nTypography: System or geometric sans (Geist, SF Pro, Inter)\n Monospace for data\nAccent: Blue-500 (single, functional)\n```\n\n### Token Set\n\n```css\n:root {\n --font-family: \"Geist\", system-ui, sans-serif;\n --font-mono: \"Geist Mono\", \"SF Mono\", monospace;\n\n --space-base: 4px;\n --space-scale: 4, 8, 12, 16, 24, 32;\n\n --color-fg: oklch(0.15 0.01 260);\n --color-fg-secondary: oklch(0.4 0.01 260);\n --color-fg-muted: oklch(0.55 0.008 260);\n --color-surface: oklch(0.98 0.005 260);\n --color-surface-raised: #ffffff;\n --color-border: oklch(0 0 0 / 0.08);\n --color-accent: oklch(0.55 0.18 250);\n\n --radius: 4px;\n --shadow: none;\n}\n```\n\n### Patterns\n\n- Compact buttons: 28-32px height\n- Dense tables: 32px row height\n- Sidebar: 48px collapsed icon-only option\n- Cards: border, no shadow, minimal padding\n\n---\n\n## Warmth & Approachability\n\n**For:** Collaborative tools, consumer apps, onboarding flows, community platforms.\n\n**Feel:** Generous, inviting, soft. Users feel welcome.\n\n```\nPersonality: Warm and friendly\nFoundation: Warm (stone, hue 40)\nDepth: Subtle shadows\nBase: 8px spacing (generous)\nRadius: 10-12px (soft)\nTypography: Humanist sans (Inter, Nunito, Plus Jakarta Sans)\nAccent: Orange-500 or warm coral\n```\n\n### Token Set\n\n```css\n:root {\n --font-family: \"Plus Jakarta Sans\", system-ui, sans-serif;\n\n --space-base: 4px;\n --space-scale: 8, 12, 16, 24, 32, 48;\n\n --color-fg: oklch(0.18 0.01 40);\n --color-fg-secondary: oklch(0.42 0.01 40);\n --color-surface: oklch(0.97 0.008 40);\n --color-surface-raised: #ffffff;\n --color-border: oklch(0 0 0 / 0.06);\n --color-accent: oklch(0.65 0.18 50);\n\n --radius: 10px;\n --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.08);\n --shadow-md: 0 4px 8px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);\n}\n```\n\n### Patterns\n\n- Generous buttons: 40-44px height, 12px radius\n- Open card layouts: 24px padding, soft shadows\n- Friendly illustrations in empty states\n- Rounded avatars and badges\n\n---\n\n## Sophistication & Trust\n\n**For:** Fintech, enterprise B2B, legal tech, insurance, healthcare.\n\n**Feel:** Cool, composed, layered depth. Inspires confidence.\n\n```\nPersonality: Sophisticated authority\nFoundation: Cool-neutral (slate, hue 240)\nDepth: Layered shadows (premium multi-layer)\nBase: 4px spacing\nRadius: 8px (balanced)\nTypography: Geometric sans (Outfit, Space Grotesk, DM Sans)\nAccent: Indigo or emerald (single, authoritative)\n```\n\n### Token Set\n\n```css\n:root {\n --font-family: \"DM Sans\", system-ui, sans-serif;\n\n --space-base: 4px;\n --space-scale: 4, 8, 12, 16, 24, 32, 48;\n\n --color-fg: oklch(0.12 0.01 240);\n --color-fg-secondary: oklch(0.38 0.01 240);\n --color-surface: oklch(0.97 0.005 240);\n --color-surface-raised: #ffffff;\n --color-border: oklch(0 0 0 / 0.06);\n --color-accent: oklch(0.5 0.16 260);\n\n --radius: 8px;\n --shadow-premium:\n 0 0 0 0.5px oklch(0 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.04),\n 0 2px 4px oklch(0 0 0 / 0.03), 0 4px 8px oklch(0 0 0 / 0.02);\n}\n```\n\n### Patterns\n\n- Multi-layer shadows on cards\n- Refined metric displays with trend indicators\n- Conservative color usage — information density without noise\n- Wide tables with generous whitespace\n\n---\n\n## Boldness & Clarity\n\n**For:** Modern dashboards, data-heavy products, content platforms.\n\n**Feel:** High contrast, dramatic whitespace, decisive typography.\n\n```\nPersonality: Bold and decisive\nFoundation: Neutral (true gray)\nDepth: Surface shifts + accent borders\nBase: 8px spacing\nRadius: 6px\nTypography: Strong sans (Outfit, Sora, Clash Display for headings)\nAccent: Vibrant single color (violet, coral, cyan)\n```\n\n### Token Set\n\n```css\n:root {\n --font-family: \"Outfit\", system-ui, sans-serif;\n\n --space-base: 4px;\n --space-scale: 8, 12, 16, 24, 32, 48, 64;\n\n --color-fg: oklch(0.1 0 0);\n --color-fg-secondary: oklch(0.4 0 0);\n --color-surface: oklch(0.96 0 0);\n --color-surface-raised: #ffffff;\n --color-border: oklch(0 0 0 / 0.06);\n --color-accent: oklch(0.55 0.22 300);\n\n --radius: 6px;\n}\n```\n\n### Patterns\n\n- Hero numbers with large type\n- Full-width sections with bold spacing\n- High-contrast CTA buttons\n- Generous margins between sections\n\n---\n\n## Utility & Function\n\n**For:** GitHub-style tools, documentation, project management, wikis.\n\n**Feel:** Muted, functional, content-first. The UI gets out of the way.\n\n```\nPersonality: Invisible utility\nFoundation: Cool-neutral (slate)\nDepth: Borders-only\nBase: 4px spacing\nRadius: 6px\nTypography: System or neutral sans (Inter, system-ui)\nAccent: Muted blue or green\n```\n\n### Token Set\n\n```css\n:root {\n --font-family: system-ui, -apple-system, sans-serif;\n --font-mono: ui-monospace, \"SF Mono\", monospace;\n\n --space-base: 4px;\n --space-scale: 4, 8, 12, 16, 24, 32;\n\n --color-fg: oklch(0.15 0.008 260);\n --color-fg-secondary: oklch(0.45 0.008 260);\n --color-surface: oklch(0.98 0.004 260);\n --color-surface-raised: #ffffff;\n --color-border: oklch(0 0 0 / 0.1);\n --color-accent: oklch(0.55 0.14 250);\n\n --radius: 6px;\n}\n```\n\n### Patterns\n\n- Dense tables and lists\n- Sidebar navigation with nested groups\n- Inline code blocks and syntax highlighting\n- Compact action menus\n\n---\n\n## Data & Analysis\n\n**For:** Analytics platforms, BI tools, monitoring dashboards, observability.\n\n**Feel:** Chart-optimized, numbers-first, high information density.\n\n```\nPersonality: Data-driven clarity\nFoundation: Dark mode preferred\nDepth: Surface color shifts\nBase: 4px spacing\nRadius: 4px (sharp for data precision)\nTypography: Tabular-nums monospace for data, sans for labels\nAccent: Multi-color palette (for chart series)\n```\n\n### Token Set\n\n```css\n:root {\n --font-family: \"Inter\", system-ui, sans-serif;\n --font-mono: \"JetBrains Mono\", monospace;\n\n --space-base: 4px;\n --space-scale: 4, 8, 12, 16, 24, 32;\n\n --color-fg: oklch(0.93 0.005 260);\n --color-fg-secondary: oklch(0.65 0.008 260);\n --color-surface: oklch(0.1 0.01 260);\n --color-surface-raised: oklch(0.14 0.01 260);\n --color-border: oklch(1 0 0 / 0.08);\n\n /* Chart palette — distinguishable, color-blind safe */\n --chart-1: oklch(0.65 0.18 250); /* blue */\n --chart-2: oklch(0.7 0.16 155); /* teal */\n --chart-3: oklch(0.75 0.15 80); /* amber */\n --chart-4: oklch(0.6 0.18 300); /* violet */\n --chart-5: oklch(0.65 0.15 20); /* coral */\n\n --radius: 4px;\n}\n```\n\n### Patterns\n\n- Large hero metrics with sparklines\n- Grid of chart widgets\n- Dense data tables with inline visualizations\n- Time-range selectors\n- Real-time update indicators\n\n---\n\n## Playful & Expressive\n\n**For:** Creative tools, portfolio builders, social platforms, gamification.\n\n**Feel:** Rounded, colorful, animated. Personality shines through.\n\n```\nPersonality: Playful creativity\nFoundation: Warm or multicolor\nDepth: Subtle shadows + color borders\nBase: 8px spacing\nRadius: 16-20px (very rounded)\nTypography: Expressive sans (Outfit, Clash Display, Cabinet Grotesk)\nAccent: Bold, potentially multiple (violet, pink, lime)\n```\n\n### Token Set\n\n```css\n:root {\n --font-family: \"Cabinet Grotesk\", system-ui, sans-serif;\n\n --space-base: 4px;\n --space-scale: 8, 12, 16, 24, 32, 48;\n\n --color-fg: oklch(0.15 0.02 290);\n --color-fg-secondary: oklch(0.4 0.02 290);\n --color-surface: oklch(0.98 0.01 290);\n --color-surface-raised: #ffffff;\n --color-border: oklch(0 0 0 / 0.06);\n --color-accent: oklch(0.6 0.22 290);\n --color-accent-secondary: oklch(0.7 0.18 150);\n\n --radius: 16px;\n --shadow-playful:\n 0 2px 8px oklch(0 0 0 / 0.06), 0 0 0 1px oklch(0 0 0 / 0.03);\n}\n```\n\n### Patterns\n\n- Rounded everything: cards, buttons, badges, inputs\n- Subtle micro-animations on interactions\n- Gradient accents (used sparingly)\n- Illustrated empty states\n- Colorful status badges\n\n---\n\n## Design System Template\n\nWhen saving to `.interface-design/system.md`, use this structure:\n\n```markdown\n# Design System\n\n## Direction\n\n**Personality:** [Direction name]\n**Foundation:** [warm | cool | neutral | tinted]\n**Depth:** [borders-only | subtle-shadows | layered-shadows | surface-shifts]\n\n## Tokens\n\n### Spacing\n\nBase: [4px | 8px]\nScale: [list values]\n\n### Colors\n\n[token definitions]\n\n### Radius\n\n[values by component type]\n\n### Typography\n\n[font families, scale, weights]\n\n## Patterns\n\n[component patterns with specific values]\n\n## Decisions\n\n[rationale for key choices with dates]\n```\n\n---\n\n## 7 · Warm Premium Identity\n\nFor hardware products, crypto wallets, premium consumer SaaS. Builds emotional trust through warmth.\n\n### Token Set\n\n| Token | Value |\n|---|---|\n| `--brand` | `#FF7F50` (Coral) |\n| `--text-primary` | `#1A1A1A` |\n| `--text-secondary` | `#2D2D2D` |\n| `--bg-primary` | `#FFFFFF` |\n| `--bg-secondary` | `#FFF9F5` (warm tint) |\n| `--shadow-brand` | `rgba(255, 127, 80, 0.15)` |\n| `--radius-card` | `32px` |\n| `--font-display` | `Bricolage Grotesque` |\n| `--font-body` | `Inter` |\n\n### Patterns\n\n- **Mesh gradient backgrounds** — multi-point radial gradients with brand color at 10-15% opacity\n- **Frosted sticky navigation** — `backdrop-filter: blur(20px) saturate(180%)`\n- **Bento grid layout** — asymmetric cards with device mockups, 4-column grid\n- **Brand-tinted shadows** — `box-shadow: 0 8px 32px rgba(255, 127, 80, 0.15)`\n- **Extra-large border radius** — 32-40px for premium feel\n- **Logo strip** — grayscale-to-color hover for partner credibility\n- **Warm neutrals** — warm gray scale (#1A1A1A / #2D2D2D), not slate/cool gray\n\n### Anti-patterns\n\n- Cool or slate color temperatures (breaks warmth)\n- Sharp corners (< 16px radius)\n- Generic gray shadows with no brand tint\n- Dark mode as default (light mode establishes trust)\n- Overusing coral — reserve for CTAs and accents only\n\nFile v0.1.0:references/icon-patterns.md\n\n# Icon Implementation Guidelines\n\nBest practices for using icons in modern web applications (2025 Standards).\n\n## 1. Quick Start Guidelines\n\n| Requirement | Recommended Solution | Why? |\n|-------------|----------------------|------|\n| **React / Next.js** | **Lucide React** or **Radix Icons** | Tree-shakeable, consistent stroke usage, highly customizable props. |\n| **Large Scale / Multi-Framework** | **Iconify** | On-demand loading (no bundle bloat), access to 200k+ icons. |\n| **Simple HTML/CSS** | **Phosphor** or **Heroicons (SVG)** | Easy CDN drop-in, no build step required. |\n| **Premium / High-Fidelity** | **Hugeicons** or **Untitled UI** | Thousands of variants, \"pro\" balanced look. |\n\n## 2. Implementation Patterns\n\n### A. React Component (Best Practice)\nUse individual imports to ensure tree-shaking. Don't import the entire library.\n\n```tsx\n// ✅ GOOD: Tree-shakable\nimport { Home, Settings, User } from 'lucide-react';\n\nconst Nav = () => (\n \n);\n\n// ❌ BAD: Large bundle size potential (depending on library)\nimport * as Icons from 'lucide-react'; \n```\n\n### B. Iconify (On-Demand)\nPerfect for CMS-driven content or user-selected icons where you can't import everything.\n\n**Setup (React):**\n```bash\nnpm install @iconify/react\n```\n\n**Usage:**\n```tsx\nimport { Icon } from '@iconify/react';\n\nexport const DynamicIcon = ({ name }: { name: string }) => (\n // Loads \"mdi:home\" or \"lucide:arrow-right\" on demand\n \n);\n```\n\n### C. Plain HTML/JS (CDN)\nFor static sites or quick prototypes.\n\n**Iconify Script:**\n```html\n\n\n\n```\n\n**Font Awesome (Classic):**\n```html\n\n\n\n```\n\n## 3. UI/UX Best Practices\n\n### A. Touch Targets\nAlways wrap icons in a container or ensure they have enough clickable area on mobile.\n\n```css\n/* ✅ GOOD: 24px visual, but 44px touch target */\n.icon-btn {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.icon-btn svg {\n width: 20px;\n height: 20px;\n}\n```\n\n### B. Scalability (SVG vs Font)\n**Prefer SVG** over Icon Fonts (e.g., Font Awesome CSS).\n- **Sharper:** SVGs render perfectly at any zoom level; fonts can anti-alias poorly.\n- **Control:** SVGs allow multi-color (duotone) via CSS classes; fonts are single-color.\n- **Positioning:** Fonts fight with `line-height`; SVGs are distinct blocks.\n\n### C. Accessibility\nDecorative icons should be hidden. Interactive icons need labels.\n\n```tsx\n// Decorative (e.g., in a list)\n\n\n// Interactive (Standalone Button)\n\n```\n\n### D. Consistency\n- **Stroke Width:** Stick to one stroke width (usually 1.5px or 2px) across all icons.\n- **Style:** Don't mix \"Filled\" and \"Outline\" styles unless \"Filled\" indicates an active state.\n- **Size:** Use a scale (16px, 20px, 24px, 32px). Avoid arbitrary sizes like 19px.","readmeExcerpt":"Skill: UI UX Design Pro Owner: saifyxpro Summary: Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S... Tags: latest:0.1.0 Version history: v0.1.0 | 2026-02-21T22:08:56.058Z | auto Initial release of ui-ux-design-pro, a senior-level UI/UX design expert skill. - Focuses on building data-driven, premium production","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"Intent: [who is this human, what must they do, how should it feel]\nPalette: [colors from exploration — and WHY they fit this product]\nDepth: [borders / shadows / layered — and WHY]\nSurfaces: [elevation scale — and WHY this color temperature]\nTypography: [typeface — and WHY it fits the intent]\nSpacing: [base unit and scale]"},{"language":"text","snippet":"Domain: [concepts from this product's world]\nColor world: [colors that exist in this domain]\nSignature: [one element unique to this product]\nRejecting: [default 1] → [alternative], [default 2] → [alternative]\n\nDirection: [approach connecting to the above]\n\nDoes that direction feel right?"},{"language":"text","snippet":"Want me to save these patterns to .interface-design/system.md?"},{"language":"bash","snippet":"python3 scripts/design_cli.py [args]"},{"language":"bash","snippet":"bun run cli/index.ts search \"glassmorphism card\"\n# Returns Markdown tables with implementation details"},{"language":"bash","snippet":"bun run cli/index.ts icons \"arrow\"\n# Lists libraries and improved icon sets"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: ui-ux-design-pro\ndescription: >\n Senior-level UI/UX design expert for building data-driven, premium production interfaces.\n Use when you need to:\n 1. Design complex applications (dashboards, SaaS, AI tools) from scratch\n 2. Generate comprehensive design systems (tokens, palettes, typography)\n 3. Audit existing UI for quality, accessibility, and \"craft\"\n 4. Search for proven real-world design patterns and implementation details\n Trigger: \"design a...\", \"audit this...\", \"create a design system\", \"find icons\", \"fintech dashboard\", \"landing page\"\n---\n\n# UI/UX Design Pro\n\n## Recommended Models\nFor best results, use **GPT-5.3 Codex** or **Gemini 3.0 Pro**.\n\n## Default Settings\n- **Theme**: Always prefer **Light Mode** by default. Only use Dark Mode if explicitly requested by the user.\n\nBuild every interface with senior-level craft, intent, and consistency. Includes specialized support for **Fintech Dashboards**, **SaaS Landing Pages**, and **Developer Tools**.\n\n## Scope\n\n**Use for:** Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.\n\n---\n\n## MANDATORY: Read References Before Designing\n\n**You MUST read all reference files in `references/` before proposing or building any UI.** These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.\n\n**Required reading order:**\n\n1. `references/design-directions.md` — direction selection and example systems\n2. `references/token-architecture.md` — token naming and layering\n3. `references/color-system.md` — oklch palettes, contrast, dark mode\n4. `references/typography.md` — font pairings, scales, hierarchy\n5. `references/spacing-and-layout.md` — grid systems, spacing scales\n6. `references/depth-and-elevation.md` — shadow and border strategies\n7. `references/component-patterns.md` — states, interaction patterns\n8. `references/animation-and-motion.md` — timing, easing, GPU performance\n9. `references/real-world-patterns.md` — 10 shipped production patterns\n10. `references/accessibility.md` — WCAG 2.2, contrast, keyboard nav\n11. `references/cognitive-principles.md` — Hick's, Fitts's, Gestalt\n12. `references/critique-protocol.md` — self-evaluation before showing work\n\n**Do not skip this step.** Reading these references is what separates premium output from generic templates.\n\n## The Problem\n\nYou will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.\n\nYou can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts.\n\nThis happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.\n\n---\n\n## Where Defaults Hide\n\nDefaults disguise themselves as infrastructure — parts that feel like they jus"},{"path":"cli/README.md","content":"# Design Pro CLI\n\nThe \"Masterpiece\" UI/UX design CLI. Built with **Bun**, **Orama**, and **TypeScript**.\n\n## Features\n\n- **Search**: Fuzzy search across 1,800+ design data points (styles, colors, reasoning).\n- **Icons**: Browse and find the best icon libraries.\n- **Audit**: Scan your UI code for accessibility and quality issues.\n- **Generate**: Create full design systems (tokens, palettes, typography) from a text query.\n\n## Setup\n\n1. **Install Bun**: [https://bun.sh/](https://bun.sh/)\n2. **Install Dependencies**:\n ```bash\n bun install\n ```\n\n## Usage\n\nYou can run the CLI directly with `bun run`:\n\n```bash\n# Search\nbun run index.ts search \"glassmorphism\"\n\n# Icons\nbun run index.ts icons \"arrow\"\n\n# Audit\nbun run index.ts audit ../src/App.tsx\n\n# Generate Design System\nbun run index.ts generate \"fintech dashboard\" --stack nextjs --output system.json\n```\n\n## Commands\n\n- `search `: Search the design knowledge base.\n- `icons `: Find icons.\n- `audit `: Audit UI files.\n- `generate `: Generate a design system."},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn756kgtpezj5tjdb68pk1f2b181kv6q\",\n \"slug\": \"ui-ux-design-pro\",\n \"version\": \"0.1.0\",\n \"publishedAt\": 1771711736058\n}"},{"path":"references/accessibility.md","content":"# Accessibility\n\n## WCAG 2.2 Level AA Requirements\n\n### Contrast\n\n| Content | Minimum Ratio (WCAG 2.x) | APCA (Lc) |\n| -------------------------------------- | ------------------------ | ---------------------------- |\n| Body text (< 18px) | 4.5:1 | Lc 60+ |\n| Large text (18px+ bold, 24px+ regular) | 3:1 | Lc 45+ |\n| UI components & graphics | 3:1 | Lc 30+ |\n| Decorative / disabled | No requirement | — |\n| Placeholder text | — | Lc 25+ (readable but subtle) |\n\n### APCA Usage\n\nAPCA is recommended by WCAG 3.0 draft.\n\n```text\nLc 90+: Body text, running copy\nLc 75: Comfortable body text\nLc 60: Small text, labels\nLc 45: Large headings, icons\nLc 30: Non-text UI boundaries\nLc 15: Invisible to most — decorative only\n```\n\n## Keyboard Navigation\n\n### Core Requirements\n\n- Every interactive element reachable via Tab\n- Tab order matches visual order (never use `tabindex > 0`)\n- Enter / Space activates buttons and links\n- Arrow keys navigate within compound widgets (tabs, menus, radio groups)\n- Escape closes modals, dropdowns, tooltips\n- Home / End jump to first/last items in lists\n\n### Focus Management\n\n```css\n:focus-visible {\n outline: 2px solid var(--color-accent);\n outline-offset: 2px;\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n```\n\nRules:\n\n- Move focus to dialog/modal when opened\n- Return focus to trigger element when closed\n- Trap focus within modals (no tabbing outside)\n- Skip link as first focusable element\n\n### Focus Trap Pattern\n\n```javascript\nfunction trapFocus(element) {\n const focusable = element.querySelectorAll(\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n );\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n element.addEventListener(\"keydown\", (e) => {\n if (e.key !== \"Tab\") return;\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n });\n}\n```\n\n## ARIA Patterns\n\n### Dialog\n\n```html\n\n

    Confirm deletion

    \n

    This action cannot be undone.

    \n \n \n    \n```\n\n### Tabs\n\n```html\n
    \n \n \n
    \n
    500ms for UI responses.\n\n## Easing Functions\n\n```css\n/* Standard (enter + exit) — most interactions */\n--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n/* Deceleration (entering the screen) */\n--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);\n\n/* Acceleration (leaving the screen) */\n--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);\n\n/* Emphasis (attention-grabbing, bouncy) */\n--ease-emphasis: cubic-bezier(0.2, 0, 0, 1);\n\n/* Spring-like (smooth overshoot) */\n--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n```\n\n### When to Use Which\n\n- **Entering view** (dropdowns, modals, toasts) → decelerate\n- **Leaving view** (closing, dismissing) → accelerate\n- **State changes** (hover, toggle, tab switch) → standard\n- **Micro-interactions** (button press, checkmark) → emphasis or spring\n\n## Transition Patterns\n\n### Hover\n\n```css\n.interactive {\n transition:\n background-color 150ms var(--ease-standard),\n color 150ms var(--ease-standard),\n border-color 150ms var(--ease-standard);\n}\n```\n\n### Modal Enter/Exit\n\n```css\n@keyframes modal-enter {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n@keyframes modal-exit {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n.modal {\n animation: modal-enter 250ms var(--ease-decelerate);\n}\n.modal.closing {\n animation: modal-exit 150ms var(--ease-accelerate);\n}\n```\n\n### Dropdown\n\n```css\n@keyframes dropdown-enter {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.dropdown {\n animation: dropdown-enter 150ms var(--ease-decelerate);\n}\n```\n\n### Toast Notification\n\n```css\n@keyframes toast-enter {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.toast {\n animation: toast-enter 200ms v"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S... Skill: UI UX Design Pro Owner: saifyxpro Summary: Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S... Tags: latest:0.1.0 Version history: v0.1.0 | 2026-02-21T22:08:56.058Z | auto Initial release of ui-ux-design-pro, a senior-level UI/UX design expert skill. - Focuses on building data-driven, premium production","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1285,"uniquenessScore":53,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T14:24:29.129Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T14:24:29.129Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T17:35:17.684Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}