design__designing-typography

Community

Precise UI typography with tokens and rules.

Authorerikhazzard
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Designs a disciplined UI typography system that ensures readability, consistent hierarchy, and performance across web interfaces and mobile game UI.

Core Features & Use Cases

  • Defines semantic roles (display, title, body, label, ui-small, numeric, mono) and rigorous token mapping for font-size, line-height, weight, and letter-spacing.
  • Includes localization resilience rules and a web font loading plan to reduce layout shifts while supporting multiple languages.
  • Provides a ready-to-ship design system with explicit tokens, component mappings, and implementation guidance for audits, fixes, and upgrades.

Quick Start

Import the typography tokens and apply the role mapping to your UI components to begin using the system.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design__designing-typography
Download link: https://github.com/erikhazzard/vasir/archive/main.zip#design-designing-typography

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.