The same brief,more than once.
The same site, built three ways. Same words, same projects, three different looks. It is the fastest way to show you what you are choosing between.
Pick one and the whole site changes with it.
- 01
Signal
Design that behaves like hardware.
Black, thin lines, and small readouts in the margins that respond as you scroll. Behind it all sits a field of small crosses that turn and brighten as your pointer passes, and scatter a ring when you click. Almost everything is grey so the red means something when it shows up.
- Type
- AnybodySchibsted GroteskMartian Mono
- Palette
- #08090A#F2F4F3#FF3B1F
- Motion
- Quick and mechanical. Nothing lingers.
- Cursor
- Crosshair lines that follow your pointer across the page.
- 02
Acid
Design that behaves like hardware.
Same bones as Signal, different voice. The headline face is angular rather than neutral, the text is set in a terminal family, and the background is columns of falling characters that light up as your pointer passes and flare where you tap.
- Type
- Chakra PetchIBM Plex SansIBM Plex Mono
- Palette
- #08090A#F2F4F3#C8FF00
- Motion
- Quick and mechanical. Nothing lingers.
- Cursor
- Crosshair lines that follow your pointer across the page.
- 03
Organic
Design that behaves like hardware.
Warm brown-black instead of true black, and a serif that leans into italic where the other versions would reach for colour. A field of small points drifts behind the headline and moves with your pointer. Everything is rounder and slower.
- Type
- Instrument SerifBricolage GrotesqueSometype Mono
- Palette
- #141110#EDE6DC#E8873C
- Motion
- Slow and weighted, like it has mass.
- Cursor
- A soft ring that trails behind your pointer and grows over links.
Adding a fourth
A fourth direction is a day, not a rebuild. The words, the projects and the page structure stay exactly where they are; what changes is the colour, the type and the way the background moves. That is the point of building it this way: you can see a real option instead of a mockup of one.