# Taste-Skill Hero Discipline Rules for Headlines, Subtext, and CTAs > Discover taste-skill hero discipline rules: headlines 2 lines, subtext 20 words, and limited CTAs. Learn how to optimize content for the initial viewport and avoid scrolling for better user experience. - Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill) - Tags: best-practices - Published: 2026-05-31 --- **The taste-skill design system enforces strict hero discipline rules that limit headlines to 2 lines, subtext to 20 words, and CTAs to one primary and one secondary button, all fitting within the initial viewport without scrolling.** The **taste-skill** repository by Leonxln defines mandatory constraints for landing-page hero sections in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md). These **hero discipline rules** are applied *before* code generation and constitute a **Pre-Flight Fail** scenario if violated, ensuring every hero remains concise, readable, and conversion-focused. ## Headline Constraints Headlines in the taste-skill system face strict spatial limitations to guarantee immediate comprehension. ### Line Length and Font Scaling - **Maximum 2 lines** on desktop viewports - **Font-scale hierarchy**: Use `text-4xl md:text-5xl lg:text-6xl` for most headlines; deploy larger scales only when the headline contains 3–5 words - **Width constraints**: Apply `max-w-2xl` or similar utilities to force line breaks at optimal reading lengths According to lines 236–238 in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), these constraints guarantee the headline fits within the initial viewport and remains scannable. Overly long headlines become a font-size issue rather than a copy-length issue. ## Subtext Limitations The supporting copy beneath headlines must deliver a clear value proposition without demanding excessive reading time. ### Word Count and Line Count - **Maximum 20 words** total - **Maximum 3–4 lines** on desktop displays - **Overflow handling**: If the copy exceeds these limits, either reduce the font scale or cut the text; verbosity indicates a vague concept As implemented in the Leonxlnx/taste-skill codebase, this 20-word limit forces clarity. If a value proposition cannot be expressed within these boundaries, the underlying concept requires refinement rather than additional explanation. ## CTA Guidelines Call-to-action buttons follow visibility and uniqueness constraints to prevent decision paralysis. ### Visibility and Quantity Limits - **Above-the-fold requirement**: All CTAs must be **visible without scrolling** - **Button quota**: Only **one primary** and **at most one secondary** CTA per hero section - **Contrast standards**: All buttons must meet **WCAG AA** requirements (minimum 4.5:1 contrast ratio) ### Label Length and Intent Uniqueness - **Single-line labels**: Button text must fit on one line, with approximately 3 words maximum for primary actions - **No duplicate intent**: Semantically identical actions count as duplicates. For example, "Get in touch", "Contact us", and "Let's talk" represent the same "contact" intent and may appear only once on the page These rules in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) (lines 226–228) prevent visual clutter and contradictory navigation paths. ## Overall Hero Layout Constraints The taste-skill system governs the entire hero container, not just its text elements. ### Viewport and Padding Limits - **Initial viewport fit**: The hero must not extend below the first screenful of content - **Top-padding cap**: Limited to `pt-24` (approximately 6rem) on desktop to prevent excessive vertical floating ### Element Stack Restrictions - **Maximum 4 text elements** in the hero stack: 1. Optional eyebrow/brand strip 2. Headline 3. Subtext 4. CTA group Additional elements—tiny taglines, trust badges, pricing teasers, feature lists, or avatar rows—must appear in sections **below** the hero. Lines 239–246 in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) enforce this discipline to eliminate information overload at first glance. ## Implementation Example Below is a minimal Tailwind-styled React component that satisfies all taste-skill hero discipline rules: ```tsx // components/Hero.tsx "use client"; export default function Hero() { return (
{/* Optional eyebrow */}

LAUNCH

{/* Headline – max 2 lines, proper scale */}

AI-Powered Design Assistant That Writes Code

{/* Subtext – ≤20 words, ≤4 lines */}

Generate production-ready landing pages in seconds, with strict accessibility, motion, and visual-density controls.

{/* CTA buttons – primary + optional secondary, one-line labels */}
Try Demo Read Docs
); } ``` **Key compliance points demonstrated:** - `pt-20` maintains padding below the `pt-24` maximum - The headline uses the prescribed font-scale range with `max-w-2xl` enforcing the two-line limit - Subtext stays under 20 words and uses `max-w-xl` to control line count - CTA labels ("Try Demo", "Read Docs") remain on single lines via `whitespace-nowrap` - Only one primary (`bg-indigo-600`) and one secondary (`border-gray-300`) CTA appear, satisfying the no-duplicate-intent rule ## Summary - **Headlines** are capped at 2 lines with specific responsive font scales (`text-4xl` through `text-6xl`) - **Subtext** must express the value proposition in ≤20 words and ≤4 lines - **CTAs** require above-fold visibility, maximum one-primary/one-secondary pairing, single-line labels (~3 words), and unique intent per button - **Layout constraints** enforce `pt-24` maximum top-padding and a 4-element text stack limit - Violations trigger a **Pre-Flight Fail** in the taste-skill system, blocking code generation until resolved ## Frequently Asked Questions ### What happens if I violate the taste-skill hero discipline rules? The taste-skill system treats these constraints as **hard requirements**. Any violation results in a **Pre-Flight Fail** that stops the skill from completing code generation. You must resolve the conflict—either by shortening copy, adjusting padding, or removing excess CTAs—before the build process continues. ### Can I use more than two CTA buttons in a hero section? No. The rules in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) explicitly limit hero CTAs to **one primary** and **at most one secondary** button. Additional calls-to-action must appear in subsequent page sections. This restriction prevents choice overload and maintains the above-the-fold visibility requirement. ### How does taste-skill handle long headlines that need larger font sizes? The system permits larger font scales only when the headline contains **3–5 words**. For longer headlines, you must use the standard scale (`text-4xl md:text-5xl lg:text-6xl`) and rely on `max-width` utilities to enforce the 2-line maximum. This approach prevents oversized typography from dominating the viewport. ### Are the hero discipline rules configurable or optional? These rules are **mandatory** for all hero sections generated by the taste-skill system unless the project brief explicitly overrides them (for example, an editorial launch may permit a centered hero layout). The constraints are context-aware but strictly enforced at lines 236–246 in the source file.