# Design Language for infra.limited

## Aesthetics and Tone

**infra.limited** is a one-page meditation on the unseen substrate of the modern world -- a site about infrastructure that refuses to look like infrastructure. The phrase "limited" is read here in two registers simultaneously: the corporate suffix (Ltd.) and the philosophical condition of a system bounded by its own physics. The result is warm, generous, and quietly humane. It is a design that says: pipes and conduits and load-bearing walls deserve a soft place to be considered.

The aesthetic is **blobitecture** -- the architectural movement of organic, monolithic, computer-grown forms (think Future Systems' Selfridges Birmingham, the Kunsthaus Graz "friendly alien," the molten lobby of Sou Fujimoto's House NA). Translated to a screen: every container, divider, button, and section break is a soft, rounded, asymmetric blob. Nothing on the page has 90-degree corners. Even the page itself appears to be poured rather than ruled, its edges feathered by an enormous bokeh field.

The mood is **warm-inviting** -- the antithesis of the cold, dashboard-driven aesthetic that infrastructure brands typically default to. The page should feel like reading a softcover book in a sun-flooded room: paper-pale background, ink-soft type, and the gentle rhythm of concentric ripples expanding wherever the cursor goes. Inspirations: the late paintings of Etel Adnan, the calm interiors of Vincent Van Duysen, the silent radiance of Hilma af Klint's "The Ten Largest, No. 7," the bokeh photography of Saul Leiter shot through a rain-streaked window, the Memphis-adjacent blob furniture of Gaetano Pesce's UP series. It should feel less like a SaaS landing page and more like a quiet pavilion.

## Layout Motifs and Structure

**Primary layout: single-column, ribbon-poured.**

The entire site is a single vertical column, max-width clamped at 64ch (roughly 720px), centered in a vast, soft, off-white field that fills the rest of the viewport. The column is not a rectangle. It is a vertical river of content whose left and right edges follow a slow, subtle SVG sine-wave clip-path -- so the body of the page itself appears as a long, blob-shaped scroll, like a strand of warm taffy hanging in space.

Inside the column, content arrives as **seven blob-cards**, stacked vertically with generous breathing room (min 12vh between cards). Each card is a unique, hand-drawn-feeling SVG `border-radius` -- never a rounded rectangle. We use the asymmetric border-radius technique: `border-radius: 62% 38% 71% 29% / 41% 59% 41% 59%` (each card has its own seven-character chord of percentages, generated to feel pebbled and unique). The cards are a paper-warm cream, slightly lighter than the page, with no border and no shadow -- they are distinguished only by their organic shape and the faint chromatic shift.

**Vertical rhythm:** sections breathe. The interstitial spaces are not empty -- each gap holds a single, drifting **ripple-glyph** (a concentric-ring SVG that slowly expands and fades, restarting on a 7-second loop, anchored to the cursor's last hover position). This means the negative space is alive without being busy.

**Header:** there is no nav bar. The domain name appears once, at the top, in oversized geometric type, blob-cropped by an SVG mask (the letters appear to be peeking out from behind a soft cloud).

**Footer:** the column dissolves. The clip-path opens up at the bottom into a wide blob, and the final footer copy floats inside that blob like text inside a thought-bubble.

**Single column dogma:** there are no side rails, no two-column grids, no card-grids, no bento boxes, no stat blocks, no pricing tables, no CTA banners. The page is read top to bottom in one continuous breath.

## Typography and Palette

**Typography (all from Google Fonts):**

- **Display / Domain Wordmark / H1:** **"Jost"** (Google Fonts, weight 400 and 700). Jost is a contemporary geometric sans-serif explicitly designed as a Futura-spirit revival -- pure circular `o`s, single-story `a`s, perfectly geometric construction -- but with subtly humanist proportions that read warmer than Futura itself. Used at clamp(3rem, 9vw, 7rem) for the wordmark. Letter-spacing -0.03em. Lowercase, always.
- **Section Headings (H2):** **"Jost"** weight 500, at clamp(1.5rem, 3vw, 2.25rem). Letter-spacing -0.01em. Lowercase. Color: Slate Ink.
- **Body / Prose:** **"Inter"** (Google Fonts, weight 400, optical size variable). Used at 18px / 1.7 line-height. Inter is chosen as the body counterpart because it shares Jost's open apertures while being optimized for paragraph reading. Color: Slate Ink at 88% opacity for paragraph softness.
- **Captions / Microcopy:** **"Jost"** weight 400 at 13px, letter-spacing 0.08em, uppercase. Used sparingly for figure labels and the single footer line.
- **Numerals:** wherever a number appears (year, count, etc.), it is set in **"Jost"** weight 700 with `font-feature-settings: 'tnum' 1`. Numerals are drawn with the same circular discipline as the headings.

**Palette (monochrome, paper-warm):**

A strict **monochrome** palette built around a single warm hue (the temperature of unbleached linen). All five values sit on the same warm-grey axis -- there are no chromatic accents, no greens, no blues. Warmth comes from the hue of the greys themselves and from the bokeh field, not from saturation.

| Role | Name | Hex | Use |
|------|------|-----|-----|
| Page Field | Linen Mist | `#f3eee6` | the ambient page background, behind the bokeh |
| Card Surface | Poured Cream | `#faf6ee` | the body of every blob-card |
| Soft Wash | Oat Halo | `#e6dfd1` | bokeh circles, dividers, ripple stroke |
| Slate Ink | Slate Ink | `#2a2722` | all headings, body text |
| Deep Umber | Deep Umber | `#1a1612` | the wordmark, footer text -- the darkest value, used sparingly |

The five values form a continuous tonal staircase from `#1a1612` to `#faf6ee`. The page must read as a single warm, monochrome image -- a grayscale photograph printed on cream paper.

## Imagery and Motifs

**Core Visual Motifs:**

1. **The Bokeh Background.** The entire page sits on top of a hand-composed bokeh field rendered in pure CSS / SVG -- 60-90 soft circles of varying size (clamp 40px to 480px), positioned via a deterministic Poisson-disk distribution, each filled with a radial-gradient that fades from `#e6dfd1` at the center to fully transparent at the edge, with `filter: blur(24px)` applied. The largest circles sit furthest "back" (lower opacity, more blur, slower parallax), the smallest sit "forward" (higher opacity, less blur, faster parallax). The result is the visual atmosphere of a defocused photograph taken in a sunlit room: soft pools of light, no hard edges, no recognizable shapes -- pure ambient warmth. The bokeh field is the soul of the page; it is always present, slowly drifting on scroll at 0.4x parallax.

2. **The Blob Vocabulary.** Every container, every figure frame, every avatar slot, every divider is a blob. We define a library of seven canonical blob-shapes as inline SVG `<path>` elements (smooth Bezier curves traced from hand-drawn studies of: a river stone, a kidney bean, a spilled drop of honey, a rain puddle, a dough ball, an amoeba, a cloud). These shapes are reused as `clip-path: url(#blob-3)` masks and as `border-radius` chord-strings. No two adjacent blobs share the same shape.

3. **The Ripple Glyph.** Concentric SVG circles (3-5 rings, stroke 1px, stroke `#e6dfd1`, no fill) that animate outward via `r` and `opacity` keyframes. Ripples are the page's primary interaction signal: every hover, every click, every section-enter triggers a ripple from the event point. They are slow (1.6s per ring), additive, and never queue more than three at a time. Their motion echoes the slow expansion of a stone dropped in still water.

4. **Geometric-Shape Motifs.** Inside several blob-cards, small constellations of pure geometric primitives float -- single circles, triangles, hexagons, semicircles -- all stroked in Slate Ink at 1.5px, all drawn with the same compass-and-ruler discipline as Jost itself. These are the only "decorative" elements on the page, and they exist in pleasing tension with the freeform blobs that contain them. Geometric inside organic; the cosmos inside the egg.

5. **No Photography.** The site contains zero photographs. The bokeh field IS the photograph. Where another infrastructure brand would show a server rack or a fiber bundle, infra.limited shows a soft bokeh circle and a single Jost-set sentence.

6. **The Wordmark Bloom.** The domain "infra.limited" appears once at the top, set in Jost 700 at 7rem, in Deep Umber. Behind the wordmark sits a single oversized blob (one of the seven canonical shapes, scaled to 1.4x the wordmark's bounding box) in Oat Halo. The blob slowly morphs between three of the canonical shapes on a 14-second loop using SMIL `<animate>` on the path's `d` attribute -- the kind of hypnotic, never-quite-repeating motion that you see in a lava lamp or a slowly inflating balloon.

## Prompts for Implementation

**Full-Screen Narrative Experience:**

The page opens to a soft Linen Mist field. There is no loader, no spinner. For the first 600ms, the page is empty except for the bokeh field, which fades in via a single root-level `opacity 0 -> 1` transition at `cubic-bezier(0.22, 0.61, 0.36, 1)`. At 600ms, the wordmark blob blooms into view -- the oversized Oat Halo blob scales from 0 to 1 with a soft spring (`stiffness: 90, damping: 18`). At 900ms, the wordmark text itself fades in over the blob, letter-by-letter with a 40ms stagger, in Deep Umber. At 1500ms, the first ripple emanates from the center of the wordmark and expands outward across the entire viewport, leaving the bokeh field shimmering in its wake. Only after this opening sequence is scrolling unlocked.

**The Seven Blob-Cards (the body):**

The content is structured as seven cards, each one a single sentence or short paragraph about infrastructure as a humane object. Suggested cards: (1) "the cable in the ground," (2) "the road that no one notices," (3) "the bridge as a verb," (4) "what 'limited' means," (5) "a manifesto in seven syllables," (6) "the quiet maintenance," (7) "how to be load-bearing." Each card uses a different canonical blob shape, a different chord-string `border-radius`, and a different vertical offset within its row (subtle: ±2vh) so the column reads as gently meandering rather than rigidly stacked.

**Scroll Behavior:**

Use `IntersectionObserver` to trigger a card's entry animation: the card's blob shape morphs from a small dot (4px) to its full size over 1.2s, with the text inside fading in 400ms behind the morph. The bokeh field parallaxes at 0.4x -- gently, never enough to disorient. Between cards, the cursor's idle-position seeds a slow ripple that emerges from where the cursor last paused (a `mousemove` listener with a 700ms debounce -- the cursor "rests," and a ripple appears).

**The Ripple Interaction:**

`pointermove` events trigger no immediate reaction (avoid jitter). `pointerdown` anywhere on the page triggers a three-ring ripple from the click point. Hovering over the wordmark triggers a single ring that emerges from the wordmark's centroid. The ripples are SVG `<circle>` elements appended to a single full-page `<svg>` overlay (`position: fixed; inset: 0; pointer-events: none`), animated via Web Animations API: `r` from 0 to 800px, `opacity` from 0.6 to 0, duration 1600ms, easing `cubic-bezier(0.16, 1, 0.3, 1)` (the "easeOutExpo" feel of a real water ring).

**The Wordmark Blob Morph:**

The blob behind the wordmark uses SMIL `<animate>` on its `d` attribute, cycling through three of the canonical blob `<path>` definitions. `dur="14s"`, `repeatCount="indefinite"`, `calcMode="spline"`, `keySplines="0.4 0 0.6 1; 0.4 0 0.6 1"` for a soft, organic ease between shapes. The morph is hypnotic but slow enough never to demand attention.

**Page Edge as Sine-Wave:**

The single content column's left and right edges are clipped via an SVG `clip-path` that is itself a long vertical sine wave with amplitude ~24px and wavelength ~30vh. This means the column visibly undulates as you scroll past it. The clip-path is applied to a parent `<div>` containing all cards, not to individual cards. It must use `clipPathUnits="objectBoundingBox"` with carefully normalized coordinates, and the wave frequency must remain stable as the column grows.

**Geometric Shape Constellations:**

In cards 2, 4, and 6, embed a small SVG constellation -- 5 to 9 geometric primitives (circles, triangles, hexagons, all stroke-only at 1.5px Slate Ink). The shapes float gently via per-element CSS `@keyframes` translating ±6px on a 4-7s sine cycle, each with a randomized phase offset. Position them inside the blob-card but never centered -- always toward the upper-right or lower-left, leaving the text room to breathe.

**Footer:**

Below card seven, the column's clip-path opens into a wide concluding blob (one of the canonical shapes, scaled to 90vw). Inside that blob: a single line in Jost 400 13px uppercase, letter-spaced 0.08em -- "infra.limited -- a quiet object, made carefully, 2026." No links. No social icons. No copyright sigil. Just the line, settled inside the blob like a stone in a riverbed.

**AVOID:**

- No CTA buttons. No "Get Started." No "Sign Up." No email capture form. No phone number.
- No pricing tables, no stat-grids ("99.99% uptime"), no logo bars, no testimonial carousels.
- No card-grids, no bento boxes, no two-column splits.
- No mono/terminal typography, no dark mode, no gradients, no neon, no glass, no sharp angles.
- No navigation bar. No hamburger. No menu.
- No icons from a generic icon set (Heroicons, Font Awesome, etc.). Every shape is custom SVG drawn for this page.

## Uniqueness Notes

**Differentiators from other designs in this portfolio:**

1. **Blobitecture as total system, not as one element.** Frequency analysis shows blobitecture appears in only 2% of designs across the portfolio, and even in those it tends to be a single decorative motif. infra.limited applies blobitecture to *every* container, every divider, every clip, every interactive surface, and even to the body column itself via a sine-wave clip-path. There are no rectangles in the entire layout. This is the most thoroughgoing application of the style in the portfolio.

2. **Single-column dogma against the brand category.** Infrastructure SaaS sites are nearly always dashboard-or-bento-grid heavy. infra.limited is a single, narrow, undulating column of seven blob-cards. The discipline of the format -- one thought, one card, one blob -- is itself the design statement. Layout frequency shows single-column at 28%, but combined with a sine-clipped river-column it becomes singular.

3. **Bokeh-as-substrate, not as overlay.** Where designs that use atmospheric backgrounds typically add blur or grain as a finishing layer, here the bokeh field IS the page -- 60-90 hand-positioned soft circles forming a deterministic, slowly parallaxing field of warm light. The bokeh imagery seed is essentially unused in the portfolio (sub-1%), making this design's commitment to a defocused-photograph atmosphere highly distinctive.

4. **Strict monochrome warmth in a portfolio dominated by gradients.** Frequency analysis: gradient palettes 95%, monochrome only 10%. The five values of infra.limited's palette form a single tonal staircase along one warm-grey axis -- no chromatic accents whatsoever. Warmth comes from hue temperature alone, not from saturation, not from gradient. This is structurally rare across the portfolio.

5. **Geometric typography (Jost / Futura-spirit) as the only typeface, instead of the omnipresent mono.** Frequency shows mono typography at 93% across the portfolio. infra.limited uses zero monospace. Jost -- a faithful Futura-geometric -- is used for headings, numerals, and microcopy, with Inter as the body partner. The geometric circle of Jost's `o` rhymes with the soft bokeh circles of the background; the type and the field are the same family of forms.

6. **Warm-inviting tone in a portfolio drowning in mysterious-moody.** Mysterious-moody appears in 94% of designs; warm-inviting in only 9%. infra.limited is unmistakably warm: cream paper, soft light, lowercase headings, no shadows, no contrast spikes, no occult mood. It treats infrastructure as a humble craft, not as a dark mystery.

7. **Ripple as the only interaction signal.** Ripple animations sit at 6% portfolio-wide. infra.limited makes the ripple the *sole* interaction grammar -- every hover, click, section-enter, and idle-cursor pause emits a ripple. The page has no other feedback vocabulary. This singular commitment to one motion pattern, set against a still-water palette, gives the whole experience an unmistakable signature.

**Chosen seed (from assignment):**
- aesthetic: **blobitecture**
- layout: **single-column**
- typography: **futura-geometric** (executed via Jost on Google Fonts)
- palette: **monochrome** (warm-grey tonal staircase)
- patterns: **ripple**
- imagery: **bokeh-background**
- motifs: **geometric-shapes** (constellations inside blob-cards)
- tone: **warm-inviting**

**Patterns deliberately avoided (per frequency analysis):**
- corporate aesthetic (92%) -- replaced by blobitecture/pavilion warmth
- mono typography (93%) -- replaced by Jost geometric sans
- mysterious-moody tone (94%) -- replaced by warm-inviting cream
- gradient palettes (95%) -- replaced by strict monochrome
- counter-animate / parallax-spring stack (90% / 68% / 43%) -- replaced by a ripple-only interaction grammar
- centered + full-bleed (91% / 44%) -- replaced by a narrow, sine-clipped river column
- photography (61%) -- replaced by an entirely-CSS-and-SVG bokeh field
<!-- DESIGN STAMP
  timestamp: 2026-05-02T10:08:25
  seed: in the portfolio
  aesthetic: infra.limited** is a one-page meditation on the unseen substrate of the modern w...
  content_hash: 9987ca94c0ea
-->