Skills
.Work. You
Rest

canopy-design-tokens

Official

Guide Canopy design tokens usage.

Design & Creative#theming#angular#tokens#design-system#css-variables#design-tokens#canopy
AuthorLegal-and-General
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Provides guidance to use Canopy design tokens correctly when applying CSS custom properties for colour, typography, spacing, or component styling in an Angular project.

Core Features & Use Cases

  • Token Tiers: guidance on when to use component, semantic, and foundation tokens; use cases for common components.
  • Token Modes: describes Colour, Layout, Typography, and Component theme modes and how they map to UI.
  • Usage Guidance: best practices for styling across components and pages not fully covered by existing Canopy components.

Quick Start

Configure your Canopy project to reference design tokens and apply the lowest available tier when styling components.

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: canopy-design-tokens
Download link: https://github.com/Legal-and-General/canopy/archive/main.zip#canopy-design-tokens

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.