Aesthetic Catalog

Aesthetic Catalog

Last updated: 2026-02-07

Pre-researched implementation data for common UI aesthetics. Use as a starting point when generating a full design system guide per the output schema. Cross-reference with web research for the latest trends and variations.

Table of Contents

1. Brutalist / Neo-Brutalist
2. Swiss / International Typographic Style
3. Glassmorphism
4. Retro-Futuristic / Cyberpunk
5. Apple Human Interface
6. Neumorphism / Soft UI
7. Material Design 3

1. Brutalist / Neo-Brutalist

Essence: Raw, unpolished, anti-design. The absence of decoration IS the aesthetic.

Essential Properties

• border-radius: 0 on everything
• box-shadow with zero blur (hard offset): 4px 4px 0 #000
• High-contrast monochrome base with 0-2 saturated accent colors
• Monospace or raw sans-serif typography

Anti-Patterns

• Gradients, rounded corners, soft shadows, blur effects, subtle color palettes

Colors

• Backgrounds: #FFFFFF or #000000
• Text: opposite of background
• Neo-brutalist accents: #FF5733, #FFCC00, #4B69FE, #00FF9F, #9C7BFF
• Pattern: monochrome base + 0-2 saturated accents. No gradients. No tints.

Typography

• Fonts: 'IBM Plex Mono', 'Source Code Pro', 'Courier New', monospace or Arial, Helvetica, sans-serif
• Weights: 400 and 700 only
• Scale: large jumps — body 16-18px, headings 32-72px, no intermediates
• Line-height: 1.2-1.4
• Letter-spacing: 0 or slightly negative for headings
• Frequent text-transform: uppercase

Borders & Shapes

• border: 2px solid #000 or 3px solid #000
• border-radius: 0 — always
• Occasional thick borders (4-6px) for emphasis

Shadows

• Hard offset only: box-shadow: 4px 4px 0 #000
• Larger elements: box-shadow: 8px 8px 0 #000
• Blur is always 0
• No text-shadow

Spacing

• Deliberately unrefined: either very tight or very generous
• Large container padding (24-48px), minimal inline padding
• No standardized scale

Animation

• Minimal to none. Instant state changes.
• Hover: transform: translate(-2px, -2px) with shadow growing to 6px 6px 0 #000
• Active: shadow collapses to 0 0 0 #000, element translates by shadow offset transform: translate(4px, 4px)

Interactive States

• Hover: shadow grows, background inverts
• Active: shadow collapses, translate matches former shadow offset
• Focus: raw outline: 3px solid #000
• Disabled: opacity: 0.4; cursor: not-allowed

Form Elements

• Inputs: border: 2px solid #000; background: #fff; padding: 8px 12px; font-family: monospace; border-radius: 0
• Buttons: background: #000; color: #fff; border: 2px solid #000; padding: 12px 24px; font-family: monospace; text-transform: uppercase

2. Swiss / International Typographic Style

Essence: Mathematical precision, typographic hierarchy, asymmetric grid. White space is the primary design element.

Essential Properties

• Strict multi-column grid (12-column standard)
• Generous white space between sections (64-128px)
• Strong typographic hierarchy via size and weight alone
• Left-aligned, flush-left ragged-right text

Anti-Patterns

• Decorative elements, textures, gradients, rounded corners, centered body text, justified text

Colors

• Backgrounds: #FFFFFF or #F5F5F5
• Text: #000000 or #1A1A1A
• 1-2 bold accent colors: #FF0000, #0057B8, #FFD600
• Color is informational, not decorative

Typography

• Fonts: 'Helvetica Neue', Helvetica, Arial, Inter, sans-serif
• Weights: 400, 500, 700 with strong contrast between levels
• Scale ratio: ~1.25 (Major Third) or ~1.333 (Perfect Fourth)
• Body: 16px / H3: 20px / H2: 25px / H1: 32-40px / Display: 48-72px
• Line-height: 1.5 body, 1.1-1.2 headings
• Letter-spacing: -0.02em to -0.04em on large headings
• text-align: left always

Borders & Shapes

• Borders rare: border: 1px solid #000 or 1px solid #E0E0E0 for dividers only
• border-radius: 0 or 2-4px maximum

Shadows

• None to minimal: box-shadow: 0 1px 3px rgba(0,0,0,0.08) at most

Spacing

• 8px baseline grid: 8, 16, 24, 32, 48, 64, 96
• display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px
• Generous section spacing: 64-128px vertical margins
• Consistent padding: 24px 32px

Animation

• Restrained: transition: opacity 200ms ease, transform 200ms ease
• 150-300ms durations, ease or ease-out
• Opacity and subtle position shifts only

Interactive States

• Hover: subtle color shift or underline appearance
• Active: opacity: 0.8
• Focus: outline: 2px solid #0057B8; outline-offset: 2px
• Disabled: opacity: 0.4

Form Elements

• Inputs: border: none; border-bottom: 1px solid #000; padding: 8px 0; font-family: 'Helvetica Neue', sans-serif; font-size: 16px
• Buttons: background: transparent; border: 1px solid #000; padding: 12px 24px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase

3. Glassmorphism

Essence: Frosted glass panels floating over vibrant color. Depth through translucency and blur.

Essential Properties

• backdrop-filter: blur(10px) — the defining property
• Semi-transparent backgrounds: rgba(255, 255, 255, 0.15)
• Thin semi-transparent border: border: 1px solid rgba(255, 255, 255, 0.2)
• Vibrant background behind the glass (gradient, image, or colored shapes)

Anti-Patterns

• Opaque backgrounds, hard shadows, sharp corners, flat backgrounds behind glass elements

Colors

• Background (behind glass): vibrant gradients — #667EEA → #764BA2, #00B4DB → #0083B0, #E100FF → #7F00FF
• Glass surface: rgba(255, 255, 255, 0.15) (light) or rgba(255, 255, 255, 0.05-0.10) (dark)
• Dark variant glass: rgba(0, 0, 0, 0.2) to rgba(17, 25, 40, 0.75)
• Text: #FFFFFF or rgba(255, 255, 255, 0.8-0.9)

Typography

• Fonts: Inter, 'SF Pro Display', Poppins, 'Segoe UI', sans-serif
• Weights: 400 body, 500-600 headings
• Body: 14-16px, line-height 1.5-1.6
• Color: white or near-white with high opacity

Borders & Shapes

• border: 1px solid rgba(255, 255, 255, 0.2) (light) or rgba(255, 255, 255, 0.08) (dark)
• border-radius: 12px to 20px

Shadows

• Outer: box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2)
• Inner highlight: box-shadow: inset 0 4px 20px rgba(255, 255, 255, 0.3)
• Combined: both outer and inset

Backgrounds

• Glass: backdrop-filter: blur(10px) saturate(180%); background: rgba(255, 255, 255, 0.15)
• Blur range: 6-8px (subtle) to 15-20px (heavy frost)
• Background must be colorful for effect to read

Spacing

• Generous and airy
• Card padding: 24px 32px to 32px 40px
• Element spacing: 16-24px

Animation

• transition: all 0.3s ease or transition: background 0.3s ease, box-shadow 0.3s ease
• 200-400ms, ease or ease-in-out

Interactive States

• Hover: background: rgba(255, 255, 255, 0.25), deeper shadow
• Active: transform: scale(0.98), shadow reduces
• Focus: outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px
• Disabled: opacity: 0.5, reduced blur

Special Effects

• Gradient orbs behind glass: border-radius: 50%; filter: blur(60px) colored blobs
• Light reflection: ::after pseudo-element with subtle white gradient at top
• Shine: background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)

4. Retro-Futuristic / Cyberpunk

Essence: Neon on dark. HUD interfaces, glitch effects, terminal aesthetics.

Essential Properties

• Near-black backgrounds: #0A0A0F
• Neon accent colors at full saturation: #00F0FF (cyan), #FF2A6D (magenta)
• Multi-layer glow shadows: box-shadow: 0 0 10px, 0 0 30px, 0 0 60px in neon colors
• Monospace or tech-style fonts
• text-transform: uppercase with wide letter-spacing: 0.1em-0.3em

Anti-Patterns

• Pastel colors, rounded corners, soft shadows, light backgrounds, serif fonts, organic shapes

Colors

• Background: #0A0A0F, #0D0D0D, #1A1A2E
• Primary: #00F0FF (cyan)
• Secondary: #FF2A6D (magenta/pink)
• Warning: #FCEE0A (yellow)
• Success: #05FFA1 (green)
• Danger: #FF0040 (red)
• HSL pattern: saturation 80-100%, lightness 50-60% on backgrounds at lightness 3-8%

Typography

• Primary: Rajdhani, sans-serif or Orbitron, sans-serif
• Mono: 'Share Tech Mono', 'Source Code Pro', monospace
• Weights: 500-700
• Body: 14-16px, headings: 24-48px, display: 60-120px
• text-transform: uppercase dominant
• letter-spacing: 0.1em to 0.3em on uppercase

Borders & Shapes

• Neon borders: border: 1px solid #00F0FF or rgba(0, 240, 255, 0.3)
• border-radius: 0 (sharp/angular)
• Clipped corners: clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px))

Shadows (Neon Glow)

• Box: box-shadow: 0 0 10px #00F0FF, 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px rgba(0, 240, 255, 0.2)
• Text: text-shadow: 0 0 10px #00F0FF, 0 0 20px #00F0FF, 0 0 40px #00F0FF, 0 0 80px #00F0FF
• Inner: box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.1)

Backgrounds

• Base: background: #0A0A0F or linear-gradient(135deg, #0A0A0F, #1A1A2E)
• Grid pattern: background-image: linear-gradient(rgba(0,240,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,0.03) 1px, transparent 1px); background-size: 50px 50px
• Scanlines: background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px); background-size: 100% 2px; pointer-events: none

Spacing

• Dense, HUD-like: padding 8-16px, gaps 4-8px

Animation

• Fast: transition: all 0.15s ease-out
• Glitch: rapidly changing clip-path and slight translates over 2-5s
• Flicker: animation: flicker 0.15s infinite — small opacity variations
• Chromatic aberration: pseudo-elements offset by 1-2px in different neon colors with mix-blend-mode: screen

Interactive States

• Hover: glow intensifies, background: rgba(0, 240, 255, 0.1), border brightens
• Active: glitch animation triggers, flash of inverted colors
• Focus: outline: 1px solid #00F0FF; outline-offset: 2px
• Disabled: filter: grayscale(80%); opacity: 0.3

Special Effects

• Scanlines overlay (as above, with pointer-events: none)
• CRT flicker: @keyframes flicker { 0% { opacity: 0.97 } 50% { opacity: 1 } 100% { opacity: 0.98 } }
• Noise: SVG <feTurbulence> filter at opacity 0.03-0.05
• Chromatic aberration on text: ::before in cyan offset -2px, ::after in magenta offset +2px, mix-blend-mode: screen

5. Apple Human Interface

Essence: Clarity, deference, depth. System-level polish with continuous corners, vibrancy, and spring physics.

Essential Properties

• SF Pro font system (SF Pro Display ≥20pt, SF Pro Text <20pt) via -apple-system
• Continuous corners (squircle): border-radius: 12-20px
• Vibrancy: backdrop-filter: blur(20px) saturate(180%)
• Spring-based animation curves
• Semantic system colors that adapt to light/dark mode

Anti-Patterns

• Hard corners, heavy borders, neon colors, monospace for UI text, flat design without depth

Colors (Light / Dark)

• systemBlue: #007AFF / #0A84FF
• systemGreen: #34C759 / #30D158
• systemRed: #FF3B30 / #FF453A
• systemOrange: #FF9500 / #FF9F0A
• systemYellow: #FFCC00 / #FFD60A
• systemPurple: #AF52DE / #BF5AF2
• systemPink: #FF2D55 / #FF375F
• Background primary: #FFFFFF / #000000
• Background secondary: #F2F2F7 / #1C1C1E
• Gray scale (light): #8E8E93, #AEAEB2, #C7C7CC, #D1D1D6, #E5E5EA, #F2F2F7
• Gray scale (dark): #8E8E93, #636366, #48484A, #3A3A3C, #2C2C2E, #1C1C1E

Typography

• Font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif
• Large Title: 34pt/400/41pt leading/0.37 tracking
• Title 1: 28pt/400/34pt/0.36
• Body: 17pt/400/22pt/-0.41
• Footnote: 13pt/400/18pt/-0.08
• Caption 1: 12pt/400/16pt/0

Borders & Shapes

• Continuous corners: border-radius: 12px (buttons), 20px (cards)
• Hairline separators: border: 0.5px solid rgba(0,0,0,0.1)

Shadows

• Subtle: box-shadow: 0 2px 8px rgba(0,0,0,0.08)
• Medium: box-shadow: 0 4px 16px rgba(0,0,0,0.12)
• High (modals): box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.08)
• Always soft: large blur, low opacity

Backgrounds

• Vibrancy: backdrop-filter: blur(20px) saturate(180%); background: rgba(255,255,255,0.7) (light) or rgba(28,28,30,0.7) (dark)
• Grouped: layered grays #F2F2F7 → #FFFFFF → #F2F2F7

Spacing

• 4pt base unit: 4, 8, 12, 16, 20, 24, 32, 40, 48
• Touch targets: minimum 44×44pt
• Content margin: 16-20px from screen edge

Animation

• Spring-based: transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1.0)
• Bouncy spring: transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
• Range: 250-500ms
• Transform and opacity only

Interactive States

• Hover (macOS): background: rgba(0, 0, 0, 0.04)
• Active: opacity: 0.7 or transform: scale(0.97) with spring-back
• Focus: outline: 4px solid rgba(0, 122, 255, 0.6); outline-offset: 1px
• Disabled: opacity: 0.3

Form Elements

• Inputs: background: #F2F2F7; border: none; border-radius: 10px; padding: 12px 16px; font-size: 17px
• Buttons (filled): background: #007AFF; color: #fff; border: none; border-radius: 12px; padding: 14px 20px; font-size: 17px; font-weight: 600
• Toggle: 51×31pt, rounded-pill, green active (#34C759)

6. Neumorphism / Soft UI

Essence: Extruded from the background. Depth through dual-direction shadows on a uniform surface.

Essential Properties

• Element background MUST match container background
• Dual box-shadow (dark bottom-right + light top-left): box-shadow: 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5)
• Low-saturation, high-lightness base colors
• Generous border-radius: 12-20px

Anti-Patterns

• High-contrast colors, hard borders, flat shadows, gradients on elements (breaks shadow illusion), tight spacing (shadows need room)

Colors

• Light base: #E0E5EC (canonical), #ECF0F3, #E4EBF5
• Dark base: #2D2D3A, #33333D
• Accent: single muted color — #6D5DFC (soft purple) or #4ECDC4 (soft teal)
• Text: #5A5A6E or #44476A (softer than black)
• HSL pattern: saturation 5-15%, lightness 85-92% (light) or 18-25% (dark)

Typography

• Fonts: Inter, Poppins, Nunito, Rubik, sans-serif — soft, rounded
• Weights: 400 body, 500-600 headings (avoid heavy bold)
• Body: 14-16px, line-height 1.5-1.6

Borders & Shapes

• Generally no borders — depth from shadows only
• border-radius: 12px to 20px, 50px for pills
• Occasional: border: 1px solid rgba(255,255,255,0.1)

Shadows (THE DEFINING PROPERTY)

• Raised: box-shadow: 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5)
• Pressed/inset: box-shadow: inset 9px 9px 16px rgba(163,177,198,0.6), inset -9px -9px 16px rgba(255,255,255,0.5)
• Formula: dark shadow = base lightness -10-15%; light shadow = base lightness +10-15%; offset 5-15px; blur 1.5-2× offset
• Dark mode: box-shadow: 5px 5px 10px rgba(0,0,0,0.5), -5px -5px 10px rgba(255,255,255,0.05)

Backgrounds

• Flat solid matching container: background: #E0E5EC
• No gradients on elements
• Subtle page gradient acceptable: linear-gradient(145deg, #E0E5EC, #D1D9E6)

Spacing

• Generous: padding 20-32px, margins 24-40px between elements (shadows need room)

Animation

• transition: box-shadow 0.25s ease, transform 0.25s ease
• 200-350ms, ease or ease-in-out
• Shadow transitions between raised and pressed

Interactive States

• Hover: shadow grows (offset +2-3px, blur proportional), element "lifts"
• Active: outer shadows → inset shadows, transform: scale(0.98) optional
• Focus: box-shadow: 0 0 0 3px rgba(109,93,252,0.3), ...existing shadows
• Disabled: shadows flatten to near-zero, opacity: 0.5

Form Elements

• Inputs (inset): background: #E0E5EC; border: none; border-radius: 12px; padding: 12px 20px; box-shadow: inset 6px 6px 10px rgba(163,177,198,0.5), inset -6px -6px 10px rgba(255,255,255,0.5)
• Buttons (raised): background: #E0E5EC; border: none; border-radius: 16px; padding: 14px 28px; box-shadow: 8px 8px 16px rgba(163,177,198,0.6), -8px -8px 16px rgba(255,255,255,0.5)

7. Material Design 3

Essence: Systematic, token-based, color-role-driven. Dynamic color from seed hues, state layers, and structured elevation.

Essential Properties

• 29 color roles (primary, secondary, tertiary, error, surface + containers + on-colors)
• Tonal elevation: surface tint overlay (primary at low opacity) replaces pure shadow for depth
• State layers: semi-transparent overlays for hover (8%), focus (10%), pressed (10%), dragged (16%)
• Token-based spacing, shape, motion

Anti-Patterns

• Arbitrary colors outside the tonal system, hard shadows without surface tint, decorative animations, inconsistent corner radius

Colors (Baseline)

• Primary: #6750A4 / On Primary: #FFFFFF / Primary Container: #EADDFF
• Secondary: #625B71 / Tertiary: #7D5260
• Error: #B3261E
• Surface: #FFFBFE / On Surface: #1C1B1F
• Outline: #79747E / Surface Variant: #E7E0EC
• Dynamic color: HCT color space generates 13 tones per hue (0-100)

Typography (Roboto)

• Display Large: 57px/400/64px/-0.25px
• Headline Large: 32px/400/40px/0
• Title Medium: 16px/500/24px/0.15px
• Body Large: 16px/400/24px/0.5px
• Label Large: 14px/500/20px/0.1px
• Body Small: 12px/400/16px/0.4px

Shape Scale

• Extra Small: 4dp — chips
• Small: 8dp
• Medium: 12dp — cards
• Large: 16dp — FABs
• Extra Large: 28dp — dialogs
• Full: 9999dp — pills

Shadows (Elevation)

• Level 1: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15)
• Level 2: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15)
• Level 3: 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15)
• Level 4: 0 2px 3px 0 rgba(0,0,0,0.3), 0 6px 10px 4px rgba(0,0,0,0.15)
• Level 5: 0 4px 4px 0 rgba(0,0,0,0.3), 0 8px 12px 6px rgba(0,0,0,0.15)
• Surface tint: primary color at 5% (L1), 8% (L2), 11% (L3), 12% (L4), 14% (L5)

Spacing

• 4dp base, 8dp increment for layout
• Touch targets: 48×48dp minimum
• Horizontal padding: 16dp (mobile), 24dp (desktop)

Animation

• Standard: cubic-bezier(0.2, 0, 0, 1)
• Emphasized Decelerate: cubic-bezier(0.05, 0.7, 0.1, 1)
• Emphasized Accelerate: cubic-bezier(0.3, 0, 0.8, 0.15)
• Short: 50-200ms (micro-interactions)
• Medium: 250-400ms (standard transitions)
• Long: 450-600ms (page transitions)

State Layers

• Hover: 8% opacity of on-surface color — rgba(28, 27, 31, 0.08)
• Focus: 10% — rgba(28, 27, 31, 0.10)
• Pressed: 10% — rgba(28, 27, 31, 0.10)
• Dragged: 16% — rgba(28, 27, 31, 0.16)
• Disabled content: opacity: 0.38
• Disabled container: opacity: 0.12
• Ripple: circular expansion from touch point, 300ms

Form Elements

• Outlined text field: border: 1px solid #79747E; border-radius: 4px; padding: 16px; font-size: 16px — focus: 2px primary border
• Filled text field: background: #E7E0EC; border: none; border-bottom: 1px solid #79747E; border-radius: 4px 4px 0 0; padding: 16px — focus: 2px primary bottom border
• Filled button: background: #6750A4; color: #FFFFFF; border: none; border-radius: 20px; padding: 10px 24px; height: 40px; font-size: 14px; font-weight: 500
• Outlined button: background: transparent; border: 1px solid #79747E; border-radius: 20px; color: #6750A4; padding: 10px 24px; height: 40px