# Design Language for infra.limited

## Aesthetics and Tone

infra.limited is **a maximalist, hand-pasted scrapbook about *small infrastructure* — the deliberately finite kind.** Not the hyperscale cloud, not the data-center the size of a town: the single home server humming in a hall closet, the hand-soldered patch panel, the Raspberry Pi cluster zip-tied to a breadboard, the one rack that fits in one room and is *enough*. The site is a love letter to constraint — to "we run the whole thing on three machines and a UPS the size of a brick" — dressed up as the most over-decorated, lovingly cluttered object on the internet: a **maximalist** spread (only ~6% of the corpus dares it) where every margin is filled, every corner has a stamp, every paragraph is hemmed by ornament, washed in the warm brown of an old photo album.

The mood is **vintage** through and through — not the slick "retro-futuristic" kind, but the genuinely *aged* kind: a 1970s appliance manual, a Victorian trade-card album, a hand-bound zine left in a sunny window until the whites went **sepia-nostalgic** cream and the inks went rust and ochre. The decoration is dense the way a Victorian parlour is dense, or a teenager's three-ring binder covered in stickers is dense — *more is more*, but it is *kept* more, organized more, every patch deliberate. It should feel like opening a fat envelope a friend mailed you: photos taped in crooked, marginalia in the gutters, a pressed leaf, a circuit-board sticker, a hand-drawn diagram of "how the home lab is wired" with arrows and exclamation points.

The voice is **conversational** (only ~7% of the corpus) — first-person, warm, a little rambly, the way someone talks when they're showing you around their workshop: *"Okay so — this little box? This runs everything. I know. I keep waiting for it to fall over and it just… doesn't."* It is **handwritten** in feel and partly in fact: headings and asides set in a real handwriting face, as if pencilled in the margins by the person who built the thing. No corporate plural, no "solutions," no "scale." It says *I*, it says *we (the two of us)*, it says *this is small on purpose and I am proud of it.*

Mood words: pasted-in, sun-faded, lovingly-cluttered, hand-labelled, finite-and-fond, parlour-dense, marginalia-rich. Think a Whole Earth Catalog page about a home server. Think a Victorian scrapbook where every clipping is a screenshot of `htop`. Think the warmest, brownest, most-stickered binder in the world — and it is about deliberately tiny infrastructure.

## Layout Motifs and Structure

The page is a **magazine-spread** layout (~6% of the corpus) — but specifically a *scrapbook spread*: a two-page-spread metaphor where content lives on left and right "leaves" of an open album, with a soft central gutter shadow running down the middle of wide screens, and everything pasted onto the leaves at slight, deliberate angles. On narrow screens the spread collapses to a single tall album we scroll down, page-edge by page-edge, with a paper-grain texture and dog-eared corners.

**The album, not the feed.** The document is divided into "spreads" — `<section>`s styled as facing pages, each with a heavy faux-stitched binding edge, a page number in the corner (`— 4 —`), and a hand-written running header in the top margin (*"the closet / continued"*). Between spreads, a thin "binding signature" band — a row of stitch marks — gives the eye a fold line. No infinite scroll feeling: it ends, like a book ends, with a back cover.

**Maximalist composition — filled margins, layered paste-ups.** Within each spread, content is *collaged*: a block of body text sits on a slightly-rotated "card" with a torn or deckled edge and a faint drop shadow (paper on paper); around it, in the margins, smaller pasted elements crowd in — a "polaroid" of a server rack with handwritten caption below, a strip of washi-tape across one corner, a rubber-stamp ("APPROVED — runs fine"), a pressed-leaf SVG, a hand-drawn arrow pointing from the margin into the text ("← this is the one that died once"), a "ticket stub" with a serial number. The decoration is *dense* but never random: every paste-up is anchored to a content element, rotated 1–5°, layered with intentional z-order. Margins are the *opposite* of negative space here — they are the busiest part of the page.

**Centered, but barnacled.** The reading column itself is **centered** (~85% of the corpus — the one conventional choice, made on purpose so the *content* stays legible while the *frame* goes wild) — a comfortable ~62ch measure of body text down the middle of each leaf — but it is surrounded on all sides by the pasted marginalia, so the centering reads as "the clean bit in the middle of a very full page," not as minimalism.

**No CTA furniture.** No hero button, no pricing table, no stat-grid, no "trusted by" logo row, no testimonial carousel. If there is a "join" it's a hand-drawn box that says *"want one? here's roughly how"* with a pencilled list. The structure is: cover spread → "what 'limited' means here" spread → "the closet, photographed" spread → "how it's wired" (hand-drawn diagram) spread → "things that broke and what we learned" spread → "the bill of materials" (a parts list styled as a scrapbook inventory page) → back-cover colophon. It reads like a homemade book, front to back.

## Typography and Palette

**Fonts — Google Fonts only, all verified available.**

- **Caveat** (weights 400, 500, 600, 700) — the **handwritten** voice (handwritten is ~33% of the corpus, but rarely used *this* literally). Caveat is a fluid, friendly pencil-hand. It carries: all section headings, the running headers in the page margins, every marginal annotation and arrow-label, photo captions under the polaroids, the page numbers. It is the hand of the person who built the closet. Used large for heads (40–72px) and small for marginalia (14–18px).
- **Special Elite** (weight 400) — a worn typewriter face, for the **vintage** texture: rubber-stamp text ("APPROVED", "REV. 3", a date stamp), ticket-stub serial numbers, the bill-of-materials parts list, anything that should look *typed on a real machine in 1974*. Slightly uneven, ink-heavy. Never for long body text.
- **Crimson Pro** (weights 400, 500, 600; italic available) — the readable book face for body copy: the centered reading column, the long conversational paragraphs. A warm, low-contrast old-style serif with a literary, homemade-zine temperament. 18–20px, line-height 1.75, on the cream leaf. This is what keeps the maximalism legible — a calm river down the middle of a flooded page.
- **Bitter** (weights 500, 700) — a sturdy slab serif for the very few "louder" type moments: the cover title "infra.limited" set big and printed-looking, spread titles when they need to read as *printed in the book* rather than *pencilled in the margin*, the back-cover colophon header. Used sparingly — most emphasis comes from Caveat and Special Elite.

Type rules: body is Crimson Pro 400, 18–20px, measure ≤ 62ch, always centered in the leaf. Headings are Caveat, large, slightly rotated (−2° to +3°), in the rust or ink colour. Marginalia is Caveat 14–18px or Special Elite 12–14px. No oversized sans anywhere. Letter-spacing untouched (handwriting and typewriter faces want their natural rhythm); only Bitter cover title gets +0.02em.

**Palette — "the album left in the sun."** Eight colours, **sepia-nostalgic** (~4% of the corpus) with **warm-earthy** undertones. Everything is the brown-cream-rust-ochre of a faded photo album, plus one cool dusty teal as the single "ink" colour for diagrams and links.

- `#F4E9D4` — **Album Cream.** The dominant leaf/page background; the colour of sun-bleached scrapbook paper. Almost everything sits on this.
- `#E8D6B8` — **Tea-Stained.** Secondary paper — the deckled cards body text sits on, the slightly-darker margin paper, the binding band.
- `#D9BE8E` — **Old Kraft.** Ticket stubs, the bill-of-materials inventory page, washi-tape edges, kraft-paper paste-ups.
- `#8C5A33` — **Cocoa Ink.** Body text colour (a soft warm dark-brown, never pure black — this is "ink that has aged"); also the heavier rules and the stitch marks.
- `#6B4226` — **Walnut.** Deepest brown — the faux-stitched binding edge, the back cover, deep shadow lines, headings that need weight.
- `#B5552E` — **Rust Stamp.** The primary accent — corroded-iron orange-red. Rubber-stamp ink, the hand-drawn arrows, heading highlights, the period at the end of a pull-quote, "the one that died once" callouts. The boldest colour on the page; used like a stamp pad — generously but always *as a stamp*.
- `#C99A2E` — **Honey Ochre.** Warm gold — washi-tape, "highlighter" swipes behind a phrase, the page-number circles, pressed-leaf veins. The cheerful note in the brown.
- `#5E7A6E` — **Dusty Teal.** The single cool colour — a grayed, dusty workshop green. Used *only* for the hand-drawn wiring diagram lines, link underlines, and the "schematic" margin sketches. It reads as the one pen of a different colour in an otherwise sepia drawer.

Contrast pairs: Cocoa Ink `#8C5A33` body on Album Cream `#F4E9D4`; Walnut `#6B4226` and Rust Stamp `#B5552E` headings on cream/tea-stained; Dusty Teal `#5E7A6E` confined to diagram strokes and link underlines, never large fills; cards use Tea-Stained `#E8D6B8` on Cream so the paper-on-paper layering reads.

## Imagery and Motifs

**No glossy photography. No stock textures. No icon library. No Lottie. No WebGL. No 3D render.** Photography is 98% of the corpus; infra.limited uses **mixed-media** imagery (~3% of the corpus — rare) and **vintage** motifs (~23%) — but executed as hand-built SVG paste-ups and CSS paper effects, all in the sepia palette, so the page reads as a *physical scrapbook*, not a gallery.

**1. Polaroid paste-ups (mixed-media, faux-photography).** Where a normal site shows a hero photo, infra.limited shows a "polaroid" — a white-ish (Tea-Stained) bordered rectangle, rotated 2–4°, with a soft drop shadow and a strip of Honey-Ochre washi-tape pinning one corner — and *inside the frame*, instead of a photograph, a hand-drawn SVG line illustration in Cocoa Ink: a small home-server rack with cables, a Raspberry Pi on a desk, a closet door ajar with a blinking LED, a brick-sized UPS. Below each, a Caveat caption ("the closet, march"). They read as snapshots someone took and taped in — the *idea* of a photo, hand-drawn, never a real raster image.

**2. The wiring diagram (the centrepiece).** One full spread is a hand-drawn network/wiring diagram: boxes labelled in Caveat ("the box", "the disk shelf", "the little switch", "the outside world"), connected by Dusty-Teal hand-drawn lines (slightly wobbly `path` strokes, not ruler-straight), with Rust-Stamp arrows and exclamation annotations in the margins ("← all of it goes through this one cable, I know"). On scroll into view, the lines *draw themselves* (path-draw) like someone sketching it for you. This is the soul of the site: small, finite, comprehensible — a thing one person can draw from memory.

**3. Rubber stamps & ticket stubs (vintage motif).** Scattered through the margins: SVG "rubber stamp" marks in Rust-Stamp ink — a circular "APPROVED — RUNS FINE" stamp, a rectangular "REV. 3" stamp, a date stamp ("05 · 2026") — drawn with the broken-edge, slightly-incomplete look of real rubber stamps (ink that didn't fully take). Plus "ticket stub" paste-ups in Old Kraft with Special-Elite serial numbers and a perforated edge, used as little fact-cards ("UPTIME · 412 DAYS · STUB").

**4. Washi tape, deckled edges, dog-ears, pressed leaves.** The paper vocabulary: every card has a torn/deckled edge (an SVG `clip-path` or jagged border), some have a curled dog-eared corner (a small triangular fold with a shadow), strips of Honey-Ochre or Old-Kraft "washi tape" (semi-transparent, slightly rotated rectangles with frayed ends) pin things down, and an occasional pressed-leaf SVG (a single skeleton leaf in Cocoa Ink with Honey-Ochre veins) lies across a corner — the kind of thing that ends up in a scrapbook by accident.

**5. Marginal arrows & annotations (the conversational hand).** Throughout, hand-drawn Rust-Stamp arrows (curved, with little fletching) point from the margin into the body text, paired with Caveat annotations: "← this", "the good part", "we almost gave up here", "still works!". They are the running commentary of the person who made the thing — the conversational tone made *visible* in the margins.

**6. The bill-of-materials inventory page.** One spread is a "parts list" styled like a scrapbook inventory: a kraft-paper page with a typewriter (Special Elite) two-column list — item / note ("Mini PC … the brain"; "8TB disk … the memory"; "UPS … the nerve") — bordered by a hand-drawn double rule, with small hand-drawn SVG glyphs of each item in the margin. Finite, countable, holdable: you could fit this whole infrastructure in a backpack, and here's the list.

## Prompts for Implementation

Build infra.limited as **one HTML document, one CSS file, one small vanilla ES module, one inline SVG sprite (the hand-drawn illustration set: server rack, Pi, closet, UPS, leaf, arrows, the rubber-stamp marks, the wiring-diagram pieces), and one favicon SVG (a tiny Rust-Stamp "APPROVED" circle)**. No framework. No bundler. No raster images. No webfonts beyond the four Google faces. No video. No analytics. No service worker. No router. The page is **a homemade scrapbook about deliberately small infrastructure: rendered once, read front-to-back like a book a friend mailed you.**

**Document skeleton:**

```
<body>                              <!-- Album Cream bg, faint paper-grain, central gutter shadow on wide -->
  <article class="album">
    <section class="spread cover">      <!-- big Bitter "infra.limited", a polaroid, a stamp, a Caveat subtitle -->
    <div class="signature"></div>       <!-- stitch-mark binding band between spreads -->
    <section class="spread" data-page="2">   <!-- "what 'limited' means here" — centered Crimson Pro column + marginalia -->
       <header class="running-head">the idea / continued</header>
       <div class="leaf-content"> … paste-up cards, polaroids, margin arrows … </div>
       <span class="page-no">— 2 —</span>
    </section>
    <section class="spread" data-page="3"> … "the closet, photographed" (polaroid grid, hand-drawn) … </section>
    <section class="spread diagram" data-page="4"> … the hand-drawn wiring diagram, self-drawing … </section>
    <section class="spread" data-page="5"> … "things that broke" — pull-quotes, stamps, annotations … </section>
    <section class="spread bom" data-page="6"> … the bill-of-materials inventory (kraft paper, typewriter list) … </section>
    <footer class="spread back-cover"> … Walnut back cover, Bitter colophon, "made by two people in one room" … </footer>
  </article>
</body>
```

**Layout / CSS:**
- `body`: `background: #F4E9D4` plus a very subtle repeating paper-grain (an inline SVG `feTurbulence` noise at ~3% opacity, or a tiny tiled fibre pattern). On wide screens, a soft vertical gradient shadow down `50%` of the viewport = the album gutter. Max content width ~1100px, centered.
- `.spread`: min-height ~100vh on cover/diagram, auto elsewhere; a Walnut `#6B4226` left "binding" edge (8px, with a dashed stitch line drawn over it); generous padding so margins are roomy enough to crowd with paste-ups.
- `.leaf-content`: CSS grid or relative positioning with a centered `.column` (`max-width: 62ch; margin-inline: auto;` Crimson Pro body) and absolutely-positioned `.paste-up` children (polaroids, stamps, tape, leaves) tucked into the margins at `transform: rotate(±1–5deg)` with layered `z-index` and soft `box-shadow` (paper-on-paper: `0 2px 6px rgba(107,66,38,.25)`).
- `.polaroid`: Tea-Stained `#E8D6B8` border ~14px (bottom border ~40px, polaroid-style), rotated, drop shadow, a Honey-Ochre washi-tape `::before` pinning a corner; contains an inline SVG line drawing in `#8C5A33`; a Caveat `<figcaption>` below.
- `.stamp`: an inline SVG circular/rectangular rubber-stamp mark in `#B5552E` with a `mix-blend-mode: multiply` and ~85% opacity and a slightly broken edge (mask) so it reads as imperfect ink; rotated.
- `.washi`: a semi-transparent rotated rectangle (`background: rgba(201,154,46,.55)`, frayed ends via tiny `clip-path` notches) overlapping the corner of a card.
- Deckled card edges via `clip-path: polygon(...)` with many small jitters, or an SVG border-image; dog-ear via a small triangular `::after` with a fold shadow.
- `.signature`: a ~24px band of evenly-spaced short vertical dashes in `#6B4226` on `#E8D6B8` — the stitched binding between spreads.
- `.running-head` in Caveat, small, top margin, slightly rotated, `#6B4226`. `.page-no` in Caveat inside a Honey-Ochre circle, bottom corner.
- Typography exactly per the section above; the centered Crimson Pro column is the *only* place with calm, conventional type — everything around it is hand-lettered or typewritten.

**Animation & JS (vanilla ES module, restrained):**
- **slide-reveal** (only ~3% of the corpus — the seed's signature pattern): as each `.spread` enters the viewport, its paste-up elements *slide in from the margins* — polaroids slide a short distance inward from the page edge they're nearest (left margin items slide right ~40px, right margin items slide left), fading 0→1 over ~520ms `cubic-bezier(.2,.7,.25,1)`, staggered ~80ms — as if being laid onto the page and slid into place. The body column itself just gently fades up. `IntersectionObserver`, once each.
- **Page-turn feel between spreads:** as you scroll from one spread to the next, a subtle parallax — the outgoing spread's binding edge and gutter shadow shift slightly, the incoming spread's page-edge "lifts" 6–10px with a brief shadow, like a leaf being turned. Keep it gentle; this is reading a book, not a 3D flip toy.
- **The wiring diagram draws itself:** when the `.spread.diagram` is centered, the Dusty-Teal `path`s animate `stroke-dashoffset` from full→0 over ~1.6s (path-draw-svg), wobbly hand-drawn lines appearing as if sketched; then the Rust-Stamp margin arrows pop in (a tiny scale-from-.9 + fade) one by one with their Caveat labels. On `prefers-reduced-motion`, render the diagram already-complete, no draw.
- **Stamp "thunk":** the first time a `.stamp` enters view, it does one quick scale-down-from-1.15 + slight rotate settle (~180ms) — the feeling of a rubber stamp being pressed. Once. No loop.
- **Hover on paste-ups:** polaroids and ticket stubs lift ~4px with a slightly larger shadow and straighten ~1° toward 0 (you "pick it up to look closer"). Subtle.
- No counters, no typewriter-typing effect on the body, no cursor-follow trails, no magnetic buttons, no carousels. Motion vocabulary = slide-in-from-margin, gentle page-turn parallax, the diagram self-draw, the stamp thunk, the small hover lift. Everything moves like paper being arranged by hand.
- Respect `prefers-reduced-motion`: disable all slides/parallax/draws, show everything in its final pasted position, keep only instant fades.

**Tone of copy:** first-person, conversational, warm, a little rambly — the voice of someone showing you their workshop. Short declarative wonder ("It just… doesn't fall over."), parenthetical asides, the occasional Caveat margin note disagreeing with the body ("← except that one time"). Headings sound pencilled-in ("the closet", "how it's all wired", "stuff that broke"). The page never says "scale" or "enterprise" or "solutions" or "get started" — it says *this is small, on purpose, and look how much fits.* Pull-quotes end on a Rust-Stamp full stop.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, "features" rows, "trusted by" logo strips, testimonial carousels, sliders, hero buttons, glassmorphism panels, neon glow, dark mode, slick photography, drop-cap clichés, anything that reads as a SaaS landing page. Maximalism here means *dense hand-pasted ornament around a calm reading column* — not loud gradients, not screaming type, not chaos. Kept clutter. Warm, brown, finite.

## Uniqueness Notes

This design's deliberate departures from the 270+ designs already in the registry, and from the seed's defaults:

1. **A *scrapbook* about *small* infrastructure — constraint celebrated as craft.** The corpus has no shortage of "tech" motifs (~17%) and "circuit" imagery (~8%), all rendered as cold neon/HUD/dashboard furniture. infra.limited inverts every bit of that: infrastructure here is a home closet, a Pi, a brick-sized UPS — *deliberately finite* — and it's presented as a warm, sun-faded, hand-pasted album, not a dashboard. The whole thesis ("limited on purpose, and it's enough") is unlike any tech-adjacent entry in the registry.

2. **Maximalism as *kept clutter around a calm column*, not chaos.** Maximalist is only ~6% of the corpus and usually means loud pattern-on-pattern. This design's maximalism is specifically the density of a Victorian scrapbook / a sticker-covered binder: every margin filled with anchored paste-ups (polaroids, washi tape, rubber stamps, ticket stubs, pressed leaves, hand-drawn arrows), but the centered Crimson Pro reading column stays serene. Disciplined maximalism — busy frame, legible heart.

3. **Mixed-media that is *actually* mixed media — faux-physical paper, not photo collage.** Mixed-media imagery is ~3% of the corpus and, where it appears, leans on real photography in a collage. Here there is *zero raster*: every "photo" is a hand-drawn SVG inside a CSS polaroid, every texture is generated paper grain, every stamp/tape/leaf is inline SVG. The page convincingly impersonates a physical hand-made object using only HTML/CSS/SVG.

4. **The hand-drawn self-drawing wiring diagram as the centrepiece.** Instead of a stat-grid or feature row, the emotional core is one full spread of a wobbly, hand-drawn network diagram in dusty teal that draws itself on scroll, annotated with rust-coloured margin arrows ("← all of it goes through this one cable, I know"). Small enough that one person can sketch it from memory — which *is* the point of "limited."

5. **Literal handwriting + real typewriter + a warm book serif — and no big sans anywhere.** Against a corpus drowning in mono (94%) and humanist (54%) sans, infra.limited uses Caveat (genuine handwriting, for every heading and margin note), Special Elite (typewriter, for stamps and parts lists), Crimson Pro (warm old-style serif body), and Bitter slab only for the few "printed in the book" moments. The handwritten seed is taken *literally* — the headings are the builder's own pencil.

6. **slide-reveal — the seed's rare pattern (~3%) — read as "paste-ups being slid onto the page."** Reveal animation isn't a generic fade-up; margin elements physically slide inward from the page edge they sit nearest, staggered, as if a hand were laying photos and tape onto a leaf and nudging each into place. The animation *is* the scrapbook being assembled in front of you.

**Chosen seed:** aesthetic: maximalist · layout: centered · typography: handwritten · palette: sepia-nostalgic · patterns: slide-reveal · imagery: mixed-media · motifs: vintage · tone: conversational.

**Avoided per frequency analysis:** photography (98% — replaced entirely with hand-drawn SVG inside CSS polaroids and generated paper grain); the parallax / cursor-follow / spring / magnetic / stagger over-used pattern stack (using only slide-reveal-from-margin, a gentle page-turn parallax, the diagram self-draw, the stamp thunk, a small hover lift); mono / humanist sans typography (Caveat handwriting + Special Elite typewriter + Crimson Pro serif + Bitter slab, zero big sans); the warm+gradient generic palette (a specific eight-colour sepia album set, no slick gradients); glassmorphism / dark-mode / neon / dashboard / HUD tech-site tropes (this is a warm brown paper book); full-bleed + card-grid default skeletons (a front-to-back album of facing-page "spreads" with a stitched binding); and the loud reading of maximalism (here it is *kept clutter* — dense, anchored, organized — around a calm centered column).
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:47:00
  seed: serif body
  aesthetic: infra.limited is **a maximalist, hand-pasted scrapbook about *small infrastructu...
  content_hash: 61954c536af7
-->