Joe Speaking Design Language

Overview

This skill is the single source of truth for Joe Speaking's visual identity tokens. It declares every color, font, spacing value, shadow, motion variant, and dark mode override used across the product — extracted directly from source CSS and TypeScript.

Use design-language.md as the authoritative reference whenever you need to pick a color, set a font, choose a shadow scale, or animate an element in the Joe Speaking brand.

When to Use

Activate this skill when you are:

• Building or modifying UI — any React component, landing page section, or app screen
• Choosing colors — picking accent, background, text, or status colors
• Reviewing visual consistency — auditing whether a component uses the correct tokens
• Setting typography — choosing font families, weights, or size ranges
• Applying motion — adding entrance animations, hover effects, or continuous animations
• Generating visual assets — creating emails, social images, or design mockups