SEEDHOUSE Growers Guide: how this site grows

The brief

Build a fictional brand studio that grows identities instead of designing them, and make the studio wear its own argument: on arrival, its brand regenerates from a seed in the URL. Same seed, same brand, forever.

The hard constraint is the interesting one: no unseeded randomness anywhere. Every visual decision must trace to the seed through a deterministic derivation. The single exception is the mint button, where one call to Math.random is allowed to choose a new seed, and nothing else.

The craft claim under test: an algorithm can hold a taste floor if humans curate its shelves. Twelve hues, six type marriages, four spatial ratios, four radius stances, six voices, five mark grammars. The stream chooses; it cannot invent. If any seed grows an ugly brand, the shelf is at fault and gets recurated, never the seed.

The derivation pipeline

Five moves, in a fixed order that can never change without breaking every registered brand. All excerpts below are the production code from js/tokens.js and js/logomark.js, not illustrations.

i The seed lives in the URL

Six hex characters after the hash. Anything else falls back to the house cut. Share the link and you share the brand, exactly.

export const SEED_RE = /^[0-9a-f]{6}$/;

export function parseSeed(raw) {
  if (typeof raw !== 'string') return null;
  const s = raw.replace(/^#/, '').toLowerCase();
  return SEED_RE.test(s) ? s : null;
}

ii 24 bits become a stream

The seed parses to an integer and feeds mulberry32, a tiny PRNG with a long memory: seeded once, it speaks the same numbers in the same order until the end of time. That property is the whole business model.

export function mulberry32(a) {
  return function () {
    a |= 0;
    a = (a + 0x6d2b79f5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

iii Fixed draws across curated shelves

Draw order is contract. Hue first, then the type marriage, the spatial ratio, the radius stance, the voice, the mark grammar, then the grammar's own parameters. Reordering these lines would silently re-dress every brand ever registered, so they are frozen.

const hue     = draw(rng, 'hue gamut',      GAMUT,   log);
const pair    = draw(rng, 'type pairings',  PAIRS,   log);
const ratio   = draw(rng, 'spatial ratios', RATIOS,  log);
const stance  = draw(rng, 'radius stances', STANCES, log);
const voice   = draw(rng, 'voice pool',     VOICES,  log);
const grammar = draw(rng, 'mark grammars',  GRAMMARS, log);

iv Tokens become CSS and copy

The ratio sets the whole vertical rhythm as clamp() strings, so one derivation serves a phone and a cinema display. The voice sets both seeded headlines from hand-written pools. The runtime writes custom properties on the root element and the stylesheet does the rest.

const h1max = scale(30, 2.2);           // 30 * ratio^2.2 * optical
const clampv = (min, max) =>
  `clamp(${px(min)}, ${(max / 14.4).toFixed(3)}vw, ${px(max)})`;

return {
  '--accent': t.hue.hex,
  '--font-display': t.pair.display,
  '--fs-h1': clampv(h1min, h1max),
  '--r-btn': t.stance.btn >= 999 ? '999px' : px(t.stance.btn),
  /* ...every other visual decision, one var at a time */
};

v The mark is drawn from rules

Five construction grammars share one armature: a 120 unit canvas, an 88 unit body, a 7 unit stroke. A quarter-disc primitive, a chord, a ring with a gap, a rhythm of bars, a cut corner. The grammar and its parameters are draws like everything else, which is why any two seeds read as siblings from one practice.

function quarter(x, y, s, c) {
  switch (c) {
    case 0: return `M ${x} ${y} L ${x + s} ${y}
      A ${s} ${s} 0 0 1 ${x} ${y + s} Z`;
    /* NE, SE, SW follow the same arc logic */
  }
}

Your seed's mark, construction guides on

The curation argument

Determinism is easy. Determinism that never embarrasses you is curation. Three decisions carry the taste floor.

Shelves, not ranges

The stream never picks a number inside a continuous range; it picks an item from a short, hand-stocked list. A random hue would eventually produce beige on beige. A shelf of twelve cannot, because we met all twelve. The same holds for type: six marriages that were tested against each other, not two fonts rolled independently and hoped about.

Contrast is preflighted, not checked at runtime

Every hue was tuned in the build harness until it cleared 4.6:1 against the paper, with the worst member of the gamut at 4.60. The runtime never needs a contrast fallback because no failing accent can be drawn. The full report lives in the QA folder beside the shots.

Mining, not overriding

Nothing on the page lets you force a token, because a forced token would break the contract that everything traces to the seed. Instead, tapping a shelf item mines forward from the seed you are wearing to the next seed that grows it. Choice becomes breeding.

export function mineSeed(fromInt, predicate, cap = 500000) {
  for (let i = 1; i <= cap; i++) {
    const n = (fromInt + i) % 0x1000000;
    const t = deriveTokens(intToSeed(n));
    if (predicate(t)) return t.seed;
  }
  return null;
}

Asset provenance

Fully procedural. Every logomark, glyph, favicon and the downloadable specimen sheet is constructed at runtime by js/logomark.js from seed-derived parameters. There are no image assets in the repository except og.png, which is a screenshot of this site wearing its own house seed, taken by the build harness.

Type is loaded from Google Fonts: Archivo for the fixed chrome, plus exactly one seeded pairing at a time, with the house pairing preloaded and the rest fetched on demand. The only randomness in the codebase is Math.random inside the mint handler, and its output is immediately committed to the URL where anyone can replay it.

What each pass caught

Three hostile review passes, real pixels each time, screenshots kept in the QA folder. The short version of the log.

Pass one

Caught a real bug: the header seed chip went stale when you arrived on a hash link. Also sentenced the Golden Section hero, a five-line 114px tower that buried the mint button below the fold, and rescaled the whole h1 band. Killed a decorative plinth grid that argued with the mark's own construction guides.

Pass two

Paired the certificate with the specimen sheet exporter so the lab closes on proof instead of trailing off. Fixed stream rows wrapping under their labels, centered the hollow stage cards, balanced the eyebrow that widowed ROTTERDAM on phones. Added this guide.

Pass three

Shot the extremes, seeds 000000 and ffffff, hunting for a weak member of any pool, and found none. Proved determinism at the pixel level: two independent renders of one seed hashed byte-identical. Added the mining receipt under the shelves, fixed certificate rows folding badly on phones, captured the mint choreography mid-flight, and produced the og image from the house cut.

How this site grows