Skip to content

PatternsPage patternsHome

Home

The marketing home of a site. One hero, three feature cards, a strip of recent work, an essay-style block, and a mini-changelog.

5 sectionsMax canvas 90 remUsed on the design system home and the work index

Anatomy

  1. Hero. Eyebrow (1 line), display title (2-3 lines), lede (2-3 lines), 1-3 primary actions.
  2. Three-card strip. Three equal feature cards with eyebrow, title, lede, and a trailing arrow CTA.
  3. Production strip. Three image-caption cards showing real artifacts in use.
  4. Essay. A two-column block: a sticky label on the left, prose on the right. 4-5 paragraphs in the editorial serif.
  5. Changelog. Five most recent entries, with a "Read the full changelog" link.

Rules of thumb

  • Hero is always 4-7 lines total. If it's longer, the page is the hero.
  • Three feature cards is a hard cap. Two looks like a comparison; four looks like a directory.
  • The essay is the voice of the site. It is not optional. Even on a marketing home, the writing is the proof.
  • Changelog goes at the bottom, never in the hero. The changelog is for people who already know the system.

The skeleton

home/page.tsx
<main className="ds-main">
  {/* 1. Hero */}
  <section className="ds-home">
    <p className="ds-home__eyebrow">v1.0 · 3 projects</p>
    <h1 className="ds-home__title">A small, opinionated design system.</h1>
    <p className="ds-home__lede">...</p>
    <div className="ds-home__actions">
      <Link className="ds-btn ds-btn--primary ds-btn--md">Read why</Link>
      <Link className="ds-btn ds-btn--secondary ds-btn--md">Start</Link>
    </div>

    {/* 2. Three-card strip */}
    <div className="ds-home__three">
      {cards.map(c => <FeatureCard {...c} />)}
    </div>

    {/* 3. Production strip */}
    <div className="ds-home-strip">
      {strips.map(s => <StripCard {...s} />)}
    </div>
  </section>

  {/* 4. Essay */}
  <section className="ds-essay">
    <p className="ds-essay__label">How the system came to be</p>
    <div className="ds-essay__body">
      <p>...</p>
    </div>
  </section>

  {/* 5. Changelog */}
  <section className="ds-changelog">
    {entries.map(e => <ChangelogRow {...e} />)}
  </section>
</main>

A worked example

The design system home is the canonical example. Other pages with the same shape: the work index, the long-form article index, the writing home.

See it live at izaias.xyz

What not to do