Skip to content

BRAND_PHILOSOPHY.md

Latest commit

 

History

History
70 lines (53 loc) · 2.66 KB

BRAND_PHILOSOPHY.md

File metadata and controls

70 lines (53 loc) · 2.66 KB

Deep Focus Brand Philosophy

Design Philosophy

Brutally Minimal — Swiss typography, precision spacing, high contrast, surgical animations.

Core Principles

  • Extreme Whitespace — Generous spacing creates breathing room and focus
  • Monospaced Metrics — Numbers and data use monospaced fonts for precision and clarity
  • Subtle, Surgical Animations — Minimal, purposeful motion that enhances without distracting
  • Perfect Typographic Hierarchy — Clear visual hierarchy through weight, size, and spacing
  • Dark Theme with High Contrast — Pure black background (#000000) with pure white text (#FFFFFF)
  • Grid-Based Layout — Swiss design principles with mathematical precision
  • Minimal Color Palette — Black and white only. No colors, no gradients, no distractions.

Typography

  • Primary Font: Inter (Helvetica alternative) for body text
  • Monospaced Font: For all metrics, numbers, and data displays
  • Weight Scale: 400 (normal), 600 (semibold), 700 (bold), 800 (extrabold)
  • Letter Spacing: Tight (-0.02em for headings, -0.01em for body)
  • Text Transform: Uppercase for labels, buttons, and navigation

Spacing System

Mathematical spacing scale based on 8px grid:

  • swiss-1: 8px
  • swiss-2: 16px
  • swiss-3: 24px
  • swiss-4: 32px
  • swiss-5: 40px
  • swiss-6: 48px
  • swiss-8: 64px
  • swiss-10: 80px
  • swiss-12: 96px

Layout Principles

  • Left-Aligned: All content starts from the left edge
  • Asymmetric: No centered layouts, embrace asymmetry
  • Grid-Based: Use mathematical grid system for alignment
  • No Rounded Corners: Sharp, precise edges (border-radius: 0)
  • Bold Borders: 2px solid borders for definition

Animations

  • Duration: 0.2s - 0.3s maximum
  • Easing: ease-out for natural deceleration
  • Movement: Subtle vertical translation (-8px to 0)
  • Opacity: Fade in/out only, no complex transforms

Color Palette

  • Background: #000000 (pure black)
  • Foreground: #FFFFFF (pure white)
  • Borders: rgba(255, 255, 255, 0.3) for subtle definition
  • Muted Text: rgba(255, 255, 255, 0.6) for secondary information

Implementation Guidelines

  1. Remove all colors except black and white
  2. Use monospaced fonts for all numbers, metrics, and data
  3. Apply extreme whitespace - double or triple standard spacing
  4. Maintain grid alignment - all elements align to 8px grid
  5. Keep animations minimal - only when absolutely necessary
  6. Uppercase all labels - buttons, navigation, headings
  7. No rounded corners - everything is sharp and precise
  8. High contrast - pure black on pure white, no grays in primary elements