Aesthetic Systems
Turning vague taste into a usable art-direction system by choosing a visual thesis, material thesis, and motion thesis, then letting components obey those choices. Source: frontend-frontier-pack/codex-skill/frontend-frontier/references/aesthetic-systems.md
First Principles
- A great page has a point of view within two seconds.
- Type, spacing, and surfaces matter more than decorative assets.
- Depth should clarify hierarchy, not compensate for weak hierarchy.
- A strong motif must repeat with variation, not appear once and disappear.
- Most premium pages are built on restraint, not abundance.
Extracted Patterns from Live Sites
Scene-led (Basement, Shopify Editions, Adaline): Hero is a world, not a panel. UI chrome minimized. Light, fog, grain do the work. Use when the product story is emotional or brand-heavy. Avoid when content is dense or perf-constrained.
Editorial technical (Stripe Dot Dev, Speakeasy, VoidZero): Typography is structural. Labels, grid markers, fig numbers create authority. Accents sparse and intentional. Use for technical audiences where credibility beats spectacle.
Product-forward premium SaaS (Graphite, Adaline, Blacksmith, HeyKuba): Crisp hero, one strong motif, dark/muted backgrounds with controlled highlights. Use when conversion matters and the product needs to look expensive.
Experimental / anti-polish (MSCHF, brutalist references): Oversized/clipped/monospaced type. High contrast. Deliberate tension. Use for culture-first brands. Avoid when user trust is fragile.
Motion-first illustrative (Kreos, Shaders, Supahero): Rounded surfaces, playful geometry, soft gradients or shader materials. Use for energy without cinematic cost.
Five Recommended Archetypes
1. Premium AI B2B
Mood: confident, expensive, quiet, precise. Palette: warm white or carbon base, one deep accent, one signal color. Type: strong sans, restrained display/serif, mono for labels. Motion: subtle reveals, one morphing hero motif.
2. Editorial Devtool
Mood: intelligent, technical, fast, exact. Palette: paper or off-black base, one electrical accent. Type: sharp grotesk/engineered sans, mono for labels. Motion: layout reveals, crossfades, cursor or figure markers.
3. Architectural Blueprint
Mood: schematic, conceptual, exacting. Palette: off-white, deep ink, cobalt/cyan. Type: precise sans, mono annotations. Motion: line draws, panel reveals, depth via layering.
4. Cinematic 3D
Mood: immersive, sculpted, atmospheric, slower. Palette: shadow-heavy neutrals, two light temps max. Motion: camera drift, pointer parallax, idle loops.
5. Neo-Brutalist / Experimental
Mood: blunt, memorable, anti-corporate, loud. Palette: black/white plus one aggressive accent. Motion: abrupt but intentional, fast transitions, type movement, no syrupy easing.
Style Variables to Lock Before Designing
- Contrast level: low / medium / high
- Depth level: flat / layered / scene-led
- Type voice: engineered / editorial / luxurious / brutal
- Surface finish: paper / glass / metal / grain / plastic / shader
- Motion appetite: restrained / assertive / theatrical
- Density: open / balanced / packed
Composition Rules
- Hero must have one primary focal object.
- Supporting objects frame the focal point or reinforce scale.
- Repeat a visual angle consistently.
- If using glow, pair it with darkness and empty space.
- Let logos, proof bars, and stats inherit the same spacing logic as the hero.
Gradient Usage
Use gradients as a material system, not decoration. The 2026 Yahyavision collage shows gradients working in five repeatable roles: directional light beams behind a product, translucent stacked surfaces, palette ramps that explain color relationships, soft atmospheric page backgrounds, and spectral/prism type treatments. In each case the gradient has a job: clarify depth, guide eye movement, imply energy, or make a brand world recognizable. Source: X/@yahyavision, 2026-03-17; Source: local image review, 2026-07-03
Practical rule: define the light source, transition direction, and surface being lit before choosing stops. If those three answers are missing, the gradient is probably a blob.
Things to Ban by Default
Random gradients with no material logic. Generic centered hero + dashboard + blur blobs. Too many font families. Pill buttons everywhere with no hierarchy. Glassmorphism on white for no reason. Fake 3D from stacking drop shadows.
Timeline
- 2026-07-03 | Added gradient usage rules from @yahyavision's image artifact: gradients should carry light, flow, depth, palette, or brand-world duties rather than act as standalone decoration. Source: raw/x-bookmarks/enriched/2033938519442293240.json; local image review