Navigation

Playground list

A directory of outside projects: name, one descriptor sentence, hairline. Two by two on wider screens.

Examples

PlaygroundOpen “Playground” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

The home’s Playground. The same pattern works for any directory.

Live: Home.

Anatomy

Heading: h2, 17/26 to 20/28, regular weight.
Intro: .prose, secondary ink.
List: ul.pg-list, 1px ink rule; a > span with .pg-d.

States

Hover: Name moves 8px right and turns link colour, 150ms.
Focus: 2px ring around the whole entry.

Behaviour

Phone, tablet, desktop: One column on phone; two columns, two rows from 768 (grid-auto-flow: column). A fifth item needs a layout decision.
Motion: 8px shift, 150ms on the system ease.

Accessibility

External links open a new tab; the list is a real list.

Words

Descriptors are full sentences. Links carry ?ref=niklausgerber.com.

Code

Classes: .playground .pg-list .pg-d. Styles in site/assets/css/site.css.

<section aria-labelledby="pg-h" class="playground wrap">
<h2 id="pg-h">Playground</h2>
<p class="prose">I build tools when the thinking needs a shape. Lately that means hands-on work with agentic AI. Most start as a fix for my own team and then find a wider audience. Each one tests an idea before I put more weight on it.</p>
<ul class="pg-list">
<li><a href="https://graphite.niklausgerber.com/?ref=niklausgerber.com" rel="noopener noreferrer" target="_blank"><span>Graphite<span class="pg-d">An agentic AI playground for seeing how autonomous systems behave in practice.</span></span></a></li>
<li><a href="https://www.theteamkit.com/?ref=niklausgerber.com" rel="noopener noreferrer" target="_blank"><span>The TeamKit<span class="pg-d">A toolkit for how teams come together and define the road ahead.</span></span></a></li>
<li><a href="https://feedback.niklausgerber.com/?ref=niklausgerber.com" rel="noopener noreferrer" target="_blank"><span>Feedback<span class="pg-d">A practical guide to receiving and giving feedback.</span></span></a></li>
<li><a href="https://www.designmanifesto.org/?ref=niklausgerber.com" rel="noopener noreferrer" target="_blank"><span>Design Manifesto<span class="pg-d">A manifesto for service and product design.</span></span></a></li>
</ul>
</section>