How case studies are built
Cards, icons and small visuals carry the story. Paragraphs only support them. Every case study follows the same few rules.
Say it in a card
One idea per card. A short title and one or two sentences.
Fill the one thing that matters
The key finding, the solution and the takeaway sit in a filled grey card. Everything else supports it.
Show behavior, don't describe it
Use a small UI, a diagram or a short animation when the idea is something that happens.
- Evidence goes in thin-bordered cards. Context stays as plain text, kept short.
- Chips mark status. Grey is a label, yellow is "not yet tested or measured", blue is public.
- Tags and code a user types are blue mono. Other identifiers stay grey mono.
- Icons are lucide at 1.5 stroke, in ink grey.
- Be honest. Nothing invented. Anything untested is labeled untested.
HTML
<div class="sg-grid">
<div class="how sg-card">
<svg class="sg-ico">…</svg>
<h4 class="how-title">Say it in a card</h4>
<p class="how-body">One idea per card. A short title and one or two sentences.</p>
</div>
<div class="how sg-card">
<svg class="sg-ico">…</svg>
<h4 class="how-title">Fill the one thing that matters</h4>
<p class="how-body">The key finding, the solution and the takeaway sit in a filled grey card. Everything else supports it.</p>
</div>
<div class="how sg-card">
<svg class="sg-ico">…</svg>
<h4 class="how-title">Show behavior, don't describe it</h4>
<p class="how-body">Use a small UI, a diagram or a short animation when the idea is something that happens.</p>
</div>
</div>
<ul class="ds-rules">
<li>
<b>Evidence</b> goes in thin-bordered cards. <b>Context</b> stays as plain text, kept short.</li>
<li>
<b>Chips</b> mark status. Grey is a label, yellow is "not yet tested or measured", blue is public.</li>
<li>
<b>Tags and code</b> a user types are blue mono. Other identifiers stay grey mono.</li>
<li>
<b>Icons</b> are lucide at 1.5 stroke, in ink grey.</li>
<li>
<b>Be honest.</b> Nothing invented. Anything untested is labeled untested.</li>
</ul>