PhilGear Design Studio & Token Architecture

Heraldic Design Systems & Token Architecture

High-contrast, institutional design system uniting Scottish Highland Clan Ross heraldry, warm linen studio tokens, Caslon and Baskerville typography, and strict WCAG 2.2 AAA accessibility compliance.

Contrast Ratio 16.0:1 AAA

Color Palettes 5 Distinct Themes

Typography Libre Baskerville + Caslon

Accessibility WCAG 2.2 AAA Full

Launch Live System GitHub Repository (philgear/design-philgear-dev)

#Design Systems #CSS Variables #WCAG 2.2 AAA #Typography #Color Theory #Tailwind CSS

Architecture Highlights

• Design Tokens: Coffee Sand (#fdfaf2), Royal Burgundy (#9B1C23), Tartan Navy (#1F2E4C), Agency Gold (#c5a059).
• Typography Engine: Serifs for authority and trust, paired with JetBrains Mono for cryptographic telemetry and Outfit for UI controls.
• Color Contrast Engine: High-contrast ratios ranging from 8.1:1 to 16.0:1 across dark and light canvases.

Engineering Hurdles Solved

• Maintaining strict WCAG 2.2 AAA contrast compliance (7:1+) across all 5 distinct design palettes without sacrificing rich brand identity.
• Seamless cross-project token distribution between Astro, React, and vanilla ES modules.

Executive Overview

PhilGear Design Studio is the unified design token architecture and visual language system powering the PhilGear ecosystem. It bridges historic typography (Caslon & Libre Baskerville), authentic Scottish Clan Ross heraldry, and institutional financial ergonomics.

Key Design Principles

Craft Over Noise: Clear visual hierarchy, generous whitespace, and tactile feedback.
Deterministic Contrast: Every foreground/background combination passes WCAG 2.2 AAA standards (8:1 to 16:1 ratio).
Multi-Era Theming: Cohesive palette transitions between Clan Ross Highland, Warm Studio Linen, Cyberpunk Neon, Highland Loch, and 1945 Machinist Blueprints.

Live Design Studio Showcase

Fig 1.0 — Multi-Era Theme Switcher

Live studio palette selector toggling CSS design tokens, typography, and cognitive lenses.

Fig 2.0 — Scottish Clan Ross Heraldry

Authentic Highland tartan color tokens (Tartan Navy #1F2E4C, Royal Burgundy #9B1C23, and Agency Gold #c5a059).

Typography & Color Hierarchy

Title & Primary Serifs: Caslon & Libre Baskerville (Editorial dignity and authority).
Technical & Cryptographic Telemetry: JetBrains Mono & Kanit Bold (Deterministic mathematical clarity).
Body & Controls: Outfit & Inter (Universal readability across all form factors).