skills.rest
xbg-solutions
xbg-solutionsOFFICIAL
Explore all skills by this author →
GitHub

typeset

Creates modular type scales and semantic color tokens for UI typography consistency and accessibility.

Updated Apr 2, 2025
Search Tags:#typography#accessibility#readability#contrast#design-system#type-scale#font-selection
One-click install
npx skills add https://github.com/xbg-solutions/boilerplate_sveltekit --skill typeset-xbg-solutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/xbg-solutions/boilerplate_sveltekit/tree/main/.claude/skills/impeccable/typeset
Command: npx skills add https://github.com/xbg-solutions/boilerplate_sveltekit --skill typeset-xbg-solutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography that is generic or inconsistent can undermine readability and brand perception. This Skill helps designers and developers create intentional, readable typography by guiding font choices, typographic scales, spacing, and accessibility considerations.

Core Features & Use Cases

  • Establish a cohesive font stack aligned to brand personality and accessibility.
  • Define a modular type scale (caption, body, subheading, heading) with consistent sizing, weight, and line-height.
  • Provide guidance for readability, contrast, and semantic token naming to ensure design system consistency across UI and editorial content.
  • Use Case: Revamp a marketing page to improve readability and visual hierarchy or audit an app UI to enforce typography standards.

Quick Start

Apply the typography improvements to a design system or UI project by selecting a cohesive font stack and setting a modular type scale.

Frequently Asked Questions about typeset

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

FAQPage Schema
How do I establish a modular type scale for my UI design system?▼

Improve UI typography and readability by selecting a cohesive font stack and applying a modular type scale with enforced contrast ratios and semantic tokens to guarantee accessibility and visual hierarchy.

What is the best way to ensure typography accessibility and contrast in a web application?▼

Ensure typography accessibility by enforcing contrast ratios and selecting readable fonts aligned with brand personality, applying semantic token naming to maintain consistent accessibility standards across product interfaces.

How do I select fonts that align with brand personality and readability?▼

Select fonts by establishing a cohesive font stack that matches your brand personality while meeting accessibility requirements, ensuring the chosen typography improves readability for both UI and editorial content.

Can I use this typography guidance to audit an existing app interface?▼

Yes, you can audit an app UI to enforce typography standards by checking the existing modular scale, contrast ratios, and semantic token naming against established readability and design system consistency rules.

Does this approach work for both marketing pages and editorial content?▼

Yes, this approach works for marketing pages, product interfaces, and editorial content by applying a cohesive font stack, modular type scale, and semantic tokens to improve typography impact and readability.

Related Skills

Explore More Design & Creative Skills→
sanky369sanky369
29

typography-system

Create modular type scales and accessible typography guidance for design systems.

Community
Basic
mike-coulbournmike-coulbourn
37

brand-typography-systems

Automate brand typography system design with typeface selection and modular scales.

Community
Advanced
guideopsguideops

mono

Generate typography, color, and spacing guidelines for the mono design system.

Community
Intermediate
CANTAGESTUDIOCANTAGESTUDIO
3

accessibility-contrast-audit

Audit UI color contrast and accessibility metrics against WCAG guidelines.

Community
Intermediate