<header class="h07">
<a href="#" class="h07-logo"><span></span>Studio<em>docs</em></a>
<button class="h07-search" aria-label="Search docs"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span>Search docs…</span><kbd>⌘K</kbd></button>
<nav class="h07-nav" aria-label="Main">
<a href="#">Docs</a>
<a href="#">Components</a>
<a href="#">Blog</a>
</nav>
<div class="h07-right">
<a href="#" class="h07-gh" aria-label="Source code"><svg viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"/></svg></a>
<span class="h07-av">AC</span>
<button class="h07-burger" aria-label="Open menu" aria-expanded="false"><i></i><i></i></button>
</div>
<div class="h07-palette" role="dialog" aria-label="Search">
<div class="h07-box">
<label class="h07-input"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input type="text" placeholder="Search documentation…"><kbd>Esc</kbd></label>
<p>Suggestions</p>
<a href="#"><i>↳</i>Getting started<small>Guide</small></a>
<a href="#"><i>↳</i>Buttons library<small>Components</small></a>
<a href="#"><i>↳</i>Theming & dark mode<small>Guide</small></a>
<a href="#"><i>↳</i>Motion tokens<small>Reference</small></a>
</div>
</div>
</header>