Browse Blocks

Hero

An introduction with a clear next step.

Basic

An introduction with a clear next step.

View Code

HTML

<section class="stack">
  <p class="eyebrow">
    Design with AI. Build like a pro.
  </p>
  <h2>
    Your next idea.
    <br>
    Ready for the web.
  </h2>
  <p class="muted">
    Thoughtful components, balanced spacing, and a shared design language for you and your AI.
  </p>
  <div class="cluster">
    <a class="btn" href="#details">
      Explore the Details
    </a>
  </div>
</section>
<section id="details" class="panel stack">
  <h2>
    Make it yours.
  </h2>
  <p>
    Replace this example with your product’s story.
  </p>
</section>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.css button.css panel.css

Add to your page

<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/panel.css">

10,856 bytes CSS including base · 0 bytes runtime JavaScript

Usage

Introduce the page

Replace the example copy with a clear promise and next step. Use the page’s h1 when this is its main introduction.

Connect the action

Give the call to action a real destination. Keep the heading and supporting copy brief enough to scan.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.