skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

hero-design-system

Standardizes hero sections with layout, typography, and layering rules.

2|Updated Mar 21, 2026
Search Tags:#branding#accessibility#responsive-design#design-patterns#visual-hierarchy#hero-design-system
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill hero-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hero-design-system
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-design/hero-design-system
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill hero-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Hero Design System standardizes the most critical introductory area of a webpage, providing a reusable framework for the visual anatomy, layout, layering, and responsive behavior to ensure immediate clarity and engagement across pages.

Core Features & Use Cases

  • Hero Anatomy Spec: Defines content zones (Intro, Core/H1, Subheadline, Action, Anchor) to establish a consistent narrative and visual rhythm.
  • Composition Blueprint: Offers patterns such as Split (50/50) and Centered Stack to govern alignment, media relationship, and responsive transformations.
  • Layering & Legibility: Prescribes scrims, depth, and contrast to keep headlines legible over media, with guidance on z-index and backdrop treatments.
  • Responsive Transformation Map: Maps how layouts morph from desktop to tablet and mobile, including typography scaling and media reflow.
  • Workflow & Validation: Provides practical steps for design handoff, accessibility checks, and performance considerations (e.g., poster fallbacks for media).

Quick Start

Design a hero using the Split pattern with a left-aligned headline and right media, ensuring accessible contrast and responsive stacking.

Frequently Asked Questions about hero-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize hero section layouts for consistent visual hierarchy across multiple web pages?▼

A hero section design system defines specific content zones like Intro, Core/H1, Subheadline, Action, and Anchor to establish a consistent narrative structure and visual rhythm across your web pages.

What is the best way to ensure text legibility over media backgrounds in a webpage hero?▼

Ensure text legibility over media backgrounds by applying prescribed scrims, depth adjustments, and contrast rules that manage z-index and backdrop treatments to keep headlines clear over images or video.

How do I make responsive hero sections that transform correctly from desktop to mobile devices?▼

Make responsive hero sections by using a transformation map that governs how layouts morph from desktop to tablet and mobile, specifically directing typography scaling and media reflow for smaller screens.

Can I use design tokens to manage typography and layering in my landing page heroes?▼

Yes, you can use design tokens to manage typography and layering in landing page heroes, satisfying system requirements for visual anatomy, responsive behavior, and consistent design handoff.

What composition patterns are available for designing a split hero layout?▼

Available composition patterns for designing a split hero layout include Split (50/50) and Centered Stack blueprints, which govern alignment, media relationship, and responsive stacking transformations.

Does this hero design framework include accessibility checks for visual contrast and media performance?▼

Yes, the hero design framework includes accessibility checks for visual contrast and performance considerations, providing practical validation steps like implementing poster fallbacks for media during design handoff.

Related Skills

Explore More Design & Creative Skills→
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic
ChildoftheVibeChildoftheVibe

image-to-code

Convert design images into semantic HTML/CSS/JS frontend implementations.

Community
Advanced
Happy-HorizonHappy-Horizon

hyva-render-media-image

Generate responsive <picture> elements using the Hyvä Media view model.

Official
Intermediate
flitzrrrflitzrrr
4

ui-design

Define responsive web layouts with 12-column grids and 8px spacing.

Community
Intermediate