typography-first

npx skills add sickn33/agentic-awesome-skills --skill typography-first --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# Typography First Design > "The words are the interface. No distractions, just beautiful text." ## When to Use Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly. ## Core Principles 1. **Hyper-Sized Typography**: The main headline is so large it becomes an abstract graphic element. 2. **Minimal UI Chroming**: Buttons are just text. Navigation is just text. No boxes, no backgrounds. 3. **Kinetic Typography**: Text that moves, scrolls, or reacts to the user's cursor. ## Visual DNA - **Colors**: Extreme high contrast. Pure black and white, or a very dark background with a single neon accent color. **Midnight Luxury** works well. - **Typography**: Display fonts with extreme character. Try `Oswald`, `Anton`, or `Bebas Neue` for impact, or a massive serif. - **Layout**: Often centers the massive text perfectly in the viewport, cutting off at the edges. ## Web Implementation - Rely on `vw` and `vh` units for font sizing so the text perfectly fills the screen. - **CSS Example**: ```css body { background-color: #0A0A0A; color: #F5F5F0; overflow-x: hidden; margin: 0; }