Design Philosophy
Selective Boldness
Choose specific elements to emphasize dramatically while maintaining overall compositional restraint. Every design decision serves both functional and emotional purposes.
Architectural Precision
Create typography and layout decisions that prioritize clarity and impact, using brutalist scale and weight within minimalist organizational principles.
Strategic Restraint
Embrace generous negative space as an active design element, allowing brutalist forms to breathe while maintaining their monolithic character.
Core Techniques
Dramatic Typography Scale
Use extreme scale contrasts—headlines that dominate their space paired with body text sized for optimal readability. Typography becomes architecture through size, weight, and positioning.
Monolithic Text Blocks
Create typographic architecture within clean compositions using text blocks that serve as both information and visual anchors, establishing immediate hierarchy.
Strategic Color Blocking
Apply accent colors in measured doses for maximum psychological impact—approximately 5-10% of the composition serving as strategic punctuation rather than dominant themes.
Interactive Elements
Architectural Buttons
Monolithic Cards
Component Example
Substantial yet refined surfaces with strategic elevation and architectural presence.
Color System
Key Elements
Visual Characteristics
- Monolithic text blocks as visual anchors
- Generous whitespace as structural element
- Strategic thick rules and borders
- Systematic modular grids
- Clean elevation through shadows
- Dramatic scale relationships
Color Application
- High-contrast neutral foundations
- Strategic accent color application
- 5-10% accent color distribution
- Semantic color meaning
- Pure whites and deep grays
- Industrial color references
Typography System
- Clean geometric sans-serifs
- Extreme scale contrasts
- Strategic tracking adjustments
- Architectural hierarchy
- Responsive fluid scaling
- Optical balance precision
Interaction Patterns
- Subtle elevation changes
- Purposeful state transitions
- Clear interactive feedback
- Architectural hover effects
- Substantial touch targets
- Natural easing curves
Tools & Resources
🎨 Design Tools
- Figma for system design
- Adobe XD for prototyping
- Sketch for interface design
- Principle for motion design
📝 Typography
- Inter font family
- Work Sans for displays
- Source Sans Pro
- System font stacks
⚙️ Development
- CSS Grid for layouts
- SCSS for organization
- CSS Custom Properties
- Modern build tools
📚 Inspiration
- Brutalist architecture
- Japanese minimalism
- Swiss design principles
- Contemporary museums