Indie Web Digital Garden

---
name: indie-web-digital-garden
description: Apply the Indie Web Digital Garden visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Indie Web Digital Garden, mentions small web, digital garden, personal wiki, or describes system font stacks, default-blue underlined links, visited-link purple preserved — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Indie Web Digital Garden Design System

The small-web personal site: system fonts, default-blue underlined links with visited-purple intact, a narrow readable column, 'last tended' timestamps, a blogroll and webring badges in the footer — hand-rolled HTML charm over any kind of polish.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Indie Web Digital Garden.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (small web, digital garden, personal wiki, webring aesthetic, handmade web, smol web), or describes its traits: system font stacks; default-blue underlined links; visited-link purple preserved; narrow readable column; webring badges and blogrolls; growth-stage content markers.

## Design tokens

### Color palette

- Warm near-white, like unbleached paper: `#fffdf7` (--color-bg)
- Asides, notes, and code wells: `#f5f1e6` (--color-surface)
- Body text: `#222222` (--color-text)
- Timestamps, metadata, footer text: `#595959` (--color-text-muted)
- Classic link blue, always underlined: `#0645ad` (--color-accent)
- Visited-link purple, deliberately not overridden: `#551a8b` (--color-visited)
- Simple rules, table borders, and box edges: `#cccccc` (--color-border)

### Typography

- Display / headings: Georgia (fallback: Times New Roman, serif)
- Body: Verdana (fallback: Geneva, Tahoma, sans-serif)
- Mono / data: Courier New (fallback: Courier, monospace)
- Type scale: 1.2 ratio, base 16px — computed steps: 16px / 19px / 23px / 28px / 33px / 40px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.25, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48 — Modest and vertical: one column, comfortable paragraph spacing, no grand section heights. The page is as long as the writing, no longer.
- Border radius: none 0px, sm 4px — Default-ish: square boxes, maybe 4px on note wells. Nothing designed enough to need more.
- Border treatment: 1px solid #cccccc — Simple 1px rules; horizontal <hr> dividers between entries are period-correct. Dashed borders acceptable for asides.

### Shadows

- none: `none` — The style has no elevation model — depth comes from borders and background tints

### Layout

- Max content width: 720px
- Single centered column, roughly 65-75 characters per line
- Header: site name, one-line description, horizontal nav as plain links
- Growth markers on notes: seedling / budding / evergreen status per entry
- Footer: blogroll, webring badges, RSS link, 'last tended' date, and a hand-rolled colophon

### Effects

- 88x31 pixel badges and webring navigation in the footer
- Dashed-border aside boxes for tangents and notes
- Occasional <hr> as an honest section divider

### Motion

- Easing: ease; durations 100ms / 150ms / 250ms
- Effectively none — hover states change color or background instantly
- No scroll effects, no entrance animations; the page behaves like a document

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fffdf7;
  --color-surface: #f5f1e6;
  --color-text: #222222;
  --color-text-muted: #595959;
  --color-accent: #0645ad;
  --color-visited: #551a8b;
  --color-border: #cccccc;
  --radius-none: 0px;
  --radius-sm: 4px;
  --border-default: 1px solid #cccccc;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Verdana, Geneva, Tahoma, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: ease;
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 250ms;
}
```

All fonts are system fonts — nothing to load.

## Component recipes

- **Nav:** A row of plain underlined links under the site title — home / notes / now / blogroll — no bar, no dropdowns
- **Hero:** There isn't one: an h1 in Georgia, a sentence about the site, and the writing starts
- **Card:** A note well: surface-tinted box with 1px (sometimes dashed) border, title link, growth-stage marker, and last-tended date
- **Button (primary):** Rare — a default-looking bordered button with system styling; most actions are just links
- **Button (secondary):** An underlined text link, because that is what it actually is
- **Form fields:** Near-browser-default input with 1px border and visible label; a search box at most

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Links that look like links: underlined #0645ad blue with visited purple intact, sprinkled generously through prose that ends in a 'last tended' date and an 88x31 webring badge — the page proudly reads as hand-typed HTML. Spend boldness here; keep everything else quiet.

## Do

- Keep links underlined and blue, and let visited purple survive — legibility of history is the ethos
- Date and status-mark entries; a garden shows its tending
- Interlink notes densely with descriptive anchor text
- Ship the colophon: how the site is built is part of the content

## Don't

- Don't load web fonts, frameworks, or analytics the writing doesn't need
- Don't design a marketing hero — the writing is the homepage
- Don't hide navigation in hamburgers; a list of links fits fine
- Don't chase visual consistency across pages so hard it stops feeling hand-tended

## Accessibility notes

- System fonts and true-blue underlined links are an accessibility strength; keep focus outlines at browser default or stronger
- Small pixel badges need alt text, and decorative ones should be marked as such
- Muted timestamp gray (#595959) passes on the warm white but should not shrink below 13px

## Reference sites

- IndieWeb: https://indieweb.org
- XXIIVV Webring: https://webring.xxiivv.com
- Maggie Appleton — digital gardens: https://maggieappleton.com
- Neocities: https://neocities.org

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip indie-web-digital-garden.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/indie-web-digital-garden.json

Settings → Capabilities → Skills → Upload skill → indie-web-digital-garden.zip