Brightfold

What it is

A complete site for a design studio: selected work, capabilities, a single price, client results, articles, an FAQ and a closing call. One page, one HTML file, written by hand — no dependency, no build step, no CDN.

What makes this template is what it refuses to do. The original ships a 1920 × 1080 background video in two formats — 12 MB of MP4 and 36 MB of WebM, 48 MB in all, for a block measuring 1220 × 612. Here it is a still photograph with a 34-second CSS drift. The whole folder now weighs a fraction of that one file. Every other choice in the page follows the same rule: keep the intent, drop the cost.

The design comes from a Webflow template for a design studio of which not one image remains: the photographs were regenerated for this template. Every line of code was rewritten — jQuery, GSAP and its SplitText plugin, the proprietary IX2 animation engine, the minified CSS, and the inline style="opacity:0" on every animated block, which a strict security policy blocks, leaving a blank page.

That is the point: this template is not here to be admired, it is here to be read, broken and put back together.

What you change first

The colours — there is no accent, and that’s deliberate

The original has no brand colour at all: black, white and five greys. Every bit of colour on the page comes from the photographs. That is a decision, not an oversight, and it is kept — adding a brand hue would break the design while thinking it was dressing it.

--ink:        #0A0A0A;  /* headings — 19.3:1 on white */
--body:       #3D3D3D;  /* running text — 10.4:1 */
--muted:      #6E6E6E;  /* secondary text — 5.3:1 */
--faint:      #9B9B9B;  /* 2.7:1 — labels only, never alone */
--surface:    #F2F2F2;  /* cards */

The shift happens where the colour actually is: the original’s photographs pull cold blue — sky, cyan shadows — and Brightfold’s pull amber and sand, at equivalent lightness and contrast. #9B9B9B sits below the 4.5:1 threshold, so it is used for 14 px labels that always come with another cue, never to carry information on its own.

The name

Search for “Brightfold” in index.html: the header, the hero, the about block, the reviews, the footer, the <title> and the description. No CSS class contains the brand — a find-and-replace cannot break anything. The logo is a six-line SVG in the header.

The sizes

The type scale is declared once, then re-declared at each breakpoint and nowhere else: change --h1-size and the whole page follows. No heading carries its own media query.

The animations, and how they’re built

The original’s settings were not guessed, they were read: a Webflow export keeps durations, curves, delays and triggers in its animation store, at ix2.store.getState().ixData. 219 events are declared there, which deduplicate down to 51 distinct effects — the editor creates one event per collection item.

Two of the original’s settings are corrected on purpose. Its reveals fire on the first visible pixel and then wait up to 700 ms before a 1 s animation: that is 1.7 s between the moment a block enters the screen and the moment it is readable. And its threshold is expressed as a share of the element — which leaves any block taller than the screen hidden for ever. Here the margin is measured on the viewport, and a safety net reveals whatever is left when the bottom of the page is reached.

What you should know

No dependency, no build, no CDN, no external request. Measured: 35 requests on load, all local.

Without JavaScript, nothing is hidden. Every hidden state is written under html.js, and enhance.js is the only thing that sets that class. Scripts removed: 27 headings visible, 0 transparent blocks, 0 displaced blocks, the 15 accordions open and the 3 rails show their logos.

The native thing first. <details name> for both accordions — they open without script, answer the keyboard, and can be found by the browser’s find-on-page.

One font, not two. The original loads “Inter Display”, which is the same drawing at a different optical size; here the variable opsz axis does that job from a single file.

Under a strict security policy (script-src 'self'; style-src 'self'): zero violations, counted by serving the folder with the site’s real header. No inline style, no inline script, no onclick. Reveals use IntersectionObserver, never animation-timeline — that one only exists in Chrome.

Accessibility: skip link, aria-expanded on the menu, focus kept inside the open panel, Esc closes, decorations in aria-hidden, a single focus ring, and prefers-reduced-motion that applies the end states — delays included.

What isn’t perfect