# Hero Section Discipline in taste-skill: 9 Architecture Rules for High-Converting Headers > Master taste-skill hero section discipline with 9 architecture rules. Prevent AI-default layouts and boost conversions with viewport constraints, element limits, and real assets. Learn best practices now. - Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill) - Tags: best-practices - Published: 2026-06-05 --- **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`](https://github.com/Leonxlnx/taste-skill/blob/main/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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L236). 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L238). 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L237). ### 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L239) 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L296). 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L227). 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L246). 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L359). 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](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L582). 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. ```tsx "use client"; import Image from "next/image"; export default function Hero() { return (
{/* Optional eyebrow - counts as stack element 1 */}

AI‑Enhanced Design

{/* Headline: max 2 lines, proper font-scale discipline */}

Build a Landing Page That Converts

{/* Sub-text: ≤ 20 words, stack element 3 */}

Instantly generate production‑ready designs, complete with real images, motion, and accessibility‑ready components.

{/* CTAs: Single primary intent (Get Started), secondary optional (See Demo) */}
Get Started See Demo
{/* Real visual asset placeholder - must be populated with actual image */}
Product interface preview
); } ``` 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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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.