.sb-grp {
display: grid; grid-template-columns: 240px 1fr;
min-height: 480px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background:
radial-gradient(circle at 80% 20%, #ffe4ec 0%, transparent 40%),
radial-gradient(circle at 20% 80%, #d4f6e8 0%, transparent 40%),
#fff7e8;
color: #1a1a1a;
border-radius: 16px; overflow: hidden;
border: 3px solid #1a1a1a;
}
.sb-grp-side {
background:
repeating-linear-gradient(45deg, transparent 0 20px, rgba(26,26,26,0.04) 20px 21px),
#ffd4e5;
border-right: 3px solid #1a1a1a;
padding: 18px 14px;
display: flex; flex-direction: column; gap: 16px;
overflow-y: auto; max-height: 480px;
}
.sb-grp-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; text-decoration: none; border-bottom: 2px dashed #1a1a1a; }
.sb-grp-dot { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #ffd400; border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-name { font-family: 'Helvetica Neue', system-ui, sans-serif; font-size: 16px; font-weight: 900; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1; }
.sb-grp-name small { display: block; font-size: 9.5px; font-weight: 600; color: #c54b8c; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; }
.sb-grp-side h3 { margin: 0 0 6px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #c54b8c; }
.sb-grp-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sb-grp-side a {
display: block;
padding: 8px 12px;
border-radius: 22px;
font-size: 13px; font-weight: 700;
color: #1a1a1a;
background: #fff;
border: 2px solid #1a1a1a;
text-decoration: none;
transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.sb-grp-side a:hover { background: #fff7e8; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-side a[aria-current="page"] { background: #6dd5b3; color: #1a1a1a; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-main {
position: relative;
padding: 30px 32px;
display: flex; flex-direction: column; gap: 18px;
}
.sb-grp-main::before {
content: ''; position: absolute; top: 24px; right: 28px;
width: 56px; height: 56px;
background: #ffd400; border: 3px solid #1a1a1a;
transform: rotate(15deg);
box-shadow: 4px 4px 0 #1a1a1a;
z-index: 0;
}
.sb-grp-main::after {
content: ''; position: absolute; bottom: 80px; right: 60px;
width: 30px; height: 30px;
border-radius: 50%;
background: #c54b8c; border: 3px solid #1a1a1a;
box-shadow: 3px 3px 0 #1a1a1a;
z-index: 0;
}
.sb-grp-eye { position: relative; z-index: 1; font-family: 'Helvetica Neue', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; color: #c54b8c; }
.sb-grp-main h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92; color: #1a1a1a; letter-spacing: -0.03em; }
.sb-grp-main h2::after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 6px; background: #c54b8c; border: 2px solid #1a1a1a; border-radius: 50%; vertical-align: middle; box-shadow: 2px 2px 0 #1a1a1a; }
.sb-grp-main p { position: relative; z-index: 1; margin: 0; font-size: 13.5px; color: #4a4a4a; line-height: 1.6; max-width: 460px; }
.sb-grp-main code { font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700; color: #1a1a1a; background: #ffd400; padding: 1px 6px; border-radius: 3px; border: 1.5px solid #1a1a1a; }
.sb-grp-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; max-width: 480px; }
.sb-grp-c { padding: 14px 14px; border: 2.5px solid #1a1a1a; border-radius: 14px; box-shadow: 4px 4px 0 #1a1a1a; display: flex; flex-direction: column; gap: 2px; }
.sb-grp-c strong { font-size: 22px; font-weight: 900; color: #1a1a1a; line-height: 1; letter-spacing: -0.02em; }
.sb-grp-c span { font-size: 11px; font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.08em; }
.sb-grp-c-mint { background: #6dd5b3; }
.sb-grp-c-lemon { background: #ffd400; }
.sb-grp-c-coral { background: #ff8b7a; }
@media (max-width: 720px) {
.sb-grp { grid-template-columns: 1fr; }
.sb-grp-side { border-right: 0; border-bottom: 3px solid #1a1a1a; max-height: none; }
.sb-grp-cards { grid-template-columns: 1fr; }
} <div class="sb-grp">
<aside class="sb-grp-side" aria-label="Primary">
<a class="sb-grp-brand" href="#!">
<span class="sb-grp-dot" aria-hidden="true"></span>
<span class="sb-grp-name">Sundae<small>by Atelier</small></span>
</a>
<nav aria-label="Workspace">
<h3>Workspace</h3>
<ul>
<li><a href="#!" aria-current="page">Dashboard</a></li>
<li><a href="#!">Projects</a></li>
<li><a href="#!">Team</a></li>
</ul>
</nav>
<nav aria-label="Account">
<h3>Account</h3>
<ul>
<li><a href="#!">Profile</a></li>
<li><a href="#!">Billing</a></li>
<li><a href="#!">API keys</a></li>
</ul>
</nav>
<nav aria-label="Help">
<h3>Help</h3>
<ul>
<li><a href="#!">Documentation</a></li>
<li><a href="#!">Support</a></li>
</ul>
</nav>
</aside>
<main class="sb-grp-main">
<span class="sb-grp-eye">★ HELLO, FRIEND</span>
<h2>Welcome<br/>back!</h2>
<p>Each section is a separate <code><nav></code> — screen readers skip cleanly between Workspace / Account / Help. The squiggle background is pure CSS (<code>radial-gradient</code> + <code>repeating</code>).</p>
<div class="sb-grp-cards">
<div class="sb-grp-c sb-grp-c-mint"><strong>284</strong><span>Active</span></div>
<div class="sb-grp-c sb-grp-c-lemon"><strong>47</strong><span>Pending</span></div>
<div class="sb-grp-c sb-grp-c-coral"><strong>12</strong><span>Closed</span></div>
</div>
</main>
</div> Live preview Edit any tab — preview updates live Ready