Skip to content

MINIMAL_REDESIGN.md

Latest commit

 

History

History
157 lines (123 loc) · 4.1 KB

MINIMAL_REDESIGN.md

File metadata and controls

157 lines (123 loc) · 4.1 KB

Minimal Redesign - Mathematical Purity

Philosophy

Pure, minimal design inspired by Swiss typography and Bauhaus principles. Mathematical harmony through the golden ratio (φ = 1.618) and perfect 8px grid system.

Like Mozart was a web designer - every element is necessary, nothing is decoration.

Design Principles

1. Mathematical Typography

  • Modular Scale: Typography based on golden ratio (φ)
    • h1: 2.618rem (φ³)
    • h2: 1.618rem (φ²)
    • h3: 1.272rem (φ × 0.786)
    • p: 1rem (base)
  • Line Height: 1.618 (φ) for perfect vertical rhythm
  • Line Length: 65ch maximum for optimal readability
  • Letter Spacing: -0.02em optical correction on headings

2. Pure Color Palette

  • Black: #000000 (text, borders, UI elements)
  • White: #ffffff (background, inverse text)
  • Gray Scale: 50-900 for subtle variations
  • No gradients, no colors - pure monochrome

3. Perfect Spacing

  • 8px Grid System: All spacing in multiples of 8px
    • 1 unit = 8px (0.5rem)
    • 2 units = 16px (1rem)
    • 3 units = 24px (1.5rem)
    • 4 units = 32px (2rem)
    • etc.
  • No arbitrary values - everything on the grid

4. Minimal Visual Elements

  • No rounded corners - pure rectangles
  • No shadows (except minimal where necessary)
  • No gradients - flat colors only
  • No icons - typography only
  • 1px borders - clean separation

What Was Removed

  • ❌ Dynamic gradient headings
  • ❌ Mouse-responsive effects
  • ❌ Scroll animations
  • ❌ Colored icons on expertise cards
  • ❌ Rounded corners
  • ❌ Box shadows on hover
  • ❌ Gradient backgrounds
  • ❌ Purple/blue color scheme

What Was Kept

  • ✅ Body fade-in (prevents FOUC)
  • ✅ Syntax highlighting (necessary for code)
  • ✅ Category badges (functional)
  • ✅ Responsive grid layouts
  • ✅ Clean transitions (opacity only)

Typography System

Perfect Modular Scale

Base: 16px (1rem)
Ratio: φ (1.618)

h1 = 16 × φ³ ≈ 42px (2.618rem)
h2 = 16 × φ² ≈ 26px (1.618rem)
h3 = 16 × φ × 0.786 ≈ 20px (1.272rem)
p  = 16 × 1 = 16px (1rem)

Vertical Rhythm

All margins and spacing use multiples of the base line height (1.618rem) to maintain perfect vertical rhythm.

Spacing System

--spacing-1:  8px  (0.5rem)
--spacing-2:  16px (1rem)
--spacing-3:  24px (1.5rem)
--spacing-4:  32px (2rem)
--spacing-6:  48px (3rem)
--spacing-8:  64px (4rem)
--spacing-12: 96px (6rem)
--spacing-16: 128px (8rem)

Components Changed

Hero

  • Removed gradient background
  • Removed Flowbite Button component
  • Pure black CTA button with uppercase text
  • Minimal padding and spacing

Expertise Cards

  • Removed colored SVG icons
  • Removed rounded corners
  • Used 1px black grid system (gap-px bg-black)
  • White cards on black grid

Buttons/CTAs

  • Pure black background
  • White text
  • Uppercase with letter-spacing
  • Simple opacity transition on hover
  • No rounded corners

Articles

  • Removed intro section gradient background
  • Black and white code blocks
  • Simple underlines on links
  • Minimal blockquote styling

Technical Implementation

CSS Custom Properties

:root {
  --phi: 1.618;           /* Golden ratio */
  --unit: 0.5rem;         /* 8px base unit */
  --transition-fast: 0.15s ease-out;
  --transition-medium: 0.25s ease-out;
}

Disabled Hooks

  • useMouseResponsiveEffects() - Removed
  • useScrollAnimations() - Removed
  • useBodyLoaded() - Kept (prevents FOUC)

Build Results

  • ✅ TypeScript: PASSED
  • ✅ ESLint: PASSED
  • ✅ Production Build: PASSED
  • Bundle: 205KB CSS (reduced from 207KB)

Visual Characteristics

Before: Colorful, dynamic, gradient-heavy, rounded corners, shadows After: Monochrome, static, pure geometry, sharp corners, flat

This is anti-skeuomorphic design - no attempt to mimic physical materials. Pure digital minimalism.

Inspiration

  • Swiss Typography (Josef Müller-Brockmann)
  • Bauhaus (László Moholy-Nagy)
  • International Typographic Style
  • Dieter Rams (Less, but better)
  • Jan Tschichold (Die neue Typographie)

Mozart analogy: Every note serves a purpose. No ornamentation. Mathematical precision. Perfect harmony.