242 lines
8.3 KiB
Markdown
242 lines
8.3 KiB
Markdown
# Design Philosophy
|
|
|
|
Guidelines for brutalist, minimalist, and abstract design styles — and how to mix them.
|
|
|
|
## Table of Contents
|
|
|
|
- [Digital Brutalism](#digital-brutalism)
|
|
- [Minimalism](#minimalism)
|
|
- [Abstract / Generative](#abstract--generative)
|
|
- [Mixing Styles](#mixing-styles)
|
|
- [Color Palettes](#color-palettes)
|
|
|
|
---
|
|
|
|
## Digital Brutalism
|
|
|
|
**Principles**: Raw, honest, no polish. Exposed structure. Function as aesthetic. Intentional discomfort.
|
|
|
|
### Motion Patterns
|
|
|
|
- **Hard cuts**: No easing, `ease: 'none'` or `duration: 0`. Instant state changes.
|
|
- **Jarring transitions**: `steps()` easing, abrupt position jumps, deliberate jank.
|
|
- **No smooth scroll**: Native scroll only. Disable Lenis for brutalist sections.
|
|
- **Aggressive stagger**: Large stagger delays (0.3-0.5s), non-uniform timing.
|
|
- **Oversized motion**: Elements moving 200-400% of viewport. No subtlety.
|
|
|
|
### Typography
|
|
|
|
- Monospace only: `font-family: monospace` or specific like `'JetBrains Mono'`, `'Space Mono'`
|
|
- Giant sizes: 15-30vw for hero text
|
|
- Leading crushed: `line-height: 0.8` to `0.9`
|
|
- Overlap: Negative margins, elements bleeding into each other
|
|
- Mixed scales: 12px next to 200px in the same view
|
|
- ALL CAPS or extreme case mixing
|
|
|
|
### Layout
|
|
|
|
- Broken grids: Asymmetric, overlapping, bleeding off-screen
|
|
- Visible borders: `border: 2px solid` everywhere
|
|
- Raw backgrounds: Solid black, white, or single accent
|
|
- No border-radius: Sharp corners only
|
|
|
|
### Animation Code Pattern
|
|
|
|
```tsx
|
|
// Brutalist: instant, hard, no easing
|
|
gsap.to(el, { x: 500, duration: 0, ease: 'none' }) // teleport
|
|
gsap.to(el, { rotation: 90, duration: 0.1, ease: 'steps(3)' }) // stepped
|
|
gsap.to(el, { scale: 3, duration: 0.05 }) // jarring snap
|
|
```
|
|
|
|
---
|
|
|
|
## Minimalism
|
|
|
|
**Principles**: Less is more. Every element serves a purpose. Motion communicates, never decorates.
|
|
|
|
### Motion Patterns
|
|
|
|
- **Ease-out smooth**: `power2.out` or `[0.16, 1, 0.3, 1]`. Never linear, never bouncy.
|
|
- **Subtle scale**: Max 1.02-1.05 scale changes. Barely perceptible.
|
|
- **Opacity only**: Many transitions need nothing more than `opacity: 0 → 1`.
|
|
- **Long durations**: 800ms-1500ms for primary, 300-500ms for secondary.
|
|
- **Single property**: Animate one property at a time. Never x + y + scale + opacity simultaneously.
|
|
|
|
### Typography
|
|
|
|
- Sans-serif: Clean, geometric. `'Inter'`, `'Helvetica Neue'`, `'Neue Haas Grotesk'`
|
|
- Light weights: 200-400 for body, 500-600 for emphasis (never 900)
|
|
- Generous tracking: `letter-spacing: 0.1-0.3em` for headings
|
|
- Generous leading: `line-height: 1.6-1.8`
|
|
- Restrained sizes: Max 3-4 sizes in the entire page
|
|
|
|
### Layout
|
|
|
|
- Abundant whitespace: 40-60% of viewport should be empty
|
|
- Strict grid: 12-column or 8-column, always aligned
|
|
- No decorative elements: If it doesn't inform, remove it
|
|
- Monochromatic or 2-color max
|
|
|
|
### Animation Code Pattern
|
|
|
|
```tsx
|
|
// Minimal: smooth, purposeful, restrained
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
|
|
/>
|
|
|
|
// Subtle hover
|
|
<motion.a whileHover={{ opacity: 0.6 }} transition={{ duration: 0.3 }} />
|
|
```
|
|
|
|
---
|
|
|
|
## Abstract / Generative
|
|
|
|
**Principles**: Non-representational beauty. Mathematics as aesthetics. Organic through algorithmic means.
|
|
|
|
### Motion Patterns
|
|
|
|
- **Noise-driven**: Perlin/Simplex noise for position, scale, rotation. Never predictable.
|
|
- **Parametric motion**: Sine/cosine combinations for organic loops.
|
|
- **Infinite loops**: `repeat: -1`. Art that never settles.
|
|
- **Emergent behavior**: Simple rules → complex visuals (flocking, cellular automata).
|
|
- **Slow evolution**: Changes happen over 10-60 seconds. Patience rewarded.
|
|
|
|
### Visual Language
|
|
|
|
- Shapes: Circles, flowing curves, particle systems. Avoid rectangles.
|
|
- Color: Gradients, hue rotation, noise-mapped palettes.
|
|
- Texture: Grain, noise overlays, displacement maps.
|
|
- Scale: Micro patterns that reveal macro structures.
|
|
|
|
### Animation Code Pattern
|
|
|
|
```tsx
|
|
// Abstract: noise-driven, parametric, continuous
|
|
const animate = () => {
|
|
time += 0.005
|
|
elements.forEach((el, i) => {
|
|
const nx = noise3D(i * 0.1, 0, time) * amplitude
|
|
const ny = noise3D(0, i * 0.1, time) * amplitude
|
|
gsap.set(el, { x: nx, y: ny, rotation: nx * 0.5 })
|
|
})
|
|
requestAnimationFrame(animate)
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Mixing Styles
|
|
|
|
### Neo-Brutalism (Brutalist + Minimal)
|
|
|
|
The currently trending style. Takes brutalist rawness and pairs with minimal restraint.
|
|
|
|
- **What to keep from Brutalism**: Bold typography, visible borders, monospace, high contrast
|
|
- **What to keep from Minimal**: Purposeful whitespace, smooth-ish easing (`power1.out`), restraint in motion
|
|
- **How it looks**: Large mono headings, clean grid with thick borders, black + white + one bright accent, subtle animations on bold elements
|
|
- **Motion recipe**: Short durations (200-400ms), `power1.out` easing, opacity transitions, no bounce
|
|
|
|
```tsx
|
|
// Neo-brutalist card
|
|
<motion.div
|
|
className="border-2 border-black bg-[#BAFF39] p-6 font-mono"
|
|
whileHover={{ y: -4 }}
|
|
transition={{ duration: 0.2, ease: 'easeOut' }}
|
|
>
|
|
<h3 className="text-2xl font-black uppercase">Title</h3>
|
|
</motion.div>
|
|
```
|
|
|
|
### Generative Minimal (Abstract + Minimal)
|
|
|
|
Subtle algorithmic beauty with minimalist discipline.
|
|
|
|
- **What to keep from Abstract**: Noise-driven motion, particle systems, parametric shapes
|
|
- **What to keep from Minimal**: Restraint, monochrome, negative space, slow transitions
|
|
- **How it looks**: Single-color generative backgrounds, subtle noise displacement, barely-there particles
|
|
- **Motion recipe**: Very slow (15-60s cycles), low amplitude, opacity < 0.3
|
|
|
|
### Controlled Chaos (Brutalist + Abstract)
|
|
|
|
Algorithmic art with raw presentation.
|
|
|
|
- **What to keep from Brutalism**: Hard edges, high contrast, aggressive scale, monospace labels
|
|
- **What to keep from Abstract**: Generative geometry, noise, mathematical patterns
|
|
- **How it looks**: Full-screen fractal with mono text overlaid, glitch effects on generative backgrounds, data visualization with brutalist typography
|
|
- **Motion recipe**: Mix of instant and slow — background evolves slowly, UI snaps
|
|
|
|
---
|
|
|
|
## Color Palettes
|
|
|
|
### Brutalist
|
|
|
|
| Name | Hex | Use |
|
|
|------|-----|-----|
|
|
| Pure Black | `#000000` | Background, text |
|
|
| Pure White | `#FFFFFF` | Background, text |
|
|
| Acid Green | `#BAFF39` | Accent |
|
|
| Electric Blue | `#0000FF` | Accent alternative |
|
|
| Warning Red | `#FF0000` | Accent alternative |
|
|
|
|
### Minimalist
|
|
|
|
| Name | Hex | Use |
|
|
|------|-----|-----|
|
|
| Off White | `#FAFAF9` | Background |
|
|
| Warm Gray | `#A8A29E` | Secondary text |
|
|
| Charcoal | `#1C1917` | Primary text |
|
|
| Stone | `#E7E5E4` | Borders, dividers |
|
|
| Subtle Accent | `#D4D4D8` | Hover states |
|
|
|
|
### Abstract / Generative
|
|
|
|
| Name | Hex | Use |
|
|
|------|-----|-----|
|
|
| Deep Space | `#0A0A0F` | Background |
|
|
| Nebula Purple | `#7C3AED` | Primary |
|
|
| Plasma Cyan | `#06B6D4` | Secondary |
|
|
| Solar Gold | `#F59E0B` | Accent |
|
|
| Void Gray | `#1E1E2E` | Surfaces |
|
|
|
|
### Neo-Brutalist
|
|
|
|
| Name | Hex | Use |
|
|
|------|-----|-----|
|
|
| Black | `#000000` | Borders, text |
|
|
| Cream | `#FEF3C7` | Background |
|
|
| Lime | `#BAFF39` | Primary accent |
|
|
| Peach | `#FECACA` | Secondary accent |
|
|
| Lavender | `#DDD6FE` | Tertiary accent |
|
|
|
|
### Retro Fantastical (Wonka / Oz / PS2 / MTV)
|
|
|
|
Saturated, whimsical, nostalgic. Inspired by 1971 Willy Wonka's candy psychedelia, Wizard of Oz technicolor, PS2-era warm gradients, and MTV Y2K maximalism.
|
|
|
|
| Name | Hex | Use |
|
|
|------|-----|-----|
|
|
| Wonka Purple | `#7B2D8E` | Primary, headers, hero backgrounds |
|
|
| Chocolate | `#5C3317` | Rich warm backgrounds, borders |
|
|
| Emerald City | `#2D8E57` | Accents, CTAs, success states |
|
|
| Ruby Slipper | `#C62828` | Highlights, hover states |
|
|
| Yellow Brick | `#E8A317` | Gold accents, badges, links |
|
|
| Candy Pink | `#E84393` | Secondary accent, MTV energy |
|
|
| MTV Lime | `#A3E635` | Neon pop, interactive elements |
|
|
| PS2 Sky | `#5B9BD5` | Soft backgrounds, cards |
|
|
| Sepia Warm | `#D4A574` | Nostalgic overlays, text secondary |
|
|
| Technicolor Cyan | `#00BCD4` | Splash color, borders |
|
|
| Chrome Silver | `#C0C0C0` | Y2K metallic, disabled states |
|
|
| Deep Velvet | `#1A0A2E` | Dark mode background |
|
|
|
|
**Usage tips**:
|
|
- Pair Deep Velvet + Wonka Purple + Yellow Brick for Wonka vibes
|
|
- Emerald City + Ruby Slipper + Yellow Brick for Oz palette
|
|
- PS2 Sky + Sepia Warm + Chocolate for nostalgic warmth
|
|
- Candy Pink + MTV Lime + Chrome Silver for Y2K energy
|
|
- Mix all freely for maximalist retro-fantastical compositions
|