MJ Gordon

Overview

MJ Gordon is a personal brand system for a performance strategist and leadership architect who transforms organizational and personal systems through precision, minimalism, and evidence-based action. The design philosophy embraces 'Architectural Minimalism'—a disciplined aesthetic that mirrors the brand's core philosophy of identifying and eliminating friction. The visual language is deliberately restrained: a clean white canvas, cool neutral grays (rgb(84, 84, 84) for primary text, #6c757d for secondary), and a sophisticated teal-blue accent (#6d8697) that appears only on high-intent interactions and key messaging. This restraint creates cognitive clarity and positions every design element as intentional rather than decorative.

The brand voice is direct, evidence-driven, and conversational without being casual. Sentences are active and outcome-focused: 'Master the biology of success. Stop red-lining. Start optimizing.' The tone avoids jargon while maintaining intellectual rigor. The personality is that of a trusted advisor—confident but not arrogant, systematic but not robotic. Every interaction should feel like a conversation with someone who has already solved the problem you're facing.

Colors

The color system operates on a principle of 'meaningful scarcity.' The primary surface is pure white (#ffffff), creating maximum contrast and legibility for dense information. The neutral hierarchy uses carefully calibrated grays: on-surface text at rgba(84, 84, 84, 0.7) for body copy (70% opacity creates visual softness without sacrificing readability), on-surface-variant at #6c757d for secondary information, and surface-container shades (#e9ecef, #d0d0d0) for subtle backgrounds and dividers. The primary accent color is #6d8697—a muted teal-blue that sits at the intersection of professional authority and approachability. This color appears exclusively on primary CTAs (buttons with rgb(109, 134, 151) background, white text), active navigation states, and focus indicators. Secondary accent

Typography

The type system pairs Montserrat (geometric, authoritative) for headlines with Rubik (humanist, approachable) for body text and UI labels. This pairing creates a visual hierarchy that feels both professional and accessible. Display and headline-lg use Montserrat at 56px and 40px respectively with 700 weight and -0.02em letter-spacing, creating a commanding presence without appearing aggressive. Body text uses Rubik at 16px, 400 weight, with 24px line-height (1.5x multiplier) to ensure comfortable reading at all screen sizes. Labels use Rubik at 14px, 500 weight, with 0.02em letter-spacing for subtle emphasis on interactive elements. On small labels over busy backgrounds (such as badges on hero images), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility. The type scale

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm alternates between full-width hero sections (with internal padding of 40px lg spacing on desktop, 24px md on tablet) and constrained content sections. White-space is used strategically: section separation uses lg spacing (40px) to create breathing room between major ideas, while internal component spacing uses md (24px) for related content grouping. The gutter width is 24px between grid columns. Container padding follows a responsive scale: 40px on desktop, 24px on tablet, 16px on mobile. The design favors generous white-space over dense layouts—this reflects the minimalist philosophy and improves cognitive load. Hero sections typically occupy 60–70% of viewport height, with a 2:1

Elevation & Depth

Elevation is achieved through subtle shadows and layering rather than dramatic depth. The system uses three shadow levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for micro-interactions like hover states on list items, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and floating elements. Cards use md shadow by default; on hover, they elevate to lg shadow with a 150ms transition. The primary CTA button uses no shadow at rest but gains md shadow on hover to signal interactivity. Input fields use a 1px border at #cccccc (ou

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, reflecting the brand's balance between approachability and precision. The rounded scale uses: sm (0.25rem / 4px) for small interactive elements like inline badges, DEFAULT (0.375rem / 6px) for input fields and standard buttons, md (0.5rem / 8px) for list items and secondary cards, lg (1rem / 16px) for primary cards and modals, xl (1.5rem / 24px) for hero sections and large containers, and full (9999px) for pill-shaped buttons and badges. Buttons use DEFAULT (6px) to maintain a clean, professional appearance wi

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses {colors.primary} (#6d8697) background with white text, {rounded.DEFAULT} (6px), and padding of 19.5px 31.5px (derived from the rendered DOM). On hover, the background transitions to {colors.primary-fixed-dim} (#9db0c2) over 150ms ease-out. On active/press, it shifts to {colors.primary-container} (#b8c9d9). The button uses Rubik 13px, 400 weight, with no text-transform. Secondary buttons use transparent background with {colors.primary} text, a 1px border at {colors.outline}, and the same padding and rounding. On hover, the background becomes {colors.surface-container-low} (#f0f0f0). Ghost buttons (used for tertiary actions) use transparent background, {colors.primary} text, and no border; on hover, they

Do's and Don'ts

**Do**

• Do use the primary color (#6d8697) exclusively on high-intent CTAs, active states, and focus indicators—never on decorative elements or backgrounds.
• Do maintain generous white-space (lg spacing / 40px) between major sections to reflect the minimalist philosophy and reduce cognitive load.
• Do pair Montserrat headlines with Rubik body text to create visual hierarchy that feels both authoritative and approachable.
• Do use subtle shadows ({elevation.md} and {elevation.lg}) for depth rather than dramatic color shifts or gradients.
• Do apply 150ms ease-out transitions on all interactive state changes (hover, focus, active) to maintain responsiveness without jarring shifts.
• Do use the neutral gray palette (on-surface at #545454, on-surface-variant at #6c757d) for text to ensure readability while maintaining visual softness.

**Don't**

• Don't use the primary color (#6d8697) on backgrounds, frames, or non-interactive elements—it must remain reserved for intentional, clickable actions.
• Don't exceed 1280px container width; the design is optimized for focused, scannable content, not sprawling layouts.
• Don't apply rounded corners >16px to standard components; excessive rounding conflicts with the 'Soft-Technical' aesthetic and reads as playful rather than strategic.
• Don't use drop shadows >0 8px 24px rgba(0, 0, 0, 0.12); deeper shadows create visual heaviness that contradicts the minimalist philosophy.
• Don't mix Montserrat and Rubik weights arbitrarily; use Montserrat 700 for headlines and Rubik 400–600 for body/UI to maintain typographic consistency.
• Don't reduce line-height below 1.5x for body text (24px at 16px base); tighter leading reduces readability and contradicts the spacious, breathing aesthetic.