A little inspiration.
A lot to build.

<button class="primary" data-action="saved">Create project <span>↗</span></button>

<button data-action="saved">＋ Add to collection</button>

<div class="row"><button aria-label="Like" data-like>♡</button><button aria-label="Bookmark" data-like>☆</button><button aria-label="More options" data-popover>•••</button><span class="popover" hidden>Edit · Duplicate · Archive</span></div>

<div class="segmented"><button data-align aria-pressed="true">Left</button><button data-align aria-pressed="false">Center</button><button data-align aria-pressed="false">Right</button></div>

<button class="danger" data-action="removed">Remove item <span>×</span></button>

<button disabled><span class="spinner"></span> Preparing workspace</button>

<label>Project name<input placeholder="My next big idea" value="Untitled studio"></label>

<label>Framework<select><option>Vanilla JavaScript</option><option>React</option><option>Vue</option><option>Svelte</option></select></label>

<label class="row"><input type="checkbox" checked> Send me product updates</label>

<div class="row spread"><span>Airplane mode</span><button class="switch" role="switch" aria-checked="false" aria-label="Airplane mode"></button></div>

<fieldset><legend>Choose your plan</legend><label class="row"><input type="radio" name="plan" checked> Personal <small>Free</small></label><label class="row"><input type="radio" name="plan"> Team <small>$12 / mo</small></label></fieldset>

<label>Volume <output>64%</output><input type="range" min="0" max="100" value="64" aria-label="Volume"></label>

<button data-dialog="standard">Open dialog ↗</button>

<button data-dialog="alert">Archive project</button>

<div class="anchor"><button data-popover aria-expanded="false">Set dimensions ⌄</button><div class="popover" hidden><b>Dimensions</b><label>Width<input value="100%"></label></div></div>

<div class="anchor"><button data-tooltip aria-describedby="tooltip-demo">Hover or focus me</button><span class="tooltip" id="tooltip-demo" role="tooltip" hidden>Add to your collection</span></div>

<div class="anchor"><button data-popover aria-expanded="false">My account ⌄</button><div class="popover" hidden><button data-action="profile">Profile</button><button data-action="settings">Settings</button></div></div>

<button data-dialog="sheet">Open sidebar →</button>

<div class="alert"><span>ⓘ</span><div><b>A little heads-up</b><p>Your trial ends in 7 days.</p></div></div>

<button data-action="saved">Save changes <span>⌘ S</span></button>

<div class="full"><div class="row spread"><b>Uploading assets</b><small>72%</small></div><progress value="72" max="100">72%</progress><small>18 of 25 files uploaded</small></div>

<div class="row full"><div class="skeleton avatar"></div><div class="full"><div class="skeleton line"></div><div class="skeleton line short"></div></div></div>

<div class="row wrap"><span class="badge success">● Operational</span><span class="badge">◷ Pending</span><span class="badge error">● Offline</span></div>

<div class="center"><div class="empty-icon">▧</div><b>No files in this folder</b><p>Start with something worth sharing.</p><button data-action="uploaded">＋ Add a sample file</button></div>

<div class="row"><span class="avatar purple">JD</span><span class="avatar peach">AK</span><span class="avatar green">MR</span><span class="avatar">+5</span></div>

<div class="row wrap"><span class="badge dark">Featured</span><span class="badge">Design</span><span class="badge purple">New release</span></div>

<table><thead><tr><th>Invoice</th><th>Status</th><th>Amount</th></tr></thead><tbody><tr><td>INV-001</td><td><span class="badge success">Paid</span></td><td>$250</td></tr><tr><td>INV-002</td><td>Pending</td><td>$150</td></tr><tr><td>INV-003</td><td>Paid</td><td>$350</td></tr></tbody></table>

<div class="full"><small>Total revenue</small><div class="metric">$45,231<span>.89</span></div><small><span class="positive">↗ 20.1%</span> from last month</small></div>

<div class="full activity"><p><i class="dot"></i><b>Project deployed</b><small>2m ago</small></p><p><i class="dot gray"></i><b>Review approved</b><small>38m ago</small></p><p><i class="dot gray"></i><b>Branch created</b><small>1h ago</small></p></div>

<div class="chart" role="img" aria-label="Weekly activity: Monday 40, Tuesday 65, Wednesday 50, Thursday 90, Friday 72, Saturday 55, Sunday 80"><div style="--h:40%">M</div><div style="--h:65%">T</div><div style="--h:50%">W</div><div style="--h:90%">T</div><div style="--h:72%">F</div><div style="--h:55%">S</div><div style="--h:80%">S</div></div>

<div class="full tabs"><div class="segmented" role="tablist" aria-label="Account"><button role="tab" aria-selected="true" data-tab="Account">Account</button><button role="tab" aria-selected="false" data-tab="Password">Password</button></div><div role="tabpanel"><b>Your account</b><p>Manage your profile and preferences.</p></div></div>

<nav class="row" aria-label="Breadcrumb"><button data-action="home">Home</button><span>›</span><button data-action="components">Components</button><span>›</span><b>Button</b></nav>

<div class="pagination row"><button data-page="prev" aria-label="Previous page">‹</button><button data-page="1" aria-current="page">1</button><button data-page="2">2</button><button data-page="3">3</button><button data-page="next" aria-label="Next page">›</button></div>

<nav class="row"><button data-nav aria-pressed="true">Overview</button><button data-nav aria-pressed="false">Projects</button><button data-nav aria-pressed="false">Team</button></nav>

<div class="command full"><input placeholder="Type a command…" aria-label="Search commands" data-command><div><button data-action="calendar">▦ Calendar</button><button data-action="search">⌕ Search projects</button><button data-action="settings">⚙ Settings</button></div></div>

<nav class="vertical full"><button data-nav aria-pressed="true">▦ Overview <small>12</small></button><button data-nav aria-pressed="false">▧ Projects <small>8</small></button><button data-nav aria-pressed="false">♧ Team <small>4</small></button></nav>

<div class="mini-card"><b>Create something great.</b><p>Your next project starts right here.</p><button class="primary" data-action="created">Get started →</button></div>

<div class="accordion full"><button aria-expanded="false" data-accordion>Is it accessible? <span>＋</span></button><p hidden>Yes. Built with native controls, keyboard support, and clear ARIA states.</p><button aria-expanded="false" data-accordion>Can I customize it? <span>＋</span></button><p hidden>Absolutely. The HTML and CSS are yours to adapt.</p></div>

<div class="full"><b>The space between</b><p>A collection of thoughtfully built interfaces.</p><hr><div class="row"><span>Design</span><span class="divider"></span><span>Develop</span><span class="divider"></span><span>Ship</span></div></div>

<div class="scroll full" tabindex="0" aria-label="Design resources"><div>Foundations</div><div>Color systems</div><div>Typography</div><div>Spacing</div><div>Components</div><div>Patterns</div><div>Accessibility</div><div>Motion</div><div>Resources</div><div>Guidelines</div></div>

<div class="ratio"><span>16 : 9</span><small>A little room for possibility</small></div>

<div class="full"><button class="full" data-accordion aria-expanded="false">@studio / components <span>⌄</span></button><div hidden class="file-list">button.html<br>accordion.html<br>dialog.html</div></div>

<div class="full"><small class="eyebrow">THE NEXT CHAPTER</small><h2 class="demo-heading">Less, but better.</h2><p>Make space for what matters.</p></div>

<p class="prose">The best interfaces feel familiar from the very first click. A little clarity goes a long way.</p>

<blockquote>“Simplicity is the ultimate sophistication.”<small>— A principle worth keeping</small></blockquote>

<p>Use <code class="inline-code">display: flex</code> to bring everything into alignment.</p>

<div class="row"><span>Open command menu</span><kbd>⌘</kbd><kbd>K</kbd></div>

<ul class="checklist"><li>Thoughtful by default</li><li>Accessible by design</li><li>Ready to make your own</li></ul>