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

Workflow

1. Read design-language.md before writing any visual code.
2. Identify context:
   • Web app / landing page → use OKLCH values and Tailwind/CSS custom properties
   • Email → use hex equivalents (email clients don't support OKLCH)
   • External tools / design files → use hex equivalents
3. Apply tokens from the matching section — never hard-code colors, fonts, or shadows.
4. For motion, use the Framer Motion variants documented in Section 7 of the reference. Import them from lib/landing/animations.ts.

Relationship to Other Skills

• This skill is the canonical brand reference. When token values conflict with other sources, this skill wins.
• joe-speaking-email has surface-specific email implementation (table layouts, VML, responsive classes). Use both skills together when building emails: this one for token values, that one for email-specific patterns.
• docs/UI_GUIDELINES.md in the repo covers implementation patterns (component APIs, accessibility, responsive strategies). This skill covers the raw tokens those patterns consume.

Palette Direction

Warm amber (hue ~55–85) is the canonical brand accent.

The landing page already uses this palette (--landing-* tokens). The main app currently uses a purple-blue palette (hue ~280) — this is legacy, documented in Section 4 of the reference for backward compatibility. The migration direction is: incrementally adopt warm amber tokens across the entire product.