Hero Section Discipline in taste-skill: 9 Architecture Rules for High-Converting Headers

The taste-skill design system enforces nine strict architectural rules for hero sections—including viewport-fit constraints, four-element stack limits, and mandatory real visual assets—to prevent "AI-default" layouts that overflow viewports or dilute conversion intent.

Hero section discipline in taste-skill represents a context-aware, architecture-first approach to above-the-fold design. These constraints, defined in skills/taste-skill/SKILL.md, are applied during the design-read phase before any code generation occurs, ensuring that every hero remains readable, performant, and focused on a single value proposition.

Viewport and Layout Constraints

Keep the Hero Within the Initial Viewport

According to the taste-skill source code, the hero must stay within the initial viewport without forcing scroll. Specifically, headlines must not exceed 2 lines, sub-text must stay under 20 words (approximately 3–4 lines), and CTAs must be visible immediately upon page load as documented in Lines 236–237. This guarantees that the primary value proposition and conversion action are seen instantly.

Enforce the Top-Padding Cap

Desktop top padding may not exceed pt-24 (approximately 6rem). If additional vertical space is required, the rules specify increasing font size or asset dimensions rather than padding, as noted in Lines 238–239. This prevents the content from "floating" halfway down the screen, which taste-skill identifiers interpret as a layout bug.

Typography and Content Architecture

Font-Scale Discipline

Taste-skill prescribes strict Tailwind ranges for type sizing. Most heroes should use text-4xl md:text-5xl lg:text-6xl. The larger text-6xl md:text-7xl scale is reserved exclusively for headlines containing 3–5 words. A headline that requires 4 lines is always considered a font-size error according to Lines 237–238.

The Four-Element Stack Limit

The hero section discipline enforces a maximum of four text elements to maintain focus:

1. Optional eyebrow or brand strip
2. Headline
3. Sub-text
4. CTAs (1 primary + 1 secondary)

Additional elements such as trust micro-strips, pricing teasers, feature bullet lists, or avatar rows must be placed below the hero section. This rule from Lines 239–245 prevents the common "feature dump" anti-pattern.

Visual Assets and Conversion Logic

Mandate Real Visual Assets

Every hero must contain an actual image—whether generated, stock, or a real screenshot—as specified in Lines 296–298. Text combined with gradient blobs is explicitly flagged as a placeholder and fails pre-flight validation. Real visuals improve Largest Contentful Paint (LCP) performance and provide necessary context and credibility.

Eliminate Duplicate CTA Intent

The system enforces single intent per CTA label across the entire page. Only one instance of "Contact," "Sign-up," or similar conversion actions may appear; duplicate labels trigger a pre-flight failure per Lines 227–228. This concentrates the user's next step and reduces decision paralysis.

Logo Wall Placement

"Used by" or "Trusted by" logo clusters must be positioned under the hero section, not inside it, as mandated in Lines 246–247. This separation keeps the hero focused on the core value proposition while reserving social proof for a distinct section.

Motion and Accessibility Requirements

Motion Consistency Rules

When MOTION_INTENSITY exceeds 4, the hero must include at least one motion cue—such as an entry transition or hover animation—and must respect prefers-reduced-motion accessibility preferences according to Lines 359–361. This ensures that declared motion intensity is actually delivered while remaining accessible.

WCAG Contrast Standards

Hero copy must meet WCAG AA contrast standards (AAA for large text), and button text must remain readable against its background as documented in Lines 582–586. These constraints are validated during the design-read phase before component generation.

Implementation Example

Below is a minimal React and Tailwind component that satisfies every hero section discipline rule in taste-skill. Comments reference specific architectural constraints.

"use client";

import Image from "next/image";

export default function Hero() {
  return (
    <section
      className="
        min-h-[100dvh]               /* Viewport fit: stays within initial viewport */
        flex flex-col items-center justify-center
        bg-neutral-50 dark:bg-neutral-900
        pt-24                       /* Top-padding cap: never exceeds 6rem */
        px-6 md:px-12
        text-center
      "
    >
      {/* Optional eyebrow - counts as stack element 1 */}
      <p className="text-[11px] uppercase tracking-[0.18em] text-gray-500">
        AI‑Enhanced Design
      </p>

      {/* Headline: max 2 lines, proper font-scale discipline */}
      <h1 className="mt-4 text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-100">
        Build a Landing Page That Converts
      </h1>

      {/* Sub-text: ≤ 20 words, stack element 3 */}
      <p className="mt-3 max-w-[65ch] text-base text-gray-600 dark:text-gray-300">
        Instantly generate production‑ready designs, complete with real images,
        motion, and accessibility‑ready components.
      </p>

      {/* CTAs: Single primary intent (Get Started), secondary optional (See Demo) */}
      <div className="mt-6 flex gap-4">
        <a
          href="#start"
          className="
            inline-block rounded-md bg-indigo-600 px-6 py-3
            text-sm font-medium text-white hover:bg-indigo-700
            focus-visible:outline focus-visible:outline-2
            focus-visible:outline-offset-2 focus-visible:outline-indigo-600
          "
        >
          Get Started
        </a>
        <a
          href="#demo"
          className="
            inline-block rounded-md border border-gray-300 px-6 py-3
            text-sm font-medium text-gray-700 hover:bg-gray-100
          "
        >
          See Demo
        </a>
      </div>

      {/* Real visual asset placeholder - must be populated with actual image */}
      <div className="mt-12 relative w-full max-w-4xl aspect-video">
        <Image
          src="/hero-screenshot.jpg"
          alt="Product interface preview"
          fill
          className="object-cover rounded-lg shadow-xl"
          priority
        />
      </div>
    </section>
  );
}

This implementation enforces the viewport fit with min-h-[100dvh], respects the pt-24 padding cap, uses the prescribed text-4xl to text-6xl font scale, maintains the four-element stack limit, avoids duplicate CTA intents, and includes a real image asset rather than gradient placeholders.

Summary

• Viewport boundaries: Heroes must fit within the initial viewport (min-h-[100dvh]) with headlines ≤ 2 lines and sub-text ≤ 20 words.
• Typography limits: Use text-4xl through text-6xl for most headlines; reserve text-7xl for 3–5 word headlines only.
• Stack discipline: Maximum four elements (eyebrow, headline, sub-text, CTAs); no feature lists or trust badges inside the hero.
• Asset requirements: Real images are mandatory; gradient blobs or text-only layouts fail validation.
• Conversion focus: Single CTA intent per page, with logo walls positioned below the fold.
• Motion and accessibility: Respect MOTION_INTENSITY thresholds and WCAG AA contrast minimums.

Frequently Asked Questions

What happens if a hero section violates the stack discipline rule in taste-skill?

If the system detects more than four text elements (eyebrow, headline, sub-text, CTAs) or prohibited elements like pricing teasers inside the hero, it automatically trims the copy, removes excess content, or prompts the user to clarify intent before generating code. This enforcement occurs during the design-read phase defined in Section 0 of skills/taste-skill/SKILL.md.

Why does taste-skill restrict top padding to pt-24 in hero sections?

The top-padding cap prevents content from appearing to "float" halfway down the viewport, which taste-skill identifies as a layout bug that reduces conversion visibility. When additional vertical space is needed, the system requires increasing font sizes or image dimensions rather than padding to maintain proper visual density.

Are animated gradient backgrounds allowed in taste-skill hero sections?

Standard gradient blobs without real imagery are considered placeholders and violate the "real visual asset" rule. However, skills/minimalist-skill/SKILL.md permits specific background-motion exceptions—such as ambient gradients—provided they serve as decorative layers behind actual content and do not replace required hero images.

How does taste-skill handle motion accessibility in hero sections?

When MOTION_INTENSITY exceeds 4, the hero must implement at least one motion cue (entry transitions or hover states) while strictly respecting prefers-reduced-motion media queries. This ensures animations enhance the experience for users who want them without creating barriers for those with vestibular disorders.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}