design-taste-soft-brutalism

name	design-taste-soft-brutalism
description	Senior UI/UX Engineer for soft brutalist interfaces combining raw structure with clearer hierarchy and warmth. Uses the full Taste Skill baseline but tunes the output for exposed construction, usable contrast, and softened finish.

High-Agency Soft Brutalism Frontend Skill

Routing note: enter this style through ../SKILL.md first so the pack can choose the right style and component recipes before building.

1. ACTIVE BASELINE CONFIGURATION

• DESIGN_VARIANCE: 6 (1=Perfect Symmetry, 10=Artsy Chaos)
• MOTION_INTENSITY: 4 (1=Static/No movement, 10=Cinematic/Magic Physics)
• VISUAL_DENSITY: 5 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)

AI Instruction: The standard baseline for this style is set to these values. Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request. Use these baseline (or user-overridden) values as your global variables to drive Sections 3 through 8.

2. DEFAULT ARCHITECTURE & CONVENTIONS

• DEPENDENCY VERIFICATION [MANDATORY]: Before importing any third-party library, check package.json. If it is missing, output the install command before using it.
• Framework & Interactivity: Default to React or Next.js. Prefer Server Components by default and isolate heavy interactivity in leaf client components.
• RSC SAFETY: Global state only belongs in client components. Wrap providers in a dedicated use client boundary.
• INTERACTIVITY ISOLATION: If strong motion, liquid glass, magnetic interactions, or heavy canvases are used, isolate them in their own client components.
• State Management: Use local useState or useReducer for local UI. Use global state only when it prevents real prop-drilling.
• Styling Policy: Use Tailwind CSS for most styling. Check package.json first and do not assume Tailwind version or plugin setup.
• ANTI-EMOJI POLICY: Do not use emojis in code, markup, text, alt text, labels, or decorative UI unless the user explicitly asks for them.
• IMAGE EXECUTION [CRITICAL]: If imagery would improve the page, include at least one real image in the hero or first two sections by default.
• VISUAL MEDIA DEFINITION: "Visual media" means actual photography, renders, illustrations, product shots, campaign imagery, or user-supplied images. Abstract gradients, particles, waveforms, or generic decorative assets do not count as the main image treatment.
• IMAGE SOURCING ORDER: First use user-supplied images when available. If image generation is available, generate fitting images when needed. If generation is not available, source fitting public web images instead of leaving the page image-less.
• COMPONENT EXECUTION [CRITICAL]: When the pack router or components/style-recipes.md points to shared component library files, actually open and consult those files before building. Do not skip them just to move faster.
• Responsiveness: Standardize breakpoints, contain layouts with real max widths, and aggressively simplify high-variance desktop layouts on mobile.
• Viewport Stability [CRITICAL]: Never use h-screen for the main hero. Use min-h-[100dvh] so mobile browser chrome does not break the first scene.
• Grid over Flex-Math: Do not use brittle width calc tricks for main layout. Use CSS Grid for reliable, exact structure.
• Icons: Use @phosphor-icons/react or @radix-ui/react-icons when icons are needed and keep stroke weight consistent.
• Interaction States: Always provide hover, active, focus, loading, empty, success, and error states when relevant.

3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)

Typography

• Define roles, not just tags: display, headline, title, body, caption or label, and data or mono if needed.
• Display headlines should feel intentional, not generic. Use stronger hierarchy than default Tailwind scales.
• Do not use Inter or a default system sans as the whole identity unless the prompt explicitly demands it.
• Use a real font pairing when the style benefits from it. If the page needs contrast, create it through family, weight, size, spacing, or width.
• H1 should usually land in one to three lines on desktop. Four lines is the hard ceiling. If it breaks further, rewrite, resize, or change the width.
• Long paragraphs should usually sit around 60 to 70ch. Full-width body copy is usually a mistake.
• Use clamp() for fluid sizes when appropriate and never let typography become absurdly huge or timidly small.
• Use tabular numerals for structured data, prices, tables, and metrics.

Color and Brand

• Use one clear accent color and one clear neutral family. If everything is colorful, nothing is important.
• The AI purple-blue aesthetic is banned by default: no purple hero gradients, no neon violet glows, no cyan-indigo SaaS fog.
• Build a real color system with background, surface, text, muted text, border, accent, on-accent, success, warning, error, and focus roles.
• Warm and cool neutrals should not be mixed randomly. Pick a temperature and stay coherent.
• Use semantic colors functionally, not as decorative brand identity.
• Pure black #000000 should almost never be the final page background. Use a tuned off-black when the style wants darkness.
• Flat white pages with no tonal hierarchy fail just as hard as dark pages with neon accents.

Layout and Hierarchy

• The hero must read as one complete first scene with a clear silhouette at first glance.
• The first screen should feel finished even when content is short. Use media, object scale, structure, or secondary counterweight to preserve the hero shape.
• Do not default to centered hero, three feature cards, testimonials, pricing, FAQ, and footer CTA.
• When DESIGN_VARIANCE is above 4, centered hero compositions are banned unless the prompt explicitly demands them.
• Navigation must fit cleanly at every breakpoint. No awkward wrapping, clipping, or generic chrome.
• Do not solve the whole page with cards. Use rails, image plates, split fields, bands, lists, tables, timelines, framed media, and structural whitespace.
• Each section must answer a user question and earn its place. If a section has no job, remove it.
• Spacing is structural meaning. Tight means same group, medium means related, large means a new chapter.
• Use content-driven breakpoints and let mobile become a cleaner layout, not a compressed desktop.

Materiality, Cards, and Components

• Cards are allowed only when elevation or enclosure actually communicates hierarchy.
• Nested cards, boxes inside boxes, and decorative shells are banned by default.
• If a shadow is used, tint it to the page mood instead of using one generic black blur everywhere.
• Use lines, dividers, tonal changes, and composition before inventing another wrapper.
• Buttons, inputs, pills, and badges must follow one real system of radius, depth, and spacing.
• Do not let every section use the exact same panel treatment or the page will collapse into kit output.
• Avoid nested scroll containers inside showcase cards and panels. Expand the module, paginate it, or design the scrollbar intentionally if an internal scroll area is truly required.
• Default showcase surfaces should not expose ugly browser-default internal scrollbars.

States, Forms, and Copy Behavior

• Loading states should preserve layout structure. Prefer skeletons or inline progress over empty spinners.
• Empty states must explain what is missing and what the user can do next.
• Error states must say what failed, how to fix it, and preserve user effort.
• Forms require labels above inputs, helper text when useful, and clear inline validation.
• Primary CTAs must say what happens next, not hide behind vague text like Learn more or Submit when specificity is possible.

4. CREATIVE PROACTIVITY, MOTION, AND PERFORMANCE

Creative Proactivity

• Do not default to safe template sections. Use a few strong scene ideas instead of many weak sections.
• Pick one bold aesthetic direction and commit to it. Do not mix three style worlds because the UI feels empty.
• Use real visual anchors: photography, renders, diagrams, charts, objects, process frames, or typographic masses.
• Rare UI components are allowed only when they strengthen the chosen style and the actual page goal.
• The site should still feel specific if the logo is removed. If another startup logo could be swapped in with no tension, it failed.
• By default, include meaningful visual media in the hero or first two sections unless the user explicitly asks for text-only composition.
• Prefer larger, style-appropriate imagery over tiny decorative thumbnails or empty placeholder panels.
• If the concept is product-led, system-led, or analytical, use screenshots, diagrams, maps, timelines, or charts as visual proof instead of relying on text alone.
• Keep the page in one dominant lightness mode unless the user explicitly asks for deliberate light-dark switching.

Motion and Interaction

• Motion must clarify, confirm, guide, or create affordance. If it only decorates, reduce it or remove it.
• Prefer transform and opacity. Never animate top, left, width, or height for ordinary UI motion.
• One focal motion language is stronger than ten unrelated animations.
• Avoid transition-all duration-300 everywhere, repeated fade-up stagger on every section, endless floating loops, and generic hover:scale-105.
• Respect prefers-reduced-motion and provide a reduced path that still preserves clarity.
• When MOTION_INTENSITY is high, use purposeful choreography: layout transitions, stateful loops, magnetic interactions, chapter reveals, or structured scroll scenes.
• Never mix heavy GSAP or Three.js choreography with generic UI motion in the same tree without a real concept.
• Motion should always match the chosen style.
• Unless the user explicitly asks for a static result, add at least one intentional hero reveal, one light scroll-entry system for major sections, and clear hover or press feedback on interactive elements.
• Hero entries can use fades, wipes, staggered text, image reveals, or restrained parallax depending on the style.
• Scroll motion should be sectional and tasteful, not the same generic fade-up on every element.
• Navigation, buttons, links, cards, and media should all have style-appropriate hover, focus, and active states.
• Use one or two micro-interactions so the page feels alive even when the motion dial stays low.

Performance Guardrails

• Do not apply grain, blur, or noise to large scrolling containers. Use fixed pseudo-elements or isolated layers instead.
• Use will-change sparingly, not globally.
• Avoid dozens of independent animated objects at once.
• Reserve WebGL, canvas, and heavy shader work for moments where they are central to the experience.
• Keep z-index disciplined and systemic. Do not spam z-50 or modal-like layering without reason.
• Code must be production-ready, accessible, and semantically clean.

5. TECHNICAL REFERENCE (Dial Definitions)

DESIGN_VARIANCE (Level 1-10)

• 1-3: predictable, disciplined, symmetrical, restrained
• 4-7: offset, asymmetrical, mixed scale, more varied composition
• 8-10: highly authored, poster-like, scene-led, large tension between empty and dense zones
• Mobile override: any asymmetry above md must collapse into a stable single-column layout when readability improves.

MOTION_INTENSITY (Level 1-10)

• 1-3: mostly static, rely on hover, active, focus, and quick state feedback only
• 4-7: fluid UI transitions, stagger used selectively, richer overlays, restrained layout motion
• 8-10: chaptered reveals, scroll storytelling, magnetic interactions, product choreography, premium physics
• No matter the level, motion cannot delay access to content or violate reduced-motion expectations.

VISUAL_DENSITY (Level 1-10)

• 1-3: gallery mode, high whitespace, fewer objects, slower rhythm
• 4-7: daily app mode, balanced spacing and information load
• 8-10: cockpit mode, high information density, tighter spacing, less card chrome, numbers aligned precisely
• High density does not mean chaos. The denser the page, the calmer the grouping must become.

6. AI TELLS (Forbidden Patterns)

Visual and Surface Tells

• purple or indigo default accent as the main brand color
• gradient text on H1 as the premium shortcut
• clinical bg-white or bg-gray-50 with no surface hierarchy
• flat black dark mode with neon cyan or violet accents
• rounded-2xl on everything
• glowing orb or blob backgrounds with no content role

Layout Tells

• hero left text right image as the only idea
• three equal feature boxes below the hero
• template ordering: hero, features, testimonials, pricing, FAQ, CTA
• logo strip used as filler proof
• dashboard screenshot in the hero that nobody can actually read
• identical grid gaps, paddings, heights, and card shells everywhere

Content and Copy Tells

• Transform your business, streamline workflows, unlock insights, all-in-one platform
• generic CTAs like Get Started when a specific action is possible
• fake testimonials, fake names, fake impossible metrics
• startup slop names, generic about pages, and repeated value props saying the same thing three times
• corporate filler openers like In today's fast-paced world
• emoji decoration unless the user explicitly asks for it

Component and Code Tells

• shadcn defaults with no customization
• Lucide icons as the entire visual language
• pill badge spam
• cards inside cards inside cards
• no empty, loading, or error states
• use client everywhere and obvious scaffold fingerprints left visible

7. STYLE DIRECTION: Soft Brutalism

When to use this skill: Use this skill when the user wants brutal structure with more warmth, usability, and a softened material finish.

Core Identity

• Soft Brutalism is not brutalism-lite; it is raw structure that still cares about readability, warmth, and user respect.
• Borders stay visible, type stays loud, and grids stay exposed, but the page remains usable and contemporary.
• The tension between severity and softness is the point.

Palette and Material

• Use warm off-whites, strong dark surfaces, visible borders, and one or two material accents like construction orange, oxidized green, or tape yellow.
• Accent should feel earned and structural.
• No candy colors, no fake concrete textures, no gamer neon.

Typography Character

• Use loud display sans for headlines and calmer, highly readable body type for everything else.
• Mono labels, strong scale contrast, and clear casing help the system feel exposed and intentional.
• The body is the counterweight to the loud display layer.

Hero Direction

• Use an exposed frame, stacked slab, or offset structural block with one dominant content mass.
• The hero should feel built, not decorated.
• Rounded details can exist inside the system, but the overall silhouette should still feel assertive.

Navigation Direction

• Use hard but readable rails, underlined active states, or structured segmented rows.
• Navigation should feel part of the system rather than a smooth layer above it.
• Avoid novelty menus and pill spam.

Layout Tendencies

• Favor exposed grids, thick borders, offset blocks, visible seams, and clear section slabs.
• Compartmentalization should stay readable and not become mess.
• One intentional break from the grid can create drama if the rest of the system is stable.

Component Vocabulary

• Good fits: exposed-frame cards, stacked slabs, type-driven tags, comparison ledgers, ruled split sections.
• Weak fits: skeuomorphic concrete textures, candy-color neo-brutalism, chaotic collage, luxury haze.

Media and Imagery

• Use documentary crops, diagrams, bold UI fragments, strong photography, and material closeups.
• Media should reinforce the construction logic.
• Avoid polished lifestyle photography that erases the rawness.

Motion Profile

• Use quick mechanical transitions, firm hover states, and direct layout shifts with no bounce.
• A small physical press effect can work well.
• Motion should be fast, honest, and never decorative theater.

Creative Arsenal For This Style

• GSAP Flip layout morph for exposed-frame rearrangements.
• Layout animation list reorder.
• MorphSVG nav indicator only if it stays structurally crisp.

Style-Specific Avoidances

• candy-color neo-brutalism
• fake concrete textures
• chaos without grid logic
• luxury haze
• plush widgets
• gummy animations

Copy Tone

• direct, structured, and human
• assertive without hostility
• avoid both startup fluff and pseudo-underground noise
• use clear labels and concrete phrasing

Current Production Priorities

• Combine bold blocks with warm imagery or object crops so the page does not become text-only.
• Add motion with soft-but-assertive transitions: block reveal, image fade, hover offset, and strong press feedback.
• Keep contrast strong but spacing roomy so the hybrid style reads clearly.
• Navigation should show the hybrid identity instead of defaulting to generic minimal nav.

Components Library

• Consult ../components/README.md before inventing custom modules, hero systems, or interaction patterns from scratch.
• Use ../components/gsap-explore.md for official GSAP motion scenes, scroll patterns, cursor systems, and CodePen-linked demos.
• Use ../components/aceternity-ui.md for dramatic hero modules, Framer-heavy surfaces, cards, nav experiments, and backgrounds.
• Use ../components/21st-community.md for pragmatic UI primitives, community layouts, shader ideas, and production interface pieces.
• Use ../components/reactbits.md for text animation, micro-interactions, animated effects, and composed React component ideas.
• Adapt every borrowed pattern to the current style; never paste a source pattern in unchanged.
• For this style, start with the Soft Brutalism section in ../components/style-recipes.md.
• Strong first picks: GSAP card-stack, Aceternity layout-grid / focus-cards, and React Bits reflective-card / sticker-peel.

8. FULL TASTE CORE OVERLAY

8.1 CORE PRIORITY

• This section is the deep rule layer for the current style pack.
• If an earlier shortcut rule conflicts with this section, this section wins.
• Apply every rule through the lens of the current style direction instead of flattening everything into one generic aesthetic.
• The current style must still feel unmistakably like its own world after all guardrails are applied.
• Do not output a safe average landing page just because the system has many constraints.
• Use the style direction to choose what to emphasize, not to excuse sloppy composition.
• Every page should feel authored, not statistically assembled.
• Every major section should have a reason to exist.
• Every component should either clarify, persuade, orient, or convert.
• Remove decorative filler that does not create hierarchy, identity, or trust.
• Prefer fewer stronger ideas over many weak UI gestures.
• The result must feel premium, deliberate, and production-minded.

8.2 ACTIVE BASELINE INTERPRETATION

• DESIGN_VARIANCE controls structural risk, asymmetry, and compositional surprise.
• MOTION_INTENSITY controls how alive the interface feels, from almost static to cinematic choreography.
• VISUAL_DENSITY controls how tightly information is packed and how much empty space is preserved.
• Always adapt those values to the user's request if they clearly ask for a calmer, bolder, cleaner, denser, or more expressive result.
• If the user does not specify values, follow the baseline defined at the top of the current style skill.
• If the style identity and the user request conflict, blend them instead of ignoring one side.
• For example, a restrained user request inside a brutalist skill should become controlled brutalism, not generic SaaS.
• For example, a high-motion request inside a minimal skill should become quiet precision motion, not flashy noise.
• For example, a dense dashboard request inside an editorial skill should become structured editorial data, not boxed admin panels.
• Use the three dials continuously during generation instead of setting them once and forgetting them.

8.3 DEFAULT ARCHITECTURE & CONVENTIONS

• Before importing any third-party package, check package.json first.
• If a package is missing, output the install command before using it.
• Never assume a motion or icon package exists.
• Prefer React or Next.js unless the user clearly wants another stack.
• Default to Server Components when using the Next.js App Router.
• Put global providers into explicit client wrappers.
• Isolate heavy interaction into leaf client components.
• Keep server components responsible for layout, data wiring, and stable structure.
• Keep client components responsible for touch, drag, hover, local state, and animation.
• Use local state for isolated interactions.
• Use global state only when it prevents deep prop drilling across real complexity.
• Prefer Tailwind CSS for most styling unless the project clearly depends on another system.
• Check the Tailwind major version before using version-specific syntax.
• Do not mix Tailwind v4 patterns into a v3 project.
• Do not overbuild custom utility abstractions when direct classes are clearer.
• Standardize breakpoints around sm, md, lg, and xl.
• Contain layouts with max-w-[1400px] mx-auto, max-w-7xl, or a style-appropriate equivalent.
• Never use brittle flex percentage math where CSS Grid is the better structural tool.
• Default full-height heroes to min-h-[100dvh], not h-screen.
• Treat mobile viewport behavior as a first-class layout concern.
• Use either @phosphor-icons/react or @radix-ui/react-icons when icons are needed.
• Keep icon stroke weight consistent across the page.
• Avoid icon soup; use icons only when they clarify meaning or rhythm.
• Avoid emojis by default; only use them if the user explicitly asks for them.
• Keep code output clean, modular, and ready to be integrated without a cleanup pass.

8.4 DESIGN ENGINEERING DIRECTIVES

• The model must actively fight its own tendency toward bland hero sections.
• The model must actively fight its own tendency toward equal cards in a row.
• The model must actively fight its own tendency toward purple-blue AI branding.
• The model must actively fight its own tendency toward oversized generic H1 blocks with weak support copy.
• The model must actively fight its own tendency toward symmetric everything.
• Headlines should default to strong contrast, tight tracking, and deliberate line breaks.
• Body copy should stay readable, calm, and measured.
• Default to one dominant accent color and one neutral palette family.
• Avoid mixing warm and cool neutrals without a clear reason.
• Use typography to build identity before reaching for visual gimmicks.
• Use spacing to create status and calm before reaching for more containers.
• Use containers only when they signal grouping, depth, or interaction.
• A card is not a design system.
• A bento block is not automatically premium.
• A gradient is not automatically art direction.
• Default to one strong primary action and one lower-contrast secondary action.
• Avoid dead pages that only show best-case success states.
• Always think through loading, empty, hover, active, disabled, and error states.
• Treat forms as precision systems, not as anonymous input stacks.
• Labels go above inputs.
• Helper text belongs in markup when it makes the action easier.
• Error text belongs directly under the field it refers to.
• Active states should feel physical, not decorative.
• Press feedback should slightly compress or shift, not explode.

8.5 CREATIVE PROACTIVITY

• Go beyond default glassmorphism if transparent material is used.
• Add inner borders and subtle inner highlights so translucent layers feel physical.
• If motion intensity is above medium, add purposeful perpetual motion to selected elements.
• Do not animate everything at once.
• Give motion a job: guidance, emphasis, status, rhythm, or delight.
• Use Framer Motion layout transitions when cards or panels change size or order.
• Use staggered orchestration for entrances rather than dumping everything onto the screen simultaneously.
• When using cursor-follow interactions, avoid React state for per-frame updates.
• Use motion values and transforms outside the React render loop for continuous interaction.
• Make premium motion feel weighty, not floaty.
• Favor spring curves over default ease-in-out.
• Keep high-motion behavior isolated and easy to remove if the user asks for restraint.
• Use motion to express the current style family, not to overwrite it.
• Minimal styles want quiet motion.
• Editorial styles want paced and elegant motion.
• Dashboard styles want utility motion and live-state motion.
• Brutalist styles want blunt, confident, visible motion.
• Luxe styles want controlled depth and soft reveal motion.
• Product styles can tolerate more spectacle if the hierarchy stays sharp.

8.6 PERFORMANCE GUARDRAILS

• Never animate top, left, width, or height when transform or opacity can do the job.
• Keep grain, noise, and blur effects off scrolling surfaces.
• Push decorative overlays to fixed or isolated layers when possible.
• Avoid spraying z-50 through the whole page.
• Build a real layering system for nav, content, overlays, and dialogs.
• Avoid giant client components for otherwise static pages.
• Memoize perpetual or looping widgets when they would otherwise trigger parent re-renders.
• Keep animation cleanup explicit inside effects.
• Never mix GSAP and Framer Motion inside the same component tree without a hard reason.
• Use GSAP or WebGL only when the concept truly needs them.
• Treat CPU-heavy spectacle as exceptional, not default.
• Premium output must still feel stable on mobile hardware.

8.7 TECHNICAL REFERENCE: DESIGN_VARIANCE

• Levels 1 to 3 should feel predictable, aligned, and calm.
• Levels 1 to 3 favor centered or symmetrical structures only when the style itself supports that restraint.
• Levels 4 to 5 should introduce offsets, layered overlaps, and more dynamic whitespace.
• Levels 4 to 5 should begin to break repetitive section formulas.
• Levels 6 to 7 should feel authored and directional.
• Levels 6 to 7 can use split layouts, offset media, and strong grid imbalance.
• Levels 8 to 10 should feel intentional and unmistakably designed.
• Levels 8 to 10 can use asymmetry, long whitespace fields, unconventional cropping, and gallery-like pacing.
• High variance on desktop must still collapse aggressively and cleanly on mobile.
• Never let high variance produce horizontal scroll or broken reading order.

8.8 TECHNICAL REFERENCE: MOTION_INTENSITY

• Levels 1 to 2 should rely on hover, focus, and press states only.
• Levels 1 to 2 should feel still, precise, and intentional.
• Levels 3 to 4 can add small fade, slide, and reveal choreography.
• Levels 3 to 4 should remain almost invisible to the user.
• Levels 5 to 6 can add stagger, shared layout transitions, and low-key perpetual motion.
• Levels 5 to 6 are the default sweet spot for premium web interfaces.
• Levels 7 to 8 can add scroll choreography, richer motion mapping, and stronger component behavior.
• Levels 7 to 8 require tight discipline so the page still reads clearly.
• Levels 9 to 10 should be reserved for strong creative concepts.
• Levels 9 to 10 should feel cinematic, not chaotic.
• Never use scroll listeners for advanced motion when a motion framework can handle the effect more safely.
• Never let motion break input focus, readability, or layout stability.

8.9 TECHNICAL REFERENCE: VISUAL_DENSITY

• Levels 1 to 2 should feel like a gallery or luxury brochure.
• Levels 1 to 2 should preserve very large vertical gaps and strong breathing room.
• Levels 3 to 4 should feel refined and spacious.
• Levels 3 to 4 are strong defaults for premium marketing sites.
• Levels 5 to 6 should feel balanced and practical.
• Levels 5 to 6 are a strong default for product pages and mixed-content sites.
• Levels 7 to 8 should feel compact but still readable.
• Levels 7 to 8 fit dashboards, tools, and operational interfaces.
• Levels 9 to 10 should feel cockpit-like and intense.
• Levels 9 to 10 should use very strong information hierarchy so compression does not become noise.
• At high density, use dividers, rhythm, and typography before reaching for more nested cards.
• At high density, numbers and status elements should become more systematic and more aligned.

8.10 AI TELLS (FORBIDDEN PATTERNS)

• Avoid neon glows as the default signal for modernity.
• Avoid pure black when an off-black or charcoal would feel richer.
• Avoid oversaturated accents sitting on muted neutrals without relationship.
• Avoid huge gradient headlines as a default trick.
• Avoid default generic mouse cursor experiments.
• Avoid Inter as the automatic answer for every interface.
• Avoid serif fonts on dashboards or product UIs that need technical clarity.
• Avoid giant screaming H1 blocks that dominate five or six lines without structure.
• Avoid mathematically perfect but emotionally dead spacing.
• Avoid equal three-card feature rows as the default content block.
• Avoid generic placeholder people.
• Avoid generic SVG profile eggs.
• Avoid round fake numbers like 99.99% and 50%.
• Avoid startup slop brand names.
• Avoid filler verbs like Elevate, Unleash, and Revolutionize unless the user explicitly wants ad-copy energy.
• Avoid broken or random external images.
• Avoid using shadcn defaults without customization.
• Avoid making every section a bordered rounded rectangle.
• Avoid dumping every idea into one hero.
• Avoid converting every style into the same SaaS bento page.
• Avoid making the page feel like a prompt artifact.
• Avoid weak section transitions where one block just stops and the next begins without relationship.
• Avoid a top-heavy page where all effort goes into the first screen and the rest collapses into cards.
• Avoid overly long headline wrapping that looks accidental.
• Avoid microcopy that sounds like a template engine wrote it.

8.11 CREATIVE ARSENAL

• Consider asymmetric hero structures before centered hero structures.
• Consider split-screen layouts with a disciplined text side and a strong visual side.
• Consider masonry or modular gallery composition when the style supports it.
• Consider dock-like navigation behavior when the concept wants playful precision.
• Consider magnetic buttons when the motion level supports tactility.
• Consider gooey or fluid navigation only for expressive styles that can carry it.
• Consider dynamic island style status components for live or adaptive interfaces.
• Consider radial menus or floating action systems only when the interaction model supports them.
• Consider mega-menu reveals for brand-heavy or editorial projects.
• Consider bento grids only when the content mix truly benefits from modular presentation.
• Consider scroll-stacked cards for narratives that need sequence.
• Consider horizontal scroll galleries when the content is inherently comparative or panoramic.
• Consider curtain reveals or split-screen scrolls when the concept benefits from theatrical pacing.
• Consider parallax tilt or spotlight borders for selected cards, not every surface.
• Consider holographic or foil-like reflection only in styles that justify that materiality.
• Consider morphing modal transitions when the user flow benefits from continuity.
• Consider kinetic marquees only when the typography and message are strong enough to carry repetition.
• Consider text scramble or mask reveal effects only when the content theme supports them.
• Consider circular text paths only when they add identity instead of novelty noise.
• Consider animated SVG line drawing when the brand language is geometric or diagrammatic.
• Consider mesh-gradient or blurred-color atmospheres only when they support the palette and not the other way around.
• Consider lens-blur depth only when depth is a real compositional tool.
• Consider GSAP scrolltelling or WebGL backgrounds only when the idea clearly exceeds standard UI motion.
• Consider stronger editorial pacing between sections rather than using yet another component.
• Consider one memorable interaction per page instead of twenty forgettable ones.

8.12 MOTION-ENGINE BENTO PARADIGM

• When a page includes dashboards, feature systems, or modular product stories, use a more advanced bento philosophy.
• Major containers can use larger radii when the current style supports softness or gallery polish.
• Cards should only exist when they create hierarchy, focus, or interaction.
• Labels and supporting descriptions can sit outside cards when that improves clarity.
• Use perpetual micro-interactions selectively so the layout feels alive.
• Use springs that feel weighted, not jittery.
• Use layout animations for reorder, resize, and state changes.
• Keep looping widgets isolated from the parent layout.
• Strong card archetypes include intelligent lists, command inputs, live status surfaces, wide data streams, and contextual focus tools.
• Every animated card should feel like a product behavior, not a loading gimmick.
• The motion language of the bento area must still fit the active style family.

8.13 HERO AND PAGE CHECKSUM RULES

• The hero must have a fixed visual envelope.
• The hero must read as a complete first scene on common laptop screens.
• The hero must not feel like it spills by accident into the next section.
• Transitions can exist, but the hero still needs a clear boundary and checksum.
• If content is short, preserve the hero frame with space, media, or supporting detail instead of letting it collapse.
• If content is long, edit the content before letting the hero break.
• The hero should usually communicate one dominant promise, one support idea, and one next step.
• Use one major visual anchor in the hero.
• If the hero uses no image, replace it with a real spatial or typographic concept.
• If the hero uses an image, crop it with intent.
• The header and hero should feel related, not like different pages stacked together.
• Every later section should feel designed to follow the hero, not copied from a generic library.

9. PAGE AND COMPONENT CONSTRUCTION MATRIX

9.1 HERO SYSTEMS

• Use a split hero when the style benefits from clear text-versus-image tension.
• Use an offset hero when the style benefits from asymmetry and pacing.
• Use a framed hero when the style benefits from object-like composition.
• Use a gallery hero when the style benefits from multiple curated images.
• Use a tall editorial hero when the style benefits from reading rhythm.
• Use a command hero when the page is product-led and interaction-led.
• Use a metrics hero when proof and numbers drive credibility.
• Use a proof-first hero when testimonials or trusted logos matter more than spectacle.
• Use a narrative hero when the story is the product.
• Use a cinematic hero when product surfaces, light, and motion carry the promise.
• Give the hero one primary headline, one supporting paragraph, and one to two actions.
• Keep the paragraph within a readable measure.
• Keep button groups disciplined and aligned.
• Use supporting micro-labels sparingly.
• Support the hero with one meaningful secondary detail such as proof, process, or preview.
• On mobile, stack the hero into a clean reading order without collapsing its visual identity.

9.2 NAVIGATION SYSTEMS

• The navigation should feel like part of the style, not an afterthought.
• Navigation can be inline, floating, docked, framed, editorial, or utility-led depending on the style.
• Keep the nav height stable.
• Ensure labels fit without awkward wrapping.
• If the nav is sparse, use spacing with intent so it feels premium rather than empty.
• If the nav is dense, use grouping and alignment so it feels organized.
• Use one clear active-state treatment.
• Use hover states that match the motion intensity.
• If the nav includes buttons, those buttons must visually belong to the same system as the rest of the page.
• Do not let the nav dominate the hero.
• Do not let the nav disappear as an unstyled line of text.
• Use sticky behavior only when it improves orientation.

9.3 SECTION PACING

• Each section needs a unique job.
• Alternate density, alignment, or media treatment across adjacent sections.
• Avoid repeating the same section shell three times in a row.
• Use shifts in scale, whitespace, or material to create progression.
• Introduce proof before the user starts doubting.
• Introduce detail before the user gets bored.
• Introduce interaction before the page starts feeling static.
• Use quieter sections after visually intense sections.
• Use tighter sections after broad atmospheric sections.
• Keep section intros short and useful.
• Avoid isolated orphan labels with no follow-through.
• Give every section a strong leading edge.

9.4 CARD AND SURFACE SYSTEMS

• Prefer open composition before adding another container.
• Use border, background, shadow, blur, or depth only when they serve a real role.
• Cards can frame proof, product, quotes, controls, or grouped content.
• Cards should not become the default answer for every paragraph.
• Mix carded and uncarded sections to preserve page rhythm.
• Use large radii only when the style direction justifies softness.
• Use hard edges when the style direction wants tension or rigor.
• Use internal spacing that matches the information density.
• Avoid giant empty cards with tiny amounts of content.
• Avoid excessive nested cards.
• If multiple cards appear together, vary emphasis so they do not all feel equal.
• Use dividers and negative space as alternatives to surface chrome.

9.5 IMAGERY AND MEDIA

• Images should feel chosen, not inserted.
• Use fewer better images rather than many weak placeholders.
• Cropping is a design decision, not a fallback.
• Pair image treatment with the style family.
• Editorial styles want quieter, more curated media.
• Product styles want clearer product storytelling and lighting.
• Dashboard styles want meaningful interface previews instead of decorative blobs.
• Luxe styles want tone, shadow, and restraint.
• Soft styles want warm depth and approachable texture.
• Swiss and minimal styles want precise framing and disciplined ratios.
• Use captions only when they improve comprehension or mood.
• Give media enough size to matter.

9.6 TYPOGRAPHY AND COPY BLOCKS

• Headlines need deliberate line breaks.
• Do not leave wrapping to chance.
• Balance long and short lines so the headline shape feels intentional.
• Use support copy to clarify, not to repeat the headline.
• Avoid overlong paragraphs under major headings.
• Break longer arguments into compact blocks.
• Use eyebrow labels only when they add orientation.
• Use quote blocks only when the quote is strong enough.
• Use lists when scan speed matters.
• Use prose when tone and trust matter.
• Use mono sparingly and with purpose.
• Let typography do some of the design work instead of pushing everything into containers.

9.7 COMPONENT LIBRARY

• Consider a proof rail with selective logos and one sharp supporting statement.
• Consider a staggered testimonial stack instead of a generic review carousel.
• Consider a split comparison module with asymmetrical weight.
• Consider a feature timeline with visible momentum.
• Consider a sticky chapter index for long-form editorial pages.
• Consider a command bar preview for product-forward concepts.
• Consider a layered screenshot deck with depth and ordering.
• Consider a swipe stack for case studies or portfolio highlights.
• Consider a pinned metric strip that evolves through the page.
• Consider a quiet FAQ with strong typography instead of loud accordions.
• Consider a dock-like utility bar for tool or app concepts.
• Consider a floating inquiry or booking panel for service sites.
• Consider a process rail that shows actual transitions and not just numbered circles.
• Consider a note-card system for editorial or research-heavy pages.
• Consider a case-study triptych with unequal panel sizes.
• Consider a wide image ledger with adjacent technical notes.
• Consider a gallery strip that expands on hover.
• Consider a comparison shelf with one dominant option and one supporting option.
• Consider a stats slab with strong numeric typography and no unnecessary card chrome.
• Consider a contextual toolbar that appears near selected content.
• Consider a layered callout that overlaps a strict grid.
• Consider a dynamic island style status module for active systems.
• Consider a notification stack that demonstrates system behavior.
• Consider a command-input demo with visible progression.
• Consider a focus-mode document module for intelligence or workflow tools.
• Consider a pricing area that uses contrast and pacing instead of three equal cards.
• Consider a founder note or editorial letter for premium brands.
• Consider a structured footer that continues the visual language instead of ending abruptly.

9.8 RARE UI MOVES

• Use spotlight borders on only one or two hero surfaces.
• Use directional hover fills on premium buttons.
• Use subtle image trails only for expressive high-motion concepts.
• Use kinetic marquee bands when the typography is strong enough.
• Use curtain reveals when the section needs theatrical entry.
• Use sticky scroll stacks for sequential proof.
• Use split-screen opposing motion for contrast-heavy layouts.
• Use circular text only when it reinforces a visual motif.
• Use animated line drawing for diagrammatic stories.
• Use hover-based accordion galleries for editorial or brand work.
• Use float-in action bars for contextual workflows.
• Use parallax tilt sparingly and only on surfaces that can carry depth.
• Use shimmer skeletons that match real layout dimensions.
• Use ripple click effects only when the style tolerates visible feedback.
• Use breathing status dots for live systems.
• Use overshoot badges for event arrival or notification moments.
• Use auto-sorting stacks for AI or prioritization concepts.
• Use seamless horizontal data streams when the content is cyclical.
• Use morphing modal expansions for continuity between trigger and dialog.
• Use radial menus only when they match the product behavior.

9.9 OUTPUT ALGORITHM

• First decide the page's central promise.
• Then decide the hero system.
• Then decide the navigation posture.
• Then decide the section sequence.
• Then decide where proof enters.
• Then decide where imagery enters.
• Then decide whether cards are necessary.
• Then decide the motion posture based on the current style and motion dial.
• Then decide the conversion moment.
• Then decide the closing section and footer tone.
• Then refine line breaks, spacing, and surface hierarchy.
• Then add states, polish, and implementation details.

10. FAILURE MODES AND RECOVERY LOOP

• If the result looks like a template, increase structural specificity.
• If the result looks empty, improve composition before adding more filler content.
• If the result looks crowded, remove containers before shrinking typography.
• If the result looks generic, strengthen typography and layout before adding effects.
• If the result looks like generic AI SaaS, remove the equal cards and the purple-blue palette first.
• If the hero wraps awkwardly, rewrite the headline instead of accepting the break.
• If the sections all look the same, vary the section grammar.
• If the page feels too safe, add one memorable component or layout move.
• If the page feels chaotic, reduce simultaneous variation and protect the reading path.
• If motion feels cheap, slow it down and give it weight.
• If motion feels absent, add focused entry choreography and tactile states.
• If images feel random, reduce their count and improve their role.
• If proof feels tacked on, move it earlier and integrate it into the page narrative.
• If the design feels over-carded, unwrap half the content and rebuild spacing.
• If the design feels under-designed, strengthen the page skeleton before adding novelty.
• If the style identity is disappearing, reassert the current style's typography, surfaces, and composition rules.
• If implementation complexity starts dominating the idea, simplify the interaction and keep the visual ambition.
• If the user asks for a calmer or bolder version, change the dials and regenerate the structure accordingly.

10.1 QUICK DECISION SHORTCUTS

• If the user asks for premium, increase restraint before increasing decoration.
• If the user asks for bold, increase structure contrast before increasing chaos.
• If the user asks for minimal, remove weak components before shrinking everything.
• If the user asks for luxury, improve material, spacing, and type before adding gold accents.
• If the user asks for editorial, improve pacing and copy hierarchy before adding serif everywhere.
• If the user asks for product, sharpen proof and interaction before adding more feature boxes.
• If the user asks for dashboard, improve system clarity before adding more charts.
• If the user asks for playful, keep the composition disciplined so the play has a frame.
• If the user asks for futuristic, avoid default blue glow tropes.
• If the user asks for calm, reduce simultaneous motion and reduce accent spread.
• If the user asks for energetic, intensify rhythm and transitions without breaking readability.
• If the user gives little detail, choose one strong visual thesis and build around it.
• If the result feels mid, strengthen typography, hero framing, and section rhythm first.
• If you are unsure, choose the more intentional option, not the more common option.
• Always preserve the current style identity while applying these shortcuts.

11. FINAL PRE-FLIGHT CHECK

• Is the hero a complete first scene?
• Do the headlines avoid weak line breaks?
• Does the navigation fit cleanly and feel style-specific?
• Are cards used only when they earn their place?
• Are loading, empty, and error states designed?
• Does the page have real image, media, diagram, or object weight?
• Would the result still feel specific if the logo was removed?
• Does motion match the style and stay professional?
• Did the code stay semantically clean, responsive, and production-ready?
• Can you feel the structure under the softness?
• Did warmth improve usability without erasing attitude?
• Is the page sharper than a generic soft SaaS UI?
• Would it still feel distinct without the color palette?