# Design Language for ncbd.dev ## Aesthetics and Tone ncbd.dev is **a wet-lab notebook for a molecule that has no fixed shape**. The acronym is taken at its literal biophysical meaning — the **Nuclear-coactivator Binding Domain**, the tiny, intrinsically disordered tail of the transcriptional coactivator CBP/p300 that exists as a writhing cloud of half-formed helices until a partner protein arrives, at which point it *snaps* into a crisp three-helix bundle. The entire site is built around that single dramatic event: **coupled folding and binding**. Before you scroll, the page is liquid — soft, boneless, drifting, the typography itself slightly out of register, the background a slow lava of overlapping translucent membranes. As you read and scroll, partners dock, contacts form, and regions of the page *crystallize* — edges sharpen, a monospace grid asserts itself, a helix wireframe locks into place. The mood is **patient, exact, and quietly astonished** — the tone of a structural biologist at 2 a.m. watching an NMR ensemble converge. Not corporate. Not "biotech startup." This is the aesthetic of a **blobitecture pavilion that slowly remembers it is also a circuit board**: rounded fluid massing on the outside, rigorous lattice on the inside. The blobitecture aesthetic sits at only 3% in the corpus and has never been paired with molecular-biophysics content, so the whole register is unclaimed territory. Warmth is present (the corpus is 98% warm) but it is the warmth of **agar under a lamp and amber buffer in a vial**, not sunsets. ## Layout Motifs and Structure The structure is **organic-flow** (5% in the corpus) executed as a literal **conformational ensemble narrative** — there is no card grid (90% of the corpus uses one; this site refuses it) and no dashboard. The page is a single uninterrupted vertical descent through **five conformational states** of the same domain: 1. **Unfolded / IDR cloud** — full-bleed, no visible columns, text floating in a soft blob-field with `border-radius` so large the content "containers" read as drifting cytoplasmic droplets. Max content width 1180px but the *visual* mass spills past it. 2. **Encounter complex** — the first hint of order: a faint dotted contact map appears down the right gutter; the layout begins to align to an implied 12-column lattice but only loosely, like a fly-casting search. 3. **Folding transition** — split feel: the left half of the viewport stays liquid, the right half snaps to a hard monospace grid with hairline rules. A vertical "reaction coordinate" rail (a thin gradient line, 2px, pinned center-left) tracks scroll progress from ξ=0 (unfolded) to ξ=1 (bound). 4. **Bound three-helix bundle** — the page is now fully crystalline: tight baseline grid, sharp 1px borders, an SVG wireframe of three antiparallel helix cylinders rendered large in the negative space, slowly rotating. 5. **Release / next cycle** — everything relaxes back toward liquid, edges soften, the helix wireframe melts, and a final quiet line invites the cycle to begin again on re-scroll. Generous **ma / negative space** (15% in corpus) between states — each state is at least 100vh of breathing room. Layered depth is used sparingly: just two planes — a back plane of slow membrane blobs and a front plane of text and the helix wireframe. Navigation is **minimal** (5%): a single thin progress rail and four tiny dot-anchors labeled with Greek state symbols (Ø, ξ‡, ⇌, ●), no top nav bar at all. ## Typography and Palette **Fonts — three Google Fonts voices, mapped onto the disorder→order axis:** - **Body & disordered-state text — *Fraunces* (optical sizes, weights 300 / 400 / 500, with the "soft" SOFT axis pushed warm).** Fraunces' wonky, slightly wobbly serif terminals are the *unfolded* voice — used at 19–22px for running prose, set with loose `line-height: 1.75` and, in the first state only, a barely-perceptible per-character vertical jitter (±1px) so the text itself looks thermally agitated. Serif-revival sits at 13% in the corpus; pairing it with a mono is common, but using it specifically as the "disordered" register is the twist. - **Structural / bound-state labels & headings — *Spline Sans Mono* (weights 400 / 500 / 700).** This is the *folded* voice — crisp, even-width, used for the wordmark `ncbd.dev` at 64px with `letter-spacing: -0.01em`, for state headers (`STATE 03 — FOLDING TRANSITION`) at 13pt with `letter-spacing: 0.22em` small-caps, for residue numbers, contact-map ticks, and the reaction-coordinate readout (`ξ = 0.47`). Mono is at 94% in the corpus so its presence is unremarkable — what's different is that here mono is *earned*: it only fully takes over once the page has "folded." - **Oversized display accents — *Big Shoulders Display* (weight 600), condensed and tall.** Used once per state, very large (clamp up to 180px), set vertically or near the helix wireframe for words like `COUPLE`, `DOCK`, `BIND`, `RELEASE` — a tall, narrow, almost gantry-like display face that reads as scaffolding. Condensed display is at ~6%; oversized-display at ~2%. **Palette — "amber buffer / cool crystal," a deliberate warm-to-cool drift mirroring the fold:** - `#171A24` — **deep buffer** (background base, near-black blue-violet, the inside of an unlit cold room) - `#23282F` — **cuvette slate** (raised liquid containers in the disordered state) - `#E8B65A` — **agar amber** (primary warm accent — the disordered/biological warmth; used for the IDR blob glow, the wordmark in state 1, jitter highlights) - `#5DD3C0` — **NMR teal** (the order accent — appears as edges sharpen; helix wireframe, contact-map dots, the reaction-coordinate line's "bound" end) - `#C9602F` — **denatured rust** (secondary warm, for the "release" state and warnings) - `#F2EEE4` — **bench paper** (primary text, a warm off-white) - `#8B93A0` — **graphite gray** (secondary text, residue numbers, captions) - `#3A4150` — **hairline** (1px crystalline rules in the folded states) The gradient (corpus 95%) is used only as the slow membrane lava in the back plane — a 4-stop mesh between `#171A24`, `#23282F`, a 12%-opacity `#E8B65A`, and a 10%-opacity `#5DD3C0` — never as a button. ## Imagery and Motifs Photography is at 98% in the corpus, so its presence is meaningless; the differentiation is **what is shown and how it is processed.** ncbd.dev uses **almost no photography** — at most one element: a single, real, public-domain **NMR spectrum or HSQC peak plot** (sourced from the BMRB / RCSB public data), rendered as a faint teal vector overlay in state 4, never a hero image. Everything else is **drawn live in SVG and canvas**: - **The IDR blob-field** — 6–9 soft metaball blobs in the back plane, each a low-frequency animated gradient ellipse with heavy Gaussian blur, slowly merging and splitting (true blobitecture, in motion). Their `border-radius` morphs continuously. - **The contact map** — a triangular dot-matrix that fills in as you scroll: each dot is a residue–residue contact, gray when "transient," teal when "native." By state 4 the characteristic three-helix-bundle contact pattern is fully drawn. - **The three-helix wireframe** — three antiparallel cylinders rendered as stacked ellipse stacks (a hand-rolled "ribbon" look), slowly tumbling on a quaternion-ish rotation, locking from a wobbly low-poly blob into a crisp wireframe as ξ→1. - **The reaction-coordinate rail** — a single 2px vertical line, gradient from amber (bottom, ξ=0) to teal (top, ξ=1), with a small glowing puck that tracks scroll. - **Residue ticks & sequence ribbon** — a thin horizontal strip showing the ~60-residue NCBD sequence in Spline Sans Mono, with helix regions underscored; the underscores *draw themselves* (path-draw-svg, 40% in corpus) as the relevant state arrives. - **Energy-landscape sketch** — one small line-drawn funnel/double-well diagram, hand-plotted feel, appearing beside state 3. No icons from icon sets. No stock illustration. No isometric clip-art. Decorative motif vocabulary: **metaballs, dotted contact maps, helix cylinders, hairline lattices, a single funnel curve.** ## Prompts for Implementation Build ncbd.dev as **one static page** — a single HTML file, one CSS file, one ES module — and treat it as a **four-minute scroll-driven account of one molecule folding because it found a partner, then letting go.** Resist every instinct to brand, sell, or capture: there is **no CTA button, no email signup, no contact form, no pricing, no stats grid, no testimonial wall, no logo cloud, no FAQ accordion, no comparison table, no cookie banner, no chat widget**. The page sells nothing; it *explains a phenomenon* the way a beautiful figure legend does. Structure and behavior: - **Hero (State 1 — Unfolded):** `ncbd.dev` in amber Spline Sans Mono on the deep-buffer background; behind it, the metaball blob-field already drifting. A single Fraunces sentence appears, set with the gentle ±1px per-glyph thermal jitter (kept tasteful — disable on `prefers-reduced-motion`). The reaction-coordinate rail is visible but its puck sits at the very bottom (ξ=0). Big Shoulders word `DRIFT` rises huge and faint at the right edge. - **Scroll engine:** a single scroll-progress value `ξ ∈ [0,1]` drives *everything* — blob coalescence, contact-map fill, helix crispness, border-radius shrink across containers, the warm→cool palette interpolation of accents, the rail puck. Use IntersectionObserver to mark state boundaries; use `requestAnimationFrame` for the canvas/SVG. Movement should feel **spring-damped and slightly viscous** (spring at 85%, elastic at 19% in the corpus — lean spring), never bouncy or snappy except at the one moment of "folding," where a single crisp transition is allowed (state 3→4 the layout *clicks* to its grid in ~200ms). - **State 2 (Encounter complex):** a faint partner-protein blob enters from the right and begins to circle the main blob ("fly-casting"). The dotted contact map appears in the right gutter, mostly empty. Text containers' `border-radius` drops from ~120px toward ~48px. - **State 3 (Folding transition):** the viewport visibly splits — left stays liquid, right snaps to a monospace hairline grid. The energy-funnel sketch draws itself beside the prose. `ξ` readout becomes visible near the rail puck (`ξ = 0.5x`). Big Shoulders word `COUPLE` vertical. - **State 4 (Bound — three-helix bundle):** the whole page is crystalline — tight baseline grid, 1px `#3A4150` rules, residue numbers in the margins. The helix wireframe is large in the negative space, slowly tumbling, fully crisp; the contact map shows the complete three-helix pattern; the faint NMR/HSQC vector overlay fades in behind. Accents are now teal. Big Shoulders word `BIND`. - **State 5 (Release / next cycle):** partner drifts away; helix wireframe melts back toward low-poly blob; `border-radius` grows again; accents drift back toward amber; the grid dissolves. A last quiet Fraunces line — something like *"and then it is shapeless again, waiting"* — with `RELEASE` huge and dissolving. Scrolling back up genuinely reverses the whole animation (ξ is reversible). - **Cursor:** subtle **magnetic / cursor-follow** influence (89% / 89% in corpus — common, used here meaningfully): near the main blob, the cursor *attracts* nearby metaball centers slightly, as if the disordered chain probes toward contact; near the folded helix, the cursor instead causes a faint local highlight on the nearest residue. Disabled on touch. - **Color & type discipline:** never put teal and amber at full strength in the same viewport except during the state-3→4 handoff (the moment of binding is the only place the two "phases" coexist). Body text always `#F2EEE4` on `#171A24`; never invert to dark-on-light. - **Performance is explicitly out of scope** — favor the visual story (blur-heavy metaballs, live SVG) over frame-rate purity, but still gate everything behind `prefers-reduced-motion` with a static "folded" snapshot as the fallback. The reader should leave understanding, almost without being told, what "intrinsically disordered" and "coupled folding and binding" mean — because they watched it happen. ## Uniqueness Notes Differentiators, each measured against the corpus revealed by the frequency analysis: 1. **Blobitecture as substrate + molecular-biophysics as subject is an empty intersection.** Blobitecture aesthetic is at 3%, organic-blobs imagery at 6%, organic-flow layout at 5% — and *none* of those rare picks has been used for a structural-biology / intrinsically-disordered-protein narrative anywhere in 434 designs. The whole "the page is liquid until it binds, then it crystallizes" conceit is, as far as the corpus shows, unclaimed. 2. **The layout literally state-changes.** Where 90% of designs are a static card-grid and 33% are dashboards, this site has *no* card grid and no dashboard; instead its grid system *materializes* over the scroll — `border-radius`, baseline grid, hairline rules and a warm→cool palette interpolation all driven by one shared ξ progress value. The "broken-grid that becomes a real grid" is a structural inversion of the usual approach. 3. **Typography is cast by thermodynamic state.** Fraunces (serif-revival, 13%) is deliberately used as the *disordered* voice — wobbly, jittering — and Spline Sans Mono (mono, 94%, but here *earned* rather than default) only fully takes over once the page is "folded," with Big Shoulders Display (oversized condensed, ~2%) as gantry-like scaffolding words. No other corpus design ties its font roles to a folding coordinate. 4. **No photography hero, no stock illustration, no icon set** — imagery is at 98% in the corpus, almost universally photographic; this site uses at most a single faint vector NMR/HSQC overlay and otherwise draws everything (metaballs, contact map, helix wireframe, energy funnel) live in SVG/canvas. 5. **Avoided patterns from the frequency analysis:** card-grid (90%), dashboard (33%), hero-dominant CTA stacks, stat-grids, pricing blocks, glassmorphism (79%) and hand-drawn (96%) aesthetics — none are used. The common cursor-follow/magnetic/spring patterns are kept but re-purposed (cursor probes for molecular contact; spring tuned "viscous"). Chosen seed/style: **blobitecture fluid layout** (with organic-flow layout, serif-revival + mono typography, warm amber→cool teal palette, generative SVG imagery).