picasso-skill 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -7
- package/agents/picasso.md +305 -2
- package/package.json +1 -1
- package/skills/picasso/references/accessibility-wcag.md +245 -0
- package/skills/picasso/references/anti-patterns.md +138 -49
- package/skills/picasso/references/color-and-contrast.md +251 -2
- package/skills/picasso/references/conversion-design.md +193 -0
- package/skills/picasso/references/data-visualization.md +226 -0
- package/skills/picasso/references/modern-css-performance.md +361 -0
- package/skills/picasso/references/performance-optimization.md +746 -0
- package/skills/picasso/references/style-presets.md +502 -0
- package/skills/picasso/references/typography.md +206 -2
- package/skills/picasso/references/ux-psychology.md +235 -0
- package/skills/picasso/references/ux-writing.md +513 -0
- package/skills/picasso/references/accessibility.md +0 -172
|
@@ -0,0 +1,502 @@
|
|
|
1
|
+
# Style Presets Reference
|
|
2
|
+
|
|
3
|
+
22 curated visual presets for AI agents building frontend interfaces. Each preset is a complete design direction with specific values ready to apply.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Dark Themes
|
|
8
|
+
|
|
9
|
+
### 1. Bold Signal
|
|
10
|
+
|
|
11
|
+
**Mood:** Confident, high-impact, modern SaaS.
|
|
12
|
+
**Colors:**
|
|
13
|
+
|
|
14
|
+
| Role | Hex | Usage |
|
|
15
|
+
|------|-----|-------|
|
|
16
|
+
| Background | `#0a0a0a` to `#1a1a2e` gradient | Page background |
|
|
17
|
+
| Primary | `#ff6b35` | CTAs, highlights |
|
|
18
|
+
| Text | `#f5f5f5` | Headings, body |
|
|
19
|
+
| Muted | `#8a8a8a` | Secondary text |
|
|
20
|
+
| Surface | `#1e1e2e` | Cards, panels |
|
|
21
|
+
|
|
22
|
+
**Fonts:** Archivo Black (headings) + Space Grotesk (body)
|
|
23
|
+
**Border Radius:** `8px`
|
|
24
|
+
**Signature Element:** Full-bleed orange gradient bar across the top of hero sections. Oversized display type (80px+) with tight letter-spacing (-0.03em).
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
### 2. Electric Studio
|
|
29
|
+
|
|
30
|
+
**Mood:** Bold, professional, design studio portfolio.
|
|
31
|
+
**Colors:**
|
|
32
|
+
|
|
33
|
+
| Role | Hex | Usage |
|
|
34
|
+
|------|-----|-------|
|
|
35
|
+
| Background | `#0d1117` | Main background |
|
|
36
|
+
| Primary | `#2563eb` | Accent, links |
|
|
37
|
+
| Secondary | `#ffffff` | Split panel, text on dark |
|
|
38
|
+
| Surface | `#161b22` | Cards |
|
|
39
|
+
| Border | `#30363d` | Dividers |
|
|
40
|
+
|
|
41
|
+
**Fonts:** Manrope (all weights, 300-800)
|
|
42
|
+
**Border Radius:** `12px`
|
|
43
|
+
**Signature Element:** Split-panel layout with white left panel and dark blue right panel. Asymmetric grid with large imagery.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
### 3. Creative Voltage
|
|
48
|
+
|
|
49
|
+
**Mood:** Energetic, retro-modern, creative agency.
|
|
50
|
+
**Colors:**
|
|
51
|
+
|
|
52
|
+
| Role | Hex | Usage |
|
|
53
|
+
|------|-----|-------|
|
|
54
|
+
| Background | `#0f0f0f` | Base |
|
|
55
|
+
| Primary | `#3b82f6` | Electric blue accents |
|
|
56
|
+
| Accent | `#facc15` | Neon yellow highlights |
|
|
57
|
+
| Text | `#e4e4e7` | Body copy |
|
|
58
|
+
| Surface | `#1a1a1a` | Cards, code blocks |
|
|
59
|
+
|
|
60
|
+
**Fonts:** Syne (headings, 700-800) + Space Mono (body, code)
|
|
61
|
+
**Border Radius:** `4px` (sharp, technical feel)
|
|
62
|
+
**Signature Element:** Monospace body text with electric blue underlines on links. Yellow highlight markers on key phrases. Visible grid lines in backgrounds.
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
### 4. Dark Botanical
|
|
67
|
+
|
|
68
|
+
**Mood:** Elegant, sophisticated, luxury editorial.
|
|
69
|
+
**Colors:**
|
|
70
|
+
|
|
71
|
+
| Role | Hex | Usage |
|
|
72
|
+
|------|-----|-------|
|
|
73
|
+
| Background | `#1a1a1a` | Base |
|
|
74
|
+
| Primary | `#c9a96e` | Gold accents |
|
|
75
|
+
| Secondary | `#8b6f4e` | Warm brown |
|
|
76
|
+
| Text | `#e8e0d5` | Warm white body text |
|
|
77
|
+
| Surface | `#242424` | Cards |
|
|
78
|
+
| Accent | `#4a6741` | Subtle green touches |
|
|
79
|
+
|
|
80
|
+
**Fonts:** Cormorant (headings, italic for emphasis) + IBM Plex Sans (body, 300-400)
|
|
81
|
+
**Border Radius:** `2px` (near-square, editorial)
|
|
82
|
+
**Signature Element:** Thin gold horizontal rules between sections. Large italic serif pull quotes. Generous line-height (1.8) for body text.
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## Light Themes
|
|
87
|
+
|
|
88
|
+
### 5. Notebook Tabs
|
|
89
|
+
|
|
90
|
+
**Mood:** Editorial, organized, content-heavy layouts.
|
|
91
|
+
**Colors:**
|
|
92
|
+
|
|
93
|
+
| Role | Hex | Usage |
|
|
94
|
+
|------|-----|-------|
|
|
95
|
+
| Background | `#faf7f2` | Cream paper |
|
|
96
|
+
| Primary | `#2d2d2d` | Text |
|
|
97
|
+
| Tab Blue | `#3b82f6` | Active tab |
|
|
98
|
+
| Tab Green | `#22c55e` | Category tab |
|
|
99
|
+
| Tab Orange | `#f97316` | Category tab |
|
|
100
|
+
| Tab Purple | `#a855f7` | Category tab |
|
|
101
|
+
| Border | `#e5e0d8` | Dividers, card edges |
|
|
102
|
+
|
|
103
|
+
**Fonts:** Bodoni Moda (headings, display) + DM Sans (body, UI)
|
|
104
|
+
**Border Radius:** `8px` body, `20px` tabs
|
|
105
|
+
**Signature Element:** Colored tab navigation at the top of content sections. Each tab is a rounded pill with its category color. Paper-texture background (subtle noise overlay at 3% opacity).
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
### 6. Pastel Geometry
|
|
110
|
+
|
|
111
|
+
**Mood:** Friendly, approachable, startup SaaS.
|
|
112
|
+
**Colors:**
|
|
113
|
+
|
|
114
|
+
| Role | Hex | Usage |
|
|
115
|
+
|------|-----|-------|
|
|
116
|
+
| Background | `#ffffff` | Base |
|
|
117
|
+
| Primary | `#6366f1` | Indigo CTAs |
|
|
118
|
+
| Surface | `#f0f0ff` | Light indigo cards |
|
|
119
|
+
| Accent Pink | `#f9a8d4` | Badges, tags |
|
|
120
|
+
| Accent Green | `#86efac` | Success states |
|
|
121
|
+
| Accent Yellow | `#fde68a` | Warnings, highlights |
|
|
122
|
+
| Text | `#1e1b4b` | Dark indigo headings |
|
|
123
|
+
| Body | `#4b5563` | Gray body text |
|
|
124
|
+
|
|
125
|
+
**Fonts:** Plus Jakarta Sans (all, 400-700)
|
|
126
|
+
**Border Radius:** `16px` cards, `999px` pills/badges
|
|
127
|
+
**Signature Element:** Rounded pill-shaped buttons and badges. Pastel-tinted cards with no visible border (background color differentiation only). Geometric shapes as decorative accents (circles, rounded rectangles) in pastel colors.
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
### 7. Split Pastel
|
|
132
|
+
|
|
133
|
+
**Mood:** Playful, modern, creative product.
|
|
134
|
+
**Colors:**
|
|
135
|
+
|
|
136
|
+
| Role | Hex | Usage |
|
|
137
|
+
|------|-----|-------|
|
|
138
|
+
| Left Panel | `#fde8e0` | Peach |
|
|
139
|
+
| Right Panel | `#e8e0fd` | Lavender |
|
|
140
|
+
| Primary | `#4f46e5` | CTAs on both panels |
|
|
141
|
+
| Text Dark | `#1e1b4b` | Headings |
|
|
142
|
+
| Text Body | `#6b7280` | Body copy |
|
|
143
|
+
| White | `#ffffff` | Cards, inputs |
|
|
144
|
+
|
|
145
|
+
**Fonts:** Outfit (all, 300-700)
|
|
146
|
+
**Border Radius:** `12px`
|
|
147
|
+
**Signature Element:** Vertical 50/50 split layout with two pastel background colors. Content floats in white cards on top of the colored panels. Smooth transitions between panels on scroll.
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
### 8. Vintage Editorial
|
|
152
|
+
|
|
153
|
+
**Mood:** Witty, personality-driven, magazine/blog.
|
|
154
|
+
**Colors:**
|
|
155
|
+
|
|
156
|
+
| Role | Hex | Usage |
|
|
157
|
+
|------|-----|-------|
|
|
158
|
+
| Background | `#faf5eb` | Cream/parchment |
|
|
159
|
+
| Primary | `#c41e3a` | Red accents |
|
|
160
|
+
| Text | `#1a1a1a` | Headlines |
|
|
161
|
+
| Body | `#3d3d3d` | Body copy |
|
|
162
|
+
| Accent | `#2a5a8c` | Links |
|
|
163
|
+
| Geometric | `#f4c542` | Decorative shapes |
|
|
164
|
+
|
|
165
|
+
**Fonts:** Fraunces (headings, optical-size variable) + Work Sans (body, 400-500)
|
|
166
|
+
**Border Radius:** `0px` (sharp edges, editorial grid)
|
|
167
|
+
**Signature Element:** Geometric shapes (triangles, circles) as decorative elements overlapping content. Visible column grid. Drop caps on article openings. Red horizontal rules.
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## Specialty Themes
|
|
172
|
+
|
|
173
|
+
### 9. Neon Cyber
|
|
174
|
+
|
|
175
|
+
**Mood:** Futuristic, cyberpunk, tech-forward.
|
|
176
|
+
**Colors:**
|
|
177
|
+
|
|
178
|
+
| Role | Hex | Usage |
|
|
179
|
+
|------|-----|-------|
|
|
180
|
+
| Background | `#0a0a0f` | Near-black |
|
|
181
|
+
| Primary | `#00ffff` | Cyan neon |
|
|
182
|
+
| Secondary | `#ff00ff` | Magenta neon |
|
|
183
|
+
| Accent | `#ffff00` | Yellow highlights |
|
|
184
|
+
| Text | `#e0e0e0` | Body text |
|
|
185
|
+
| Surface | `#12121a` | Cards |
|
|
186
|
+
|
|
187
|
+
**Fonts:** Clash Display (headings, 600-700) + Satoshi (body, 400-500)
|
|
188
|
+
**Border Radius:** `4px`
|
|
189
|
+
**Signature Element:** Neon glow effects via `box-shadow: 0 0 20px rgba(0, 255, 255, 0.3)`. Particle or grid backgrounds using CSS or canvas. Glitch-effect text on hover. Thin cyan borders on cards.
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
### 10. Terminal Green
|
|
194
|
+
|
|
195
|
+
**Mood:** Developer, hacker, retro terminal.
|
|
196
|
+
**Colors:**
|
|
197
|
+
|
|
198
|
+
| Role | Hex | Usage |
|
|
199
|
+
|------|-----|-------|
|
|
200
|
+
| Background | `#0d1117` | Terminal black |
|
|
201
|
+
| Primary | `#00ff41` | Terminal green |
|
|
202
|
+
| Dimmed | `#008f11` | Inactive green |
|
|
203
|
+
| Text | `#00ff41` | All text |
|
|
204
|
+
| Cursor | `#00ff41` | Blinking cursor |
|
|
205
|
+
| Surface | `#161b22` | Code blocks |
|
|
206
|
+
|
|
207
|
+
**Fonts:** JetBrains Mono (everything, 400-700)
|
|
208
|
+
**Border Radius:** `0px`
|
|
209
|
+
**Signature Element:** Scan-line overlay (repeating 2px transparent/1px rgba(0,0,0,0.1) gradient). Blinking cursor animation on headings. All text is monospace. `> ` prefix on list items. Commands styled as terminal input with `$` prompt.
|
|
210
|
+
|
|
211
|
+
```css
|
|
212
|
+
.scanlines {
|
|
213
|
+
background: repeating-linear-gradient(
|
|
214
|
+
0deg,
|
|
215
|
+
transparent,
|
|
216
|
+
transparent 2px,
|
|
217
|
+
rgba(0, 0, 0, 0.1) 2px,
|
|
218
|
+
rgba(0, 0, 0, 0.1) 3px
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
|
+
.cursor::after {
|
|
222
|
+
content: '|';
|
|
223
|
+
animation: blink 1s step-end infinite;
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
### 11. Swiss Modern
|
|
230
|
+
|
|
231
|
+
**Mood:** Minimal, Bauhaus-inspired, design systems.
|
|
232
|
+
**Colors:**
|
|
233
|
+
|
|
234
|
+
| Role | Hex | Usage |
|
|
235
|
+
|------|-----|-------|
|
|
236
|
+
| Background | `#ffffff` | Clean white |
|
|
237
|
+
| Primary | `#000000` | Text, lines |
|
|
238
|
+
| Accent | `#e63946` | Red, used sparingly |
|
|
239
|
+
| Gray | `#6b7280` | Secondary text |
|
|
240
|
+
| Light | `#f3f4f6` | Backgrounds, cards |
|
|
241
|
+
|
|
242
|
+
**Fonts:** Archivo (headings, 500-700) + Nunito (body, 400-600)
|
|
243
|
+
**Border Radius:** `0px`
|
|
244
|
+
**Signature Element:** Visible grid system (light gray grid lines as background). Bold red accent used for one element per section only. Large whitespace. Strong typographic hierarchy with 4:1+ size ratio between heading and body. Left-aligned everything.
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
### 12. Paper & Ink
|
|
249
|
+
|
|
250
|
+
**Mood:** Literary, editorial, long-form reading.
|
|
251
|
+
**Colors:**
|
|
252
|
+
|
|
253
|
+
| Role | Hex | Usage |
|
|
254
|
+
|------|-----|-------|
|
|
255
|
+
| Background | `#fefdfb` | Off-white paper |
|
|
256
|
+
| Text | `#2c2c2c` | Rich black |
|
|
257
|
+
| Accent | `#8b4513` | Saddle brown links |
|
|
258
|
+
| Muted | `#9ca3af` | Captions, metadata |
|
|
259
|
+
| Rule | `#d1cdc7` | Horizontal rules |
|
|
260
|
+
| Drop Cap | `#1a1a1a` | Initial letter |
|
|
261
|
+
|
|
262
|
+
**Fonts:** Cormorant Garamond (headings, italic/bold) + Source Serif 4 (body, 400)
|
|
263
|
+
**Border Radius:** `0px`
|
|
264
|
+
**Signature Element:** Large drop caps (first letter of opening paragraph, 4-line height, float left). Pull quotes in oversized italic serif with thin top/bottom rules. Wide margins (max-width: 680px for body text). Generous vertical rhythm (margin-bottom: 1.5em on paragraphs).
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
## Theme Factory Collection
|
|
269
|
+
|
|
270
|
+
### 13. Ocean Depths
|
|
271
|
+
|
|
272
|
+
**Mood:** Calm, professional, data-focused.
|
|
273
|
+
**Colors:**
|
|
274
|
+
|
|
275
|
+
| Role | Hex | Usage |
|
|
276
|
+
|------|-----|-------|
|
|
277
|
+
| Background | `#1a2332` | Deep navy |
|
|
278
|
+
| Primary | `#2d8b8b` | Teal actions |
|
|
279
|
+
| Secondary | `#a8dadc` | Seafoam highlights |
|
|
280
|
+
| Text | `#e8edf2` | Light body text |
|
|
281
|
+
| Surface | `#223044` | Cards |
|
|
282
|
+
|
|
283
|
+
**Fonts:** DejaVu Sans (all)
|
|
284
|
+
**Border Radius:** `8px`
|
|
285
|
+
**Signature Element:** Subtle wave-pattern dividers between sections using SVG. Teal-to-seafoam gradient on primary buttons.
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
289
|
+
### 14. Sunset Boulevard
|
|
290
|
+
|
|
291
|
+
**Mood:** Warm, cinematic, lifestyle/travel.
|
|
292
|
+
**Colors:**
|
|
293
|
+
|
|
294
|
+
| Role | Hex | Usage |
|
|
295
|
+
|------|-----|-------|
|
|
296
|
+
| Background | `#fffaf5` | Warm white |
|
|
297
|
+
| Primary | `#e76f51` | Burnt orange CTAs |
|
|
298
|
+
| Secondary | `#f4a261` | Coral accents |
|
|
299
|
+
| Dark | `#264653` | Deep teal text |
|
|
300
|
+
| Surface | `#fff5ed` | Warm tinted cards |
|
|
301
|
+
|
|
302
|
+
**Fonts:** DejaVu Serif (headings) + DejaVu Sans (body)
|
|
303
|
+
**Border Radius:** `12px`
|
|
304
|
+
**Signature Element:** Warm gradient overlays on images (orange to transparent). Rounded image frames. Sunset-warm color temperature across all neutrals.
|
|
305
|
+
|
|
306
|
+
---
|
|
307
|
+
|
|
308
|
+
### 15. Forest Canopy
|
|
309
|
+
|
|
310
|
+
**Mood:** Natural, sustainable, organic brand.
|
|
311
|
+
**Colors:**
|
|
312
|
+
|
|
313
|
+
| Role | Hex | Usage |
|
|
314
|
+
|------|-----|-------|
|
|
315
|
+
| Background | `#faf9f6` | Ivory |
|
|
316
|
+
| Primary | `#2d4a2b` | Forest green |
|
|
317
|
+
| Secondary | `#7d8471` | Sage |
|
|
318
|
+
| Text | `#2d4a2b` | Dark green |
|
|
319
|
+
| Surface | `#f0efe8` | Muted green-gray cards |
|
|
320
|
+
|
|
321
|
+
**Fonts:** FreeSerif (headings) + DejaVu Sans (body)
|
|
322
|
+
**Border Radius:** `6px`
|
|
323
|
+
**Signature Element:** Leaf/botanical line-art illustrations as section dividers. Green duotone image treatment. Linen texture overlay at 2% opacity.
|
|
324
|
+
|
|
325
|
+
---
|
|
326
|
+
|
|
327
|
+
### 16. Golden Hour
|
|
328
|
+
|
|
329
|
+
**Mood:** Artisan, craft, handmade marketplace.
|
|
330
|
+
**Colors:**
|
|
331
|
+
|
|
332
|
+
| Role | Hex | Usage |
|
|
333
|
+
|------|-----|-------|
|
|
334
|
+
| Background | `#faf6f0` | Warm cream |
|
|
335
|
+
| Primary | `#f4a900` | Mustard |
|
|
336
|
+
| Secondary | `#c1666b` | Terracotta/rose |
|
|
337
|
+
| Dark | `#4a403a` | Chocolate text |
|
|
338
|
+
| Surface | `#f5f0e6` | Warm cards |
|
|
339
|
+
|
|
340
|
+
**Fonts:** FreeSans (all)
|
|
341
|
+
**Border Radius:** `8px`
|
|
342
|
+
**Signature Element:** Mustard-yellow highlight strips behind headings (like marker highlight). Terracotta badges and tags. Warm photography filters.
|
|
343
|
+
|
|
344
|
+
---
|
|
345
|
+
|
|
346
|
+
### 17. Arctic Frost
|
|
347
|
+
|
|
348
|
+
**Mood:** Clean, precise, corporate/fintech.
|
|
349
|
+
**Colors:**
|
|
350
|
+
|
|
351
|
+
| Role | Hex | Usage |
|
|
352
|
+
|------|-----|-------|
|
|
353
|
+
| Background | `#f8fafc` | Cold white |
|
|
354
|
+
| Primary | `#4a6fa5` | Steel blue |
|
|
355
|
+
| Secondary | `#d4e4f7` | Ice blue surfaces |
|
|
356
|
+
| Neutral | `#c0c0c0` | Silver borders |
|
|
357
|
+
| Text | `#1e293b` | Slate text |
|
|
358
|
+
|
|
359
|
+
**Fonts:** DejaVu Sans (all)
|
|
360
|
+
**Border Radius:** `6px`
|
|
361
|
+
**Signature Element:** Frosted glass cards (`backdrop-filter: blur(10px); background: rgba(255,255,255,0.7)`). Thin silver borders. Blue-tinted shadows.
|
|
362
|
+
|
|
363
|
+
---
|
|
364
|
+
|
|
365
|
+
### 18. Desert Rose
|
|
366
|
+
|
|
367
|
+
**Mood:** Feminine, wellness, beauty brand.
|
|
368
|
+
**Colors:**
|
|
369
|
+
|
|
370
|
+
| Role | Hex | Usage |
|
|
371
|
+
|------|-----|-------|
|
|
372
|
+
| Background | `#fdf8f6` | Rose white |
|
|
373
|
+
| Primary | `#d4a5a5` | Dusty rose |
|
|
374
|
+
| Secondary | `#b87d6d` | Clay |
|
|
375
|
+
| Dark | `#5d2e46` | Burgundy text |
|
|
376
|
+
| Surface | `#f9f0ed` | Blush cards |
|
|
377
|
+
|
|
378
|
+
**Fonts:** FreeSans (all)
|
|
379
|
+
**Border Radius:** `16px`
|
|
380
|
+
**Signature Element:** Soft rounded shapes everywhere. Dusty rose gradient backgrounds. Generous padding and whitespace. Floating circular image crops.
|
|
381
|
+
|
|
382
|
+
---
|
|
383
|
+
|
|
384
|
+
### 19. Tech Innovation
|
|
385
|
+
|
|
386
|
+
**Mood:** Cutting-edge, AI/ML product, developer tool.
|
|
387
|
+
**Colors:**
|
|
388
|
+
|
|
389
|
+
| Role | Hex | Usage |
|
|
390
|
+
|------|-----|-------|
|
|
391
|
+
| Background | `#1e1e1e` | Dark gray |
|
|
392
|
+
| Primary | `#0066ff` | Electric blue |
|
|
393
|
+
| Accent | `#00ffff` | Neon cyan highlights |
|
|
394
|
+
| Text | `#e0e0e0` | Light gray body |
|
|
395
|
+
| Surface | `#2a2a2a` | Cards |
|
|
396
|
+
| Success | `#00ff88` | Green accents |
|
|
397
|
+
|
|
398
|
+
**Fonts:** Inter (all, variable weight)
|
|
399
|
+
**Border Radius:** `8px`
|
|
400
|
+
**Signature Element:** Electric blue glow on interactive elements. Cyan code syntax highlighting. Dark glass morphism cards. Animated gradient borders on featured sections.
|
|
401
|
+
|
|
402
|
+
```css
|
|
403
|
+
.glow-card {
|
|
404
|
+
border: 1px solid rgba(0, 102, 255, 0.3);
|
|
405
|
+
box-shadow: 0 0 15px rgba(0, 102, 255, 0.1),
|
|
406
|
+
inset 0 0 15px rgba(0, 102, 255, 0.05);
|
|
407
|
+
}
|
|
408
|
+
```
|
|
409
|
+
|
|
410
|
+
---
|
|
411
|
+
|
|
412
|
+
### 20. Botanical Garden
|
|
413
|
+
|
|
414
|
+
**Mood:** Fresh, educational, nature-forward.
|
|
415
|
+
**Colors:**
|
|
416
|
+
|
|
417
|
+
| Role | Hex | Usage |
|
|
418
|
+
|------|-----|-------|
|
|
419
|
+
| Background | `#f5f3ed` | Cream |
|
|
420
|
+
| Primary | `#4a7c59` | Fern green |
|
|
421
|
+
| Accent | `#f9a620` | Marigold |
|
|
422
|
+
| Text | `#2c3e2d` | Dark green |
|
|
423
|
+
| Surface | `#eceade` | Muted cream cards |
|
|
424
|
+
|
|
425
|
+
**Fonts:** DejaVu Serif (headings) + DejaVu Sans (body)
|
|
426
|
+
**Border Radius:** `10px`
|
|
427
|
+
**Signature Element:** Marigold accent buttons on green backgrounds. Botanical illustration style for icons (line weight 1.5px, single color). Cream-on-green inverted sections.
|
|
428
|
+
|
|
429
|
+
---
|
|
430
|
+
|
|
431
|
+
### 21. Midnight Galaxy
|
|
432
|
+
|
|
433
|
+
**Mood:** Mystical, creative, entertainment/music.
|
|
434
|
+
**Colors:**
|
|
435
|
+
|
|
436
|
+
| Role | Hex | Usage |
|
|
437
|
+
|------|-----|-------|
|
|
438
|
+
| Background | `#2b1e3e` | Deep purple |
|
|
439
|
+
| Primary | `#4a4e8f` | Cosmic blue |
|
|
440
|
+
| Secondary | `#a490c2` | Lavender |
|
|
441
|
+
| Accent | `#e8b4f8` | Light purple glow |
|
|
442
|
+
| Text | `#e8e0f0` | Pale lavender text |
|
|
443
|
+
| Surface | `#352848` | Cards |
|
|
444
|
+
|
|
445
|
+
**Fonts:** FreeSans (all)
|
|
446
|
+
**Border Radius:** `12px`
|
|
447
|
+
**Signature Element:** Purple-to-blue gradient backgrounds. Star-field particle effect or subtle dot pattern. Lavender glow on hover states. Cosmic radial gradients on hero sections.
|
|
448
|
+
|
|
449
|
+
```css
|
|
450
|
+
.galaxy-bg {
|
|
451
|
+
background: radial-gradient(ellipse at 30% 50%, #4a4e8f33, transparent 50%),
|
|
452
|
+
radial-gradient(ellipse at 70% 30%, #a490c233, transparent 40%),
|
|
453
|
+
#2b1e3e;
|
|
454
|
+
}
|
|
455
|
+
```
|
|
456
|
+
|
|
457
|
+
---
|
|
458
|
+
|
|
459
|
+
### 22. Warm Editorial
|
|
460
|
+
|
|
461
|
+
**Mood:** Refined, readable, modern magazine.
|
|
462
|
+
**Colors:**
|
|
463
|
+
|
|
464
|
+
| Role | Hex | Usage |
|
|
465
|
+
|------|-----|-------|
|
|
466
|
+
| Background | `#faf8f5` | Warm cream |
|
|
467
|
+
| Primary | `#1a1a1a` | Black text |
|
|
468
|
+
| Accent | `#c1666b` | Muted red links/accents |
|
|
469
|
+
| Muted | `#8c8c8c` | Metadata, captions |
|
|
470
|
+
| Surface | `#f0ede8` | Cards, asides |
|
|
471
|
+
| Rule | `#d4cfc8` | Horizontal dividers |
|
|
472
|
+
|
|
473
|
+
**Fonts:** Instrument Serif (headings, display) + Source Sans 3 (body, 400-600)
|
|
474
|
+
**Border Radius:** `4px`
|
|
475
|
+
**Signature Element:** Generous whitespace (120px+ section spacing). Thin 1px horizontal rules between content blocks. Large serif headings (48-64px) with tight line-height (1.1). Byline and date metadata in small caps.
|
|
476
|
+
|
|
477
|
+
---
|
|
478
|
+
|
|
479
|
+
## Feeling-to-Preset Quick Lookup
|
|
480
|
+
|
|
481
|
+
Find the right preset by the feeling you want to communicate.
|
|
482
|
+
|
|
483
|
+
| Feeling / Intent | Recommended Presets |
|
|
484
|
+
|-----------------|-------------------|
|
|
485
|
+
| Professional, trustworthy | Arctic Frost (17), Swiss Modern (11), Electric Studio (2) |
|
|
486
|
+
| Warm, inviting | Sunset Boulevard (14), Golden Hour (16), Warm Editorial (22) |
|
|
487
|
+
| Bold, high-energy | Bold Signal (1), Creative Voltage (3), Neon Cyber (9) |
|
|
488
|
+
| Calm, focused | Ocean Depths (13), Forest Canopy (15), Dark Botanical (4) |
|
|
489
|
+
| Playful, friendly | Pastel Geometry (6), Split Pastel (7), Botanical Garden (20) |
|
|
490
|
+
| Elegant, luxury | Dark Botanical (4), Paper & Ink (12), Desert Rose (18) |
|
|
491
|
+
| Technical, developer | Terminal Green (10), Tech Innovation (19), Creative Voltage (3) |
|
|
492
|
+
| Creative, artistic | Midnight Galaxy (21), Neon Cyber (9), Vintage Editorial (8) |
|
|
493
|
+
| Editorial, content-first | Warm Editorial (22), Paper & Ink (12), Notebook Tabs (5) |
|
|
494
|
+
| Feminine, wellness | Desert Rose (18), Split Pastel (7), Pastel Geometry (6) |
|
|
495
|
+
| Nature, sustainability | Forest Canopy (15), Botanical Garden (20), Dark Botanical (4) |
|
|
496
|
+
| Futuristic, sci-fi | Neon Cyber (9), Tech Innovation (19), Midnight Galaxy (21) |
|
|
497
|
+
| Minimal, clean | Swiss Modern (11), Arctic Frost (17), Warm Editorial (22) |
|
|
498
|
+
| Magazine, personality | Vintage Editorial (8), Notebook Tabs (5), Paper & Ink (12) |
|
|
499
|
+
| Startup SaaS | Pastel Geometry (6), Electric Studio (2), Bold Signal (1) |
|
|
500
|
+
| E-commerce, marketplace | Golden Hour (16), Sunset Boulevard (14), Pastel Geometry (6) |
|
|
501
|
+
| Portfolio, showcase | Electric Studio (2), Dark Botanical (4), Bold Signal (1) |
|
|
502
|
+
| Dashboard, data | Arctic Frost (17), Ocean Depths (13), Swiss Modern (11) |
|