72 lines
3.7 KiB
HTML
72 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Modern website design styles · 2026 sampler</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
html, body { margin: 0; padding: 0; height: 100%; background: #f0eee9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
|
||
</style>
|
||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
|
||
<script type="text/babel" src="design-canvas.jsx"></script>
|
||
<script type="text/babel" src="styles.jsx"></script>
|
||
<script type="text/babel">
|
||
const { DesignCanvas, DCSection, DCArtboard, DCPostIt } = window;
|
||
|
||
// Each artboard is a 1280×800 desktop hero so the styles read as full
|
||
// landing pages, not crops. They're laid out in three thematic rows so
|
||
// the user can compare neighbours and skim the whole field at once.
|
||
|
||
const W = 1280, H = 800;
|
||
|
||
function App() {
|
||
return (
|
||
<DesignCanvas>
|
||
<DCSection
|
||
id="restrained"
|
||
title="The restrained school"
|
||
subtitle="Type-led, gridded, lots of white space — the editorial revival."
|
||
>
|
||
<DCArtboard id="editorial" label="01 · Editorial Swiss" width={W} height={H}><StyleEditorial /></DCArtboard>
|
||
<DCArtboard id="minimal" label="02 · Minimal mono" width={W} height={H}><StyleMinimal /></DCArtboard>
|
||
<DCArtboard id="organic" label="03 · Organic / warm serif" width={W} height={H}><StyleOrganic /></DCArtboard>
|
||
</DCSection>
|
||
|
||
<DCSection
|
||
id="product"
|
||
title="The product-led school"
|
||
subtitle="Dark UI, bento grids, frosted glass — what modern SaaS sites look like in 2026."
|
||
>
|
||
<DCArtboard id="bento" label="04 · Dark bento" width={W} height={H}><StyleBento /></DCArtboard>
|
||
<DCArtboard id="aurora" label="05 · Glass / Aurora" width={W} height={H}><StyleAurora /></DCArtboard>
|
||
<DCArtboard id="terminal" label="06 · Terminal mono" width={W} height={H}><StyleTerminal /></DCArtboard>
|
||
<DCArtboard id="cyber" label="07 · Cyber / neon grid" width={W} height={H}><StyleCyber /></DCArtboard>
|
||
</DCSection>
|
||
|
||
<DCSection
|
||
id="expressive"
|
||
title="The expressive school"
|
||
subtitle="Loud, opinionated, hand-feeling. Pushback against grid-perfect SaaS."
|
||
>
|
||
<DCArtboard id="brutalist" label="08 · Neo-brutalism" width={W} height={H}><StyleBrutalist /></DCArtboard>
|
||
<DCArtboard id="maximalist" label="09 · Maximalist Y2K" width={W} height={H}><StyleMaximalist /></DCArtboard>
|
||
<DCArtboard id="anti" label="10 · Anti-design" width={W} height={H}><StyleAntiDesign /></DCArtboard>
|
||
</DCSection>
|
||
</DesignCanvas>
|
||
);
|
||
}
|
||
|
||
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||
</script>
|
||
</body>
|
||
</html>
|