Strict Rules for Hero Section Layout, Typography, and Font Scaling in Taste Skill

The Taste Skill design system enforces hard constraints—maximum 2-line headlines, 20-word subtext limits, specific font-scale progressions, and a pt-24 padding cap—to guarantee hero content remains fully visible within the initial viewport.

The Leonxlnx/taste-skill repository codifies a rigid set of layout and typography rules in skills/taste-skill/SKILL.md that prevent hero section bloat and ensure immediate readability. These standards apply strict viewport boundaries, typographic scaling logic, and content hierarchy to maintain visual balance across devices.

Viewport and Content Constraints

The hero section must fit entirely within the initial viewport without requiring scroll. According to the source code in skills/taste-skill/SKILL.md at line 236, this imposes specific limits on text volume:

• Headline limit: Maximum 2 lines on desktop
• Sub-text limit: Maximum 20 words (approximately 3-4 lines)
• CTA visibility: Primary and secondary buttons must appear above the fold

If content exceeds these boundaries, the design system requires editing the copy or reducing font size rather than expanding the container height.

Font-Scale Discipline

Typography sizing is determined in conjunction with the hero image and follows a strict escalation path defined at line 237 of SKILL.md.

Standard progression (most headlines):

text-4xl md:text-5xl lg:text-6xl

Exception for short headlines (3-5 words only):

text-6xl md:text-7xl

Hard prohibitions:

• Never use text-7xl or text-8xl if the headline exceeds 6 words
• Never allow a 4-line headline; this is classified as a font-size error

The system treats font size and word count as interdependent variables—larger type requires shorter copy.

Top-Padding and Spacing Limits

Vertical spacing is capped to prevent content from floating midway down the screen. As documented at line 238, top padding cannot exceed pt-24 (~6rem) on desktop.

If the hero requires more vertical breathing room, the rules mandate increasing the font size or image dimensions rather than adding padding. Excessive padding is flagged as a layout bug because it pushes the value proposition below the immediate sight line.

Content Stack Discipline

The hero enforces a maximum of 4 text elements (line 239 of SKILL.md). The permitted stack includes:

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

All auxiliary text—including trust micro-strips, price teasers, feature lists, or tiny taglines—must reside below the hero boundary. This constraint ensures the primary value proposition dominates the initial view without clutter.

Implementation Example

The following Tailwind CSS markup satisfies all Taste Skill constraints. It respects the pt-24 padding cap, uses the standard font progression, and limits the content stack to four elements.

<section class="min-h-screen flex flex-col items-center justify-center pt-24 md:pt-20">

  <!-- 1. Optional eyebrow -->
  <p class="uppercase text-sm tracking-widest text-gray-600 mb-2">
    NEW AI‑POWERED DESIGN TOOL
  </p>

  <!-- 2. Headline (max 2 lines) -->
  <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 text-center max-w-3xl">
    Design better, ship faster with Taste Skill
  </h1>

  <!-- 3. Sub-text (max 20 words) -->
  <p class="mt-4 text-lg text-gray-700 text-center max-w-2xl">
    Turn AI‑generated concepts into production‑ready UI in seconds—no code, no hassle.
  </p>

  <!-- 4. CTAs (primary + secondary) -->
  <div class="mt-6 flex gap-4">
    <a href="#" class="px-6 py-3 bg-primary-600 text-white rounded hover:bg-primary-700 whitespace-nowrap">
      Try for free
    </a>
    <a href="#" class="px-6 py-3 border border-primary-600 text-primary-600 rounded hover:bg-primary-50 whitespace-nowrap">
      Learn more
    </a>
  </div>

</section>

Key implementation details:

• The headline uses the default text-4xl → lg:text-6xl range
• Top padding is set to pt-24 on mobile and md:pt-20 on larger screens, respecting the cap
• Only four text elements appear in the stack, with no additional micro-copy inside the section

Summary

• Viewport containment: Heroes must fit entirely in the initial view with 2-line headlines and 20-word subtexts
• Font scaling: Use text-4xl md:text-5xl lg:text-6xl by default; reserve text-7xl for headlines of 3-5 words only
• Padding limits: Never exceed pt-24 (~6rem); increase font or image size instead
• Element restriction: Maximum 4 stacked elements (eyebrow, headline, subtext, CTAs); all other content belongs below the fold
• Source authority: All rules originate from skills/taste-skill/SKILL.md in the Leonxlnx/taste-skill repository

Frequently Asked Questions

What happens if my headline exceeds 6 words?

You must use the standard font progression ending at lg:text-6xl. According to the Taste Skill rules in SKILL.md, starting with text-7xl or text-8xl for long headlines is prohibited. If the headline wraps to 4 lines, this constitutes a font-size error requiring immediate reduction.

How should I handle subtext that exceeds 20 words?

Edit the copy to meet the 20-word limit or move the excess content below the hero section. The design system treats 20 words as a hard ceiling to ensure the CTA buttons remain visible without scrolling. Padding adjustments are not an acceptable solution for overflow.

Can I add extra top padding to vertically center the hero content?

No. The rules explicitly cap top padding at pt-24 (approximately 6rem) on desktop. If the content feels too low, increase the font size following the discipline rules or use a larger hero asset. Excessive padding is classified as a layout bug that pushes content out of the optimal sight line.

What elements are permitted in the hero stack?

Only four text elements are allowed: an optional eyebrow/brand-strip, the headline (maximum 2 lines), the sub-text (maximum 20 words), and the CTA block (1 primary and 1 secondary button). Trust badges, feature lists, price teasers, and other micro-copy must live outside the hero section, below the fold.

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