typography-system
Typography System
Overview
Typography is the voice of your interface. It communicates hierarchy, establishes tone, and guides users through your content. Great typography is invisible—users don't notice it because it works so well.
This skill teaches you to think about typography systematically: choosing fonts with intention, creating scales that feel natural, establishing clear hierarchy, and ensuring readability and accessibility across all contexts.
Core Methodology: Type Scales and Hierarchy
Rather than choosing font sizes arbitrarily, use a modular scale—a mathematical progression of sizes that feels harmonious and intentional.
Modular Scales
A modular scale is a sequence of sizes derived from a base size and a ratio. Common ratios:
More from sanky369/vibe-building-skills
social-graphics
Generate platform-optimized social media graphics and posts. Use when creating content for Instagram, Twitter, LinkedIn, TikTok, or other social platforms.
357direct-response-copy
Write persuasive sales copy that converts using proven direct response principles. Use when writing landing pages, sales emails, ads, or any copy designed to drive action.
248tweet-writer
Write viral, persuasive, engaging tweets and threads. Uses web research to find viral examples in your niche, then models writing based on proven formulas and X algorithm optimization. Use when creating tweets, threads, or X content strategy.
204remotion-script-writer
Writes detailed video scripts for Remotion based on input requirements and codebase analysis
126product-video
Create animated product videos with reveals and animations. Use when creating product demos, promotional videos, or dynamic visual content.
108color-system
Master color design with color theory, accessibility, theming, and dark mode. Create harmonious color systems that work across contexts, support accessibility standards, and enable flexible theming. Includes color psychology, contrast ratios, and color-blind friendly palettes.
94