lyra-typography-system

Create accessible typography systems with tokenized scales and WCAG-compliant contrast.

1|Updated Mar 24, 2026

Search Tags:#typography #accessibility #readability #css #responsive #design-systems #type-scale

Ready to run

npx skills add https://github.com/nikglavin/lyra --skill lyra-typography-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lyra-typography-system
Source: https://github.com/nikglavin/lyra/tree/main/skills/lyra-typography-system
Command: npx skills add https://github.com/nikglavin/lyra --skill lyra-typography-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography inconsistencies and unreadable text slow down product teams; this Skill provides a structured, scalable approach to typography design and implementation for web UIs, improving readability and accessibility.

Core Features & Use Cases

Create a cohesive type scale aligned with Apple HIG and Material Design 3 for web apps.
Ensure accessibility through contrast, line-height, and responsive type using CSS clamp and rem units.
Provide a ready-to-use HTML/CSS wireframe demonstrating a hero, sections, and labels to enforce typographic hierarchy.

Quick Start

Generate a complete typography scale and CSS scaffold for a new web page, including Display, Headline, Body, and Label sizes.

Frequently Asked Questions about lyra-typography-system

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

FAQPage Schema

How do I create an accessible typography system for a web application?▼

An accessible typography system uses rem-based sizing, fluid clamp functions, and WCAG-compliant contrast to ensure readability. This Skill generates tokenized type scales aligned with Apple HIG and Material Design 3 for consistent web UI hierarchy.

What's the best way to make responsive typography with CSS?▼

Responsive typography is best implemented using CSS clamp calculations and rem units. This approach fluidly scales text across viewport sizes without breakpoints, ensuring consistent line-heights and readability across all device widths.

How does fluid typography improve readability in design systems?▼

Fluid typography improves readability by dynamically adjusting text sizes relative to the viewport using CSS clamp. It maintains optimal line-length and contrast, preventing text from becoming illegible on smaller or larger screens within a design system.

Can I generate a complete type scale and CSS scaffold for a new web page?▼

Yes, you can generate a complete type scale including Display, Headline, Body, and Label sizes. The Skill outputs a ready-to-use HTML and CSS wireframe demonstrating typographic hierarchy for sections and labels.

Does this typography approach work with Apple HIG and Material Design 3 guidelines?▼

Yes, the generated typography scales are explicitly aligned with Apple HIG and Material Design 3 web guidelines. This ensures the resulting type scales meet industry standards for visual hierarchy and accessibility.

Why are rem units and tokenized scales necessary for web typography?▼

Rem units and tokenized scales are necessary to maintain consistent sizing relative to user browser settings. Tokenization enforces a single source of truth for type scales, preventing typographic inconsistencies across large product teams.