defuss-shadcn / Website / website-showcase
Showcase
One-page sites that dress the same components as four different brands - a coffee roaster, an observatory, a bouldering gym and a record shop - each with its own palette, type, a shader or a texture, a few deliberate irregularities and three looks.
On this page (2)
§The method
A components library gives every site the same parts; what makes a site its own is a handful of decisions that break the grid on purpose, taken from the subject's world. Each site here starts from one subject and keeps to these rules:
- A palette and two typefaces of its own, set as tokens on the site's root - every component inside follows them.
- One moving surface - a Shader or a textured surface - where the subject has one: steam over a cup, a starfield, contour lines, a turning record.
- A few irregular moves: a speech bubble, something pinned at a slant, a stamp, a ticket, a number circled by hand - each carrying content, not decoration.
- A detail only this subject has: altitudes and cupping scores, magnitudes and seeing in arc-seconds, boulder grades, catalogue numbers and run times.
- Three looks - the Look select swaps the palette, the shader's colours and the paper, so one structure shows three identities.
§The sites
Roastery
Kiln & Bean: steam rising behind the cup, a turning stamp, the green coffees as tickets. Espresso, Blond roast, Cherry.
Observatory
Hill Observatory: a starfield behind tonight's sky, the moon's phase, what is up and how bright. Night sky, Red light, Day visit.
Bouldering Gym
Grip: contour lines under the hero, holds scattered over the page, the week's new problems by grade. Chalk, Night session, Granite.
Record Shop
Lowtide Records: a record turning on a moving light, a tracklist with run times, new arrivals pinned askew. Tape, Vapor, Mono.
The Website templates use the same method: each one has three looks in its Look select.
Comments, ideas or improvements? Edit this page's source on GitHub