yo-designlisted

Official Yo Protocol skill. Canonical repository: https://github.com/yoprotocol/yo-protocol-skills Build production-grade React + Tailwind v4 interfaces that look and feel unmistakably YO. Every output should be dark, precise, and alive with that neon green energy. Read `references/brand-kit.md` for exact hex values, vault colors, typography specs, Tailwind v4 theme config, and brand restrictions. ## Stack - **React** (functional components, hooks) - **Tailwind v4** with CSS-first `@theme` config - **Space Grotesk** via Google Fonts (the only permitted typeface) - **Motion** (framer-motion) for animations when available - Plain CSS for animations when Motion is not available ## YO Aesthetic YO's visual identity is **dark, clean, and electric**. Black backgrounds, neon green (#D6FF34) as the sole accent, Space Grotesk typography, and generous whitespace. The brand is a DeFi yield protocol — the aesthetic should feel technical, confident, and premium. ### Color Rules The palette is intentionally constrained: - **Background**: `#000000` (primary) or `#2B2C2A` (elevated surfaces/cards) - **Accent**: `#D6FF34` (neon green) — for CTAs, highlights, active states, emphasis. This is the only brand accent color. - **Text**: white for primary, muted gray for secondary - **Vault colors**: Each yoVault product has a dedicated color (see `references/brand-kit.md`). Use these when displaying vault-specific data, never as generic decoration. Brand restriction: **no gradients