Features

19 examples. Use Compact to see how the same HTML reflows.

Six centered feature tiles

A bounded measure and wrapping actions keep the composition centered.

Preview width Full Compact

Six centered feature tiles

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="features" data-treatment="tiles">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-01-headline"><div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-01-headline">Six centered feature tiles</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Illustrated feature checklist

The tracks sit side by side when their container has room and stack in source order when it narrows.

Preview width Full Compact

Illustrated feature checklist

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="features" data-treatment="art plain">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-02-headline"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-02-headline">Illustrated feature checklist</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-composition" data-composition="split"><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li></ul><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div></section>
  </div>
</div>

Open six-feature grid

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

Open six-feature grid

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="features" data-treatment="plain">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-03-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-03-headline">Open six-feature grid</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Violet icon feature grid

A bounded measure and wrapping actions keep the composition centered.

Preview width Full Compact

Violet icon feature grid

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="features" data-treatment="plain">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-04-headline"><div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-04-headline">Violet icon feature grid</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Benefits beside a full-height photo

The tracks sit side by side when their container has room and stack in source order when it narrows.

Preview width Full Compact

Benefits beside a full-height photo

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="features" data-treatment="portrait plain">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-05-headline"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-05-headline">Benefits beside a full-height photo</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-composition" data-composition="split"><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li></ul><figure class="marketing-image"><img src="/_astro/marketing-portrait.BvfY0JqU.webp" width="1050" height="788" alt="A designer in a cobalt jacket" loading="lazy" decoding="async"></figure></div></div></section>
  </div>
</div>

Centered low-contrast feature tiles

A bounded measure and wrapping actions keep the composition centered.

Preview width Full Compact

Centered low-contrast feature tiles

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="features" data-treatment="tiles">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-06-headline"><div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-06-headline">Centered low-contrast feature tiles</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Outlined feature tiles beside a dashboard

The tracks sit side by side when their container has room and stack in source order when it narrows.

Preview width Full Compact

Outlined feature tiles beside a dashboard

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout
Published
Share the edition

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="features" data-treatment="board tiles">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-07-headline"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-07-headline">Outlined feature tiles beside a dashboard</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-composition" data-composition="split"><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li></ul><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li><li class="thin-box"><strong>Published</strong><p>Share the edition</p></li></ul>
  </figure></div></div></section>
  </div>
</div>

Two-column list of compact features

Text measure and logical spacing control the reading rhythm.

Preview width Full Compact

Two-column list of compact features

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="features" data-treatment="plain compact">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-08-headline"><div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-08-headline">Two-column list of compact features</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Editorial lead and three features

Text measure and logical spacing control the reading rhythm.

Preview width Full Compact

Editorial lead and three features

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="features" data-treatment="plain">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-09-headline"><div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-09-headline">Editorial lead and three features</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li></ul></div></section>
  </div>
</div>

Feature index and linked detail

The tracks sit side by side when their container has room and stack in source order when it narrows.

Preview width Full Compact

Feature index and linked detail

Start with readable content and let the composition grow around it.

Read the guide

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation

View HTML

<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="features" data-treatment="links plain">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-10-headline"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-10-headline">Feature index and linked detail</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    <a href="/guides/marketing-site/">Read the guide</a>
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4><a href="/guides/live-updates/">Datastar</a></h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4><a href="/guides/server-rendered-app/">HTTP</a></h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4><a href="/guides/submit-form/">HTML forms</a></h4>
    <p>Native submission and validation</p>
  </li></ul></div></section>
  </div>
</div>

Accent heading and open feature tiles

Text measure and logical spacing control the reading rhythm.

Preview width Full Compact

Accent heading and open feature tiles

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="rose" data-category="features" data-treatment="plain accent">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-11-headline"><div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-11-headline">Accent heading and open <em>feature tiles</em></h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Dark device feature walkthrough

Sections keep their order and grow with the content.

Preview width Full Compact

Dark device feature walkthrough

Start with readable content and let the composition grow around it.

A page that can grow

Start with the document and let the reading measure guide the layout.

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout

The next action belongs in HTML

Build around links, forms, and readable server responses.

Design for a smaller device

Keep the first request light and let the browser do the layout work.

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout

View HTML

<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="features" data-treatment="device">
  <div class="marketing-section">
    <div class="thin-stack" data-space="l"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-12-headline">Dark device feature walkthrough</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-composition" data-composition="split"><article class="thin-stack" data-space="xs"><h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p></article><figure class="marketing-board marketing-device thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
  </figure></div>
<div class="marketing-composition" data-composition="media-first"><figure class="marketing-board marketing-device thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
  </figure><article class="thin-stack" data-space="xs"><h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p></article></div>
<div class="marketing-composition" data-composition="split"><article class="thin-stack" data-space="xs"><h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p></article><figure class="marketing-board marketing-device thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
  </figure></div></div>
  </div>
</div>

Alternating gradient product panels

Sections keep their order and grow with the content.

Preview width Full Compact

Alternating gradient product panels

Start with readable content and let the composition grow around it.

A page that can grow

Start with the document and let the reading measure guide the layout.

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout

The next action belongs in HTML

Build around links, forms, and readable server responses.

Design for a smaller device

Keep the first request light and let the browser do the layout work.

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout

View HTML

<div class="marketing-specimen" data-theme="night-signal" data-tone="gradient" data-category="features" data-treatment="board">
  <div class="marketing-section">
    <div class="thin-stack" data-space="l"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-13-headline">Alternating gradient product panels</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-composition" data-composition="split"><article class="thin-stack" data-space="xs"><h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p></article><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
  </figure></div>
<div class="marketing-composition" data-composition="media-first"><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
  </figure><article class="thin-stack" data-space="xs"><h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p></article></div>
<div class="marketing-composition" data-composition="split"><article class="thin-stack" data-space="xs"><h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p></article><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
  </figure></div></div>
  </div>
</div>

Eight compact feature cards

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

Eight compact feature cards

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions
Center

Readable measure
Box

Local padding

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="features" data-treatment="tiles compact">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-14-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-14-headline">Eight compact feature cards</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 11rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>Center</h4>
    <p>Readable measure</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Box</h4>
    <p>Local padding</p>
  </li></ul></div></section>
  </div>
</div>

Dark stage with tinted feature cards

A bounded measure and wrapping actions keep the composition centered.

Preview width Full Compact

Dark stage with tinted feature cards

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="features" data-treatment="tiles accent">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-15-headline"><div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-15-headline">Dark stage with tinted <em>feature cards</em></h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Stack</h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>Cluster</h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Two-column help topics

Text measure and logical spacing control the reading rhythm.

Preview width Full Compact

Two-column help topics

Start with readable content and let the composition grow around it.

Read the guide

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm
Cluster

Wrapping actions

View HTML

<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="features" data-treatment="plain compact links">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-16-headline"><div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-16-headline">Two-column help topics</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    <a href="/guides/marketing-site/">Read the guide</a>
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4><a href="/guides/live-updates/">Datastar</a></h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4><a href="/guides/server-rendered-app/">HTTP</a></h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4><a href="/guides/submit-form/">HTML forms</a></h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4><a href="/layouts/grid/">Grid</a></h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4><a href="/layouts/stack/">Stack</a></h4>
    <p>Vertical rhythm</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4><a href="/layouts/cluster/">Cluster</a></h4>
    <p>Wrapping actions</p>
  </li></ul></div></section>
  </div>
</div>

Features followed by partner marks

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

Features followed by partner marks

Start with readable content and let the composition grow around it.

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation

Fieldwork
Relay
Northline
Afterlight
Commonform

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="features" data-treatment="plain logos">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-17-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-17-headline">Features followed by partner marks</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p>
  </li></ul></div><ul class="thin-grid marketing-collection marketing-marks" role="list" style="--thin-grid-min: 8rem"><li><strong>Fieldwork</strong></li><li><strong>Relay</strong></li><li><strong>Northline</strong></li><li><strong>Afterlight</strong></li><li><strong>Commonform</strong></li></ul></section>
  </div>
</div>

Violet grid of product screenshots

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

Violet grid of product screenshots

Start with readable content and let the composition grow around it.

◆
Datastar

Live HTML updates
Project overview
- Planned
  Collect references
- In progress
  Draft the story
✦
HTTP

Server-rendered pages
Project overview
- Planned
  Collect references
- In progress
  Draft the story
↗
HTML forms

Native submission and validation
Project overview
- Planned
  Collect references
- In progress
  Draft the story
▥
Grid

Intrinsic columns
Project overview
- Planned
  Collect references
- In progress
  Draft the story

View HTML

<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="features" data-treatment="board tiles">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-18-headline"><div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-18-headline">Violet grid of product screenshots</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4>Datastar</h4>
    <p>Live HTML updates</p><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li></ul>
  </figure>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4>HTTP</h4>
    <p>Server-rendered pages</p><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li></ul>
  </figure>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4>HTML forms</h4>
    <p>Native submission and validation</p><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li></ul>
  </figure>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4>Grid</h4>
    <p>Intrinsic columns</p><figure class="marketing-board thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li></ul>
  </figure>
  </li></ul></div></section>
  </div>
</div>

Premium feature index and device preview

The tracks sit side by side when their container has room and stack in source order when it narrows.

Preview width Full Compact

Premium feature index and device preview

Start with readable content and let the composition grow around it.

Read the guide

Datastar

Live HTML updates
HTTP

Server-rendered pages
HTML forms

Native submission and validation
Grid

Intrinsic columns
Stack

Vertical rhythm

Project overview

Planned
Collect references
In progress
Draft the story
Ready
Review the layout

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="features" data-treatment="device links">
  <div class="marketing-section">
    <section class="thin-stack" aria-labelledby="marketing-features-19-headline"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-features-19-headline">Premium feature index and device preview</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    <a href="/guides/marketing-site/">Read the guide</a>
  </div><div class="marketing-composition" data-composition="split"><ul class="thin-grid marketing-collection marketing-feature-list" role="list" style="--thin-grid-min: 13rem"><li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4><a href="/guides/live-updates/">Datastar</a></h4>
    <p>Live HTML updates</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">✦</span>
    <h4><a href="/guides/server-rendered-app/">HTTP</a></h4>
    <p>Server-rendered pages</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">↗</span>
    <h4><a href="/guides/submit-form/">HTML forms</a></h4>
    <p>Native submission and validation</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">▥</span>
    <h4><a href="/layouts/grid/">Grid</a></h4>
    <p>Intrinsic columns</p>
  </li>
<li class="marketing-card thin-stack" data-space="xs">
    <span aria-hidden="true" class="marketing-mark">◆</span>
    <h4><a href="/layouts/stack/">Stack</a></h4>
    <p>Vertical rhythm</p>
  </li></ul><figure class="marketing-board marketing-device thin-stack" data-space="s">
    <figcaption>Project overview</figcaption>
    <ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
  </figure></div></div></section>
  </div>
</div>

View shared CSS

Load Thin-Sky’s Foundation, Themes, Layouts, Components, and Marketing styles with these rules. Adapt the media, links, and form actions to your site.

@layer thin-patterns {
  .marketing-specimen {
    container: marketing-specimen / inline-size;
    color: var(--thin-color-text);
    background: var(--thin-color-surface);
  }

  .marketing-specimen[data-tone="sky"] { --thin-color-surface: oklch(96% .022 231); }
  .marketing-specimen[data-tone="mint"] { --thin-color-surface: oklch(96% .035 155); }
  .marketing-specimen[data-tone="rose"] { --thin-color-surface: oklch(96% .035 18); }
  .marketing-specimen[data-tone="amber"] { --thin-color-surface: oklch(96% .06 91); }
  .marketing-specimen[data-tone="blue"] { --thin-color-surface: oklch(39% .15 257); }
  .marketing-specimen[data-tone="violet"] { --thin-color-surface: oklch(35% .16 290); }
  .marketing-specimen[data-tone="gradient"] { background: linear-gradient(125deg, oklch(33% .13 272), oklch(37% .125 326)); }

  .marketing-specimen[data-treatment~="accent"]:not([data-tone="gradient"]) {
    background: radial-gradient(ellipse at 92% 88%, color-mix(in oklch, var(--thin-color-accent) 19%, transparent), transparent 60%), var(--thin-color-surface);
  }

  .marketing-section {
    --marketing-inset: clamp(var(--thin-space-m), 5cqi, 4rem);
    --marketing-gap: clamp(var(--thin-space-m), 4cqi, 3rem);
    display: grid;
    gap: var(--marketing-gap);
    padding-block: clamp(var(--thin-space-l), 5cqi, 4rem);
    padding-inline: var(--marketing-inset);
    overflow-wrap: anywhere;
  }

  .marketing-section > *,
  .marketing-composition > *,
  .marketing-nav > *,
  .marketing-card,
  .marketing-board,
  .marketing-section .thin-price-card {
    min-inline-size: 0;
  }

  .marketing-specimen[data-category="navigations"] .marketing-section,
  .marketing-specimen[data-treatment~="compact"]:not([data-category="headers"], [data-category="blog"]) .marketing-section {
    padding-block: var(--thin-space-m);
  }

  .marketing-section :where(ul[role="list"], dl) { margin-block: 0; }
  .marketing-section :where(a.thin-button, button) { max-inline-size: 100%; }

  .marketing-composition {
    display: grid;
    gap: var(--marketing-gap);
  }

  .marketing-composition:is([data-composition="split"], [data-composition="media-first"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    align-items: center;
  }

  .marketing-composition[data-composition="band"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .marketing-composition[data-composition="band"] > .marketing-intro {
    flex: 1 1 17rem;
  }

  .marketing-composition[data-composition="center"] > .marketing-intro,
  .marketing-composition[data-composition="showcase"] > .marketing-intro {
    align-items: center;
    justify-self: center;
    text-align: center;
  }

  .marketing-composition:is([data-composition="center"], [data-composition="showcase"]) > .marketing-intro .marketing-actions {
    justify-content: center;
  }

  .marketing-composition[data-composition="editorial"] > .marketing-intro {
    inline-size: min(100%, 62ch);
  }

  .marketing-intro {
    inline-size: min(100%, 62ch);
  }

  .marketing-display {
    max-inline-size: 23ch;
    font-size: clamp(1.55rem, 1.05rem + 3.4cqi, 4rem);
    line-height: 1.07;
    letter-spacing: -.025em;
    text-wrap: balance;
  }

  .marketing-display em {
    color: var(--thin-color-accent);
    font-style: normal;
  }

  .marketing-specimen[data-treatment~="light"] .marketing-display { font-weight: 430; }
  .marketing-specimen[data-treatment~="uppercase"] :is(.marketing-display, .marketing-nav nav) { text-transform: uppercase; }
  .marketing-specimen[data-treatment~="pill"] .thin-button { border-radius: 2em; }

  .marketing-intro > p:not(.marketing-kicker) { max-inline-size: 54ch; }
  .marketing-kicker { color: var(--thin-color-accent); font-size: .9em; font-weight: 700; }
  .marketing-specimen[data-treatment~="pill"] .marketing-kicker { padding: .25em .8em; border: 1px solid currentColor; border-radius: 2em; inline-size: fit-content; }

  .marketing-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--thin-space-xs) var(--thin-space-m);
  }

  .marketing-nav[data-nav="start"] > nav { flex: 1 1 auto; }
  .marketing-nav[data-nav="band"] > nav { margin-inline-start: auto; }
  .marketing-nav[data-nav="wordmark"] { justify-content: center; }

  .marketing-nav > nav a,
  .marketing-nav-actions > a:not(.thin-button) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--thin-density-control);
  }

  .marketing-brand {
    color: var(--thin-color-text);
    font-size: 1.25em;
    font-weight: 780;
    text-decoration: none;
  }

  .marketing-stage,
  .marketing-launch,
  .marketing-cta,
  .marketing-foot {
    display: grid;
    gap: var(--marketing-gap);
  }

  .marketing-stage {
    position: relative;
    isolation: isolate;
  }

  .marketing-stage .marketing-nav {
    padding-block-end: var(--thin-space-s);
    border-block-end: 1px solid var(--thin-color-border);
  }

  .marketing-stage:has(.marketing-backdrop) {
    border-radius: var(--thin-radius-m);
    padding: var(--marketing-inset);
    overflow: clip;
  }

  .marketing-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    background: oklch(24% .04 258);
  }

  .marketing-backdrop img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: .23;
  }

  .marketing-panel {
    padding: var(--marketing-inset);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  .marketing-notice {
    justify-content: center;
    padding: var(--thin-space-xs) var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-s);
    background: var(--thin-color-surface-raised);
  }

  .marketing-notice a { padding-block: var(--thin-space-2xs); }
  .marketing-notice-inset { max-inline-size: 62ch; margin-inline: auto; }

  .marketing-travel { display: grid; gap: var(--marketing-gap); align-items: center; }

  @container marketing-specimen (inline-size >= 52rem) {
    .marketing-travel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .marketing-travel > figure { grid-column: 1 / 5; grid-row: 1; }
    .marketing-travel > .marketing-panel { grid-column: 4 / -1; grid-row: 1; }
  }

  .marketing-image :is(img, video) {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--thin-radius-m);
  }

  .marketing-image:only-child { inline-size: min(100%, 55rem); }
  .marketing-composition[data-composition="showcase"] > .marketing-image { inline-size: min(100%, 56rem); justify-self: center; }

  .marketing-collage {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--thin-space-xs);
  }

  .marketing-collage img {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    object-fit: cover;
    border-radius: var(--thin-radius-s);
  }

  .marketing-collage img:first-child { grid-row: span 2; }

  .marketing-art {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 6%;
    min-block-size: clamp(6rem, 25cqi, 16rem);
    padding: 10%;
    border-radius: var(--thin-radius-m);
    background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
  }

  .marketing-art i {
    inline-size: 100%;
    aspect-ratio: 1;
    border: .2rem solid currentColor;
    border-radius: 50% 50% 12% 50%;
    color: var(--thin-color-accent);
    background: color-mix(in oklch, currentColor 18%, transparent);
  }

  .marketing-art i:nth-child(2) { border-radius: 16%; translate: 0 -18%; }
  .marketing-art i:nth-child(3) { border-radius: 50%; translate: 0 18%; }

  .marketing-board {
    padding: var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-block-start-width: .75rem;
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  .marketing-device { border-width: .65rem; }
  .marketing-board figcaption { margin: 0; font-weight: 700; }
  .marketing-board .thin-box { background: var(--thin-color-surface); }
  .marketing-code > figcaption { margin-block-end: var(--thin-space-xs); }
  .marketing-code pre { margin-block: 0; }

  .marketing-marks {
    align-items: stretch;
    text-align: center;
  }

  .marketing-marks > li {
    display: grid;
    place-items: center;
    min-block-size: 3rem;
    padding: var(--thin-space-xs);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-s);
    font-family: var(--thin-font-display);
  }

  [data-treatment~="plain"] .marketing-marks > li { border-color: transparent; }
  [data-treatment~="tiles"] .marketing-marks > li { background: var(--thin-color-surface-raised); }
  .marketing-service-mark { font-weight: 750; }

  .marketing-metrics dd { margin: 0; color: var(--thin-color-accent); font-size: var(--thin-text-1); font-weight: 720; }

  .marketing-form {
    inline-size: min(100%, 36rem);
    text-align: start;
  }

  .marketing-form p { font-size: .9em; }
  .marketing-form-fields {
    display: grid;
    gap: var(--thin-space-xs);
    align-items: end;
  }

  .marketing-form-fields > * { min-inline-size: 0; }

  :is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields {
    display: flex;
    flex-wrap: wrap;
  }

  :is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields > :is(.thin-field, input) {
    flex: 1 1 12rem;
    inline-size: auto;
  }

  .marketing-search { inline-size: min(100%, 40rem); text-align: start; }

  .marketing-collection > * { min-inline-size: 0; }
  .marketing-card {
    block-size: 100%;
    padding: var(--thin-space-m);
    border: 1px solid var(--thin-color-border);
    border-radius: var(--thin-radius-m);
    background: var(--thin-color-surface-raised);
  }

  [data-treatment~="plain"] .marketing-card {
    border-color: transparent;
    background: transparent;
  }

  [data-treatment~="accent"] .marketing-card { border-block-start: .25rem solid var(--thin-color-accent); }

  .marketing-card > img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--thin-radius-s);
  }

  .marketing-mark,
  .marketing-person-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2.6em;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--thin-color-accent);
    background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
    font-weight: 750;
  }

  .marketing-member { display: grid; align-content: start; gap: var(--thin-space-s); }
  .marketing-member > img { aspect-ratio: 1; }
  [data-treatment~="compact"] .marketing-member { grid-template-columns: auto minmax(0, 1fr); }

  .marketing-quotation { max-inline-size: 62ch; }
  [data-composition="center"] > .marketing-quotation { text-align: center; justify-self: center; }
  [data-composition="center"] > .marketing-quotation .marketing-attribution { justify-content: center; }
  .marketing-quotation blockquote { border: 0; padding: 0; color: var(--thin-color-text); font-size: var(--thin-text-1); }
  .marketing-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--thin-space-xs); }

  .marketing-questions { inline-size: 100%; text-align: start; }
  .marketing-questions[data-questions="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: start;
  }

  .marketing-answers { display: grid; gap: var(--thin-space-s); }
  .marketing-questions details > p { margin-block-start: var(--thin-space-xs); }
  [data-treatment~="plain"] .marketing-questions details { background: transparent; }
  [data-treatment~="accent"] .marketing-questions details { border-inline: 0; border-block-start: 0; border-radius: 0; }

  .marketing-offers { min-inline-size: 0; }
  .marketing-offers fieldset { justify-self: start; }
  .marketing-yearly { display: none; }
  .marketing-offers:has(input[value="yearly"]:checked) .marketing-monthly { display: none; }
  .marketing-offers:has(input[value="yearly"]:checked) .marketing-yearly { display: inline; }
  .marketing-offers .thin-price small { font-size: .55em; }
  .marketing-plan-title small { color: var(--thin-color-accent); font-weight: 700; }
  .marketing-offers [data-composition="stack"] .thin-pricing { grid-template-columns: minmax(0, 1fr); }
  [data-treatment~="accent"] .marketing-offers .thin-price-card { border-block-start: .3rem solid var(--thin-color-accent); }

  .marketing-foot [data-composition="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .marketing-foot [data-composition="center"] {
    justify-items: center;
    text-align: center;
  }

  .marketing-foot nav > ul { margin-block-start: var(--thin-space-xs); }
  .marketing-foot [data-composition="grid"] nav > ul { display: grid; }
  .marketing-foot > small { border-block-start: 1px solid var(--thin-color-border); padding-block-start: var(--thin-space-s); }

  @container marketing-specimen (inline-size >= 46rem) {
    .marketing-stories > [data-lead] { grid-column: span 2; }
    .marketing-nav[data-nav="brand-middle"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .marketing-nav[data-nav="brand-middle"] .marketing-nav-actions { justify-self: end; }
  }

  @media (forced-colors: active) {
    .marketing-backdrop { display: none; }
    .marketing-specimen, .marketing-card, .marketing-panel { background: Canvas; color: CanvasText; }
    .marketing-kicker, .marketing-display em { color: CanvasText; }
  }
}