skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-typography

Apply Canopy typography guidelines and CSS variables to Angular projects.

23|46|Updated Sep 7, 2020
Search Tags:#typography#angular#design-system#css-variables#type-systems#canopy
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-typography
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/typography
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canopy typography guidance helps teams ensure consistent typographic choices across Canopy implementations in Angular projects, avoiding style fragmentation and brand inconsistency.

Core Features & Use Cases

  • Two Type Systems: productive vs expressive guidance to cover body text vs marketing headings.
  • Typography CSS Variables: standardized font families, weights, and scalable font sizes for consistent design.
  • Practical Examples: how to use classes and variables in components like headers, paragraphs, and UI blocks.
  • Use Case: A design team updating a page uses the Canopy typography system to maintain consistent scale and weight across all headings and body text.

Quick Start

Apply the productive type system for body text by default, then use expressive text for headings and branding as needed.

Frequently Asked Questions about canopy-typography

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

FAQPage Schema
How do I apply consistent typography variables in an Angular project?▼

Apply Canopy typography CSS variables in Angular projects to standardize font families, weights, and scalable font sizes, ensuring consistent typographic implementation across all components and preventing style fragmentation.

What is the difference between productive and expressive type systems?▼

The Canopy type systems separate productive text for standard body content and UI blocks from expressive text, which is reserved for marketing headings and branding to ensure appropriate visual hierarchy.

When should I use expressive typography instead of the default productive system?▼

Use the productive type system by default for body text, then switch to the expressive type system specifically for headings and branding elements to maintain brand consistency without sacrificing readability.

Can I use Canopy typography CSS variables for headers and paragraphs?▼

Yes, Canopy typography provides practical examples and standardized CSS variables for applying consistent font scales and weights directly to component elements like headers, paragraphs, and UI blocks.

Does Canopy typography work without additional dependencies?▼

Yes, Canopy typography operates without external dependencies, relying solely on predefined CSS variables to enforce type scale and font family guidelines within your Angular design system implementation.

Related Skills

Explore More Design & Creative Skills→
jubscodesjubscodes
49

gsp-typography

Generate a typography system with type scale, font pairing, and CSS files.

Community
Advanced
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic
zhu637882-stackzhu637882-stack

glassmorphism-ui

Define glassmorphism design tokens and components for finance mobile apps.

Community
Advanced
jiaiyanjiaiyan
21

element-plus-design-typography

Define typography conventions and CSS variables for Element Plus components.

Community
Intermediate