designlang tokens
SkillMediaLets your agent style UI using the planetscale.com design system's existing colors, spacing, and typography instead of inventing its own.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the designlang tokens skill
About this capability
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
What this skill tells your AI
The instructions your AI receives, as published by manavarya09/design-extract in website/public/gallery/cal-com/.claude/skills/designlang/SKILL.md and read by ahel’s review.
Source: https://cal.com Extracted by designlang v7.0.0 on 2026-06-25T08:26:30.283Z
Semantic tokens (use these)
- color.action.primary: #0000ee
- color.surface.default: #f4f4f4
- color.text.body: #000000
- radius.control: 2px
- typography.body.fontFamily: Inter
Regions
- content
- testimonials
- content
How to use
- Prefer
semantic.*tokens overprimitive.*. - Never invent new tokens or hex values; reuse the ones above.
- When a value is missing, pick the closest existing semantic token and flag the gap.
- Reference tokens by their dotted path (e.g.
semantic.color.action.primary).
Signals
- GitHub stars
- 4k
- Forks
- 349
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
designlang-tokens- Source
- github.com/manavarya09/design-extract