creative Design Studio
Published: 2026-08-28 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
#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).