Explore Design System Specifications
Navigate directly into token variables, live interactive components, or brand identity guidelines.
Block Storybook & Workbench
Interactive client-side Storybook sandbox to test, configure with live prop controls, inspect responsive viewports, and chain all 14 modular page-builder blocks.
Design Tokens & Foundations
Architectural color palettes, mathematical typography scales, 1px concrete structural hairlines, and W3C-compliant JSON token exports.
UI Component Kit
Engineered UI components including sharp-edged buttons, status badges, executive cards, retained intake modals, and hairline section dividers.
Brand Identity & Guidelines
Official standards for the MGH Wordmark, geometric Monogram construction, clear space rules, 70/20/10 color harmony, and executive editorial voice.
Core Design Pillars
The visual and functional criteria guiding all interface and brand decisions.
Architectural Rigor
Crisp, unrounded geometry, 1px structural hairlines, and precise tabular alignment inspired by blueprints and industrial engineering drawings.
Boardroom Gravitas
A palette anchored by Deep Navy and slate with restrained teal focus accents, tailored specifically for C-suite and Boardroom stakeholders.
High-Density Restraint
Zero decorative fluff or trendy gimmicks. Every pixel and component is purposeful, accessible, and fast-loading.
Executive Typography
An intentional pairing of classical Roman monumental serif (Cinzel) with high-legibility geometric sans (Plus Jakarta Sans).
W3C Design Token Definition
Machine-readable design tokens synced across Tailwind CSS, Figma tokens, and Next.js styles.
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"name": "MG Headhunting Design Tokens",
"version": "1.0.0",
"color": {
"brand": {
"navy": {
"950": { "$value": "#07111D", "$description": "Deepest architectural slate" },
"900": { "$value": "#0F243A", "$description": "Header & high-emphasis surface text" },
"800": { "$value": "#163A5F", "$description": "Primary Brand Navy - Industrial Gravitas" }
},
"teal": {
"600": { "$value": "#138D90", "$description": "Accent Medium Teal - Precision Micro-accents & CTAs" },
"500": { "$value": "#17A9AC", "$description": "Teal interactive hover" }
},
"steel": {
"300": { "$value": "#D0D4D6", "$description": "Structural Concrete - 1px Architectural Hairlines" },
"50": { "$value": "#F8FAFB", "$description": "Off-white architectural canvas" }
}
}
}
}