Brand Identity Skill

This skill ensures every site has a distinctive, intentional visual identity. It provides guidance for creating memorable designs.

The 60-30-10 Color Rule

Every site needs exactly three color roles:

• 60% - Dominant/Background: The main canvas (usually neutral)
• 30% - Secondary: Supporting color for sections, cards, accents
• 10% - Accent: CTAs, highlights, interactive elements (the "pop")

Implementation

:root {
  /* 60% - Dominant */
  --color-bg: #FAFAF9;
  --color-text: #1C1917;