skills.rest
rmjames
rmjamesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

1|Updated Feb 5, 2013
Search Tags:#typography#consistency#a11y#tokens#colors#design-system#brand-guidelines
One-click install
npx skills add https://github.com/rmjames/rjames --skill brand-guidelines-rmjames
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Brand Guidelines
Source: https://github.com/rmjames/rjames/tree/main/.claude/skills/brand-guidelines
Command: npx skills add https://github.com/rmjames/rjames --skill brand-guidelines-rmjames

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures all design work adheres to the project's established brand design system, helping teams maintain consistent visuals across components, pages, and assets.

Core Features & Use Cases

  • Token enforcement: Verify usage of spacing, colors, and typography tokens from the design system.
  • Documentation & guidance: Provide usage examples and references from styles/main.css.
  • Consistency audits: Quick checks to ensure new components align with tokens and accessibility considerations.

Quick Start

Review styles/main.css tokens (spacing, color, typography) and apply the recommended tokens to your new component or page.

Frequently Asked Questions about Brand Guidelines

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

FAQPage Schema
How do I enforce design system consistency across web components?▼

Design system consistency is enforced by validating spacing, color, and typography tokens across all components and pages. This Skill audits your design outputs against established tokens, ensuring new elements conform to the brand guidelines and checks dark-mode compatibility.

What are design tokens and how do I use them?▼

Design tokens are reusable values for spacing, colors, and typography stored as CSS custom properties in your design system. This Skill verifies that your styles reference these tokens from `styles/main.css` rather than using arbitrary values, maintaining consistency across the interface.

Can I audit existing components for brand guideline compliance?▼

Yes. This Skill performs consistency audits to check whether components align with spacing, color, and typography tokens from your design system. It validates CSS custom property usage and flags deviations from established brand guidelines.

How do I document new design tokens for my team?▼

This Skill provides usage examples and references from your design system tokens, ensuring any new tokens are properly documented and accessible. Documentation includes guidance on spacing, color, and typography conventions for team adoption.

Does this work with dark-mode designs?▼

Yes. This Skill ensures dark-mode compatibility as part of its consistency audits. It validates that color tokens and spacing work correctly in both light and dark modes across your design system.

What happens if a component uses colors outside the design system?▼

This Skill detects non-conforming color, spacing, or typography values and flags them as violations. It ensures components use only tokens from the established design system, preventing brand inconsistency across your interface.

Related Skills

Explore More Design & Creative Skills→
DrLuggelsDrLuggels
3

visual-design-foundations

Apply typography, color, spacing, and iconography principles to create accessible visual designs.

Community
Intermediate
dmedina-devdmedina-dev
1

ckm:brand

Synchronize brand guidelines, design tokens, and marketing assets across projects.

Community
Advanced
nazlicancaglarnazlicancaglar

visual-design-system

Translate brand visual identity into tokenized CSS custom properties and design tokens.

Community
Advanced
BarisSozenBarisSozen
1

apple-ui-design

Generate Apple-inspired UI design guidelines with typography, color, and spacing tokens.

Community
Basic