Brand Violations Gallery
Learn what NOT to do. See all 9 critical rule violations side-by-side with correct implementations.
Critical Rules Demonstrated
-
LOGO-001View Rule Details → -
LOGO-002View Rule Details → -
LOGO-003View Rule Details → -
COLOR-001View Rule Details → -
ICON-001View Rule Details → -
TYPO-001View Rule Details → -
TYPO-002View Rule Details → -
TYPO-003View Rule Details → -
A11Y-001View Rule Details →
These examples show common mistakes that violate our brand guidelines. Each violation is shown alongside the correct implementation with an explanation of why it matters.
LOGO-001 Logo must be LEFT or RIGHT aligned, NEVER centered
Why this matters: Centered logos create formal, symmetrical compositions that conflict with our dynamic, asymmetric brand identity
Logo is centered, creating a formal, symmetrical layout that conflicts with our asymmetric brand identity
Logo is left-aligned, creating dynamic, asymmetric composition that reflects our brand
LOGO-002 No effects on logo (shadows, gradients, filters)
Why this matters: Effects compromise logo legibility and brand consistency across different contexts
Drop shadow effect compromises logo clarity and makes it look unprofessional
Clean logo with no effects maintains clarity and professionalism
LOGO-003 Use reversed logo on dark backgrounds
Why this matters: Ensures proper contrast and visibility on Navy, Marine, or Green backgrounds
Dark logo on dark background (Navy) has poor contrast and visibility
Reversed (white) logo on Navy provides excellent contrast and visibility
COLOR-001 NEVER use white text on Citrus background
Why this matters: Contrast ratio of 2.3:1 fails WCAG standards. Use Navy text on Citrus instead
White text on Citrus
Contrast ratio: 2.3:1 (FAILS)
White text on Citrus fails WCAG contrast standards (2.3:1) - illegible for many users
Navy text on Citrus
Contrast ratio: 8.2:1 (PASSES)
Navy text on Citrus exceeds WCAG AAA standards (8.2:1) - excellent readability
ICON-001 Icons must be outlined style only, NEVER filled
Why this matters: Maintains consistent, lightweight visual language across all interfaces
Filled/solid icons create heavy, inconsistent visual weight
Outlined icons create lightweight, consistent visual language
TYPO-001 Chronicle Display for 36px+ headings, Montserrat for body
Why this matters: Creates proper typographic hierarchy and brand recognition
Heading in Body Font
Using Montserrat (body font) for large headings lacks the elegance and impact of Chronicle Display
Heading in Display Font
Chronicle Display (or similar serif) for headings creates elegant, impactful typography
TYPO-002 Chronicle Display: only Light (300), Roman (400), Semibold (600) weights
Why this matters: Limited weights maintain visual coherence. Black and other weights are not permitted.
TYPO-003 Montserrat: only Regular (400), Medium (500), Semibold (600), Bold (700) weights
Why this matters: Limited weights maintain visual coherence. Thin, Light, ExtraBold, and Black are not permitted.
A11Y-001 Minimum 4.5:1 contrast ratio for text
Why this matters: Ensures readability for users with visual impairments (WCAG AA compliance)
Low contrast text
Contrast: 1.8:1 (FAILS)
Insufficient contrast (1.8:1) makes text difficult to read, especially for users with visual impairments
High contrast text
Contrast: 8.2:1 (PASSES)
High contrast (8.2:1) ensures excellent readability for all users
Preventing Violations
Use the MCP Server
Configure the Alterspective Brand MCP server in Claude to get real-time brand guidance while building
Setup MCP →Run the Validator
Use @alterspective/brand-validator to check your CSS for violations
npm run validate:brand