| 1 |
1 |
|
# GoingsOn Style Guide
|
| 2 |
2 |
|
|
| 3 |
|
- |
## Design Language: Skeubrute
|
|
3 |
+ |
## Design Language: Neobrute
|
| 4 |
4 |
|
|
| 5 |
|
- |
GoingsOn uses **Skeubrute**, a design system that combines **strong neobrutalism** with **abstract skeuomorphism**.
|
|
5 |
+ |
GoingsOn uses **Neobrute**, a clean neobrutalism design system inspired by [neobrutalism.dev](https://www.neobrutalism.dev/).
|
| 6 |
6 |
|
|
| 7 |
7 |
|
### Core Philosophy
|
| 8 |
8 |
|
|
| 9 |
|
- |
- **Neobrutalism**: Bold 3px borders, hard-edged offset shadows (4px), high contrast
|
| 10 |
|
- |
- **Skeuomorphism**: Paper textures, embossed text effects, tactile button states, realistic depth
|
| 11 |
|
- |
|
| 12 |
|
- |
The result is an interface that feels like physical paper and buttons while maintaining a bold, modern aesthetic.
|
|
9 |
+ |
- **Bold and high-contrast**: Black borders, black text, crisp offset shadows with zero blur
|
|
10 |
+ |
- **Blue-dominant palette**: Primary actions use bright blue, yellow reserved for warnings/status
|
|
11 |
+ |
- **Cards have presence**: 4px offset shadows on all cards and containers, hover lift on clickable cards
|
|
12 |
+ |
- **Sans-serif headings**: System sans-serif at weight 700 for all headings
|
| 13 |
13 |
|
|
| 14 |
14 |
|
---
|
| 15 |
15 |
|
|
| 19 |
19 |
|
|
| 20 |
20 |
|
| Variable | Hex | Usage |
|
| 21 |
21 |
|
|----------|-----|-------|
|
| 22 |
|
- |
| `--bg-primary` | `#E8F4F8` | Page background |
|
| 23 |
|
- |
| `--bg-secondary` | `#D4EBF2` | Secondary surfaces, hover states |
|
| 24 |
|
- |
| `--bg-tertiary` | `#C0E2EC` | Tertiary surfaces |
|
|
22 |
+ |
| `--bg-primary` | `#E0E4FA` | Page background (lavender-blue) |
|
|
23 |
+ |
| `--bg-secondary` | `#CDD3F0` | Secondary surfaces, hover states |
|
|
24 |
+ |
| `--bg-tertiary` | `#BAC2E6` | Tertiary surfaces |
|
| 25 |
25 |
|
| `--bg-card` | `#FFFFFF` | Cards, modals, inputs |
|
| 26 |
26 |
|
|
| 27 |
27 |
|
### Text Colors
|
| 28 |
28 |
|
|
| 29 |
29 |
|
| Variable | Hex | Usage |
|
| 30 |
30 |
|
|----------|-----|-------|
|
| 31 |
|
- |
| `--text-primary` | `#1B365D` | Headings, primary text |
|
| 32 |
|
- |
| `--text-secondary` | `#3D5A80` | Body text, descriptions |
|
| 33 |
|
- |
| `--text-muted` | `#6B8CAE` | Captions, hints, disabled |
|
|
31 |
+ |
| `--text-primary` | `#000000` | Headings, primary text |
|
|
32 |
+ |
| `--text-secondary` | `#2D2D2D` | Body text, descriptions |
|
|
33 |
+ |
| `--text-muted` | `#6B6B6B` | Captions, hints, disabled |
|
| 34 |
34 |
|
|
| 35 |
35 |
|
### Accent Colors
|
| 36 |
36 |
|
|
| 37 |
37 |
|
| Variable | Hex | Usage |
|
| 38 |
38 |
|
|----------|-----|-------|
|
| 39 |
|
- |
| `--accent-yellow` | `#F7D154` | Primary actions, active states, focus |
|
|
39 |
+ |
| `--accent-blue` | `#6196FF` | **Primary actions**, active states, focus, buttons |
|
|
40 |
+ |
| `--accent-yellow` | `#F7D154` | Warnings, snooze, medium priority, "on hold" status |
|
| 40 |
41 |
|
| `--accent-green` | `#5CB85C` | Success, active status, tasks |
|
| 41 |
|
- |
| `--accent-blue` | `#1B365D` | Borders, info, emails |
|
| 42 |
42 |
|
| `--accent-purple` | `#7B68EE` | Recurrence, essays, special |
|
| 43 |
|
- |
| `--accent-red` | `#DC3545` | Errors, high priority, warnings |
|
|
43 |
+ |
| `--accent-red` | `#DC3545` | Errors, high priority, danger |
|
| 44 |
44 |
|
| `--accent-cyan` | `#17A2B8` | Info, side projects, completed |
|
| 45 |
45 |
|
|
| 46 |
46 |
|
---
|
| 52 |
52 |
|
The GoingsOn wordmark uses **Reglo Bold** with the following specifications:
|
| 53 |
53 |
|
|
| 54 |
54 |
|
- **Font**: Reglo Bold
|
| 55 |
|
- |
- **Color**: `--text-primary` (#1B365D) on light backgrounds
|
|
55 |
+ |
- **Color**: `--text-primary` (#000000) on light backgrounds
|
| 56 |
56 |
|
- **Alternate**: White on dark backgrounds
|
| 57 |
57 |
|
- **Letter-spacing**: -0.02em (slightly tightened)
|
| 58 |
58 |
|
|
| 61 |
61 |
|
The compact logo displays **"GO"** in Reglo Bold, centered within a neobrutalist container:
|
| 62 |
62 |
|
|
| 63 |
63 |
|
```
|
| 64 |
|
- |
┌─────────────────┐
|
| 65 |
|
- |
│ │
|
| 66 |
|
- |
│ GO │
|
| 67 |
|
- |
│ │
|
| 68 |
|
- |
└─────────────────┘
|
|
64 |
+ |
+-----------------+
|
|
65 |
+ |
| |
|
|
66 |
+ |
| GO |
|
|
67 |
+ |
| |
|
|
68 |
+ |
+-----------------+
|
| 69 |
69 |
|
```
|
| 70 |
70 |
|
|
| 71 |
71 |
|
**Specifications:**
|
| 72 |
|
- |
- **Background**: `--accent-yellow` (#F7D154)
|
| 73 |
|
- |
- **Text**: `--text-primary` (#1B365D)
|
| 74 |
|
- |
- **Border**: 3px solid `--border-color` (#1B365D)
|
| 75 |
|
- |
- **Border Radius**: `--radius-sm` (6px)
|
|
72 |
+ |
- **Background**: `--accent-blue` (#6196FF)
|
|
73 |
+ |
- **Text**: `--text-on-accent` (#FFFFFF)
|
|
74 |
+ |
- **Border**: 2px solid `--border-color` (#000000)
|
|
75 |
+ |
- **Border Radius**: `--radius-sm` (5px)
|
| 76 |
76 |
|
- **Shadow**: 2px 2px 0 `--border-color` (neobrutalist offset)
|
| 77 |
77 |
|
|
| 78 |
78 |
|
**Files:**
|
| 121 |
121 |
|
### Semantic Aliases
|
| 122 |
122 |
|
|
| 123 |
123 |
|
- `--font-display`: Uses `Reglo` for logo and hero headings
|
| 124 |
|
- |
- `--font-heading`: Uses `--font-serif` for titles and headings
|
|
124 |
+ |
- `--font-heading`: Uses `--font-sans` for titles and headings
|
| 125 |
125 |
|
- `--font-body`: Uses `--font-sans` for body text
|
| 126 |
126 |
|
|
| 127 |
127 |
|
### Type Scale
|
| 128 |
128 |
|
|
| 129 |
129 |
|
| Element | Size | Weight | Font |
|
| 130 |
130 |
|
|---------|------|--------|------|
|
| 131 |
|
- |
| Page Title | 1.75rem | 700 | Serif |
|
| 132 |
|
- |
| Card Title | 1.1rem | 700 | Serif |
|
| 133 |
|
- |
| Modal Title | 1.25rem | 700 | Serif |
|
|
131 |
+ |
| Page Title | 1.75rem | 700 | Sans |
|
|
132 |
+ |
| Card Title | 1.1rem | 700 | Sans |
|
|
133 |
+ |
| Modal Title | 1.25rem | 700 | Sans |
|
| 134 |
134 |
|
| Body | 1rem | 400 | Sans |
|
| 135 |
135 |
|
| Small | 0.875rem | 400 | Sans |
|
| 136 |
136 |
|
| Caption | 0.75rem | 600 | Sans |
|
| 158 |
158 |
|
|
| 159 |
159 |
|
| Element | Width |
|
| 160 |
160 |
|
|---------|-------|
|
| 161 |
|
- |
| Cards, Buttons, Modals | 3px (`--border-width`) |
|
|
161 |
+ |
| Cards, Buttons, Modals | 2px (`--border-width`) |
|
| 162 |
162 |
|
| Inputs, Badges, Tags | 2px |
|
| 163 |
163 |
|
| Dividers | 2px |
|
| 164 |
164 |
|
|
| 166 |
166 |
|
|
| 167 |
167 |
|
| Variable | Value | Usage |
|
| 168 |
168 |
|
|----------|-------|-------|
|
| 169 |
|
- |
| `--radius-sm` | 6px | Buttons, badges, inputs |
|
| 170 |
|
- |
| `--radius-md` | 12px | Cards, filter bars |
|
| 171 |
|
- |
| `--radius-lg` | 16px | Modals |
|
|
169 |
+ |
| `--radius-xs` | 3px | Scrollbars, tiny elements |
|
|
170 |
+ |
| `--radius-sm` | 5px | Buttons, badges, inputs |
|
|
171 |
+ |
| `--radius-md` | 5px | Cards, filter bars (uniform with buttons) |
|
|
172 |
+ |
| `--radius-lg` | 10px | Modals |
|
|
173 |
+ |
| `--radius-xl` | 20px | Pills |
|
| 172 |
174 |
|
|
| 173 |
175 |
|
### Shadow System
|
| 174 |
176 |
|
|
|
177 |
+ |
All shadows use **zero blur** for crisp neobrutalist edges:
|
|
178 |
+ |
|
| 175 |
179 |
|
```css
|
| 176 |
180 |
|
/* Shadow utilities */
|
| 177 |
181 |
|
.shadow-sm { box-shadow: 2px 2px 0 var(--border-color); }
|
| 183 |
187 |
|
|
| 184 |
188 |
|
### Offset Shadow Values
|
| 185 |
189 |
|
|
| 186 |
|
- |
| Element | Shadow Offset |
|
| 187 |
|
- |
|---------|---------------|
|
| 188 |
|
- |
| Cards | 4px (with stacked paper effect) |
|
| 189 |
|
- |
| Buttons | 4px |
|
| 190 |
|
- |
| Modals | 8px |
|
| 191 |
|
- |
| Small buttons | 2-3px |
|
| 192 |
|
- |
| Inputs | Inset deboss |
|
| 193 |
|
- |
|
| 194 |
|
- |
---
|
| 195 |
|
- |
|
| 196 |
|
- |
## Skeuomorphic Effects
|
| 197 |
|
- |
|
| 198 |
|
- |
### Paper Texture
|
| 199 |
|
- |
|
| 200 |
|
- |
Cards have a subtle SVG noise pattern for a paper-like feel:
|
| 201 |
|
- |
|
| 202 |
|
- |
```css
|
| 203 |
|
- |
.card {
|
| 204 |
|
- |
background-image: var(--texture-paper);
|
| 205 |
|
- |
}
|
| 206 |
|
- |
```
|
| 207 |
|
- |
|
| 208 |
|
- |
### Embossed Text
|
| 209 |
|
- |
|
| 210 |
|
- |
Headings use subtle text shadows to create a pressed-in effect:
|
| 211 |
|
- |
|
| 212 |
|
- |
```css
|
| 213 |
|
- |
.card-title, .modal-title, .page-title {
|
| 214 |
|
- |
text-shadow: var(--emboss-light), var(--emboss-dark);
|
| 215 |
|
- |
}
|
| 216 |
|
- |
```
|
| 217 |
|
- |
|
| 218 |
|
- |
Where:
|
| 219 |
|
- |
- `--emboss-light`: `1px 1px 0 rgba(255, 255, 255, 0.5)`
|
| 220 |
|
- |
- `--emboss-dark`: `-1px -1px 0 rgba(0, 0, 0, 0.08)`
|
| 221 |
|
- |
|
| 222 |
|
- |
### Debossed Inputs
|
| 223 |
|
- |
|
| 224 |
|
- |
Form inputs have an inset shadow for a carved-in feel:
|
| 225 |
|
- |
|
| 226 |
|
- |
```css
|
| 227 |
|
- |
.form-input {
|
| 228 |
|
- |
box-shadow: var(--deboss);
|
| 229 |
|
- |
}
|
| 230 |
|
- |
/* --deboss: inset 1px 1px 2px rgba(0,0,0,0.08), inset -1px -1px 0 rgba(255,255,255,0.5) */
|
| 231 |
|
- |
```
|
| 232 |
|
- |
|
| 233 |
|
- |
### Tactile Buttons
|
| 234 |
|
- |
|
| 235 |
|
- |
Buttons have a gradient overlay for a 3D, pressable feel:
|
| 236 |
|
- |
|
| 237 |
|
- |
```css
|
| 238 |
|
- |
.btn {
|
| 239 |
|
- |
background-image: var(--btn-gradient);
|
| 240 |
|
- |
}
|
| 241 |
|
- |
.btn:active {
|
| 242 |
|
- |
background-image: var(--btn-gradient-pressed);
|
| 243 |
|
- |
}
|
| 244 |
|
- |
```
|
|
190 |
+ |
| Element | Shadow Offset | Hover Lift |
|
|
191 |
+ |
|---------|---------------|------------|
|
|
192 |
+ |
| Cards (project) | 4px | Yes (-2px translate) |
|
|
193 |
+ |
| Dashboard items | 4px | Yes |
|
|
194 |
+ |
| Kanban cards | 4px | Yes |
|
|
195 |
+ |
| Saved views | 4px | Yes |
|
|
196 |
+ |
| Tables (task, event, data) | 4px | No |
|
|
197 |
+ |
| Email list | 4px | No |
|
|
198 |
+ |
| Filter bar | 4px | No |
|
|
199 |
+ |
| Stat cards | 4px | No |
|
|
200 |
+ |
| Review sections/cards | 4px | No |
|
|
201 |
+ |
| Milestone cards | 4px | No |
|
|
202 |
+ |
| Buttons (default) | none | No |
|
|
203 |
+ |
| Buttons (primary/danger) | 4px | Yes |
|
|
204 |
+ |
| Modals | 8px | No |
|
|
205 |
+ |
| Dropdowns/Context menus | 3-6px | No |
|
|
206 |
+ |
| Inputs | none | No |
|
| 245 |
207 |
|
|
| 246 |
208 |
|
---
|
| 247 |
209 |
|
|
| 250 |
212 |
|
### Buttons
|
| 251 |
213 |
|
|
| 252 |
214 |
|
```html
|
| 253 |
|
- |
<!-- Primary button (yellow background) -->
|
|
215 |
+ |
<!-- Primary button (blue background, white text) -->
|
| 254 |
216 |
|
<button class="btn btn-primary">Action</button>
|
| 255 |
217 |
|
|
| 256 |
218 |
|
<!-- Secondary button (light background) -->
|
| 260 |
222 |
|
<button class="btn btn-sm">Small</button>
|
| 261 |
223 |
|
```
|
| 262 |
224 |
|
|
| 263 |
|
- |
**States:**
|
|
225 |
+ |
**States (default `.btn`):**
|
|
226 |
+ |
- **Default**: Flat (border only, no shadow)
|
|
227 |
+ |
- **Hover**: Background changes to `--bg-secondary`
|
|
228 |
+ |
- **Active**: Background changes to `--bg-tertiary`
|
|
229 |
+ |
|
|
230 |
+ |
**States (`.btn-primary`, `.btn-danger`):**
|
| 264 |
231 |
|
- **Default**: 4px offset shadow
|
| 265 |
232 |
|
- **Hover**: Lifts up (-2px, -2px), shadow increases
|
| 266 |
|
- |
- **Active/Pressed**: Pushes down (2px, 2px), shadow disappears
|
|
233 |
+ |
- **Active**: Pushes down (1px, 1px), shadow shrinks
|
| 267 |
234 |
|
|
| 268 |
235 |
|
### Cards
|
| 269 |
236 |
|
|
| 281 |
248 |
|
```
|
| 282 |
249 |
|
|
| 283 |
250 |
|
Cards have:
|
| 284 |
|
- |
- Paper texture background
|
| 285 |
|
- |
- Stacked paper shadow effect (two-layer shadow)
|
| 286 |
|
- |
- Lift on hover
|
|
251 |
+ |
- White background with 4px offset shadow
|
|
252 |
+ |
- Hover: lifts up (-2px), shadow grows, bg shifts to `--bg-secondary`
|
|
253 |
+ |
- Touch devices: no hover transform
|
| 287 |
254 |
|
|
| 288 |
255 |
|
### Badges & Tags
|
| 289 |
256 |
|
|
| 328 |
295 |
|
</div>
|
| 329 |
296 |
|
```
|
| 330 |
297 |
|
|
| 331 |
|
- |
**Focus state**: Yellow ring (3px) around the input
|
|
298 |
+ |
**Focus state**: Blue ring (2px) around the input
|
| 332 |
299 |
|
|
| 333 |
300 |
|
### Modals
|
| 334 |
301 |
|
|
| 348 |
315 |
|
|
| 349 |
316 |
|
Modals have:
|
| 350 |
317 |
|
- 8px offset shadow
|
| 351 |
|
- |
- 16px border radius
|
|
318 |
+ |
- 10px border radius
|
| 352 |
319 |
|
- Semi-transparent overlay
|
| 353 |
320 |
|
|
| 354 |
321 |
|
### Tables
|
| 369 |
336 |
|
```
|
| 370 |
337 |
|
|
| 371 |
338 |
|
Features:
|
|
339 |
+ |
- 4px offset shadow on container
|
| 372 |
340 |
|
- Uppercase, letter-spaced headers
|
| 373 |
341 |
|
- Hover state on rows
|
| 374 |
|
- |
- Selected state (yellow background)
|
|
342 |
+ |
- Selected state (blue tint background)
|
| 375 |
343 |
|
|
| 376 |
344 |
|
### Empty & Error States
|
| 377 |
345 |
|
|
| 395 |
363 |
|
| Type | Duration | Easing |
|
| 396 |
364 |
|
|------|----------|--------|
|
| 397 |
365 |
|
| Hover effects | 0.1s - 0.15s | ease |
|
| 398 |
|
- |
| Transform (lift/press) | 0.1s | ease |
|
|
366 |
+ |
| Transform (lift/press) | 0.15s | ease |
|
| 399 |
367 |
|
| Focus rings | instant | - |
|
| 400 |
368 |
|
|
| 401 |
369 |
|
### Hover Lift Effect
|
| 402 |
370 |
|
|
|
371 |
+ |
Reserved for clickable cards (`.card`, `.dashboard-item`, `.kanban-card`, `.saved-view-item`), `.btn-primary`, `.btn-danger`, modals, dropdowns, mobile nav:
|
|
372 |
+ |
|
| 403 |
373 |
|
```css
|
| 404 |
|
- |
.hover-lift {
|
| 405 |
|
- |
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
| 406 |
|
- |
}
|
| 407 |
|
- |
.hover-lift:hover {
|
|
374 |
+ |
.card:hover {
|
| 408 |
375 |
|
transform: translate(-2px, -2px);
|
|
376 |
+ |
box-shadow: 6px 6px 0 var(--border-color);
|
| 409 |
377 |
|
}
|
| 410 |
|
- |
.hover-lift:active {
|
| 411 |
|
- |
transform: translate(2px, 2px);
|
|
378 |
+ |
.btn-primary:active {
|
|
379 |
+ |
transform: translate(1px, 1px);
|
|
380 |
+ |
box-shadow: 1px 1px 0 var(--border-color);
|
| 412 |
381 |
|
}
|
| 413 |
382 |
|
```
|
| 414 |
383 |
|
|
|
384 |
+ |
Static containers (tables, filter bars, stat cards, review sections) have shadow but no hover lift.
|
|
385 |
+ |
|
| 415 |
386 |
|
---
|
| 416 |
387 |
|
|
| 417 |
388 |
|
## Accessibility
|
| 423 |
394 |
|
```css
|
| 424 |
395 |
|
.btn:focus-visible,
|
| 425 |
396 |
|
.form-input:focus-visible {
|
| 426 |
|
- |
outline: 3px solid var(--accent-yellow);
|
|
397 |
+ |
outline: 3px solid var(--accent-blue);
|
| 427 |
398 |
|
outline-offset: 2px;
|
| 428 |
399 |
|
}
|
| 429 |
400 |
|
```
|
| 439 |
410 |
|
### Color Contrast
|
| 440 |
411 |
|
|
| 441 |
412 |
|
All text colors meet WCAG AA standards against their backgrounds:
|
| 442 |
|
- |
- Primary text on card: 8.5:1
|
| 443 |
|
- |
- Secondary text on card: 5.2:1
|
| 444 |
|
- |
- Muted text on card: 3.8:1
|
|
413 |
+ |
- Primary text (#000000) on card (#FFFFFF): 21:1
|
|
414 |
+ |
- Secondary text (#2D2D2D) on card (#FFFFFF): 14.7:1
|
|
415 |
+ |
- Muted text (#6B6B6B) on card (#FFFFFF): 5.7:1
|
| 445 |
416 |
|
|
| 446 |
417 |
|
---
|
| 447 |
418 |
|
|
| 449 |
420 |
|
|
| 450 |
421 |
|
```
|
| 451 |
422 |
|
src-tauri/frontend/
|
| 452 |
|
- |
├── css/
|
| 453 |
|
- |
│ └── styles.css # All styles (design system + components)
|
| 454 |
|
- |
├── fonts/
|
| 455 |
|
- |
│ └── Reglo-Bold.woff2 # Display font
|
| 456 |
|
- |
├── js/
|
| 457 |
|
- |
│ ├── goingson.js # Namespace root (window.GoingsOn)
|
| 458 |
|
- |
│ ├── api.js # Tauri IPC abstraction
|
| 459 |
|
- |
│ ├── state.js # Centralized state + pub/sub
|
| 460 |
|
- |
│ ├── utils.js # HTML escaping, validation, debounce
|
| 461 |
|
- |
│ ├── components.js # Modal, toast, form modal, confirm dialog
|
| 462 |
|
- |
│ ├── navigation.js # View switching, sidebar
|
| 463 |
|
- |
│ ├── tasks.js # Task list, CRUD, rendering
|
| 464 |
|
- |
│ ├── projects.js # Project list, detail view
|
| 465 |
|
- |
│ ├── events.js # Event list, CRUD
|
| 466 |
|
- |
│ ├── emails.js # Email list, threading
|
| 467 |
|
- |
│ ├── settings.js # Settings, LLM config, export
|
| 468 |
|
- |
│ └── app.js # App initialization, menu listeners
|
| 469 |
|
- |
└── index.html # Entry point (no inline styles)
|
|
423 |
+ |
+-- css/
|
|
424 |
+ |
| +-- styles.css # All styles (design system + components)
|
|
425 |
+ |
+-- fonts/
|
|
426 |
+ |
| +-- Reglo-Bold.woff2 # Display font
|
|
427 |
+ |
+-- js/
|
|
428 |
+ |
| +-- goingson.js # Namespace root (window.GoingsOn)
|
|
429 |
+ |
| +-- api.js # Tauri IPC abstraction
|
|
430 |
+ |
| +-- state.js # Centralized state + pub/sub
|
|
431 |
+ |
| +-- utils.js # HTML escaping, validation, debounce
|
|
432 |
+ |
| +-- components.js # Modal, toast, form modal, confirm dialog
|
|
433 |
+ |
| +-- navigation.js # View switching, sidebar
|
|
434 |
+ |
| +-- tasks.js # Task list, CRUD, rendering
|
|
435 |
+ |
| +-- projects.js # Project list, detail view
|
|
436 |
+ |
| +-- events.js # Event list, CRUD
|
|
437 |
+ |
| +-- emails.js # Email list, threading
|
|
438 |
+ |
| +-- settings.js # Settings, LLM config, export
|
|
439 |
+ |
| +-- app.js # App initialization, menu listeners
|
|
440 |
+ |
+-- index.html # Entry point (no inline styles)
|
| 470 |
441 |
|
```
|
| 471 |
442 |
|
|
| 472 |
443 |
|
See `ARCHITECTURE.md` (in this folder) for the full JS file listing and namespace organization.
|
| 480 |
451 |
|
### Pattern: `.block-element`
|
| 481 |
452 |
|
|
| 482 |
453 |
|
```
|
| 483 |
|
- |
.component → Block (card, modal, btn, form)
|
| 484 |
|
- |
.component-part → Element within block (card-header, modal-title)
|
| 485 |
|
- |
.component-modifier → Variant (btn-primary, btn-sm)
|
|
454 |
+ |
.component -> Block (card, modal, btn, form)
|
|
455 |
+ |
.component-part -> Element within block (card-header, modal-title)
|
|
456 |
+ |
.component-modifier -> Variant (btn-primary, btn-sm)
|
| 486 |
457 |
|
```
|
| 487 |
458 |
|
|
| 488 |
459 |
|
### Examples
|
| 556 |
527 |
|
|
| 557 |
528 |
|
### Element Standards
|
| 558 |
529 |
|
|
| 559 |
|
- |
| Element | Border | Radius | Shadow |
|
| 560 |
|
- |
|---------|--------|--------|--------|
|
| 561 |
|
- |
| Cards | 3px | 12px | 4px offset + stacked |
|
| 562 |
|
- |
| Buttons | 3px | 8px | 4px offset |
|
| 563 |
|
- |
| Inputs | 2px | 8px | inset deboss |
|
| 564 |
|
- |
| Badges/Tags | 2px | 6px | none |
|
| 565 |
|
- |
| Modals | 3px | 16px | 8px offset |
|
|
530 |
+ |
| Element | Border | Radius | Shadow | Hover Lift |
|
|
531 |
+ |
|---------|--------|--------|--------|------------|
|
|
532 |
+ |
| Cards | 2px | 5px | 4px offset | Yes |
|
|
533 |
+ |
| Dashboard items | 2px | - | 4px offset | Yes |
|
|
534 |
+ |
| Kanban cards | 2px | - | 4px offset | Yes |
|
|
535 |
+ |
| Saved views | 2px | 5px | 4px offset | Yes |
|
|
536 |
+ |
| Tables (task, event) | 2px | 10px | 4px offset | No |
|
|
537 |
+ |
| Email list | 2px | 5px | 4px offset | No |
|
|
538 |
+ |
| Filter bar | 2px | 5px | 4px offset | No |
|
|
539 |
+ |
| Stat cards | 2px | - | 4px offset | No |
|
|
540 |
+ |
| Review sections/cards | 2px | 5px | 4px offset | No |
|
|
541 |
+ |
| Milestone cards | 2px | 5px | 4px offset | No |
|
|
542 |
+ |
| Buttons (default) | 2px | 5px | none | No |
|
|
543 |
+ |
| Buttons (primary/danger) | 2px | 5px | 4px offset | Yes |
|
|
544 |
+ |
| Inputs | 2px | 5px | none | No |
|
|
545 |
+ |
| Badges/Tags | 2px | 5px | none | No |
|
|
546 |
+ |
| Modals | 2px | 10px | 8px offset | No |
|
|
547 |
+ |
| Dropdowns | 2px | 5px | 3px offset | No |
|
|
548 |
+ |
| Context menus | 2px | 5px | 6px offset | No |
|
| 566 |
549 |
|
|
| 567 |
550 |
|
### Color Usage
|
| 568 |
551 |
|
|
| 569 |
552 |
|
| Context | Background | Border |
|
| 570 |
553 |
|
|---------|------------|--------|
|
|
554 |
+ |
| Primary action | blue | black |
|
| 571 |
555 |
|
| Success | green 20% mix | green |
|
| 572 |
556 |
|
| Warning | yellow 20% mix | yellow |
|
| 573 |
557 |
|
| Error | red 20% mix | red |
|