1. Centered — classic marketing hero with eyebrow + big headline + CTA row

New · Version 2.0

Build your portfolio in an afternoon

Everything you need — templates, components, and live examples — ready to remix into your own site.

<section class="hero">
  <div class="eyebrow">New · Version 2.0</div>
  <h1>Build your portfolio in an afternoon</h1>
  <p>Short punchy subline.</p>
  <div class="row">
    <a class="btn">Get started</a>
    <a class="btn ghost">Watch demo</a>
  </div>
</section>
.hero {
  padding: 90px 20px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fdf2f8;
  color: #ec4899;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

2. Split Hero — text left, image right (classic 50/50)

Design systems
for humans

Built by designers who ship — not committees. Every component works out of the box.

Explore the system

<section class="split">
  <div class="text">
    <h1>Design systems for humans</h1>
    <p>One-line pitch.</p>
    <a class="btn">CTA</a>
  </div>
  <div class="image"></div>
</section>
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
}

.image {
  background: url('photo.jpg') center/cover;
}

/* Stack on mobile */
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
}

3. Video Background — autoplay-muted-loop for cinematic intros

Go somewhere new

Book a trip to a place you've only seen in daydreams — and leave the planning to us.

Plan your trip

<section class="video-hero">
  <video autoplay muted loop playsinline>
    <source src="bg.mp4" type="video/mp4">
  </video>

  <div class="content">
    <h1>Go somewhere new</h1>
  </div>
</section>
.video-hero { position: relative; overflow: hidden; }

video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay for text contrast */
.video-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

.content { position: relative; z-index: 1; }

4. Gradient Mesh — layered radial gradients for a colorful modern look

Software you'll actually enjoy
opening on Monday.

Tools shouldn't feel like chores. We sweat the details so your team can stop thinking about software.

Start free trial

<section class="mesh-hero">
  <h1>Software you'll <span>actually enjoy</span></h1>
  <p>Subline.</p>
</section>
/* Stack 4 radial gradients over a dark base */
.mesh-hero {
  background:
    radial-gradient(circle at 20% 20%, #ec4899, transparent 40%),
    radial-gradient(circle at 80% 30%, #8b5cf6, transparent 40%),
    radial-gradient(circle at 60% 80%, #06b6d4, transparent 40%),
    radial-gradient(circle at 30% 90%, #f59e0b, transparent 40%),
    #0f172a;
}

/* Bonus: gradient text for the accent word */
h1 span {
  background: linear-gradient(135deg, #fbcfe8, #ddd6fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

5. Asymmetric — giant title with italic accent, side stats column

Make things that matter.

A studio for brands who want to stop blending in. 12 years, 80+ launches, 0 templates.

See our work

80+Launches

12Years

98%Retention

<section class="asym">
  <div><h1>Make things that <em>matter.</em></h1></div>
  <div class="right">
    <p>Studio description.</p>
    <div class="stat">
      <div><strong>80+</strong><span>Launches</span></div>
    </div>
  </div>
</section>
.asym {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  align-items: center;
  padding: 80px 50px;
}

h1 {
  font-size: 4.5rem;
  line-height: .95;
  letter-spacing: -0.04em;
}

/* Italic serif accent for the highlight word */
h1 em {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  color: #ec4899;
}

6. Editorial — big serif headline, magazine-style layout

Volume 04 · Spring 2026

Quiet rooms, loud ideas.

A seasonal magazine on the craft behind the work you actually love using.

Read this issue

<section class="editorial">
  <div class="kicker">Volume 04 · Spring 2026</div>
  <h1>Quiet <em>rooms</em>, loud ideas.</h1>
  <p>Tagline.</p>
</section>
.editorial h1 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
}

.kicker {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b45309;
}

/* Italic subline for magazine voice */
.editorial p {
  font-family: Georgia, serif;
  font-style: italic;
}

7. Stats Hero — social proof numbers anchor the pitch

Trusted by teams building the future

From two-person studios to global newsrooms — 50,000+ people use our tools daily.

50k+Active users

120Countries

4.9★Avg. rating

99.98%Uptime

<section class="stats-hero">
  <h1>Trusted by teams</h1>
  <p>One-line pitch.</p>
  <div class="stats">
    <div><strong>50k+</strong><span>Active users</span></div>
    <div><strong>120</strong><span>Countries</span></div>
  </div>
</section>
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 30px;
}

/* Giant gradient-filled numbers */
.stats strong {
  font-size: 2.4rem;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

8. Product Screenshot — pitch above, app mockup below in a browser frame

Your workspace, rethought.

The dashboard your team will actually open — instead of closing a browser tab on.

Try it free Book a demo

<section class="product-hero">
  <h1>Your workspace, rethought.</h1>
  <p>Subline.</p>

  <!-- Browser-framed screenshot -->
  <div class="mock">
    <div class="mock-chrome">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <img class="mock-body" src="app.jpg">
  </div>
</section>
.mock {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.2);
  overflow: hidden;
}

.mock-chrome {
  padding: 10px 14px;
  background: #e5e7eb;
  display: flex;
  gap: 8px;
}

.mock-chrome .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d4d4d8;
}

9. Image Slideshow — 4 photos cross-fade via CSS-only keyframes (no JS)

Moments worth chasing

A curated library of travel photography from studios and contributors around the world.

Browse the library

<section class="slideshow">
  <!-- Each slide has its own bg image -->
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>

  <div class="content">
    <h1>Moments worth chasing</h1>
  </div>
</section>
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slideFade 20s infinite;
}

/* Stagger each slide's delay by (total / count) */
.slide:nth-child(1) { background-image: url('1.jpg'); animation-delay: 0s; }
.slide:nth-child(2) { background-image: url('2.jpg'); animation-delay: 5s; }
.slide:nth-child(3) { background-image: url('3.jpg'); animation-delay: 10s; }
.slide:nth-child(4) { background-image: url('4.jpg'); animation-delay: 15s; }

/* Visible 0–22% of the loop, fading at each edge */
@keyframes slideFade {
  0%, 22%   { opacity: 1; }
  28%, 97%  { opacity: 0; }
  100%      { opacity: 1; }
}

10. Video Slideshow — multiple looping clips cross-fade (silent + autoplay)

Stories that move

Four atmospheres cycling every six seconds — a living hero that never stops.

Start watching

<section class="video-slideshow">
  <div class="vslide">
    <video autoplay muted loop playsinline>
      <source src="clip1.mp4">
    </video>
  </div>
  <!-- 3 more .vslide blocks -->

  <div class="content"><h1>Headline</h1></div>
</section>
.vslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: slideFade 24s infinite;
}
.vslide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same cross-fade pattern — adjust delays by (24s / 4 = 6s) */
.vslide:nth-child(1) { animation-delay: 0s; }
.vslide:nth-child(2) { animation-delay: 6s; }
.vslide:nth-child(3) { animation-delay: 12s; }
.vslide:nth-child(4) { animation-delay: 18s; }

11. Image + Video Combo — split layout: video on one side, image hero on the other

Where motion
meets stillness.

Your work, shown two ways — a moving clip on the left tells the story, a photo on the right sets the tone.

See the portfolio

<section class="combo">
  <div class="left">
    <video autoplay muted loop playsinline></video>
  </div>
  <div class="right">
    <h1>Your headline</h1>
    <a class="btn">CTA</a>
  </div>
</section>
.combo {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Left: full-bleed looping video */
.left video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right: photo with gradient overlay + text */
.right {
  background:
    linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.6)),
    url('hero.jpg') center/cover;
  color: #fff;
}

/* Stack on mobile */
@media (max-width: 720px) {
  .combo { grid-template-columns: 1fr; }
}