Blocks Full pages you can drop into a project or hand to a developer. They use your current preset (switch it in the header, or make your own in Customize) and download as a single HTML file that opens anywhere.
Not a developer?
Pick a preset, then press Download on any block. You get one .html file with your colors and fonts built in: open it in a browser, or send it to whoever builds your site.
Sidebar app shell with KPI cards, a revenue chart, recent sales and an orders table.
Download HTML Copy HTML Copy CSS Open Works with wallflower-ui/css (or its core.css plus any preset). Put the CSS in your stylesheet and the HTML in your page.
HTML
<div class="b-dash">
<aside class="b-dash__side">
<div class="b-dash__side-inner">
<a class="b-dash__brand" href="#"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme Inc</a>
<nav class="wf-nav" aria-label="Main">
<a class="wf-nav__item" href="#" aria-current="page"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg> Dashboard</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg> Orders</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package" aria-hidden="true"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path></svg> Products</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg> Customers</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-line lucide-line-chart" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="m19 9-5 5-4-4-3 3"></path></svg> Analytics</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg> Settings</a>
</nav>
<div class="wf-card b-dash__upgrade">
<p class="wf-card__title">Upgrade to Pro</p>
<p class="wf-card__description">Unlock advanced reports and unlimited team seats.</p>
<a class="wf-btn wf-btn--sm wf-btn--block" href="#">Upgrade</a>
</div>
</div>
</aside>
<div class="b-dash__main">
<header class="b-dash__top">
<nav aria-label="Breadcrumb">
<ol class="wf-breadcrumb">
<li><a href="#">Acme</a></li>
<li><span aria-current="page">Dashboard</span></li>
</ol>
</nav>
<div class="wf-input-group b-dash__search">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
<input class="wf-input" type="search" placeholder="Search…" aria-label="Search" />
</div>
<button class="wf-btn wf-btn--outline wf-btn--icon" aria-label="Notifications"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg></button>
<span class="wf-avatar wf-avatar--sm" role="img" aria-label="Ada Lovelace">AL</span>
</header>
<main class="b-dash__content">
<div class="b-dash__head">
<div>
<h1 class="wf-text-h2">Dashboard</h1>
<p class="b-dash__sub">Here's how your store is doing this month.</p>
</div>
<div class="wf-cluster">
<button class="wf-btn wf-btn--outline"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg> Export</button>
<button class="wf-btn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg> New order</button>
</div>
</div>
<div class="wf-tabs" role="tablist" aria-label="Views">
<button class="wf-tab" role="tab" aria-selected="true">Overview</button>
<button class="wf-tab" role="tab" aria-selected="false">Analytics</button>
<button class="wf-tab" role="tab" aria-selected="false">Reports</button>
</div>
<div class="b-dash__stats">
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Total revenue <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign" aria-hidden="true"><line x1="12" x2="12" y1="2" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></span>
<span class="wf-stat__value">$45,231.89</span>
<span class="wf-stat__delta">+20.1% from last month</span>
</div>
</div>
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Subscriptions <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg></span>
<span class="wf-stat__value">+2,350</span>
<span class="wf-stat__delta">+180.1% from last month</span>
</div>
</div>
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Sales <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg></span>
<span class="wf-stat__value">+12,234</span>
<span class="wf-stat__delta">+19% from last month</span>
</div>
</div>
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Refund rate <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-2" aria-hidden="true"><path d="M9 14 4 9l5-5"></path><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"></path></svg></span>
<span class="wf-stat__value">1.2%</span>
<span class="wf-stat__delta wf-stat__delta--down">−0.4% from last month</span>
</div>
</div>
</div>
<div class="b-dash__grid">
<section class="wf-card">
<div class="wf-card__header">
<h2 class="wf-card__title">Revenue</h2>
<p class="wf-card__description">Monthly revenue for this year</p>
</div>
<div class="wf-card__content">
<div class="b-dash__chart" role="img" aria-label="Bar chart of monthly revenue, rising from January to December">
<div class="b-dash__bar"><span style="height: 38%"></span><small>Jan</small></div>
<div class="b-dash__bar"><span style="height: 52%"></span><small>Feb</small></div>
<div class="b-dash__bar"><span style="height: 45%"></span><small>Mar</small></div>
<div class="b-dash__bar"><span style="height: 61%"></span><small>Apr</small></div>
<div class="b-dash__bar"><span style="height: 57%"></span><small>May</small></div>
<div class="b-dash__bar"><span style="height: 72%"></span><small>Jun</small></div>
<div class="b-dash__bar"><span style="height: 66%"></span><small>Jul</small></div>
<div class="b-dash__bar"><span style="height: 80%"></span><small>Aug</small></div>
<div class="b-dash__bar"><span style="height: 74%"></span><small>Sep</small></div>
<div class="b-dash__bar"><span style="height: 88%"></span><small>Oct</small></div>
<div class="b-dash__bar"><span style="height: 79%"></span><small>Nov</small></div>
<div class="b-dash__bar"><span style="height: 94%"></span><small>Dec</small></div>
</div>
</div>
</section>
<section class="wf-card">
<div class="wf-card__header">
<h2 class="wf-card__title">Recent sales</h2>
<p class="wf-card__description">You made 265 sales this month.</p>
</div>
<ul class="wf-card__content b-dash__sales">
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">OM</span>
<span class="b-dash__who"><strong>Olivia Martin</strong><small>olivia@example.com</small></span>
<span class="b-dash__amount">+$1,999.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">JL</span>
<span class="b-dash__who"><strong>Jackson Lee</strong><small>jackson@example.com</small></span>
<span class="b-dash__amount">+$39.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">IN</span>
<span class="b-dash__who"><strong>Isabella Nguyen</strong><small>isabella@example.com</small></span>
<span class="b-dash__amount">+$299.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">WK</span>
<span class="b-dash__who"><strong>William Kim</strong><small>will@example.com</small></span>
<span class="b-dash__amount">+$99.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">SD</span>
<span class="b-dash__who"><strong>Sofia Davis</strong><small>sofia@example.com</small></span>
<span class="b-dash__amount">+$39.00</span>
</li>
</ul>
</section>
</div>
<section>
<h2 class="b-dash__section-title">Recent orders</h2>
<div class="wf-table-wrap">
<table class="wf-table">
<thead>
<tr><th>Order</th><th>Customer</th><th>Status</th><th>Date</th><th class="wf-num">Amount</th></tr>
</thead>
<tbody>
<tr><td>#3210</td><td>Olivia Martin</td><td><span class="wf-badge wf-badge--success">Paid</span></td><td>Oct 24</td><td class="wf-num">$1,999.00</td></tr>
<tr><td>#3209</td><td>Ava Johnson</td><td><span class="wf-badge wf-badge--info">Processing</span></td><td>Oct 24</td><td class="wf-num">$249.00</td></tr>
<tr><td>#3208</td><td>Michael Chen</td><td><span class="wf-badge wf-badge--warning">Pending</span></td><td>Oct 23</td><td class="wf-num">$89.00</td></tr>
<tr><td>#3207</td><td>Lisa Park</td><td><span class="wf-badge wf-badge--success">Paid</span></td><td>Oct 23</td><td class="wf-num">$420.00</td></tr>
<tr><td>#3206</td><td>Daniel Ruiz</td><td><span class="wf-badge wf-badge--destructive">Refunded</span></td><td>Oct 22</td><td class="wf-num">$59.00</td></tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
</div>Copy CSS
@layer base {
.b-dash :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-dash :where(ul, ol) { padding: 0; }
.b-dash :where(a) { color: inherit; }
.b-dash { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-dash {
display: grid;
grid-template-columns: 15.5rem minmax(0, 1fr);
min-height: 100vh;
}
.b-dash__side {
border-right: var(--wf-border-width) solid var(--sidebar-border);
background: var(--sidebar);
color: var(--sidebar-foreground);
}
.b-dash__side-inner {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
height: 100vh;
padding: var(--wf-space-5) var(--wf-space-4);
}
.b-dash__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
padding-inline: var(--wf-space-2);
font: 700 1.0625rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-dash__upgrade {
gap: var(--wf-space-2);
margin-top: auto;
padding: var(--wf-space-4);
}
.b-dash__top {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: var(--wf-space-3);
padding: var(--wf-space-3) var(--wf-space-6);
border-bottom: var(--wf-border-width) solid var(--border);
background: color-mix(in oklab, var(--background) 85%, transparent);
backdrop-filter: blur(8px);
}
.b-dash__search {
width: min(18rem, 100%);
margin-left: auto;
}
.b-dash__content {
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
padding: var(--wf-space-6);
}
.b-dash__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--wf-space-4);
}
.b-dash__sub {
margin-top: var(--wf-space-1);
color: var(--muted-foreground);
}
.b-dash__stats {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.b-dash__stat {
padding: var(--wf-space-5);
}
.b-dash__stat-label {
display: flex;
align-items: center;
justify-content: space-between;
}
.b-dash__grid {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
.b-dash__chart {
display: flex;
align-items: flex-end;
gap: var(--wf-space-2);
height: 15rem;
}
.b-dash__bar {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: var(--wf-space-2);
height: 100%;
}
.b-dash__bar span {
width: 100%;
border-radius: var(--wf-radius-xs) var(--wf-radius-xs) 0 0;
background: var(--chart-1);
}
.b-dash__bar:last-child span {
background: var(--chart-2);
}
.b-dash__bar small {
color: var(--muted-foreground);
font-size: 0.6875rem;
}
.b-dash__sales {
display: flex;
flex-direction: column;
gap: var(--wf-space-5);
list-style: none;
}
.b-dash__sales li {
display: flex;
align-items: center;
gap: var(--wf-space-3);
}
.b-dash__who {
display: flex;
flex-direction: column;
min-width: 0;
font-size: 0.875rem;
}
.b-dash__who small {
overflow: hidden;
color: var(--muted-foreground);
text-overflow: ellipsis;
}
.b-dash__amount {
margin-left: auto;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.b-dash__section-title {
margin-bottom: var(--wf-space-3);
font: 600 1.125rem / 1.3 var(--wf-font-sans);
}
@media (max-width: 64rem) {
.b-dash { grid-template-columns: minmax(0, 1fr); }
.b-dash__side { display: none; }
.b-dash__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
.b-dash__top nav { display: none; }
.b-dash__top, .b-dash__content { padding-inline: var(--wf-space-4); }
}Copy <div class="b-dash">
<aside class="b-dash__side">
<div class="b-dash__side-inner">
<a class="b-dash__brand" href="#"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme Inc</a>
<nav class="wf-nav" aria-label="Main">
<a class="wf-nav__item" href="#" aria-current="page"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg> Dashboard</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg> Orders</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package" aria-hidden="true"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path></svg> Products</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg> Customers</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-line lucide-line-chart" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="m19 9-5 5-4-4-3 3"></path></svg> Analytics</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg> Settings</a>
</nav>
<div class="wf-card b-dash__upgrade">
<p class="wf-card__title">Upgrade to Pro</p>
<p class="wf-card__description">Unlock advanced reports and unlimited team seats.</p>
<a class="wf-btn wf-btn--sm wf-btn--block" href="#">Upgrade</a>
</div>
</div>
</aside>
<div class="b-dash__main">
<header class="b-dash__top">
<nav aria-label="Breadcrumb">
<ol class="wf-breadcrumb">
<li><a href="#">Acme</a></li>
<li><span aria-current="page">Dashboard</span></li>
</ol>
</nav>
<div class="wf-input-group b-dash__search">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
<input class="wf-input" type="search" placeholder="Search…" aria-label="Search" />
</div>
<button class="wf-btn wf-btn--outline wf-btn--icon" aria-label="Notifications"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg></button>
<span class="wf-avatar wf-avatar--sm" role="img" aria-label="Ada Lovelace">AL</span>
</header>
<main class="b-dash__content">
<div class="b-dash__head">
<div>
<h1 class="wf-text-h2">Dashboard</h1>
<p class="b-dash__sub">Here's how your store is doing this month.</p>
</div>
<div class="wf-cluster">
<button class="wf-btn wf-btn--outline"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg> Export</button>
<button class="wf-btn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg> New order</button>
</div>
</div>
<div class="wf-tabs" role="tablist" aria-label="Views">
<button class="wf-tab" role="tab" aria-selected="true">Overview</button>
<button class="wf-tab" role="tab" aria-selected="false">Analytics</button>
<button class="wf-tab" role="tab" aria-selected="false">Reports</button>
</div>
<div class="b-dash__stats">
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Total revenue <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign" aria-hidden="true"><line x1="12" x2="12" y1="2" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></span>
<span class="wf-stat__value">$45,231.89</span>
<span class="wf-stat__delta">+20.1% from last month</span>
</div>
</div>
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Subscriptions <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg></span>
<span class="wf-stat__value">+2,350</span>
<span class="wf-stat__delta">+180.1% from last month</span>
</div>
</div>
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Sales <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg></span>
<span class="wf-stat__value">+12,234</span>
<span class="wf-stat__delta">+19% from last month</span>
</div>
</div>
<div class="wf-card b-dash__stat">
<div class="wf-stat">
<span class="wf-stat__label b-dash__stat-label">Refund rate <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-2" aria-hidden="true"><path d="M9 14 4 9l5-5"></path><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"></path></svg></span>
<span class="wf-stat__value">1.2%</span>
<span class="wf-stat__delta wf-stat__delta--down">−0.4% from last month</span>
</div>
</div>
</div>
<div class="b-dash__grid">
<section class="wf-card">
<div class="wf-card__header">
<h2 class="wf-card__title">Revenue</h2>
<p class="wf-card__description">Monthly revenue for this year</p>
</div>
<div class="wf-card__content">
<div class="b-dash__chart" role="img" aria-label="Bar chart of monthly revenue, rising from January to December">
<div class="b-dash__bar"><span style="height: 38%"></span><small>Jan</small></div>
<div class="b-dash__bar"><span style="height: 52%"></span><small>Feb</small></div>
<div class="b-dash__bar"><span style="height: 45%"></span><small>Mar</small></div>
<div class="b-dash__bar"><span style="height: 61%"></span><small>Apr</small></div>
<div class="b-dash__bar"><span style="height: 57%"></span><small>May</small></div>
<div class="b-dash__bar"><span style="height: 72%"></span><small>Jun</small></div>
<div class="b-dash__bar"><span style="height: 66%"></span><small>Jul</small></div>
<div class="b-dash__bar"><span style="height: 80%"></span><small>Aug</small></div>
<div class="b-dash__bar"><span style="height: 74%"></span><small>Sep</small></div>
<div class="b-dash__bar"><span style="height: 88%"></span><small>Oct</small></div>
<div class="b-dash__bar"><span style="height: 79%"></span><small>Nov</small></div>
<div class="b-dash__bar"><span style="height: 94%"></span><small>Dec</small></div>
</div>
</div>
</section>
<section class="wf-card">
<div class="wf-card__header">
<h2 class="wf-card__title">Recent sales</h2>
<p class="wf-card__description">You made 265 sales this month.</p>
</div>
<ul class="wf-card__content b-dash__sales">
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">OM</span>
<span class="b-dash__who"><strong>Olivia Martin</strong><small>olivia@example.com</small></span>
<span class="b-dash__amount">+$1,999.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">JL</span>
<span class="b-dash__who"><strong>Jackson Lee</strong><small>jackson@example.com</small></span>
<span class="b-dash__amount">+$39.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">IN</span>
<span class="b-dash__who"><strong>Isabella Nguyen</strong><small>isabella@example.com</small></span>
<span class="b-dash__amount">+$299.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">WK</span>
<span class="b-dash__who"><strong>William Kim</strong><small>will@example.com</small></span>
<span class="b-dash__amount">+$99.00</span>
</li>
<li>
<span class="wf-avatar wf-avatar--sm" aria-hidden="true">SD</span>
<span class="b-dash__who"><strong>Sofia Davis</strong><small>sofia@example.com</small></span>
<span class="b-dash__amount">+$39.00</span>
</li>
</ul>
</section>
</div>
<section>
<h2 class="b-dash__section-title">Recent orders</h2>
<div class="wf-table-wrap">
<table class="wf-table">
<thead>
<tr><th>Order</th><th>Customer</th><th>Status</th><th>Date</th><th class="wf-num">Amount</th></tr>
</thead>
<tbody>
<tr><td>#3210</td><td>Olivia Martin</td><td><span class="wf-badge wf-badge--success">Paid</span></td><td>Oct 24</td><td class="wf-num">$1,999.00</td></tr>
<tr><td>#3209</td><td>Ava Johnson</td><td><span class="wf-badge wf-badge--info">Processing</span></td><td>Oct 24</td><td class="wf-num">$249.00</td></tr>
<tr><td>#3208</td><td>Michael Chen</td><td><span class="wf-badge wf-badge--warning">Pending</span></td><td>Oct 23</td><td class="wf-num">$89.00</td></tr>
<tr><td>#3207</td><td>Lisa Park</td><td><span class="wf-badge wf-badge--success">Paid</span></td><td>Oct 23</td><td class="wf-num">$420.00</td></tr>
<tr><td>#3206</td><td>Daniel Ruiz</td><td><span class="wf-badge wf-badge--destructive">Refunded</span></td><td>Oct 22</td><td class="wf-num">$59.00</td></tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
</div> @layer base {
.b-dash :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-dash :where(ul, ol) { padding: 0; }
.b-dash :where(a) { color: inherit; }
.b-dash { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-dash {
display: grid;
grid-template-columns: 15.5rem minmax(0, 1fr);
min-height: 100vh;
}
.b-dash__side {
border-right: var(--wf-border-width) solid var(--sidebar-border);
background: var(--sidebar);
color: var(--sidebar-foreground);
}
.b-dash__side-inner {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
height: 100vh;
padding: var(--wf-space-5) var(--wf-space-4);
}
.b-dash__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
padding-inline: var(--wf-space-2);
font: 700 1.0625rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-dash__upgrade {
gap: var(--wf-space-2);
margin-top: auto;
padding: var(--wf-space-4);
}
.b-dash__top {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: var(--wf-space-3);
padding: var(--wf-space-3) var(--wf-space-6);
border-bottom: var(--wf-border-width) solid var(--border);
background: color-mix(in oklab, var(--background) 85%, transparent);
backdrop-filter: blur(8px);
}
.b-dash__search {
width: min(18rem, 100%);
margin-left: auto;
}
.b-dash__content {
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
padding: var(--wf-space-6);
}
.b-dash__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--wf-space-4);
}
.b-dash__sub {
margin-top: var(--wf-space-1);
color: var(--muted-foreground);
}
.b-dash__stats {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.b-dash__stat {
padding: var(--wf-space-5);
}
.b-dash__stat-label {
display: flex;
align-items: center;
justify-content: space-between;
}
.b-dash__grid {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
.b-dash__chart {
display: flex;
align-items: flex-end;
gap: var(--wf-space-2);
height: 15rem;
}
.b-dash__bar {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: var(--wf-space-2);
height: 100%;
}
.b-dash__bar span {
width: 100%;
border-radius: var(--wf-radius-xs) var(--wf-radius-xs) 0 0;
background: var(--chart-1);
}
.b-dash__bar:last-child span {
background: var(--chart-2);
}
.b-dash__bar small {
color: var(--muted-foreground);
font-size: 0.6875rem;
}
.b-dash__sales {
display: flex;
flex-direction: column;
gap: var(--wf-space-5);
list-style: none;
}
.b-dash__sales li {
display: flex;
align-items: center;
gap: var(--wf-space-3);
}
.b-dash__who {
display: flex;
flex-direction: column;
min-width: 0;
font-size: 0.875rem;
}
.b-dash__who small {
overflow: hidden;
color: var(--muted-foreground);
text-overflow: ellipsis;
}
.b-dash__amount {
margin-left: auto;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.b-dash__section-title {
margin-bottom: var(--wf-space-3);
font: 600 1.125rem / 1.3 var(--wf-font-sans);
}
@media (max-width: 64rem) {
.b-dash { grid-template-columns: minmax(0, 1fr); }
.b-dash__side { display: none; }
.b-dash__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
.b-dash__top nav { display: none; }
.b-dash__top, .b-dash__content { padding-inline: var(--wf-space-4); }
} Split-screen sign-in with a brand panel, SSO and magic-link options, and a password form.
Download HTML Copy HTML Copy CSS Open Works with wallflower-ui/css (or its core.css plus any preset). Put the CSS in your stylesheet and the HTML in your page.
HTML
<div class="b-auth">
<aside class="b-auth__art">
<div class="wf-bg-aurora wf-bg-fill" aria-hidden="true"></div>
<a class="b-auth__brand" href="#"><svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme Inc</a>
<figure class="b-auth__quote">
<blockquote>“This library has saved us countless hours and helped us ship beautiful work to our clients faster than ever.”</blockquote>
<figcaption>Sofia Davis, Head of Design</figcaption>
</figure>
</aside>
<main class="b-auth__panel">
<a class="wf-btn wf-btn--ghost b-auth__switch" href="#">Create an account</a>
<div class="b-auth__form">
<div class="b-auth__head">
<h1 class="wf-text-h2">Welcome back</h1>
<p>Sign in to your account to continue.</p>
</div>
<div class="wf-stack" style="--wf-gap: var(--wf-space-2)">
<button class="wf-btn wf-btn--outline wf-btn--block" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg> Continue with SSO</button>
<button class="wf-btn wf-btn--outline wf-btn--block" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg> Email me a sign-in link</button>
</div>
<div class="b-auth__or"><span>or continue with a password</span></div>
<form class="wf-stack" action="#">
<div class="wf-field">
<label class="wf-label" for="login-email">Email</label>
<input class="wf-input" id="login-email" type="email" autocomplete="email" placeholder="you@example.com" required />
</div>
<div class="wf-field">
<div class="b-auth__row">
<label class="wf-label" for="login-password">Password</label>
<a class="wf-link b-auth__small" href="#">Forgot password?</a>
</div>
<input class="wf-input" id="login-password" type="password" autocomplete="current-password" required />
</div>
<label class="wf-check-row"><input type="checkbox" class="wf-checkbox" /> Keep me signed in</label>
<button class="wf-btn wf-btn--block wf-btn--lg" type="submit">Sign in</button>
</form>
<p class="b-auth__terms">By continuing you agree to our <a class="wf-link" href="#">Terms</a> and <a class="wf-link" href="#">Privacy Policy</a>.</p>
</div>
</main>
</div>Copy CSS
@layer base {
.b-auth :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-auth :where(ul, ol) { padding: 0; }
.b-auth :where(a) { color: inherit; }
.b-auth { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-auth {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: 100vh;
}
.b-auth__art {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--wf-space-10);
overflow: hidden;
border-right: var(--wf-border-width) solid var(--border);
}
.b-auth__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
font: 700 1.125rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-auth__quote {
max-width: 30rem;
}
.b-auth__quote blockquote {
font: var(--wf-text-h4);
font-family: var(--wf-font-display);
}
.b-auth__quote figcaption {
margin-top: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-auth__panel {
position: relative;
display: grid;
place-items: center;
padding: var(--wf-space-16) var(--wf-space-6);
}
.b-auth__switch {
position: absolute;
top: var(--wf-space-6);
right: var(--wf-space-6);
}
.b-auth__form {
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
width: min(100%, 24rem);
}
.b-auth__head {
display: flex;
flex-direction: column;
gap: var(--wf-space-2);
text-align: center;
}
.b-auth__head p,
.b-auth__terms {
color: var(--muted-foreground);
}
.b-auth__or {
display: flex;
align-items: center;
gap: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.b-auth__or::before,
.b-auth__or::after {
content: '';
flex: 1;
height: var(--wf-border-width);
background: var(--border);
}
.b-auth__row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.b-auth__small {
font-size: 0.8125rem;
}
.b-auth__terms {
font-size: 0.8125rem;
text-align: center;
}
@media (max-width: 48rem) {
.b-auth { grid-template-columns: minmax(0, 1fr); }
.b-auth__art { display: none; }
}Copy <div class="b-auth">
<aside class="b-auth__art">
<div class="wf-bg-aurora wf-bg-fill" aria-hidden="true"></div>
<a class="b-auth__brand" href="#"><svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme Inc</a>
<figure class="b-auth__quote">
<blockquote>“This library has saved us countless hours and helped us ship beautiful work to our clients faster than ever.”</blockquote>
<figcaption>Sofia Davis, Head of Design</figcaption>
</figure>
</aside>
<main class="b-auth__panel">
<a class="wf-btn wf-btn--ghost b-auth__switch" href="#">Create an account</a>
<div class="b-auth__form">
<div class="b-auth__head">
<h1 class="wf-text-h2">Welcome back</h1>
<p>Sign in to your account to continue.</p>
</div>
<div class="wf-stack" style="--wf-gap: var(--wf-space-2)">
<button class="wf-btn wf-btn--outline wf-btn--block" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg> Continue with SSO</button>
<button class="wf-btn wf-btn--outline wf-btn--block" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg> Email me a sign-in link</button>
</div>
<div class="b-auth__or"><span>or continue with a password</span></div>
<form class="wf-stack" action="#">
<div class="wf-field">
<label class="wf-label" for="login-email">Email</label>
<input class="wf-input" id="login-email" type="email" autocomplete="email" placeholder="you@example.com" required />
</div>
<div class="wf-field">
<div class="b-auth__row">
<label class="wf-label" for="login-password">Password</label>
<a class="wf-link b-auth__small" href="#">Forgot password?</a>
</div>
<input class="wf-input" id="login-password" type="password" autocomplete="current-password" required />
</div>
<label class="wf-check-row"><input type="checkbox" class="wf-checkbox" /> Keep me signed in</label>
<button class="wf-btn wf-btn--block wf-btn--lg" type="submit">Sign in</button>
</form>
<p class="b-auth__terms">By continuing you agree to our <a class="wf-link" href="#">Terms</a> and <a class="wf-link" href="#">Privacy Policy</a>.</p>
</div>
</main>
</div> @layer base {
.b-auth :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-auth :where(ul, ol) { padding: 0; }
.b-auth :where(a) { color: inherit; }
.b-auth { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-auth {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: 100vh;
}
.b-auth__art {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--wf-space-10);
overflow: hidden;
border-right: var(--wf-border-width) solid var(--border);
}
.b-auth__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
font: 700 1.125rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-auth__quote {
max-width: 30rem;
}
.b-auth__quote blockquote {
font: var(--wf-text-h4);
font-family: var(--wf-font-display);
}
.b-auth__quote figcaption {
margin-top: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-auth__panel {
position: relative;
display: grid;
place-items: center;
padding: var(--wf-space-16) var(--wf-space-6);
}
.b-auth__switch {
position: absolute;
top: var(--wf-space-6);
right: var(--wf-space-6);
}
.b-auth__form {
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
width: min(100%, 24rem);
}
.b-auth__head {
display: flex;
flex-direction: column;
gap: var(--wf-space-2);
text-align: center;
}
.b-auth__head p,
.b-auth__terms {
color: var(--muted-foreground);
}
.b-auth__or {
display: flex;
align-items: center;
gap: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.b-auth__or::before,
.b-auth__or::after {
content: '';
flex: 1;
height: var(--wf-border-width);
background: var(--border);
}
.b-auth__row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.b-auth__small {
font-size: 0.8125rem;
}
.b-auth__terms {
font-size: 0.8125rem;
text-align: center;
}
@media (max-width: 48rem) {
.b-auth { grid-template-columns: minmax(0, 1fr); }
.b-auth__art { display: none; }
} Marketing page: nav, hero with product shot, logo strip, feature grid, testimonial, call to action and footer.
Download HTML Copy HTML Copy CSS Open Works with wallflower-ui/css (or its core.css plus any preset). Put the CSS in your stylesheet and the HTML in your page.
HTML
<div class="b-land">
<header class="b-land__nav wf-container">
<a class="b-land__brand" href="#"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme</a>
<nav class="b-land__links" aria-label="Main">
<a href="#">Product</a><a href="#">Pricing</a><a href="#">Customers</a><a href="#">Docs</a>
</nav>
<div class="wf-cluster">
<a class="wf-btn wf-btn--ghost" href="#">Sign in</a>
<a class="wf-btn" href="#">Get started</a>
</div>
</header>
<section class="b-land__hero">
<div class="wf-bg-brand-spotlight wf-bg-fill" aria-hidden="true"></div>
<div class="wf-container b-land__hero-inner">
<a class="wf-badge wf-badge--brand" href="#">New: Workflows are here <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a>
<h1 class="wf-text-display">Ship the product your customers keep asking for</h1>
<p class="wf-text-lead">Acme turns feedback into roadmaps and roadmaps into releases, so your team spends less time in meetings and more time building.</p>
<div class="wf-cluster b-land__ctas">
<a class="wf-btn wf-btn--lg" href="#">Start free trial</a>
<a class="wf-btn wf-btn--lg wf-btn--outline" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg> Watch demo</a>
</div>
<p class="b-land__fine">Free for 14 days · No credit card required</p>
<div class="b-land__shot" aria-hidden="true">
<div class="b-land__shot-bar"><span></span><span></span><span></span></div>
<div class="b-land__shot-body">
<div class="b-land__shot-side"></div>
<div class="b-land__shot-main">
<div class="b-land__shot-cards"><i></i><i></i><i></i></div>
<div class="b-land__shot-chart"></div>
</div>
</div>
</div>
</div>
</section>
<section class="wf-container b-land__logos" aria-label="Customers">
<p>Trusted by teams at</p>
<div><span>Northwind</span><span>Globex</span><span>Initech</span><span>Umbrella</span><span>Hooli</span></div>
</section>
<section class="wf-container b-land__features">
<div class="b-land__section-head">
<p class="wf-text-overline">Features</p>
<h2 class="wf-text-h2">Everything you need to go from idea to launch</h2>
</div>
<div class="b-land__grid">
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap" aria-hidden="true"><path d="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"></path></svg></span>
<h3>Fast by default</h3>
<p>Pages load in under a second on any connection, with nothing to configure.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg></span>
<h3>Secure from day one</h3>
<p>SSO, audit logs and encryption at rest come with every plan.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg></span>
<h3>Built for teams</h3>
<p>Invite your whole company and keep everyone working from one source of truth.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-line lucide-line-chart" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="m19 9-5 5-4-4-3 3"></path></svg></span>
<h3>Insightful analytics</h3>
<p>See what is working with dashboards that update in real time.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug" aria-hidden="true"><path d="M12 22v-5"></path><path d="M15 8V2"></path><path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"></path><path d="M9 8V2"></path></svg></span>
<h3>Plays well with others</h3>
<p>Connect the tools you already use with 120+ integrations.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-life-buoy" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m4.93 4.93 4.24 4.24"></path><path d="m14.83 9.17 4.24-4.24"></path><path d="m14.83 14.83 4.24 4.24"></path><path d="m9.17 14.83-4.24 4.24"></path><circle cx="12" cy="12" r="4"></circle></svg></span>
<h3>Real human support</h3>
<p>Talk to an engineer, not a script, 24 hours a day.</p>
</div>
</div>
</section>
<section class="wf-container">
<figure class="wf-card b-land__quote">
<blockquote>“We replaced four tools with Acme and cut our release cycle in half. It's the first thing new hires ask about.”</blockquote>
<figcaption>
<span class="wf-avatar" aria-hidden="true">JL</span>
<span><strong>Jackson Lee</strong><br />VP Product, Northwind</span>
</figcaption>
</figure>
</section>
<section class="wf-container">
<div class="b-land__cta">
<h2 class="wf-text-h2">Ready to ship faster?</h2>
<p>Join 4,000+ teams building with Acme.</p>
<div class="wf-cluster b-land__ctas">
<a class="wf-btn wf-btn--lg wf-btn--secondary" href="#">Start free trial</a>
<a class="wf-btn wf-btn--lg wf-btn--ghost b-land__cta-ghost" href="#">Talk to sales</a>
</div>
</div>
</section>
<footer class="wf-container b-land__footer">
<a class="b-land__brand" href="#"><svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme</a>
<nav aria-label="Footer"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Status</a><a href="#">Contact</a></nav>
<p>© 2026 Acme Inc.</p>
</footer>
</div>Copy CSS
@layer base {
.b-land :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-land :where(ul, ol) { padding: 0; }
.b-land :where(a) { color: inherit; }
.b-land { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-land__nav {
display: flex;
align-items: center;
gap: var(--wf-space-6);
padding-block: var(--wf-space-4);
}
.b-land__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
font: 700 1.125rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-land__links {
display: flex;
gap: var(--wf-space-6);
margin-right: auto;
color: var(--muted-foreground);
font-size: 0.9375rem;
}
.b-land__links a {
text-decoration: none;
}
.b-land__links a:hover {
color: var(--foreground);
}
.b-land__hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: var(--wf-space-20) 0;
}
.b-land__hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-6);
text-align: center;
}
.b-land__hero .wf-text-display {
max-width: 15ch;
}
.b-land__hero .wf-text-lead {
max-width: 40rem;
}
.b-land__ctas {
justify-content: center;
}
.b-land__fine {
color: var(--muted-foreground);
font-size: 0.8125rem;
}
.b-land__shot {
width: 100%;
max-width: 60rem;
margin-top: var(--wf-space-10);
overflow: hidden;
border: var(--wf-border-width) solid var(--border);
border-bottom: 0;
border-radius: var(--wf-radius-2xl) var(--wf-radius-2xl) 0 0;
background: var(--card);
box-shadow: var(--wf-shadow-xl);
}
.b-land__shot-bar {
display: flex;
gap: 0.375rem;
padding: 0.75rem 1rem;
border-bottom: var(--wf-border-width) solid var(--border);
}
.b-land__shot-bar span {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background: var(--border);
}
.b-land__shot-body {
display: grid;
grid-template-columns: 22% 1fr;
height: clamp(12rem, 30vw, 22rem);
}
.b-land__shot-side {
border-right: var(--wf-border-width) solid var(--border);
background: var(--sidebar);
}
.b-land__shot-main {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem;
}
.b-land__shot-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.b-land__shot-cards i {
height: 4.5rem;
border: var(--wf-border-width) solid var(--border);
border-radius: var(--wf-radius-lg);
background: var(--background);
}
.b-land__shot-chart {
flex: 1;
border-radius: var(--wf-radius-lg);
background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 70%, transparent), color-mix(in oklab, var(--brand-2) 70%, transparent));
}
.b-land__logos {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-4);
padding-block: var(--wf-space-12);
border-top: var(--wf-border-width) solid var(--border);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-land__logos div {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--wf-space-4) var(--wf-space-12);
font: 700 1.25rem / 1 var(--wf-font-display);
opacity: 0.75;
}
.b-land__features {
padding-block: var(--wf-space-16);
}
.b-land__section-head {
display: flex;
flex-direction: column;
gap: var(--wf-space-3);
max-width: 36rem;
margin: 0 auto var(--wf-space-12);
text-align: center;
}
.b-land__grid {
display: grid;
gap: var(--wf-space-10) var(--wf-space-8);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.b-land__feature {
display: flex;
flex-direction: column;
gap: var(--wf-space-2);
}
.b-land__feature h3 {
margin-top: var(--wf-space-2);
font: 600 1.0625rem / 1.3 var(--wf-font-sans);
}
.b-land__feature p {
color: var(--muted-foreground);
}
.b-land__icon {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--wf-radius-md);
background: color-mix(in oklab, var(--brand) 14%, var(--background));
color: color-mix(in oklab, var(--brand) 70%, var(--foreground));
}
.b-land__quote {
gap: var(--wf-space-6);
max-width: 48rem;
margin: 0 auto var(--wf-space-16);
padding: var(--wf-space-10);
}
.b-land__quote blockquote {
font: var(--wf-text-h3);
font-family: var(--wf-font-display);
}
.b-land__quote figcaption {
display: flex;
align-items: center;
gap: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-land__quote strong {
color: var(--foreground);
}
.b-land__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-4);
padding: var(--wf-space-16) var(--wf-space-6);
border-radius: var(--wf-radius-3xl);
background: var(--primary);
color: var(--primary-foreground);
text-align: center;
}
.b-land__cta p {
opacity: 0.85;
}
.b-land__cta-ghost {
color: var(--primary-foreground);
}
.b-land__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wf-space-4);
padding-block: var(--wf-space-12);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-land__footer nav {
display: flex;
gap: var(--wf-space-6);
}
.b-land__footer nav a {
text-decoration: none;
}
@media (max-width: 48rem) {
.b-land__links { display: none; }
.b-land__nav .wf-btn--ghost { display: none; }
.b-land__hero { padding-top: var(--wf-space-12); }
}Copy <div class="b-land">
<header class="b-land__nav wf-container">
<a class="b-land__brand" href="#"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme</a>
<nav class="b-land__links" aria-label="Main">
<a href="#">Product</a><a href="#">Pricing</a><a href="#">Customers</a><a href="#">Docs</a>
</nav>
<div class="wf-cluster">
<a class="wf-btn wf-btn--ghost" href="#">Sign in</a>
<a class="wf-btn" href="#">Get started</a>
</div>
</header>
<section class="b-land__hero">
<div class="wf-bg-brand-spotlight wf-bg-fill" aria-hidden="true"></div>
<div class="wf-container b-land__hero-inner">
<a class="wf-badge wf-badge--brand" href="#">New: Workflows are here <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a>
<h1 class="wf-text-display">Ship the product your customers keep asking for</h1>
<p class="wf-text-lead">Acme turns feedback into roadmaps and roadmaps into releases, so your team spends less time in meetings and more time building.</p>
<div class="wf-cluster b-land__ctas">
<a class="wf-btn wf-btn--lg" href="#">Start free trial</a>
<a class="wf-btn wf-btn--lg wf-btn--outline" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg> Watch demo</a>
</div>
<p class="b-land__fine">Free for 14 days · No credit card required</p>
<div class="b-land__shot" aria-hidden="true">
<div class="b-land__shot-bar"><span></span><span></span><span></span></div>
<div class="b-land__shot-body">
<div class="b-land__shot-side"></div>
<div class="b-land__shot-main">
<div class="b-land__shot-cards"><i></i><i></i><i></i></div>
<div class="b-land__shot-chart"></div>
</div>
</div>
</div>
</div>
</section>
<section class="wf-container b-land__logos" aria-label="Customers">
<p>Trusted by teams at</p>
<div><span>Northwind</span><span>Globex</span><span>Initech</span><span>Umbrella</span><span>Hooli</span></div>
</section>
<section class="wf-container b-land__features">
<div class="b-land__section-head">
<p class="wf-text-overline">Features</p>
<h2 class="wf-text-h2">Everything you need to go from idea to launch</h2>
</div>
<div class="b-land__grid">
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap" aria-hidden="true"><path d="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"></path></svg></span>
<h3>Fast by default</h3>
<p>Pages load in under a second on any connection, with nothing to configure.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg></span>
<h3>Secure from day one</h3>
<p>SSO, audit logs and encryption at rest come with every plan.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg></span>
<h3>Built for teams</h3>
<p>Invite your whole company and keep everyone working from one source of truth.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-line lucide-line-chart" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="m19 9-5 5-4-4-3 3"></path></svg></span>
<h3>Insightful analytics</h3>
<p>See what is working with dashboards that update in real time.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug" aria-hidden="true"><path d="M12 22v-5"></path><path d="M15 8V2"></path><path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"></path><path d="M9 8V2"></path></svg></span>
<h3>Plays well with others</h3>
<p>Connect the tools you already use with 120+ integrations.</p>
</div>
<div class="b-land__feature">
<span class="b-land__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-life-buoy" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m4.93 4.93 4.24 4.24"></path><path d="m14.83 9.17 4.24-4.24"></path><path d="m14.83 14.83 4.24 4.24"></path><path d="m9.17 14.83-4.24 4.24"></path><circle cx="12" cy="12" r="4"></circle></svg></span>
<h3>Real human support</h3>
<p>Talk to an engineer, not a script, 24 hours a day.</p>
</div>
</div>
</section>
<section class="wf-container">
<figure class="wf-card b-land__quote">
<blockquote>“We replaced four tools with Acme and cut our release cycle in half. It's the first thing new hires ask about.”</blockquote>
<figcaption>
<span class="wf-avatar" aria-hidden="true">JL</span>
<span><strong>Jackson Lee</strong><br />VP Product, Northwind</span>
</figcaption>
</figure>
</section>
<section class="wf-container">
<div class="b-land__cta">
<h2 class="wf-text-h2">Ready to ship faster?</h2>
<p>Join 4,000+ teams building with Acme.</p>
<div class="wf-cluster b-land__ctas">
<a class="wf-btn wf-btn--lg wf-btn--secondary" href="#">Start free trial</a>
<a class="wf-btn wf-btn--lg wf-btn--ghost b-land__cta-ghost" href="#">Talk to sales</a>
</div>
</div>
</section>
<footer class="wf-container b-land__footer">
<a class="b-land__brand" href="#"><svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> Acme</a>
<nav aria-label="Footer"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Status</a><a href="#">Contact</a></nav>
<p>© 2026 Acme Inc.</p>
</footer>
</div> @layer base {
.b-land :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-land :where(ul, ol) { padding: 0; }
.b-land :where(a) { color: inherit; }
.b-land { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-land__nav {
display: flex;
align-items: center;
gap: var(--wf-space-6);
padding-block: var(--wf-space-4);
}
.b-land__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
font: 700 1.125rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-land__links {
display: flex;
gap: var(--wf-space-6);
margin-right: auto;
color: var(--muted-foreground);
font-size: 0.9375rem;
}
.b-land__links a {
text-decoration: none;
}
.b-land__links a:hover {
color: var(--foreground);
}
.b-land__hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: var(--wf-space-20) 0;
}
.b-land__hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-6);
text-align: center;
}
.b-land__hero .wf-text-display {
max-width: 15ch;
}
.b-land__hero .wf-text-lead {
max-width: 40rem;
}
.b-land__ctas {
justify-content: center;
}
.b-land__fine {
color: var(--muted-foreground);
font-size: 0.8125rem;
}
.b-land__shot {
width: 100%;
max-width: 60rem;
margin-top: var(--wf-space-10);
overflow: hidden;
border: var(--wf-border-width) solid var(--border);
border-bottom: 0;
border-radius: var(--wf-radius-2xl) var(--wf-radius-2xl) 0 0;
background: var(--card);
box-shadow: var(--wf-shadow-xl);
}
.b-land__shot-bar {
display: flex;
gap: 0.375rem;
padding: 0.75rem 1rem;
border-bottom: var(--wf-border-width) solid var(--border);
}
.b-land__shot-bar span {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background: var(--border);
}
.b-land__shot-body {
display: grid;
grid-template-columns: 22% 1fr;
height: clamp(12rem, 30vw, 22rem);
}
.b-land__shot-side {
border-right: var(--wf-border-width) solid var(--border);
background: var(--sidebar);
}
.b-land__shot-main {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem;
}
.b-land__shot-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.b-land__shot-cards i {
height: 4.5rem;
border: var(--wf-border-width) solid var(--border);
border-radius: var(--wf-radius-lg);
background: var(--background);
}
.b-land__shot-chart {
flex: 1;
border-radius: var(--wf-radius-lg);
background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 70%, transparent), color-mix(in oklab, var(--brand-2) 70%, transparent));
}
.b-land__logos {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-4);
padding-block: var(--wf-space-12);
border-top: var(--wf-border-width) solid var(--border);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-land__logos div {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--wf-space-4) var(--wf-space-12);
font: 700 1.25rem / 1 var(--wf-font-display);
opacity: 0.75;
}
.b-land__features {
padding-block: var(--wf-space-16);
}
.b-land__section-head {
display: flex;
flex-direction: column;
gap: var(--wf-space-3);
max-width: 36rem;
margin: 0 auto var(--wf-space-12);
text-align: center;
}
.b-land__grid {
display: grid;
gap: var(--wf-space-10) var(--wf-space-8);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.b-land__feature {
display: flex;
flex-direction: column;
gap: var(--wf-space-2);
}
.b-land__feature h3 {
margin-top: var(--wf-space-2);
font: 600 1.0625rem / 1.3 var(--wf-font-sans);
}
.b-land__feature p {
color: var(--muted-foreground);
}
.b-land__icon {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--wf-radius-md);
background: color-mix(in oklab, var(--brand) 14%, var(--background));
color: color-mix(in oklab, var(--brand) 70%, var(--foreground));
}
.b-land__quote {
gap: var(--wf-space-6);
max-width: 48rem;
margin: 0 auto var(--wf-space-16);
padding: var(--wf-space-10);
}
.b-land__quote blockquote {
font: var(--wf-text-h3);
font-family: var(--wf-font-display);
}
.b-land__quote figcaption {
display: flex;
align-items: center;
gap: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-land__quote strong {
color: var(--foreground);
}
.b-land__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-4);
padding: var(--wf-space-16) var(--wf-space-6);
border-radius: var(--wf-radius-3xl);
background: var(--primary);
color: var(--primary-foreground);
text-align: center;
}
.b-land__cta p {
opacity: 0.85;
}
.b-land__cta-ghost {
color: var(--primary-foreground);
}
.b-land__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wf-space-4);
padding-block: var(--wf-space-12);
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-land__footer nav {
display: flex;
gap: var(--wf-space-6);
}
.b-land__footer nav a {
text-decoration: none;
}
@media (max-width: 48rem) {
.b-land__links { display: none; }
.b-land__nav .wf-btn--ghost { display: none; }
.b-land__hero { padding-top: var(--wf-space-12); }
} Three plans with a highlighted favourite, a billing toggle, feature lists and a FAQ accordion.
Download HTML Copy HTML Copy CSS Open Works with wallflower-ui/css (or its core.css plus any preset). Put the CSS in your stylesheet and the HTML in your page.
HTML
<div class="b-price">
<header class="b-price__head wf-container wf-container--md">
<p class="wf-text-overline">Pricing</p>
<h1 class="wf-text-h1">Simple pricing that grows with you</h1>
<p class="wf-text-lead">Start free, upgrade when your team is ready. Every plan includes unlimited viewers.</p>
<div class="wf-tabs" role="tablist" aria-label="Billing period">
<button class="wf-tab" role="tab" aria-selected="false">Monthly</button>
<button class="wf-tab" role="tab" aria-selected="true">Yearly <span class="wf-badge wf-badge--success">Save 20%</span></button>
</div>
</header>
<div class="wf-container b-price__tiers">
<section class="wf-card b-price__tier">
<div class="b-price__tier-head">
<h2>Starter</h2>
</div>
<p class="b-price__blurb">For individuals trying things out.</p>
<p class="b-price__amount"><strong>$0</strong><span>per user / month</span></p>
<a class="wf-btn wf-btn--block wf-btn--outline" href="#">Start for free</a>
<ul class="b-price__features">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1 project</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Up to 3 collaborators</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Community support</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 7-day history</li>
</ul>
</section>
<section class="wf-card b-price__tier b-price__tier--popular">
<div class="b-price__tier-head">
<h2>Pro</h2>
<span class="wf-badge wf-badge--brand">Most popular</span>
</div>
<p class="b-price__blurb">For growing teams shipping every week.</p>
<p class="b-price__amount"><strong>$24</strong><span>per user / month</span></p>
<a class="wf-btn wf-btn--block" href="#">Start 14-day trial</a>
<ul class="b-price__features">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Unlimited projects</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Unlimited collaborators</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Priority email support</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Unlimited history</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Custom domains</li>
</ul>
</section>
<section class="wf-card b-price__tier">
<div class="b-price__tier-head">
<h2>Enterprise</h2>
</div>
<p class="b-price__blurb">For organisations with advanced needs.</p>
<p class="b-price__amount"><strong>Custom</strong></p>
<a class="wf-btn wf-btn--block wf-btn--outline" href="#">Contact sales</a>
<ul class="b-price__features">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Everything in Pro</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> SSO and SCIM</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Audit logs</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Dedicated success manager</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 99.99% uptime SLA</li>
</ul>
</section>
</div>
<section class="wf-container wf-container--md b-price__faq">
<h2 class="wf-text-h3">Frequently asked questions</h2>
<div>
<details class="wf-accordion__item" open><summary>Can I change plans later?</summary><div class="wf-accordion__content">Yes. Upgrade or downgrade any time; we prorate the difference to the day.</div></details>
<details class="wf-accordion__item"><summary>What counts as a collaborator?</summary><div class="wf-accordion__content">Anyone you invite who can edit. Viewers are always free.</div></details>
<details class="wf-accordion__item"><summary>Do you offer discounts?</summary><div class="wf-accordion__content">Nonprofits and students get 50% off Pro. Email us from your organisation address.</div></details>
<details class="wf-accordion__item"><summary>Is my data secure?</summary><div class="wf-accordion__content">Data is encrypted in transit and at rest, and we are SOC 2 Type II audited.</div></details>
</div>
</section>
</div>Copy CSS
@layer base {
.b-price :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-price :where(ul, ol) { padding: 0; }
.b-price :where(a) { color: inherit; }
.b-price { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-price {
padding-block: var(--wf-space-20);
}
.b-price__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-4);
margin-bottom: var(--wf-space-12);
text-align: center;
}
.b-price__head .wf-tabs {
margin-top: var(--wf-space-4);
}
.b-price__head .wf-tab {
display: inline-flex;
align-items: center;
gap: var(--wf-space-2);
}
.b-price__tiers {
display: grid;
gap: var(--wf-space-6);
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
align-items: start;
max-width: 68rem;
}
.b-price__tier {
gap: var(--wf-space-4);
padding: var(--wf-space-8);
}
.b-price__tier--popular {
border-color: var(--brand);
box-shadow: 0 0 0 1px var(--brand), var(--wf-shadow-lg);
}
.b-price__tier-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wf-space-2);
}
.b-price__tier-head h2 {
font: 600 1.25rem / 1.2 var(--wf-font-sans);
}
.b-price__blurb {
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-price__amount {
display: flex;
align-items: baseline;
gap: var(--wf-space-2);
}
.b-price__amount strong {
font: var(--wf-heading-weight, 700) 2.75rem / 1 var(--wf-font-display);
letter-spacing: -0.03em;
}
.b-price__amount span {
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-price__features {
display: flex;
flex-direction: column;
gap: var(--wf-space-3);
padding-top: var(--wf-space-4);
border-top: var(--wf-border-width) solid var(--border);
font-size: 0.9375rem;
list-style: none;
}
.b-price__features li {
display: flex;
align-items: center;
gap: var(--wf-space-2);
}
.b-price__features svg {
flex-shrink: 0;
color: color-mix(in oklab, var(--success) 80%, var(--foreground));
}
.b-price__faq {
margin-top: var(--wf-space-20);
}
.b-price__faq h2 {
margin-bottom: var(--wf-space-4);
}Copy <div class="b-price">
<header class="b-price__head wf-container wf-container--md">
<p class="wf-text-overline">Pricing</p>
<h1 class="wf-text-h1">Simple pricing that grows with you</h1>
<p class="wf-text-lead">Start free, upgrade when your team is ready. Every plan includes unlimited viewers.</p>
<div class="wf-tabs" role="tablist" aria-label="Billing period">
<button class="wf-tab" role="tab" aria-selected="false">Monthly</button>
<button class="wf-tab" role="tab" aria-selected="true">Yearly <span class="wf-badge wf-badge--success">Save 20%</span></button>
</div>
</header>
<div class="wf-container b-price__tiers">
<section class="wf-card b-price__tier">
<div class="b-price__tier-head">
<h2>Starter</h2>
</div>
<p class="b-price__blurb">For individuals trying things out.</p>
<p class="b-price__amount"><strong>$0</strong><span>per user / month</span></p>
<a class="wf-btn wf-btn--block wf-btn--outline" href="#">Start for free</a>
<ul class="b-price__features">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1 project</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Up to 3 collaborators</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Community support</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 7-day history</li>
</ul>
</section>
<section class="wf-card b-price__tier b-price__tier--popular">
<div class="b-price__tier-head">
<h2>Pro</h2>
<span class="wf-badge wf-badge--brand">Most popular</span>
</div>
<p class="b-price__blurb">For growing teams shipping every week.</p>
<p class="b-price__amount"><strong>$24</strong><span>per user / month</span></p>
<a class="wf-btn wf-btn--block" href="#">Start 14-day trial</a>
<ul class="b-price__features">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Unlimited projects</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Unlimited collaborators</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Priority email support</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Unlimited history</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Custom domains</li>
</ul>
</section>
<section class="wf-card b-price__tier">
<div class="b-price__tier-head">
<h2>Enterprise</h2>
</div>
<p class="b-price__blurb">For organisations with advanced needs.</p>
<p class="b-price__amount"><strong>Custom</strong></p>
<a class="wf-btn wf-btn--block wf-btn--outline" href="#">Contact sales</a>
<ul class="b-price__features">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Everything in Pro</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> SSO and SCIM</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Audit logs</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Dedicated success manager</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 99.99% uptime SLA</li>
</ul>
</section>
</div>
<section class="wf-container wf-container--md b-price__faq">
<h2 class="wf-text-h3">Frequently asked questions</h2>
<div>
<details class="wf-accordion__item" open><summary>Can I change plans later?</summary><div class="wf-accordion__content">Yes. Upgrade or downgrade any time; we prorate the difference to the day.</div></details>
<details class="wf-accordion__item"><summary>What counts as a collaborator?</summary><div class="wf-accordion__content">Anyone you invite who can edit. Viewers are always free.</div></details>
<details class="wf-accordion__item"><summary>Do you offer discounts?</summary><div class="wf-accordion__content">Nonprofits and students get 50% off Pro. Email us from your organisation address.</div></details>
<details class="wf-accordion__item"><summary>Is my data secure?</summary><div class="wf-accordion__content">Data is encrypted in transit and at rest, and we are SOC 2 Type II audited.</div></details>
</div>
</section>
</div> @layer base {
.b-price :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-price :where(ul, ol) { padding: 0; }
.b-price :where(a) { color: inherit; }
.b-price { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-price {
padding-block: var(--wf-space-20);
}
.b-price__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wf-space-4);
margin-bottom: var(--wf-space-12);
text-align: center;
}
.b-price__head .wf-tabs {
margin-top: var(--wf-space-4);
}
.b-price__head .wf-tab {
display: inline-flex;
align-items: center;
gap: var(--wf-space-2);
}
.b-price__tiers {
display: grid;
gap: var(--wf-space-6);
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
align-items: start;
max-width: 68rem;
}
.b-price__tier {
gap: var(--wf-space-4);
padding: var(--wf-space-8);
}
.b-price__tier--popular {
border-color: var(--brand);
box-shadow: 0 0 0 1px var(--brand), var(--wf-shadow-lg);
}
.b-price__tier-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wf-space-2);
}
.b-price__tier-head h2 {
font: 600 1.25rem / 1.2 var(--wf-font-sans);
}
.b-price__blurb {
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-price__amount {
display: flex;
align-items: baseline;
gap: var(--wf-space-2);
}
.b-price__amount strong {
font: var(--wf-heading-weight, 700) 2.75rem / 1 var(--wf-font-display);
letter-spacing: -0.03em;
}
.b-price__amount span {
color: var(--muted-foreground);
font-size: 0.875rem;
}
.b-price__features {
display: flex;
flex-direction: column;
gap: var(--wf-space-3);
padding-top: var(--wf-space-4);
border-top: var(--wf-border-width) solid var(--border);
font-size: 0.9375rem;
list-style: none;
}
.b-price__features li {
display: flex;
align-items: center;
gap: var(--wf-space-2);
}
.b-price__features svg {
flex-shrink: 0;
color: color-mix(in oklab, var(--success) 80%, var(--foreground));
}
.b-price__faq {
margin-top: var(--wf-space-20);
}
.b-price__faq h2 {
margin-bottom: var(--wf-space-4);
} Account settings with a section nav, profile form, notification switches and a danger zone.
Download HTML Copy HTML Copy CSS Open Works with wallflower-ui/css (or its core.css plus any preset). Put the CSS in your stylesheet and the HTML in your page.
HTML
<div class="b-set wf-container wf-container--lg">
<header class="b-set__head">
<nav aria-label="Breadcrumb">
<ol class="wf-breadcrumb"><li><a href="#">Home</a></li><li><span aria-current="page">Settings</span></li></ol>
</nav>
<h1 class="wf-text-h2">Settings</h1>
<p>Manage your profile, preferences and account.</p>
</header>
<div class="b-set__layout">
<nav class="wf-nav b-set__nav" aria-label="Settings">
<a class="wf-nav__item" href="#" aria-current="page"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> Profile</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Account</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg> Notifications</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg> Billing</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg> Security</a>
</nav>
<div class="b-set__panels">
<form class="wf-card" action="#">
<div class="wf-card__header">
<h2 class="wf-card__title">Profile</h2>
<p class="wf-card__description">This is how others see you on the site.</p>
</div>
<div class="wf-card__content wf-stack">
<div class="b-set__avatar">
<span class="wf-avatar wf-avatar--lg" role="img" aria-label="Ada Lovelace">AL</span>
<div class="wf-cluster">
<button class="wf-btn wf-btn--outline wf-btn--sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload" aria-hidden="true"><path d="M12 3v12"></path><path d="m17 8-5-5-5 5"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg> Upload photo</button>
<button class="wf-btn wf-btn--ghost wf-btn--sm" type="button">Remove</button>
</div>
</div>
<div class="b-set__two">
<div class="wf-field">
<label class="wf-label" for="set-name">Display name</label>
<input class="wf-input" id="set-name" value="Ada Lovelace" />
</div>
<div class="wf-field">
<label class="wf-label" for="set-user">Username</label>
<input class="wf-input" id="set-user" value="ada" />
<p class="wf-hint">acme.com/ada</p>
</div>
</div>
<div class="wf-field">
<label class="wf-label" for="set-email">Email</label>
<select class="wf-select" id="set-email"><option>ada@example.com</option><option>ada@acme.com</option></select>
</div>
<div class="wf-field">
<label class="wf-label" for="set-bio">Bio</label>
<textarea class="wf-textarea" id="set-bio" rows="3">I write the first programs for machines that don't exist yet.</textarea>
<p class="wf-hint">Max 160 characters.</p>
</div>
</div>
<div class="wf-card__footer b-set__actions">
<button class="wf-btn wf-btn--ghost" type="reset">Cancel</button>
<button class="wf-btn" type="submit">Save changes</button>
</div>
</form>
<section class="wf-card">
<div class="wf-card__header">
<h2 class="wf-card__title">Notifications</h2>
<p class="wf-card__description">Choose what we email you about.</p>
</div>
<ul class="wf-card__content b-set__toggles">
<li>
<label for="set-n0"><strong>Product updates</strong><span>News about features and improvements.</span></label>
<input class="wf-switch" type="checkbox" role="switch" id="set-n0" checked />
</li>
<li>
<label for="set-n1"><strong>Comments</strong><span>When someone replies to you or mentions you.</span></label>
<input class="wf-switch" type="checkbox" role="switch" id="set-n1" checked />
</li>
<li>
<label for="set-n2"><strong>Weekly digest</strong><span>A summary of activity every Monday.</span></label>
<input class="wf-switch" type="checkbox" role="switch" id="set-n2" />
</li>
</ul>
</section>
<section class="wf-card b-set__danger">
<div class="wf-card__header">
<h2 class="wf-card__title">Delete account</h2>
<p class="wf-card__description">Permanently remove your account and all of its data. This can't be undone.</p>
</div>
<div class="wf-card__footer b-set__actions">
<button class="wf-btn wf-btn--destructive" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash lucide-trash-2" aria-hidden="true"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> Delete account</button>
</div>
</section>
</div>
</div>
</div>Copy CSS
@layer base {
.b-set :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-set :where(ul, ol) { padding: 0; }
.b-set :where(a) { color: inherit; }
.b-set { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-set {
padding-block: var(--wf-space-12);
}
.b-set__head {
display: flex;
flex-direction: column;
gap: var(--wf-space-2);
padding-bottom: var(--wf-space-6);
margin-bottom: var(--wf-space-8);
border-bottom: var(--wf-border-width) solid var(--border);
}
.b-set__head p {
color: var(--muted-foreground);
}
.b-set__layout {
display: grid;
gap: var(--wf-space-8);
grid-template-columns: 12rem minmax(0, 1fr);
align-items: start;
}
.b-set__nav {
position: sticky;
top: var(--wf-space-6);
}
.b-set__panels {
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
}
.b-set__avatar {
display: flex;
align-items: center;
gap: var(--wf-space-4);
}
.b-set__two {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.b-set__actions {
justify-content: flex-end;
padding-top: var(--wf-space-4);
border-top: var(--wf-border-width) solid var(--border);
}
.b-set__toggles {
display: flex;
flex-direction: column;
gap: var(--wf-space-5);
list-style: none;
}
.b-set__toggles li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wf-space-4);
}
.b-set__toggles label {
display: flex;
flex-direction: column;
gap: 0.125rem;
font-size: 0.875rem;
}
.b-set__toggles span {
color: var(--muted-foreground);
}
.b-set__danger {
border-color: color-mix(in oklab, var(--destructive) 45%, var(--border));
}
@media (max-width: 48rem) {
.b-set__layout { grid-template-columns: minmax(0, 1fr); }
.b-set__nav { position: static; flex-direction: row; overflow-x: auto; }
.b-set__nav .wf-nav__item { flex-shrink: 0; }
}Copy <div class="b-set wf-container wf-container--lg">
<header class="b-set__head">
<nav aria-label="Breadcrumb">
<ol class="wf-breadcrumb"><li><a href="#">Home</a></li><li><span aria-current="page">Settings</span></li></ol>
</nav>
<h1 class="wf-text-h2">Settings</h1>
<p>Manage your profile, preferences and account.</p>
</header>
<div class="b-set__layout">
<nav class="wf-nav b-set__nav" aria-label="Settings">
<a class="wf-nav__item" href="#" aria-current="page"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> Profile</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Account</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg> Notifications</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg> Billing</a>
<a class="wf-nav__item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg> Security</a>
</nav>
<div class="b-set__panels">
<form class="wf-card" action="#">
<div class="wf-card__header">
<h2 class="wf-card__title">Profile</h2>
<p class="wf-card__description">This is how others see you on the site.</p>
</div>
<div class="wf-card__content wf-stack">
<div class="b-set__avatar">
<span class="wf-avatar wf-avatar--lg" role="img" aria-label="Ada Lovelace">AL</span>
<div class="wf-cluster">
<button class="wf-btn wf-btn--outline wf-btn--sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload" aria-hidden="true"><path d="M12 3v12"></path><path d="m17 8-5-5-5 5"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg> Upload photo</button>
<button class="wf-btn wf-btn--ghost wf-btn--sm" type="button">Remove</button>
</div>
</div>
<div class="b-set__two">
<div class="wf-field">
<label class="wf-label" for="set-name">Display name</label>
<input class="wf-input" id="set-name" value="Ada Lovelace" />
</div>
<div class="wf-field">
<label class="wf-label" for="set-user">Username</label>
<input class="wf-input" id="set-user" value="ada" />
<p class="wf-hint">acme.com/ada</p>
</div>
</div>
<div class="wf-field">
<label class="wf-label" for="set-email">Email</label>
<select class="wf-select" id="set-email"><option>ada@example.com</option><option>ada@acme.com</option></select>
</div>
<div class="wf-field">
<label class="wf-label" for="set-bio">Bio</label>
<textarea class="wf-textarea" id="set-bio" rows="3">I write the first programs for machines that don't exist yet.</textarea>
<p class="wf-hint">Max 160 characters.</p>
</div>
</div>
<div class="wf-card__footer b-set__actions">
<button class="wf-btn wf-btn--ghost" type="reset">Cancel</button>
<button class="wf-btn" type="submit">Save changes</button>
</div>
</form>
<section class="wf-card">
<div class="wf-card__header">
<h2 class="wf-card__title">Notifications</h2>
<p class="wf-card__description">Choose what we email you about.</p>
</div>
<ul class="wf-card__content b-set__toggles">
<li>
<label for="set-n0"><strong>Product updates</strong><span>News about features and improvements.</span></label>
<input class="wf-switch" type="checkbox" role="switch" id="set-n0" checked />
</li>
<li>
<label for="set-n1"><strong>Comments</strong><span>When someone replies to you or mentions you.</span></label>
<input class="wf-switch" type="checkbox" role="switch" id="set-n1" checked />
</li>
<li>
<label for="set-n2"><strong>Weekly digest</strong><span>A summary of activity every Monday.</span></label>
<input class="wf-switch" type="checkbox" role="switch" id="set-n2" />
</li>
</ul>
</section>
<section class="wf-card b-set__danger">
<div class="wf-card__header">
<h2 class="wf-card__title">Delete account</h2>
<p class="wf-card__description">Permanently remove your account and all of its data. This can't be undone.</p>
</div>
<div class="wf-card__footer b-set__actions">
<button class="wf-btn wf-btn--destructive" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash lucide-trash-2" aria-hidden="true"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> Delete account</button>
</div>
</section>
</div>
</div>
</div> @layer base {
.b-set :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-set :where(ul, ol) { padding: 0; }
.b-set :where(a) { color: inherit; }
.b-set { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-set {
padding-block: var(--wf-space-12);
}
.b-set__head {
display: flex;
flex-direction: column;
gap: var(--wf-space-2);
padding-bottom: var(--wf-space-6);
margin-bottom: var(--wf-space-8);
border-bottom: var(--wf-border-width) solid var(--border);
}
.b-set__head p {
color: var(--muted-foreground);
}
.b-set__layout {
display: grid;
gap: var(--wf-space-8);
grid-template-columns: 12rem minmax(0, 1fr);
align-items: start;
}
.b-set__nav {
position: sticky;
top: var(--wf-space-6);
}
.b-set__panels {
display: flex;
flex-direction: column;
gap: var(--wf-space-6);
}
.b-set__avatar {
display: flex;
align-items: center;
gap: var(--wf-space-4);
}
.b-set__two {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.b-set__actions {
justify-content: flex-end;
padding-top: var(--wf-space-4);
border-top: var(--wf-border-width) solid var(--border);
}
.b-set__toggles {
display: flex;
flex-direction: column;
gap: var(--wf-space-5);
list-style: none;
}
.b-set__toggles li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wf-space-4);
}
.b-set__toggles label {
display: flex;
flex-direction: column;
gap: 0.125rem;
font-size: 0.875rem;
}
.b-set__toggles span {
color: var(--muted-foreground);
}
.b-set__danger {
border-color: color-mix(in oklab, var(--destructive) 45%, var(--border));
}
@media (max-width: 48rem) {
.b-set__layout { grid-template-columns: minmax(0, 1fr); }
.b-set__nav { position: static; flex-direction: row; overflow-x: auto; }
.b-set__nav .wf-nav__item { flex-shrink: 0; }
} An article with author meta, hero image, readable prose styles, a newsletter signup and related posts.
Download HTML Copy HTML Copy CSS Open Works with wallflower-ui/css (or its core.css plus any preset). Put the CSS in your stylesheet and the HTML in your page.
HTML
<div class="b-blog">
<header class="wf-container b-blog__nav">
<a class="b-blog__brand" href="#"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> The Acme Journal</a>
<a class="wf-btn wf-btn--outline wf-btn--sm" href="#">Subscribe</a>
</header>
<article class="wf-container wf-container--prose b-blog__article">
<header class="b-blog__head">
<a class="wf-badge wf-badge--brand" href="#">Design systems</a>
<h1 class="wf-text-h1">One design system for every app you build</h1>
<p class="wf-text-lead">How a single set of tokens let a five-person team ship twelve products that still feel like one brand.</p>
<div class="b-blog__meta">
<span class="wf-avatar" aria-hidden="true">SD</span>
<span><strong>Sofia Davis</strong><br /><time datetime="2026-10-12">Oct 12, 2026</time> · 6 min read</span>
</div>
</header>
<figure class="b-blog__hero">
<div class="wf-bg-aurora wf-bg-fill" aria-hidden="true"></div>
<span class="b-blog__hero-mark" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles lucide-stars" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></span>
<figcaption>Every product starts from the same tokens.</figcaption>
</figure>
<div class="b-blog__prose">
<p>Two years ago every one of our apps had its own button. Some were rounded, some were square, and three of them were a slightly different shade of the same blue. Nobody decided that; it just happened, one pull request at a time.</p>
<h2>Start with tokens, not components</h2>
<p>The fix wasn't a component library. It was agreeing on the <em>decisions</em> underneath: which colors exist and what they are for, how round corners are, how much space sits between things. Once those were named, components mostly wrote themselves.</p>
<blockquote>A design system is a set of decisions you only have to make once.</blockquote>
<p>We store every decision as a CSS variable. A button doesn't know it's blue; it knows it's <code>var(--primary)</code>. Switching a whole product's look is a one-line change:</p>
<pre><code><html data-preset="midnight" class="dark"></code></pre>
<h2>What we'd tell our past selves</h2>
<ul>
<li>Name colors by job (<code>--destructive</code>), never by hue (<code>--red</code>).</li>
<li>Check contrast in the build, not in review.</li>
<li>Let products override tokens, but never fork components.</li>
</ul>
<p>The result: new products start looking finished on day one, and designers spend their time on the problems that are actually new.</p>
</div>
<aside class="wf-card b-blog__subscribe">
<h2 class="wf-card__title">Get the next post in your inbox</h2>
<p class="wf-card__description">One email a month. No spam, unsubscribe any time.</p>
<form class="b-blog__form" action="#">
<label class="wf-label" for="blog-email" hidden>Email</label>
<input class="wf-input" id="blog-email" type="email" placeholder="you@example.com" />
<button class="wf-btn" type="submit">Subscribe</button>
</form>
</aside>
</article>
<section class="wf-container b-blog__related" aria-labelledby="blog-related">
<h2 class="wf-text-h4" id="blog-related">Keep reading</h2>
<div class="b-blog__cards">
<a class="wf-card wf-card--interactive b-blog__card" href="#">
<span class="b-blog__thumb" aria-hidden="true"></span>
<span class="wf-text-overline">Design</span>
<strong>Choosing a type scale that works on every screen</strong>
</a>
<a class="wf-card wf-card--interactive b-blog__card" href="#">
<span class="b-blog__thumb" aria-hidden="true"></span>
<span class="wf-text-overline">Engineering</span>
<strong>How we cut our CSS by 70% with design tokens</strong>
</a>
<a class="wf-card wf-card--interactive b-blog__card" href="#">
<span class="b-blog__thumb" aria-hidden="true"></span>
<span class="wf-text-overline">Product</span>
<strong>Writing release notes people actually read</strong>
</a>
</div>
</section>
</div>Copy CSS
@layer base {
.b-blog :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-blog :where(ul, ol) { padding: 0; }
.b-blog :where(a) { color: inherit; }
.b-blog { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-blog__nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--wf-space-4);
border-bottom: var(--wf-border-width) solid var(--border);
}
.b-blog__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
font: 700 1.0625rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-blog__article {
display: flex;
flex-direction: column;
gap: var(--wf-space-10);
padding-block: var(--wf-space-16);
}
.b-blog__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--wf-space-4);
}
.b-blog__meta {
display: flex;
align-items: center;
gap: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.875rem;
line-height: 1.4;
}
.b-blog__meta strong {
color: var(--foreground);
}
.b-blog__hero {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
aspect-ratio: 16 / 8;
overflow: hidden;
border: var(--wf-border-width) solid var(--border);
border-radius: var(--wf-radius-2xl);
}
.b-blog__hero-mark {
color: var(--brand);
}
.b-blog__hero figcaption {
position: absolute;
bottom: var(--wf-space-3);
left: var(--wf-space-4);
color: var(--muted-foreground);
font-size: 0.8125rem;
}
.b-blog__prose {
font-size: 1.0625rem;
line-height: 1.75;
}
.b-blog__prose > * + * {
margin-top: 1.25em;
}
.b-blog__prose h2 {
margin-top: 2em;
font: var(--wf-text-h3);
letter-spacing: var(--wf-text-h3-tracking);
}
.b-blog__prose blockquote {
padding-left: var(--wf-space-6);
border-left: 3px solid var(--brand);
font: var(--wf-text-h4);
font-family: var(--wf-font-display);
}
.b-blog__prose ul {
padding-left: 1.25em;
}
.b-blog__prose li + li {
margin-top: 0.5em;
}
.b-blog__prose code {
padding: 0.125rem 0.375rem;
border-radius: var(--wf-radius-sm);
background: var(--muted);
font-size: 0.875em;
}
.b-blog__prose pre {
padding: var(--wf-space-4);
overflow-x: auto;
border-radius: var(--wf-radius-lg);
background: var(--muted);
font-size: 0.875rem;
}
.b-blog__prose pre code {
padding: 0;
background: none;
}
.b-blog__subscribe {
gap: var(--wf-space-2);
padding: var(--wf-space-6);
}
.b-blog__form {
display: flex;
gap: var(--wf-space-2);
margin-top: var(--wf-space-3);
}
.b-blog__related {
display: flex;
flex-direction: column;
gap: var(--wf-space-4);
padding-block: var(--wf-space-12) var(--wf-space-20);
border-top: var(--wf-border-width) solid var(--border);
}
.b-blog__cards {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.b-blog__card {
gap: var(--wf-space-2);
padding: var(--wf-space-4);
text-decoration: none;
}
.b-blog__thumb {
aspect-ratio: 16 / 9;
margin-bottom: var(--wf-space-2);
border-radius: var(--wf-radius-lg);
background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 55%, var(--muted)), color-mix(in oklab, var(--brand-2) 55%, var(--muted)));
}
@media (max-width: 40rem) {
.b-blog__form { flex-direction: column; }
}Copy <div class="b-blog">
<header class="wf-container b-blog__nav">
<a class="b-blog__brand" href="#"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="7" fill="var(--brand)"/><circle cx="12" cy="12" r="5" fill="var(--brand-2)"/></svg> The Acme Journal</a>
<a class="wf-btn wf-btn--outline wf-btn--sm" href="#">Subscribe</a>
</header>
<article class="wf-container wf-container--prose b-blog__article">
<header class="b-blog__head">
<a class="wf-badge wf-badge--brand" href="#">Design systems</a>
<h1 class="wf-text-h1">One design system for every app you build</h1>
<p class="wf-text-lead">How a single set of tokens let a five-person team ship twelve products that still feel like one brand.</p>
<div class="b-blog__meta">
<span class="wf-avatar" aria-hidden="true">SD</span>
<span><strong>Sofia Davis</strong><br /><time datetime="2026-10-12">Oct 12, 2026</time> · 6 min read</span>
</div>
</header>
<figure class="b-blog__hero">
<div class="wf-bg-aurora wf-bg-fill" aria-hidden="true"></div>
<span class="b-blog__hero-mark" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles lucide-stars" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></span>
<figcaption>Every product starts from the same tokens.</figcaption>
</figure>
<div class="b-blog__prose">
<p>Two years ago every one of our apps had its own button. Some were rounded, some were square, and three of them were a slightly different shade of the same blue. Nobody decided that; it just happened, one pull request at a time.</p>
<h2>Start with tokens, not components</h2>
<p>The fix wasn't a component library. It was agreeing on the <em>decisions</em> underneath: which colors exist and what they are for, how round corners are, how much space sits between things. Once those were named, components mostly wrote themselves.</p>
<blockquote>A design system is a set of decisions you only have to make once.</blockquote>
<p>We store every decision as a CSS variable. A button doesn't know it's blue; it knows it's <code>var(--primary)</code>. Switching a whole product's look is a one-line change:</p>
<pre><code><html data-preset="midnight" class="dark"></code></pre>
<h2>What we'd tell our past selves</h2>
<ul>
<li>Name colors by job (<code>--destructive</code>), never by hue (<code>--red</code>).</li>
<li>Check contrast in the build, not in review.</li>
<li>Let products override tokens, but never fork components.</li>
</ul>
<p>The result: new products start looking finished on day one, and designers spend their time on the problems that are actually new.</p>
</div>
<aside class="wf-card b-blog__subscribe">
<h2 class="wf-card__title">Get the next post in your inbox</h2>
<p class="wf-card__description">One email a month. No spam, unsubscribe any time.</p>
<form class="b-blog__form" action="#">
<label class="wf-label" for="blog-email" hidden>Email</label>
<input class="wf-input" id="blog-email" type="email" placeholder="you@example.com" />
<button class="wf-btn" type="submit">Subscribe</button>
</form>
</aside>
</article>
<section class="wf-container b-blog__related" aria-labelledby="blog-related">
<h2 class="wf-text-h4" id="blog-related">Keep reading</h2>
<div class="b-blog__cards">
<a class="wf-card wf-card--interactive b-blog__card" href="#">
<span class="b-blog__thumb" aria-hidden="true"></span>
<span class="wf-text-overline">Design</span>
<strong>Choosing a type scale that works on every screen</strong>
</a>
<a class="wf-card wf-card--interactive b-blog__card" href="#">
<span class="b-blog__thumb" aria-hidden="true"></span>
<span class="wf-text-overline">Engineering</span>
<strong>How we cut our CSS by 70% with design tokens</strong>
</a>
<a class="wf-card wf-card--interactive b-blog__card" href="#">
<span class="b-blog__thumb" aria-hidden="true"></span>
<span class="wf-text-overline">Product</span>
<strong>Writing release notes people actually read</strong>
</a>
</div>
</section>
</div> @layer base {
.b-blog :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.b-blog :where(ul, ol) { padding: 0; }
.b-blog :where(a) { color: inherit; }
.b-blog { font-family: var(--wf-font-sans); color: var(--foreground); background: var(--background); }
}
.b-blog__nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--wf-space-4);
border-bottom: var(--wf-border-width) solid var(--border);
}
.b-blog__brand {
display: flex;
align-items: center;
gap: var(--wf-space-2);
font: 700 1.0625rem / 1 var(--wf-font-display);
text-decoration: none;
}
.b-blog__article {
display: flex;
flex-direction: column;
gap: var(--wf-space-10);
padding-block: var(--wf-space-16);
}
.b-blog__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--wf-space-4);
}
.b-blog__meta {
display: flex;
align-items: center;
gap: var(--wf-space-3);
color: var(--muted-foreground);
font-size: 0.875rem;
line-height: 1.4;
}
.b-blog__meta strong {
color: var(--foreground);
}
.b-blog__hero {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
aspect-ratio: 16 / 8;
overflow: hidden;
border: var(--wf-border-width) solid var(--border);
border-radius: var(--wf-radius-2xl);
}
.b-blog__hero-mark {
color: var(--brand);
}
.b-blog__hero figcaption {
position: absolute;
bottom: var(--wf-space-3);
left: var(--wf-space-4);
color: var(--muted-foreground);
font-size: 0.8125rem;
}
.b-blog__prose {
font-size: 1.0625rem;
line-height: 1.75;
}
.b-blog__prose > * + * {
margin-top: 1.25em;
}
.b-blog__prose h2 {
margin-top: 2em;
font: var(--wf-text-h3);
letter-spacing: var(--wf-text-h3-tracking);
}
.b-blog__prose blockquote {
padding-left: var(--wf-space-6);
border-left: 3px solid var(--brand);
font: var(--wf-text-h4);
font-family: var(--wf-font-display);
}
.b-blog__prose ul {
padding-left: 1.25em;
}
.b-blog__prose li + li {
margin-top: 0.5em;
}
.b-blog__prose code {
padding: 0.125rem 0.375rem;
border-radius: var(--wf-radius-sm);
background: var(--muted);
font-size: 0.875em;
}
.b-blog__prose pre {
padding: var(--wf-space-4);
overflow-x: auto;
border-radius: var(--wf-radius-lg);
background: var(--muted);
font-size: 0.875rem;
}
.b-blog__prose pre code {
padding: 0;
background: none;
}
.b-blog__subscribe {
gap: var(--wf-space-2);
padding: var(--wf-space-6);
}
.b-blog__form {
display: flex;
gap: var(--wf-space-2);
margin-top: var(--wf-space-3);
}
.b-blog__related {
display: flex;
flex-direction: column;
gap: var(--wf-space-4);
padding-block: var(--wf-space-12) var(--wf-space-20);
border-top: var(--wf-border-width) solid var(--border);
}
.b-blog__cards {
display: grid;
gap: var(--wf-space-4);
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.b-blog__card {
gap: var(--wf-space-2);
padding: var(--wf-space-4);
text-decoration: none;
}
.b-blog__thumb {
aspect-ratio: 16 / 9;
margin-bottom: var(--wf-space-2);
border-radius: var(--wf-radius-lg);
background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 55%, var(--muted)), color-mix(in oklab, var(--brand-2) 55%, var(--muted)));
}
@media (max-width: 40rem) {
.b-blog__form { flex-direction: column; }
} 