skills.rest
hubeiqiao
hubeiqiaoCOMMUNITY
Explore all skills by this author →
Website𝕏@hubeiqiaoGitHub

joe-speaking-design-language

Reference Joe Speaking design tokens for colors, typography, shadows, and motion.

Updated Mar 4, 2026
Search Tags:#typography#color palette#brand guidelines#design tokens#UI design#motion design
One-click install
npx skills add https://github.com/hubeiqiao/skills --skill joe-speaking-design-language
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: joe-speaking-design-language
Source: https://github.com/hubeiqiao/skills/tree/main/joe-speaking-design-language
Command: npx skills add https://github.com/hubeiqiao/skills --skill joe-speaking-design-language

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides the definitive source of truth for all visual design tokens used in Joe Speaking products, ensuring brand consistency across all UI elements and assets.

Core Features & Use Cases

  • Design Token Reference: Access to all colors (OKLCH, hex), typography, spacing, shadows, and motion values.
  • Brand Consistency: Ensures all UI components, visual assets, and marketing materials adhere to the Joe Speaking brand guidelines.
  • Use Case: When designing a new feature, use this Skill to look up the correct brand accent color, font family, and spacing values to maintain a cohesive user experience.

Quick Start

Use the joe-speaking-design-language skill to find the hex equivalent for the primary accent color.

Frequently Asked Questions about joe-speaking-design-language

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find the correct design tokens for brand guidelines and UI design?▼

This Skill provides canonical design tokens including color palettes in OKLCH and hex formats, typography scales, shadow definitions, and motion animation variants to ensure brand consistency across all UI elements.

Can I get color palette values in both OKLCH and hex formats for web design?▼

Yes, the Skill provides color palette values in both OKLCH and hex formats, offering platform-specific token values and dark mode overrides to support web and email design.

Does this design token reference include motion design and animation variants?▼

Yes, this design token reference includes motion design and animation variants, alongside comprehensive typography scales, spacing values, and shadow definitions for maintaining a cohesive user experience.

What's the best way to ensure dark mode overrides match the brand color palette?▼

The best way to ensure dark mode overrides match the brand color palette is to look up the platform-specific token values provided, which automatically adapt OKLCH and hex colors for dark mode UI design.

Are there spacing and typography scales included in these brand guidelines?▼

Yes, these brand guidelines include comprehensive typography and spacing scales, providing access to all font family values and spacing definitions needed to design new features with visual consistency.

Related Skills

Explore More Design & Creative Skills→
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
Holo00Holo00
6

brand-guidelines

Standardize IdeaForge branding across products and marketing materials.

Community
Basic
wanderinglanternwanderinglantern

policydb-design-system

Define PolicyDB design tokens, typography, and UI patterns in SKILL.md.

Community
Advanced
Forexgod21Forexgod21
6

complete-design-system-brand-guidelines

Generate brand guidelines with color palettes, typography, spacing, and tone of voice.

Community
Advanced