make pages look like fiveable
One stylesheet for every report, memo and dashboard an agent saves to the Garden. It does dark and light: the Garden viewer passes the reader's choice into the page. Link it, put class="g" on the body, and use the pieces below.
start here
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weekly report, Oct 26</title>
<link rel="stylesheet" href="https://gardens.sh/kit/v1.css">
<script src="https://gardens.sh/kit/v1.js"></script> <!-- tabs, sorting, copy -->
</head>
<body class="g">
<main class="g-wrap">
<header class="g-head">
<div class="g-eyebrow">Fiveable.me · organic search · updated Oct 18</div>
<h1>seo status</h1>
<p class="g-lede">The answer in one or two sentences.</p>
</header>
<section class="g-section" id="…"><h2>…</h2>…</section>
<footer class="g-foot">sources, definitions</footer>
</main>
</body>
</html>Use the kit's colors, never your own: they're what flip between light and dark. Pages can't fetch data, so inline it.
key facts
<div class="g-meta">
<div><span>Label</span><span>Value</span></div>
</div>what stands out
- +12%Signups are up for the third week. The new onboarding flow accounts for most of it.
- −9%The pricing test is close to its stop line. Two weeks past −10% means stop.
- 12Decisions wait on you. Eight are one-word replies.
li.good, .bad, .warn or .you color the big number. Leave out .g-big and the list numbers itself.
stat tiles
g-delta bad up.status list
- doneOct 19Unit-page test starts measuringAnswer-first pages, 50/50 split.Bot
- needs you~Oct 27Pricing test readoutRoll out only if pay attempts rose and rankings held.Claude → you
- to do~Nov 9Title template readoutsStudy guides and key terms.Bot
- blocked—History practice pagesWaiting on a data fix.Claude
action list 3
- #1204Customer photos are in a public bucket.Run the two commands in the issue, then reply9d
done. - #1219Pick the default for new teams.Reply4d
manualorauto. - #1230Old experiment still running.Probably settled. Close it if you agree.2d
tables
| Arm | Sessions | Purchases | Rate |
|---|---|---|---|
| Test · gate on | 18,942 | 23 | 0.12% |
| Control · free page | 18,083 | 13 | 0.07% |
| Holdout | 4,410 | 4 | 0.09% |
Numbers in .num cells line up. Add data-sortable to the table (with v1.js) and readers can click a header to sort.
tabs and copy
Signups 1,240, refunds 3.1%.
Signups 4,980, refunds 2.6%.
<div class="g-tabs">
<section class="g-tab" data-label="This week">…</section>
<section class="g-tab" data-label="28 days">…</section>
</div>
<button class="g-copy" data-copy="Text to copy">Copy</button>Long lists and definitions go in a disclosure
Use <details class="g-more">; it needs no script.
charts without a library
Weekly signups, 12 weeks
Bars and a sparkline
CI green · 91%
Goal · 64%
For bigger charts, Chart.js from cdn.jsdelivr.net works in the Garden; read colors from the kit's CSS variables (--g-chart-1, --g-chart-2, --g-chart-hi, --g-ink) so they follow the theme.
rules
- Lead with the answer. The lede and key facts say what happened; sections back it up.
- Every number gets its comparison, and its color says whether that's good or bad.
- Use only the kit's colors, so the page works in dark and light.
- No section labels next to headings. The heading is enough.
- Supportive words. No master, conquer, crush, beat, fight, battle or struggle.
- Check it at 390px wide. Tables scroll; grids stack.