Critical Brand Rules

MOD-01 rule bridge POC

Runtime validators linked to canonical UX-BRAND standards

These rules are loaded from the active Alterspective theme and enriched with canonical metadata from WEBSTA-001-UX-UI-STANDARDS.md. This page is the user-facing proof point that AI agents can inspect validator coverage, mapping status, and standards drift without reading hard-coded page copy.

Bridge health

Runtime gaps detected

Source version 1.17. Runtime rules are compared against canonical brand-system rules before this page renders.

Runtime rules
10
Mapped runtime
10
Canonical rules
14
Runtime gaps
1

Runtime enforcement

Validator rules

COLOR-001 color Exact mapping

NEVER use white text on Citrus (#ABDD65)

Contrast ratio 1.6:1 fails WCAG AA (requires 4.5:1)

Canonical rule
UX-BRAND-02
Coverage
The runtime validator directly enforces the canonical UX-BRAND rule.
Validation type
color-contrast
Standard source
WEBSTA-001-UX-UI-STANDARDS.md
ICON-001 icons Exact mapping

Icons must be outlined style only, NEVER filled

Brand consistency with logo geometry

Canonical rule
UX-BRAND-03
Coverage
The runtime validator directly enforces the canonical UX-BRAND rule.
Validation type
svg-attribute
Standard source
WEBSTA-001-UX-UI-STANDARDS.md
A11Y-001 accessibility Exact mapping

Minimum 4.5:1 contrast ratio for all text

WCAG 2.2 Level AA compliance required

Canonical rule
UX-BRAND-05
Coverage
The runtime validator directly enforces the canonical UX-BRAND rule.
Validation type
color-contrast
Standard source
WEBSTA-001-UX-UI-STANDARDS.md
TYPO-001 typography Exact mapping

Chronicle Display for 36px+ headings, Montserrat for body

Brand typography consistency

Canonical rule
UX-BRAND-07
Coverage
The runtime validator directly enforces the canonical UX-BRAND rule.
Validation type
font-usage
Standard source
WEBSTA-001-UX-UI-STANDARDS.md
TYPO-002 typography Derived mapping

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

Brand typography consistency - limited weights maintain visual coherence

Canonical rule
UX-BRAND-07
Coverage
The runtime validator supports part of a broader canonical rule.
Validation type
font-weight
Standard source
WEBSTA-001-UX-UI-STANDARDS.md
TYPO-003 typography Derived mapping

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

Brand typography consistency - limited weights maintain visual coherence

Canonical rule
UX-BRAND-07
Coverage
The runtime validator supports part of a broader canonical rule.
Validation type
font-weight
Standard source
WEBSTA-001-UX-UI-STANDARDS.md
A11Y-002 accessibility Exact mapping

Dark mode MUST have explicit styles for ALL text elements - never rely on inherited colors

Dark mode requires light text (#e5eeef, #d0d8dc) on dark backgrounds (#0f171d, #1a2530). Without explicit overrides, text becomes invisible.

Canonical rule
UX-BRAND-08
Coverage
The runtime validator directly enforces the canonical UX-BRAND rule.
Validation type
dark-mode-coverage
Standard source
WEBSTA-001-UX-UI-STANDARDS.md

Drift report

Canonical coverage gaps

UX-BRAND-09 color Missing runtime

Warning amber text contrast

Warning amber must not be used as foreground text and white text must not be placed on amber.

Expected runtime validator: COLOR-002 - Canonical standard expects COLOR-002; current runtime rules do not include that validator yet.

Derived coverage

Supporting validators

TYPO-002

Brand typography

Supports UX-BRAND-07. Derived weight guard for Chronicle Display under UX-BRAND-07 typography governance.

TYPO-003

Brand typography

Supports UX-BRAND-07. Derived weight guard for Montserrat under UX-BRAND-07 typography governance.

Non-validator governance

Rules agents must still apply

UX-BRAND-00

Brand portal consultation

Consult the Alterspective Brand Portal before implementing, reviewing, or auditing brand elements.

Runtime not required
UX-BRAND-08a

Brand variables as constants

Brand colour CSS variables must be treated as constants and theme-aware roles must use semantic tokens.

Runtime not required
UX-BRAND-08b

White literal usage

`bg-white` and `text-white` must not appear outside explicit allowed overlays.

Runtime not required
UX-BRAND-08c

Tokenised native forms

Native form elements must inherit a tokenised shell.

Runtime not required
UX-BRAND-08d

Paired light and dark evidence

Material visual changes must ship with paired light and dark screenshots.

Runtime not required

Using the Validator

Run the brand validator on 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 the same critical rules and canonical bridge through the MCP server and core package. 

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

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

# Get specific rule by runtime or canonical ID
get_rule_by_id(theme="alterspective", ruleId="LOGO-001")
get_rule_by_id(theme="alterspective", ruleId="UX-BRAND-01")