alexei.dolgolyov
5dcadd1c20
Warm, friendly redesign replacing the generic cold-shadcn look. Built as a swappable token bundle so other presets can be added later; dark mode and the user-tunable accent hue are retained. Foundation - app.css: warm cream (light) + "dusk" (dark) token system; terracotta accent (default hue 16); pastel --room-* palette; vivid --status-* (dots/bars) plus AA-legible --status-*-ink (text); soft warm shadows; --radius 1rem; font tokens - Fonts: Fraunces (display) + Figtree (body), self-hosted in static/fonts (no Google CDN) so offline/LAN installs work; system-ui fallbacks kept - h1/h2/h3 render in Fraunces via base layer Chrome and surfaces - Sidebar, Header, home, AppCard/BoardCard, BoardHeader, sections, favorites - 29 widgets + integration renderers: cozy card shells, room-palette charts - Default background is a static warm "cozy" glow (mesh demoted, rAF gated on prefers-reduced-motion) System-wide - Status colors tokenized (no raw bg/text-*-500 or status hex); success/warning to status tokens, categorical to room palette, errors to destructive - Inputs rounded-xl; buttons rounded-xl; cards/dialogs rounded-[1.4rem]; soft-shadow vocabulary only; focus-visible:ring-primary/30 - Forms, admin tables (now cozy cards), dialogs, popovers, auth screens a11y: reduced-motion guards; darker status "ink" text for AA on cream. Known tradeoff: terracotta primary + white button text ~2.96:1 (signature color, user-tunable). Verified: svelte-check 0/0, build ok, 274 tests pass, eslint 0 errors. Design refs + system sheet in design-mockups/.
161 lines
4.5 KiB
HTML
161 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Launcher — Redesign Mockups</title>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Figtree:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
font-family: 'Figtree', system-ui, sans-serif;
|
|
background: #0e0e12;
|
|
color: #eee;
|
|
min-height: 100vh;
|
|
padding: 48px 24px;
|
|
}
|
|
.wrap {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
h1 {
|
|
font-family: 'Fraunces';
|
|
font-weight: 600;
|
|
font-size: 34px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
p.sub {
|
|
color: #9a99a6;
|
|
margin-top: 8px;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
max-width: 62ch;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 18px;
|
|
margin-top: 34px;
|
|
}
|
|
a.card {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
border: 1px solid #24242e;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
background: #15151c;
|
|
transition: 0.2s;
|
|
}
|
|
a.card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: #3a3a4a;
|
|
background: #191920;
|
|
}
|
|
.badge {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
display: inline-block;
|
|
}
|
|
.nm {
|
|
font-family: 'Fraunces';
|
|
font-weight: 600;
|
|
font-size: 21px;
|
|
margin: 14px 0 6px;
|
|
}
|
|
.ds {
|
|
color: #9a99a6;
|
|
font-size: 13.5px;
|
|
line-height: 1.5;
|
|
}
|
|
.swatch {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 14px;
|
|
}
|
|
.swatch span {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<h1>Web App Launcher — Redesign Directions</h1>
|
|
<p class="sub">
|
|
Four aesthetic directions for the same launcher, built as theme presets of one modernized
|
|
design system. Open each, resize, hover the cards, and try the live accent swatches in
|
|
Aurora Glass. Pick the one that fits — or mix and match.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="01-command-deck.html">
|
|
<span class="badge" style="background: #0d1f18; color: #36e0a4"
|
|
>01 · Dark · Power-user</span
|
|
>
|
|
<div class="nm">Command Deck</div>
|
|
<div class="ds">
|
|
Mission-control / terminal. Dense, glanceable telemetry, LED status, monospace data.
|
|
Saira + JetBrains Mono.
|
|
</div>
|
|
<div class="swatch">
|
|
<span style="background: #070a0d"></span><span style="background: #36e0a4"></span
|
|
><span style="background: #ffb020"></span><span style="background: #ff4d5e"></span>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="02-aurora-glass.html">
|
|
<span class="badge" style="background: #1d1340; color: #b69cff">02 · Dark · Premium</span>
|
|
<div class="nm">Aurora Glass</div>
|
|
<div class="ds">
|
|
Frosted glass over a living gradient mesh. Soft glows, generous space, fully retintable
|
|
accent. Outfit + Manrope.
|
|
</div>
|
|
<div class="swatch">
|
|
<span style="background: #0a0a14"></span
|
|
><span style="background: hsl(265 90% 66%)"></span
|
|
><span style="background: hsl(325 85% 65%)"></span
|
|
><span style="background: #34e0a1"></span>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="03-editorial.html">
|
|
<span class="badge" style="background: #2a1109; color: #ff5436">03 · Light · Bold</span>
|
|
<div class="nm">Editorial</div>
|
|
<div class="ds">
|
|
Magazine masthead, big display type, ink rules, hard shadows, asymmetric grid. Bricolage
|
|
Grotesque + Instrument Serif.
|
|
</div>
|
|
<div class="swatch">
|
|
<span style="background: #f4f1ea"></span><span style="background: #191712"></span
|
|
><span style="background: #ff5436"></span><span style="background: #1f4ae0"></span>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="04-cozy-home.html">
|
|
<span class="badge" style="background: #2a1c12; color: #ff9a76"
|
|
>04 · Light · Friendly</span
|
|
>
|
|
<div class="nm">Cozy Home</div>
|
|
<div class="ds">
|
|
Warm cream, soft rounded cards, pastel “rooms”, gentle motion. Friendly for the whole
|
|
household. Fraunces + Figtree.
|
|
</div>
|
|
<div class="swatch">
|
|
<span style="background: #fdf8f2"></span><span style="background: #e8754f"></span
|
|
><span style="background: #7fb069"></span><span style="background: #6ca9d6"></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|