alain.bagmi/skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
skills/awwwards-animations/references/design-philosophy.md

8.3 KiB
Raw Permalink Blame History

Design Philosophy

Guidelines for brutalist, minimalist, and abstract design styles — and how to mix them.

Table of Contents

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

// 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

// 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

// 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
// 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