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
- Read
design-language.md before writing any visual code.
- 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
- Apply tokens from the matching section — never hard-code colors, fonts, or shadows.
- 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.
1---2name: joe-speaking-design-language3description: Canonical visual design language for Joe Speaking. Use when creating or modifying UI components, choosing colors, typography, spacing, shadows, or motion, reviewing visual consistency, or generating any visual asset in the Joe Speaking brand. Covers web (OKLCH), email (hex), and dark mode tokens.4---56# Joe Speaking Design Language78## Overview910This 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.1112Use `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.1314## When to Use1516Activate this skill when you are:1718- **Building or modifying UI** — any React component, landing page section, or app screen19- **Choosing colors** — picking accent, background, text, or status colors20- **Reviewing visual consistency** — auditing whether a component uses the correct tokens21- **Setting typography** — choosing font families, weights, or size ranges22- **Applying motion** — adding entrance animations, hover effects, or continuous animations23- **Generating visual assets** — creating emails, social images, or design mockups2425## Workflow26271. **Read** `design-language.md` before writing any visual code.282. **Identify context:**29 - Web app / landing page → use OKLCH values and Tailwind/CSS custom properties30 - Email → use hex equivalents (email clients don't support OKLCH)31 - External tools / design files → use hex equivalents323. **Apply tokens** from the matching section — never hard-code colors, fonts, or shadows.334. **For motion**, use the Framer Motion variants documented in Section 7 of the reference. Import them from `lib/landing/animations.ts`.3435## Relationship to Other Skills3637- **This skill is the canonical brand reference.** When token values conflict with other sources, this skill wins.38- **`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.39- **`docs/UI_GUIDELINES.md`** in the repo covers implementation patterns (component APIs, accessibility, responsive strategies). This skill covers the raw tokens those patterns consume.4041## Palette Direction4243**Warm amber (hue ~55–85) is the canonical brand accent.**4445The 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.
hubeiqiao