codex-linux 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -19
- package/abyss-teal-design-system.html +1449 -0
- package/dist/renderer/assets/main-AJwWHWV7.js +304 -0
- package/dist/renderer/assets/main-ua9RiJ9-.css +1 -0
- package/dist/renderer/index.html +2 -2
- package/package.json +2 -2
- package/src/renderer/App.tsx +45 -15
- package/src/renderer/components/AgentPanel.tsx +94 -125
- package/src/renderer/components/AutomationPanel.tsx +39 -34
- package/src/renderer/components/ChatInterface.tsx +81 -123
- package/src/renderer/components/Header.tsx +24 -38
- package/src/renderer/components/SettingsPanel.tsx +89 -96
- package/src/renderer/components/Sidebar.tsx +33 -51
- package/src/renderer/components/SkillsPanel.tsx +54 -56
- package/src/renderer/components/WelcomeChat.tsx +199 -0
- package/src/renderer/components/WorktreePanel.tsx +32 -27
- package/src/renderer/components/ui/Button.tsx +17 -19
- package/src/renderer/components/ui/Card.tsx +14 -15
- package/src/renderer/components/ui/Input.tsx +12 -13
- package/src/renderer/index.css +37 -59
- package/src/renderer/styles/abyss-teal.css +405 -0
- package/dist/renderer/assets/main-DJlZQBCA.js +0 -304
- package/dist/renderer/assets/main-N33ZXEr8.css +0 -1
|
@@ -0,0 +1,1449 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Abyss Teal — Identité Visuelle Claude</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,200;1,9..144,300&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
/* ============================================
|
|
12
|
+
ABYSS TEAL — DESIGN SYSTEM
|
|
13
|
+
Claude Desktop Visual Identity
|
|
14
|
+
============================================ */
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
/* --- Backgrounds --- */
|
|
18
|
+
--bg-void: #030709; /* Plus sombre que le noir pur */
|
|
19
|
+
--bg-primary: #050A0C; /* Fond principal app */
|
|
20
|
+
--bg-surface: #080F12; /* Panneaux, sidebars */
|
|
21
|
+
--bg-card: #0A1318; /* Cards, modales */
|
|
22
|
+
--bg-elevated: #0D1920; /* Éléments surélevés */
|
|
23
|
+
--bg-hover: #102028; /* Hover states */
|
|
24
|
+
--bg-active: #142830; /* Active / sélectionné */
|
|
25
|
+
|
|
26
|
+
/* --- Borders --- */
|
|
27
|
+
--border-faint: rgba(0,200,168,0.06);
|
|
28
|
+
--border-subtle: #102028;
|
|
29
|
+
--border-default:#1B3040;
|
|
30
|
+
--border-accent: rgba(0,200,168,0.25);
|
|
31
|
+
|
|
32
|
+
/* --- Accent Teal --- */
|
|
33
|
+
--teal-900: #002822;
|
|
34
|
+
--teal-700: #005C4E;
|
|
35
|
+
--teal-500: #009E88; /* CTA, boutons */
|
|
36
|
+
--teal-400: #00C4A6; /* Accent principal */
|
|
37
|
+
--teal-300: #00DFC0; /* Highlights, focus */
|
|
38
|
+
--teal-200: #7EEEDE; /* Texte accent */
|
|
39
|
+
--teal-100: #B8F5EC; /* Glow, light */
|
|
40
|
+
|
|
41
|
+
/* --- Text --- */
|
|
42
|
+
--text-primary: #D8EEE8; /* Texte principal */
|
|
43
|
+
--text-secondary: #7AADA0; /* Texte secondaire */
|
|
44
|
+
--text-muted: #3E6860; /* Métadonnées, labels */
|
|
45
|
+
--text-disabled: #1E3830; /* Désactivé */
|
|
46
|
+
--text-inverse: #050A0C; /* Sur fond clair */
|
|
47
|
+
|
|
48
|
+
/* --- Semantic --- */
|
|
49
|
+
--success: #3CC878;
|
|
50
|
+
--warning: #E6B94A;
|
|
51
|
+
--error: #E85A6A;
|
|
52
|
+
--info: #6890F4;
|
|
53
|
+
|
|
54
|
+
/* --- Typographie --- */
|
|
55
|
+
--font-display: 'Fraunces', Georgia, serif;
|
|
56
|
+
--font-body: 'DM Sans', system-ui, sans-serif;
|
|
57
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
58
|
+
|
|
59
|
+
/* --- Spacing --- */
|
|
60
|
+
--space-1: 4px;
|
|
61
|
+
--space-2: 8px;
|
|
62
|
+
--space-3: 12px;
|
|
63
|
+
--space-4: 16px;
|
|
64
|
+
--space-5: 20px;
|
|
65
|
+
--space-6: 24px;
|
|
66
|
+
--space-8: 32px;
|
|
67
|
+
--space-10: 40px;
|
|
68
|
+
--space-12: 48px;
|
|
69
|
+
--space-16: 64px;
|
|
70
|
+
|
|
71
|
+
/* --- Radius --- */
|
|
72
|
+
--radius-sm: 6px;
|
|
73
|
+
--radius-md: 10px;
|
|
74
|
+
--radius-lg: 14px;
|
|
75
|
+
--radius-xl: 20px;
|
|
76
|
+
--radius-full: 999px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* ============================================ */
|
|
80
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
81
|
+
|
|
82
|
+
body {
|
|
83
|
+
background: var(--bg-void);
|
|
84
|
+
font-family: var(--font-body);
|
|
85
|
+
color: var(--text-primary);
|
|
86
|
+
line-height: 1.6;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ---- Layout ---- */
|
|
90
|
+
.page { max-width: 1100px; margin: 0 auto; padding: 0 48px 120px; }
|
|
91
|
+
|
|
92
|
+
/* ---- Section ---- */
|
|
93
|
+
.section { padding-top: 80px; }
|
|
94
|
+
.section + .section { border-top: 1px solid var(--border-faint); margin-top: 20px; }
|
|
95
|
+
|
|
96
|
+
/* ---- Section header ---- */
|
|
97
|
+
.section-label {
|
|
98
|
+
font-size: 10px;
|
|
99
|
+
font-weight: 500;
|
|
100
|
+
letter-spacing: 0.2em;
|
|
101
|
+
text-transform: uppercase;
|
|
102
|
+
color: var(--teal-500);
|
|
103
|
+
margin-bottom: 6px;
|
|
104
|
+
}
|
|
105
|
+
.section-title {
|
|
106
|
+
font-family: var(--font-display);
|
|
107
|
+
font-size: 32px;
|
|
108
|
+
font-weight: 300;
|
|
109
|
+
font-style: italic;
|
|
110
|
+
color: var(--text-primary);
|
|
111
|
+
margin-bottom: 6px;
|
|
112
|
+
letter-spacing: -0.01em;
|
|
113
|
+
}
|
|
114
|
+
.section-sub {
|
|
115
|
+
font-size: 13px;
|
|
116
|
+
color: var(--text-muted);
|
|
117
|
+
margin-bottom: 40px;
|
|
118
|
+
line-height: 1.7;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* ---- Hero ---- */
|
|
122
|
+
.hero {
|
|
123
|
+
min-height: 340px;
|
|
124
|
+
display: flex;
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
justify-content: flex-end;
|
|
127
|
+
padding: 64px 0 56px;
|
|
128
|
+
position: relative;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
}
|
|
131
|
+
.hero-glow-a {
|
|
132
|
+
position: absolute;
|
|
133
|
+
width: 600px; height: 400px;
|
|
134
|
+
top: -120px; right: -100px;
|
|
135
|
+
background: radial-gradient(ellipse, rgba(0,200,168,0.09) 0%, transparent 65%);
|
|
136
|
+
pointer-events: none;
|
|
137
|
+
}
|
|
138
|
+
.hero-glow-b {
|
|
139
|
+
position: absolute;
|
|
140
|
+
width: 300px; height: 300px;
|
|
141
|
+
bottom: -80px; left: -60px;
|
|
142
|
+
background: radial-gradient(circle, rgba(0,150,130,0.06) 0%, transparent 70%);
|
|
143
|
+
pointer-events: none;
|
|
144
|
+
}
|
|
145
|
+
.hero-eyebrow {
|
|
146
|
+
font-size: 11px;
|
|
147
|
+
font-weight: 500;
|
|
148
|
+
letter-spacing: 0.2em;
|
|
149
|
+
text-transform: uppercase;
|
|
150
|
+
color: var(--teal-400);
|
|
151
|
+
margin-bottom: 16px;
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
gap: 10px;
|
|
155
|
+
}
|
|
156
|
+
.hero-eyebrow::before {
|
|
157
|
+
content: '';
|
|
158
|
+
display: block;
|
|
159
|
+
width: 28px; height: 1px;
|
|
160
|
+
background: var(--teal-500);
|
|
161
|
+
}
|
|
162
|
+
.hero h1 {
|
|
163
|
+
font-family: var(--font-display);
|
|
164
|
+
font-size: clamp(40px, 6vw, 72px);
|
|
165
|
+
font-weight: 300;
|
|
166
|
+
font-style: italic;
|
|
167
|
+
line-height: 1.05;
|
|
168
|
+
letter-spacing: -0.025em;
|
|
169
|
+
color: var(--text-primary);
|
|
170
|
+
max-width: 700px;
|
|
171
|
+
}
|
|
172
|
+
.hero h1 em {
|
|
173
|
+
color: var(--teal-400);
|
|
174
|
+
font-style: italic;
|
|
175
|
+
}
|
|
176
|
+
.hero-meta {
|
|
177
|
+
margin-top: 24px;
|
|
178
|
+
font-size: 12px;
|
|
179
|
+
color: var(--text-muted);
|
|
180
|
+
display: flex;
|
|
181
|
+
gap: 24px;
|
|
182
|
+
align-items: center;
|
|
183
|
+
}
|
|
184
|
+
.hero-meta span { display: flex; align-items: center; gap: 6px; }
|
|
185
|
+
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal-700); }
|
|
186
|
+
|
|
187
|
+
/* ============================================================
|
|
188
|
+
COLOR SECTION
|
|
189
|
+
============================================================ */
|
|
190
|
+
.color-grid {
|
|
191
|
+
display: grid;
|
|
192
|
+
grid-template-columns: repeat(8, 1fr);
|
|
193
|
+
gap: 10px;
|
|
194
|
+
margin-bottom: 32px;
|
|
195
|
+
}
|
|
196
|
+
.color-group {
|
|
197
|
+
display: flex;
|
|
198
|
+
flex-direction: column;
|
|
199
|
+
gap: 10px;
|
|
200
|
+
}
|
|
201
|
+
.color-group-title {
|
|
202
|
+
font-size: 9px;
|
|
203
|
+
letter-spacing: 0.15em;
|
|
204
|
+
text-transform: uppercase;
|
|
205
|
+
color: var(--text-muted);
|
|
206
|
+
margin-bottom: 4px;
|
|
207
|
+
font-weight: 500;
|
|
208
|
+
}
|
|
209
|
+
.color-row {
|
|
210
|
+
display: flex;
|
|
211
|
+
gap: 8px;
|
|
212
|
+
flex-wrap: wrap;
|
|
213
|
+
margin-bottom: 24px;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.swatch-card {
|
|
217
|
+
flex: 1;
|
|
218
|
+
min-width: 100px;
|
|
219
|
+
border-radius: var(--radius-md);
|
|
220
|
+
overflow: hidden;
|
|
221
|
+
border: 1px solid var(--border-faint);
|
|
222
|
+
}
|
|
223
|
+
.swatch-body {
|
|
224
|
+
height: 72px;
|
|
225
|
+
position: relative;
|
|
226
|
+
}
|
|
227
|
+
.swatch-body.big { height: 120px; }
|
|
228
|
+
.swatch-info {
|
|
229
|
+
background: var(--bg-card);
|
|
230
|
+
padding: 10px 12px;
|
|
231
|
+
}
|
|
232
|
+
.swatch-name {
|
|
233
|
+
font-size: 11px;
|
|
234
|
+
font-weight: 500;
|
|
235
|
+
color: var(--text-secondary);
|
|
236
|
+
margin-bottom: 2px;
|
|
237
|
+
}
|
|
238
|
+
.swatch-hex {
|
|
239
|
+
font-family: var(--font-mono);
|
|
240
|
+
font-size: 10px;
|
|
241
|
+
color: var(--text-muted);
|
|
242
|
+
}
|
|
243
|
+
.swatch-role {
|
|
244
|
+
font-size: 9px;
|
|
245
|
+
color: var(--text-disabled);
|
|
246
|
+
letter-spacing: 0.05em;
|
|
247
|
+
text-transform: uppercase;
|
|
248
|
+
margin-top: 2px;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* Teal scale strip */
|
|
252
|
+
.teal-strip {
|
|
253
|
+
display: flex;
|
|
254
|
+
border-radius: var(--radius-lg);
|
|
255
|
+
overflow: hidden;
|
|
256
|
+
height: 80px;
|
|
257
|
+
margin-bottom: 28px;
|
|
258
|
+
}
|
|
259
|
+
.teal-strip-segment {
|
|
260
|
+
flex: 1;
|
|
261
|
+
display: flex;
|
|
262
|
+
flex-direction: column;
|
|
263
|
+
justify-content: flex-end;
|
|
264
|
+
padding: 8px 10px;
|
|
265
|
+
position: relative;
|
|
266
|
+
}
|
|
267
|
+
.teal-strip-hex {
|
|
268
|
+
font-family: var(--font-mono);
|
|
269
|
+
font-size: 9px;
|
|
270
|
+
opacity: 0.7;
|
|
271
|
+
}
|
|
272
|
+
.teal-strip-name {
|
|
273
|
+
font-size: 9px;
|
|
274
|
+
opacity: 0.6;
|
|
275
|
+
letter-spacing: 0.04em;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/* ============================================================
|
|
279
|
+
TYPOGRAPHY SECTION
|
|
280
|
+
============================================================ */
|
|
281
|
+
.type-sample {
|
|
282
|
+
background: var(--bg-surface);
|
|
283
|
+
border: 1px solid var(--border-subtle);
|
|
284
|
+
border-radius: var(--radius-lg);
|
|
285
|
+
padding: 36px 40px;
|
|
286
|
+
margin-bottom: 16px;
|
|
287
|
+
}
|
|
288
|
+
.type-meta {
|
|
289
|
+
display: flex;
|
|
290
|
+
justify-content: space-between;
|
|
291
|
+
align-items: flex-end;
|
|
292
|
+
margin-top: 12px;
|
|
293
|
+
padding-top: 12px;
|
|
294
|
+
border-top: 1px solid var(--border-faint);
|
|
295
|
+
font-size: 10px;
|
|
296
|
+
color: var(--text-muted);
|
|
297
|
+
font-family: var(--font-mono);
|
|
298
|
+
}
|
|
299
|
+
.type-pair {
|
|
300
|
+
display: grid;
|
|
301
|
+
grid-template-columns: 1fr 1fr;
|
|
302
|
+
gap: 16px;
|
|
303
|
+
margin-bottom: 16px;
|
|
304
|
+
}
|
|
305
|
+
.t-display {
|
|
306
|
+
font-family: var(--font-display);
|
|
307
|
+
font-size: 52px;
|
|
308
|
+
font-weight: 300;
|
|
309
|
+
font-style: italic;
|
|
310
|
+
line-height: 1.05;
|
|
311
|
+
letter-spacing: -0.02em;
|
|
312
|
+
color: var(--text-primary);
|
|
313
|
+
}
|
|
314
|
+
.t-display em { color: var(--teal-400); }
|
|
315
|
+
.t-heading-1 {
|
|
316
|
+
font-family: var(--font-display);
|
|
317
|
+
font-size: 28px;
|
|
318
|
+
font-weight: 300;
|
|
319
|
+
letter-spacing: -0.01em;
|
|
320
|
+
color: var(--text-primary);
|
|
321
|
+
}
|
|
322
|
+
.t-heading-2 {
|
|
323
|
+
font-family: var(--font-body);
|
|
324
|
+
font-size: 18px;
|
|
325
|
+
font-weight: 500;
|
|
326
|
+
color: var(--text-primary);
|
|
327
|
+
letter-spacing: -0.005em;
|
|
328
|
+
}
|
|
329
|
+
.t-body {
|
|
330
|
+
font-family: var(--font-body);
|
|
331
|
+
font-size: 14px;
|
|
332
|
+
color: var(--text-secondary);
|
|
333
|
+
line-height: 1.7;
|
|
334
|
+
font-weight: 400;
|
|
335
|
+
}
|
|
336
|
+
.t-small {
|
|
337
|
+
font-family: var(--font-body);
|
|
338
|
+
font-size: 12px;
|
|
339
|
+
color: var(--text-muted);
|
|
340
|
+
letter-spacing: 0.01em;
|
|
341
|
+
}
|
|
342
|
+
.t-label {
|
|
343
|
+
font-family: var(--font-body);
|
|
344
|
+
font-size: 10px;
|
|
345
|
+
font-weight: 500;
|
|
346
|
+
letter-spacing: 0.15em;
|
|
347
|
+
text-transform: uppercase;
|
|
348
|
+
color: var(--teal-500);
|
|
349
|
+
}
|
|
350
|
+
.t-mono {
|
|
351
|
+
font-family: var(--font-mono);
|
|
352
|
+
font-size: 13px;
|
|
353
|
+
color: var(--teal-300);
|
|
354
|
+
line-height: 1.8;
|
|
355
|
+
}
|
|
356
|
+
.t-mono .kw { color: var(--teal-400); }
|
|
357
|
+
.t-mono .str { color: var(--teal-200); }
|
|
358
|
+
.t-mono .cm { color: var(--text-muted); }
|
|
359
|
+
|
|
360
|
+
/* ============================================================
|
|
361
|
+
COMPONENTS
|
|
362
|
+
============================================================ */
|
|
363
|
+
.components-grid {
|
|
364
|
+
display: grid;
|
|
365
|
+
grid-template-columns: 1fr 1fr;
|
|
366
|
+
gap: 16px;
|
|
367
|
+
}
|
|
368
|
+
.component-block {
|
|
369
|
+
background: var(--bg-surface);
|
|
370
|
+
border: 1px solid var(--border-subtle);
|
|
371
|
+
border-radius: var(--radius-lg);
|
|
372
|
+
padding: 28px 28px 32px;
|
|
373
|
+
}
|
|
374
|
+
.component-block.full { grid-column: 1 / -1; }
|
|
375
|
+
.comp-label {
|
|
376
|
+
font-size: 9px;
|
|
377
|
+
letter-spacing: 0.15em;
|
|
378
|
+
text-transform: uppercase;
|
|
379
|
+
color: var(--text-muted);
|
|
380
|
+
margin-bottom: 20px;
|
|
381
|
+
font-weight: 500;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* Buttons */
|
|
385
|
+
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
|
386
|
+
|
|
387
|
+
.btn {
|
|
388
|
+
display: inline-flex;
|
|
389
|
+
align-items: center;
|
|
390
|
+
gap: 6px;
|
|
391
|
+
border-radius: var(--radius-sm);
|
|
392
|
+
font-family: var(--font-body);
|
|
393
|
+
font-weight: 500;
|
|
394
|
+
cursor: pointer;
|
|
395
|
+
border: none;
|
|
396
|
+
transition: all 0.18s ease;
|
|
397
|
+
white-space: nowrap;
|
|
398
|
+
}
|
|
399
|
+
.btn-primary {
|
|
400
|
+
background: var(--teal-500);
|
|
401
|
+
color: var(--bg-void);
|
|
402
|
+
padding: 9px 18px;
|
|
403
|
+
font-size: 13px;
|
|
404
|
+
}
|
|
405
|
+
.btn-primary:hover { background: var(--teal-400); }
|
|
406
|
+
|
|
407
|
+
.btn-secondary {
|
|
408
|
+
background: transparent;
|
|
409
|
+
color: var(--teal-400);
|
|
410
|
+
border: 1px solid var(--border-accent);
|
|
411
|
+
padding: 8px 18px;
|
|
412
|
+
font-size: 13px;
|
|
413
|
+
}
|
|
414
|
+
.btn-secondary:hover { background: rgba(0,200,168,0.06); }
|
|
415
|
+
|
|
416
|
+
.btn-ghost {
|
|
417
|
+
background: transparent;
|
|
418
|
+
color: var(--text-secondary);
|
|
419
|
+
padding: 8px 14px;
|
|
420
|
+
font-size: 13px;
|
|
421
|
+
}
|
|
422
|
+
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|
423
|
+
|
|
424
|
+
.btn-sm {
|
|
425
|
+
padding: 6px 12px;
|
|
426
|
+
font-size: 11px;
|
|
427
|
+
border-radius: var(--radius-sm);
|
|
428
|
+
}
|
|
429
|
+
.btn-icon {
|
|
430
|
+
padding: 8px;
|
|
431
|
+
border-radius: var(--radius-sm);
|
|
432
|
+
background: var(--bg-elevated);
|
|
433
|
+
color: var(--text-secondary);
|
|
434
|
+
border: 1px solid var(--border-subtle);
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
/* Tabs */
|
|
438
|
+
.tabs {
|
|
439
|
+
display: flex;
|
|
440
|
+
gap: 2px;
|
|
441
|
+
background: var(--bg-elevated);
|
|
442
|
+
padding: 3px;
|
|
443
|
+
border-radius: 8px;
|
|
444
|
+
width: fit-content;
|
|
445
|
+
margin-bottom: 20px;
|
|
446
|
+
}
|
|
447
|
+
.tab {
|
|
448
|
+
padding: 6px 16px;
|
|
449
|
+
border-radius: 6px;
|
|
450
|
+
font-size: 12px;
|
|
451
|
+
font-weight: 500;
|
|
452
|
+
color: var(--text-muted);
|
|
453
|
+
cursor: pointer;
|
|
454
|
+
transition: all 0.15s;
|
|
455
|
+
}
|
|
456
|
+
.tab.active {
|
|
457
|
+
background: var(--bg-card);
|
|
458
|
+
color: var(--text-primary);
|
|
459
|
+
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
|
|
460
|
+
}
|
|
461
|
+
.tab:hover:not(.active) { color: var(--text-secondary); }
|
|
462
|
+
|
|
463
|
+
/* Input */
|
|
464
|
+
.input-wrap { margin-bottom: 12px; }
|
|
465
|
+
.input-label-row {
|
|
466
|
+
display: flex;
|
|
467
|
+
justify-content: space-between;
|
|
468
|
+
margin-bottom: 6px;
|
|
469
|
+
}
|
|
470
|
+
.input-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
|
|
471
|
+
.input-hint { font-size: 10px; color: var(--text-muted); }
|
|
472
|
+
|
|
473
|
+
.input {
|
|
474
|
+
width: 100%;
|
|
475
|
+
background: var(--bg-elevated);
|
|
476
|
+
border: 1px solid var(--border-subtle);
|
|
477
|
+
border-radius: var(--radius-md);
|
|
478
|
+
padding: 10px 14px;
|
|
479
|
+
font-family: var(--font-body);
|
|
480
|
+
font-size: 13px;
|
|
481
|
+
color: var(--text-primary);
|
|
482
|
+
outline: none;
|
|
483
|
+
transition: border-color 0.15s, box-shadow 0.15s;
|
|
484
|
+
}
|
|
485
|
+
.input::placeholder { color: var(--text-disabled); }
|
|
486
|
+
.input:focus {
|
|
487
|
+
border-color: var(--teal-500);
|
|
488
|
+
box-shadow: 0 0 0 3px rgba(0,158,136,0.15);
|
|
489
|
+
}
|
|
490
|
+
.input.focused {
|
|
491
|
+
border-color: var(--teal-500);
|
|
492
|
+
box-shadow: 0 0 0 3px rgba(0,158,136,0.15);
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
/* Chat input */
|
|
496
|
+
.chat-input-wrap {
|
|
497
|
+
background: var(--bg-card);
|
|
498
|
+
border: 1px solid var(--border-default);
|
|
499
|
+
border-radius: var(--radius-lg);
|
|
500
|
+
padding: 14px 16px;
|
|
501
|
+
display: flex;
|
|
502
|
+
gap: 10px;
|
|
503
|
+
align-items: flex-end;
|
|
504
|
+
}
|
|
505
|
+
.chat-input-field {
|
|
506
|
+
flex: 1;
|
|
507
|
+
background: transparent;
|
|
508
|
+
border: none;
|
|
509
|
+
outline: none;
|
|
510
|
+
font-family: var(--font-body);
|
|
511
|
+
font-size: 13px;
|
|
512
|
+
color: var(--text-primary);
|
|
513
|
+
resize: none;
|
|
514
|
+
line-height: 1.5;
|
|
515
|
+
}
|
|
516
|
+
.chat-input-field::placeholder { color: var(--text-disabled); }
|
|
517
|
+
.chat-btn {
|
|
518
|
+
width: 32px; height: 32px;
|
|
519
|
+
border-radius: 8px;
|
|
520
|
+
background: var(--teal-500);
|
|
521
|
+
border: none;
|
|
522
|
+
display: flex;
|
|
523
|
+
align-items: center;
|
|
524
|
+
justify-content: center;
|
|
525
|
+
cursor: pointer;
|
|
526
|
+
flex-shrink: 0;
|
|
527
|
+
}
|
|
528
|
+
.chat-btn svg { width: 14px; height: 14px; fill: var(--bg-void); }
|
|
529
|
+
|
|
530
|
+
/* Cards */
|
|
531
|
+
.card-demo {
|
|
532
|
+
background: var(--bg-card);
|
|
533
|
+
border: 1px solid var(--border-subtle);
|
|
534
|
+
border-radius: var(--radius-lg);
|
|
535
|
+
padding: 18px;
|
|
536
|
+
transition: border-color 0.2s, transform 0.2s;
|
|
537
|
+
cursor: default;
|
|
538
|
+
}
|
|
539
|
+
.card-demo:hover {
|
|
540
|
+
border-color: var(--border-accent);
|
|
541
|
+
transform: translateY(-2px);
|
|
542
|
+
}
|
|
543
|
+
.card-title {
|
|
544
|
+
font-size: 13px;
|
|
545
|
+
font-weight: 500;
|
|
546
|
+
color: var(--text-primary);
|
|
547
|
+
margin-bottom: 4px;
|
|
548
|
+
}
|
|
549
|
+
.card-meta {
|
|
550
|
+
font-size: 11px;
|
|
551
|
+
color: var(--text-muted);
|
|
552
|
+
}
|
|
553
|
+
.cards-row {
|
|
554
|
+
display: flex;
|
|
555
|
+
gap: 10px;
|
|
556
|
+
}
|
|
557
|
+
.cards-row .card-demo { flex: 1; }
|
|
558
|
+
|
|
559
|
+
/* File card */
|
|
560
|
+
.file-card {
|
|
561
|
+
background: var(--bg-card);
|
|
562
|
+
border: 1px solid var(--border-subtle);
|
|
563
|
+
border-radius: var(--radius-md);
|
|
564
|
+
padding: 14px;
|
|
565
|
+
display: flex;
|
|
566
|
+
flex-direction: column;
|
|
567
|
+
gap: 10px;
|
|
568
|
+
}
|
|
569
|
+
.file-card-top {
|
|
570
|
+
font-size: 12px;
|
|
571
|
+
font-weight: 500;
|
|
572
|
+
color: var(--text-primary);
|
|
573
|
+
line-height: 1.4;
|
|
574
|
+
}
|
|
575
|
+
.file-card-meta { font-size: 10px; color: var(--text-muted); }
|
|
576
|
+
.file-tag {
|
|
577
|
+
display: inline-flex;
|
|
578
|
+
padding: 2px 8px;
|
|
579
|
+
background: rgba(0,200,168,0.08);
|
|
580
|
+
border: 1px solid rgba(0,200,168,0.15);
|
|
581
|
+
border-radius: 4px;
|
|
582
|
+
font-size: 9px;
|
|
583
|
+
font-weight: 500;
|
|
584
|
+
color: var(--teal-400);
|
|
585
|
+
letter-spacing: 0.05em;
|
|
586
|
+
text-transform: uppercase;
|
|
587
|
+
width: fit-content;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
/* Badge / Pill */
|
|
591
|
+
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
592
|
+
.badge {
|
|
593
|
+
display: inline-flex;
|
|
594
|
+
align-items: center;
|
|
595
|
+
gap: 5px;
|
|
596
|
+
padding: 3px 10px;
|
|
597
|
+
border-radius: var(--radius-full);
|
|
598
|
+
font-size: 11px;
|
|
599
|
+
font-weight: 500;
|
|
600
|
+
}
|
|
601
|
+
.badge-teal {
|
|
602
|
+
background: rgba(0,200,168,0.1);
|
|
603
|
+
border: 1px solid rgba(0,200,168,0.2);
|
|
604
|
+
color: var(--teal-300);
|
|
605
|
+
}
|
|
606
|
+
.badge-neutral {
|
|
607
|
+
background: rgba(255,255,255,0.04);
|
|
608
|
+
border: 1px solid rgba(255,255,255,0.06);
|
|
609
|
+
color: var(--text-secondary);
|
|
610
|
+
}
|
|
611
|
+
.badge-success {
|
|
612
|
+
background: rgba(60,200,120,0.1);
|
|
613
|
+
border: 1px solid rgba(60,200,120,0.2);
|
|
614
|
+
color: #3CC878;
|
|
615
|
+
}
|
|
616
|
+
.badge-warning {
|
|
617
|
+
background: rgba(230,185,74,0.1);
|
|
618
|
+
border: 1px solid rgba(230,185,74,0.2);
|
|
619
|
+
color: #E6B94A;
|
|
620
|
+
}
|
|
621
|
+
.badge-error {
|
|
622
|
+
background: rgba(232,90,106,0.1);
|
|
623
|
+
border: 1px solid rgba(232,90,106,0.2);
|
|
624
|
+
color: #E85A6A;
|
|
625
|
+
}
|
|
626
|
+
.badge-dot {
|
|
627
|
+
width: 5px; height: 5px;
|
|
628
|
+
border-radius: 50%;
|
|
629
|
+
background: currentColor;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
/* Progress */
|
|
633
|
+
.progress-row { display: flex; flex-direction: column; gap: 12px; }
|
|
634
|
+
.progress-item { display: flex; flex-direction: column; gap: 5px; }
|
|
635
|
+
.progress-label-row {
|
|
636
|
+
display: flex;
|
|
637
|
+
justify-content: space-between;
|
|
638
|
+
font-size: 11px;
|
|
639
|
+
color: var(--text-secondary);
|
|
640
|
+
}
|
|
641
|
+
.progress-bar-bg {
|
|
642
|
+
height: 4px;
|
|
643
|
+
background: var(--bg-hover);
|
|
644
|
+
border-radius: 2px;
|
|
645
|
+
overflow: hidden;
|
|
646
|
+
}
|
|
647
|
+
.progress-bar-fill {
|
|
648
|
+
height: 100%;
|
|
649
|
+
border-radius: 2px;
|
|
650
|
+
background: linear-gradient(90deg, var(--teal-700), var(--teal-400));
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
/* Sidebar mini */
|
|
654
|
+
.sidebar-demo {
|
|
655
|
+
background: var(--bg-surface);
|
|
656
|
+
border: 1px solid var(--border-subtle);
|
|
657
|
+
border-radius: var(--radius-lg);
|
|
658
|
+
padding: 16px;
|
|
659
|
+
width: 100%;
|
|
660
|
+
}
|
|
661
|
+
.sidebar-item {
|
|
662
|
+
display: flex;
|
|
663
|
+
align-items: center;
|
|
664
|
+
gap: 8px;
|
|
665
|
+
padding: 8px 10px;
|
|
666
|
+
border-radius: var(--radius-sm);
|
|
667
|
+
font-size: 12px;
|
|
668
|
+
color: var(--text-muted);
|
|
669
|
+
cursor: default;
|
|
670
|
+
transition: all 0.15s;
|
|
671
|
+
margin-bottom: 2px;
|
|
672
|
+
}
|
|
673
|
+
.sidebar-item:hover { background: var(--bg-hover); color: var(--text-secondary); }
|
|
674
|
+
.sidebar-item.active {
|
|
675
|
+
background: rgba(0,200,168,0.08);
|
|
676
|
+
color: var(--teal-300);
|
|
677
|
+
border-left: 2px solid var(--teal-500);
|
|
678
|
+
margin-left: -1px;
|
|
679
|
+
padding-left: 9px;
|
|
680
|
+
}
|
|
681
|
+
.sidebar-icon {
|
|
682
|
+
width: 14px; height: 14px;
|
|
683
|
+
border-radius: 3px;
|
|
684
|
+
background: currentColor;
|
|
685
|
+
opacity: 0.5;
|
|
686
|
+
flex-shrink: 0;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
/* ============================================================
|
|
690
|
+
APP MOCKUP
|
|
691
|
+
============================================================ */
|
|
692
|
+
.app-full {
|
|
693
|
+
background: var(--bg-primary);
|
|
694
|
+
border: 1px solid var(--border-subtle);
|
|
695
|
+
border-radius: 16px;
|
|
696
|
+
overflow: hidden;
|
|
697
|
+
display: flex;
|
|
698
|
+
height: 480px;
|
|
699
|
+
position: relative;
|
|
700
|
+
}
|
|
701
|
+
.app-full::before {
|
|
702
|
+
content: '';
|
|
703
|
+
position: absolute;
|
|
704
|
+
inset: 0;
|
|
705
|
+
background-image: radial-gradient(circle, rgba(0,200,168,0.04) 1px, transparent 1px);
|
|
706
|
+
background-size: 22px 22px;
|
|
707
|
+
pointer-events: none;
|
|
708
|
+
z-index: 0;
|
|
709
|
+
}
|
|
710
|
+
.app-sidebar {
|
|
711
|
+
width: 200px;
|
|
712
|
+
background: var(--bg-surface);
|
|
713
|
+
border-right: 1px solid var(--border-subtle);
|
|
714
|
+
padding: 16px 12px;
|
|
715
|
+
display: flex;
|
|
716
|
+
flex-direction: column;
|
|
717
|
+
gap: 4px;
|
|
718
|
+
z-index: 1;
|
|
719
|
+
flex-shrink: 0;
|
|
720
|
+
}
|
|
721
|
+
.app-sidebar-logo {
|
|
722
|
+
display: flex;
|
|
723
|
+
align-items: center;
|
|
724
|
+
gap: 8px;
|
|
725
|
+
padding: 6px 10px 14px;
|
|
726
|
+
margin-bottom: 4px;
|
|
727
|
+
border-bottom: 1px solid var(--border-faint);
|
|
728
|
+
}
|
|
729
|
+
.logo-mark {
|
|
730
|
+
width: 22px; height: 22px;
|
|
731
|
+
border-radius: 6px;
|
|
732
|
+
background: var(--teal-500);
|
|
733
|
+
display: flex;
|
|
734
|
+
align-items: center;
|
|
735
|
+
justify-content: center;
|
|
736
|
+
}
|
|
737
|
+
.logo-mark::after {
|
|
738
|
+
content: 'C';
|
|
739
|
+
font-size: 12px;
|
|
740
|
+
font-weight: 700;
|
|
741
|
+
color: var(--bg-void);
|
|
742
|
+
font-family: var(--font-body);
|
|
743
|
+
}
|
|
744
|
+
.logo-name {
|
|
745
|
+
font-size: 14px;
|
|
746
|
+
font-weight: 500;
|
|
747
|
+
color: var(--text-primary);
|
|
748
|
+
}
|
|
749
|
+
.app-main {
|
|
750
|
+
flex: 1;
|
|
751
|
+
display: flex;
|
|
752
|
+
flex-direction: column;
|
|
753
|
+
z-index: 1;
|
|
754
|
+
}
|
|
755
|
+
.app-topbar {
|
|
756
|
+
height: 48px;
|
|
757
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
758
|
+
display: flex;
|
|
759
|
+
align-items: center;
|
|
760
|
+
padding: 0 20px;
|
|
761
|
+
gap: 4px;
|
|
762
|
+
}
|
|
763
|
+
.app-content {
|
|
764
|
+
flex: 1;
|
|
765
|
+
padding: 28px 32px;
|
|
766
|
+
display: flex;
|
|
767
|
+
flex-direction: column;
|
|
768
|
+
gap: 20px;
|
|
769
|
+
overflow: hidden;
|
|
770
|
+
}
|
|
771
|
+
.app-welcome {
|
|
772
|
+
font-family: var(--font-display);
|
|
773
|
+
font-size: 22px;
|
|
774
|
+
font-weight: 300;
|
|
775
|
+
font-style: italic;
|
|
776
|
+
color: var(--text-primary);
|
|
777
|
+
}
|
|
778
|
+
.app-suggestions {
|
|
779
|
+
display: grid;
|
|
780
|
+
grid-template-columns: 1fr 1fr;
|
|
781
|
+
gap: 10px;
|
|
782
|
+
flex: 1;
|
|
783
|
+
}
|
|
784
|
+
.app-suggestion {
|
|
785
|
+
background: var(--bg-card);
|
|
786
|
+
border: 1px solid var(--border-subtle);
|
|
787
|
+
border-radius: var(--radius-md);
|
|
788
|
+
padding: 14px 16px;
|
|
789
|
+
display: flex;
|
|
790
|
+
align-items: center;
|
|
791
|
+
gap: 10px;
|
|
792
|
+
font-size: 12px;
|
|
793
|
+
color: var(--text-secondary);
|
|
794
|
+
}
|
|
795
|
+
.sugg-icon {
|
|
796
|
+
width: 28px; height: 28px;
|
|
797
|
+
border-radius: 6px;
|
|
798
|
+
background: rgba(0,200,168,0.08);
|
|
799
|
+
border: 1px solid rgba(0,200,168,0.12);
|
|
800
|
+
flex-shrink: 0;
|
|
801
|
+
}
|
|
802
|
+
.app-input-row {
|
|
803
|
+
background: var(--bg-card);
|
|
804
|
+
border: 1px solid var(--border-default);
|
|
805
|
+
border-radius: var(--radius-lg);
|
|
806
|
+
padding: 12px 14px;
|
|
807
|
+
display: flex;
|
|
808
|
+
gap: 10px;
|
|
809
|
+
align-items: center;
|
|
810
|
+
}
|
|
811
|
+
.app-input-text {
|
|
812
|
+
flex: 1;
|
|
813
|
+
font-size: 12px;
|
|
814
|
+
color: var(--text-disabled);
|
|
815
|
+
}
|
|
816
|
+
.app-send {
|
|
817
|
+
width: 28px; height: 28px;
|
|
818
|
+
border-radius: 7px;
|
|
819
|
+
background: var(--teal-500);
|
|
820
|
+
display: flex;
|
|
821
|
+
align-items: center;
|
|
822
|
+
justify-content: center;
|
|
823
|
+
}
|
|
824
|
+
.app-panel {
|
|
825
|
+
width: 240px;
|
|
826
|
+
background: var(--bg-surface);
|
|
827
|
+
border-left: 1px solid var(--border-subtle);
|
|
828
|
+
padding: 16px;
|
|
829
|
+
z-index: 1;
|
|
830
|
+
display: flex;
|
|
831
|
+
flex-direction: column;
|
|
832
|
+
gap: 12px;
|
|
833
|
+
flex-shrink: 0;
|
|
834
|
+
}
|
|
835
|
+
.panel-title {
|
|
836
|
+
font-size: 10px;
|
|
837
|
+
font-weight: 500;
|
|
838
|
+
letter-spacing: 0.12em;
|
|
839
|
+
text-transform: uppercase;
|
|
840
|
+
color: var(--text-muted);
|
|
841
|
+
margin-bottom: 4px;
|
|
842
|
+
}
|
|
843
|
+
.panel-file {
|
|
844
|
+
background: var(--bg-card);
|
|
845
|
+
border: 1px solid var(--border-subtle);
|
|
846
|
+
border-radius: var(--radius-md);
|
|
847
|
+
padding: 10px 12px;
|
|
848
|
+
font-size: 11px;
|
|
849
|
+
color: var(--text-secondary);
|
|
850
|
+
line-height: 1.4;
|
|
851
|
+
}
|
|
852
|
+
.panel-file small {
|
|
853
|
+
display: block;
|
|
854
|
+
color: var(--text-muted);
|
|
855
|
+
font-size: 10px;
|
|
856
|
+
margin-top: 2px;
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
/* ============================================================
|
|
860
|
+
SPACING & GRID
|
|
861
|
+
============================================================ */
|
|
862
|
+
.spacing-row {
|
|
863
|
+
display: flex;
|
|
864
|
+
align-items: flex-end;
|
|
865
|
+
gap: 16px;
|
|
866
|
+
margin-bottom: 24px;
|
|
867
|
+
}
|
|
868
|
+
.sp-item {
|
|
869
|
+
display: flex;
|
|
870
|
+
flex-direction: column;
|
|
871
|
+
align-items: flex-start;
|
|
872
|
+
gap: 6px;
|
|
873
|
+
}
|
|
874
|
+
.sp-block {
|
|
875
|
+
background: var(--teal-700);
|
|
876
|
+
opacity: 0.7;
|
|
877
|
+
border-radius: 3px;
|
|
878
|
+
height: 16px;
|
|
879
|
+
}
|
|
880
|
+
.sp-label {
|
|
881
|
+
font-family: var(--font-mono);
|
|
882
|
+
font-size: 9px;
|
|
883
|
+
color: var(--text-muted);
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
/* Radius showcase */
|
|
887
|
+
.radius-row {
|
|
888
|
+
display: flex;
|
|
889
|
+
gap: 16px;
|
|
890
|
+
flex-wrap: wrap;
|
|
891
|
+
align-items: center;
|
|
892
|
+
}
|
|
893
|
+
.radius-item {
|
|
894
|
+
display: flex;
|
|
895
|
+
flex-direction: column;
|
|
896
|
+
align-items: center;
|
|
897
|
+
gap: 10px;
|
|
898
|
+
}
|
|
899
|
+
.radius-box {
|
|
900
|
+
width: 64px; height: 64px;
|
|
901
|
+
background: var(--bg-elevated);
|
|
902
|
+
border: 1px solid var(--border-default);
|
|
903
|
+
}
|
|
904
|
+
.radius-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); text-align: center; }
|
|
905
|
+
|
|
906
|
+
/* ============================================================
|
|
907
|
+
EFFECTS
|
|
908
|
+
============================================================ */
|
|
909
|
+
.effects-grid {
|
|
910
|
+
display: grid;
|
|
911
|
+
grid-template-columns: repeat(3, 1fr);
|
|
912
|
+
gap: 16px;
|
|
913
|
+
}
|
|
914
|
+
.effect-box {
|
|
915
|
+
height: 120px;
|
|
916
|
+
border-radius: var(--radius-lg);
|
|
917
|
+
display: flex;
|
|
918
|
+
align-items: center;
|
|
919
|
+
justify-content: center;
|
|
920
|
+
font-size: 11px;
|
|
921
|
+
color: var(--text-muted);
|
|
922
|
+
letter-spacing: 0.08em;
|
|
923
|
+
text-transform: uppercase;
|
|
924
|
+
border: 1px solid var(--border-faint);
|
|
925
|
+
position: relative;
|
|
926
|
+
overflow: hidden;
|
|
927
|
+
}
|
|
928
|
+
.dot-grid-demo {
|
|
929
|
+
background: var(--bg-primary);
|
|
930
|
+
background-image: radial-gradient(circle, rgba(0,200,168,0.08) 1px, transparent 1px);
|
|
931
|
+
background-size: 20px 20px;
|
|
932
|
+
}
|
|
933
|
+
.glow-demo {
|
|
934
|
+
background: var(--bg-primary);
|
|
935
|
+
}
|
|
936
|
+
.glow-demo::before {
|
|
937
|
+
content: '';
|
|
938
|
+
position: absolute;
|
|
939
|
+
width: 140px; height: 140px;
|
|
940
|
+
background: radial-gradient(circle, rgba(0,200,168,0.2), transparent 70%);
|
|
941
|
+
top: 50%; left: 50%;
|
|
942
|
+
transform: translate(-50%, -50%);
|
|
943
|
+
}
|
|
944
|
+
.gradient-demo {
|
|
945
|
+
background: linear-gradient(135deg, #050A0C 0%, #0A1D20 50%, #050A0C 100%);
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
/* ============================================================
|
|
949
|
+
CSS VARIABLES REFERENCE
|
|
950
|
+
============================================================ */
|
|
951
|
+
.vars-block {
|
|
952
|
+
background: var(--bg-surface);
|
|
953
|
+
border: 1px solid var(--border-subtle);
|
|
954
|
+
border-radius: var(--radius-lg);
|
|
955
|
+
padding: 28px 32px;
|
|
956
|
+
font-family: var(--font-mono);
|
|
957
|
+
font-size: 12px;
|
|
958
|
+
line-height: 2;
|
|
959
|
+
}
|
|
960
|
+
.vars-section-title {
|
|
961
|
+
font-family: var(--font-body);
|
|
962
|
+
font-size: 9px;
|
|
963
|
+
font-weight: 500;
|
|
964
|
+
letter-spacing: 0.15em;
|
|
965
|
+
text-transform: uppercase;
|
|
966
|
+
color: var(--teal-500);
|
|
967
|
+
margin-bottom: 8px;
|
|
968
|
+
margin-top: 20px;
|
|
969
|
+
}
|
|
970
|
+
.vars-section-title:first-child { margin-top: 0; }
|
|
971
|
+
.v-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-bottom: 8px; }
|
|
972
|
+
.v-n { color: #3A9080; }
|
|
973
|
+
.v-v { color: var(--text-secondary); }
|
|
974
|
+
.v-c { color: var(--text-muted); }
|
|
975
|
+
|
|
976
|
+
/* ============================================================
|
|
977
|
+
ANIMATIONS
|
|
978
|
+
============================================================ */
|
|
979
|
+
@keyframes fadeUp {
|
|
980
|
+
from { opacity: 0; transform: translateY(20px); }
|
|
981
|
+
to { opacity: 1; transform: translateY(0); }
|
|
982
|
+
}
|
|
983
|
+
.section { animation: fadeUp 0.6s ease both; }
|
|
984
|
+
.section:nth-child(1) { animation-delay: 0s; }
|
|
985
|
+
.section:nth-child(2) { animation-delay: 0.05s; }
|
|
986
|
+
.section:nth-child(3) { animation-delay: 0.1s; }
|
|
987
|
+
.section:nth-child(4) { animation-delay: 0.15s; }
|
|
988
|
+
.section:nth-child(5) { animation-delay: 0.2s; }
|
|
989
|
+
.section:nth-child(6) { animation-delay: 0.25s; }
|
|
990
|
+
.section:nth-child(7) { animation-delay: 0.3s; }
|
|
991
|
+
.section:nth-child(8) { animation-delay: 0.35s; }
|
|
992
|
+
|
|
993
|
+
/* Responsive */
|
|
994
|
+
@media(max-width:800px){
|
|
995
|
+
.page { padding: 0 20px 60px; }
|
|
996
|
+
.components-grid, .type-pair, .v-grid, .effects-grid, .app-suggestions { grid-template-columns: 1fr; }
|
|
997
|
+
.app-panel, .app-sidebar { display: none; }
|
|
998
|
+
.app-full { height: 320px; }
|
|
999
|
+
.teal-strip { flex-wrap: wrap; height: auto; }
|
|
1000
|
+
}
|
|
1001
|
+
</style>
|
|
1002
|
+
</head>
|
|
1003
|
+
<body>
|
|
1004
|
+
<div class="page">
|
|
1005
|
+
|
|
1006
|
+
<!-- ============ HERO ============ -->
|
|
1007
|
+
<div class="section hero">
|
|
1008
|
+
<div class="hero-glow-a"></div>
|
|
1009
|
+
<div class="hero-glow-b"></div>
|
|
1010
|
+
<div class="hero-eyebrow">Abyss Teal — Design System</div>
|
|
1011
|
+
<h1>L'identité visuelle<br>de <em>Claude</em> redéfinie</h1>
|
|
1012
|
+
<div class="hero-meta">
|
|
1013
|
+
<span><div class="dot"></div>Version 1.0</span>
|
|
1014
|
+
<span><div class="dot"></div>Dark UI</span>
|
|
1015
|
+
<span><div class="dot"></div>Claude Desktop</span>
|
|
1016
|
+
<span><div class="dot"></div>2026</span>
|
|
1017
|
+
</div>
|
|
1018
|
+
</div>
|
|
1019
|
+
|
|
1020
|
+
<!-- ============ COULEURS ============ -->
|
|
1021
|
+
<div class="section">
|
|
1022
|
+
<div class="section-label">01 — Couleurs</div>
|
|
1023
|
+
<div class="section-title">La palette Abyss Teal</div>
|
|
1024
|
+
<div class="section-sub">Une gamme chromatique construite autour du noir abyssal et du teal bioluminescent. Chaque teinte a un rôle fonctionnel précis.</div>
|
|
1025
|
+
|
|
1026
|
+
<!-- Teal scale strip -->
|
|
1027
|
+
<div class="teal-strip">
|
|
1028
|
+
<div class="teal-strip-segment" style="background:#002822"><div class="teal-strip-hex" style="color:rgba(255,255,255,0.5)">#002822</div><div class="teal-strip-name" style="color:rgba(255,255,255,0.3)">900</div></div>
|
|
1029
|
+
<div class="teal-strip-segment" style="background:#003D34"><div class="teal-strip-hex" style="color:rgba(255,255,255,0.5)">#003D34</div><div class="teal-strip-name" style="color:rgba(255,255,255,0.3)">800</div></div>
|
|
1030
|
+
<div class="teal-strip-segment" style="background:#005C4E"><div class="teal-strip-hex" style="color:rgba(255,255,255,0.6)">#005C4E</div><div class="teal-strip-name" style="color:rgba(255,255,255,0.4)">700</div></div>
|
|
1031
|
+
<div class="teal-strip-segment" style="background:#007A68"><div class="teal-strip-hex" style="color:rgba(255,255,255,0.7)">#007A68</div><div class="teal-strip-name" style="color:rgba(255,255,255,0.5)">600</div></div>
|
|
1032
|
+
<div class="teal-strip-segment" style="background:#009E88"><div class="teal-strip-hex">#009E88</div><div class="teal-strip-name">500 — CTA</div></div>
|
|
1033
|
+
<div class="teal-strip-segment" style="background:#00C4A6"><div class="teal-strip-hex" style="color:rgba(0,0,0,0.6)">#00C4A6</div><div class="teal-strip-name" style="color:rgba(0,0,0,0.45)">400</div></div>
|
|
1034
|
+
<div class="teal-strip-segment" style="background:#00DFC0"><div class="teal-strip-hex" style="color:rgba(0,0,0,0.6)">#00DFC0</div><div class="teal-strip-name" style="color:rgba(0,0,0,0.45)">300</div></div>
|
|
1035
|
+
<div class="teal-strip-segment" style="background:#7EEEDE"><div class="teal-strip-hex" style="color:rgba(0,0,0,0.5)">#7EEEDE</div><div class="teal-strip-name" style="color:rgba(0,0,0,0.35)">200</div></div>
|
|
1036
|
+
<div class="teal-strip-segment" style="background:#B8F5EC"><div class="teal-strip-hex" style="color:rgba(0,0,0,0.45)">#B8F5EC</div><div class="teal-strip-name" style="color:rgba(0,0,0,0.3)">100</div></div>
|
|
1037
|
+
</div>
|
|
1038
|
+
|
|
1039
|
+
<!-- Background swatches -->
|
|
1040
|
+
<div style="margin-bottom:8px;font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);font-weight:500">Backgrounds</div>
|
|
1041
|
+
<div class="color-row">
|
|
1042
|
+
<div class="swatch-card"><div class="swatch-body big" style="background:#030709"></div><div class="swatch-info"><div class="swatch-name">Void</div><div class="swatch-hex">#030709</div><div class="swatch-role">--bg-void</div></div></div>
|
|
1043
|
+
<div class="swatch-card"><div class="swatch-body big" style="background:#050A0C"></div><div class="swatch-info"><div class="swatch-name">Primary</div><div class="swatch-hex">#050A0C</div><div class="swatch-role">--bg-primary</div></div></div>
|
|
1044
|
+
<div class="swatch-card"><div class="swatch-body big" style="background:#080F12"></div><div class="swatch-info"><div class="swatch-name">Surface</div><div class="swatch-hex">#080F12</div><div class="swatch-role">--bg-surface</div></div></div>
|
|
1045
|
+
<div class="swatch-card"><div class="swatch-body big" style="background:#0A1318"></div><div class="swatch-info"><div class="swatch-name">Card</div><div class="swatch-hex">#0A1318</div><div class="swatch-role">--bg-card</div></div></div>
|
|
1046
|
+
<div class="swatch-card"><div class="swatch-body big" style="background:#0D1920"></div><div class="swatch-info"><div class="swatch-name">Elevated</div><div class="swatch-hex">#0D1920</div><div class="swatch-role">--bg-elevated</div></div></div>
|
|
1047
|
+
<div class="swatch-card"><div class="swatch-body big" style="background:#102028"></div><div class="swatch-info"><div class="swatch-name">Hover</div><div class="swatch-hex">#102028</div><div class="swatch-role">--bg-hover</div></div></div>
|
|
1048
|
+
<div class="swatch-card"><div class="swatch-body big" style="background:#142830"></div><div class="swatch-info"><div class="swatch-name">Active</div><div class="swatch-hex">#142830</div><div class="swatch-role">--bg-active</div></div></div>
|
|
1049
|
+
</div>
|
|
1050
|
+
|
|
1051
|
+
<!-- Text swatches -->
|
|
1052
|
+
<div style="margin-bottom:8px;font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-top:8px">Texte</div>
|
|
1053
|
+
<div class="color-row">
|
|
1054
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#D8EEE8"></div><div class="swatch-info"><div class="swatch-name">Primary</div><div class="swatch-hex">#D8EEE8</div></div></div>
|
|
1055
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#7AADA0"></div><div class="swatch-info"><div class="swatch-name">Secondary</div><div class="swatch-hex">#7AADA0</div></div></div>
|
|
1056
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#3E6860"></div><div class="swatch-info"><div class="swatch-name">Muted</div><div class="swatch-hex">#3E6860</div></div></div>
|
|
1057
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#1E3830"></div><div class="swatch-info"><div class="swatch-name">Disabled</div><div class="swatch-hex">#1E3830</div></div></div>
|
|
1058
|
+
</div>
|
|
1059
|
+
|
|
1060
|
+
<!-- Semantic -->
|
|
1061
|
+
<div style="margin-bottom:8px;font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-top:8px">Sémantique</div>
|
|
1062
|
+
<div class="color-row">
|
|
1063
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#3CC878"></div><div class="swatch-info"><div class="swatch-name">Success</div><div class="swatch-hex">#3CC878</div></div></div>
|
|
1064
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#E6B94A"></div><div class="swatch-info"><div class="swatch-name">Warning</div><div class="swatch-hex">#E6B94A</div></div></div>
|
|
1065
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#E85A6A"></div><div class="swatch-info"><div class="swatch-name">Error</div><div class="swatch-hex">#E85A6A</div></div></div>
|
|
1066
|
+
<div class="swatch-card"><div class="swatch-body" style="background:#6890F4"></div><div class="swatch-info"><div class="swatch-name">Info</div><div class="swatch-hex">#6890F4</div></div></div>
|
|
1067
|
+
</div>
|
|
1068
|
+
</div>
|
|
1069
|
+
|
|
1070
|
+
<!-- ============ TYPOGRAPHIE ============ -->
|
|
1071
|
+
<div class="section">
|
|
1072
|
+
<div class="section-label">02 — Typographie</div>
|
|
1073
|
+
<div class="section-title">Système typographique</div>
|
|
1074
|
+
<div class="section-sub">Fraunces (display serif italique) pour les titres expressifs — DM Sans pour les corps de texte — JetBrains Mono pour le code.</div>
|
|
1075
|
+
|
|
1076
|
+
<div class="type-sample">
|
|
1077
|
+
<div class="t-display">Let's knock something<br>off your <em>list</em></div>
|
|
1078
|
+
<div class="type-meta">
|
|
1079
|
+
<span>Fraunces — Italic 300</span>
|
|
1080
|
+
<span>52px / -0.02em / line-height 1.05</span>
|
|
1081
|
+
<span>var(--font-display)</span>
|
|
1082
|
+
</div>
|
|
1083
|
+
</div>
|
|
1084
|
+
|
|
1085
|
+
<div class="type-pair">
|
|
1086
|
+
<div class="type-sample">
|
|
1087
|
+
<div class="t-heading-1">Agents · Projects · Chats</div>
|
|
1088
|
+
<div class="type-meta">
|
|
1089
|
+
<span>Fraunces 300</span>
|
|
1090
|
+
<span>28px / -0.01em</span>
|
|
1091
|
+
</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
<div class="type-sample">
|
|
1094
|
+
<div class="t-heading-2">Implementation Plan · Feature Spec</div>
|
|
1095
|
+
<div class="type-meta">
|
|
1096
|
+
<span>DM Sans 500</span>
|
|
1097
|
+
<span>18px / -0.005em</span>
|
|
1098
|
+
</div>
|
|
1099
|
+
</div>
|
|
1100
|
+
</div>
|
|
1101
|
+
|
|
1102
|
+
<div class="type-pair">
|
|
1103
|
+
<div class="type-sample">
|
|
1104
|
+
<div class="t-body">Claude is an AI assistant designed to help you think more clearly, write better, build faster. Every interaction is a collaboration between your intentions and a powerful language model.</div>
|
|
1105
|
+
<div class="type-meta">
|
|
1106
|
+
<span>DM Sans 400</span>
|
|
1107
|
+
<span>14px / line-height 1.7</span>
|
|
1108
|
+
</div>
|
|
1109
|
+
</div>
|
|
1110
|
+
<div class="type-sample">
|
|
1111
|
+
<div class="t-label" style="margin-bottom:12px">Only you · Files · Memory</div>
|
|
1112
|
+
<div class="t-small">Last message 1 month ago — Sonnet 4.5</div>
|
|
1113
|
+
<div class="type-meta">
|
|
1114
|
+
<span>Label 10px / 500 / 0.15em UC</span>
|
|
1115
|
+
<span>Small 12px / 400</span>
|
|
1116
|
+
</div>
|
|
1117
|
+
</div>
|
|
1118
|
+
</div>
|
|
1119
|
+
|
|
1120
|
+
<div class="type-sample">
|
|
1121
|
+
<div class="t-mono"><span class="kw">const</span> claude = <span class="kw">await</span> anthropic.messages.create({<br> model: <span class="str">"claude-sonnet-4-6"</span>,<br> max_tokens: <span class="str">1024</span>,<br> <span class="cm">// Your prompt here</span><br>});</div>
|
|
1122
|
+
<div class="type-meta">
|
|
1123
|
+
<span>JetBrains Mono 400</span>
|
|
1124
|
+
<span>13px / line-height 1.8</span>
|
|
1125
|
+
<span>var(--font-mono)</span>
|
|
1126
|
+
</div>
|
|
1127
|
+
</div>
|
|
1128
|
+
</div>
|
|
1129
|
+
|
|
1130
|
+
<!-- ============ COMPOSANTS ============ -->
|
|
1131
|
+
<div class="section">
|
|
1132
|
+
<div class="section-label">03 — Composants</div>
|
|
1133
|
+
<div class="section-title">Bibliothèque UI</div>
|
|
1134
|
+
<div class="section-sub">Tous les composants partagent le même language visuel : bords légers, states subtils, accent teal cohérent.</div>
|
|
1135
|
+
|
|
1136
|
+
<div class="components-grid">
|
|
1137
|
+
|
|
1138
|
+
<!-- Buttons -->
|
|
1139
|
+
<div class="component-block">
|
|
1140
|
+
<div class="comp-label">Boutons</div>
|
|
1141
|
+
<div class="btn-row" style="margin-bottom:12px">
|
|
1142
|
+
<button class="btn btn-primary">Let's go →</button>
|
|
1143
|
+
<button class="btn btn-secondary">New project</button>
|
|
1144
|
+
<button class="btn btn-ghost">Cancel</button>
|
|
1145
|
+
</div>
|
|
1146
|
+
<div class="btn-row">
|
|
1147
|
+
<button class="btn btn-primary btn-sm">Send</button>
|
|
1148
|
+
<button class="btn btn-secondary btn-sm">Upload</button>
|
|
1149
|
+
<button class="btn btn-ghost btn-sm">View all</button>
|
|
1150
|
+
<button class="btn btn-icon">
|
|
1151
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5"/><line x1="7" y1="4" x2="7" y2="7"/><circle cx="7" cy="9.5" r="0.5" fill="currentColor" stroke="none"/></svg>
|
|
1152
|
+
</button>
|
|
1153
|
+
</div>
|
|
1154
|
+
</div>
|
|
1155
|
+
|
|
1156
|
+
<!-- Tabs + Badges -->
|
|
1157
|
+
<div class="component-block">
|
|
1158
|
+
<div class="comp-label">Tabs & Badges</div>
|
|
1159
|
+
<div class="tabs">
|
|
1160
|
+
<div class="tab">Chat</div>
|
|
1161
|
+
<div class="tab active">Cowork</div>
|
|
1162
|
+
<div class="tab">Code</div>
|
|
1163
|
+
</div>
|
|
1164
|
+
<div class="badge-row">
|
|
1165
|
+
<span class="badge badge-teal"><span class="badge-dot"></span>Active</span>
|
|
1166
|
+
<span class="badge badge-success"><span class="badge-dot"></span>Done</span>
|
|
1167
|
+
<span class="badge badge-warning"><span class="badge-dot"></span>Pending</span>
|
|
1168
|
+
<span class="badge badge-error"><span class="badge-dot"></span>Error</span>
|
|
1169
|
+
<span class="badge badge-neutral">Draft</span>
|
|
1170
|
+
</div>
|
|
1171
|
+
</div>
|
|
1172
|
+
|
|
1173
|
+
<!-- Inputs -->
|
|
1174
|
+
<div class="component-block">
|
|
1175
|
+
<div class="comp-label">Inputs</div>
|
|
1176
|
+
<div class="input-wrap">
|
|
1177
|
+
<div class="input-label-row">
|
|
1178
|
+
<span class="input-label">Project name</span>
|
|
1179
|
+
<span class="input-hint">Required</span>
|
|
1180
|
+
</div>
|
|
1181
|
+
<input class="input focused" type="text" value="Feedbuilder project setup" />
|
|
1182
|
+
</div>
|
|
1183
|
+
<div class="input-wrap">
|
|
1184
|
+
<div class="input-label-row">
|
|
1185
|
+
<span class="input-label">Description</span>
|
|
1186
|
+
</div>
|
|
1187
|
+
<input class="input" type="text" placeholder="Add a description..." />
|
|
1188
|
+
</div>
|
|
1189
|
+
</div>
|
|
1190
|
+
|
|
1191
|
+
<!-- Cards -->
|
|
1192
|
+
<div class="component-block">
|
|
1193
|
+
<div class="comp-label">Cards</div>
|
|
1194
|
+
<div class="cards-row" style="margin-bottom:10px">
|
|
1195
|
+
<div class="card-demo">
|
|
1196
|
+
<div class="card-title">Cursor setup for project</div>
|
|
1197
|
+
<div class="card-meta">Last message 1 month ago</div>
|
|
1198
|
+
</div>
|
|
1199
|
+
<div class="card-demo">
|
|
1200
|
+
<div class="card-title">Feedbuilder project setup</div>
|
|
1201
|
+
<div class="card-meta">Last message 1 month ago</div>
|
|
1202
|
+
</div>
|
|
1203
|
+
</div>
|
|
1204
|
+
<div style="display:flex;gap:10px">
|
|
1205
|
+
<div class="file-card" style="flex:1">
|
|
1206
|
+
<div class="file-card-top">Project Constitution v4</div>
|
|
1207
|
+
<div class="file-card-meta">491 lines</div>
|
|
1208
|
+
<div class="file-tag">TEXT</div>
|
|
1209
|
+
</div>
|
|
1210
|
+
<div class="file-card" style="flex:1">
|
|
1211
|
+
<div class="file-card-top">Task Breakdown</div>
|
|
1212
|
+
<div class="file-card-meta">566 lines</div>
|
|
1213
|
+
<div class="file-tag">TEXT</div>
|
|
1214
|
+
</div>
|
|
1215
|
+
</div>
|
|
1216
|
+
</div>
|
|
1217
|
+
|
|
1218
|
+
<!-- Progress -->
|
|
1219
|
+
<div class="component-block">
|
|
1220
|
+
<div class="comp-label">Progress</div>
|
|
1221
|
+
<div class="progress-row">
|
|
1222
|
+
<div class="progress-item">
|
|
1223
|
+
<div class="progress-label-row"><span>Project capacity</span><span style="color:var(--teal-400)">2%</span></div>
|
|
1224
|
+
<div class="progress-bar-bg"><div class="progress-bar-fill" style="width:2%"></div></div>
|
|
1225
|
+
</div>
|
|
1226
|
+
<div class="progress-item">
|
|
1227
|
+
<div class="progress-label-row"><span>Memory used</span><span style="color:var(--teal-400)">38%</span></div>
|
|
1228
|
+
<div class="progress-bar-bg"><div class="progress-bar-fill" style="width:38%"></div></div>
|
|
1229
|
+
</div>
|
|
1230
|
+
<div class="progress-item">
|
|
1231
|
+
<div class="progress-label-row"><span>Context window</span><span style="color:var(--warning)">76%</span></div>
|
|
1232
|
+
<div class="progress-bar-bg"><div class="progress-bar-fill" style="width:76%;background:linear-gradient(90deg,var(--teal-700),var(--warning))"></div></div>
|
|
1233
|
+
</div>
|
|
1234
|
+
</div>
|
|
1235
|
+
</div>
|
|
1236
|
+
|
|
1237
|
+
<!-- Sidebar -->
|
|
1238
|
+
<div class="component-block">
|
|
1239
|
+
<div class="comp-label">Sidebar Navigation</div>
|
|
1240
|
+
<div class="sidebar-demo">
|
|
1241
|
+
<div class="sidebar-item active"><div class="sidebar-icon"></div>Agents</div>
|
|
1242
|
+
<div class="sidebar-item"><div class="sidebar-icon"></div>Chats</div>
|
|
1243
|
+
<div class="sidebar-item"><div class="sidebar-icon"></div>Projects</div>
|
|
1244
|
+
<div class="sidebar-item"><div class="sidebar-icon"></div>Artifacts</div>
|
|
1245
|
+
<div style="height:8px;border-bottom:1px solid var(--border-faint);margin-bottom:8px"></div>
|
|
1246
|
+
<div class="sidebar-item"><div class="sidebar-icon"></div>Houtini Website</div>
|
|
1247
|
+
<div class="sidebar-item"><div class="sidebar-icon"></div>MCP Development</div>
|
|
1248
|
+
<div class="sidebar-item"><div class="sidebar-icon"></div>WordPress Dev</div>
|
|
1249
|
+
</div>
|
|
1250
|
+
</div>
|
|
1251
|
+
|
|
1252
|
+
<!-- Chat Input -->
|
|
1253
|
+
<div class="component-block full">
|
|
1254
|
+
<div class="comp-label">Chat Input</div>
|
|
1255
|
+
<div class="chat-input-wrap">
|
|
1256
|
+
<textarea class="chat-input-field" rows="2" placeholder="How can I help you today?"></textarea>
|
|
1257
|
+
<div class="chat-btn">
|
|
1258
|
+
<svg viewBox="0 0 16 16"><path d="M2 8l12-6-5 6 5 6-12-6z"/></svg>
|
|
1259
|
+
</div>
|
|
1260
|
+
</div>
|
|
1261
|
+
</div>
|
|
1262
|
+
|
|
1263
|
+
</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
|
|
1266
|
+
<!-- ============ APP MOCKUP ============ -->
|
|
1267
|
+
<div class="section">
|
|
1268
|
+
<div class="section-label">04 — Application</div>
|
|
1269
|
+
<div class="section-title">Interface complète</div>
|
|
1270
|
+
<div class="section-sub">L'identité Abyss Teal appliquée à l'interface Claude Desktop — sidebar, contenu principal et panneau de fichiers.</div>
|
|
1271
|
+
|
|
1272
|
+
<div class="app-full">
|
|
1273
|
+
<!-- Sidebar -->
|
|
1274
|
+
<div class="app-sidebar">
|
|
1275
|
+
<div class="app-sidebar-logo">
|
|
1276
|
+
<div class="logo-mark"></div>
|
|
1277
|
+
<div class="logo-name">Claude</div>
|
|
1278
|
+
</div>
|
|
1279
|
+
<div class="sidebar-item"><div class="sidebar-icon" style="width:12px;height:12px"></div>Chats</div>
|
|
1280
|
+
<div class="sidebar-item active"><div class="sidebar-icon" style="width:12px;height:12px"></div>Projects</div>
|
|
1281
|
+
<div class="sidebar-item"><div class="sidebar-icon" style="width:12px;height:12px"></div>Artifacts</div>
|
|
1282
|
+
<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--border-faint)"></div>
|
|
1283
|
+
<div class="sidebar-item" style="font-size:11px"><div class="sidebar-icon" style="width:10px;height:10px"></div>Agents</div>
|
|
1284
|
+
<div class="sidebar-item" style="font-size:11px"><div class="sidebar-icon" style="width:10px;height:10px"></div>Houtini Website</div>
|
|
1285
|
+
<div class="sidebar-item" style="font-size:11px"><div class="sidebar-icon" style="width:10px;height:10px"></div>WordPress Dev</div>
|
|
1286
|
+
<div class="sidebar-item" style="font-size:11px"><div class="sidebar-icon" style="width:10px;height:10px"></div>MCP Development</div>
|
|
1287
|
+
</div>
|
|
1288
|
+
<!-- Main -->
|
|
1289
|
+
<div class="app-main">
|
|
1290
|
+
<div class="app-topbar">
|
|
1291
|
+
<div class="tabs" style="margin-bottom:0">
|
|
1292
|
+
<div class="tab">Chat</div>
|
|
1293
|
+
<div class="tab active">Cowork</div>
|
|
1294
|
+
<div class="tab">Code</div>
|
|
1295
|
+
</div>
|
|
1296
|
+
</div>
|
|
1297
|
+
<div class="app-content">
|
|
1298
|
+
<div class="app-welcome">Let's knock something<br>off your list</div>
|
|
1299
|
+
<div class="app-suggestions">
|
|
1300
|
+
<div class="app-suggestion"><div class="sugg-icon"></div>Optimize my workflow</div>
|
|
1301
|
+
<div class="app-suggestion"><div class="sugg-icon"></div>Organize my files</div>
|
|
1302
|
+
<div class="app-suggestion"><div class="sugg-icon"></div>Find insights in data</div>
|
|
1303
|
+
<div class="app-suggestion"><div class="sugg-icon"></div>Build an automation</div>
|
|
1304
|
+
</div>
|
|
1305
|
+
<div class="app-input-row">
|
|
1306
|
+
<div class="app-input-text">How can I help you today?</div>
|
|
1307
|
+
<div class="app-send">
|
|
1308
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="var(--bg-void)"><path d="M1 6l9-4-3.5 4L10 10 1 6z"/></svg>
|
|
1309
|
+
</div>
|
|
1310
|
+
</div>
|
|
1311
|
+
</div>
|
|
1312
|
+
</div>
|
|
1313
|
+
<!-- Panel -->
|
|
1314
|
+
<div class="app-panel">
|
|
1315
|
+
<div class="panel-title">Memory</div>
|
|
1316
|
+
<div class="panel-file">Purpose & context<br><small>Only you · Updated 14 days ago</small></div>
|
|
1317
|
+
<div class="panel-title">Files</div>
|
|
1318
|
+
<div class="panel-file">Project Constitution v4<br><small>491 lines · TEXT</small></div>
|
|
1319
|
+
<div class="panel-file">Task Breakdown<br><small>566 lines · TEXT</small></div>
|
|
1320
|
+
<div class="panel-file">Implementation Plan<br><small>390 lines · TEXT</small></div>
|
|
1321
|
+
<div style="margin-top:4px">
|
|
1322
|
+
<div class="progress-bar-bg"><div class="progress-bar-fill" style="width:2%"></div></div>
|
|
1323
|
+
<div style="font-size:9px;color:var(--text-muted);margin-top:4px">2% of project capacity</div>
|
|
1324
|
+
</div>
|
|
1325
|
+
</div>
|
|
1326
|
+
</div>
|
|
1327
|
+
</div>
|
|
1328
|
+
|
|
1329
|
+
<!-- ============ EFFETS ============ -->
|
|
1330
|
+
<div class="section">
|
|
1331
|
+
<div class="section-label">05 — Effets & Textures</div>
|
|
1332
|
+
<div class="section-title">Atmosphère visuelle</div>
|
|
1333
|
+
<div class="section-sub">Trois effets à combiner pour créer la profondeur caractéristique de l'identité Abyss Teal.</div>
|
|
1334
|
+
|
|
1335
|
+
<div class="effects-grid">
|
|
1336
|
+
<div class="effect-box dot-grid-demo">Dot Grid<br><span style="font-size:9px;display:block;margin-top:4px;opacity:0.5">radial-gradient 22px</span></div>
|
|
1337
|
+
<div class="effect-box glow-demo">Ambient Glow<br><span style="font-size:9px;display:block;margin-top:4px;opacity:0.5">teal-400 · 20% opacity</span></div>
|
|
1338
|
+
<div class="effect-box gradient-demo">Subtle Gradient<br><span style="font-size:9px;display:block;margin-top:4px;opacity:0.5">135deg · void → card</span></div>
|
|
1339
|
+
</div>
|
|
1340
|
+
|
|
1341
|
+
<!-- Spacing -->
|
|
1342
|
+
<div style="margin-top:40px;margin-bottom:12px" class="comp-label">Espacement (base 4px)</div>
|
|
1343
|
+
<div class="spacing-row">
|
|
1344
|
+
<div class="sp-item"><div class="sp-block" style="width:4px"></div><div class="sp-label">4px</div></div>
|
|
1345
|
+
<div class="sp-item"><div class="sp-block" style="width:8px"></div><div class="sp-label">8px</div></div>
|
|
1346
|
+
<div class="sp-item"><div class="sp-block" style="width:12px"></div><div class="sp-label">12px</div></div>
|
|
1347
|
+
<div class="sp-item"><div class="sp-block" style="width:16px"></div><div class="sp-label">16px</div></div>
|
|
1348
|
+
<div class="sp-item"><div class="sp-block" style="width:20px"></div><div class="sp-label">20px</div></div>
|
|
1349
|
+
<div class="sp-item"><div class="sp-block" style="width:24px"></div><div class="sp-label">24px</div></div>
|
|
1350
|
+
<div class="sp-item"><div class="sp-block" style="width:32px"></div><div class="sp-label">32px</div></div>
|
|
1351
|
+
<div class="sp-item"><div class="sp-block" style="width:40px"></div><div class="sp-label">40px</div></div>
|
|
1352
|
+
<div class="sp-item"><div class="sp-block" style="width:48px"></div><div class="sp-label">48px</div></div>
|
|
1353
|
+
<div class="sp-item"><div class="sp-block" style="width:64px"></div><div class="sp-label">64px</div></div>
|
|
1354
|
+
</div>
|
|
1355
|
+
|
|
1356
|
+
<!-- Radius -->
|
|
1357
|
+
<div style="margin-bottom:12px" class="comp-label">Border Radius</div>
|
|
1358
|
+
<div class="radius-row">
|
|
1359
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">sm<br>6px</div></div>
|
|
1360
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">md<br>10px</div></div>
|
|
1361
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">lg<br>14px</div></div>
|
|
1362
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">xl<br>20px</div></div>
|
|
1363
|
+
<div class="radius-item"><div class="radius-box" style="border-radius:999px"></div><div class="radius-label">full<br>999px</div></div>
|
|
1364
|
+
</div>
|
|
1365
|
+
</div>
|
|
1366
|
+
|
|
1367
|
+
<!-- ============ VARIABLES CSS ============ -->
|
|
1368
|
+
<div class="section">
|
|
1369
|
+
<div class="section-label">06 — Code</div>
|
|
1370
|
+
<div class="section-title">Variables CSS complètes</div>
|
|
1371
|
+
<div class="section-sub">Copier-coller ces variables dans tout projet utilisant l'identité Abyss Teal.</div>
|
|
1372
|
+
|
|
1373
|
+
<div class="vars-block">
|
|
1374
|
+
<div class="vars-section-title">/* Backgrounds */</div>
|
|
1375
|
+
<div class="v-grid">
|
|
1376
|
+
<div><span class="v-n">--bg-void:</span> <span class="v-v">#030709;</span></div>
|
|
1377
|
+
<div><span class="v-n">--bg-elevated:</span> <span class="v-v">#0D1920;</span></div>
|
|
1378
|
+
<div><span class="v-n">--bg-primary:</span> <span class="v-v">#050A0C;</span></div>
|
|
1379
|
+
<div><span class="v-n">--bg-hover:</span> <span class="v-v">#102028;</span></div>
|
|
1380
|
+
<div><span class="v-n">--bg-surface:</span> <span class="v-v">#080F12;</span></div>
|
|
1381
|
+
<div><span class="v-n">--bg-active:</span> <span class="v-v">#142830;</span></div>
|
|
1382
|
+
<div><span class="v-n">--bg-card:</span> <span class="v-v">#0A1318;</span></div>
|
|
1383
|
+
</div>
|
|
1384
|
+
|
|
1385
|
+
<div class="vars-section-title">/* Borders */</div>
|
|
1386
|
+
<div class="v-grid">
|
|
1387
|
+
<div><span class="v-n">--border-faint:</span> <span class="v-v">rgba(0,200,168,0.06);</span></div>
|
|
1388
|
+
<div><span class="v-n">--border-accent:</span> <span class="v-v">rgba(0,200,168,0.25);</span></div>
|
|
1389
|
+
<div><span class="v-n">--border-subtle:</span> <span class="v-v">#102028;</span></div>
|
|
1390
|
+
<div><span class="v-n">--border-default:</span> <span class="v-v">#1B3040;</span></div>
|
|
1391
|
+
</div>
|
|
1392
|
+
|
|
1393
|
+
<div class="vars-section-title">/* Accent Teal Scale */</div>
|
|
1394
|
+
<div class="v-grid">
|
|
1395
|
+
<div><span class="v-n">--teal-900:</span> <span class="v-v">#002822;</span></div>
|
|
1396
|
+
<div><span class="v-n">--teal-400:</span> <span class="v-v">#00C4A6;</span></div>
|
|
1397
|
+
<div><span class="v-n">--teal-700:</span> <span class="v-v">#005C4E;</span></div>
|
|
1398
|
+
<div><span class="v-n">--teal-300:</span> <span class="v-v">#00DFC0;</span></div>
|
|
1399
|
+
<div><span class="v-n">--teal-500:</span> <span class="v-v">#009E88; /* CTA */</span></div>
|
|
1400
|
+
<div><span class="v-n">--teal-100:</span> <span class="v-v">#B8F5EC;</span></div>
|
|
1401
|
+
</div>
|
|
1402
|
+
|
|
1403
|
+
<div class="vars-section-title">/* Text */</div>
|
|
1404
|
+
<div class="v-grid">
|
|
1405
|
+
<div><span class="v-n">--text-primary:</span> <span class="v-v">#D8EEE8;</span></div>
|
|
1406
|
+
<div><span class="v-n">--text-muted:</span> <span class="v-v">#3E6860;</span></div>
|
|
1407
|
+
<div><span class="v-n">--text-secondary:</span> <span class="v-v">#7AADA0;</span></div>
|
|
1408
|
+
<div><span class="v-n">--text-disabled:</span> <span class="v-v">#1E3830;</span></div>
|
|
1409
|
+
</div>
|
|
1410
|
+
|
|
1411
|
+
<div class="vars-section-title">/* Semantic */</div>
|
|
1412
|
+
<div class="v-grid">
|
|
1413
|
+
<div><span class="v-n">--success:</span> <span class="v-v">#3CC878;</span></div>
|
|
1414
|
+
<div><span class="v-n">--error:</span> <span class="v-v">#E85A6A;</span></div>
|
|
1415
|
+
<div><span class="v-n">--warning:</span> <span class="v-v">#E6B94A;</span></div>
|
|
1416
|
+
<div><span class="v-n">--info:</span> <span class="v-v">#6890F4;</span></div>
|
|
1417
|
+
</div>
|
|
1418
|
+
|
|
1419
|
+
<div class="vars-section-title">/* Typography */</div>
|
|
1420
|
+
<div class="v-grid">
|
|
1421
|
+
<div><span class="v-n">--font-display:</span> <span class="v-v">'Fraunces', Georgia, serif;</span></div>
|
|
1422
|
+
<div><span class="v-n">--font-mono:</span> <span class="v-v">'JetBrains Mono', monospace;</span></div>
|
|
1423
|
+
<div><span class="v-n">--font-body:</span> <span class="v-v">'DM Sans', system-ui, sans-serif;</span></div>
|
|
1424
|
+
</div>
|
|
1425
|
+
|
|
1426
|
+
<div class="vars-section-title">/* Spacing (base 4px) */</div>
|
|
1427
|
+
<div class="v-grid">
|
|
1428
|
+
<div><span class="v-n">--space-1:</span> <span class="v-v">4px; </span><span class="v-c">/* --space-6: 24px */</span></div>
|
|
1429
|
+
<div><span class="v-n">--space-8:</span> <span class="v-v">32px;</span></div>
|
|
1430
|
+
<div><span class="v-n">--space-2:</span> <span class="v-v">8px; </span><span class="v-c">/* --space-10: 40px */</span></div>
|
|
1431
|
+
<div><span class="v-n">--space-12:</span> <span class="v-v">48px;</span></div>
|
|
1432
|
+
<div><span class="v-n">--space-4:</span> <span class="v-v">16px;</span></div>
|
|
1433
|
+
<div><span class="v-n">--space-16:</span> <span class="v-v">64px;</span></div>
|
|
1434
|
+
</div>
|
|
1435
|
+
|
|
1436
|
+
<div class="vars-section-title">/* Border Radius */</div>
|
|
1437
|
+
<div class="v-grid">
|
|
1438
|
+
<div><span class="v-n">--radius-sm:</span> <span class="v-v">6px;</span></div>
|
|
1439
|
+
<div><span class="v-n">--radius-lg:</span> <span class="v-v">14px;</span></div>
|
|
1440
|
+
<div><span class="v-n">--radius-md:</span> <span class="v-v">10px;</span></div>
|
|
1441
|
+
<div><span class="v-n">--radius-xl:</span> <span class="v-v">20px;</span></div>
|
|
1442
|
+
<div><span class="v-n">--radius-full:</span> <span class="v-v">999px;</span></div>
|
|
1443
|
+
</div>
|
|
1444
|
+
</div>
|
|
1445
|
+
</div>
|
|
1446
|
+
|
|
1447
|
+
</div><!-- /page -->
|
|
1448
|
+
</body>
|
|
1449
|
+
</html>
|