House Style alexis briend · github.com/Alexry375/house-style

Front-end things I have built and want to reuse. Everything here has shipped somewhere real.

Three pieces, filed by what you do with them rather than by what they look like — because a stylesheet, a project template and a React application are not the same kind of object.

One is copied. One is cloned. One you edit forever.

Each one ships its rules, not just its code. A style you can only copy is a style you can only use for the thing it was made for.

01 / drop-in

paper-report

one CSS file
The holobench dashboard on warm paper: a large headline reading Six of those ten files were wrong, with wrong in red, above a row of ten tally marks of which six are red.

A stylesheet for pages whose job is to present measured results and be believed: benchmarks, evaluations, post-mortems — anything where the reader's first instinct is prove it.

Warm paper ground, a serif for prose against a monospace for anything a machine produced, and exactly one accent colour reserved for one meaning. No build step, no dependency, ~250 lines.

Copy paper.css · read RULES.md

source the ten rules live: holobench

02 / clone

paper-slides

html in, pdf out
A title slide on cream paper: a large heavy sans-serif wordmark with a terracotta full stop. A content slide: an eyebrow, a two-line headline, and three boxes joined by terracotta arrows.

Slides written as HTML and rendered to a PDF you can hand in or project. One constraint shapes the whole system: title and one visual, no paragraph — the speaker carries the argument, the slide carries one thing to look at.

Each slide is its own file with its own layout; base.css is 53 lines and allows exactly two chrome elements on a content slide. build.sh screenshots each slide at 2× and binds the PDF.

Clone the folder · run ./build.sh

source

03 / start from

scroll-deck

react · gsap · three.js
A near-white web page with a very large light wordmark and a blue full stop, the first slide of a horizontally scrolling deck.

A deck that is a website: you scroll, and it moves sideways, one wheel gesture per slide. Every reveal is driven by scroll position rather than by a timer, so it plays backwards when the reader scrolls back and is never out of sync with where they are.

GSAP ScrollTrigger for the pinning and the snap, Lenis for the easing, three.js for the background. Four files carry the mechanism and can be lifted out on their own.

npm install · replace src/slides

source

the common thread

Noticed afterwards, not planned

The first two were built eight months apart, for a school project defence and for a benchmark of a computer-use agent, with no intention of sharing anything. They came out the same: a warm paper ground rather than white, near-black ink with a warm bias rather than #000, one saturated accent spent on a single meaning, and prose set against a monospace that carries everything a machine measured.

That is what this repository is for. Not a component library — a written record of decisions that turned out to be worth repeating, next to the code that implements them.