skills.rest
calebaero
calebaeroCOMMUNITY
Explore all skills by this author →
GitHub

brand-system-rules

Translate brand inputs into site-plan design tokens with WCAG contrast enforcement.

Updated Apr 20, 2026
Search Tags:#typography#accessibility#contrast#brand#design-tokens#palette#designstyle
One-click install
npx skills add https://github.com/calebaero/website-factory --skill brand-system-rules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-system-rules
Source: https://github.com/calebaero/website-factory/tree/main/skills/brand-system-rules
Command: npx skills add https://github.com/calebaero/website-factory --skill brand-system-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Brand inputs are often incomplete or inconsistent, which makes token derivation error-prone. This skill automates turning brand signals into a complete, accessible design-token set for site-plans.

Core Features & Use Cases

  • Automates derivation of colors, typography, spacing, radii, and shadows from brandColors, designStyle, and animationLevel.
  • Enforces contrast and accessibility rules per WCAG and the designStyle pairing tables.
  • Produces site-plan.designTokens consumed by the scaffold to style the generated site.

Quick Start

Provide a site-brief with brandColors, typographyPreferences, designStyle, and animationLevel, then run the planner to generate site-plan.designTokens.

Frequently Asked Questions about brand-system-rules

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

FAQPage Schema
How do I generate design tokens from incomplete brand inputs?▼

You can derive missing design tokens by feeding brandColors, typographyPreferences, designStyle, and animationLevel into the planner. The system automatically fills gaps and produces a complete site-plan designTokens set for colors, typography, spacing, radii, and shadows.

How does WCAG contrast enforcement work for brand color palettes?▼

WCAG contrast enforcement for brand color palettes works by validating derived color tokens against accessibility standards during generation. The system automatically adjusts or surfaces open questions when brand inputs fail to meet required contrast ratios for readable typography and UI elements.

What design style pairing rules apply when deriving typography and color tokens?▼

Design style pairing rules map specific designStyle inputs to corresponding typography and color token structures. The system follows these predefined pairing tables to ensure derived tokens visually align with the selected brand aesthetic and animation level.

Can I use brand colors and typography preferences to build a complete site-plan design system?▼

Yes, you can build a complete site-plan design system from basic brand colors and typography preferences. The system translates these inputs into a comprehensive token set covering spacing, radii, and shadows, ready for site scaffolding.

What happens when brand inputs are inconsistent or missing required design tokens?▼

When brand inputs are inconsistent or missing required design tokens, the system derives the missing values based on available signals and surfaces open questions. This ensures the final token set remains complete, usable, and compliant with accessibility standards.

Related Skills

Explore More Design & Creative Skills→
bRRRITSCOLDbRRRITSCOLD
2

design-theming

Derive and apply design themes from a base token file with per-brand JSON overrides.

Community
Intermediate
semaes111semaes111

design-mirror

Extract visual design tokens from a reference site and apply them across a codebase.

Community
Advanced
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
plurigridplurigrid
60

brand-guidelines

Apply brand colors, typography, and spacing to documents and presentations.

Official
Basic