# Taste Skill Hero Layout Rules and the 2-Line Iron Rule Explained

> Master Taste Skill hero layout rules and the 2-line iron rule. Ensure your hero headlines fit above the fold with this essential guide for effective UI design.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: deep-dive
- Published: 2026-06-06

---

**The "two-line iron rule" in Taste Skill is a hard constraint that limits hero headlines to a maximum of two lines on desktop, forcing font-size discipline to ensure the entire hero section fits above the fold without scrolling.**

Taste Skill, an open-source framework maintained in the `Leonxlnx/taste-skill` repository, enforces a strict **hero-section discipline** that governs how landing pages must render above the fold. These constraints—codified in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md)—guarantee that generated pages deliver a clean, immediately actionable first impression.

## The Two-Line Iron Rule

The cornerstone of Taste Skill's hero system is the **two-line iron rule**. This specification dictates that the headline font-scale is bound to a maximum of two lines of text on desktop viewports.

According to the source in [SKILL.md L236-L238](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L236), if a headline requires more than two lines, you must shrink the font-size or cut the copy. A four-line headline constitutes a *font-size error*, not a copy-length problem. This rule is non-negotiable—violating it triggers a "Pre-Flight Fail" that blocks generation.

## Complete Hero Layout Rules

Beyond the two-line constraint, Taste Skill defines a comprehensive architecture for hero sections. All rules below are **hard constraints**; breaking any causes the generator to abort or request user clarification.

### Viewport Fit Requirements

The entire hero must be visible without scrolling. This means:

- Headline ≤ 2 lines
- Sub-text ≤ 20 words **and** ≤ 3-4 lines
- CTAs must be immediately visible

This requirement appears in [SKILL.md L236](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L236).

### Font-Scale Discipline

Taste Skill prescribes sensible size ranges based on headline length. The default range is `text-4xl md:text-5xl lg:text-6xl` (Tailwind classes). Only use larger scales like `text-6xl md:text-7xl` when the headline contains exactly 3-5 words, as noted in [SKILL.md L237-L238](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L237).

### Top-Padding Cap

Vertical padding must not push content below the fold. The maximum allowed top padding is `pt-24` (approximately 6rem) on desktop. If more breathing room is needed, increase font size or image dimensions instead of padding, per [SKILL.md L238-L239](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L238).

### Stack Discipline (Max 4 Text Elements)

A hero section can contain only four textual items total, specified in [SKILL.md L239-L244](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L239):

1. **Eyebrow** or brand strip (optional)
2. **Headline** (≤ 2 lines)
3. **Sub-text** (≤ 20 words, ≤ 4 lines)
4. **CTAs** (maximum 1 primary + 1 secondary)

### Banned Elements Inside the Hero

Certain UI patterns are prohibited from appearing inside the hero flex row. According to [SKILL.md L244-L246](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L244), these include:

- Tiny taglines below CTAs
- Micro-trust strips
- Pricing teasers
- Feature bullet lists
- Avatar rows
- "Used-by" logo walls

These elements must be relocated to sections *under* the hero.

### Navigation Constraints

The navigation bar must render on a single line and remain ≤ 80px tall on desktop to avoid consuming excessive viewport real estate, as defined in [SKILL.md L247-L248](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L247).

### CTA Intent Uniqueness

Only one CTA per intent (e.g., "contact", "sign-up", "portfolio") may appear on a page. Duplicate intents constitute a pre-flight failure, referenced in [SKILL.md L227-L228](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L227).

### Real Visual Requirement

The hero must contain a genuine image—either generated or sourced. Pure-gradient or text-only placeholder heroes are considered incomplete and must be replaced before shipping, per [SKILL.md L296-L298](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L296).

## Implementing the Rules in Code

The following React components demonstrate how to implement these constraints using Tailwind CSS, the default styling framework in Taste Skill.

### Conforming Hero Component

This component respects the two-line iron rule, viewport fit, and stack discipline:

```tsx
/* File: src/components/Hero.tsx */
"use client";

import Image from "next/image";

type HeroProps = {
  /** URL of the hero image (must be real, not a placeholder) */
  imageUrl: string;
  /** Optional eyebrow / brand strip (max 1) */
  eyebrow?: string;
  /** Headline – must stay ≤ 2 lines on desktop */
  headline: string;
  /** Sub-text – ≤ 20 words, ≤ 4 lines */
  subtext: string;
  /** Primary CTA (required) */
  primaryCta: { label: string; href: string };
  /** Optional secondary CTA */
  secondaryCta?: { label: string; href: string };
};

export function Hero({
  imageUrl,
  eyebrow,
  headline,
  subtext,
  primaryCta,
  secondaryCta,
}: HeroProps) {
  return (
    <section className="relative min-h-[100dvh] flex flex-col items-center justify-center pt-24 text-center">
      {/* Hero image – full-bleed, priority-loaded */}
      <Image
        src={imageUrl}
        alt=""
        fill
        priority
        className="object-cover -z-10"
      />

      {/* Stack – max 4 text elements */}
      <div className="max-w-3xl px-4">
        {eyebrow && (
          <p className="text-xs uppercase tracking-wider text-gray-500">
            {eyebrow}
          </p>
        )}

        {/* Headline – two-line iron rule */}
        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mt-2">
          {headline}
        </h1>

        {/* Sub-text */}
        <p className="mt-4 text-lg text-gray-600 max-w-prose">
          {subtext}
        </p>

        {/* CTA block – one primary, optional secondary */}
        <div className="mt-6 flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href={primaryCta.href}
            className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition"
          >
            {primaryCta.label}
          </a>
          {secondaryCta && (
            <a
              href={secondaryCta.href}
              className="border border-blue-600 text-blue-600 py-2 px-6 rounded-md hover:bg-blue-50 transition"
            >
              {secondaryCta.label}
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

```

**Key conformance points:**

- **Viewport fit**: `min-h-[100dvh]` ensures the hero occupies the initial viewport; padding is capped at `pt-24`.
- **Two-line iron rule**: The Tailwind scale `text-4xl md:text-5xl lg:text-6xl` matches the default sensible range for ≤ 2-line headlines.
- **Stack discipline**: The JSX renders only four textual elements maximum (`eyebrow`, `h1`, `p`, CTAs).
- **Real visual**: `next/image` with `priority` loading ensures a genuine image asset.

### Enforcing Sub-Text Limits Programmatically

To prevent accidental violations of the 20-word sub-text limit, implement a guard function:

```tsx
/* File: src/components/HeroWithWordGuard.tsx */
"use client";

import { Hero } from "./Hero";

function truncateSubtext(text: string, maxWords = 20) {
  const words = text.split(/\s+/);
  return words.length > maxWords ? words.slice(0, maxWords).join(" ") + "…" : text;
}

/* Example usage */
export function ExampleHero() {
  const sub = "Our AI-powered platform transforms your workflow, delivering faster insights, higher accuracy, and a seamless user experience.";
  return (
    <Hero
      imageUrl="/generated/hero-photo.png"
      eyebrow="AI-POWERED"
      headline="Accelerate Your Design Process"
      subtext={truncateSubtext(sub)}   // enforces ≤ 20 words
      primaryCta={{ label: "Get Started", href: "/signup" }}
    />
  );
}

```

The `truncateSubtext` helper enforces the word-count constraint at runtime, preventing pre-flight failures.

## Hard Constraints and Pre-Flight Failures

Taste Skill treats all hero layout rules as **hard constraints**. When the generator detects a violation—whether an excessive headline length, missing real imagery, or duplicate CTA intents—it aborts execution (a "Pre-Flight Fail") rather than producing non-compliant output. This architecture ensures that every generated page maintains the disciplined above-the-fold experience defined in the [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) specification.

## Summary

- The **two-line iron rule** strictly limits hero headlines to two lines on desktop, requiring font-size adjustments or copy editing to comply.
- The hero must fit entirely within the initial viewport (`min-h-[100dvh]`) with no scrolling required.
- Content is limited to **four text elements maximum**: optional eyebrow, headline (≤ 2 lines), sub-text (≤ 20 words, ≤ 4 lines), and CTAs (1 primary + 1 secondary).
- **Banned elements** include logo walls, pricing teasers, and feature lists inside the hero—these must appear below the fold.
- **Top padding** is capped at `pt-24` (6rem); navigation must remain ≤ 80px tall.
- All rules are enforced as hard constraints that trigger pre-flight failures if violated.

## Frequently Asked Questions

### What happens if a headline exceeds two lines in Taste Skill?

The generator triggers a "Pre-Flight Fail" and aborts. According to the specification in [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md), a headline wrapping to three or four lines indicates a font-size error, not a copy-length issue. You must either reduce the font-size (e.g., from `text-6xl` to `text-4xl`) or shorten the headline text to comply with the two-line iron rule.

### How many CTAs are allowed in a Taste Skill hero section?

The hero section permits a maximum of two CTAs: one primary and one secondary. Additionally, the **CTA intent uniqueness** rule prohibits duplicate intents across the entire page. For example, you cannot have two "sign-up" buttons or two "contact" links anywhere on the page, as defined in [SKILL.md L227-L228](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L227).

### Can I use a gradient background instead of an image in the hero?

No. The **real visual requirement** mandates that every hero contain a genuine image—either generated or sourced. Pure-gradient or text-only placeholder heroes are considered incomplete and will fail pre-flight checks until replaced with actual imagery, per [SKILL.md L296-L298](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L296).

### Where are the hero layout rules defined in the source code?

All hero layout rules, including the two-line iron rule, are defined in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) within the `Leonxlnx/taste-skill` repository. Specific line references include lines 236-248 for viewport fit, font-scale, and padding constraints, and lines 227-228 for CTA uniqueness requirements.