Skip to content

← Marketing examples

Content

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

Illustrated introduction with prose below

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

Preview width

Illustrated introduction with prose below

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

Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="art support">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-01-headline">Illustrated introduction with prose below</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div><div class="thin-prose marketing-editorial"><p>Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.</p></div>
  </div>
</div>

Alternating illustrated sections

Sections keep their order and grow with the content.

Preview width

Alternating illustrated sections

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

Two designers review paper prototypes at a studio table
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="content" data-treatment="art tiles">
  <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-content-02-headline">Alternating illustrated sections</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><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div>
<div class="marketing-composition" data-composition="media-first"><figure class="marketing-image"><img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async"></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>
  </div>
</div>

Dark copy beside a full-width photograph

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

Preview width

Dark copy beside a full-width photograph

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

Two designers review paper prototypes at a studio table
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="content" data-treatment="workshop">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-03-headline">Dark copy beside a full-width photograph</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><figure class="marketing-image"><img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async"></figure></div>
  </div>
</div>

Centered editorial title

A bounded measure and wrapping actions keep the composition centered.

Preview width

Field note

Centered editorial title

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

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="label compact">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
    <p class="marketing-kicker">Field note</p>
    <h3 class="marketing-display" id="marketing-content-04-headline">Centered editorial title</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div></div>
  </div>
</div>

Dark violet introduction band

A bounded measure and wrapping actions keep the composition centered.

Preview width

Field note

Dark violet introduction band

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

View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="content" data-treatment="compact label">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
    <p class="marketing-kicker">Field note</p>
    <h3 class="marketing-display" id="marketing-content-05-headline">Dark violet introduction band</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div></div>
  </div>
</div>

Short editorial statement

Text measure and logical spacing control the reading rhythm.

Preview width

Short editorial statement

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

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="compact">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-06-headline">Short editorial statement</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div></div>
  </div>
</div>

Brief headline and extended description

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

Preview width

Brief headline and extended description

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

Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.

View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="content" data-treatment="compact">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-07-headline">Brief headline and extended description</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="thin-prose marketing-editorial"><p>Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.</p></div></div>
  </div>
</div>

Heading above two prose columns

Text measure and logical spacing control the reading rhythm.

Preview width

Heading above two prose columns

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

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="tiles">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-08-headline">Heading above two prose columns</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card 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></li>
<li><article class="marketing-card 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></li></ul></div>
  </div>
</div>

Feature headline and two paragraphs

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

Preview width

Feature headline and two paragraphs

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

Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="support">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-09-headline">Feature headline and two paragraphs</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="thin-prose marketing-editorial"><p>Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.</p></div></div>
  </div>
</div>

Opening note and emphasized statement

Media and copy follow their authored sequence as the tracks stack.

Preview width

Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.

Opening note and emphasized statement

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

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="support">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="media-first"><div class="thin-prose marketing-editorial"><p>Content changes when a story is translated, a label grows, or a reader enlarges the type. The page can reflow while preserving the order in which people read and act.</p></div><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-10-headline">Opening note and emphasized statement</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div></div>
  </div>
</div>

Product walkthrough in alternating sections

Sections keep their order and grow with the content.

Preview width

Product walkthrough in alternating sections

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

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

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="sky" data-category="content" 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-content-11-headline">Product walkthrough in alternating sections</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>

Two linked feature summaries

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

Preview width

Two linked feature summaries

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

Read the guide
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="links">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-12-headline">Two linked feature summaries</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-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card 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></li>
<li><article class="marketing-card 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></li></ul></div>
  </div>
</div>

Dark manifesto and supporting highlights

Text measure and logical spacing control the reading rhythm.

Preview width

Dark manifesto and supporting highlights

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

View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="content" data-treatment="tiles accent">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-13-headline">Dark manifesto and <em>supporting highlights</em></h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card 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></li>
<li><article class="marketing-card 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></li>
<li><article class="marketing-card 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></li></ul></div>
  </div>
</div>

Checklist and overlapping landscape imagery

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

Preview width

Checklist and overlapping landscape imagery

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

Read the guide
Open sketchbook and blue swatches on a studio deskTwo designers review paper prototypes at a studio tableSunrise over a lake framed by mist and forested mountains
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="content" data-treatment="collage links">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-14-headline">Checklist and overlapping landscape imagery</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    <a href="/guides/marketing-site/">Read the guide</a>
  </div><figure class="marketing-collage"><img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async"><img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async"><img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async"></figure></div>
  </div>
</div>

Story introduction and two article cards

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

Preview width

Story introduction and two article cards

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

Read the guide
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="content" data-treatment="tiles links">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-15-headline">Story introduction and two article cards</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-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card 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></li>
<li><article class="marketing-card 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></li></ul></div>
  </div>
</div>

Lead product tile and two supporting cards

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

Preview width

Lead product tile and two supporting cards

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

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="content" data-treatment="featured device">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-16-headline">Lead product tile and two supporting cards</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li data-lead><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async">
    <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></li></ul></div>
  </div>
</div>

Product story and two related offers

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

Preview width

Product story and two related offers

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

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="featured board">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-17-headline">Product story and two related offers</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li data-lead><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async">
    <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></li></ul></div>
  </div>
</div>

Four image-led product tiles

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

Preview width

Four image-led product tiles

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

View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="content" data-treatment="tiles device">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-18-headline">Four image-led product tiles</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li></ul></div>
  </div>
</div>

Design story with image collage

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

Preview width

Field note

Design story with image collage

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

Open sketchbook and blue swatches on a studio deskTwo designers review paper prototypes at a studio tableSunrise over a lake framed by mist and forested mountains
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="content" data-treatment="collage label">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    <p class="marketing-kicker">Field note</p>
    <h3 class="marketing-display" id="marketing-content-19-headline">Design story with image collage</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><figure class="marketing-collage"><img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async"><img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async"><img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async"></figure></div>
  </div>
</div>

Product copy and process diagram

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

Preview width

Product copy and process diagram

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

Read the guide
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="sky" data-category="content" data-treatment="board links">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-20-headline">Product copy and process diagram</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    <a href="/guides/marketing-site/">Read the guide</a>
  </div><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>

Integrated editor and feature mosaic

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

Preview width

Integrated editor and feature mosaic

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

View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="content" data-treatment="featured tiles">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-21-headline">Integrated editor and feature mosaic</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li data-lead><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li></ul></div>
  </div>
</div>

Three alternating editorial features

Sections keep their order and grow with the content.

Preview width

Three alternating editorial features

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

Open sketchbook and blue swatches on a studio desk
Two designers review paper prototypes at a studio table
Open sketchbook and blue swatches on a studio desk
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="content" data-treatment="photo collage">
  <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-content-22-headline">Three alternating editorial features</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-image"><img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async"></figure></div>
<div class="marketing-composition" data-composition="media-first"><figure class="marketing-image"><img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async"></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-image"><img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async"></figure></div></div>
  </div>
</div>

Centered tools and wordmark strip

A bounded measure and wrapping actions keep the composition centered.

Preview width

Centered tools and wordmark strip

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

Read the guide
  • Fieldwork
  • Relay
  • Northline
  • Afterlight
  • Commonform
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="content" data-treatment="logos links">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-23-headline">Centered tools and wordmark strip</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-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></div>
  </div>
</div>

Getting-started steps beside a preview

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

Preview width

Getting-started steps beside a preview

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

Read the guide
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="content" data-treatment="device links">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-24-headline">Getting-started steps beside a 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><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>

Warm editorial copy beside a portrait

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

Preview width

Field note

Warm editorial copy beside a portrait

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

A designer in a cobalt jacket
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="content" data-treatment="portrait label">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
    <p class="marketing-kicker">Field note</p>
    <h3 class="marketing-display" id="marketing-content-25-headline">Warm editorial copy beside a portrait</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><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>
</div>

Paired visual feature walkthrough

Sections keep their order and grow with the content.

Preview width

Paired visual feature walkthrough

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

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="sky" data-category="content" data-treatment="board art">
  <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-content-26-headline">Paired visual 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><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></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>
  </div>
</div>

Centered recipe cards with illustration

The introduction keeps its measure while the supporting content can use the wider track.

Preview width

Centered recipe cards with illustration

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

View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="content" data-treatment="art tiles">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="showcase"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-27-headline">Centered recipe cards with illustration</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async">
    <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></li>
<li><article class="marketing-card thin-stack" data-space="xs">
    <img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li></ul></div>
  </div>
</div>

Centered illustrated editorial note

The introduction keeps its measure while the supporting content can use the wider track.

Preview width

Centered illustrated editorial note

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

View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="content" data-treatment="art compact">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="showcase"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-content-28-headline">Centered illustrated editorial note</h3>
    <p>Start with readable content and let the composition grow around it.</p>
    
  </div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div>
  </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; }
  }
}