// ============================================================ // 10 modern website style directions, each rendered as a hero/ // landing fragment. All content is invented for the exercise — // no real brands, no copied marks. // ============================================================ // Reusable placeholder block: striped SVG with a monospace label. const ImgSlot = ({ label, h = 240, tone = "warm" }) => { const palettes = { warm: { bg: "#efe9df", stripe: "#e3d9c8", ink: "#6b5e48" }, cool: { bg: "#e6eaef", stripe: "#d4dae3", ink: "#536175" }, dark: { bg: "#1a1a1c", stripe: "#242427", ink: "#8a8a90" }, mono: { bg: "#f1f1f1", stripe: "#e4e4e4", ink: "#6b6b6b" }, neon: { bg: "#0a0a14", stripe: "#11112a", ink: "#7b7ba8" }, blush: { bg: "#f3e7e3", stripe: "#ebd6d0", ink: "#7a5048" }, }; const p = palettes[tone] || palettes.warm; return (
{label}
); }; // ============================================================ // 1. EDITORIAL SWISS — oversized serif, strict grid, restraint // ============================================================ const StyleEditorial = () => (
VOLUME — N°14
20.V.2026
Issue One · Spring

A quiet
periodical
for the
working hand.

Twelve essays, one folio of plates, and a removable broadsheet. Printed in two passes on uncoated stock. Mailed flat.

); // ============================================================ // 2. NEO-BRUTALISM — thick borders, hard shadows, primary colors // ============================================================ const StyleBrutalist = () => (
STAMPR
NEW · v3.0 SHIPPED

Ship the
damn
landing.

80 blocks. 12 themes. Zero JavaScript. Drag, drop, deploy. Loved by 14,200 makers who hated their old builder.

4.9★
from 2,140 makers on ProductHunt
LIVE
Builds in 19 seconds — try the demo, no signup.
); // ============================================================ // 3. BENTO GRID — modular cards, soft pastels, product-led // ============================================================ const StyleBento = () => (
Layr Studio
Layr 4.0 · ai layouts

Design systems that{" "} ship themselves.

One source of truth. Code, Figma, docs — always in step.

Components synced
1,284
↑ 18% this week
Live preview
{[..."abcdef"].map((_, i) => (
))}
Trusted by teams at
Halcyon·Kestrel· Mossbank·Tide· Verra
+ 240 more →
); // ============================================================ // 4. GLASS / AURORA — vibrant gradient, frosted blur, soft sans // ============================================================ const StyleAurora = () => (
{/* Aurora blobs */}
{/* Glass nav */}
Halo
{/* Hero */}
New · Halo Compose enters beta

A workspace that thinks in colour.

Notes, canvases, and prompts in one luminous surface. Built for designers who don't need another folder tree.

{["#ff5b6b", "#ffce5b", "#5bff8c"].map(c => (
))}
{[1,2,3].map(i => (
Board #{i}
3 frames
))}
); // ============================================================ // 5. TERMINAL / MONO — black bg, monospace, hacker minimal // ============================================================ const StyleTerminal = () => (
$ localhost.dev ~/forge
▸ build_0427 · 11ms cold start

forge()
— a tiny db
for serious people.

{`// 0 dependencies. 28kb gzipped. Edge-deployable.`}
{`// SQL syntax, KV speed. Built in Rust.`}

$ npm i @forge/edge
✓ installed in 0.8s
$ forge init
✓ ready — visit :3000
$
{[ { k: "latency.p99", v: "1.4ms", h: "+0.0ms wk" }, { k: "regions", v: "37", h: "all green" }, { k: "stars", v: "24.8k", h: "↑ 1,204 wk" }, { k: "uptime.90d", v: "99.998%", h: "no incidents" }, ].map(r => (
{r.k} {r.v} {r.h}
))}
); // ============================================================ // 6. ORGANIC / WARM SERIF — soft shapes, blush palette, slow // ============================================================ const StyleOrganic = () => (
marrow · slow goods co.
bag · 0
· the spring releases ·

A little
honey,{" "} a little
patience.

Twenty-eight new jars from the spring meadow harvest, poured by hand, labelled in pencil, sent in straw.

ships in straw, mondays
jar · still life
); // ============================================================ // 7. CYBER / NEON GRID — dense data, neon accent, technical // ============================================================ const StyleCyber = () => (
NULL//STATE v2.6.1-rc ● ONLINE
▶ TARGET_OS: ANY · CPU: 0.4% · MEM: 28MB

Run the
edge, not the
datacentre.

A microVM runtime that boots in 12ms, anywhere on the planet. Stop renting servers. Start renting milliseconds.

LIVE.TELEMETRY14:22:09 UTC
{[ { region: "AMS", lat: "1.2ms", load: 72 }, { region: "SFO", lat: "0.9ms", load: 58 }, { region: "NRT", lat: "1.4ms", load: 81 }, { region: "GRU", lat: "1.1ms", load: 44 }, { region: "JNB", lat: "1.8ms", load: 33 }, ].map(r => (
{r.region} {r.lat}
70 ? "#ff007a" : "#00f0ff", boxShadow: r.load > 70 ? "0 0 8px #ff007a" : "0 0 8px #00f0ff", }}>
{r.load}%
))}
); // ============================================================ // 8. ANTI-DESIGN — overlapping, mixed type, raw, "more is more" // ============================================================ const StyleAntiDesign = () => (
{/* Floating sticker tape */}
★ NEW ★ NEW ★ NEW ★ NEW ★
noise*floor

we make
ugly{" "} magazines

ISSUE 04£12.00

A quarterly print zine for people who think websites peaked in 1998. Hand-collated. Sometimes stapled. Always opinionated.

→ subscribe, you coward
); // ============================================================ // 9. MINIMAL MONO — pure black on white, all type, one image // ============================================================ const StyleMinimal = () => (
Atelier No.7
Brand & identity, since 2017

We design
the quiet parts
of loud companies.

Currently
One opening · Q3
Based
Copenhagen / NYC
Selected
Aesop · Loewe · MoMA
); // ============================================================ // 10. MAXIMALIST Y2K — gradient, chunky type, decoration // ============================================================ const StyleMaximalist = () => (
{/* Decorative shapes */}
sugarglass.fm
● LIVE BROADCAST · WED 8PM

The sound
of a good
summer.

NOW PLAYING
"Peach Skin"
by tangerine club
01:42 / 04:21
); // ============================================================ // Export to window so the canvas file can pick them up // ============================================================ Object.assign(window, { StyleEditorial, StyleBrutalist, StyleBento, StyleAurora, StyleTerminal, StyleOrganic, StyleCyber, StyleAntiDesign, StyleMinimal, StyleMaximalist, });