What problem does it solve? Building interfaces that match ElevenLabs' visual identity requires exact design tokens — colors, typography scales, shadow stacks, and spacing — that are tedious to reverse-engineer by hand. This Skill provides the complete design system so generated UI matches the brand without manual inspection of the live site. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (warm stone tints, near-white surfaces), typography hierarchy (Waldenburg 300 display, Inter body with positive letter-spacing), and multi-layer sub-0.1 opacity shadow stacks. - Component Specifications: Pill buttons (9999px radius), warm stone CTAs with warm-tinted shadows, cards, forms, and navigation with precise padding, radius, and elevation values. - Visual Reference Previews: Bundled light and dark theme HTML previews (preview.html, preview-dark.html) for verifying exact CSS implementation details. - Use Case: When asked to build a landing page or dashboard styled like ElevenLabs, the Skill supplies every token — from the 48px weight-300 hero headline to the rgba(78,50,23,0.04) warm button shadow — so the output is brand-accurate on the first pass. ## Quick Start Use the design-elevenlabs skill to create a hero section and pricing cards styled like the ElevenLabs website.
