@ohos-ports/slides-grab 1.5.0-beta.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/LICENSE +21 -0
- package/README-ko.md +292 -0
- package/README.md +301 -0
- package/bin/ohos-postinstall.cjs +118 -0
- package/bin/ppt-agent.js +620 -0
- package/convert.cjs +20 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/glib-2.0/include/glibconfig.h +220 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/index.js +1 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/libexpat.so +0 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/libffi.so +0 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/libjpeg.so +0 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/libpcre2-8.so.0 +0 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips-cpp.so.42.20.3 +0 -0
- package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips.so.42.20.3 +0 -0
- package/native/@img/sharp-libvips-openharmony-arm64/package.json +13 -0
- package/native/@img/sharp-openharmony-arm64/lib/sharp-openharmony-arm64.node +0 -0
- package/native/@img/sharp-openharmony-arm64/package.json +16 -0
- package/package.json +95 -0
- package/runtimes/claude-code/agents/design-critic-agent.md +23 -0
- package/runtimes/codex/agents/slides-grab-design-critic.md +22 -0
- package/scripts/build-viewer.js +444 -0
- package/scripts/design-gate.js +258 -0
- package/scripts/download-video.js +213 -0
- package/scripts/editor-server.js +1167 -0
- package/scripts/figma-export.js +169 -0
- package/scripts/generate-image.js +116 -0
- package/scripts/generate-images.js +164 -0
- package/scripts/html2pdf.js +822 -0
- package/scripts/html2png.js +246 -0
- package/scripts/html2pptx.js +162 -0
- package/scripts/import-template.js +86 -0
- package/scripts/install-runtime.js +216 -0
- package/scripts/render-tldraw.js +44 -0
- package/scripts/validate-slides.js +221 -0
- package/skills/slides-grab/SKILL.md +65 -0
- package/skills/slides-grab/references/presentation-workflow-reference.md +61 -0
- package/skills/slides-grab-card-news/SKILL.md +35 -0
- package/skills/slides-grab-design/SKILL.md +88 -0
- package/skills/slides-grab-design/references/beautiful-slide-defaults.md +88 -0
- package/skills/slides-grab-design/references/design-gate.md +349 -0
- package/skills/slides-grab-design/references/design-rules.md +76 -0
- package/skills/slides-grab-design/references/design-system-full.md +568 -0
- package/skills/slides-grab-design/references/detailed-design-rules.md +70 -0
- package/skills/slides-grab-export/SKILL.md +55 -0
- package/skills/slides-grab-export/references/export-rules.md +27 -0
- package/skills/slides-grab-export/references/html2pptx.md +627 -0
- package/skills/slides-grab-export/references/ooxml.md +427 -0
- package/skills/slides-grab-export/references/pptx-skill-reference.md +189 -0
- package/skills/slides-grab-html/SKILL.md +67 -0
- package/skills/slides-grab-image/SKILL.md +82 -0
- package/skills/slides-grab-plan/SKILL.md +68 -0
- package/skills/slides-grab-plan/references/design-md-to-slides-conversion.md +135 -0
- package/skills/slides-grab-plan/references/outline-format.md +47 -0
- package/skills/slides-grab-plan/references/plan-workflow-reference.md +140 -0
- package/src/codex-imagen.js +182 -0
- package/src/design-diversity-data.js +6932 -0
- package/src/design-gate-report.js +244 -0
- package/src/design-gate-state.js +329 -0
- package/src/design-import.js +164 -0
- package/src/design-md-parser.js +415 -0
- package/src/design-styles-data.js +1928 -0
- package/src/design-styles.js +209 -0
- package/src/editor/codex-edit.js +584 -0
- package/src/editor/edit-subprocess.js +170 -0
- package/src/editor/editor-codex-prompt.md +50 -0
- package/src/editor/editor.html +1785 -0
- package/src/editor/js/editor-bbox.js +332 -0
- package/src/editor/js/editor-chat.js +56 -0
- package/src/editor/js/editor-direct-edit.js +238 -0
- package/src/editor/js/editor-dom.js +59 -0
- package/src/editor/js/editor-init.js +405 -0
- package/src/editor/js/editor-navigation.js +54 -0
- package/src/editor/js/editor-select.js +558 -0
- package/src/editor/js/editor-send.js +175 -0
- package/src/editor/js/editor-sse.js +163 -0
- package/src/editor/js/editor-state.js +41 -0
- package/src/editor/js/editor-type.js +71 -0
- package/src/editor/js/editor-utils.js +167 -0
- package/src/editor/js/model-registry.js +37 -0
- package/src/editor/screenshot.js +82 -0
- package/src/export-resolution.cjs +68 -0
- package/src/figma.js +71 -0
- package/src/html2pptx-scale.cjs +120 -0
- package/src/html2pptx.cjs +1262 -0
- package/src/image-contract.js +329 -0
- package/src/image-native.js +468 -0
- package/src/nano-banana.js +841 -0
- package/src/ohos-browser-bridge.cjs +272 -0
- package/src/pptx-raster-export.cjs +299 -0
- package/src/resolve.js +110 -0
- package/src/slide-mode.cjs +72 -0
- package/src/template-fidelity.js +267 -0
- package/src/template-import.js +505 -0
- package/src/template-layout.js +261 -0
- package/src/template-pack.js +255 -0
- package/src/tldraw/render.js +473 -0
- package/src/validation/cli.js +120 -0
- package/src/validation/core.js +1023 -0
- package/templates/chart.html +121 -0
- package/templates/closing.html +54 -0
- package/templates/content.html +50 -0
- package/templates/contents.html +60 -0
- package/templates/cover.html +64 -0
- package/templates/custom/.gitkeep +0 -0
- package/templates/custom/README.md +7 -0
- package/templates/design-styles/README.md +20 -0
- package/templates/design-styles/preview.html +4438 -0
- package/templates/diagram-tldraw.html +56 -0
- package/templates/diagram.html +98 -0
- package/templates/quote.html +31 -0
- package/templates/section-divider.html +43 -0
- package/templates/split-layout.html +43 -0
- package/templates/statistics.html +55 -0
- package/templates/team.html +49 -0
- package/templates/timeline.html +59 -0
|
@@ -0,0 +1,4438 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ko">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>slides-grab Design Styles — 95 Collections</title>
|
|
8
|
+
<style>
|
|
9
|
+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&family=Space+Mono:wght@400;700&family=Bebas+Neue&family=Playfair+Display:ital,wght@0,700;1,700&family=DM+Serif+Display:ital@0;1&family=Barlow+Condensed:wght@600;800&display=swap');
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--bg: #0a0a0f;
|
|
13
|
+
--card-bg: #111118;
|
|
14
|
+
--accent: #e8ff3b;
|
|
15
|
+
--text: #f0f0f5;
|
|
16
|
+
--muted: #666680;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
* {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
background: var(--bg);
|
|
27
|
+
color: var(--text);
|
|
28
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
padding: 40px 20px 60px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
header {
|
|
34
|
+
text-align: center;
|
|
35
|
+
margin-bottom: 60px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
header .tag {
|
|
39
|
+
font-family: 'Space Mono', monospace;
|
|
40
|
+
font-size: 11px;
|
|
41
|
+
letter-spacing: 4px;
|
|
42
|
+
color: var(--accent);
|
|
43
|
+
text-transform: uppercase;
|
|
44
|
+
margin-bottom: 16px;
|
|
45
|
+
display: block;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
header h1 {
|
|
49
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
50
|
+
font-size: clamp(48px, 8vw, 96px);
|
|
51
|
+
letter-spacing: 2px;
|
|
52
|
+
line-height: 0.9;
|
|
53
|
+
color: var(--text);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
header h1 span {
|
|
57
|
+
color: var(--accent);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
header p {
|
|
61
|
+
margin-top: 16px;
|
|
62
|
+
color: var(--muted);
|
|
63
|
+
font-size: 14px;
|
|
64
|
+
font-weight: 300;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.grid {
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
70
|
+
gap: 24px;
|
|
71
|
+
max-width: 1200px;
|
|
72
|
+
margin: 0 auto;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.card {
|
|
76
|
+
border-radius: 16px;
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.card:hover {
|
|
83
|
+
transform: translateY(-6px);
|
|
84
|
+
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.preview {
|
|
88
|
+
height: 220px;
|
|
89
|
+
position: relative;
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
justify-content: center;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.card-info {
|
|
97
|
+
padding: 20px;
|
|
98
|
+
background: var(--card-bg);
|
|
99
|
+
border: 1px solid #1e1e2e;
|
|
100
|
+
border-top: none;
|
|
101
|
+
border-radius: 0 0 16px 16px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card-num {
|
|
105
|
+
font-family: 'Space Mono', monospace;
|
|
106
|
+
font-size: 10px;
|
|
107
|
+
color: var(--muted);
|
|
108
|
+
letter-spacing: 3px;
|
|
109
|
+
margin-bottom: 6px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.card-title {
|
|
113
|
+
font-size: 18px;
|
|
114
|
+
font-weight: 700;
|
|
115
|
+
margin-bottom: 8px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.card-desc {
|
|
119
|
+
font-size: 13px;
|
|
120
|
+
color: var(--muted);
|
|
121
|
+
line-height: 1.6;
|
|
122
|
+
font-weight: 300;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.tags {
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-wrap: wrap;
|
|
128
|
+
gap: 6px;
|
|
129
|
+
margin-top: 12px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.tag-pill {
|
|
133
|
+
font-family: 'Space Mono', monospace;
|
|
134
|
+
font-size: 10px;
|
|
135
|
+
padding: 3px 10px;
|
|
136
|
+
border-radius: 100px;
|
|
137
|
+
border: 1px solid #2a2a3a;
|
|
138
|
+
color: var(--muted);
|
|
139
|
+
letter-spacing: 1px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ══════════════════════════════════════════
|
|
143
|
+
기존 01–20 스타일
|
|
144
|
+
══════════════════════════════════════════ */
|
|
145
|
+
|
|
146
|
+
/* 01 GLASSMORPHISM */
|
|
147
|
+
.preview-glass {
|
|
148
|
+
background: linear-gradient(135deg, #1a1a4e 0%, #6b21a8 50%, #1e3a5f 100%);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.glass-el {
|
|
152
|
+
position: absolute;
|
|
153
|
+
border-radius: 16px;
|
|
154
|
+
backdrop-filter: blur(12px);
|
|
155
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.glass-el1 {
|
|
159
|
+
width: 160px;
|
|
160
|
+
height: 100px;
|
|
161
|
+
background: rgba(255, 255, 255, 0.08);
|
|
162
|
+
top: 30px;
|
|
163
|
+
left: 30px;
|
|
164
|
+
transform: rotate(-5deg);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.glass-el2 {
|
|
168
|
+
width: 120px;
|
|
169
|
+
height: 80px;
|
|
170
|
+
background: rgba(255, 255, 255, 0.12);
|
|
171
|
+
bottom: 30px;
|
|
172
|
+
right: 30px;
|
|
173
|
+
transform: rotate(8deg);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.glass-el3 {
|
|
177
|
+
width: 80px;
|
|
178
|
+
height: 80px;
|
|
179
|
+
background: rgba(255, 255, 255, 0.06);
|
|
180
|
+
top: 50%;
|
|
181
|
+
left: 50%;
|
|
182
|
+
transform: translate(-50%, -50%);
|
|
183
|
+
border-radius: 50%;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* 02 NEO-BRUTALISM */
|
|
187
|
+
.preview-brutal {
|
|
188
|
+
background: #f5f500;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.brutal-box {
|
|
192
|
+
position: absolute;
|
|
193
|
+
font-family: 'Space Mono', monospace;
|
|
194
|
+
font-weight: 700;
|
|
195
|
+
font-size: 13px;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.brutal-box1 {
|
|
199
|
+
background: #fff;
|
|
200
|
+
border: 3px solid #000;
|
|
201
|
+
box-shadow: 5px 5px 0 #000;
|
|
202
|
+
padding: 12px 20px;
|
|
203
|
+
top: 40px;
|
|
204
|
+
left: 40px;
|
|
205
|
+
color: #000;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.brutal-box2 {
|
|
209
|
+
background: #ff3b30;
|
|
210
|
+
border: 3px solid #000;
|
|
211
|
+
box-shadow: 5px 5px 0 #000;
|
|
212
|
+
padding: 8px 16px;
|
|
213
|
+
bottom: 40px;
|
|
214
|
+
right: 40px;
|
|
215
|
+
color: #fff;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.brutal-line {
|
|
219
|
+
position: absolute;
|
|
220
|
+
background: #000;
|
|
221
|
+
width: 3px;
|
|
222
|
+
height: 80px;
|
|
223
|
+
top: 50%;
|
|
224
|
+
left: 50%;
|
|
225
|
+
transform: translate(-50%, -50%);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* 03 BENTO GRID */
|
|
229
|
+
.preview-bento {
|
|
230
|
+
background: #f8f8f2;
|
|
231
|
+
padding: 16px;
|
|
232
|
+
display: block;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.bento-grid {
|
|
236
|
+
display: grid;
|
|
237
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
238
|
+
grid-template-rows: 1fr 1fr;
|
|
239
|
+
gap: 8px;
|
|
240
|
+
width: 100%;
|
|
241
|
+
height: 100%;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.bento-cell {
|
|
245
|
+
border-radius: 10px;
|
|
246
|
+
display: flex;
|
|
247
|
+
align-items: center;
|
|
248
|
+
justify-content: center;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.bc1 {
|
|
252
|
+
background: #1a1a2e;
|
|
253
|
+
grid-column: 1/3;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.bc2 {
|
|
257
|
+
background: #e8ff3b;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.bc3 {
|
|
261
|
+
background: #ff6b6b;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.bc4 {
|
|
265
|
+
background: #4ecdc4;
|
|
266
|
+
grid-column: 2/4;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.bc5 {
|
|
270
|
+
background: #ffe66d;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* 04 DARK ACADEMIA */
|
|
274
|
+
.preview-academia {
|
|
275
|
+
background: #1a1208;
|
|
276
|
+
overflow: hidden;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.academia-overlay {
|
|
280
|
+
position: absolute;
|
|
281
|
+
inset: 0;
|
|
282
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%231a1208'/%3E%3Crect width='1' height='1' fill='%23332a10' opacity='0.5'/%3E%3C/svg%3E");
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.academia-border {
|
|
286
|
+
position: absolute;
|
|
287
|
+
inset: 16px;
|
|
288
|
+
border: 1px solid #3d2e10;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.academia-text {
|
|
292
|
+
position: absolute;
|
|
293
|
+
text-align: center;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.at1 {
|
|
297
|
+
font-family: Georgia, serif;
|
|
298
|
+
font-style: italic;
|
|
299
|
+
font-size: 42px;
|
|
300
|
+
font-weight: 700;
|
|
301
|
+
color: #c9a84c;
|
|
302
|
+
top: 30px;
|
|
303
|
+
left: 50%;
|
|
304
|
+
transform: translateX(-50%);
|
|
305
|
+
white-space: nowrap;
|
|
306
|
+
letter-spacing: 6px;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.at2 {
|
|
310
|
+
font-family: 'Space Mono', monospace;
|
|
311
|
+
font-size: 11px;
|
|
312
|
+
color: #8a7340;
|
|
313
|
+
bottom: 30px;
|
|
314
|
+
left: 50%;
|
|
315
|
+
transform: translateX(-50%);
|
|
316
|
+
letter-spacing: 5px;
|
|
317
|
+
white-space: nowrap;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* 05 GRADIENT MESH */
|
|
321
|
+
.preview-mesh {
|
|
322
|
+
background: #fff;
|
|
323
|
+
overflow: hidden;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.mesh-bg {
|
|
327
|
+
position: absolute;
|
|
328
|
+
inset: 0;
|
|
329
|
+
background: radial-gradient(ellipse at 20% 50%, #ff6ec7 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, #7b61ff 0%, transparent 45%), radial-gradient(ellipse at 60% 80%, #00d4ff 0%, transparent 40%), radial-gradient(ellipse at 40% 30%, #ffb347 0%, transparent 45%);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.mesh-text {
|
|
333
|
+
position: relative;
|
|
334
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
335
|
+
font-size: 32px;
|
|
336
|
+
color: white;
|
|
337
|
+
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
|
338
|
+
letter-spacing: 2px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* 06 CLAYMORPHISM */
|
|
342
|
+
.preview-clay {
|
|
343
|
+
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.clay-el {
|
|
347
|
+
position: absolute;
|
|
348
|
+
border-radius: 24px;
|
|
349
|
+
display: flex;
|
|
350
|
+
align-items: center;
|
|
351
|
+
justify-content: center;
|
|
352
|
+
font-size: 28px;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.clay1 {
|
|
356
|
+
width: 90px;
|
|
357
|
+
height: 90px;
|
|
358
|
+
background: #a8edea;
|
|
359
|
+
box-shadow: 0 12px 30px rgba(168, 237, 234, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
|
|
360
|
+
top: 30px;
|
|
361
|
+
left: 50px;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.clay2 {
|
|
365
|
+
width: 70px;
|
|
366
|
+
height: 70px;
|
|
367
|
+
background: #fed6e3;
|
|
368
|
+
box-shadow: 0 10px 25px rgba(254, 214, 227, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.08);
|
|
369
|
+
top: 50px;
|
|
370
|
+
right: 60px;
|
|
371
|
+
border-radius: 50%;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.clay3 {
|
|
375
|
+
width: 60px;
|
|
376
|
+
height: 60px;
|
|
377
|
+
background: #ffeaa7;
|
|
378
|
+
box-shadow: 0 8px 20px rgba(255, 234, 167, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.08);
|
|
379
|
+
bottom: 30px;
|
|
380
|
+
left: 50%;
|
|
381
|
+
transform: translateX(-50%);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* 07 SWISS/INTERNATIONAL */
|
|
385
|
+
.preview-swiss {
|
|
386
|
+
background: #ffffff;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.swiss-red {
|
|
390
|
+
position: absolute;
|
|
391
|
+
top: 0;
|
|
392
|
+
left: 0;
|
|
393
|
+
width: 6px;
|
|
394
|
+
height: 100%;
|
|
395
|
+
background: #e8000d;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.swiss-title {
|
|
399
|
+
position: absolute;
|
|
400
|
+
font-family: 'Space Mono', monospace;
|
|
401
|
+
font-weight: 700;
|
|
402
|
+
font-size: 36px;
|
|
403
|
+
color: #111;
|
|
404
|
+
top: 24px;
|
|
405
|
+
left: 30px;
|
|
406
|
+
line-height: 1;
|
|
407
|
+
letter-spacing: -1px;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.swiss-sub {
|
|
411
|
+
position: absolute;
|
|
412
|
+
font-family: 'Space Mono', monospace;
|
|
413
|
+
font-size: 9px;
|
|
414
|
+
color: #888;
|
|
415
|
+
bottom: 24px;
|
|
416
|
+
left: 30px;
|
|
417
|
+
letter-spacing: 3px;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.swiss-circle {
|
|
421
|
+
position: absolute;
|
|
422
|
+
width: 80px;
|
|
423
|
+
height: 80px;
|
|
424
|
+
border: 3px solid #e8000d;
|
|
425
|
+
border-radius: 50%;
|
|
426
|
+
bottom: 20px;
|
|
427
|
+
right: 30px;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.swiss-line {
|
|
431
|
+
position: absolute;
|
|
432
|
+
background: #ddd;
|
|
433
|
+
left: 30px;
|
|
434
|
+
right: 30px;
|
|
435
|
+
height: 1px;
|
|
436
|
+
top: 50%;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* 08 AURORA/NEON GLOW */
|
|
440
|
+
.preview-aurora {
|
|
441
|
+
background: #050510;
|
|
442
|
+
overflow: hidden;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.aurora-glow {
|
|
446
|
+
position: absolute;
|
|
447
|
+
border-radius: 50%;
|
|
448
|
+
filter: blur(40px);
|
|
449
|
+
opacity: 0.7;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.ag1 {
|
|
453
|
+
width: 200px;
|
|
454
|
+
height: 150px;
|
|
455
|
+
background: #00ff88;
|
|
456
|
+
top: -40px;
|
|
457
|
+
left: -40px;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.ag2 {
|
|
461
|
+
width: 180px;
|
|
462
|
+
height: 140px;
|
|
463
|
+
background: #7b00ff;
|
|
464
|
+
top: 20px;
|
|
465
|
+
right: -30px;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.ag3 {
|
|
469
|
+
width: 160px;
|
|
470
|
+
height: 100px;
|
|
471
|
+
background: #00b4ff;
|
|
472
|
+
bottom: -20px;
|
|
473
|
+
left: 30%;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.aurora-text {
|
|
477
|
+
position: relative;
|
|
478
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
479
|
+
font-size: 40px;
|
|
480
|
+
letter-spacing: 4px;
|
|
481
|
+
background: linear-gradient(90deg, #00ff88, #00b4ff, #7b00ff);
|
|
482
|
+
-webkit-background-clip: text;
|
|
483
|
+
-webkit-text-fill-color: transparent;
|
|
484
|
+
background-clip: text;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
/* 09 RETRO Y2K */
|
|
488
|
+
.preview-y2k {
|
|
489
|
+
background: #000080;
|
|
490
|
+
overflow: hidden;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.y2k-stripe {
|
|
494
|
+
position: absolute;
|
|
495
|
+
height: 6px;
|
|
496
|
+
left: 0;
|
|
497
|
+
right: 0;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.ys1 {
|
|
501
|
+
top: 30px;
|
|
502
|
+
background: linear-gradient(90deg, #ff0080, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.ys2 {
|
|
506
|
+
bottom: 30px;
|
|
507
|
+
background: linear-gradient(90deg, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0080);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.y2k-text {
|
|
511
|
+
position: relative;
|
|
512
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
513
|
+
font-size: 36px;
|
|
514
|
+
color: #fff;
|
|
515
|
+
text-shadow: 0 0 20px #00ffff, 2px 2px 0 #ff00ff;
|
|
516
|
+
letter-spacing: 4px;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.y2k-star {
|
|
520
|
+
position: absolute;
|
|
521
|
+
color: #ffff00;
|
|
522
|
+
font-size: 24px;
|
|
523
|
+
animation: spin 4s linear infinite;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.yk1 {
|
|
527
|
+
top: 50px;
|
|
528
|
+
left: 20px;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.yk2 {
|
|
532
|
+
bottom: 50px;
|
|
533
|
+
right: 20px;
|
|
534
|
+
animation-direction: reverse;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
@keyframes spin {
|
|
538
|
+
to {
|
|
539
|
+
transform: rotate(360deg);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
/* 10 NORDIC MINIMALISM */
|
|
544
|
+
.preview-nordic {
|
|
545
|
+
background: #f4f1ec;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.nordic-blob {
|
|
549
|
+
position: absolute;
|
|
550
|
+
width: 140px;
|
|
551
|
+
height: 140px;
|
|
552
|
+
background: #d9cfc4;
|
|
553
|
+
border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
|
|
554
|
+
top: 50%;
|
|
555
|
+
left: 50%;
|
|
556
|
+
transform: translate(-50%, -50%);
|
|
557
|
+
opacity: 0.7;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.nordic-dot {
|
|
561
|
+
position: absolute;
|
|
562
|
+
width: 12px;
|
|
563
|
+
height: 12px;
|
|
564
|
+
border-radius: 50%;
|
|
565
|
+
background: #3d3530;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.nd1 {
|
|
569
|
+
top: 30px;
|
|
570
|
+
left: 40px;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.nd2 {
|
|
574
|
+
top: 30px;
|
|
575
|
+
left: 60px;
|
|
576
|
+
background: #8a7a6a;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.nd3 {
|
|
580
|
+
top: 30px;
|
|
581
|
+
left: 80px;
|
|
582
|
+
background: #c4b5a5;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.nordic-word {
|
|
586
|
+
position: absolute;
|
|
587
|
+
bottom: 28px;
|
|
588
|
+
left: 0;
|
|
589
|
+
right: 0;
|
|
590
|
+
text-align: center;
|
|
591
|
+
font-family: 'Space Mono', monospace;
|
|
592
|
+
font-size: 10px;
|
|
593
|
+
letter-spacing: 5px;
|
|
594
|
+
color: #8a7a6a;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.nordic-line {
|
|
598
|
+
position: absolute;
|
|
599
|
+
bottom: 50px;
|
|
600
|
+
left: 40px;
|
|
601
|
+
right: 40px;
|
|
602
|
+
height: 1px;
|
|
603
|
+
background: #d0c8be;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
/* 11 TYPOGRAPHIC BOLD */
|
|
607
|
+
.preview-typo {
|
|
608
|
+
background: #f0ede8;
|
|
609
|
+
overflow: hidden;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
.typo-big {
|
|
613
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
614
|
+
font-size: 88px;
|
|
615
|
+
line-height: 0.85;
|
|
616
|
+
color: #1a1a1a;
|
|
617
|
+
letter-spacing: -2px;
|
|
618
|
+
position: relative;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.typo-big span {
|
|
622
|
+
color: #e63030;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.typo-small {
|
|
626
|
+
position: absolute;
|
|
627
|
+
bottom: 20px;
|
|
628
|
+
right: 20px;
|
|
629
|
+
font-family: 'Space Mono', monospace;
|
|
630
|
+
font-size: 9px;
|
|
631
|
+
letter-spacing: 3px;
|
|
632
|
+
color: #aaa;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
/* 12 DUOTONE / COLOR SPLIT */
|
|
636
|
+
.preview-duotone {
|
|
637
|
+
background: #111;
|
|
638
|
+
overflow: hidden;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.duo-left {
|
|
642
|
+
position: absolute;
|
|
643
|
+
left: 0;
|
|
644
|
+
top: 0;
|
|
645
|
+
bottom: 0;
|
|
646
|
+
width: 50%;
|
|
647
|
+
background: #ff4500;
|
|
648
|
+
display: flex;
|
|
649
|
+
align-items: center;
|
|
650
|
+
justify-content: center;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.duo-right {
|
|
654
|
+
position: absolute;
|
|
655
|
+
right: 0;
|
|
656
|
+
top: 0;
|
|
657
|
+
bottom: 0;
|
|
658
|
+
width: 50%;
|
|
659
|
+
background: #1a1a2e;
|
|
660
|
+
display: flex;
|
|
661
|
+
align-items: center;
|
|
662
|
+
justify-content: center;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
.duo-text {
|
|
666
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
667
|
+
font-size: 40px;
|
|
668
|
+
letter-spacing: 2px;
|
|
669
|
+
writing-mode: vertical-lr;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.duo-left .duo-text {
|
|
673
|
+
color: #fff;
|
|
674
|
+
transform: rotate(180deg);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.duo-right .duo-text {
|
|
678
|
+
color: #ff4500;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.duo-divider {
|
|
682
|
+
position: absolute;
|
|
683
|
+
left: 50%;
|
|
684
|
+
top: 0;
|
|
685
|
+
bottom: 0;
|
|
686
|
+
width: 3px;
|
|
687
|
+
background: #fff;
|
|
688
|
+
z-index: 2;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
/* 13 MONOCHROME MINIMAL */
|
|
692
|
+
.preview-mono {
|
|
693
|
+
background: #fafafa;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.mono-circle-out {
|
|
697
|
+
position: absolute;
|
|
698
|
+
width: 160px;
|
|
699
|
+
height: 160px;
|
|
700
|
+
border: 1px solid #e0e0e0;
|
|
701
|
+
border-radius: 50%;
|
|
702
|
+
top: 50%;
|
|
703
|
+
left: 50%;
|
|
704
|
+
transform: translate(-50%, -50%);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.mono-center {
|
|
708
|
+
position: relative;
|
|
709
|
+
display: flex;
|
|
710
|
+
flex-direction: column;
|
|
711
|
+
align-items: center;
|
|
712
|
+
gap: 16px;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.mono-rect {
|
|
716
|
+
background: #1a1a1a;
|
|
717
|
+
width: 120px;
|
|
718
|
+
height: 4px;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.mono-rect2 {
|
|
722
|
+
width: 80px;
|
|
723
|
+
height: 4px;
|
|
724
|
+
background: #1a1a1a;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.mono-rect3 {
|
|
728
|
+
width: 40px;
|
|
729
|
+
height: 4px;
|
|
730
|
+
background: #ddd;
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.mono-label {
|
|
734
|
+
font-family: 'Space Mono', monospace;
|
|
735
|
+
font-size: 9px;
|
|
736
|
+
letter-spacing: 6px;
|
|
737
|
+
color: #888;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
/* 14 CYBERPUNK OUTLINE */
|
|
741
|
+
.preview-cyber {
|
|
742
|
+
background: #0d0d0d;
|
|
743
|
+
overflow: hidden;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.cyber-grid {
|
|
747
|
+
position: absolute;
|
|
748
|
+
inset: 0;
|
|
749
|
+
background-image: linear-gradient(rgba(0, 255, 200, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 200, 0.06) 1px, transparent 1px);
|
|
750
|
+
background-size: 30px 30px;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.cyber-title {
|
|
754
|
+
position: relative;
|
|
755
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
756
|
+
font-size: 44px;
|
|
757
|
+
letter-spacing: 6px;
|
|
758
|
+
color: transparent;
|
|
759
|
+
-webkit-text-stroke: 1.5px #00ffc8;
|
|
760
|
+
text-shadow: 0 0 20px rgba(0, 255, 200, 0.5);
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.cyber-sub {
|
|
764
|
+
position: absolute;
|
|
765
|
+
bottom: 20px;
|
|
766
|
+
left: 0;
|
|
767
|
+
right: 0;
|
|
768
|
+
text-align: center;
|
|
769
|
+
font-family: 'Space Mono', monospace;
|
|
770
|
+
font-size: 9px;
|
|
771
|
+
letter-spacing: 4px;
|
|
772
|
+
color: #00ffc8;
|
|
773
|
+
opacity: 0.5;
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
.cyber-corner {
|
|
777
|
+
position: absolute;
|
|
778
|
+
width: 20px;
|
|
779
|
+
height: 20px;
|
|
780
|
+
border-color: #00ffc8;
|
|
781
|
+
border-style: solid;
|
|
782
|
+
opacity: 0.6;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.cc-tl {
|
|
786
|
+
top: 12px;
|
|
787
|
+
left: 12px;
|
|
788
|
+
border-width: 2px 0 0 2px;
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
.cc-tr {
|
|
792
|
+
top: 12px;
|
|
793
|
+
right: 12px;
|
|
794
|
+
border-width: 2px 2px 0 0;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.cc-bl {
|
|
798
|
+
bottom: 12px;
|
|
799
|
+
left: 12px;
|
|
800
|
+
border-width: 0 0 2px 2px;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
.cc-br {
|
|
804
|
+
bottom: 12px;
|
|
805
|
+
right: 12px;
|
|
806
|
+
border-width: 0 2px 2px 0;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
/* 15 EDITORIAL MAGAZINE */
|
|
810
|
+
.preview-editorial {
|
|
811
|
+
background: #fff;
|
|
812
|
+
overflow: hidden;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.edit-bg-block {
|
|
816
|
+
position: absolute;
|
|
817
|
+
top: 0;
|
|
818
|
+
right: 0;
|
|
819
|
+
width: 45%;
|
|
820
|
+
height: 100%;
|
|
821
|
+
background: #1a1a1a;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
.edit-title {
|
|
825
|
+
position: absolute;
|
|
826
|
+
top: 24px;
|
|
827
|
+
left: 24px;
|
|
828
|
+
font-family: 'Playfair Display', serif;
|
|
829
|
+
font-style: italic;
|
|
830
|
+
font-size: 38px;
|
|
831
|
+
line-height: 1;
|
|
832
|
+
color: #1a1a1a;
|
|
833
|
+
letter-spacing: -1px;
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
.edit-rule {
|
|
837
|
+
position: absolute;
|
|
838
|
+
top: 100px;
|
|
839
|
+
left: 24px;
|
|
840
|
+
width: 60px;
|
|
841
|
+
height: 2px;
|
|
842
|
+
background: #e63030;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.edit-body {
|
|
846
|
+
position: absolute;
|
|
847
|
+
bottom: 30px;
|
|
848
|
+
left: 24px;
|
|
849
|
+
font-family: 'Space Mono', monospace;
|
|
850
|
+
font-size: 8px;
|
|
851
|
+
letter-spacing: 2px;
|
|
852
|
+
color: #bbb;
|
|
853
|
+
line-height: 1.8;
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.edit-vol {
|
|
857
|
+
position: absolute;
|
|
858
|
+
top: 50%;
|
|
859
|
+
right: 18px;
|
|
860
|
+
transform: translateY(-50%) rotate(90deg);
|
|
861
|
+
font-family: 'Space Mono', monospace;
|
|
862
|
+
font-size: 9px;
|
|
863
|
+
letter-spacing: 4px;
|
|
864
|
+
color: #555;
|
|
865
|
+
white-space: nowrap;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
/* 16 PASTEL SOFT UI */
|
|
869
|
+
.preview-pastel {
|
|
870
|
+
background: linear-gradient(145deg, #fce4f3 0%, #e8f4ff 50%, #f0fce4 100%);
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.pastel-card {
|
|
874
|
+
position: absolute;
|
|
875
|
+
border-radius: 20px;
|
|
876
|
+
background: rgba(255, 255, 255, 0.7);
|
|
877
|
+
backdrop-filter: blur(8px);
|
|
878
|
+
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
.pc1 {
|
|
882
|
+
width: 130px;
|
|
883
|
+
height: 80px;
|
|
884
|
+
top: 25px;
|
|
885
|
+
left: 30px;
|
|
886
|
+
box-shadow: 0 8px 24px rgba(200, 160, 220, 0.2);
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
.pc2 {
|
|
890
|
+
width: 100px;
|
|
891
|
+
height: 65px;
|
|
892
|
+
bottom: 25px;
|
|
893
|
+
right: 30px;
|
|
894
|
+
box-shadow: 0 8px 24px rgba(160, 200, 240, 0.2);
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
.pc3 {
|
|
898
|
+
width: 70px;
|
|
899
|
+
height: 70px;
|
|
900
|
+
border-radius: 50%;
|
|
901
|
+
top: 50%;
|
|
902
|
+
left: 50%;
|
|
903
|
+
transform: translate(-50%, -50%);
|
|
904
|
+
box-shadow: 0 8px 24px rgba(160, 220, 160, 0.2);
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.pastel-dot {
|
|
908
|
+
position: absolute;
|
|
909
|
+
border-radius: 50%;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
.pd1 {
|
|
913
|
+
width: 40px;
|
|
914
|
+
height: 40px;
|
|
915
|
+
background: #f9c6e8;
|
|
916
|
+
top: 10px;
|
|
917
|
+
right: 20px;
|
|
918
|
+
opacity: 0.6;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.pd2 {
|
|
922
|
+
width: 30px;
|
|
923
|
+
height: 30px;
|
|
924
|
+
background: #c6e8f9;
|
|
925
|
+
bottom: 10px;
|
|
926
|
+
left: 20px;
|
|
927
|
+
opacity: 0.6;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
/* 17 DARK NEON MIAMI */
|
|
931
|
+
.preview-miami {
|
|
932
|
+
background: #0a0014;
|
|
933
|
+
overflow: hidden;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
.miami-horizon {
|
|
937
|
+
position: absolute;
|
|
938
|
+
bottom: 0;
|
|
939
|
+
left: 0;
|
|
940
|
+
right: 0;
|
|
941
|
+
height: 50%;
|
|
942
|
+
background: linear-gradient(0deg, #0a0014 0%, transparent 100%);
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
.miami-sun {
|
|
946
|
+
position: absolute;
|
|
947
|
+
width: 120px;
|
|
948
|
+
height: 60px;
|
|
949
|
+
bottom: 60px;
|
|
950
|
+
left: 50%;
|
|
951
|
+
transform: translateX(-50%);
|
|
952
|
+
border-radius: 60px 60px 0 0;
|
|
953
|
+
background: linear-gradient(180deg, #ff6b35, #ff0080);
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.miami-lines {
|
|
957
|
+
position: absolute;
|
|
958
|
+
bottom: 0;
|
|
959
|
+
left: 0;
|
|
960
|
+
right: 0;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.miami-line {
|
|
964
|
+
position: absolute;
|
|
965
|
+
left: 0;
|
|
966
|
+
right: 0;
|
|
967
|
+
height: 1px;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.ml1 {
|
|
971
|
+
bottom: 55px;
|
|
972
|
+
background: rgba(255, 0, 128, 0.4);
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
.ml2 {
|
|
976
|
+
bottom: 45px;
|
|
977
|
+
background: rgba(255, 0, 128, 0.3);
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
.ml3 {
|
|
981
|
+
bottom: 36px;
|
|
982
|
+
background: rgba(255, 0, 128, 0.2);
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
.ml4 {
|
|
986
|
+
bottom: 28px;
|
|
987
|
+
background: rgba(255, 0, 128, 0.15);
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
.miami-title {
|
|
991
|
+
position: absolute;
|
|
992
|
+
top: 20px;
|
|
993
|
+
left: 0;
|
|
994
|
+
right: 0;
|
|
995
|
+
text-align: center;
|
|
996
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
997
|
+
font-size: 36px;
|
|
998
|
+
letter-spacing: 8px;
|
|
999
|
+
background: linear-gradient(90deg, #ff6b35, #ff0080, #9b00ff);
|
|
1000
|
+
-webkit-background-clip: text;
|
|
1001
|
+
-webkit-text-fill-color: transparent;
|
|
1002
|
+
background-clip: text;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
.miami-palm {
|
|
1006
|
+
position: absolute;
|
|
1007
|
+
bottom: 55px;
|
|
1008
|
+
font-size: 28px;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
.mp1 {
|
|
1012
|
+
left: 20px;
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
.mp2 {
|
|
1016
|
+
right: 20px;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
/* 18 HAND-CRAFTED / ORGANIC */
|
|
1020
|
+
.preview-organic {
|
|
1021
|
+
background: #fdf6ee;
|
|
1022
|
+
overflow: hidden;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.organic-circle {
|
|
1026
|
+
position: absolute;
|
|
1027
|
+
border-radius: 50%;
|
|
1028
|
+
border: 2px solid;
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
.oc1 {
|
|
1032
|
+
width: 160px;
|
|
1033
|
+
height: 160px;
|
|
1034
|
+
border-color: #c8a882;
|
|
1035
|
+
top: 50%;
|
|
1036
|
+
left: 50%;
|
|
1037
|
+
transform: translate(-50%, -50%) rotate(8deg);
|
|
1038
|
+
border-style: dashed;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
.oc2 {
|
|
1042
|
+
width: 100px;
|
|
1043
|
+
height: 100px;
|
|
1044
|
+
border-color: #a87850;
|
|
1045
|
+
top: 50%;
|
|
1046
|
+
left: 50%;
|
|
1047
|
+
transform: translate(-50%, -50%);
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
.organic-text {
|
|
1051
|
+
position: relative;
|
|
1052
|
+
font-family: Georgia, serif;
|
|
1053
|
+
font-style: italic;
|
|
1054
|
+
font-size: 22px;
|
|
1055
|
+
color: #6b4c2a;
|
|
1056
|
+
letter-spacing: 2px;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.organic-leaf {
|
|
1060
|
+
position: absolute;
|
|
1061
|
+
font-size: 20px;
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
.ol1 {
|
|
1065
|
+
top: 15px;
|
|
1066
|
+
left: 20px;
|
|
1067
|
+
transform: rotate(-20deg);
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
.ol2 {
|
|
1071
|
+
bottom: 15px;
|
|
1072
|
+
right: 20px;
|
|
1073
|
+
transform: rotate(30deg);
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
.organic-line {
|
|
1077
|
+
position: absolute;
|
|
1078
|
+
top: 50%;
|
|
1079
|
+
left: 20px;
|
|
1080
|
+
right: 20px;
|
|
1081
|
+
height: 1px;
|
|
1082
|
+
background: repeating-linear-gradient(90deg, #c8a882 0, #c8a882 4px, transparent 4px, transparent 10px);
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
/* 19 ISOMETRIC / 3D FLAT */
|
|
1086
|
+
.preview-iso {
|
|
1087
|
+
background: #1e1e2e;
|
|
1088
|
+
overflow: hidden;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
.iso-wrap {
|
|
1092
|
+
position: relative;
|
|
1093
|
+
width: 160px;
|
|
1094
|
+
height: 160px;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
.iso-face {
|
|
1098
|
+
position: absolute;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
.iso-top {
|
|
1102
|
+
width: 80px;
|
|
1103
|
+
height: 46px;
|
|
1104
|
+
background: #7c6fff;
|
|
1105
|
+
top: 0;
|
|
1106
|
+
left: 40px;
|
|
1107
|
+
transform: skewX(-30deg);
|
|
1108
|
+
transform-origin: bottom left;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.iso-left {
|
|
1112
|
+
width: 40px;
|
|
1113
|
+
height: 80px;
|
|
1114
|
+
background: #4a3fcc;
|
|
1115
|
+
bottom: 0;
|
|
1116
|
+
left: 0;
|
|
1117
|
+
transform: skewY(30deg);
|
|
1118
|
+
transform-origin: top right;
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
.iso-right {
|
|
1122
|
+
width: 40px;
|
|
1123
|
+
height: 80px;
|
|
1124
|
+
background: #6254e8;
|
|
1125
|
+
bottom: 0;
|
|
1126
|
+
right: 0;
|
|
1127
|
+
transform: skewY(-30deg);
|
|
1128
|
+
transform-origin: top left;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
.iso-top2 {
|
|
1132
|
+
width: 60px;
|
|
1133
|
+
height: 34px;
|
|
1134
|
+
background: #a594ff;
|
|
1135
|
+
top: 20px;
|
|
1136
|
+
left: 60px;
|
|
1137
|
+
transform: skewX(-30deg);
|
|
1138
|
+
transform-origin: bottom left;
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
.iso-left2 {
|
|
1142
|
+
width: 30px;
|
|
1143
|
+
height: 60px;
|
|
1144
|
+
background: #6254e8;
|
|
1145
|
+
bottom: 20px;
|
|
1146
|
+
left: 20px;
|
|
1147
|
+
transform: skewY(30deg);
|
|
1148
|
+
transform-origin: top right;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.iso-right2 {
|
|
1152
|
+
width: 30px;
|
|
1153
|
+
height: 60px;
|
|
1154
|
+
background: #8070ff;
|
|
1155
|
+
bottom: 20px;
|
|
1156
|
+
right: 20px;
|
|
1157
|
+
transform: skewY(-30deg);
|
|
1158
|
+
transform-origin: top left;
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1161
|
+
/* 20 VAPORWAVE */
|
|
1162
|
+
.preview-vapor {
|
|
1163
|
+
background: linear-gradient(180deg, #1a0533 0%, #2d0057 40%, #570038 100%);
|
|
1164
|
+
overflow: hidden;
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
.vapor-grid {
|
|
1168
|
+
position: absolute;
|
|
1169
|
+
bottom: 0;
|
|
1170
|
+
left: 0;
|
|
1171
|
+
right: 0;
|
|
1172
|
+
height: 60%;
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
.vg-h {
|
|
1176
|
+
position: absolute;
|
|
1177
|
+
left: 0;
|
|
1178
|
+
right: 0;
|
|
1179
|
+
height: 1px;
|
|
1180
|
+
background: rgba(255, 100, 200, 0.4);
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.vg1 {
|
|
1184
|
+
bottom: 48px;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.vg2 {
|
|
1188
|
+
bottom: 36px;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
.vg3 {
|
|
1192
|
+
bottom: 26px;
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
.vg4 {
|
|
1196
|
+
bottom: 18px;
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
.vg5 {
|
|
1200
|
+
bottom: 12px;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
.vg6 {
|
|
1204
|
+
bottom: 7px;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
.vg7 {
|
|
1208
|
+
bottom: 3px;
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
.vg-v {
|
|
1212
|
+
position: absolute;
|
|
1213
|
+
bottom: 0;
|
|
1214
|
+
width: 1px;
|
|
1215
|
+
height: 60%;
|
|
1216
|
+
background: rgba(255, 100, 200, 0.4);
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
.vv1 {
|
|
1220
|
+
left: 10%;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
.vv2 {
|
|
1224
|
+
left: 22%;
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
.vv3 {
|
|
1228
|
+
left: 36%;
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.vv4 {
|
|
1232
|
+
left: 50%;
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
.vv5 {
|
|
1236
|
+
left: 64%;
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
.vv6 {
|
|
1240
|
+
left: 78%;
|
|
1241
|
+
}
|
|
1242
|
+
|
|
1243
|
+
.vv7 {
|
|
1244
|
+
left: 90%;
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
.vapor-sun {
|
|
1248
|
+
position: absolute;
|
|
1249
|
+
width: 100px;
|
|
1250
|
+
height: 50px;
|
|
1251
|
+
top: 20px;
|
|
1252
|
+
left: 50%;
|
|
1253
|
+
transform: translateX(-50%);
|
|
1254
|
+
border-radius: 50px 50px 0 0;
|
|
1255
|
+
background: linear-gradient(180deg, #ff9f43, #ff6b9d, #c44dff);
|
|
1256
|
+
}
|
|
1257
|
+
|
|
1258
|
+
.vapor-line1 {
|
|
1259
|
+
position: absolute;
|
|
1260
|
+
width: 100%;
|
|
1261
|
+
height: 8px;
|
|
1262
|
+
background: #1a0533;
|
|
1263
|
+
top: 50px;
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
.vapor-line2 {
|
|
1267
|
+
position: absolute;
|
|
1268
|
+
width: 100%;
|
|
1269
|
+
height: 5px;
|
|
1270
|
+
background: #1a0533;
|
|
1271
|
+
top: 62px;
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
.vapor-title {
|
|
1275
|
+
position: absolute;
|
|
1276
|
+
top: 25px;
|
|
1277
|
+
left: 0;
|
|
1278
|
+
right: 0;
|
|
1279
|
+
text-align: center;
|
|
1280
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1281
|
+
font-size: 38px;
|
|
1282
|
+
letter-spacing: 6px;
|
|
1283
|
+
color: rgba(255, 255, 255, 0.08);
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
.vapor-text {
|
|
1287
|
+
position: absolute;
|
|
1288
|
+
bottom: 20px;
|
|
1289
|
+
left: 0;
|
|
1290
|
+
right: 0;
|
|
1291
|
+
text-align: center;
|
|
1292
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1293
|
+
font-size: 26px;
|
|
1294
|
+
letter-spacing: 8px;
|
|
1295
|
+
background: linear-gradient(90deg, #ff9f43, #ff6b9d, #c44dff);
|
|
1296
|
+
-webkit-background-clip: text;
|
|
1297
|
+
-webkit-text-fill-color: transparent;
|
|
1298
|
+
background-clip: text;
|
|
1299
|
+
}
|
|
1300
|
+
|
|
1301
|
+
/* ══════════════════════════════════════════
|
|
1302
|
+
신규 21–30 스타일
|
|
1303
|
+
══════════════════════════════════════════ */
|
|
1304
|
+
|
|
1305
|
+
/* 21 ART DECO LUXE */
|
|
1306
|
+
.preview-artdeco {
|
|
1307
|
+
background: #0e0a05;
|
|
1308
|
+
overflow: hidden;
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
.deco-border {
|
|
1312
|
+
position: absolute;
|
|
1313
|
+
inset: 12px;
|
|
1314
|
+
border: 1px solid #b8960c;
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
.deco-inner {
|
|
1318
|
+
position: absolute;
|
|
1319
|
+
inset: 18px;
|
|
1320
|
+
border: 1px solid rgba(184, 150, 12, 0.3);
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
.deco-fan-l {
|
|
1324
|
+
position: absolute;
|
|
1325
|
+
width: 60px;
|
|
1326
|
+
height: 60px;
|
|
1327
|
+
border: 2px solid #b8960c;
|
|
1328
|
+
border-radius: 0 60px 0 0;
|
|
1329
|
+
top: 50%;
|
|
1330
|
+
left: 16px;
|
|
1331
|
+
transform: translateY(-50%);
|
|
1332
|
+
}
|
|
1333
|
+
|
|
1334
|
+
.deco-fan-r {
|
|
1335
|
+
position: absolute;
|
|
1336
|
+
width: 60px;
|
|
1337
|
+
height: 60px;
|
|
1338
|
+
border: 2px solid #b8960c;
|
|
1339
|
+
border-radius: 60px 0 0 0;
|
|
1340
|
+
top: 50%;
|
|
1341
|
+
right: 16px;
|
|
1342
|
+
transform: translateY(-50%);
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
.deco-title {
|
|
1346
|
+
position: relative;
|
|
1347
|
+
font-family: Georgia, serif;
|
|
1348
|
+
font-size: 28px;
|
|
1349
|
+
letter-spacing: 8px;
|
|
1350
|
+
color: #d4aa2a;
|
|
1351
|
+
text-transform: uppercase;
|
|
1352
|
+
text-align: center;
|
|
1353
|
+
line-height: 1.1;
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
.deco-rule-h {
|
|
1357
|
+
position: absolute;
|
|
1358
|
+
left: 30px;
|
|
1359
|
+
right: 30px;
|
|
1360
|
+
height: 1px;
|
|
1361
|
+
background: linear-gradient(90deg, transparent, #b8960c, transparent);
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
.deco-rule-t {
|
|
1365
|
+
top: 50%;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.deco-diamond {
|
|
1369
|
+
position: absolute;
|
|
1370
|
+
width: 8px;
|
|
1371
|
+
height: 8px;
|
|
1372
|
+
background: #b8960c;
|
|
1373
|
+
transform: rotate(45deg);
|
|
1374
|
+
top: 50%;
|
|
1375
|
+
left: 50%;
|
|
1376
|
+
margin: -4px 0 0 -4px;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
.deco-sub {
|
|
1380
|
+
position: absolute;
|
|
1381
|
+
bottom: 28px;
|
|
1382
|
+
left: 0;
|
|
1383
|
+
right: 0;
|
|
1384
|
+
text-align: center;
|
|
1385
|
+
font-family: 'Space Mono', monospace;
|
|
1386
|
+
font-size: 9px;
|
|
1387
|
+
letter-spacing: 5px;
|
|
1388
|
+
color: #8a7020;
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
/* 22 BRUTALIST NEWSPAPER */
|
|
1392
|
+
.preview-news {
|
|
1393
|
+
background: #f2efe8;
|
|
1394
|
+
overflow: hidden;
|
|
1395
|
+
font-family: Georgia, serif;
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
.news-masthead {
|
|
1399
|
+
position: absolute;
|
|
1400
|
+
top: 0;
|
|
1401
|
+
left: 0;
|
|
1402
|
+
right: 0;
|
|
1403
|
+
background: #1a1208;
|
|
1404
|
+
padding: 8px 16px;
|
|
1405
|
+
display: flex;
|
|
1406
|
+
justify-content: space-between;
|
|
1407
|
+
align-items: center;
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
.news-title {
|
|
1411
|
+
font-size: 14px;
|
|
1412
|
+
font-weight: 700;
|
|
1413
|
+
color: #f2efe8;
|
|
1414
|
+
letter-spacing: 1px;
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
.news-date {
|
|
1418
|
+
font-family: 'Space Mono', monospace;
|
|
1419
|
+
font-size: 8px;
|
|
1420
|
+
color: #8a7a60;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
.news-rule1 {
|
|
1424
|
+
position: absolute;
|
|
1425
|
+
top: 36px;
|
|
1426
|
+
left: 0;
|
|
1427
|
+
right: 0;
|
|
1428
|
+
height: 3px;
|
|
1429
|
+
background: #1a1208;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.news-rule2 {
|
|
1433
|
+
position: absolute;
|
|
1434
|
+
top: 41px;
|
|
1435
|
+
left: 0;
|
|
1436
|
+
right: 0;
|
|
1437
|
+
height: 1px;
|
|
1438
|
+
background: #1a1208;
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
.news-col1 {
|
|
1442
|
+
position: absolute;
|
|
1443
|
+
top: 52px;
|
|
1444
|
+
left: 12px;
|
|
1445
|
+
width: 40%;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
.news-headline {
|
|
1449
|
+
font-family: Georgia, serif;
|
|
1450
|
+
font-size: 22px;
|
|
1451
|
+
font-weight: 700;
|
|
1452
|
+
line-height: 1.1;
|
|
1453
|
+
color: #1a1208;
|
|
1454
|
+
margin-bottom: 6px;
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
.news-body {
|
|
1458
|
+
font-family: Georgia, serif;
|
|
1459
|
+
font-size: 9px;
|
|
1460
|
+
line-height: 1.5;
|
|
1461
|
+
color: #3a3020;
|
|
1462
|
+
}
|
|
1463
|
+
|
|
1464
|
+
.news-divider {
|
|
1465
|
+
position: absolute;
|
|
1466
|
+
top: 52px;
|
|
1467
|
+
bottom: 12px;
|
|
1468
|
+
left: 53%;
|
|
1469
|
+
width: 1px;
|
|
1470
|
+
background: #1a1208;
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
.news-col2 {
|
|
1474
|
+
position: absolute;
|
|
1475
|
+
top: 52px;
|
|
1476
|
+
right: 12px;
|
|
1477
|
+
width: 40%;
|
|
1478
|
+
text-align: center;
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
.news-photo {
|
|
1482
|
+
width: 100%;
|
|
1483
|
+
height: 70px;
|
|
1484
|
+
background: #ccc5b0;
|
|
1485
|
+
margin-bottom: 6px;
|
|
1486
|
+
display: flex;
|
|
1487
|
+
align-items: center;
|
|
1488
|
+
justify-content: center;
|
|
1489
|
+
}
|
|
1490
|
+
|
|
1491
|
+
.news-caption {
|
|
1492
|
+
font-family: 'Space Mono', monospace;
|
|
1493
|
+
font-size: 7px;
|
|
1494
|
+
color: #6a6050;
|
|
1495
|
+
letter-spacing: 1px;
|
|
1496
|
+
}
|
|
1497
|
+
|
|
1498
|
+
/* 23 STAINED GLASS / MOSAIC */
|
|
1499
|
+
.preview-mosaic {
|
|
1500
|
+
background: #0a0a12;
|
|
1501
|
+
overflow: hidden;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
.mosaic-grid {
|
|
1505
|
+
position: absolute;
|
|
1506
|
+
inset: 0;
|
|
1507
|
+
display: grid;
|
|
1508
|
+
grid-template-columns: repeat(6, 1fr);
|
|
1509
|
+
grid-template-rows: repeat(4, 1fr);
|
|
1510
|
+
gap: 2px;
|
|
1511
|
+
padding: 2px;
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
.mosaic-cell {
|
|
1515
|
+
border-radius: 2px;
|
|
1516
|
+
opacity: 0.85;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
.mc1 {
|
|
1520
|
+
background: #1a3a6e;
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
.mc2 {
|
|
1524
|
+
background: #e63030;
|
|
1525
|
+
}
|
|
1526
|
+
|
|
1527
|
+
.mc3 {
|
|
1528
|
+
background: #f5d020;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
.mc4 {
|
|
1532
|
+
background: #2a6e1a;
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
.mc5 {
|
|
1536
|
+
background: #6e1a4e;
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
.mc6 {
|
|
1540
|
+
background: #f5d020;
|
|
1541
|
+
}
|
|
1542
|
+
|
|
1543
|
+
.mc7 {
|
|
1544
|
+
background: #2a4e8a;
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
.mc8 {
|
|
1548
|
+
background: #8a2a1a;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
.mc9 {
|
|
1552
|
+
background: #1a6e4e;
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
.mc10 {
|
|
1556
|
+
background: #e63030;
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
.mc11 {
|
|
1560
|
+
background: #6e4e1a;
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1563
|
+
.mc12 {
|
|
1564
|
+
background: #4e1a6e;
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.mc13 {
|
|
1568
|
+
background: #1a6e2a;
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
.mc14 {
|
|
1572
|
+
background: #d4820a;
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1575
|
+
.mc15 {
|
|
1576
|
+
background: #2a2a8a;
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
.mc16 {
|
|
1580
|
+
background: #8a1a3a;
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
.mc17 {
|
|
1584
|
+
background: #1a4e1a;
|
|
1585
|
+
}
|
|
1586
|
+
|
|
1587
|
+
.mc18 {
|
|
1588
|
+
background: #6e6e1a;
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
.mc19 {
|
|
1592
|
+
background: #1a1a6e;
|
|
1593
|
+
}
|
|
1594
|
+
|
|
1595
|
+
.mc20 {
|
|
1596
|
+
background: #8a3a1a;
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
.mc21 {
|
|
1600
|
+
background: #4e8a1a;
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1603
|
+
.mc22 {
|
|
1604
|
+
background: #8a1a6e;
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
.mc23 {
|
|
1608
|
+
background: #1a8a6e;
|
|
1609
|
+
}
|
|
1610
|
+
|
|
1611
|
+
.mc24 {
|
|
1612
|
+
background: #e63030;
|
|
1613
|
+
}
|
|
1614
|
+
|
|
1615
|
+
.mosaic-overlay {
|
|
1616
|
+
position: absolute;
|
|
1617
|
+
inset: 0;
|
|
1618
|
+
background: rgba(0, 0, 0, 0.3);
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
.mosaic-label {
|
|
1622
|
+
position: absolute;
|
|
1623
|
+
bottom: 16px;
|
|
1624
|
+
left: 0;
|
|
1625
|
+
right: 0;
|
|
1626
|
+
text-align: center;
|
|
1627
|
+
font-family: Georgia, serif;
|
|
1628
|
+
font-size: 18px;
|
|
1629
|
+
font-weight: 700;
|
|
1630
|
+
color: rgba(255, 255, 255, 0.9);
|
|
1631
|
+
letter-spacing: 6px;
|
|
1632
|
+
text-transform: uppercase;
|
|
1633
|
+
}
|
|
1634
|
+
|
|
1635
|
+
/* 24 LIQUID / BLOB MORPHING */
|
|
1636
|
+
.preview-liquid {
|
|
1637
|
+
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
|
|
1638
|
+
overflow: hidden;
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
.liquid-blob {
|
|
1642
|
+
position: absolute;
|
|
1643
|
+
border-radius: 50%;
|
|
1644
|
+
filter: blur(25px);
|
|
1645
|
+
animation: blobmove 6s ease-in-out infinite alternate;
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1648
|
+
.lb1 {
|
|
1649
|
+
width: 180px;
|
|
1650
|
+
height: 160px;
|
|
1651
|
+
background: rgba(0, 210, 190, 0.35);
|
|
1652
|
+
top: -30px;
|
|
1653
|
+
left: -20px;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
.lb2 {
|
|
1657
|
+
width: 160px;
|
|
1658
|
+
height: 180px;
|
|
1659
|
+
background: rgba(0, 120, 255, 0.3);
|
|
1660
|
+
bottom: -40px;
|
|
1661
|
+
right: -20px;
|
|
1662
|
+
animation-delay: -2s;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
.lb3 {
|
|
1666
|
+
width: 120px;
|
|
1667
|
+
height: 120px;
|
|
1668
|
+
background: rgba(120, 0, 255, 0.25);
|
|
1669
|
+
top: 50%;
|
|
1670
|
+
left: 50%;
|
|
1671
|
+
transform: translate(-50%, -50%);
|
|
1672
|
+
animation-delay: -4s;
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
@keyframes blobmove {
|
|
1676
|
+
0% {
|
|
1677
|
+
border-radius: 60% 40% 50% 60%/60% 50% 40% 50%;
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
100% {
|
|
1681
|
+
border-radius: 40% 60% 60% 40%/40% 60% 50% 60%;
|
|
1682
|
+
}
|
|
1683
|
+
}
|
|
1684
|
+
|
|
1685
|
+
.liquid-text {
|
|
1686
|
+
position: relative;
|
|
1687
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1688
|
+
font-size: 36px;
|
|
1689
|
+
letter-spacing: 6px;
|
|
1690
|
+
color: rgba(255, 255, 255, 0.9);
|
|
1691
|
+
text-shadow: 0 0 30px rgba(0, 210, 190, 0.8);
|
|
1692
|
+
z-index: 2;
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
/* 25 MEMPHIS / POP PATTERN */
|
|
1696
|
+
.preview-memphis {
|
|
1697
|
+
background: #fff5e0;
|
|
1698
|
+
overflow: hidden;
|
|
1699
|
+
}
|
|
1700
|
+
|
|
1701
|
+
.memphis-bg {
|
|
1702
|
+
position: absolute;
|
|
1703
|
+
inset: 0;
|
|
1704
|
+
}
|
|
1705
|
+
|
|
1706
|
+
/* pattern elements drawn with pseudo-shapes */
|
|
1707
|
+
.mem-tri {
|
|
1708
|
+
position: absolute;
|
|
1709
|
+
width: 0;
|
|
1710
|
+
height: 0;
|
|
1711
|
+
}
|
|
1712
|
+
|
|
1713
|
+
.mt1 {
|
|
1714
|
+
border-left: 16px solid transparent;
|
|
1715
|
+
border-right: 16px solid transparent;
|
|
1716
|
+
border-bottom: 28px solid #e8344a;
|
|
1717
|
+
top: 20px;
|
|
1718
|
+
left: 30px;
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
.mt2 {
|
|
1722
|
+
border-left: 12px solid transparent;
|
|
1723
|
+
border-right: 12px solid transparent;
|
|
1724
|
+
border-bottom: 20px solid #1e90ff;
|
|
1725
|
+
bottom: 40px;
|
|
1726
|
+
right: 50px;
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
.mt3 {
|
|
1730
|
+
border-left: 10px solid transparent;
|
|
1731
|
+
border-right: 10px solid transparent;
|
|
1732
|
+
border-bottom: 18px solid #ffd700;
|
|
1733
|
+
top: 70px;
|
|
1734
|
+
right: 80px;
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1737
|
+
.mem-circle {
|
|
1738
|
+
position: absolute;
|
|
1739
|
+
border-radius: 50%;
|
|
1740
|
+
border: 3px solid;
|
|
1741
|
+
}
|
|
1742
|
+
|
|
1743
|
+
.mci1 {
|
|
1744
|
+
width: 40px;
|
|
1745
|
+
height: 40px;
|
|
1746
|
+
border-color: #e8344a;
|
|
1747
|
+
top: 50px;
|
|
1748
|
+
right: 30px;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
.mci2 {
|
|
1752
|
+
width: 28px;
|
|
1753
|
+
height: 28px;
|
|
1754
|
+
border-color: #1e90ff;
|
|
1755
|
+
bottom: 30px;
|
|
1756
|
+
left: 50px;
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
.mem-zigzag {
|
|
1760
|
+
position: absolute;
|
|
1761
|
+
left: 0;
|
|
1762
|
+
right: 0;
|
|
1763
|
+
height: 8px;
|
|
1764
|
+
top: 45%;
|
|
1765
|
+
background: linear-gradient(135deg, #e8344a 25%, transparent 25%) -10px 0, linear-gradient(225deg, #e8344a 25%, transparent 25%) -10px 0, linear-gradient(315deg, #e8344a 25%, transparent 25%), linear-gradient(45deg, #e8344a 25%, transparent 25%);
|
|
1766
|
+
background-size: 20px 8px;
|
|
1767
|
+
}
|
|
1768
|
+
|
|
1769
|
+
.mem-dot {
|
|
1770
|
+
position: absolute;
|
|
1771
|
+
width: 10px;
|
|
1772
|
+
height: 10px;
|
|
1773
|
+
border-radius: 50%;
|
|
1774
|
+
background: #22bb88;
|
|
1775
|
+
}
|
|
1776
|
+
|
|
1777
|
+
.md1 {
|
|
1778
|
+
top: 30px;
|
|
1779
|
+
left: 80px;
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
.md2 {
|
|
1783
|
+
bottom: 50px;
|
|
1784
|
+
right: 80px;
|
|
1785
|
+
}
|
|
1786
|
+
|
|
1787
|
+
.md3 {
|
|
1788
|
+
top: 120px;
|
|
1789
|
+
left: 130px;
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1792
|
+
.memphis-title {
|
|
1793
|
+
position: relative;
|
|
1794
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1795
|
+
font-size: 34px;
|
|
1796
|
+
letter-spacing: 3px;
|
|
1797
|
+
color: #1a1a1a;
|
|
1798
|
+
text-align: center;
|
|
1799
|
+
z-index: 2;
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
/* 26 DARK FOREST / NATURE */
|
|
1803
|
+
.preview-forest {
|
|
1804
|
+
background: radial-gradient(ellipse at 50% 0%, #0d2b14 0%, #060e08 80%);
|
|
1805
|
+
overflow: hidden;
|
|
1806
|
+
}
|
|
1807
|
+
|
|
1808
|
+
.forest-mist {
|
|
1809
|
+
position: absolute;
|
|
1810
|
+
bottom: 0;
|
|
1811
|
+
left: 0;
|
|
1812
|
+
right: 0;
|
|
1813
|
+
height: 50%;
|
|
1814
|
+
background: linear-gradient(0deg, rgba(180, 255, 200, 0.04) 0%, transparent 100%);
|
|
1815
|
+
}
|
|
1816
|
+
|
|
1817
|
+
.forest-tree {
|
|
1818
|
+
position: absolute;
|
|
1819
|
+
bottom: 0;
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
.ftree1 {
|
|
1823
|
+
left: 10px;
|
|
1824
|
+
width: 0;
|
|
1825
|
+
height: 0;
|
|
1826
|
+
border-left: 20px solid transparent;
|
|
1827
|
+
border-right: 20px solid transparent;
|
|
1828
|
+
border-bottom: 90px solid #0a3d1a;
|
|
1829
|
+
opacity: 0.9;
|
|
1830
|
+
}
|
|
1831
|
+
|
|
1832
|
+
.ftree2 {
|
|
1833
|
+
right: 20px;
|
|
1834
|
+
width: 0;
|
|
1835
|
+
height: 0;
|
|
1836
|
+
border-left: 28px solid transparent;
|
|
1837
|
+
border-right: 28px solid transparent;
|
|
1838
|
+
border-bottom: 120px solid #0d4d20;
|
|
1839
|
+
opacity: 0.8;
|
|
1840
|
+
}
|
|
1841
|
+
|
|
1842
|
+
.ftree3 {
|
|
1843
|
+
left: 50%;
|
|
1844
|
+
transform: translateX(-50%);
|
|
1845
|
+
width: 0;
|
|
1846
|
+
height: 0;
|
|
1847
|
+
border-left: 16px solid transparent;
|
|
1848
|
+
border-right: 16px solid transparent;
|
|
1849
|
+
border-bottom: 70px solid #0a3010;
|
|
1850
|
+
opacity: 0.7;
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
.forest-moon {
|
|
1854
|
+
position: absolute;
|
|
1855
|
+
width: 50px;
|
|
1856
|
+
height: 50px;
|
|
1857
|
+
border-radius: 50%;
|
|
1858
|
+
background: radial-gradient(circle at 40% 40%, #e8f4d0, #b8cc80);
|
|
1859
|
+
top: 20px;
|
|
1860
|
+
right: 40px;
|
|
1861
|
+
box-shadow: 0 0 30px rgba(200, 255, 150, 0.3);
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.forest-star {
|
|
1865
|
+
position: absolute;
|
|
1866
|
+
background: #d4f0b0;
|
|
1867
|
+
border-radius: 50%;
|
|
1868
|
+
}
|
|
1869
|
+
|
|
1870
|
+
.fs1 {
|
|
1871
|
+
width: 3px;
|
|
1872
|
+
height: 3px;
|
|
1873
|
+
top: 30px;
|
|
1874
|
+
left: 40px;
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
.fs2 {
|
|
1878
|
+
width: 2px;
|
|
1879
|
+
height: 2px;
|
|
1880
|
+
top: 50px;
|
|
1881
|
+
left: 100px;
|
|
1882
|
+
opacity: 0.7;
|
|
1883
|
+
}
|
|
1884
|
+
|
|
1885
|
+
.fs3 {
|
|
1886
|
+
width: 3px;
|
|
1887
|
+
height: 3px;
|
|
1888
|
+
top: 25px;
|
|
1889
|
+
right: 100px;
|
|
1890
|
+
}
|
|
1891
|
+
|
|
1892
|
+
.forest-text {
|
|
1893
|
+
position: absolute;
|
|
1894
|
+
bottom: 35px;
|
|
1895
|
+
left: 0;
|
|
1896
|
+
right: 0;
|
|
1897
|
+
text-align: center;
|
|
1898
|
+
font-family: Georgia, serif;
|
|
1899
|
+
font-style: italic;
|
|
1900
|
+
font-size: 22px;
|
|
1901
|
+
color: rgba(200, 255, 180, 0.85);
|
|
1902
|
+
letter-spacing: 4px;
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
.forest-line {
|
|
1906
|
+
position: absolute;
|
|
1907
|
+
bottom: 60px;
|
|
1908
|
+
left: 50%;
|
|
1909
|
+
transform: translateX(-50%);
|
|
1910
|
+
width: 80px;
|
|
1911
|
+
height: 1px;
|
|
1912
|
+
background: rgba(180, 255, 160, 0.3);
|
|
1913
|
+
}
|
|
1914
|
+
|
|
1915
|
+
/* 27 ARCHITECTURAL BLUEPRINT */
|
|
1916
|
+
.preview-blueprint {
|
|
1917
|
+
background: #0d2240;
|
|
1918
|
+
overflow: hidden;
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
.bp-grid {
|
|
1922
|
+
position: absolute;
|
|
1923
|
+
inset: 0;
|
|
1924
|
+
background-image: linear-gradient(rgba(100, 180, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 180, 255, 0.12) 1px, transparent 1px);
|
|
1925
|
+
background-size: 20px 20px;
|
|
1926
|
+
}
|
|
1927
|
+
|
|
1928
|
+
.bp-major {
|
|
1929
|
+
position: absolute;
|
|
1930
|
+
inset: 0;
|
|
1931
|
+
background-image: linear-gradient(rgba(100, 180, 255, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 180, 255, 0.22) 1px, transparent 1px);
|
|
1932
|
+
background-size: 60px 60px;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
.bp-shape {
|
|
1936
|
+
position: absolute;
|
|
1937
|
+
border: 1.5px solid rgba(100, 200, 255, 0.6);
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1940
|
+
.bps1 {
|
|
1941
|
+
top: 30px;
|
|
1942
|
+
left: 30px;
|
|
1943
|
+
width: 80px;
|
|
1944
|
+
height: 50px;
|
|
1945
|
+
}
|
|
1946
|
+
|
|
1947
|
+
.bps2 {
|
|
1948
|
+
top: 30px;
|
|
1949
|
+
left: 30px;
|
|
1950
|
+
width: 40px;
|
|
1951
|
+
height: 40px;
|
|
1952
|
+
border-radius: 50%;
|
|
1953
|
+
transform: translate(80px, 10px);
|
|
1954
|
+
}
|
|
1955
|
+
|
|
1956
|
+
.bp-dim {
|
|
1957
|
+
position: absolute;
|
|
1958
|
+
font-family: 'Space Mono', monospace;
|
|
1959
|
+
font-size: 8px;
|
|
1960
|
+
color: rgba(100, 200, 255, 0.6);
|
|
1961
|
+
letter-spacing: 1px;
|
|
1962
|
+
}
|
|
1963
|
+
|
|
1964
|
+
.bd1 {
|
|
1965
|
+
top: 22px;
|
|
1966
|
+
left: 32px;
|
|
1967
|
+
}
|
|
1968
|
+
|
|
1969
|
+
.bd2 {
|
|
1970
|
+
top: 22px;
|
|
1971
|
+
left: 90px;
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
.bd3 {
|
|
1975
|
+
bottom: 65px;
|
|
1976
|
+
left: 32px;
|
|
1977
|
+
}
|
|
1978
|
+
|
|
1979
|
+
.bp-arrow {
|
|
1980
|
+
position: absolute;
|
|
1981
|
+
left: 30px;
|
|
1982
|
+
top: 18px;
|
|
1983
|
+
width: 100px;
|
|
1984
|
+
height: 1px;
|
|
1985
|
+
background: rgba(100, 200, 255, 0.4);
|
|
1986
|
+
}
|
|
1987
|
+
|
|
1988
|
+
.bp-title {
|
|
1989
|
+
position: absolute;
|
|
1990
|
+
bottom: 20px;
|
|
1991
|
+
left: 0;
|
|
1992
|
+
right: 0;
|
|
1993
|
+
text-align: center;
|
|
1994
|
+
font-family: 'Space Mono', monospace;
|
|
1995
|
+
font-size: 11px;
|
|
1996
|
+
letter-spacing: 4px;
|
|
1997
|
+
color: rgba(150, 220, 255, 0.8);
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
.bp-stamp {
|
|
2001
|
+
position: absolute;
|
|
2002
|
+
top: 50%;
|
|
2003
|
+
right: 20px;
|
|
2004
|
+
transform: translateY(-50%);
|
|
2005
|
+
width: 60px;
|
|
2006
|
+
height: 60px;
|
|
2007
|
+
border: 2px solid rgba(100, 200, 255, 0.5);
|
|
2008
|
+
border-radius: 50%;
|
|
2009
|
+
display: flex;
|
|
2010
|
+
align-items: center;
|
|
2011
|
+
justify-content: center;
|
|
2012
|
+
font-family: 'Space Mono', monospace;
|
|
2013
|
+
font-size: 8px;
|
|
2014
|
+
color: rgba(100, 200, 255, 0.5);
|
|
2015
|
+
text-align: center;
|
|
2016
|
+
line-height: 1.3;
|
|
2017
|
+
letter-spacing: 1px;
|
|
2018
|
+
}
|
|
2019
|
+
|
|
2020
|
+
/* 28 MAXIMALIST COLLAGE */
|
|
2021
|
+
.preview-collage {
|
|
2022
|
+
background: #e8ddd0;
|
|
2023
|
+
overflow: hidden;
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
.col-stripe {
|
|
2027
|
+
position: absolute;
|
|
2028
|
+
top: 0;
|
|
2029
|
+
left: 0;
|
|
2030
|
+
right: 0;
|
|
2031
|
+
height: 100%;
|
|
2032
|
+
background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.03) 8px, rgba(0, 0, 0, 0.03) 9px);
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
.col-block {
|
|
2036
|
+
position: absolute;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
2039
|
+
.cb1 {
|
|
2040
|
+
width: 90px;
|
|
2041
|
+
height: 60px;
|
|
2042
|
+
background: #e83030;
|
|
2043
|
+
top: 20px;
|
|
2044
|
+
left: 20px;
|
|
2045
|
+
transform: rotate(-3deg);
|
|
2046
|
+
}
|
|
2047
|
+
|
|
2048
|
+
.cb2 {
|
|
2049
|
+
width: 70px;
|
|
2050
|
+
height: 90px;
|
|
2051
|
+
background: #1a1a1a;
|
|
2052
|
+
top: 15px;
|
|
2053
|
+
right: 25px;
|
|
2054
|
+
transform: rotate(4deg);
|
|
2055
|
+
}
|
|
2056
|
+
|
|
2057
|
+
.cb3 {
|
|
2058
|
+
width: 80px;
|
|
2059
|
+
height: 50px;
|
|
2060
|
+
background: #f5d020;
|
|
2061
|
+
bottom: 20px;
|
|
2062
|
+
left: 50%;
|
|
2063
|
+
transform: translateX(-50%) rotate(-2deg);
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
.col-text1 {
|
|
2067
|
+
position: absolute;
|
|
2068
|
+
top: 30px;
|
|
2069
|
+
left: 28px;
|
|
2070
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2071
|
+
font-size: 26px;
|
|
2072
|
+
color: #fff;
|
|
2073
|
+
letter-spacing: 2px;
|
|
2074
|
+
line-height: 1;
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
.col-text2 {
|
|
2078
|
+
position: absolute;
|
|
2079
|
+
top: 28px;
|
|
2080
|
+
right: 30px;
|
|
2081
|
+
font-family: Georgia, serif;
|
|
2082
|
+
font-style: italic;
|
|
2083
|
+
font-size: 18px;
|
|
2084
|
+
color: #fff;
|
|
2085
|
+
writing-mode: vertical-rl;
|
|
2086
|
+
letter-spacing: 2px;
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
.col-circle {
|
|
2090
|
+
position: absolute;
|
|
2091
|
+
width: 50px;
|
|
2092
|
+
height: 50px;
|
|
2093
|
+
border-radius: 50%;
|
|
2094
|
+
border: 3px solid #e83030;
|
|
2095
|
+
bottom: 30px;
|
|
2096
|
+
left: 20px;
|
|
2097
|
+
}
|
|
2098
|
+
|
|
2099
|
+
.col-num {
|
|
2100
|
+
position: absolute;
|
|
2101
|
+
bottom: 22px;
|
|
2102
|
+
right: 20px;
|
|
2103
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2104
|
+
font-size: 64px;
|
|
2105
|
+
color: rgba(0, 0, 0, 0.08);
|
|
2106
|
+
line-height: 1;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
/* 29 SCIFI DATA / HOLOGRAPHIC */
|
|
2110
|
+
.preview-holo {
|
|
2111
|
+
background: #03050d;
|
|
2112
|
+
overflow: hidden;
|
|
2113
|
+
}
|
|
2114
|
+
|
|
2115
|
+
.holo-ring {
|
|
2116
|
+
position: absolute;
|
|
2117
|
+
border-radius: 50%;
|
|
2118
|
+
border: 1px solid;
|
|
2119
|
+
}
|
|
2120
|
+
|
|
2121
|
+
.hr1 {
|
|
2122
|
+
width: 180px;
|
|
2123
|
+
height: 180px;
|
|
2124
|
+
border-color: rgba(0, 200, 255, 0.25);
|
|
2125
|
+
top: 50%;
|
|
2126
|
+
left: 50%;
|
|
2127
|
+
transform: translate(-50%, -50%);
|
|
2128
|
+
}
|
|
2129
|
+
|
|
2130
|
+
.hr2 {
|
|
2131
|
+
width: 130px;
|
|
2132
|
+
height: 130px;
|
|
2133
|
+
border-color: rgba(0, 200, 255, 0.4);
|
|
2134
|
+
top: 50%;
|
|
2135
|
+
left: 50%;
|
|
2136
|
+
transform: translate(-50%, -50%) rotate(30deg);
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
.hr3 {
|
|
2140
|
+
width: 80px;
|
|
2141
|
+
height: 80px;
|
|
2142
|
+
border-color: rgba(0, 200, 255, 0.6);
|
|
2143
|
+
top: 50%;
|
|
2144
|
+
left: 50%;
|
|
2145
|
+
transform: translate(-50%, -50%);
|
|
2146
|
+
}
|
|
2147
|
+
|
|
2148
|
+
.holo-scan {
|
|
2149
|
+
position: absolute;
|
|
2150
|
+
left: 0;
|
|
2151
|
+
right: 0;
|
|
2152
|
+
height: 1px;
|
|
2153
|
+
background: rgba(0, 200, 255, 0.5);
|
|
2154
|
+
animation: holoscroll 3s linear infinite;
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
@keyframes holoscroll {
|
|
2158
|
+
0% {
|
|
2159
|
+
top: 20%;
|
|
2160
|
+
opacity: 1;
|
|
2161
|
+
}
|
|
2162
|
+
|
|
2163
|
+
80% {
|
|
2164
|
+
opacity: 0.5;
|
|
2165
|
+
}
|
|
2166
|
+
|
|
2167
|
+
100% {
|
|
2168
|
+
top: 80%;
|
|
2169
|
+
opacity: 0;
|
|
2170
|
+
}
|
|
2171
|
+
}
|
|
2172
|
+
|
|
2173
|
+
.holo-dot {
|
|
2174
|
+
position: absolute;
|
|
2175
|
+
width: 6px;
|
|
2176
|
+
height: 6px;
|
|
2177
|
+
background: #00c8ff;
|
|
2178
|
+
border-radius: 50%;
|
|
2179
|
+
top: 50%;
|
|
2180
|
+
left: 50%;
|
|
2181
|
+
transform: translate(-50%, -50%);
|
|
2182
|
+
}
|
|
2183
|
+
|
|
2184
|
+
.holo-text {
|
|
2185
|
+
position: absolute;
|
|
2186
|
+
font-family: 'Space Mono', monospace;
|
|
2187
|
+
font-size: 10px;
|
|
2188
|
+
color: rgba(0, 200, 255, 0.7);
|
|
2189
|
+
letter-spacing: 3px;
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
.ht1 {
|
|
2193
|
+
top: 15px;
|
|
2194
|
+
left: 20px;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
.ht2 {
|
|
2198
|
+
bottom: 20px;
|
|
2199
|
+
right: 20px;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
.holo-bar {
|
|
2203
|
+
position: absolute;
|
|
2204
|
+
height: 3px;
|
|
2205
|
+
background: linear-gradient(90deg, transparent, #00c8ff, transparent);
|
|
2206
|
+
}
|
|
2207
|
+
|
|
2208
|
+
.hb1 {
|
|
2209
|
+
bottom: 40px;
|
|
2210
|
+
left: 20px;
|
|
2211
|
+
right: 20px;
|
|
2212
|
+
opacity: 0.4;
|
|
2213
|
+
}
|
|
2214
|
+
|
|
2215
|
+
.hb2 {
|
|
2216
|
+
top: 40px;
|
|
2217
|
+
left: 40px;
|
|
2218
|
+
right: 40px;
|
|
2219
|
+
opacity: 0.3;
|
|
2220
|
+
}
|
|
2221
|
+
|
|
2222
|
+
/* 30 RISOGRAPH / PRINT ERROR */
|
|
2223
|
+
.preview-riso {
|
|
2224
|
+
background: #f7f2e8;
|
|
2225
|
+
overflow: hidden;
|
|
2226
|
+
}
|
|
2227
|
+
|
|
2228
|
+
.riso-layer1 {
|
|
2229
|
+
position: absolute;
|
|
2230
|
+
inset: 0;
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2233
|
+
.riso-circle-1 {
|
|
2234
|
+
position: absolute;
|
|
2235
|
+
width: 140px;
|
|
2236
|
+
height: 140px;
|
|
2237
|
+
border-radius: 50%;
|
|
2238
|
+
background: #e8344a;
|
|
2239
|
+
top: 50%;
|
|
2240
|
+
left: 30%;
|
|
2241
|
+
transform: translate(-50%, -50%);
|
|
2242
|
+
mix-blend-mode: multiply;
|
|
2243
|
+
opacity: 0.85;
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
.riso-circle-2 {
|
|
2247
|
+
position: absolute;
|
|
2248
|
+
width: 130px;
|
|
2249
|
+
height: 130px;
|
|
2250
|
+
border-radius: 50%;
|
|
2251
|
+
background: #0d5c9e;
|
|
2252
|
+
top: 50%;
|
|
2253
|
+
left: 60%;
|
|
2254
|
+
transform: translate(-50%, -50%);
|
|
2255
|
+
mix-blend-mode: multiply;
|
|
2256
|
+
opacity: 0.85;
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
.riso-circle-3 {
|
|
2260
|
+
position: absolute;
|
|
2261
|
+
width: 110px;
|
|
2262
|
+
height: 110px;
|
|
2263
|
+
border-radius: 50%;
|
|
2264
|
+
background: #f5d020;
|
|
2265
|
+
top: 55%;
|
|
2266
|
+
left: 46%;
|
|
2267
|
+
transform: translate(-50%, -50%);
|
|
2268
|
+
mix-blend-mode: multiply;
|
|
2269
|
+
opacity: 0.75;
|
|
2270
|
+
}
|
|
2271
|
+
|
|
2272
|
+
.riso-offset {
|
|
2273
|
+
position: absolute;
|
|
2274
|
+
top: 20px;
|
|
2275
|
+
left: 0;
|
|
2276
|
+
right: 0;
|
|
2277
|
+
text-align: center;
|
|
2278
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2279
|
+
font-size: 36px;
|
|
2280
|
+
letter-spacing: 4px;
|
|
2281
|
+
color: rgba(232, 52, 74, 0.25);
|
|
2282
|
+
transform: translate(3px, 3px);
|
|
2283
|
+
}
|
|
2284
|
+
|
|
2285
|
+
.riso-text {
|
|
2286
|
+
position: absolute;
|
|
2287
|
+
top: 20px;
|
|
2288
|
+
left: 0;
|
|
2289
|
+
right: 0;
|
|
2290
|
+
text-align: center;
|
|
2291
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2292
|
+
font-size: 36px;
|
|
2293
|
+
letter-spacing: 4px;
|
|
2294
|
+
color: #1a1a1a;
|
|
2295
|
+
}
|
|
2296
|
+
|
|
2297
|
+
.riso-label {
|
|
2298
|
+
position: absolute;
|
|
2299
|
+
bottom: 20px;
|
|
2300
|
+
left: 0;
|
|
2301
|
+
right: 0;
|
|
2302
|
+
text-align: center;
|
|
2303
|
+
font-family: 'Space Mono', monospace;
|
|
2304
|
+
font-size: 9px;
|
|
2305
|
+
letter-spacing: 4px;
|
|
2306
|
+
color: #6a5a40;
|
|
2307
|
+
}
|
|
2308
|
+
|
|
2309
|
+
footer {
|
|
2310
|
+
text-align: center;
|
|
2311
|
+
margin-top: 60px;
|
|
2312
|
+
color: var(--muted);
|
|
2313
|
+
font-family: 'Space Mono', monospace;
|
|
2314
|
+
font-size: 11px;
|
|
2315
|
+
letter-spacing: 2px;
|
|
2316
|
+
}
|
|
2317
|
+
|
|
2318
|
+
/* ══════════════════════════════════════════
|
|
2319
|
+
slides-grab originals 31–35
|
|
2320
|
+
══════════════════════════════════════════ */
|
|
2321
|
+
|
|
2322
|
+
/* 31 EXECUTIVE MINIMAL */
|
|
2323
|
+
.preview-executive {
|
|
2324
|
+
background: #f5f5f0;
|
|
2325
|
+
}
|
|
2326
|
+
|
|
2327
|
+
.exec-block {
|
|
2328
|
+
position: absolute;
|
|
2329
|
+
top: 24px;
|
|
2330
|
+
right: 24px;
|
|
2331
|
+
width: 120px;
|
|
2332
|
+
height: 80px;
|
|
2333
|
+
background: #1a1a1a;
|
|
2334
|
+
display: flex;
|
|
2335
|
+
align-items: center;
|
|
2336
|
+
justify-content: center;
|
|
2337
|
+
}
|
|
2338
|
+
|
|
2339
|
+
.exec-block-text {
|
|
2340
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2341
|
+
font-size: 11px;
|
|
2342
|
+
font-weight: 700;
|
|
2343
|
+
color: #fff;
|
|
2344
|
+
letter-spacing: 2px;
|
|
2345
|
+
}
|
|
2346
|
+
|
|
2347
|
+
.exec-title {
|
|
2348
|
+
position: absolute;
|
|
2349
|
+
top: 30px;
|
|
2350
|
+
left: 30px;
|
|
2351
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2352
|
+
font-size: 28px;
|
|
2353
|
+
font-weight: 700;
|
|
2354
|
+
color: #1a1a1a;
|
|
2355
|
+
line-height: 1.2;
|
|
2356
|
+
}
|
|
2357
|
+
|
|
2358
|
+
.exec-sub {
|
|
2359
|
+
position: absolute;
|
|
2360
|
+
bottom: 30px;
|
|
2361
|
+
left: 30px;
|
|
2362
|
+
font-family: 'Space Mono', monospace;
|
|
2363
|
+
font-size: 9px;
|
|
2364
|
+
color: #999;
|
|
2365
|
+
letter-spacing: 3px;
|
|
2366
|
+
}
|
|
2367
|
+
|
|
2368
|
+
.exec-line {
|
|
2369
|
+
position: absolute;
|
|
2370
|
+
bottom: 50px;
|
|
2371
|
+
left: 30px;
|
|
2372
|
+
width: 60px;
|
|
2373
|
+
height: 1px;
|
|
2374
|
+
background: #d4d4d0;
|
|
2375
|
+
}
|
|
2376
|
+
|
|
2377
|
+
/* 32 SAGE PROFESSIONAL */
|
|
2378
|
+
.preview-sage {
|
|
2379
|
+
background: #b8c4b8;
|
|
2380
|
+
}
|
|
2381
|
+
|
|
2382
|
+
.sage-card {
|
|
2383
|
+
position: absolute;
|
|
2384
|
+
background: #f8faf8;
|
|
2385
|
+
border-radius: 8px;
|
|
2386
|
+
}
|
|
2387
|
+
|
|
2388
|
+
.sage-c1 {
|
|
2389
|
+
width: 140px;
|
|
2390
|
+
height: 90px;
|
|
2391
|
+
top: 30px;
|
|
2392
|
+
left: 30px;
|
|
2393
|
+
}
|
|
2394
|
+
|
|
2395
|
+
.sage-c2 {
|
|
2396
|
+
width: 100px;
|
|
2397
|
+
height: 60px;
|
|
2398
|
+
bottom: 30px;
|
|
2399
|
+
right: 30px;
|
|
2400
|
+
}
|
|
2401
|
+
|
|
2402
|
+
.sage-title {
|
|
2403
|
+
position: absolute;
|
|
2404
|
+
top: 44px;
|
|
2405
|
+
left: 46px;
|
|
2406
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2407
|
+
font-size: 16px;
|
|
2408
|
+
font-weight: 700;
|
|
2409
|
+
color: #1a1a1a;
|
|
2410
|
+
}
|
|
2411
|
+
|
|
2412
|
+
.sage-sub {
|
|
2413
|
+
position: absolute;
|
|
2414
|
+
top: 68px;
|
|
2415
|
+
left: 46px;
|
|
2416
|
+
font-family: 'Space Mono', monospace;
|
|
2417
|
+
font-size: 9px;
|
|
2418
|
+
color: #3d3d3d;
|
|
2419
|
+
letter-spacing: 1px;
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2422
|
+
.sage-dot {
|
|
2423
|
+
position: absolute;
|
|
2424
|
+
width: 8px;
|
|
2425
|
+
height: 8px;
|
|
2426
|
+
border-radius: 50%;
|
|
2427
|
+
background: #2d2d2d;
|
|
2428
|
+
bottom: 45px;
|
|
2429
|
+
right: 45px;
|
|
2430
|
+
}
|
|
2431
|
+
|
|
2432
|
+
/* 33 MODERN DARK */
|
|
2433
|
+
.preview-modern-dark {
|
|
2434
|
+
background: #0f0f0f;
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2437
|
+
.md-surface {
|
|
2438
|
+
position: absolute;
|
|
2439
|
+
background: #1a1a1a;
|
|
2440
|
+
border: 1px solid #333;
|
|
2441
|
+
border-radius: 8px;
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
.md-s1 {
|
|
2445
|
+
width: 140px;
|
|
2446
|
+
height: 80px;
|
|
2447
|
+
top: 30px;
|
|
2448
|
+
left: 30px;
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2451
|
+
.md-s2 {
|
|
2452
|
+
width: 100px;
|
|
2453
|
+
height: 65px;
|
|
2454
|
+
bottom: 30px;
|
|
2455
|
+
right: 30px;
|
|
2456
|
+
background: #252525;
|
|
2457
|
+
}
|
|
2458
|
+
|
|
2459
|
+
.md-title {
|
|
2460
|
+
position: absolute;
|
|
2461
|
+
top: 46px;
|
|
2462
|
+
left: 46px;
|
|
2463
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2464
|
+
font-size: 18px;
|
|
2465
|
+
font-weight: 700;
|
|
2466
|
+
color: #fff;
|
|
2467
|
+
}
|
|
2468
|
+
|
|
2469
|
+
.md-sub {
|
|
2470
|
+
position: absolute;
|
|
2471
|
+
top: 70px;
|
|
2472
|
+
left: 46px;
|
|
2473
|
+
font-family: 'Space Mono', monospace;
|
|
2474
|
+
font-size: 9px;
|
|
2475
|
+
color: #b0b0b0;
|
|
2476
|
+
letter-spacing: 2px;
|
|
2477
|
+
}
|
|
2478
|
+
|
|
2479
|
+
.md-accent {
|
|
2480
|
+
position: absolute;
|
|
2481
|
+
bottom: 30px;
|
|
2482
|
+
left: 30px;
|
|
2483
|
+
width: 3px;
|
|
2484
|
+
height: 40px;
|
|
2485
|
+
background: #fff;
|
|
2486
|
+
}
|
|
2487
|
+
|
|
2488
|
+
/* 34 CORPORATE BLUE */
|
|
2489
|
+
.preview-corporate {
|
|
2490
|
+
background: #fff;
|
|
2491
|
+
}
|
|
2492
|
+
|
|
2493
|
+
.corp-bar {
|
|
2494
|
+
position: absolute;
|
|
2495
|
+
top: 0;
|
|
2496
|
+
left: 0;
|
|
2497
|
+
right: 0;
|
|
2498
|
+
height: 4px;
|
|
2499
|
+
background: #2563eb;
|
|
2500
|
+
}
|
|
2501
|
+
|
|
2502
|
+
.corp-title {
|
|
2503
|
+
position: absolute;
|
|
2504
|
+
top: 30px;
|
|
2505
|
+
left: 30px;
|
|
2506
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2507
|
+
font-size: 24px;
|
|
2508
|
+
font-weight: 700;
|
|
2509
|
+
color: #1e2a3a;
|
|
2510
|
+
}
|
|
2511
|
+
|
|
2512
|
+
.corp-sub {
|
|
2513
|
+
position: absolute;
|
|
2514
|
+
top: 62px;
|
|
2515
|
+
left: 30px;
|
|
2516
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2517
|
+
font-size: 12px;
|
|
2518
|
+
color: #5a6b7d;
|
|
2519
|
+
}
|
|
2520
|
+
|
|
2521
|
+
.corp-block {
|
|
2522
|
+
position: absolute;
|
|
2523
|
+
bottom: 24px;
|
|
2524
|
+
left: 30px;
|
|
2525
|
+
right: 30px;
|
|
2526
|
+
height: 60px;
|
|
2527
|
+
background: #f7f9fc;
|
|
2528
|
+
border: 1px solid #e2e8f0;
|
|
2529
|
+
border-radius: 6px;
|
|
2530
|
+
display: flex;
|
|
2531
|
+
align-items: center;
|
|
2532
|
+
padding-left: 16px;
|
|
2533
|
+
}
|
|
2534
|
+
|
|
2535
|
+
.corp-dot {
|
|
2536
|
+
width: 10px;
|
|
2537
|
+
height: 10px;
|
|
2538
|
+
border-radius: 50%;
|
|
2539
|
+
background: #2563eb;
|
|
2540
|
+
margin-right: 10px;
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2543
|
+
.corp-line {
|
|
2544
|
+
height: 3px;
|
|
2545
|
+
border-radius: 2px;
|
|
2546
|
+
background: #e2e8f0;
|
|
2547
|
+
}
|
|
2548
|
+
|
|
2549
|
+
.corp-l1 {
|
|
2550
|
+
width: 80px;
|
|
2551
|
+
}
|
|
2552
|
+
|
|
2553
|
+
.corp-l2 {
|
|
2554
|
+
width: 50px;
|
|
2555
|
+
margin-top: 6px;
|
|
2556
|
+
}
|
|
2557
|
+
|
|
2558
|
+
/* 35 WARM NEUTRAL */
|
|
2559
|
+
.preview-warm {
|
|
2560
|
+
background: #faf8f5;
|
|
2561
|
+
}
|
|
2562
|
+
|
|
2563
|
+
.warm-panel {
|
|
2564
|
+
position: absolute;
|
|
2565
|
+
background: #f0ebe3;
|
|
2566
|
+
border-radius: 10px;
|
|
2567
|
+
}
|
|
2568
|
+
|
|
2569
|
+
.warm-p1 {
|
|
2570
|
+
width: 130px;
|
|
2571
|
+
height: 80px;
|
|
2572
|
+
top: 30px;
|
|
2573
|
+
left: 30px;
|
|
2574
|
+
}
|
|
2575
|
+
|
|
2576
|
+
.warm-p2 {
|
|
2577
|
+
width: 90px;
|
|
2578
|
+
height: 55px;
|
|
2579
|
+
bottom: 30px;
|
|
2580
|
+
right: 30px;
|
|
2581
|
+
}
|
|
2582
|
+
|
|
2583
|
+
.warm-title {
|
|
2584
|
+
position: absolute;
|
|
2585
|
+
top: 46px;
|
|
2586
|
+
left: 46px;
|
|
2587
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2588
|
+
font-size: 18px;
|
|
2589
|
+
font-weight: 700;
|
|
2590
|
+
color: #2d2a26;
|
|
2591
|
+
}
|
|
2592
|
+
|
|
2593
|
+
.warm-accent {
|
|
2594
|
+
position: absolute;
|
|
2595
|
+
top: 72px;
|
|
2596
|
+
left: 46px;
|
|
2597
|
+
width: 24px;
|
|
2598
|
+
height: 3px;
|
|
2599
|
+
background: #c45a3b;
|
|
2600
|
+
border-radius: 2px;
|
|
2601
|
+
}
|
|
2602
|
+
|
|
2603
|
+
.warm-sub {
|
|
2604
|
+
position: absolute;
|
|
2605
|
+
bottom: 30px;
|
|
2606
|
+
left: 30px;
|
|
2607
|
+
font-family: 'Space Mono', monospace;
|
|
2608
|
+
font-size: 9px;
|
|
2609
|
+
color: #6b6560;
|
|
2610
|
+
letter-spacing: 2px;
|
|
2611
|
+
}
|
|
2612
|
+
</style>
|
|
2613
|
+
</head>
|
|
2614
|
+
|
|
2615
|
+
<body>
|
|
2616
|
+
|
|
2617
|
+
<header>
|
|
2618
|
+
<span class="tag">slides-grab Design Styles</span>
|
|
2619
|
+
<h1>Design <span>Styles</span><br>Collection 95</h1>
|
|
2620
|
+
<p>95 bundled design styles for slides-grab. 30 derived from <a href="https://github.com/corazzon/pptx-design-styles" target="_blank" style="color: var(--accent); text-decoration: none;">corazzon/pptx-design-styles</a> (MIT), 5 slides-grab originals, and 60 PPT packs derived from <a href="https://github.com/epoko77-ai/design-diversity" target="_blank" style="color: var(--accent); text-decoration: none;">epoko77-ai/design-diversity</a> (MIT).</p>
|
|
2621
|
+
</header>
|
|
2622
|
+
|
|
2623
|
+
<div class="grid">
|
|
2624
|
+
|
|
2625
|
+
<!-- 01 Glassmorphism -->
|
|
2626
|
+
<div class="card">
|
|
2627
|
+
<div class="preview preview-glass">
|
|
2628
|
+
<div class="glass-el glass-el1"></div>
|
|
2629
|
+
<div class="glass-el glass-el2"></div>
|
|
2630
|
+
<div class="glass-el glass-el3"></div>
|
|
2631
|
+
</div>
|
|
2632
|
+
<div class="card-info">
|
|
2633
|
+
<div class="card-num">01 — GLASSMORPHISM</div>
|
|
2634
|
+
<div class="card-title">Glassmorphism</div>
|
|
2635
|
+
<div class="card-desc">Frosted glass cards with blur effects on dark gradients. Premium, layered depth.</div>
|
|
2636
|
+
<div class="tags"><span class="tag-pill">backdrop-filter</span><span class="tag-pill">dark bg</span><span
|
|
2637
|
+
class="tag-pill">premium</span></div>
|
|
2638
|
+
</div>
|
|
2639
|
+
</div>
|
|
2640
|
+
|
|
2641
|
+
<!-- 02 Neo-Brutalism -->
|
|
2642
|
+
<div class="card">
|
|
2643
|
+
<div class="preview preview-brutal">
|
|
2644
|
+
<div class="brutal-box brutal-box1">BOLD IDEA</div>
|
|
2645
|
+
<div class="brutal-line"></div>
|
|
2646
|
+
<div class="brutal-box brutal-box2">ACTION</div>
|
|
2647
|
+
</div>
|
|
2648
|
+
<div class="card-info">
|
|
2649
|
+
<div class="card-num">02 — NEO-BRUTALISM</div>
|
|
2650
|
+
<div class="card-title">Neo-Brutalism</div>
|
|
2651
|
+
<div class="card-desc">Thick borders, hard shadows, raw layouts on high-saturation backgrounds. Bold and memorable.</div>
|
|
2652
|
+
<div class="tags"><span class="tag-pill">bold border</span><span class="tag-pill">hard shadow</span><span
|
|
2653
|
+
class="tag-pill">high contrast</span></div>
|
|
2654
|
+
</div>
|
|
2655
|
+
</div>
|
|
2656
|
+
|
|
2657
|
+
<!-- 03 Bento Grid -->
|
|
2658
|
+
<div class="card">
|
|
2659
|
+
<div class="preview preview-bento">
|
|
2660
|
+
<div class="bento-grid">
|
|
2661
|
+
<div class="bento-cell bc1"></div>
|
|
2662
|
+
<div class="bento-cell bc2"></div>
|
|
2663
|
+
<div class="bento-cell bc3"></div>
|
|
2664
|
+
<div class="bento-cell bc5"></div>
|
|
2665
|
+
<div class="bento-cell bc4"></div>
|
|
2666
|
+
</div>
|
|
2667
|
+
</div>
|
|
2668
|
+
<div class="card-info">
|
|
2669
|
+
<div class="card-num">03 — BENTO GRID</div>
|
|
2670
|
+
<div class="card-title">Bento Grid</div>
|
|
2671
|
+
<div class="card-desc">Modular grid layout with mixed-size cards. Present multiple points elegantly in one slide.</div>
|
|
2672
|
+
<div class="tags"><span class="tag-pill">modular</span><span class="tag-pill">multi-info</span><span
|
|
2673
|
+
class="tag-pill">apple style</span></div>
|
|
2674
|
+
</div>
|
|
2675
|
+
</div>
|
|
2676
|
+
|
|
2677
|
+
<!-- 04 Dark Academia -->
|
|
2678
|
+
<div class="card">
|
|
2679
|
+
<div class="preview preview-academia">
|
|
2680
|
+
<div class="academia-overlay"></div>
|
|
2681
|
+
<div class="academia-border"></div>
|
|
2682
|
+
<div class="academia-text at1">VERITAS</div>
|
|
2683
|
+
<div class="academia-text at2">EST · MMX · MMXXV</div>
|
|
2684
|
+
</div>
|
|
2685
|
+
<div class="card-info">
|
|
2686
|
+
<div class="card-num">04 — DARK ACADEMIA</div>
|
|
2687
|
+
<div class="card-title">Dark Academia</div>
|
|
2688
|
+
<div class="card-desc">Deep brown-gold palette, serif fonts, ornate borders. Scholarly and refined.</div>
|
|
2689
|
+
<div class="tags"><span class="tag-pill">serif font</span><span class="tag-pill">dark warm</span><span
|
|
2690
|
+
class="tag-pill">editorial</span></div>
|
|
2691
|
+
</div>
|
|
2692
|
+
</div>
|
|
2693
|
+
|
|
2694
|
+
<!-- 05 Gradient Mesh -->
|
|
2695
|
+
<div class="card">
|
|
2696
|
+
<div class="preview preview-mesh">
|
|
2697
|
+
<div class="mesh-bg"></div>
|
|
2698
|
+
<div class="mesh-text">GRADIENT MESH</div>
|
|
2699
|
+
</div>
|
|
2700
|
+
<div class="card-info">
|
|
2701
|
+
<div class="card-num">05 — GRADIENT MESH</div>
|
|
2702
|
+
<div class="card-title">Gradient Mesh</div>
|
|
2703
|
+
<div class="card-desc">Multi-color mesh gradient backgrounds. Vibrant and artistic with white text overlay.</div>
|
|
2704
|
+
<div class="tags"><span class="tag-pill">vibrant</span><span class="tag-pill">artistic</span><span
|
|
2705
|
+
class="tag-pill">brand</span></div>
|
|
2706
|
+
</div>
|
|
2707
|
+
</div>
|
|
2708
|
+
|
|
2709
|
+
<!-- 06 Claymorphism -->
|
|
2710
|
+
<div class="card">
|
|
2711
|
+
<div class="preview preview-clay">
|
|
2712
|
+
<div class="clay-el clay1">🎯</div>
|
|
2713
|
+
<div class="clay-el clay2">✦</div>
|
|
2714
|
+
<div class="clay-el clay3">💡</div>
|
|
2715
|
+
</div>
|
|
2716
|
+
<div class="card-info">
|
|
2717
|
+
<div class="card-num">06 — CLAYMORPHISM</div>
|
|
2718
|
+
<div class="card-title">Claymorphism</div>
|
|
2719
|
+
<div class="card-desc">3D rounded shapes with colored soft shadows. Friendly and playful.</div>
|
|
2720
|
+
<div class="tags"><span class="tag-pill">3d effect</span><span class="tag-pill">friendly</span><span
|
|
2721
|
+
class="tag-pill">rounded</span></div>
|
|
2722
|
+
</div>
|
|
2723
|
+
</div>
|
|
2724
|
+
|
|
2725
|
+
<!-- 07 Swiss/International -->
|
|
2726
|
+
<div class="card">
|
|
2727
|
+
<div class="preview preview-swiss">
|
|
2728
|
+
<div class="swiss-red"></div>
|
|
2729
|
+
<div class="swiss-line"></div>
|
|
2730
|
+
<div class="swiss-title">GRID<br>SYSTEM</div>
|
|
2731
|
+
<div class="swiss-sub">HELVETICA · GRID · ORDER</div>
|
|
2732
|
+
<div class="swiss-circle"></div>
|
|
2733
|
+
</div>
|
|
2734
|
+
<div class="card-info">
|
|
2735
|
+
<div class="card-num">07 — SWISS STYLE</div>
|
|
2736
|
+
<div class="card-title">Swiss International Style</div>
|
|
2737
|
+
<div class="card-desc">Grid-aligned, functional layout with red vertical accent bar. Helvetica. Clean.</div>
|
|
2738
|
+
<div class="tags"><span class="tag-pill">grid based</span><span class="tag-pill">typography</span><span
|
|
2739
|
+
class="tag-pill">corporate</span></div>
|
|
2740
|
+
</div>
|
|
2741
|
+
</div>
|
|
2742
|
+
|
|
2743
|
+
<!-- 08 Aurora/Neon -->
|
|
2744
|
+
<div class="card">
|
|
2745
|
+
<div class="preview preview-aurora">
|
|
2746
|
+
<div class="aurora-glow ag1"></div>
|
|
2747
|
+
<div class="aurora-glow ag2"></div>
|
|
2748
|
+
<div class="aurora-glow ag3"></div>
|
|
2749
|
+
<div class="aurora-text">AURORA</div>
|
|
2750
|
+
</div>
|
|
2751
|
+
<div class="card-info">
|
|
2752
|
+
<div class="card-num">08 — AURORA / NEON</div>
|
|
2753
|
+
<div class="card-title">Aurora Neon Glow</div>
|
|
2754
|
+
<div class="card-desc">Blurred neon glow blobs on deep-space black. Gradient text in green-cyan-violet.</div>
|
|
2755
|
+
<div class="tags"><span class="tag-pill">dark</span><span class="tag-pill">glow</span><span
|
|
2756
|
+
class="tag-pill">tech/AI</span></div>
|
|
2757
|
+
</div>
|
|
2758
|
+
</div>
|
|
2759
|
+
|
|
2760
|
+
<!-- 09 Retro Y2K -->
|
|
2761
|
+
<div class="card">
|
|
2762
|
+
<div class="preview preview-y2k">
|
|
2763
|
+
<div class="y2k-stripe ys1"></div>
|
|
2764
|
+
<div class="y2k-stripe ys2"></div>
|
|
2765
|
+
<span class="y2k-star yk1">✦</span>
|
|
2766
|
+
<span class="y2k-star yk2">★</span>
|
|
2767
|
+
<div class="y2k-text">RETRO Y2K</div>
|
|
2768
|
+
</div>
|
|
2769
|
+
<div class="card-info">
|
|
2770
|
+
<div class="card-num">09 — RETRO Y2K</div>
|
|
2771
|
+
<div class="card-title">Retro Y2K</div>
|
|
2772
|
+
<div class="card-desc">Rainbow stripe bars, star motifs, double text shadows. Nostalgic pop energy.
|
|
2773
|
+
</div>
|
|
2774
|
+
<div class="tags"><span class="tag-pill">retro</span><span class="tag-pill">pop culture</span><span
|
|
2775
|
+
class="tag-pill">playful</span></div>
|
|
2776
|
+
</div>
|
|
2777
|
+
</div>
|
|
2778
|
+
|
|
2779
|
+
<!-- 10 Nordic Minimalism -->
|
|
2780
|
+
<div class="card">
|
|
2781
|
+
<div class="preview preview-nordic">
|
|
2782
|
+
<div class="nordic-blob"></div>
|
|
2783
|
+
<div class="nordic-dot nd1"></div>
|
|
2784
|
+
<div class="nordic-dot nd2"></div>
|
|
2785
|
+
<div class="nordic-dot nd3"></div>
|
|
2786
|
+
<div class="nordic-line"></div>
|
|
2787
|
+
<div class="nordic-word">SIMPLICITY · CALM · FORM</div>
|
|
2788
|
+
</div>
|
|
2789
|
+
<div class="card-info">
|
|
2790
|
+
<div class="card-num">10 — NORDIC MINIMALISM</div>
|
|
2791
|
+
<div class="card-title">Nordic Minimalism</div>
|
|
2792
|
+
<div class="card-desc">Warm cream tones, organic blob shapes, generous whitespace. Calm and natural.</div>
|
|
2793
|
+
<div class="tags"><span class="tag-pill">warm neutral</span><span class="tag-pill">organic</span><span
|
|
2794
|
+
class="tag-pill">calm</span></div>
|
|
2795
|
+
</div>
|
|
2796
|
+
</div>
|
|
2797
|
+
|
|
2798
|
+
<!-- 11 Typographic Bold -->
|
|
2799
|
+
<div class="card">
|
|
2800
|
+
<div class="preview preview-typo">
|
|
2801
|
+
<div class="typo-big">BIG<br><span>TYPE</span></div>
|
|
2802
|
+
<div class="typo-small">TYPOGRAPHY FIRST</div>
|
|
2803
|
+
</div>
|
|
2804
|
+
<div class="card-info">
|
|
2805
|
+
<div class="card-num">11 — TYPOGRAPHIC BOLD</div>
|
|
2806
|
+
<div class="card-title">Typographic Bold</div>
|
|
2807
|
+
<div class="card-desc">Oversized type fills the slide. One accent-color word breaks the monochrome.</div>
|
|
2808
|
+
<div class="tags"><span class="tag-pill">type-driven</span><span class="tag-pill">editorial</span><span
|
|
2809
|
+
class="tag-pill">bold</span></div>
|
|
2810
|
+
</div>
|
|
2811
|
+
</div>
|
|
2812
|
+
|
|
2813
|
+
<!-- 12 Duotone / Color Split -->
|
|
2814
|
+
<div class="card">
|
|
2815
|
+
<div class="preview preview-duotone">
|
|
2816
|
+
<div class="duo-left">
|
|
2817
|
+
<div class="duo-text">IDEA</div>
|
|
2818
|
+
</div>
|
|
2819
|
+
<div class="duo-right">
|
|
2820
|
+
<div class="duo-text">ACTION</div>
|
|
2821
|
+
</div>
|
|
2822
|
+
<div class="duo-divider"></div>
|
|
2823
|
+
</div>
|
|
2824
|
+
<div class="card-info">
|
|
2825
|
+
<div class="card-num">12 — DUOTONE / SPLIT</div>
|
|
2826
|
+
<div class="card-title">Duotone / Color Split</div>
|
|
2827
|
+
<div class="card-desc">Strict 50/50 vertical split with white divider. One concept per panel.</div>
|
|
2828
|
+
<div class="tags"><span class="tag-pill">contrast</span><span class="tag-pill">split layout</span><span
|
|
2829
|
+
class="tag-pill">dramatic</span></div>
|
|
2830
|
+
</div>
|
|
2831
|
+
</div>
|
|
2832
|
+
|
|
2833
|
+
<!-- 13 Monochrome Minimal -->
|
|
2834
|
+
<div class="card">
|
|
2835
|
+
<div class="preview preview-mono">
|
|
2836
|
+
<div class="mono-circle-out"></div>
|
|
2837
|
+
<div class="mono-center">
|
|
2838
|
+
<div class="mono-label">LESS IS MORE</div>
|
|
2839
|
+
<div class="mono-rect"></div>
|
|
2840
|
+
<div class="mono-rect2"></div>
|
|
2841
|
+
<div class="mono-rect3"></div>
|
|
2842
|
+
</div>
|
|
2843
|
+
</div>
|
|
2844
|
+
<div class="card-info">
|
|
2845
|
+
<div class="card-num">13 — MONOCHROME MINIMAL</div>
|
|
2846
|
+
<div class="card-title">Monochrome Minimal</div>
|
|
2847
|
+
<div class="card-desc">Black, white, and grey only. Thin circles, width-varying bars, extreme negative space.</div>
|
|
2848
|
+
<div class="tags"><span class="tag-pill">black & white</span><span class="tag-pill">restrained</span><span
|
|
2849
|
+
class="tag-pill">luxury</span></div>
|
|
2850
|
+
</div>
|
|
2851
|
+
</div>
|
|
2852
|
+
|
|
2853
|
+
<!-- 14 Cyberpunk Outline -->
|
|
2854
|
+
<div class="card">
|
|
2855
|
+
<div class="preview preview-cyber">
|
|
2856
|
+
<div class="cyber-grid"></div>
|
|
2857
|
+
<div class="cyber-corner cc-tl"></div>
|
|
2858
|
+
<div class="cyber-corner cc-tr"></div>
|
|
2859
|
+
<div class="cyber-corner cc-bl"></div>
|
|
2860
|
+
<div class="cyber-corner cc-br"></div>
|
|
2861
|
+
<div class="cyber-title">CYBERPUNK</div>
|
|
2862
|
+
<div class="cyber-sub">SYSTEM · ONLINE · 2025</div>
|
|
2863
|
+
</div>
|
|
2864
|
+
<div class="card-info">
|
|
2865
|
+
<div class="card-num">14 — CYBERPUNK OUTLINE</div>
|
|
2866
|
+
<div class="card-title">Cyberpunk Outline</div>
|
|
2867
|
+
<div class="card-desc">Grid overlay on dark background, outlined neon text. HUD aesthetic.
|
|
2868
|
+
</div>
|
|
2869
|
+
<div class="tags"><span class="tag-pill">HUD style</span><span class="tag-pill">outline text</span><span
|
|
2870
|
+
class="tag-pill">sci-fi</span></div>
|
|
2871
|
+
</div>
|
|
2872
|
+
</div>
|
|
2873
|
+
|
|
2874
|
+
<!-- 15 Editorial Magazine -->
|
|
2875
|
+
<div class="card">
|
|
2876
|
+
<div class="preview preview-editorial">
|
|
2877
|
+
<div class="edit-bg-block"></div>
|
|
2878
|
+
<div class="edit-title">THE<br>BRIEF</div>
|
|
2879
|
+
<div class="edit-rule"></div>
|
|
2880
|
+
<div class="edit-body">VOL.12 · SPRING 2025<br>DESIGN · STRATEGY</div>
|
|
2881
|
+
<div class="edit-vol">EDITORIAL — LAYOUT — MAGAZINE</div>
|
|
2882
|
+
</div>
|
|
2883
|
+
<div class="card-info">
|
|
2884
|
+
<div class="card-num">15 — EDITORIAL MAGAZINE</div>
|
|
2885
|
+
<div class="card-title">Editorial Magazine</div>
|
|
2886
|
+
<div class="card-desc">Serif title, red accent rule, two-column layout. Magazine page feel.
|
|
2887
|
+
</div>
|
|
2888
|
+
<div class="tags"><span class="tag-pill">asymmetric</span><span class="tag-pill">serif</span><span
|
|
2889
|
+
class="tag-pill">storytelling</span></div>
|
|
2890
|
+
</div>
|
|
2891
|
+
</div>
|
|
2892
|
+
|
|
2893
|
+
<!-- 16 Pastel Soft UI -->
|
|
2894
|
+
<div class="card">
|
|
2895
|
+
<div class="preview preview-pastel">
|
|
2896
|
+
<div class="pastel-dot pd1"></div>
|
|
2897
|
+
<div class="pastel-dot pd2"></div>
|
|
2898
|
+
<div class="pastel-card pc1"></div>
|
|
2899
|
+
<div class="pastel-card pc3"></div>
|
|
2900
|
+
<div class="pastel-card pc2"></div>
|
|
2901
|
+
</div>
|
|
2902
|
+
<div class="card-info">
|
|
2903
|
+
<div class="card-num">16 — PASTEL SOFT UI</div>
|
|
2904
|
+
<div class="card-title">Pastel Soft UI</div>
|
|
2905
|
+
<div class="card-desc">Soft pastel gradients with frosted glass cards. Light, airy, app-like.</div>
|
|
2906
|
+
<div class="tags"><span class="tag-pill">pastel</span><span class="tag-pill">soft</span><span
|
|
2907
|
+
class="tag-pill">app UI</span></div>
|
|
2908
|
+
</div>
|
|
2909
|
+
</div>
|
|
2910
|
+
|
|
2911
|
+
<!-- 17 Dark Neon Miami -->
|
|
2912
|
+
<div class="card">
|
|
2913
|
+
<div class="preview preview-miami">
|
|
2914
|
+
<div class="miami-sun"></div>
|
|
2915
|
+
<div class="miami-lines">
|
|
2916
|
+
<div class="miami-line ml1"></div>
|
|
2917
|
+
<div class="miami-line ml2"></div>
|
|
2918
|
+
<div class="miami-line ml3"></div>
|
|
2919
|
+
<div class="miami-line ml4"></div>
|
|
2920
|
+
</div>
|
|
2921
|
+
<span class="miami-palm mp1">🌴</span>
|
|
2922
|
+
<span class="miami-palm mp2">🌴</span>
|
|
2923
|
+
<div class="miami-title">MIAMI</div>
|
|
2924
|
+
</div>
|
|
2925
|
+
<div class="card-info">
|
|
2926
|
+
<div class="card-num">17 — DARK NEON MIAMI</div>
|
|
2927
|
+
<div class="card-title">Dark Neon Miami</div>
|
|
2928
|
+
<div class="card-desc">Synthwave sunset palette with horizon lines. 80s retro-future energy.
|
|
2929
|
+
</div>
|
|
2930
|
+
<div class="tags"><span class="tag-pill">synthwave</span><span class="tag-pill">80s retro</span><span
|
|
2931
|
+
class="tag-pill">neon</span></div>
|
|
2932
|
+
</div>
|
|
2933
|
+
</div>
|
|
2934
|
+
|
|
2935
|
+
<!-- 18 Hand-crafted Organic -->
|
|
2936
|
+
<div class="card">
|
|
2937
|
+
<div class="preview preview-organic">
|
|
2938
|
+
<div class="organic-line"></div>
|
|
2939
|
+
<div class="organic-circle oc1"></div>
|
|
2940
|
+
<div class="organic-circle oc2"></div>
|
|
2941
|
+
<span class="organic-leaf ol1">🌿</span>
|
|
2942
|
+
<span class="organic-leaf ol2">🌾</span>
|
|
2943
|
+
<div class="organic-text">Handmade</div>
|
|
2944
|
+
</div>
|
|
2945
|
+
<div class="card-info">
|
|
2946
|
+
<div class="card-num">18 — HAND-CRAFTED ORGANIC</div>
|
|
2947
|
+
<div class="card-title">Hand-crafted Organic</div>
|
|
2948
|
+
<div class="card-desc">Natural textures, dashed circles, serif italic text. Earthy and artisanal.</div>
|
|
2949
|
+
<div class="tags"><span class="tag-pill">craft</span><span class="tag-pill">natural</span><span
|
|
2950
|
+
class="tag-pill">eco</span></div>
|
|
2951
|
+
</div>
|
|
2952
|
+
</div>
|
|
2953
|
+
|
|
2954
|
+
<!-- 19 Isometric 3D Flat -->
|
|
2955
|
+
<div class="card">
|
|
2956
|
+
<div class="preview preview-iso">
|
|
2957
|
+
<div class="iso-wrap">
|
|
2958
|
+
<div class="iso-face iso-top"></div>
|
|
2959
|
+
<div class="iso-face iso-left"></div>
|
|
2960
|
+
<div class="iso-face iso-right"></div>
|
|
2961
|
+
<div class="iso-face iso-top2"></div>
|
|
2962
|
+
<div class="iso-face iso-left2"></div>
|
|
2963
|
+
<div class="iso-face iso-right2"></div>
|
|
2964
|
+
</div>
|
|
2965
|
+
</div>
|
|
2966
|
+
<div class="card-info">
|
|
2967
|
+
<div class="card-num">19 — ISOMETRIC 3D FLAT</div>
|
|
2968
|
+
<div class="card-title">Isometric 3D Flat</div>
|
|
2969
|
+
<div class="card-desc">Skewed geometric blocks creating 3D illusion on dark purple.
|
|
2970
|
+
</div>
|
|
2971
|
+
<div class="tags"><span class="tag-pill">3D flat</span><span class="tag-pill">isometric</span><span
|
|
2972
|
+
class="tag-pill">tech</span></div>
|
|
2973
|
+
</div>
|
|
2974
|
+
</div>
|
|
2975
|
+
|
|
2976
|
+
<!-- 20 Vaporwave -->
|
|
2977
|
+
<div class="card">
|
|
2978
|
+
<div class="preview preview-vapor">
|
|
2979
|
+
<div class="vapor-sun"></div>
|
|
2980
|
+
<div class="vapor-line1"></div>
|
|
2981
|
+
<div class="vapor-line2"></div>
|
|
2982
|
+
<div class="vapor-grid">
|
|
2983
|
+
<div class="vg-h vg1"></div>
|
|
2984
|
+
<div class="vg-h vg2"></div>
|
|
2985
|
+
<div class="vg-h vg3"></div>
|
|
2986
|
+
<div class="vg-h vg4"></div>
|
|
2987
|
+
<div class="vg-h vg5"></div>
|
|
2988
|
+
<div class="vg-h vg6"></div>
|
|
2989
|
+
<div class="vg-h vg7"></div>
|
|
2990
|
+
<div class="vg-v vv1"></div>
|
|
2991
|
+
<div class="vg-v vv2"></div>
|
|
2992
|
+
<div class="vg-v vv3"></div>
|
|
2993
|
+
<div class="vg-v vv4"></div>
|
|
2994
|
+
<div class="vg-v vv5"></div>
|
|
2995
|
+
<div class="vg-v vv6"></div>
|
|
2996
|
+
<div class="vg-v vv7"></div>
|
|
2997
|
+
</div>
|
|
2998
|
+
<div class="vapor-title">ÆSTHETICS</div>
|
|
2999
|
+
<div class="vapor-text">VAPORWAVE</div>
|
|
3000
|
+
</div>
|
|
3001
|
+
<div class="card-info">
|
|
3002
|
+
<div class="card-num">20 — VAPORWAVE</div>
|
|
3003
|
+
<div class="card-title">Vaporwave</div>
|
|
3004
|
+
<div class="card-desc">Purple gradient with perspective grid, striped sunset circle. Dreamy subculture aesthetic.
|
|
3005
|
+
</div>
|
|
3006
|
+
<div class="tags"><span class="tag-pill">aesthetic</span><span class="tag-pill">dreamy</span><span
|
|
3007
|
+
class="tag-pill">subculture</span></div>
|
|
3008
|
+
</div>
|
|
3009
|
+
</div>
|
|
3010
|
+
|
|
3011
|
+
<!-- ══════════════ 신규 10가지 ══════════════ -->
|
|
3012
|
+
|
|
3013
|
+
<!-- 21 Art Deco Luxe -->
|
|
3014
|
+
<div class="card">
|
|
3015
|
+
<div class="preview preview-artdeco">
|
|
3016
|
+
<div class="deco-border"></div>
|
|
3017
|
+
<div class="deco-inner"></div>
|
|
3018
|
+
<div class="deco-fan-l"></div>
|
|
3019
|
+
<div class="deco-fan-r"></div>
|
|
3020
|
+
<div class="deco-rule-h deco-rule-t"></div>
|
|
3021
|
+
<div class="deco-diamond"></div>
|
|
3022
|
+
<div class="deco-title">LUXE<br>DECO</div>
|
|
3023
|
+
<div class="deco-sub">EST. MCMXXV · PRESTIGE</div>
|
|
3024
|
+
</div>
|
|
3025
|
+
<div class="card-info">
|
|
3026
|
+
<div class="card-num">21 — ART DECO LUXE</div>
|
|
3027
|
+
<div class="card-title">Art Deco Luxe</div>
|
|
3028
|
+
<div class="card-desc">Gold borders, geometric fan motifs on near-black. Gatsby-era opulence.
|
|
3029
|
+
분위기.</div>
|
|
3030
|
+
<div class="tags"><span class="tag-pill">gold</span><span class="tag-pill">geometric</span><span
|
|
3031
|
+
class="tag-pill">luxury</span></div>
|
|
3032
|
+
</div>
|
|
3033
|
+
</div>
|
|
3034
|
+
|
|
3035
|
+
<!-- 22 Brutalist Newspaper -->
|
|
3036
|
+
<div class="card">
|
|
3037
|
+
<div class="preview preview-news">
|
|
3038
|
+
<div class="news-masthead">
|
|
3039
|
+
<span class="news-title">THE DAILY</span>
|
|
3040
|
+
<span class="news-date">2025.06.01 · VOL.XII</span>
|
|
3041
|
+
</div>
|
|
3042
|
+
<div class="news-rule1"></div>
|
|
3043
|
+
<div class="news-rule2"></div>
|
|
3044
|
+
<div class="news-col1">
|
|
3045
|
+
<div class="news-headline">BREAKING DESIGN</div>
|
|
3046
|
+
<div class="news-body">Typography as the primary visual language. Columns, rules and hierarchy.</div>
|
|
3047
|
+
</div>
|
|
3048
|
+
<div class="news-divider"></div>
|
|
3049
|
+
<div class="news-col2">
|
|
3050
|
+
<div class="news-photo">📰</div>
|
|
3051
|
+
<div class="news-caption">PHOTO · EDITORIAL</div>
|
|
3052
|
+
</div>
|
|
3053
|
+
</div>
|
|
3054
|
+
<div class="card-info">
|
|
3055
|
+
<div class="card-num">22 — BRUTALIST NEWSPAPER</div>
|
|
3056
|
+
<div class="card-title">Brutalist Newspaper</div>
|
|
3057
|
+
<div class="card-desc">Newspaper masthead, columns, and serif headlines. Raw editorial layout.
|
|
3058
|
+
아이덴티티.</div>
|
|
3059
|
+
<div class="tags"><span class="tag-pill">editorial</span><span class="tag-pill">newspaper</span><span
|
|
3060
|
+
class="tag-pill">brutalist</span></div>
|
|
3061
|
+
</div>
|
|
3062
|
+
</div>
|
|
3063
|
+
|
|
3064
|
+
<!-- 23 Stained Glass / Mosaic -->
|
|
3065
|
+
<div class="card">
|
|
3066
|
+
<div class="preview preview-mosaic">
|
|
3067
|
+
<div class="mosaic-grid">
|
|
3068
|
+
<div class="mosaic-cell mc1"></div>
|
|
3069
|
+
<div class="mosaic-cell mc2"></div>
|
|
3070
|
+
<div class="mosaic-cell mc3"></div>
|
|
3071
|
+
<div class="mosaic-cell mc4"></div>
|
|
3072
|
+
<div class="mosaic-cell mc5"></div>
|
|
3073
|
+
<div class="mosaic-cell mc6"></div>
|
|
3074
|
+
<div class="mosaic-cell mc7"></div>
|
|
3075
|
+
<div class="mosaic-cell mc8"></div>
|
|
3076
|
+
<div class="mosaic-cell mc9"></div>
|
|
3077
|
+
<div class="mosaic-cell mc10"></div>
|
|
3078
|
+
<div class="mosaic-cell mc11"></div>
|
|
3079
|
+
<div class="mosaic-cell mc12"></div>
|
|
3080
|
+
<div class="mosaic-cell mc13"></div>
|
|
3081
|
+
<div class="mosaic-cell mc14"></div>
|
|
3082
|
+
<div class="mosaic-cell mc15"></div>
|
|
3083
|
+
<div class="mosaic-cell mc16"></div>
|
|
3084
|
+
<div class="mosaic-cell mc17"></div>
|
|
3085
|
+
<div class="mosaic-cell mc18"></div>
|
|
3086
|
+
<div class="mosaic-cell mc19"></div>
|
|
3087
|
+
<div class="mosaic-cell mc20"></div>
|
|
3088
|
+
<div class="mosaic-cell mc21"></div>
|
|
3089
|
+
<div class="mosaic-cell mc22"></div>
|
|
3090
|
+
<div class="mosaic-cell mc23"></div>
|
|
3091
|
+
<div class="mosaic-cell mc24"></div>
|
|
3092
|
+
</div>
|
|
3093
|
+
<div class="mosaic-overlay"></div>
|
|
3094
|
+
<div class="mosaic-label">MOSAIC</div>
|
|
3095
|
+
</div>
|
|
3096
|
+
<div class="card-info">
|
|
3097
|
+
<div class="card-num">23 — STAINED GLASS / MOSAIC</div>
|
|
3098
|
+
<div class="card-title">Stained Glass Mosaic</div>
|
|
3099
|
+
<div class="card-desc">Colorful cell grid with dark overlay. Cathedral window abstraction.</div>
|
|
3100
|
+
<div class="tags"><span class="tag-pill">colorful</span><span class="tag-pill">mosaic</span><span
|
|
3101
|
+
class="tag-pill">art</span></div>
|
|
3102
|
+
</div>
|
|
3103
|
+
</div>
|
|
3104
|
+
|
|
3105
|
+
<!-- 24 Liquid / Blob Morphing -->
|
|
3106
|
+
<div class="card">
|
|
3107
|
+
<div class="preview preview-liquid">
|
|
3108
|
+
<div class="liquid-blob lb1"></div>
|
|
3109
|
+
<div class="liquid-blob lb2"></div>
|
|
3110
|
+
<div class="liquid-blob lb3"></div>
|
|
3111
|
+
<div class="liquid-text">LIQUID</div>
|
|
3112
|
+
</div>
|
|
3113
|
+
<div class="card-info">
|
|
3114
|
+
<div class="card-num">24 — LIQUID / BLOB MORPHING</div>
|
|
3115
|
+
<div class="card-title">Liquid Blob Morphing</div>
|
|
3116
|
+
<div class="card-desc">Blurred organic blobs on dark gradient. Fluid, biotech feel with animated shapes.
|
|
3117
|
+
비주얼.</div>
|
|
3118
|
+
<div class="tags"><span class="tag-pill">blob</span><span class="tag-pill">fluid</span><span
|
|
3119
|
+
class="tag-pill">organic tech</span></div>
|
|
3120
|
+
</div>
|
|
3121
|
+
</div>
|
|
3122
|
+
|
|
3123
|
+
<!-- 25 Memphis / Pop Pattern -->
|
|
3124
|
+
<div class="card">
|
|
3125
|
+
<div class="preview preview-memphis">
|
|
3126
|
+
<div class="mem-tri mt1"></div>
|
|
3127
|
+
<div class="mem-tri mt2"></div>
|
|
3128
|
+
<div class="mem-tri mt3"></div>
|
|
3129
|
+
<div class="mem-circle mci1"></div>
|
|
3130
|
+
<div class="mem-circle mci2"></div>
|
|
3131
|
+
<div class="mem-zigzag"></div>
|
|
3132
|
+
<div class="mem-dot md1"></div>
|
|
3133
|
+
<div class="mem-dot md2"></div>
|
|
3134
|
+
<div class="mem-dot md3"></div>
|
|
3135
|
+
<div class="memphis-title">MEMPHIS</div>
|
|
3136
|
+
</div>
|
|
3137
|
+
<div class="card-info">
|
|
3138
|
+
<div class="card-num">25 — MEMPHIS POP PATTERN</div>
|
|
3139
|
+
<div class="card-title">Memphis Pop Pattern</div>
|
|
3140
|
+
<div class="card-desc">Triangles, circles, zigzags on warm cream. 80s geometric playfulness.
|
|
3141
|
+
</div>
|
|
3142
|
+
<div class="tags"><span class="tag-pill">80s design</span><span class="tag-pill">geometric</span><span
|
|
3143
|
+
class="tag-pill">playful</span></div>
|
|
3144
|
+
</div>
|
|
3145
|
+
</div>
|
|
3146
|
+
|
|
3147
|
+
<!-- 26 Dark Forest / Nature -->
|
|
3148
|
+
<div class="card">
|
|
3149
|
+
<div class="preview preview-forest">
|
|
3150
|
+
<div class="forest-mist"></div>
|
|
3151
|
+
<div class="forest-tree ftree2"></div>
|
|
3152
|
+
<div class="forest-tree ftree1"></div>
|
|
3153
|
+
<div class="forest-tree ftree3"></div>
|
|
3154
|
+
<div class="forest-moon"></div>
|
|
3155
|
+
<div class="forest-star fs1"></div>
|
|
3156
|
+
<div class="forest-star fs2"></div>
|
|
3157
|
+
<div class="forest-star fs3"></div>
|
|
3158
|
+
<div class="forest-line"></div>
|
|
3159
|
+
<div class="forest-text">Into the Wild</div>
|
|
3160
|
+
</div>
|
|
3161
|
+
<div class="card-info">
|
|
3162
|
+
<div class="card-num">26 — DARK FOREST NATURE</div>
|
|
3163
|
+
<div class="card-title">Dark Forest Nature</div>
|
|
3164
|
+
<div class="card-desc">Deep forest green gradient with tree silhouettes. Atmospheric and mysterious.
|
|
3165
|
+
</div>
|
|
3166
|
+
<div class="tags"><span class="tag-pill">dark nature</span><span class="tag-pill">atmosphere</span><span
|
|
3167
|
+
class="tag-pill">eco premium</span></div>
|
|
3168
|
+
</div>
|
|
3169
|
+
</div>
|
|
3170
|
+
|
|
3171
|
+
<!-- 27 Architectural Blueprint -->
|
|
3172
|
+
<div class="card">
|
|
3173
|
+
<div class="preview preview-blueprint">
|
|
3174
|
+
<div class="bp-grid"></div>
|
|
3175
|
+
<div class="bp-major"></div>
|
|
3176
|
+
<div class="bp-shape bps1"></div>
|
|
3177
|
+
<div class="bp-shape bps2"></div>
|
|
3178
|
+
<div class="bp-arrow"></div>
|
|
3179
|
+
<div class="bp-dim bd1">12.0</div>
|
|
3180
|
+
<div class="bp-dim bd2">8.5</div>
|
|
3181
|
+
<div class="bp-dim bd3">PLAN A</div>
|
|
3182
|
+
<div class="bp-stamp">ARCH<br>PLAN<br>2025</div>
|
|
3183
|
+
<div class="bp-title">BLUEPRINT · SECTION A</div>
|
|
3184
|
+
</div>
|
|
3185
|
+
<div class="card-info">
|
|
3186
|
+
<div class="card-num">27 — ARCHITECTURAL BLUEPRINT</div>
|
|
3187
|
+
<div class="card-title">Architectural Blueprint</div>
|
|
3188
|
+
<div class="card-desc">Blueprint grid on deep blue with white technical drawings. Precise, technical.
|
|
3189
|
+
</div>
|
|
3190
|
+
<div class="tags"><span class="tag-pill">technical</span><span class="tag-pill">blueprint</span><span
|
|
3191
|
+
class="tag-pill">architecture</span></div>
|
|
3192
|
+
</div>
|
|
3193
|
+
</div>
|
|
3194
|
+
|
|
3195
|
+
<!-- 28 Maximalist Collage -->
|
|
3196
|
+
<div class="card">
|
|
3197
|
+
<div class="preview preview-collage">
|
|
3198
|
+
<div class="col-stripe"></div>
|
|
3199
|
+
<div class="col-block cb1"></div>
|
|
3200
|
+
<div class="col-block cb2"></div>
|
|
3201
|
+
<div class="col-block cb3"></div>
|
|
3202
|
+
<div class="col-text1">BOLD<br>NOW</div>
|
|
3203
|
+
<div class="col-text2">VISION</div>
|
|
3204
|
+
<div class="col-circle"></div>
|
|
3205
|
+
<div class="col-num">08</div>
|
|
3206
|
+
</div>
|
|
3207
|
+
<div class="card-info">
|
|
3208
|
+
<div class="card-num">28 — MAXIMALIST COLLAGE</div>
|
|
3209
|
+
<div class="card-title">Maximalist Collage</div>
|
|
3210
|
+
<div class="card-desc">Overlapping rotated color blocks and mixed typography. Bold layered energy.
|
|
3211
|
+
</div>
|
|
3212
|
+
<div class="tags"><span class="tag-pill">maximalist</span><span class="tag-pill">collage</span><span
|
|
3213
|
+
class="tag-pill">bold layering</span></div>
|
|
3214
|
+
</div>
|
|
3215
|
+
</div>
|
|
3216
|
+
|
|
3217
|
+
<!-- 29 SciFi Holographic -->
|
|
3218
|
+
<div class="card">
|
|
3219
|
+
<div class="preview preview-holo">
|
|
3220
|
+
<div class="holo-ring hr1"></div>
|
|
3221
|
+
<div class="holo-ring hr2"></div>
|
|
3222
|
+
<div class="holo-ring hr3"></div>
|
|
3223
|
+
<div class="holo-scan"></div>
|
|
3224
|
+
<div class="holo-bar hb1"></div>
|
|
3225
|
+
<div class="holo-bar hb2"></div>
|
|
3226
|
+
<div class="holo-dot"></div>
|
|
3227
|
+
<div class="holo-text ht1">SYS::ACTIVE</div>
|
|
3228
|
+
<div class="holo-text ht2">SCAN · 0.002ms</div>
|
|
3229
|
+
</div>
|
|
3230
|
+
<div class="card-info">
|
|
3231
|
+
<div class="card-num">29 — SCIFI HOLOGRAPHIC</div>
|
|
3232
|
+
<div class="card-title">SciFi Holographic Data</div>
|
|
3233
|
+
<div class="card-desc">Concentric rings and scan lines. Hologram HUD interface. Cyan on black.</div>
|
|
3234
|
+
<div class="tags"><span class="tag-pill">hologram</span><span class="tag-pill">HUD</span><span
|
|
3235
|
+
class="tag-pill">sci-fi data</span></div>
|
|
3236
|
+
</div>
|
|
3237
|
+
</div>
|
|
3238
|
+
|
|
3239
|
+
<!-- 30 Risograph / Print Error -->
|
|
3240
|
+
<div class="card">
|
|
3241
|
+
<div class="preview preview-riso">
|
|
3242
|
+
<div class="riso-circle-1"></div>
|
|
3243
|
+
<div class="riso-circle-2"></div>
|
|
3244
|
+
<div class="riso-circle-3"></div>
|
|
3245
|
+
<div class="riso-offset">RISO</div>
|
|
3246
|
+
<div class="riso-text">RISO</div>
|
|
3247
|
+
<div class="riso-label">CMYK · OFFSET · PRINT</div>
|
|
3248
|
+
</div>
|
|
3249
|
+
<div class="card-info">
|
|
3250
|
+
<div class="card-num">30 — RISOGRAPH / PRINT ERROR</div>
|
|
3251
|
+
<div class="card-title">Risograph Print</div>
|
|
3252
|
+
<div class="card-desc">CMYK color overlap with offset ghost text. Analog print aesthetic.
|
|
3253
|
+
독특한 개성.</div>
|
|
3254
|
+
<div class="tags"><span class="tag-pill">riso print</span><span class="tag-pill">CMYK</span><span
|
|
3255
|
+
class="tag-pill">indie art</span></div>
|
|
3256
|
+
</div>
|
|
3257
|
+
</div>
|
|
3258
|
+
|
|
3259
|
+
<!-- 31 Executive Minimal -->
|
|
3260
|
+
<div class="card">
|
|
3261
|
+
<div class="preview preview-executive">
|
|
3262
|
+
<div class="exec-block"><span class="exec-block-text">KEYNOTE</span></div>
|
|
3263
|
+
<div class="exec-title">Executive<br>Minimal</div>
|
|
3264
|
+
<div class="exec-line"></div>
|
|
3265
|
+
<div class="exec-sub">REFINED · BUSINESS</div>
|
|
3266
|
+
</div>
|
|
3267
|
+
<div class="card-info">
|
|
3268
|
+
<div class="card-num">31 — EXECUTIVE MINIMAL</div>
|
|
3269
|
+
<div class="card-title">Executive Minimal</div>
|
|
3270
|
+
<div class="card-desc">Warm white background with black accent blocks. Content-first business style.</div>
|
|
3271
|
+
<div class="tags"><span class="tag-pill">business</span><span class="tag-pill">warm white</span><span class="tag-pill">black accent</span></div>
|
|
3272
|
+
</div>
|
|
3273
|
+
</div>
|
|
3274
|
+
|
|
3275
|
+
<!-- 32 Sage Professional -->
|
|
3276
|
+
<div class="card">
|
|
3277
|
+
<div class="preview preview-sage">
|
|
3278
|
+
<div class="sage-card sage-c1"></div>
|
|
3279
|
+
<div class="sage-card sage-c2"></div>
|
|
3280
|
+
<div class="sage-title">Sage</div>
|
|
3281
|
+
<div class="sage-sub">CALM · TRUST</div>
|
|
3282
|
+
<div class="sage-dot"></div>
|
|
3283
|
+
</div>
|
|
3284
|
+
<div class="card-info">
|
|
3285
|
+
<div class="card-num">32 — SAGE PROFESSIONAL</div>
|
|
3286
|
+
<div class="card-title">Sage Professional</div>
|
|
3287
|
+
<div class="card-desc">Sage green palette with light cards layered for calm, trustworthy presence.</div>
|
|
3288
|
+
<div class="tags"><span class="tag-pill">sage green</span><span class="tag-pill">calm</span><span class="tag-pill">layered</span></div>
|
|
3289
|
+
</div>
|
|
3290
|
+
</div>
|
|
3291
|
+
|
|
3292
|
+
<!-- 33 Modern Dark -->
|
|
3293
|
+
<div class="card">
|
|
3294
|
+
<div class="preview preview-modern-dark">
|
|
3295
|
+
<div class="md-surface md-s1"></div>
|
|
3296
|
+
<div class="md-surface md-s2"></div>
|
|
3297
|
+
<div class="md-title">DARK</div>
|
|
3298
|
+
<div class="md-sub">PURE · MONO</div>
|
|
3299
|
+
<div class="md-accent"></div>
|
|
3300
|
+
</div>
|
|
3301
|
+
<div class="card-info">
|
|
3302
|
+
<div class="card-num">33 — MODERN DARK</div>
|
|
3303
|
+
<div class="card-title">Modern Dark</div>
|
|
3304
|
+
<div class="card-desc">Pure dark background with subtle surface layering. Monochrome, zero color accents.</div>
|
|
3305
|
+
<div class="tags"><span class="tag-pill">pure dark</span><span class="tag-pill">monochrome</span><span class="tag-pill">tech</span></div>
|
|
3306
|
+
</div>
|
|
3307
|
+
</div>
|
|
3308
|
+
|
|
3309
|
+
<!-- 34 Corporate Blue -->
|
|
3310
|
+
<div class="card">
|
|
3311
|
+
<div class="preview preview-corporate">
|
|
3312
|
+
<div class="corp-bar"></div>
|
|
3313
|
+
<div class="corp-title">Corporate</div>
|
|
3314
|
+
<div class="corp-sub">Traditional business presentation</div>
|
|
3315
|
+
<div class="corp-block">
|
|
3316
|
+
<div class="corp-dot"></div>
|
|
3317
|
+
<div>
|
|
3318
|
+
<div class="corp-line corp-l1"></div>
|
|
3319
|
+
<div class="corp-line corp-l2"></div>
|
|
3320
|
+
</div>
|
|
3321
|
+
</div>
|
|
3322
|
+
</div>
|
|
3323
|
+
<div class="card-info">
|
|
3324
|
+
<div class="card-num">34 — CORPORATE BLUE</div>
|
|
3325
|
+
<div class="card-title">Corporate Blue</div>
|
|
3326
|
+
<div class="card-desc">White base with blue accent. Navy text, structured grid. Classic enterprise identity.</div>
|
|
3327
|
+
<div class="tags"><span class="tag-pill">blue accent</span><span class="tag-pill">enterprise</span><span class="tag-pill">classic</span></div>
|
|
3328
|
+
</div>
|
|
3329
|
+
</div>
|
|
3330
|
+
|
|
3331
|
+
<!-- 35 Warm Neutral -->
|
|
3332
|
+
<div class="card">
|
|
3333
|
+
<div class="preview preview-warm">
|
|
3334
|
+
<div class="warm-panel warm-p1"></div>
|
|
3335
|
+
<div class="warm-panel warm-p2"></div>
|
|
3336
|
+
<div class="warm-title">Warm</div>
|
|
3337
|
+
<div class="warm-accent"></div>
|
|
3338
|
+
<div class="warm-sub">CREAM · TERRA</div>
|
|
3339
|
+
</div>
|
|
3340
|
+
<div class="card-info">
|
|
3341
|
+
<div class="card-num">35 — WARM NEUTRAL</div>
|
|
3342
|
+
<div class="card-title">Warm Neutral</div>
|
|
3343
|
+
<div class="card-desc">Cream white with terracotta accent. Dark brown text. Warm and approachable.</div>
|
|
3344
|
+
<div class="tags"><span class="tag-pill">cream</span><span class="tag-pill">terracotta</span><span class="tag-pill">approachable</span></div>
|
|
3345
|
+
</div>
|
|
3346
|
+
</div>
|
|
3347
|
+
|
|
3348
|
+
<!-- DD01-DD60 Design Diversity PPT Packs -->
|
|
3349
|
+
|
|
3350
|
+
<!-- DD01 ppt-consulting-precision-grid -->
|
|
3351
|
+
<div class="card">
|
|
3352
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3353
|
+
<div style="position:absolute; inset:18px; border:1px solid #0B5FFF;"></div>
|
|
3354
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F4F5F7; border-left:8px solid #0B5FFF;"></div>
|
|
3355
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3356
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#0B5FFF; margin-bottom:8px;">ppt-consulting-precision-grid</p>
|
|
3357
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">컨설팅 정밀그리드</p>
|
|
3358
|
+
</div>
|
|
3359
|
+
</div>
|
|
3360
|
+
<div class="card-info">
|
|
3361
|
+
<div class="card-num">DD01 — DESIGN-DIVERSITY</div>
|
|
3362
|
+
<div class="card-title">컨설팅 정밀그리드</div>
|
|
3363
|
+
<div class="card-desc">12열 모듈러 그리드 위 무채색 본문과 단일 강조색의 헤어라인 보더 데이터 박스, 액션 타이틀 헤더의 컨설팅 보고서 정형.</div>
|
|
3364
|
+
<div class="tags"><span class="tag-pill">mono · minimal-sans · strict-grid · dense · none</span></div>
|
|
3365
|
+
</div>
|
|
3366
|
+
</div>
|
|
3367
|
+
|
|
3368
|
+
<!-- DD02 ppt-keynote-minimal-fullbleed -->
|
|
3369
|
+
<div class="card">
|
|
3370
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3371
|
+
<div style="position:absolute; inset:18px; border:1px solid #0071E3;"></div>
|
|
3372
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #0071E3;"></div>
|
|
3373
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3374
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#0071E3; margin-bottom:8px;">ppt-keynote-minimal-fullbleed</p>
|
|
3375
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">Keynote 미니멀 풀블리드</p>
|
|
3376
|
+
</div>
|
|
3377
|
+
</div>
|
|
3378
|
+
<div class="card-info">
|
|
3379
|
+
<div class="card-num">DD02 — DESIGN-DIVERSITY</div>
|
|
3380
|
+
<div class="card-title">Keynote 미니멀 풀블리드</div>
|
|
3381
|
+
<div class="card-desc">풀블리드 사진 또는 단색 배경에 한 줄 문장만, 압도적 여백의 한 장 한 메시지 극단적 절제.</div>
|
|
3382
|
+
<div class="tags"><span class="tag-pill">mono · minimal-sans · full-bleed · airy · subtle</span></div>
|
|
3383
|
+
</div>
|
|
3384
|
+
</div>
|
|
3385
|
+
|
|
3386
|
+
<!-- DD03 ppt-editorial-magazine -->
|
|
3387
|
+
<div class="card">
|
|
3388
|
+
<div class="preview" style="background: #FBFAF7; color: #1C1B19; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3389
|
+
<div style="position:absolute; inset:18px; border:1px solid #A8312A;"></div>
|
|
3390
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FBFAF7; border-left:8px solid #A8312A;"></div>
|
|
3391
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3392
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#A8312A; margin-bottom:8px;">ppt-editorial-magazine</p>
|
|
3393
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1C1B19;">에디토리얼 매거진</p>
|
|
3394
|
+
</div>
|
|
3395
|
+
</div>
|
|
3396
|
+
<div class="card-info">
|
|
3397
|
+
<div class="card-num">DD03 — DESIGN-DIVERSITY</div>
|
|
3398
|
+
<div class="card-title">에디토리얼 매거진</div>
|
|
3399
|
+
<div class="card-desc">스프레드 단위 다단 칼럼 그리드, 큰 세리프 헤드라인과 드롭캡, 잡지 활자 부속의 출판물 위계.</div>
|
|
3400
|
+
<div class="tags"><span class="tag-pill">mono · serif-editorial · asymmetric · balanced · none</span></div>
|
|
3401
|
+
</div>
|
|
3402
|
+
</div>
|
|
3403
|
+
|
|
3404
|
+
<!-- DD04 ppt-neo-brutalism -->
|
|
3405
|
+
<div class="card">
|
|
3406
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3407
|
+
<div style="position:absolute; inset:18px; border:1px solid #FF5A36;"></div>
|
|
3408
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #FF5A36;"></div>
|
|
3409
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3410
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FF5A36; margin-bottom:8px;">ppt-neo-brutalism</p>
|
|
3411
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">네오브루탈리즘</p>
|
|
3412
|
+
</div>
|
|
3413
|
+
</div>
|
|
3414
|
+
<div class="card-info">
|
|
3415
|
+
<div class="card-num">DD04 — DESIGN-DIVERSITY</div>
|
|
3416
|
+
<div class="card-title">네오브루탈리즘</div>
|
|
3417
|
+
<div class="card-desc">두꺼운 검정 보더와 하드 섀도, 원색 블록의 거친 충돌, 거대 굵은 산세리프의 의도적 비대칭.</div>
|
|
3418
|
+
<div class="tags"><span class="tag-pill">vivid-primary · heavy-display · block-grid · dense · snappy</span></div>
|
|
3419
|
+
</div>
|
|
3420
|
+
</div>
|
|
3421
|
+
|
|
3422
|
+
<!-- DD05 ppt-glassmorphism -->
|
|
3423
|
+
<div class="card">
|
|
3424
|
+
<div class="preview" style="background: #111118; color: #1A1A2E; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3425
|
+
<div style="position:absolute; inset:18px; border:1px solid #FFFFFF;"></div>
|
|
3426
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #FFFFFF;"></div>
|
|
3427
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3428
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FFFFFF; margin-bottom:8px;">ppt-glassmorphism</p>
|
|
3429
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1A1A2E;">글래스모피즘</p>
|
|
3430
|
+
</div>
|
|
3431
|
+
</div>
|
|
3432
|
+
<div class="card-info">
|
|
3433
|
+
<div class="card-num">DD05 — DESIGN-DIVERSITY</div>
|
|
3434
|
+
<div class="card-title">글래스모피즘</div>
|
|
3435
|
+
<div class="card-desc">컬러풀 그라디언트 배경 위 부유하는 반투명 프로스티드 글래스 패널, 하이라이트 보더의 깊이감.</div>
|
|
3436
|
+
<div class="tags"><span class="tag-pill">gradient · minimal-sans · centered · airy · subtle</span></div>
|
|
3437
|
+
</div>
|
|
3438
|
+
</div>
|
|
3439
|
+
|
|
3440
|
+
<!-- DD06 ppt-korea-policy-navy -->
|
|
3441
|
+
<div class="card">
|
|
3442
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3443
|
+
<div style="position:absolute; inset:18px; border:1px solid #1B66C9;"></div>
|
|
3444
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#E8F1FB; border-left:8px solid #1B66C9;"></div>
|
|
3445
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3446
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#1B66C9; margin-bottom:8px;">ppt-korea-policy-navy</p>
|
|
3447
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">한국 정책보고서 네이비</p>
|
|
3448
|
+
</div>
|
|
3449
|
+
</div>
|
|
3450
|
+
<div class="card-info">
|
|
3451
|
+
<div class="card-num">DD06 — DESIGN-DIVERSITY</div>
|
|
3452
|
+
<div class="card-title">한국 정책보고서 네이비</div>
|
|
3453
|
+
<div class="card-desc">네이비 헤더바와 굵은 한국어 고딕 타이틀, 좌측 번호 섹션, 정렬된 박스 본문의 한국 공공 보고서 정형.</div>
|
|
3454
|
+
<div class="tags"><span class="tag-pill">dark · minimal-sans · strict-grid · balanced · none</span></div>
|
|
3455
|
+
</div>
|
|
3456
|
+
</div>
|
|
3457
|
+
|
|
3458
|
+
<!-- DD07 ppt-dark-tech -->
|
|
3459
|
+
<div class="card">
|
|
3460
|
+
<div class="preview" style="background: #0C0D10; color: #E4E6EB; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3461
|
+
<div style="position:absolute; inset:18px; border:1px solid #3DF5E0;"></div>
|
|
3462
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#16181D; border-left:8px solid #3DF5E0;"></div>
|
|
3463
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3464
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#3DF5E0; margin-bottom:8px;">ppt-dark-tech</p>
|
|
3465
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#E4E6EB;">다크모드 테크</p>
|
|
3466
|
+
</div>
|
|
3467
|
+
</div>
|
|
3468
|
+
<div class="card-info">
|
|
3469
|
+
<div class="card-num">DD07 — DESIGN-DIVERSITY</div>
|
|
3470
|
+
<div class="card-title">다크모드 테크</div>
|
|
3471
|
+
<div class="card-desc">차콜 배경에 네온 시안·바이올렛 강조와 발광 라인, 모노스페이스 라벨의 사이버틱한 테크 컨퍼런스 톤.</div>
|
|
3472
|
+
<div class="tags"><span class="tag-pill">dark · mono · asymmetric · balanced · snappy</span></div>
|
|
3473
|
+
</div>
|
|
3474
|
+
</div>
|
|
3475
|
+
|
|
3476
|
+
<!-- DD08 ppt-hand-drawn-sketch -->
|
|
3477
|
+
<div class="card">
|
|
3478
|
+
<div class="preview" style="background: #F4ECDC; color: #2B2724; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3479
|
+
<div style="position:absolute; inset:18px; border:1px solid #E8654A;"></div>
|
|
3480
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F4ECDC; border-left:8px solid #E8654A;"></div>
|
|
3481
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3482
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#E8654A; margin-bottom:8px;">ppt-hand-drawn-sketch</p>
|
|
3483
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#2B2724;">핸드드로운 스케치</p>
|
|
3484
|
+
</div>
|
|
3485
|
+
</div>
|
|
3486
|
+
<div class="card-info">
|
|
3487
|
+
<div class="card-num">DD08 — DESIGN-DIVERSITY</div>
|
|
3488
|
+
<div class="card-title">핸드드로운 스케치</div>
|
|
3489
|
+
<div class="card-desc">손그림 테두리와 거친 펜 스트로크 화살표·말풍선, 크림색 종이 질감의 비격식 워크숍 톤.</div>
|
|
3490
|
+
<div class="tags"><span class="tag-pill">earth · mixed · asymmetric · balanced · playful</span></div>
|
|
3491
|
+
</div>
|
|
3492
|
+
</div>
|
|
3493
|
+
|
|
3494
|
+
<!-- DD09 ppt-data-infographic-heavy -->
|
|
3495
|
+
<div class="card">
|
|
3496
|
+
<div class="preview" style="background: #F7F8FA; color: #1E2229; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3497
|
+
<div style="position:absolute; inset:18px; border:1px solid #2563EB;"></div>
|
|
3498
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #2563EB;"></div>
|
|
3499
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3500
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#2563EB; margin-bottom:8px;">ppt-data-infographic-heavy</p>
|
|
3501
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1E2229;">데이터 인포그래픽 헤비</p>
|
|
3502
|
+
</div>
|
|
3503
|
+
</div>
|
|
3504
|
+
<div class="card-info">
|
|
3505
|
+
<div class="card-num">DD09 — DESIGN-DIVERSITY</div>
|
|
3506
|
+
<div class="card-title">데이터 인포그래픽 헤비</div>
|
|
3507
|
+
<div class="card-desc">차트·KPI 카드·아이콘 통계가 빽빽한 대시보드형 레이아웃, F자 동선의 정보 밀도가 정체성.</div>
|
|
3508
|
+
<div class="tags"><span class="tag-pill">vivid-primary · minimal-sans · block-grid · dense · subtle</span></div>
|
|
3509
|
+
</div>
|
|
3510
|
+
</div>
|
|
3511
|
+
|
|
3512
|
+
<!-- DD10 ppt-monochrome-risk -->
|
|
3513
|
+
<div class="card">
|
|
3514
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3515
|
+
<div style="position:absolute; inset:18px; border:1px solid #0A0A0A;"></div>
|
|
3516
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#E6E6E6; border-left:8px solid #0A0A0A;"></div>
|
|
3517
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3518
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#0A0A0A; margin-bottom:8px;">ppt-monochrome-risk</p>
|
|
3519
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">모노크롬 리스크</p>
|
|
3520
|
+
</div>
|
|
3521
|
+
</div>
|
|
3522
|
+
<div class="card-info">
|
|
3523
|
+
<div class="card-num">DD10 — DESIGN-DIVERSITY</div>
|
|
3524
|
+
<div class="card-title">모노크롬 리스크</div>
|
|
3525
|
+
<div class="card-desc">순수 흑백 단계만, 굵은 경고 헤드라인과 두꺼운 룰 라인 구획의 의도적으로 엄숙한 리스크 보고 톤.</div>
|
|
3526
|
+
<div class="tags"><span class="tag-pill">mono · heavy-display · strict-grid · balanced · none</span></div>
|
|
3527
|
+
</div>
|
|
3528
|
+
</div>
|
|
3529
|
+
|
|
3530
|
+
<!-- DD11 ppt-memphis-retro-90s -->
|
|
3531
|
+
<div class="card">
|
|
3532
|
+
<div class="preview" style="background: #F4ECD8; color: #1A1A1A; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3533
|
+
<div style="position:absolute; inset:18px; border:1px solid #FF3B7F;"></div>
|
|
3534
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1A1A1A; border-left:8px solid #FF3B7F;"></div>
|
|
3535
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3536
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FF3B7F; margin-bottom:8px;">ppt-memphis-retro-90s</p>
|
|
3537
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1A1A1A;">90s 멤피스 레트로</p>
|
|
3538
|
+
</div>
|
|
3539
|
+
</div>
|
|
3540
|
+
<div class="card-info">
|
|
3541
|
+
<div class="card-num">DD11 — DESIGN-DIVERSITY</div>
|
|
3542
|
+
<div class="card-title">90s 멤피스 레트로</div>
|
|
3543
|
+
<div class="card-desc">지그재그·도트·테라조 패턴과 비정형 기하 도형, 원색 충돌의 80~90s 포스트모던 무질서.</div>
|
|
3544
|
+
<div class="tags"><span class="tag-pill">vivid-primary · heavy-display · asymmetric · dense · playful</span></div>
|
|
3545
|
+
</div>
|
|
3546
|
+
</div>
|
|
3547
|
+
|
|
3548
|
+
<!-- DD12 ppt-minimal-mono-note -->
|
|
3549
|
+
<div class="card">
|
|
3550
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3551
|
+
<div style="position:absolute; inset:18px; border:1px solid #FFFFFF;"></div>
|
|
3552
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #FFFFFF;"></div>
|
|
3553
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3554
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FFFFFF; margin-bottom:8px;">ppt-minimal-mono-note</p>
|
|
3555
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">미니멀 모노 노트</p>
|
|
3556
|
+
</div>
|
|
3557
|
+
</div>
|
|
3558
|
+
<div class="card-info">
|
|
3559
|
+
<div class="card-num">DD12 — DESIGN-DIVERSITY</div>
|
|
3560
|
+
<div class="card-title">미니멀 모노 노트</div>
|
|
3561
|
+
<div class="card-desc">넓은 여백의 화이트 지면에 모노스페이스 폰트만, 잉크 블랙 하나의 정적인 타자기 노트 미감.</div>
|
|
3562
|
+
<div class="tags"><span class="tag-pill">mono · mono · centered · airy · none</span></div>
|
|
3563
|
+
</div>
|
|
3564
|
+
</div>
|
|
3565
|
+
|
|
3566
|
+
<!-- DD13 ppt-botanical-organic -->
|
|
3567
|
+
<div class="card">
|
|
3568
|
+
<div class="preview" style="background: #F2EAD9; color: #3A352C; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3569
|
+
<div style="position:absolute; inset:18px; border:1px solid #B5654A;"></div>
|
|
3570
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#E5D9C3; border-left:8px solid #B5654A;"></div>
|
|
3571
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3572
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#B5654A; margin-bottom:8px;">ppt-botanical-organic</p>
|
|
3573
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#3A352C;">보태니컬 오가닉</p>
|
|
3574
|
+
</div>
|
|
3575
|
+
</div>
|
|
3576
|
+
<div class="card-info">
|
|
3577
|
+
<div class="card-num">DD13 — DESIGN-DIVERSITY</div>
|
|
3578
|
+
<div class="card-title">보태니컬 오가닉</div>
|
|
3579
|
+
<div class="card-desc">베이지·테라코타·모스그린 어스 톤과 손그림 식물 일러스트, 유기적 곡선의 자연·웰니스 톤.</div>
|
|
3580
|
+
<div class="tags"><span class="tag-pill">earth · serif-editorial · asymmetric · airy · subtle</span></div>
|
|
3581
|
+
</div>
|
|
3582
|
+
</div>
|
|
3583
|
+
|
|
3584
|
+
<!-- DD14 ppt-vivid-gradient-future -->
|
|
3585
|
+
<div class="card">
|
|
3586
|
+
<div class="preview" style="background: #111118; color: #FFFFFF; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3587
|
+
<div style="position:absolute; inset:18px; border:1px solid #7DF9FF;"></div>
|
|
3588
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #7DF9FF;"></div>
|
|
3589
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3590
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#7DF9FF; margin-bottom:8px;">ppt-vivid-gradient-future</p>
|
|
3591
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#FFFFFF;">비비드 그라디언트 퓨처</p>
|
|
3592
|
+
</div>
|
|
3593
|
+
</div>
|
|
3594
|
+
<div class="card-info">
|
|
3595
|
+
<div class="card-num">DD14 — DESIGN-DIVERSITY</div>
|
|
3596
|
+
<div class="card-title">비비드 그라디언트 퓨처</div>
|
|
3597
|
+
<div class="card-desc">채도 높은 다색 메시 그라디언트가 배경을 채우고 발광 곡선·추상 3D가 부유하는 미래 비전 톤.</div>
|
|
3598
|
+
<div class="tags"><span class="tag-pill">gradient · heavy-display · full-bleed · balanced · snappy</span></div>
|
|
3599
|
+
</div>
|
|
3600
|
+
</div>
|
|
3601
|
+
|
|
3602
|
+
<!-- DD15 ppt-print-first-newspaper -->
|
|
3603
|
+
<div class="card">
|
|
3604
|
+
<div class="preview" style="background: #F4F1E8; color: #1C1B17; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3605
|
+
<div style="position:absolute; inset:18px; border:1px solid #A8231B;"></div>
|
|
3606
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F4F1E8; border-left:8px solid #A8231B;"></div>
|
|
3607
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3608
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#A8231B; margin-bottom:8px;">ppt-print-first-newspaper</p>
|
|
3609
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1C1B17;">프린트-퍼스트 뉴스페이퍼</p>
|
|
3610
|
+
</div>
|
|
3611
|
+
</div>
|
|
3612
|
+
<div class="card-info">
|
|
3613
|
+
<div class="card-num">DD15 — DESIGN-DIVERSITY</div>
|
|
3614
|
+
<div class="card-title">프린트-퍼스트 뉴스페이퍼</div>
|
|
3615
|
+
<div class="card-desc">다단 칼럼과 굵은 세리프 마스트헤드, 가는 룰 라인 구획의 뉴스프린트 신문 지면 정형.</div>
|
|
3616
|
+
<div class="tags"><span class="tag-pill">mono · serif-editorial · block-grid · dense · none</span></div>
|
|
3617
|
+
</div>
|
|
3618
|
+
</div>
|
|
3619
|
+
|
|
3620
|
+
<!-- DD16 ppt-swiss-editorial-bold -->
|
|
3621
|
+
<div class="card">
|
|
3622
|
+
<div class="preview" style="background: #F2F0EB; color: #111111; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3623
|
+
<div style="position:absolute; inset:18px; border:1px solid #FF4A1C;"></div>
|
|
3624
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#111111; border-left:8px solid #FF4A1C;"></div>
|
|
3625
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3626
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FF4A1C; margin-bottom:8px;">ppt-swiss-editorial-bold</p>
|
|
3627
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111111;">스위스 에디토리얼 볼드</p>
|
|
3628
|
+
</div>
|
|
3629
|
+
</div>
|
|
3630
|
+
<div class="card-info">
|
|
3631
|
+
<div class="card-num">DD16 — DESIGN-DIVERSITY</div>
|
|
3632
|
+
<div class="card-title">스위스 에디토리얼 볼드</div>
|
|
3633
|
+
<div class="card-desc">정밀 그리드 위에 거대한 압축 디스플레이 활자를 일러스트처럼 쓰는 의도된 혼돈의 편집 디자인.</div>
|
|
3634
|
+
<div class="tags"><span class="tag-pill">vivid-primary · heavy-display · strict-grid · balanced · snappy</span></div>
|
|
3635
|
+
</div>
|
|
3636
|
+
</div>
|
|
3637
|
+
|
|
3638
|
+
<!-- DD17 ppt-bauhaus-geometric -->
|
|
3639
|
+
<div class="card">
|
|
3640
|
+
<div class="preview" style="background: #F0EDE4; color: #1A1A1A; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3641
|
+
<div style="position:absolute; inset:18px; border:1px solid #D62828;"></div>
|
|
3642
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #D62828;"></div>
|
|
3643
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3644
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#D62828; margin-bottom:8px;">ppt-bauhaus-geometric</p>
|
|
3645
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1A1A1A;">바우하우스 지오메트릭</p>
|
|
3646
|
+
</div>
|
|
3647
|
+
</div>
|
|
3648
|
+
<div class="card-info">
|
|
3649
|
+
<div class="card-num">DD17 — DESIGN-DIVERSITY</div>
|
|
3650
|
+
<div class="card-title">바우하우스 지오메트릭</div>
|
|
3651
|
+
<div class="card-desc">원·삼각형·사각형 기본 도형과 빨강·노랑·파랑 삼원색, 비대칭 균형의 기능주의 기하 구성.</div>
|
|
3652
|
+
<div class="tags"><span class="tag-pill">vivid-primary · heavy-display · asymmetric · balanced · none</span></div>
|
|
3653
|
+
</div>
|
|
3654
|
+
</div>
|
|
3655
|
+
|
|
3656
|
+
<!-- DD18 ppt-expressive-material -->
|
|
3657
|
+
<div class="card">
|
|
3658
|
+
<div class="preview" style="background: #FEF7FF; color: #1D1B20; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3659
|
+
<div style="position:absolute; inset:18px; border:1px solid #6750A4;"></div>
|
|
3660
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F3EDF7; border-left:8px solid #6750A4;"></div>
|
|
3661
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3662
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#6750A4; margin-bottom:8px;">ppt-expressive-material</p>
|
|
3663
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1D1B20;">익스프레시브 머티리얼</p>
|
|
3664
|
+
</div>
|
|
3665
|
+
</div>
|
|
3666
|
+
<div class="card-info">
|
|
3667
|
+
<div class="card-num">DD18 — DESIGN-DIVERSITY</div>
|
|
3668
|
+
<div class="card-title">익스프레시브 머티리얼</div>
|
|
3669
|
+
<div class="card-desc">Material 3 Expressive의 대담한 색과 가변 폰트 변주, 큰 둥근 형태와 명랑한 모션의 5단계 타입 스케일.</div>
|
|
3670
|
+
<div class="tags"><span class="tag-pill">vivid-primary · mixed · block-grid · balanced · playful</span></div>
|
|
3671
|
+
</div>
|
|
3672
|
+
</div>
|
|
3673
|
+
|
|
3674
|
+
<!-- DD19 ppt-luxury-editorial-serif -->
|
|
3675
|
+
<div class="card">
|
|
3676
|
+
<div class="preview" style="background: #FAF8F3; color: #1A1814; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3677
|
+
<div style="position:absolute; inset:18px; border:1px solid #A8884E;"></div>
|
|
3678
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FAF8F3; border-left:8px solid #A8884E;"></div>
|
|
3679
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3680
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#A8884E; margin-bottom:8px;">ppt-luxury-editorial-serif</p>
|
|
3681
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1A1814;">럭셔리 에디토리얼 세리프</p>
|
|
3682
|
+
</div>
|
|
3683
|
+
</div>
|
|
3684
|
+
<div class="card-info">
|
|
3685
|
+
<div class="card-num">DD19 — DESIGN-DIVERSITY</div>
|
|
3686
|
+
<div class="card-title">럭셔리 에디토리얼 세리프</div>
|
|
3687
|
+
<div class="card-desc">넓은 여백의 오프화이트 지면에 가는 하이콘트라스트 디드로 세리프, 절제된 골드 한 점의 우아한 톤.</div>
|
|
3688
|
+
<div class="tags"><span class="tag-pill">mono · serif-editorial · centered · airy · subtle</span></div>
|
|
3689
|
+
</div>
|
|
3690
|
+
</div>
|
|
3691
|
+
|
|
3692
|
+
<!-- DD20 ppt-startup-pitch-colorful -->
|
|
3693
|
+
<div class="card">
|
|
3694
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3695
|
+
<div style="position:absolute; inset:18px; border:1px solid #5B5BFF;"></div>
|
|
3696
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F4F6FF; border-left:8px solid #5B5BFF;"></div>
|
|
3697
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3698
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#5B5BFF; margin-bottom:8px;">ppt-startup-pitch-colorful</p>
|
|
3699
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">스타트업 피치 컬러풀</p>
|
|
3700
|
+
</div>
|
|
3701
|
+
</div>
|
|
3702
|
+
<div class="card-info">
|
|
3703
|
+
<div class="card-num">DD20 — DESIGN-DIVERSITY</div>
|
|
3704
|
+
<div class="card-title">스타트업 피치 컬러풀</div>
|
|
3705
|
+
<div class="card-desc">채도 높은 4~5색 팔레트와 둥근 키워드 배지, 거대 숫자 메트릭이 지배하는 데모데이 에너지.</div>
|
|
3706
|
+
<div class="tags"><span class="tag-pill">vivid-primary · mixed · centered · balanced · playful</span></div>
|
|
3707
|
+
</div>
|
|
3708
|
+
</div>
|
|
3709
|
+
|
|
3710
|
+
<!-- DD21 ppt-precision-fintech-deck -->
|
|
3711
|
+
<div class="card">
|
|
3712
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3713
|
+
<div style="position:absolute; inset:18px; border:1px solid #5A55E0;"></div>
|
|
3714
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F6F9FC; border-left:8px solid #5A55E0;"></div>
|
|
3715
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3716
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#5A55E0; margin-bottom:8px;">ppt-precision-fintech-deck</p>
|
|
3717
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">Precision Fintech Deck</p>
|
|
3718
|
+
</div>
|
|
3719
|
+
</div>
|
|
3720
|
+
<div class="card-info">
|
|
3721
|
+
<div class="card-num">DD21 — DESIGN-DIVERSITY</div>
|
|
3722
|
+
<div class="card-title">Precision Fintech Deck</div>
|
|
3723
|
+
<div class="card-desc">푸른 회색 면 위 단일 인디고-바이올렛 강조색이 CTA·핵심 수치·차트를 모두 책임지는 절제된 핀테크 덱. 헤어라인 그리드와 면적 그래프의 에디토리얼 밀도.</div>
|
|
3724
|
+
<div class="tags"><span class="tag-pill">pastel · minimal-sans · asymmetric · airy · subtle</span></div>
|
|
3725
|
+
</div>
|
|
3726
|
+
</div>
|
|
3727
|
+
|
|
3728
|
+
<!-- DD22 ppt-engineered-dark-deck -->
|
|
3729
|
+
<div class="card">
|
|
3730
|
+
<div class="preview" style="background: #0E0E11; color: #9CA3AF; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3731
|
+
<div style="position:absolute; inset:18px; border:1px solid #8B7BF0;"></div>
|
|
3732
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#16161A; border-left:8px solid #8B7BF0;"></div>
|
|
3733
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3734
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#8B7BF0; margin-bottom:8px;">ppt-engineered-dark-deck</p>
|
|
3735
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#9CA3AF;">Engineered Dark Deck</p>
|
|
3736
|
+
</div>
|
|
3737
|
+
</div>
|
|
3738
|
+
<div class="card-info">
|
|
3739
|
+
<div class="card-num">DD22 — DESIGN-DIVERSITY</div>
|
|
3740
|
+
<div class="card-title">Engineered Dark Deck</div>
|
|
3741
|
+
<div class="card-desc">차콜 배경에 미세 라디얼 글로우 한 점, 중립 산세리프와 헤어라인 보더, 120~180ms 마이크로 모션의 정밀한 다크 SaaS 덱.</div>
|
|
3742
|
+
<div class="tags"><span class="tag-pill">dark · minimal-sans · centered · airy · snappy</span></div>
|
|
3743
|
+
</div>
|
|
3744
|
+
</div>
|
|
3745
|
+
|
|
3746
|
+
<!-- DD23 ppt-warm-hospitality-deck -->
|
|
3747
|
+
<div class="card">
|
|
3748
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3749
|
+
<div style="position:absolute; inset:18px; border:1px solid #F4625F;"></div>
|
|
3750
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FBF7F4; border-left:8px solid #F4625F;"></div>
|
|
3751
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3752
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#F4625F; margin-bottom:8px;">ppt-warm-hospitality-deck</p>
|
|
3753
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">Warm Hospitality Deck</p>
|
|
3754
|
+
</div>
|
|
3755
|
+
</div>
|
|
3756
|
+
<div class="card-info">
|
|
3757
|
+
<div class="card-num">DD23 — DESIGN-DIVERSITY</div>
|
|
3758
|
+
<div class="card-title">Warm Hospitality Deck</div>
|
|
3759
|
+
<div class="card-desc">흰 캔버스에 단일 산호-레드 강조와 둥근 터미널 휴머니스트 산세리프, 풀블리드 라운드 코너 사진의 환대 미감 덱.</div>
|
|
3760
|
+
<div class="tags"><span class="tag-pill">earth · minimal-sans · full-bleed · airy · playful</span></div>
|
|
3761
|
+
</div>
|
|
3762
|
+
</div>
|
|
3763
|
+
|
|
3764
|
+
<!-- DD24 ppt-monochrome-infrastructure-deck -->
|
|
3765
|
+
<div class="card">
|
|
3766
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3767
|
+
<div style="position:absolute; inset:18px; border:1px solid #FFFFFF;"></div>
|
|
3768
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F2F2F2; border-left:8px solid #FFFFFF;"></div>
|
|
3769
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3770
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FFFFFF; margin-bottom:8px;">ppt-monochrome-infrastructure-deck</p>
|
|
3771
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">Monochrome Infrastructure Deck</p>
|
|
3772
|
+
</div>
|
|
3773
|
+
</div>
|
|
3774
|
+
<div class="card-info">
|
|
3775
|
+
<div class="card-num">DD24 — DESIGN-DIVERSITY</div>
|
|
3776
|
+
<div class="card-title">Monochrome Infrastructure Deck</div>
|
|
3777
|
+
<div class="card-desc">순백·순흑만으로 환원한 인프라 덱 — 산세리프+모노 혼합, 1px 헤어라인 보더, 색이 아닌 굵기 대비로만 강조하는 도면 같은 정밀함.</div>
|
|
3778
|
+
<div class="tags"><span class="tag-pill">mono · mixed · strict-grid · balanced · subtle</span></div>
|
|
3779
|
+
</div>
|
|
3780
|
+
</div>
|
|
3781
|
+
|
|
3782
|
+
<!-- DD25 ppt-expressive-soundwave-deck -->
|
|
3783
|
+
<div class="card">
|
|
3784
|
+
<div class="preview" style="background: #121212; color: #E8E8E8; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3785
|
+
<div style="position:absolute; inset:18px; border:1px solid #FF6B4A;"></div>
|
|
3786
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1E1E1E; border-left:8px solid #FF6B4A;"></div>
|
|
3787
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3788
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FF6B4A; margin-bottom:8px;">ppt-expressive-soundwave-deck</p>
|
|
3789
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#E8E8E8;">Expressive Soundwave Deck</p>
|
|
3790
|
+
</div>
|
|
3791
|
+
</div>
|
|
3792
|
+
<div class="card-info">
|
|
3793
|
+
<div class="card-num">DD25 — DESIGN-DIVERSITY</div>
|
|
3794
|
+
<div class="card-title">Expressive Soundwave Deck</div>
|
|
3795
|
+
<div class="card-desc">다크 캔버스에 활기찬 듀오톤 그라디언트를 면적으로 깔고 초대형 와이드 디스플레이로 한 슬라이드 한 메시지를 외치는 표현적 덱.</div>
|
|
3796
|
+
<div class="tags"><span class="tag-pill">gradient · heavy-display · block-grid · balanced · playful</span></div>
|
|
3797
|
+
</div>
|
|
3798
|
+
</div>
|
|
3799
|
+
|
|
3800
|
+
<!-- DD26 ppt-editorial-product-deck -->
|
|
3801
|
+
<div class="card">
|
|
3802
|
+
<div class="preview" style="background: #F7F4EE; color: #1F1B16; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3803
|
+
<div style="position:absolute; inset:18px; border:1px solid #B5503A;"></div>
|
|
3804
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FCFAF5; border-left:8px solid #B5503A;"></div>
|
|
3805
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3806
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#B5503A; margin-bottom:8px;">ppt-editorial-product-deck</p>
|
|
3807
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1F1B16;">Editorial Product Deck</p>
|
|
3808
|
+
</div>
|
|
3809
|
+
</div>
|
|
3810
|
+
<div class="card-info">
|
|
3811
|
+
<div class="card-num">DD26 — DESIGN-DIVERSITY</div>
|
|
3812
|
+
<div class="card-title">Editorial Product Deck</div>
|
|
3813
|
+
<div class="card-desc">크림-아이보리 면에 잉크 블랙, 세리프 헤딩+산세리프 본문, 12열 엄격 그리드의 따뜻한 미니멀리즘 프로덕트 덱.</div>
|
|
3814
|
+
<div class="tags"><span class="tag-pill">earth · serif-editorial · strict-grid · balanced · none</span></div>
|
|
3815
|
+
</div>
|
|
3816
|
+
</div>
|
|
3817
|
+
|
|
3818
|
+
<!-- DD27 ppt-cinematic-keynote-deck -->
|
|
3819
|
+
<div class="card">
|
|
3820
|
+
<div class="preview" style="background: #000000; color: #F5F5F7; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3821
|
+
<div style="position:absolute; inset:18px; border:1px solid #E8B341;"></div>
|
|
3822
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#0E0E0E; border-left:8px solid #E8B341;"></div>
|
|
3823
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3824
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#E8B341; margin-bottom:8px;">ppt-cinematic-keynote-deck</p>
|
|
3825
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#F5F5F7;">Cinematic Keynote Deck</p>
|
|
3826
|
+
</div>
|
|
3827
|
+
</div>
|
|
3828
|
+
<div class="card-info">
|
|
3829
|
+
<div class="card-num">DD27 — DESIGN-DIVERSITY</div>
|
|
3830
|
+
<div class="card-title">Cinematic Keynote Deck</div>
|
|
3831
|
+
<div class="card-desc">순흑 무대 위 거대 키 비주얼 한 점과 최소 텍스트, 정연한 균형 리듬과 끝의 서머리 슬라이드를 가진 시네마틱 키노트 덱.</div>
|
|
3832
|
+
<div class="tags"><span class="tag-pill">dark · minimal-sans · full-bleed · balanced · subtle</span></div>
|
|
3833
|
+
</div>
|
|
3834
|
+
</div>
|
|
3835
|
+
|
|
3836
|
+
<!-- DD28 ppt-confident-color-block-deck -->
|
|
3837
|
+
<div class="card">
|
|
3838
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3839
|
+
<div style="position:absolute; inset:18px; border:1px solid #F0531C;"></div>
|
|
3840
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #F0531C;"></div>
|
|
3841
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3842
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#F0531C; margin-bottom:8px;">ppt-confident-color-block-deck</p>
|
|
3843
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">Confident Color-Block Deck</p>
|
|
3844
|
+
</div>
|
|
3845
|
+
</div>
|
|
3846
|
+
<div class="card-info">
|
|
3847
|
+
<div class="card-num">DD28 — DESIGN-DIVERSITY</div>
|
|
3848
|
+
<div class="card-title">Confident Color-Block Deck</div>
|
|
3849
|
+
<div class="card-desc">흰 바탕에 큼직한 솔리드 컬러 블록(슬라이드당 1~2색)을 비대칭으로 깔고 화이트 헤비 산세리프를 얹는 자신감 있는 모던 피치 덱.</div>
|
|
3850
|
+
<div class="tags"><span class="tag-pill">vivid-primary · heavy-display · asymmetric · airy · snappy</span></div>
|
|
3851
|
+
</div>
|
|
3852
|
+
</div>
|
|
3853
|
+
|
|
3854
|
+
<!-- DD29 ppt-strategy-navy-deck -->
|
|
3855
|
+
<div class="card">
|
|
3856
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3857
|
+
<div style="position:absolute; inset:18px; border:1px solid #2563EB;"></div>
|
|
3858
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F1F4F9; border-left:8px solid #2563EB;"></div>
|
|
3859
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3860
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#2563EB; margin-bottom:8px;">ppt-strategy-navy-deck</p>
|
|
3861
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">Strategy Navy Deck</p>
|
|
3862
|
+
</div>
|
|
3863
|
+
</div>
|
|
3864
|
+
<div class="card-info">
|
|
3865
|
+
<div class="card-num">DD29 — DESIGN-DIVERSITY</div>
|
|
3866
|
+
<div class="card-title">Strategy Navy Deck</div>
|
|
3867
|
+
<div class="card-desc">다층 블루 2색 시스템과 세리프 헤딩+산세리프 본문, 12열 그리드 위 액션 타이틀과 근거 모듈의 전략 컨설팅 덱.</div>
|
|
3868
|
+
<div class="tags"><span class="tag-pill">vivid-primary · mixed · strict-grid · dense · none</span></div>
|
|
3869
|
+
</div>
|
|
3870
|
+
</div>
|
|
3871
|
+
|
|
3872
|
+
<!-- DD30 ppt-heritage-luxury-deck -->
|
|
3873
|
+
<div class="card">
|
|
3874
|
+
<div class="preview" style="background: #EDE6D6; color: #3A2E1F; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3875
|
+
<div style="position:absolute; inset:18px; border:1px solid #A8893E;"></div>
|
|
3876
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F4EFE3; border-left:8px solid #A8893E;"></div>
|
|
3877
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3878
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#A8893E; margin-bottom:8px;">ppt-heritage-luxury-deck</p>
|
|
3879
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#3A2E1F;">Heritage Luxury Deck</p>
|
|
3880
|
+
</div>
|
|
3881
|
+
</div>
|
|
3882
|
+
<div class="card-info">
|
|
3883
|
+
<div class="card-num">DD30 — DESIGN-DIVERSITY</div>
|
|
3884
|
+
<div class="card-title">Heritage Luxury Deck</div>
|
|
3885
|
+
<div class="card-desc">세피아-샴페인 톤과 골드 헤어라인, 하이콘트라스트 디돈 세리프를 중앙에 앉힌 헤리티지·럭셔리 IR 덱.</div>
|
|
3886
|
+
<div class="tags"><span class="tag-pill">earth · serif-editorial · centered · balanced · subtle</span></div>
|
|
3887
|
+
</div>
|
|
3888
|
+
</div>
|
|
3889
|
+
|
|
3890
|
+
<!-- DD31 ppt-isometric-platform-deck -->
|
|
3891
|
+
<div class="card">
|
|
3892
|
+
<div class="preview" style="background: #EEF1F5; color: #1B2330; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3893
|
+
<div style="position:absolute; inset:18px; border:1px solid #3B6FE0;"></div>
|
|
3894
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #3B6FE0;"></div>
|
|
3895
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3896
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#3B6FE0; margin-bottom:8px;">ppt-isometric-platform-deck</p>
|
|
3897
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1B2330;">Isometric Platform Deck</p>
|
|
3898
|
+
</div>
|
|
3899
|
+
</div>
|
|
3900
|
+
<div class="card-info">
|
|
3901
|
+
<div class="card-num">DD31 — DESIGN-DIVERSITY</div>
|
|
3902
|
+
<div class="card-title">Isometric Platform Deck</div>
|
|
3903
|
+
<div class="card-desc">밝은 쿨그레이 캔버스 위 정사 아이소메트릭 투영의 입체 플랫폼·블록·계단 구조가 콘텐츠를 떠받치고, 코발트 명도 3단계로 입체면을 칠하며 평면 텍스트는 헤어라인 리더선으로 분리하는 입체 다이어그램 키트 덱.</div>
|
|
3904
|
+
<div class="tags"><span class="tag-pill">mono · minimal-sans · centered · airy · subtle</span></div>
|
|
3905
|
+
</div>
|
|
3906
|
+
</div>
|
|
3907
|
+
|
|
3908
|
+
<!-- DD32 ppt-mckinsey-ghost-deck -->
|
|
3909
|
+
<div class="card">
|
|
3910
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3911
|
+
<div style="position:absolute; inset:18px; border:1px solid #1F3A5F;"></div>
|
|
3912
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #1F3A5F;"></div>
|
|
3913
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3914
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#1F3A5F; margin-bottom:8px;">ppt-mckinsey-ghost-deck</p>
|
|
3915
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">MBB Ghost Deck Framework</p>
|
|
3916
|
+
</div>
|
|
3917
|
+
</div>
|
|
3918
|
+
<div class="card-info">
|
|
3919
|
+
<div class="card-num">DD32 — DESIGN-DIVERSITY</div>
|
|
3920
|
+
<div class="card-title">MBB Ghost Deck Framework</div>
|
|
3921
|
+
<div class="card-desc">순백 캔버스에 완결된 문장의 액션 타이틀과 슬레이트 그레이 본문, 색 대신 굵기로만 강조하는 MBB식 덱 — 워터폴·메코·2×2를 기본 다이어그램 어휘로 삼는다.</div>
|
|
3922
|
+
<div class="tags"><span class="tag-pill">mono · minimal-sans · asymmetric · balanced · none</span></div>
|
|
3923
|
+
</div>
|
|
3924
|
+
</div>
|
|
3925
|
+
|
|
3926
|
+
<!-- DD33 ppt-blueprint-schematic-deck -->
|
|
3927
|
+
<div class="card">
|
|
3928
|
+
<div class="preview" style="background: #0E1B3D; color: #E8EEF7; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3929
|
+
<div style="position:absolute; inset:18px; border:1px solid #4FC8E8;"></div>
|
|
3930
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#0E1B3D; border-left:8px solid #4FC8E8;"></div>
|
|
3931
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3932
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#4FC8E8; margin-bottom:8px;">ppt-blueprint-schematic-deck</p>
|
|
3933
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#E8EEF7;">Blueprint Schematic Deck</p>
|
|
3934
|
+
</div>
|
|
3935
|
+
</div>
|
|
3936
|
+
<div class="card-info">
|
|
3937
|
+
<div class="card-num">DD33 — DESIGN-DIVERSITY</div>
|
|
3938
|
+
<div class="card-title">Blueprint Schematic Deck</div>
|
|
3939
|
+
<div class="card-desc">딥 인디고-블루 배경에 1px 시안 도트 그리드를 청사진처럼 노출하고, 치수 보조선·인출선·단면 해치 등 제도 주석을 정보 장식으로 차용하는 라인 드로잉 다이어그램 덱.</div>
|
|
3940
|
+
<div class="tags"><span class="tag-pill">dark · mono · strict-grid · dense · none</span></div>
|
|
3941
|
+
</div>
|
|
3942
|
+
</div>
|
|
3943
|
+
|
|
3944
|
+
<!-- DD34 ppt-editorial-infographic-deck -->
|
|
3945
|
+
<div class="card">
|
|
3946
|
+
<div class="preview" style="background: #F6F3EC; color: #1C1A17; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3947
|
+
<div style="position:absolute; inset:18px; border:1px solid #B22B1F;"></div>
|
|
3948
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F6F3EC; border-left:8px solid #B22B1F;"></div>
|
|
3949
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3950
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#B22B1F; margin-bottom:8px;">ppt-editorial-infographic-deck</p>
|
|
3951
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1C1A17;">Editorial Infographic Deck</p>
|
|
3952
|
+
</div>
|
|
3953
|
+
</div>
|
|
3954
|
+
<div class="card-info">
|
|
3955
|
+
<div class="card-num">DD34 — DESIGN-DIVERSITY</div>
|
|
3956
|
+
<div class="card-title">Editorial Infographic Deck</div>
|
|
3957
|
+
<div class="card-desc">오프화이트 지면에 큰 세리프 헤드라인과 가는 룰 라인 구획, 잉크 레드 한 점으로 데이터를 신문·잡지 데이터 저널리즘처럼 읽히는 그래픽으로 조판하는 인포그래픽 덱.</div>
|
|
3958
|
+
<div class="tags"><span class="tag-pill">vivid-primary · serif-editorial · block-grid · balanced · none</span></div>
|
|
3959
|
+
</div>
|
|
3960
|
+
</div>
|
|
3961
|
+
|
|
3962
|
+
<!-- DD35 ppt-vivid-gradient-infographic-deck -->
|
|
3963
|
+
<div class="card">
|
|
3964
|
+
<div class="preview" style="background: #FBFAFE; color: #211B33; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3965
|
+
<div style="position:absolute; inset:18px; border:1px solid #7C3AED;"></div>
|
|
3966
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #7C3AED;"></div>
|
|
3967
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3968
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#7C3AED; margin-bottom:8px;">ppt-vivid-gradient-infographic-deck</p>
|
|
3969
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#211B33;">Vivid Gradient Infographic Deck</p>
|
|
3970
|
+
</div>
|
|
3971
|
+
</div>
|
|
3972
|
+
<div class="card-info">
|
|
3973
|
+
<div class="card-num">DD35 — DESIGN-DIVERSITY</div>
|
|
3974
|
+
<div class="card-title">Vivid Gradient Infographic Deck</div>
|
|
3975
|
+
<div class="card-desc">밝은 캔버스 위 채도 높은 듀오톤 그라디언트가 둥근 알약 노드·아이콘 칩·KPI 링을 채우는 VC 피치형 인포그래픽 키트 덱 — 모든 다이어그램 도형이 그라디언트 채움을 공유한다.</div>
|
|
3976
|
+
<div class="tags"><span class="tag-pill">gradient · heavy-display · block-grid · balanced · playful</span></div>
|
|
3977
|
+
</div>
|
|
3978
|
+
</div>
|
|
3979
|
+
|
|
3980
|
+
<!-- DD36 ppt-bold-block-infographic-deck -->
|
|
3981
|
+
<div class="card">
|
|
3982
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
3983
|
+
<div style="position:absolute; inset:18px; border:1px solid #2A2D34;"></div>
|
|
3984
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#2A2D34; border-left:8px solid #2A2D34;"></div>
|
|
3985
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
3986
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#2A2D34; margin-bottom:8px;">ppt-bold-block-infographic-deck</p>
|
|
3987
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">Bold Block Infographic Deck</p>
|
|
3988
|
+
</div>
|
|
3989
|
+
</div>
|
|
3990
|
+
<div class="card-info">
|
|
3991
|
+
<div class="card-num">DD36 — DESIGN-DIVERSITY</div>
|
|
3992
|
+
<div class="card-title">Bold Block Infographic Deck</div>
|
|
3993
|
+
<div class="card-desc">흰 바탕에 차콜·앰버·틸 3색 솔리드 컬러 블록이 노드·구간·셀이 되어 다이어그램 자체를 이루는, 보더 없는 단정한 평면 모더니즘 인포그래픽 덱.</div>
|
|
3994
|
+
<div class="tags"><span class="tag-pill">vivid-primary · heavy-display · block-grid · dense · none</span></div>
|
|
3995
|
+
</div>
|
|
3996
|
+
</div>
|
|
3997
|
+
|
|
3998
|
+
<!-- DD37 ppt-prismatic-dark-deck -->
|
|
3999
|
+
<div class="card">
|
|
4000
|
+
<div class="preview" style="background: #0B0E1A; color: #E8EAF0; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4001
|
+
<div style="position:absolute; inset:18px; border:1px solid #22D3EE;"></div>
|
|
4002
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#141A2E; border-left:8px solid #22D3EE;"></div>
|
|
4003
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4004
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#22D3EE; margin-bottom:8px;">ppt-prismatic-dark-deck</p>
|
|
4005
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#E8EAF0;">Prismatic Dark Diagram Deck</p>
|
|
4006
|
+
</div>
|
|
4007
|
+
</div>
|
|
4008
|
+
<div class="card-info">
|
|
4009
|
+
<div class="card-num">DD37 — DESIGN-DIVERSITY</div>
|
|
4010
|
+
<div class="card-title">Prismatic Dark Diagram Deck</div>
|
|
4011
|
+
<div class="card-desc">잉크 네이비-블랙 배경에 다이어그램 노드·라인이 시안→마젠타→앰버 프리즘 그라디언트로 발광하는 테크 컨퍼런스 키노트형 다이어그램 키트 덱.</div>
|
|
4012
|
+
<div class="tags"><span class="tag-pill">gradient · minimal-sans · full-bleed · balanced · snappy</span></div>
|
|
4013
|
+
</div>
|
|
4014
|
+
</div>
|
|
4015
|
+
|
|
4016
|
+
<!-- DD38 ppt-soft-pastel-system-deck -->
|
|
4017
|
+
<div class="card">
|
|
4018
|
+
<div class="preview" style="background: #FAF7F4; color: #3A3640; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4019
|
+
<div style="position:absolute; inset:18px; border:1px solid #C9BEEB;"></div>
|
|
4020
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #C9BEEB;"></div>
|
|
4021
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4022
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#C9BEEB; margin-bottom:8px;">ppt-soft-pastel-system-deck</p>
|
|
4023
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#3A3640;">Soft Pastel System Deck</p>
|
|
4024
|
+
</div>
|
|
4025
|
+
</div>
|
|
4026
|
+
<div class="card-info">
|
|
4027
|
+
<div class="card-num">DD38 — DESIGN-DIVERSITY</div>
|
|
4028
|
+
<div class="card-title">Soft Pastel System Deck</div>
|
|
4029
|
+
<div class="card-desc">오프화이트 캔버스에 라일락·민트·피치 파스텔 3색과 부드러운 멀티 섀도, 통통한 라운드 노드·카드로 다이어그램을 한 키트로 묶는 촉각적 소프트 UI 덱.</div>
|
|
4030
|
+
<div class="tags"><span class="tag-pill">pastel · minimal-sans · centered · balanced · snappy</span></div>
|
|
4031
|
+
</div>
|
|
4032
|
+
</div>
|
|
4033
|
+
|
|
4034
|
+
<!-- DD39 ppt-archival-index-deck -->
|
|
4035
|
+
<div class="card">
|
|
4036
|
+
<div class="preview" style="background: #EFE9DD; color: #33302A; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4037
|
+
<div style="position:absolute; inset:18px; border:1px solid #33302A;"></div>
|
|
4038
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F6F2E8; border-left:8px solid #33302A;"></div>
|
|
4039
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4040
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#33302A; margin-bottom:8px;">ppt-archival-index-deck</p>
|
|
4041
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#33302A;">Archival Index Deck</p>
|
|
4042
|
+
</div>
|
|
4043
|
+
</div>
|
|
4044
|
+
<div class="card-info">
|
|
4045
|
+
<div class="card-num">DD39 — DESIGN-DIVERSITY</div>
|
|
4046
|
+
<div class="card-title">Archival Index Deck</div>
|
|
4047
|
+
<div class="card-desc">종이빛 베이지 캔버스에 세리프+등폭 혼합, 도서관 카드·아카이브 대장처럼 모든 다이어그램을 번호·라벨·룰 라인으로 색인하는 학술 리서치 카탈로그 키트 덱.</div>
|
|
4048
|
+
<div class="tags"><span class="tag-pill">mono · mixed · strict-grid · dense · none</span></div>
|
|
4049
|
+
</div>
|
|
4050
|
+
</div>
|
|
4051
|
+
|
|
4052
|
+
<!-- DD40 ppt-warm-minimal-diagram-deck -->
|
|
4053
|
+
<div class="card">
|
|
4054
|
+
<div class="preview" style="background: #F2EBDF; color: #3D3528; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4055
|
+
<div style="position:absolute; inset:18px; border:1px solid #C2693F;"></div>
|
|
4056
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FBF7EF; border-left:8px solid #C2693F;"></div>
|
|
4057
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4058
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#C2693F; margin-bottom:8px;">ppt-warm-minimal-diagram-deck</p>
|
|
4059
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#3D3528;">Warm Minimal Diagram Deck</p>
|
|
4060
|
+
</div>
|
|
4061
|
+
</div>
|
|
4062
|
+
<div class="card-info">
|
|
4063
|
+
<div class="card-num">DD40 — DESIGN-DIVERSITY</div>
|
|
4064
|
+
<div class="card-title">Warm Minimal Diagram Deck</div>
|
|
4065
|
+
<div class="card-desc">따뜻한 샌드-아이보리 캔버스에 잉크 브라운 본문과 단일 테라코타 강조, 가는 1pt 라인 다이어그램과 넉넉한 여백의 부드럽고 절제된 따뜻한 미니멀 다이어그램 키트 덱.</div>
|
|
4066
|
+
<div class="tags"><span class="tag-pill">earth · minimal-sans · centered · airy · none</span></div>
|
|
4067
|
+
</div>
|
|
4068
|
+
</div>
|
|
4069
|
+
|
|
4070
|
+
<!-- DD41 ppt-bcg-exhibit-deck -->
|
|
4071
|
+
<div class="card">
|
|
4072
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4073
|
+
<div style="position:absolute; inset:18px; border:1px solid #177B57;"></div>
|
|
4074
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F2F4F3; border-left:8px solid #177B57;"></div>
|
|
4075
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4076
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#177B57; margin-bottom:8px;">ppt-bcg-exhibit-deck</p>
|
|
4077
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">BCG 익스히빗 덱</p>
|
|
4078
|
+
</div>
|
|
4079
|
+
</div>
|
|
4080
|
+
<div class="card-info">
|
|
4081
|
+
<div class="card-num">DD41 — DESIGN-DIVERSITY</div>
|
|
4082
|
+
<div class="card-title">BCG 익스히빗 덱</div>
|
|
4083
|
+
<div class="card-desc">모든 슬라이드가 좌상단 `Exhibit N.N` 번호를 달고 헤더는 answer-first 결론 문장을 진술하며 하단에 Source 각주 라인이 깔리는, BCG 그린 단색 강조의 근거 중심 컨설팅 덱.</div>
|
|
4084
|
+
<div class="tags"><span class="tag-pill">vivid-primary · minimal-sans · strict-grid · balanced · subtle</span></div>
|
|
4085
|
+
</div>
|
|
4086
|
+
</div>
|
|
4087
|
+
|
|
4088
|
+
<!-- DD42 ppt-bain-results-deck -->
|
|
4089
|
+
<div class="card">
|
|
4090
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4091
|
+
<div style="position:absolute; inset:18px; border:1px solid #CC0000;"></div>
|
|
4092
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F4F5F6; border-left:8px solid #CC0000;"></div>
|
|
4093
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4094
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#CC0000; margin-bottom:8px;">ppt-bain-results-deck</p>
|
|
4095
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">베인 리절츠 덱</p>
|
|
4096
|
+
</div>
|
|
4097
|
+
</div>
|
|
4098
|
+
<div class="card-info">
|
|
4099
|
+
<div class="card-num">DD42 — DESIGN-DIVERSITY</div>
|
|
4100
|
+
<div class="card-title">베인 리절츠 덱</div>
|
|
4101
|
+
<div class="card-desc">슬라이드 중앙 상단에 거대 결과 메트릭 한 점(+34%·2.7×)이 지배하고 아래 작은 캡션이 맥락을 다는, 베인 레드 단색 강조·중앙 정렬 단일 축의 results-first 컨설팅 덱.</div>
|
|
4102
|
+
<div class="tags"><span class="tag-pill">vivid-primary · minimal-sans · centered · balanced · none</span></div>
|
|
4103
|
+
</div>
|
|
4104
|
+
</div>
|
|
4105
|
+
|
|
4106
|
+
<!-- DD43 ppt-goldman-ir-deck -->
|
|
4107
|
+
<div class="card">
|
|
4108
|
+
<div class="preview" style="background: #0A1A33; color: #E8E5DE; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4109
|
+
<div style="position:absolute; inset:18px; border:1px solid #C8A24B;"></div>
|
|
4110
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1F3A5F; border-left:8px solid #C8A24B;"></div>
|
|
4111
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4112
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#C8A24B; margin-bottom:8px;">ppt-goldman-ir-deck</p>
|
|
4113
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#E8E5DE;">골드만 IR 덱</p>
|
|
4114
|
+
</div>
|
|
4115
|
+
</div>
|
|
4116
|
+
<div class="card-info">
|
|
4117
|
+
<div class="card-num">DD43 — DESIGN-DIVERSITY</div>
|
|
4118
|
+
<div class="card-title">골드만 IR 덱</div>
|
|
4119
|
+
<div class="card-desc">딥 네이비 전면 페이지에 메탈릭 골드 0.5pt 헤어라인이 헤더·섹션·표를 구획하고 트랜지셔널 세리프 헤딩과 등폭 재무 표가 권위를 만드는, 디스클레이머 풋라인 의무의 투자은행 IR 덱.</div>
|
|
4120
|
+
<div class="tags"><span class="tag-pill">dark · serif-editorial · strict-grid · balanced · subtle</span></div>
|
|
4121
|
+
</div>
|
|
4122
|
+
</div>
|
|
4123
|
+
|
|
4124
|
+
<!-- DD44 ppt-every-golden-grid-keynote -->
|
|
4125
|
+
<div class="card">
|
|
4126
|
+
<div class="preview" style="background: #FAFAF8; color: #161616; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4127
|
+
<div style="position:absolute; inset:18px; border:1px solid #B5A642;"></div>
|
|
4128
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #B5A642;"></div>
|
|
4129
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4130
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#B5A642; margin-bottom:8px;">ppt-every-golden-grid-keynote</p>
|
|
4131
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#161616;">Every 골든 그리드 키노트</p>
|
|
4132
|
+
</div>
|
|
4133
|
+
</div>
|
|
4134
|
+
<div class="card-info">
|
|
4135
|
+
<div class="card-num">DD44 — DESIGN-DIVERSITY</div>
|
|
4136
|
+
<div class="card-title">Every 골든 그리드 키노트</div>
|
|
4137
|
+
<div class="card-desc">황금비(1:1.618)로 분할된 그리드가 모든 슬라이드의 골격이고 이미지 블록·텍스트 컬럼·여백·폰트 크기까지 전부 황금 스케일을 따르는, 무채색 + muted gold 한 점의 비례 일관성 미니멀 키노트.</div>
|
|
4138
|
+
<div class="tags"><span class="tag-pill">mono · minimal-sans · block-grid · balanced · subtle</span></div>
|
|
4139
|
+
</div>
|
|
4140
|
+
</div>
|
|
4141
|
+
|
|
4142
|
+
<!-- DD45 ppt-pattern-bold-poster-keynote -->
|
|
4143
|
+
<div class="card">
|
|
4144
|
+
<div class="preview" style="background: #1F3DFF; color: #FFFFFF; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4145
|
+
<div style="position:absolute; inset:18px; border:1px solid #FF4D2E;"></div>
|
|
4146
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #FF4D2E;"></div>
|
|
4147
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4148
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FF4D2E; margin-bottom:8px;">ppt-pattern-bold-poster-keynote</p>
|
|
4149
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#FFFFFF;">Pattern 볼드 포스터 키노트</p>
|
|
4150
|
+
</div>
|
|
4151
|
+
</div>
|
|
4152
|
+
<div class="card-info">
|
|
4153
|
+
<div class="card-num">DD45 — DESIGN-DIVERSITY</div>
|
|
4154
|
+
<div class="card-title">Pattern 볼드 포스터 키노트</div>
|
|
4155
|
+
<div class="card-desc">슬라이드 전면을 채도 높은 단색 한 가지로 도배하고 그 위에 거대한 굵은 산세리프 헤드라인을 포스터처럼 앉히는, 컴포넌트 최소·정적인 키노트. 색이 페이지를 정의하고 타이포가 이미지를 대신한다.</div>
|
|
4156
|
+
<div class="tags"><span class="tag-pill">vivid-primary · heavy-display · full-bleed · airy · none</span></div>
|
|
4157
|
+
</div>
|
|
4158
|
+
</div>
|
|
4159
|
+
|
|
4160
|
+
<!-- DD46 ppt-altezza-ultramodern-keynote -->
|
|
4161
|
+
<div class="card">
|
|
4162
|
+
<div class="preview" style="background: #13141A; color: #F4F4F6; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4163
|
+
<div style="position:absolute; inset:18px; border:1px solid #2EE6A6;"></div>
|
|
4164
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#3A3C46; border-left:8px solid #2EE6A6;"></div>
|
|
4165
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4166
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#2EE6A6; margin-bottom:8px;">ppt-altezza-ultramodern-keynote</p>
|
|
4167
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#F4F4F6;">Altezza 울트라모던 키노트</p>
|
|
4168
|
+
</div>
|
|
4169
|
+
</div>
|
|
4170
|
+
<div class="card-info">
|
|
4171
|
+
<div class="card-num">DD46 — DESIGN-DIVERSITY</div>
|
|
4172
|
+
<div class="card-title">Altezza 울트라모던 키노트</div>
|
|
4173
|
+
<div class="card-desc">사진·컬러 면을 각진 사선 클립 마스크(12~18°)로 잘라 동적 긴장을 만들고 거대 산세리프 헤드라인과 얇은 라벨이 강하게 대비하는, near-black + electric mint 한 점의 빽빽한 다크 에이전시 키노트.</div>
|
|
4174
|
+
<div class="tags"><span class="tag-pill">dark · heavy-display · asymmetric · dense · snappy</span></div>
|
|
4175
|
+
</div>
|
|
4176
|
+
</div>
|
|
4177
|
+
|
|
4178
|
+
<!-- DD47 ppt-kula-minimalist-keynote -->
|
|
4179
|
+
<div class="card">
|
|
4180
|
+
<div class="preview" style="background: #EDE8E0; color: #4A4540; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4181
|
+
<div style="position:absolute; inset:18px; border:1px solid #B79B86;"></div>
|
|
4182
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #B79B86;"></div>
|
|
4183
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4184
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#B79B86; margin-bottom:8px;">ppt-kula-minimalist-keynote</p>
|
|
4185
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#4A4540;">Kula 미니멀리스트 키노트</p>
|
|
4186
|
+
</div>
|
|
4187
|
+
</div>
|
|
4188
|
+
<div class="card-info">
|
|
4189
|
+
<div class="card-num">DD47 — DESIGN-DIVERSITY</div>
|
|
4190
|
+
<div class="card-title">Kula 미니멀리스트 키노트</div>
|
|
4191
|
+
<div class="card-desc">따뜻한 샌드 배경에 둥근 모서리(16~24px) 이미지 프레임이 모듈러 블록 그리드로 정렬되고 작은 산세리프 캡션이 도록처럼 단정한, 더스티 뉴트럴 톤·dusty clay 한 점의 차분한 룩북 키노트.</div>
|
|
4192
|
+
<div class="tags"><span class="tag-pill">earth · minimal-sans · block-grid · airy · subtle</span></div>
|
|
4193
|
+
</div>
|
|
4194
|
+
</div>
|
|
4195
|
+
|
|
4196
|
+
<!-- DD48 ppt-epoch-premium-keynote -->
|
|
4197
|
+
<div class="card">
|
|
4198
|
+
<div class="preview" style="background: #1A1E26; color: #E6E8EC; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4199
|
+
<div style="position:absolute; inset:18px; border:1px solid #7FA9C9;"></div>
|
|
4200
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#2C313B; border-left:8px solid #7FA9C9;"></div>
|
|
4201
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4202
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#7FA9C9; margin-bottom:8px;">ppt-epoch-premium-keynote</p>
|
|
4203
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#E6E8EC;">Epoch 프리미엄 키노트</p>
|
|
4204
|
+
</div>
|
|
4205
|
+
</div>
|
|
4206
|
+
<div class="card-info">
|
|
4207
|
+
<div class="card-num">DD48 — DESIGN-DIVERSITY</div>
|
|
4208
|
+
<div class="card-title">Epoch 프리미엄 키노트</div>
|
|
4209
|
+
<div class="card-desc">차분한 딥 슬레이트 배경에 가는 세리프 헤딩과 산세리프 본문을 혼합하고 1pt 룰 라인이 콘텐츠를 정연히 구획하는, cool steel 한 점의 차갑고 정제된 하이엔드 코퍼레이트 키노트.</div>
|
|
4210
|
+
<div class="tags"><span class="tag-pill">dark · mixed · centered · balanced · subtle</span></div>
|
|
4211
|
+
</div>
|
|
4212
|
+
</div>
|
|
4213
|
+
|
|
4214
|
+
<!-- DD49 ppt-folio-portfolio-keynote -->
|
|
4215
|
+
<div class="card">
|
|
4216
|
+
<div class="preview" style="background: #F7F7F5; color: #141414; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4217
|
+
<div style="position:absolute; inset:18px; border:1px solid #FF5C35;"></div>
|
|
4218
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #FF5C35;"></div>
|
|
4219
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4220
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FF5C35; margin-bottom:8px;">ppt-folio-portfolio-keynote</p>
|
|
4221
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#141414;">Folio 포트폴리오 키노트</p>
|
|
4222
|
+
</div>
|
|
4223
|
+
</div>
|
|
4224
|
+
<div class="card-info">
|
|
4225
|
+
<div class="card-num">DD49 — DESIGN-DIVERSITY</div>
|
|
4226
|
+
<div class="card-title">Folio 포트폴리오 키노트</div>
|
|
4227
|
+
<div class="card-desc">슬라이드 한쪽을 큰 직사각 작품 이미지가 채우고 반대쪽에 거대 인덱스 번호(01·02… 120~160px)와 짧은 케이스 캡션이 비대칭으로 앉는, coral 한 점의 크리에이티브 포트폴리오 케이스 스터디 키노트.</div>
|
|
4228
|
+
<div class="tags"><span class="tag-pill">vivid-primary · minimal-sans · asymmetric · balanced · playful</span></div>
|
|
4229
|
+
</div>
|
|
4230
|
+
</div>
|
|
4231
|
+
|
|
4232
|
+
<!-- DD50 ppt-dark-luxury-keynote -->
|
|
4233
|
+
<div class="card">
|
|
4234
|
+
<div class="preview" style="background: #0B0B0C; color: #EDEAE3; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4235
|
+
<div style="position:absolute; inset:18px; border:1px solid #C9A36A;"></div>
|
|
4236
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1A1A1C; border-left:8px solid #C9A36A;"></div>
|
|
4237
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4238
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#C9A36A; margin-bottom:8px;">ppt-dark-luxury-keynote</p>
|
|
4239
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#EDEAE3;">다크 럭셔리 키노트</p>
|
|
4240
|
+
</div>
|
|
4241
|
+
</div>
|
|
4242
|
+
<div class="card-info">
|
|
4243
|
+
<div class="card-num">DD50 — DESIGN-DIVERSITY</div>
|
|
4244
|
+
<div class="card-title">다크 럭셔리 키노트</div>
|
|
4245
|
+
<div class="card-desc">거의 순흑 무대에 풀블리드 제품/라이프스타일 사진이 떠 있고 샴페인 골드 0.5pt 헤어라인 프레임이 사진·텍스트 군집을 절제되게 두르며 넓은 자간의 가는 디스플레이 세리프 라벨이 럭셔리를 만드는 다크 키노트.</div>
|
|
4246
|
+
<div class="tags"><span class="tag-pill">dark · serif-editorial · full-bleed · airy · subtle</span></div>
|
|
4247
|
+
</div>
|
|
4248
|
+
</div>
|
|
4249
|
+
|
|
4250
|
+
<!-- DD51 ppt-samsung-ir-restrained -->
|
|
4251
|
+
<div class="card">
|
|
4252
|
+
<div class="preview" style="background: #111118; color: #f0f0f5; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4253
|
+
<div style="position:absolute; inset:18px; border:1px solid #0028A8;"></div>
|
|
4254
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #0028A8;"></div>
|
|
4255
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4256
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#0028A8; margin-bottom:8px;">ppt-samsung-ir-restrained</p>
|
|
4257
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#f0f0f5;">삼성전자 IR 절제</p>
|
|
4258
|
+
</div>
|
|
4259
|
+
</div>
|
|
4260
|
+
<div class="card-info">
|
|
4261
|
+
<div class="card-num">DD51 — DESIGN-DIVERSITY</div>
|
|
4262
|
+
<div class="card-title">삼성전자 IR 절제</div>
|
|
4263
|
+
<div class="card-desc">삼성·LG 같은 글로벌 대기업이 분기 실적을 발표할 때 쓰는 영문 IR 자료 스타일. 강조는 진한 파랑 한 가지뿐, 표는 가로 줄 한 줄로 정리, 차트는 깨끗한 흰 배경에 막대 두 가지 색만. 화려하지 않으면서 격조 있게 보이는 보수적 톤 — 분기·연간 실적 보고, 글로벌 투자자 대상 IR에 어울립니다.</div>
|
|
4264
|
+
<div class="tags"><span class="tag-pill">vivid-primary · minimal-sans · asymmetric-content-driven · balanced · subtle</span></div>
|
|
4265
|
+
</div>
|
|
4266
|
+
</div>
|
|
4267
|
+
|
|
4268
|
+
<!-- DD52 ppt-skt-interactive-ai-pyramid -->
|
|
4269
|
+
<div class="card">
|
|
4270
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4271
|
+
<div style="position:absolute; inset:18px; border:1px solid #0023C3;"></div>
|
|
4272
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#E4EEFB; border-left:8px solid #0023C3;"></div>
|
|
4273
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4274
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#0023C3; margin-bottom:8px;">ppt-skt-interactive-ai-pyramid</p>
|
|
4275
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">SKT 인터랙티브 AI 피라미드</p>
|
|
4276
|
+
</div>
|
|
4277
|
+
</div>
|
|
4278
|
+
<div class="card-info">
|
|
4279
|
+
<div class="card-num">DD52 — DESIGN-DIVERSITY</div>
|
|
4280
|
+
<div class="card-title">SKT 인터랙티브 AI 피라미드</div>
|
|
4281
|
+
<div class="card-desc">SK텔레콤 2024 연간보고서처럼 별빛 표지에 큰 영문 슬로건과 입체 피라미드 다이어그램이 시그니처. 짙은 보라색 한 가지로 통일하고 위에 PDF 탭 메뉴가 떠있는 인터랙티브 보고서 미감 — AI·테크 기업의 비전 발표, 통합보고서, 전략 키노트에 어울립니다.</div>
|
|
4282
|
+
<div class="tags"><span class="tag-pill">monochrome-blue · thin-display · asymmetric-content-driven · balanced-with-whitespace · subtle</span></div>
|
|
4283
|
+
</div>
|
|
4284
|
+
</div>
|
|
4285
|
+
|
|
4286
|
+
<!-- DD53 ppt-hyundai-cinematic-investor-day -->
|
|
4287
|
+
<div class="card">
|
|
4288
|
+
<div class="preview" style="background: #101030; color: #FFFFFF; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4289
|
+
<div style="position:absolute; inset:18px; border:1px solid #66FFFF;"></div>
|
|
4290
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#14274A; border-left:8px solid #66FFFF;"></div>
|
|
4291
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4292
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#66FFFF; margin-bottom:8px;">ppt-hyundai-cinematic-investor-day</p>
|
|
4293
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#FFFFFF;">현대차 시네마틱 인베스터데이</p>
|
|
4294
|
+
</div>
|
|
4295
|
+
</div>
|
|
4296
|
+
<div class="card-info">
|
|
4297
|
+
<div class="card-num">DD53 — DESIGN-DIVERSITY</div>
|
|
4298
|
+
<div class="card-title">현대차 시네마틱 인베스터데이</div>
|
|
4299
|
+
<div class="card-desc">현대차 인베스터데이처럼 다크 네이비 무대에 미래적 사이안 라인이 흐르는 컨퍼런스 키노트 톤. 거대한 흰색 숫자, ∞ 모양 컨셉 다이어그램, 7장 카드에 큰 사이안 숫자가 박힌 양식 — AI·EV·미래 모빌리티·신사업 발표, 테크 컨퍼런스 키노트에 어울립니다.</div>
|
|
4300
|
+
<div class="tags"><span class="tag-pill">dark · heavy-display · full-bleed · balanced · subtle</span></div>
|
|
4301
|
+
</div>
|
|
4302
|
+
</div>
|
|
4303
|
+
|
|
4304
|
+
<!-- DD54 ppt-naver-integrated-report-award -->
|
|
4305
|
+
<div class="card">
|
|
4306
|
+
<div class="preview" style="background: #FFFFFF; color: #111118; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4307
|
+
<div style="position:absolute; inset:18px; border:1px solid #03C75A;"></div>
|
|
4308
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#F5F5F5; border-left:8px solid #03C75A;"></div>
|
|
4309
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4310
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#03C75A; margin-bottom:8px;">ppt-naver-integrated-report-award</p>
|
|
4311
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#111118;">네이버 통합보고서 어워드</p>
|
|
4312
|
+
</div>
|
|
4313
|
+
</div>
|
|
4314
|
+
<div class="card-info">
|
|
4315
|
+
<div class="card-num">DD54 — DESIGN-DIVERSITY</div>
|
|
4316
|
+
<div class="card-title">네이버 통합보고서 어워드</div>
|
|
4317
|
+
<div class="card-desc">네이버 2024 통합보고서(iF Design Award 수상작) 스타일. 페이지 가득 채우는 큰 영문 디스플레이 글씨, 부드러운 그린 안개 그라디언트, 5개 사업부문이 각자 색을 갖는 카드, 한국식 숫자+단위 표기('4천 8백만 명') — 어워드급 디자인이 필요한 통합보고서·ESG 리포트·연간 리뷰에 어울립니다.</div>
|
|
4318
|
+
<div class="tags"><span class="tag-pill">multi-segment-signature · giant-display-sans · data-card-grid · dual-mode-breath · subtle</span></div>
|
|
4319
|
+
</div>
|
|
4320
|
+
</div>
|
|
4321
|
+
|
|
4322
|
+
<!-- DD55 ppt-kakao-friendly-card-news -->
|
|
4323
|
+
<div class="card">
|
|
4324
|
+
<div class="preview" style="background: #F2F2F2; color: #000000; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4325
|
+
<div style="position:absolute; inset:18px; border:1px solid #FBE100;"></div>
|
|
4326
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #FBE100;"></div>
|
|
4327
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4328
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#FBE100; margin-bottom:8px;">ppt-kakao-friendly-card-news</p>
|
|
4329
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#000000;">카카오 1Q26 보수 IR</p>
|
|
4330
|
+
</div>
|
|
4331
|
+
</div>
|
|
4332
|
+
<div class="card-info">
|
|
4333
|
+
<div class="card-num">DD55 — DESIGN-DIVERSITY</div>
|
|
4334
|
+
<div class="card-title">카카오 1Q26 보수 IR</div>
|
|
4335
|
+
<div class="card-desc">카카오 분기 실적발표 스타일. 회색 배경에 옐로우 강조 한두 점, 좌측 끝에 반쪽 알약 타이틀, 분기 비교 표에 1분기 칸을 빨강 네모로 둘러싼 IR 분석가 데크 — 보수적 톤의 분기·연간 실적 발표, 테크 기업 IR에 어울립니다.</div>
|
|
4336
|
+
<div class="tags"><span class="tag-pill">accent-signal · humanist-sans · strict-grid · balanced · subtle</span></div>
|
|
4337
|
+
</div>
|
|
4338
|
+
</div>
|
|
4339
|
+
|
|
4340
|
+
<!-- DD56 ppt-motie-slogan-infographic -->
|
|
4341
|
+
<div class="card">
|
|
4342
|
+
<div class="preview" style="background: #111118; color: #f0f0f5; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4343
|
+
<div style="position:absolute; inset:18px; border:1px solid #001838;"></div>
|
|
4344
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #001838;"></div>
|
|
4345
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4346
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#001838; margin-bottom:8px;">ppt-motie-slogan-infographic</p>
|
|
4347
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#f0f0f5;">산업통상부 슬로건 캘리그래피</p>
|
|
4348
|
+
</div>
|
|
4349
|
+
</div>
|
|
4350
|
+
<div class="card-info">
|
|
4351
|
+
<div class="card-num">DD56 — DESIGN-DIVERSITY</div>
|
|
4352
|
+
<div class="card-title">산업통상부 슬로건 캘리그래피</div>
|
|
4353
|
+
<div class="card-desc">한국 정부 부처 업무보고 톤. 거대한 한글 캘리그래피 손글씨 슬로건이 풀스크린으로 박히고, 한반도·세계지도 인포그래픽과 영웅 실루엣(이순신 등), 시안+옐로그린 빛이 흐르는 다이어그램이 등장. 차트·표 없이 큰 숫자 카드만 — 정부·공공·정책 비전 발표, 국가 전략 보고에 어울립니다.</div>
|
|
4354
|
+
<div class="tags"><span class="tag-pill">navy-mono-with-gold-cyan-accent · slogan-calligraphy-driven · asymmetric-card-grid + photo-fullscreen + map-pin-infographic · generous-breathing-slogan-dominant · none</span></div>
|
|
4355
|
+
</div>
|
|
4356
|
+
</div>
|
|
4357
|
+
|
|
4358
|
+
<!-- DD57 ppt-msit-ai-three-powers -->
|
|
4359
|
+
<div class="card">
|
|
4360
|
+
<div class="preview" style="background: #E7F1FA; color: #1C2848; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4361
|
+
<div style="position:absolute; inset:18px; border:1px solid #002060;"></div>
|
|
4362
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#FFFFFF; border-left:8px solid #002060;"></div>
|
|
4363
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4364
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#002060; margin-bottom:8px;">ppt-msit-ai-three-powers</p>
|
|
4365
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#1C2848;">과기정통부 정통 정부 라이트</p>
|
|
4366
|
+
</div>
|
|
4367
|
+
</div>
|
|
4368
|
+
<div class="card-info">
|
|
4369
|
+
<div class="card-num">DD57 — DESIGN-DIVERSITY</div>
|
|
4370
|
+
<div class="card-title">과기정통부 정통 정부 라이트</div>
|
|
4371
|
+
<div class="card-desc">한국 정부 부처 업무보고의 정통 라이트 톤. 옅은 하늘색 배경에 진한 네이비 글씨, 페이지 하단에 네이비 띠로 핵심 키워드 노출, 중앙 부처를 둘러싼 위성 노드의 거버넌스 다이어그램이 클라이맥스 — 정부·공공 정책 보고, 부처 업무계획, 행정 발표에 어울립니다.</div>
|
|
4372
|
+
<div class="tags"><span class="tag-pill">light-navy-pale-blue · pretendard-balanced · asymmetric-2col-with-ribbon · balanced · none</span></div>
|
|
4373
|
+
</div>
|
|
4374
|
+
</div>
|
|
4375
|
+
|
|
4376
|
+
<!-- DD58 ppt-moef-fiscal-blue -->
|
|
4377
|
+
<div class="card">
|
|
4378
|
+
<div class="preview" style="background: #111118; color: #0D1627; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4379
|
+
<div style="position:absolute; inset:18px; border:1px solid #05091A;"></div>
|
|
4380
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #05091A;"></div>
|
|
4381
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4382
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#05091A; margin-bottom:8px;">ppt-moef-fiscal-blue</p>
|
|
4383
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#0D1627;">기획재정부 시네마틱 브리핑</p>
|
|
4384
|
+
</div>
|
|
4385
|
+
</div>
|
|
4386
|
+
<div class="card-info">
|
|
4387
|
+
<div class="card-num">DD58 — DESIGN-DIVERSITY</div>
|
|
4388
|
+
<div class="card-title">기획재정부 시네마틱 브리핑</div>
|
|
4389
|
+
<div class="card-desc">한국 기획재정부 업무보고처럼 다크 네이비 표지·구분면과 오프화이트 본문이 교차하는 시네마틱 정부 브리핑 톤. 매 페이지마다 핵심 단어 1~3글자에 노란 형광펜을 그어 강조하고, 가로 화살표 리본·라인 차트·거대 원 다이어그램이 시그니처 — 정부 거시 정책 발표, 경제 전망, 예산 브리핑에 어울립니다.</div>
|
|
4390
|
+
<div class="tags"><span class="tag-pill">multi · mixed · hybrid · medium · minimal</span></div>
|
|
4391
|
+
</div>
|
|
4392
|
+
</div>
|
|
4393
|
+
|
|
4394
|
+
<!-- DD59 ppt-mcst-k-culture -->
|
|
4395
|
+
<div class="card">
|
|
4396
|
+
<div class="preview" style="background: #111118; color: #f0f0f5; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4397
|
+
<div style="position:absolute; inset:18px; border:1px solid #EEF2F7;"></div>
|
|
4398
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #EEF2F7;"></div>
|
|
4399
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4400
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#EEF2F7; margin-bottom:8px;">ppt-mcst-k-culture</p>
|
|
4401
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#f0f0f5;">문체부 K-컬처 라벤더</p>
|
|
4402
|
+
</div>
|
|
4403
|
+
</div>
|
|
4404
|
+
<div class="card-info">
|
|
4405
|
+
<div class="card-num">DD59 — DESIGN-DIVERSITY</div>
|
|
4406
|
+
<div class="card-title">문체부 K-컬처 라벤더</div>
|
|
4407
|
+
<div class="card-desc">한국 문화체육관광부 K-컬처 업무보고 톤. 옅은 라벤더 강조점과 한지·한복 갈색 라벨, 풀-블리드 라벤더 베일이 깔린 섹션 표지, ▶▶ 갈매기 화살표 불릿이 시그니처 — 문화·예술·관광 정책 발표, K-콘텐츠 비전, 문화 산업 보고에 어울립니다.</div>
|
|
4408
|
+
<div class="tags"><span class="tag-pill">pastel-accent · mixed · hybrid · medium · static</span></div>
|
|
4409
|
+
</div>
|
|
4410
|
+
</div>
|
|
4411
|
+
|
|
4412
|
+
<!-- DD60 ppt-unikorea-peace-coexistence -->
|
|
4413
|
+
<div class="card">
|
|
4414
|
+
<div class="preview" style="background: #050829; color: #f0f0f5; align-items: stretch; justify-content: stretch; padding: 18px;">
|
|
4415
|
+
<div style="position:absolute; inset:18px; border:1px solid #001B4A;"></div>
|
|
4416
|
+
<div style="position:absolute; right:22px; top:22px; width:76px; height:76px; background:#1e1e2e; border-left:8px solid #001B4A;"></div>
|
|
4417
|
+
<div style="position:absolute; left:22px; bottom:22px; right:22px;">
|
|
4418
|
+
<p style="font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; color:#001B4A; margin-bottom:8px;">ppt-unikorea-peace-coexistence</p>
|
|
4419
|
+
<p style="font-weight:900; font-size:22px; line-height:1.15; color:#f0f0f5;">통일부 한반도 평화공존</p>
|
|
4420
|
+
</div>
|
|
4421
|
+
</div>
|
|
4422
|
+
<div class="card-info">
|
|
4423
|
+
<div class="card-num">DD60 — DESIGN-DIVERSITY</div>
|
|
4424
|
+
<div class="card-title">통일부 한반도 평화공존</div>
|
|
4425
|
+
<div class="card-desc">한국 통일부 한반도 평화공존 업무보고 톤. 다크 네이비 풀-블리드 위에 흰 카드가 떠있고, 표지와 종결 페이지에 한반도 발광 지도(북측 레드 글로우 / 남측 시안 글로우)가 거울처럼 박힌 북엔드 모티프 — 외교·통일·평화·국제관계 정책 발표, 정상회담 자료에 어울립니다.</div>
|
|
4426
|
+
<div class="tags"><span class="tag-pill">dark · mixed · strict-grid · balanced · subtle</span></div>
|
|
4427
|
+
</div>
|
|
4428
|
+
</div>
|
|
4429
|
+
|
|
4430
|
+
</div>
|
|
4431
|
+
|
|
4432
|
+
<footer>
|
|
4433
|
+
<p>Styles 01–30 derived from <a href="https://github.com/corazzon/pptx-design-styles" target="_blank" style="color: var(--accent); text-decoration: none;">corazzon/pptx-design-styles</a> (MIT). Styles 31–35 are slides-grab originals. Styles DD01–DD60 are derived from <a href="https://github.com/epoko77-ai/design-diversity" target="_blank" style="color: var(--accent); text-decoration: none;">epoko77-ai/design-diversity</a> (MIT).</p>
|
|
4434
|
+
</footer>
|
|
4435
|
+
|
|
4436
|
+
</body>
|
|
4437
|
+
|
|
4438
|
+
</html>
|