Typography That Sells
Automattic/design-polish-suite/typography-that-sells
designOfficial
Official Provider SkillView repo
Upgrade typography from generic SaaS to premium, authored, high-conviction design. Uses distinct display fonts, lighter body weights, tight negative tracking, mono eyebrows, restrained serif accents, and OpenType details to create typography with taste, authority, and emotional signal. Use when a page feels flat, template-y, overly safe, or visually anonymous.
Files1 files
SKILL.md602 lines
Loading editor…
Install
RecommendedOne command — your agent picks it up automatically.
Select an AI agent above to see the install command.
or
Manual Install
More stepsDownload the file and paste it into your agent's system prompt.
Skill details
Versionv1.0.0
AuthorAutomattic
Categorydesign
Skill IDAutomattic/design-polish-suite/typography-that-sells
Related skills
De Slopify AuditScan a site for AI-slop defaults and replace them with premium patterns. Detects generic giveaways (Inter everywhere,Design Polish SuiteThe full design glow-up toolkit. Turns forgettable interfaces into something that looks like a real designer touched it. Routes to 6 sub-skills for de-slopifying, typography, spacing, gradients, motion, and adding that one detail people actually remember. Use when a UI feels mid, generic, AI-generated, or just painfully beige.Motion And Micro InteractionsApply the motion language of premium VC-funded sites — specific cubic-bezier easings (not ease-in-out), snappy 75-200ms durations, mechanical press feedback, orchestrated hover deltas, width-animated buttons, mouse-tracking gradients, blur-in reveals, scroll-linked reveals. Use when interactions feel "springy and generic" or when the user wants their site to feel responsive, alive, physical.Soft Gradient DreamyApply the warm, atmospheric, multi-layer shadow aesthetic used by premium SaaS sites like Hex, Antimetal, Incident, Outseta, Cohere, and Amplemarket. Warm off-white grounds, tinted shadows that harmonize with theme, multi-stop gradients at deliberate angles, inset highlights for dual-edge lighting. Use when the user wants their site to feel atmospheric, luminous, warm, editorial — NOT cold SaaS purple/blue.Spatial Rhythm And WhitespaceApply the spacing, container, grid, and border-radius rhythm of premium VC-funded sites. Generous 80-160px section padding, intentional non-strict spacing scales (including 20/28/40), deliberate radius architecture (binary 0-or-pill, asymmetric interlocking, per-element variety), 40px paragraph-spacing on h2, 1px hairline dividers at 4-10% opacity. Use when layouts feel cramped, monotonous, or use "rounded-md everywhere."Help Center Ui TestRun a browser-based UI review of the WordPress.com Help Center across multiple surfaces, looking for visual and behavioral issues. Use when asked to test the Help Center UI.