-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathshowcase.html
More file actions
208 lines (187 loc) · 12.1 KB
/
Copy pathshowcase.html
File metadata and controls
208 lines (187 loc) · 12.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>lulu — a naive-design showcase</title>
<!--
Built with the naive-design skill, using design-engineering's craft rules.
naive-design → warm cream ground · paper grain · SVG wobble filter · sticker
cards · dot-face mascots · limited palette · Bricolage × Shantell.
design-eng → shadows-whisper (layered, low-opacity, warm — not one hard drop)
· typography-humanity (Bricolage + Shantell, never Inter; text-wrap:pretty)
· color-monochromatic discipline (one warm ground + few accents)
· prefers-reduced-motion (the draw-on underline is gated)
· never-scale-from-zero (nothing pops in from scale 0)
· border-radius (intentional soft scale).
The rule: intentional, not broken. Real grid, fixed jitter set, generous space.
-->
<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=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Shantell+Sans:ital,wght@0,400;0,500;0,600;1,500&display=swap" rel="stylesheet" />
<style>
:root{
--bg:#F5EFE1; --surface:#FBF7EE; --ink:#241F1B; --ink-soft:#5B524A;
--crayon:#C8392B; --orange:#EE8B3C; --green:#7FB069; --purple:#5B4B8A;
--mustard:#E6C15A; --teal:#76C2B3; --bubblegum:#F3B6C4; --lavender:#DCD0EE;
--sans:"Bricolage Grotesque", system-ui, sans-serif;
--hand:"Shantell Sans", "Bricolage Grotesque", cursive;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
background:var(--bg); color:var(--ink);
font-family:var(--sans); font-size:17px; line-height:1.6;
-webkit-font-smoothing:antialiased; text-wrap:pretty;
}
/* paper / riso grain — felt, not seen */
.grain{
position:fixed; inset:0; pointer-events:none; z-index:50;
opacity:.06; mix-blend-mode:multiply; background:#fff; filter:url(#grain);
}
.wrap{ max-width:1040px; margin:0 auto; padding:64px 48px 80px; position:relative; z-index:1; }
/* top bar */
.topbar{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:56px; }
.tag{ font-family:var(--hand); font-weight:600; font-size:18px; color:var(--ink-soft); }
.tag b{ color:var(--crayon); }
.year{ position:relative; font-family:var(--hand); font-weight:600; font-size:18px; padding:6px 10px; }
.year svg{ position:absolute; inset:-8px -6px; width:calc(100% + 12px); height:calc(100% + 16px); }
/* hero */
.hero{ margin-bottom:40px; }
.wordmark{
font-weight:800; font-size:140px; line-height:.9; letter-spacing:-.04em;
margin:0; color:var(--ink); display:inline-block; position:relative;
}
.underline{ display:block; width:360px; height:34px; margin-top:-6px; color:var(--crayon); }
.lede{
font-family:var(--hand); font-weight:500; font-size:26px; color:var(--ink);
max-width:30ch; margin:18px 0 0; transform:rotate(-1.2deg);
}
.lede em{ color:var(--crayon); font-style:normal; }
/* section heading */
.sec{ margin-top:64px; }
.sec h2{
font-family:var(--hand); font-weight:600; font-size:24px; color:var(--ink-soft);
margin:0 0 22px; transform:rotate(-.8deg); display:inline-block;
}
/* swatches */
.swatches{ display:flex; gap:18px; flex-wrap:wrap; }
.sw{ width:140px; }
.sw .chip{ width:100%; height:96px; display:block; }
.sw .name{ font-weight:600; font-size:15px; margin-top:10px; }
.sw .hex{ font-family:var(--hand); font-size:14px; color:var(--ink-soft); }
/* cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{ position:relative; padding:30px 26px 28px; }
.card .frame{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.card > *{ position:relative; z-index:1; }
.card .mascot{ width:92px; height:92px; display:block; margin-bottom:14px; }
.card h3{ font-weight:800; font-size:30px; margin:0; letter-spacing:-.02em; }
.card p{ font-family:var(--hand); font-weight:500; font-size:18px; color:var(--ink-soft); margin:6px 0 0; }
.c1{ transform:rotate(-2.2deg); } .c2{ transform:rotate(1.4deg); } .c3{ transform:rotate(-1deg); }
/* note */
.note{
margin-top:64px; font-family:var(--hand); font-weight:500; font-size:30px;
color:var(--ink); text-align:center; transform:rotate(-.6deg); line-height:1.4;
}
.note .circle{ position:relative; padding:0 8px; white-space:nowrap; }
.note .circle svg{ position:absolute; inset:-12px -10px; width:calc(100% + 20px); height:calc(100% + 24px); color:var(--crayon); }
/* footer */
.footer{ margin-top:60px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.btn{
font-family:var(--sans); font-weight:600; font-size:17px; color:var(--surface);
background:var(--ink); border:none; border-radius:9999px; padding:14px 28px; cursor:pointer;
transition:background .18s cubic-bezier(.25,1,.5,1), transform .18s cubic-bezier(.25,1,.5,1);
}
.btn:hover{ background:var(--crayon); transform:translateY(-1px); }
.badge{
font-family:var(--hand); font-weight:600; font-size:17px; color:var(--ink);
background:var(--mustard); border-radius:9999px; padding:10px 18px; transform:rotate(1.5deg);
}
@media (prefers-reduced-motion: no-preference){
.underline path{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1s .2s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
}
</style>
</head>
<body>
<!-- filters: grain + hand-drawn wobble -->
<svg width="0" height="0" aria-hidden="true" style="position:absolute">
<filter id="grain"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter>
<filter id="wobble"><feTurbulence type="fractalNoise" baseFrequency="0.013" numOctaves="2" seed="7" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="5"/></filter>
<filter id="wobble2"><feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="3" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="4"/></filter>
</svg>
<div class="grain"></div>
<div class="wrap">
<div class="topbar">
<div class="tag">naïve · <b>mini brand kit</b></div>
<div class="year">2026
<svg viewBox="0 0 80 50" fill="none" preserveAspectRatio="none" style="filter:url(#wobble2); color:var(--purple)">
<ellipse cx="40" cy="25" rx="36" ry="20" stroke="currentColor" stroke-width="2.4" vector-effect="non-scaling-stroke"/>
</svg>
</div>
</div>
<header class="hero">
<h1 class="wordmark">lulu</h1>
<svg class="underline" viewBox="0 0 360 34" fill="none" style="filter:url(#wobble)">
<path d="M6 22 C 70 8, 150 30, 210 16 S 330 8, 354 20" stroke="currentColor" stroke-width="7" stroke-linecap="round" pathLength="1"/>
</svg>
<p class="lede">serious brand system, <em>gentle doodle playground</em>.</p>
</header>
<section class="sec" id="colours">
<h2>colours — limited, on warm paper</h2>
<div class="swatches">
<div class="sw"><svg class="chip" viewBox="0 0 140 96" preserveAspectRatio="none" style="filter:url(#wobble)"><rect x="3" y="3" width="134" height="90" rx="16" fill="#FBF7EE" stroke="#241F1B" stroke-width="2.2" vector-effect="non-scaling-stroke"/></svg><div class="name">cream</div><div class="hex">#F5EFE1</div></div>
<div class="sw"><svg class="chip" viewBox="0 0 140 96" preserveAspectRatio="none" style="filter:url(#wobble)"><rect x="3" y="3" width="134" height="90" rx="16" fill="#241F1B" stroke="#241F1B" stroke-width="2.2" vector-effect="non-scaling-stroke"/></svg><div class="name">ink</div><div class="hex">#241F1B</div></div>
<div class="sw"><svg class="chip" viewBox="0 0 140 96" preserveAspectRatio="none" style="filter:url(#wobble)"><rect x="3" y="3" width="134" height="90" rx="16" fill="#C8392B" stroke="#241F1B" stroke-width="2.2" vector-effect="non-scaling-stroke"/></svg><div class="name">crayon</div><div class="hex">#C8392B</div></div>
<div class="sw"><svg class="chip" viewBox="0 0 140 96" preserveAspectRatio="none" style="filter:url(#wobble)"><rect x="3" y="3" width="134" height="90" rx="16" fill="#E6C15A" stroke="#241F1B" stroke-width="2.2" vector-effect="non-scaling-stroke"/></svg><div class="name">mustard</div><div class="hex">#E6C15A</div></div>
<div class="sw"><svg class="chip" viewBox="0 0 140 96" preserveAspectRatio="none" style="filter:url(#wobble)"><rect x="3" y="3" width="134" height="90" rx="16" fill="#7FB069" stroke="#241F1B" stroke-width="2.2" vector-effect="non-scaling-stroke"/></svg><div class="name">soft green</div><div class="hex">#7FB069</div></div>
<div class="sw"><svg class="chip" viewBox="0 0 140 96" preserveAspectRatio="none" style="filter:url(#wobble)"><rect x="3" y="3" width="134" height="90" rx="16" fill="#5B4B8A" stroke="#241F1B" stroke-width="2.2" vector-effect="non-scaling-stroke"/></svg><div class="name">deep purple</div><div class="hex">#5B4B8A</div></div>
</div>
</section>
<section class="sec" id="gang">
<h2>the gang — assets with tiny dot faces</h2>
<div class="cards">
<div class="card c1">
<svg class="frame" viewBox="0 0 300 230" preserveAspectRatio="none"><rect x="4" y="4" width="292" height="222" rx="22" fill="#FBF7EE" stroke="#241F1B" stroke-width="2.4" vector-effect="non-scaling-stroke" filter="url(#wobble)"/></svg>
<svg class="mascot" viewBox="0 0 100 100" fill="none" style="filter:url(#wobble2)">
<path d="M50 8 C78 8 90 32 88 56 C86 84 68 94 50 94 C32 94 14 84 12 56 C10 32 22 8 50 8Z" fill="#F3B6C4" stroke="#241F1B" stroke-width="3"/>
<circle cx="38" cy="50" r="4.5" fill="#241F1B"/><circle cx="62" cy="50" r="4.5" fill="#241F1B"/>
<path d="M38 66 Q50 76 62 66" stroke="#241F1B" stroke-width="3" stroke-linecap="round"/>
</svg>
<h3>mimo</h3>
<p>the friendly one. waves a lot.</p>
</div>
<div class="card c2">
<svg class="frame" viewBox="0 0 300 230" preserveAspectRatio="none"><rect x="4" y="4" width="292" height="222" rx="22" fill="#FBF7EE" stroke="#241F1B" stroke-width="2.4" vector-effect="non-scaling-stroke" filter="url(#wobble2)"/></svg>
<svg class="mascot" viewBox="0 0 100 100" fill="none" style="filter:url(#wobble)">
<path d="M50 10 C76 10 86 30 86 52 C86 80 70 92 50 92 C30 92 14 80 14 52 C14 30 24 10 50 10Z" fill="#76C2B3" stroke="#241F1B" stroke-width="3"/>
<circle cx="39" cy="48" r="4.5" fill="#241F1B"/><circle cx="61" cy="48" r="4.5" fill="#241F1B"/>
<path d="M40 64 Q50 70 60 64" stroke="#241F1B" stroke-width="3" stroke-linecap="round"/>
<path d="M50 10 L50 0" stroke="#241F1B" stroke-width="3" stroke-linecap="round"/><circle cx="50" cy="-2" r="4" fill="#C8392B" stroke="#241F1B" stroke-width="2"/>
</svg>
<h3>pip</h3>
<p>tiny antenna. big ideas.</p>
</div>
<div class="card c3">
<svg class="frame" viewBox="0 0 300 230" preserveAspectRatio="none"><rect x="4" y="4" width="292" height="222" rx="22" fill="#FBF7EE" stroke="#241F1B" stroke-width="2.4" vector-effect="non-scaling-stroke" filter="url(#wobble)"/></svg>
<svg class="mascot" viewBox="0 0 100 100" fill="none" style="filter:url(#wobble2)">
<path d="M22 30 Q50 6 78 30 Q92 50 78 78 Q50 96 22 78 Q8 50 22 30Z" fill="#E6C15A" stroke="#241F1B" stroke-width="3"/>
<circle cx="40" cy="48" r="4.5" fill="#241F1B"/><circle cx="62" cy="48" r="4.5" fill="#241F1B"/>
<path d="M40 64 Q51 72 62 63" stroke="#241F1B" stroke-width="3" stroke-linecap="round"/>
</svg>
<h3>tato</h3>
<p>a potato, mostly. very calm.</p>
</div>
</div>
</section>
<p class="note">
psst — imperfect <span class="circle">on purpose<svg viewBox="0 0 160 60" fill="none" preserveAspectRatio="none" style="filter:url(#wobble)"><ellipse cx="80" cy="30" rx="74" ry="24" stroke="currentColor" stroke-width="2.6" vector-effect="non-scaling-stroke"/></svg></span>, never broken.
</p>
<div class="footer">
<button class="btn">say hi 👋</button>
<span class="badge">made with love, not lorem ipsum</span>
</div>
</div>
</body>
</html>