Critical Brand Rules

These rules are non-negotiable and enforced automatically by the brand validator. Violations will be flagged as errors in CI/CD pipelines.

COLOR-001 color

NEVER use white text on Citrus (#ABDD65)

Fails WCAG contrast requirements. Citrus is for accents only, use navy text if needed.

ICON-001 icons

Icons must be outlined style only, NEVER filled

Maintains visual consistency and modern aesthetic. Outlined icons feel lighter and more elegant.

A11Y-001 accessibility

Minimum 4.5:1 contrast ratio for all text

WCAG AA compliance is mandatory. Ensures content is readable for users with visual impairments.

TYPO-001 typography

Chronicle Display for 36px+ headings, Montserrat for body

Creates clear visual hierarchy between display and body text.

TYPO-002 typography

Chronicle Display: only Light (300), Roman (400), Semibold (600) weights

Limited weights maintain visual coherence. Black and other weights are not permitted.

TYPO-003 typography

Montserrat: only Regular (400), Medium (500), Semibold (600), Bold (700) weights

Limited weights maintain visual coherence. Thin, Light, ExtraBold, and Black are not permitted.

Using the Validator

Run the brand validator on your CSS files:

# Install
npm install @alterspective/brand-validator

# Validate a file
npx brand-validate ./styles.css

# Strict mode (warnings as errors)
npx brand-validate ./styles.css --strict

# JSON output for CI/CD
npx brand-validate ./styles.css --format json

AI Integration (MCP)

AI assistants can query rules directly using the MCP server: 

# Get all critical rules
get_critical_rules(theme="alterspective")

# Get rules by category
get_critical_rules(theme="alterspective", category="logo")

# Get specific rule
get_rule_by_id(theme="alterspective", ruleId="LOGO-001")
Style
Theme