max / goingson

14.5 KB · 561 lines History Blame Raw

1	# GoingsOn Style Guide
2
3	## Design Language: Neobrute
4
5	GoingsOn uses Neobrute, a clean neobrutalism design system inspired by [neobrutalism.dev](https://www.neobrutalism.dev/).
6
7	### Core Philosophy
8
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
14	---
15
16	## Color System
17
18	### Background Colors
19
20	\| Variable \| Hex \| Usage \|
21	\|----------\|-----\|-------\|
22	\| `--bg-primary` \| `#E0E4FA` \| Page background (lavender-blue) \|
23	\| `--bg-secondary` \| `#CDD3F0` \| Secondary surfaces, hover states \|
24	\| `--bg-tertiary` \| `#BAC2E6` \| Tertiary surfaces \|
25	\| `--bg-card` \| `#FFFFFF` \| Cards, modals, inputs \|
26
27	### Text Colors
28
29	\| Variable \| Hex \| Usage \|
30	\|----------\|-----\|-------\|
31	\| `--text-primary` \| `#000000` \| Headings, primary text \|
32	\| `--text-secondary` \| `#2D2D2D` \| Body text, descriptions \|
33	\| `--text-muted` \| `#6B6B6B` \| Captions, hints, disabled \|
34
35	### Accent Colors
36
37	\| Variable \| Hex \| Usage \|
38	\|----------\|-----\|-------\|
39	\| `--accent-blue` \| `#6196FF` \| Primary actions, active states, focus, buttons \|
40	\| `--accent-yellow` \| `#F7D154` \| Warnings, snooze, medium priority, "on hold" status \|
41	\| `--accent-green` \| `#5CB85C` \| Success, active status, tasks \|
42	\| `--accent-purple` \| `#7B68EE` \| Recurrence, essays, special \|
43	\| `--accent-red` \| `#DC3545` \| Errors, high priority, danger \|
44	\| `--accent-cyan` \| `#17A2B8` \| Info, side projects, completed \|
45
46	---
47
48	## Logo
49
50	### Full Logo
51
52	The GoingsOn wordmark uses Reglo Bold with the following specifications:
53
54	- Font: Reglo Bold
55	- Color: `--text-primary` (#000000) on light backgrounds
56	- Alternate: White on dark backgrounds
57	- Letter-spacing: -0.02em (slightly tightened)
58
59	### Small Logo (Icon)
60
61	The compact logo displays "GO" in Reglo Bold, centered within a neobrutalist container:
62
63	```
64	+-----------------+
65	\| \|
66	\| GO \|
67	\| \|
68	+-----------------+
69	```
70
71	Specifications:
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	- Shadow: 2px 2px 0 `--border-color` (neobrutalist offset)
77
78	Files:
79	- `media/logo-go.svg` - Small "GO" icon logo
80	- `media/logo-goingson.svg` - Full wordmark (future)
81
82	### Usage Guidelines
83
84	\| Context \| Logo \| Min Size \|
85	\|---------\|------\|----------\|
86	\| App icon / Favicon \| GO icon \| 16x16px \|
87	\| Sidebar / Header \| GO icon \| 32x32px \|
88	\| Splash / Marketing \| Full wordmark \| 120px wide \|
89	\| Documentation \| Either \| Context-dependent \|
90
91	---
92
93	## Typography
94
95	### Font Families
96
97	```css
98	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
99	--font-serif: Georgia, 'Times New Roman', serif;
100	--font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
101	--font-display: 'Reglo', var(--font-serif);
102	```
103
104	### Display Font: Reglo
105
106	The Reglo font is used for the logo and prominent H1-style headings. Reglo is an open-source display font with a bold, geometric character that complements the neobrutalist aesthetic.
107
108	- Source: [Reglo by Sebastien Sanfilippo](https://github.com/nicokant/reglo) (OFL license)
109	- Usage: Logo wordmark "GoingsOn", hero headings, splash screens
110	- Weights: Bold only (display use)
111
112	```css
113	@font-face {
114	font-family: 'Reglo';
115	src: url('fonts/Reglo-Bold.woff2') format('woff2');
116	font-weight: 700;
117	font-display: swap;
118	}
119	```
120
121	### Semantic Aliases
122
123	- `--font-display`: Uses `Reglo` for logo and hero headings
124	- `--font-heading`: Uses `--font-sans` for titles and headings
125	- `--font-body`: Uses `--font-sans` for body text
126
127	### Type Scale
128
129	\| Element \| Size \| Weight \| Font \|
130	\|---------\|------\|--------\|------\|
131	\| Page Title \| 1.75rem \| 700 \| Sans \|
132	\| Card Title \| 1.1rem \| 700 \| Sans \|
133	\| Modal Title \| 1.25rem \| 700 \| Sans \|
134	\| Body \| 1rem \| 400 \| Sans \|
135	\| Small \| 0.875rem \| 400 \| Sans \|
136	\| Caption \| 0.75rem \| 600 \| Sans \|
137
138	---
139
140	## Spacing
141
142	The spacing system uses a consistent rem-based scale:
143
144	\| Name \| Value \| Usage \|
145	\|------\|-------\|-------\|
146	\| xs \| 0.25rem \| Badge padding, tight gaps \|
147	\| sm \| 0.5rem \| Small gaps, icon spacing \|
148	\| md \| 0.75rem \| Standard padding \|
149	\| lg \| 1rem \| Section padding \|
150	\| xl \| 1.25rem \| Card padding \|
151	\| 2xl \| 1.5rem \| Page margins \|
152
153	---
154
155	## Border & Shadow System
156
157	### Border Widths
158
159	\| Element \| Width \|
160	\|---------\|-------\|
161	\| Cards, Buttons, Modals \| 2px (`--border-width`) \|
162	\| Inputs, Badges, Tags \| 2px \|
163	\| Dividers \| 2px \|
164
165	### Border Radius
166
167	\| Variable \| Value \| Usage \|
168	\|----------\|-------\|-------\|
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 \|
174
175	### Shadow System
176
177	All shadows use zero blur for crisp neobrutalist edges:
178
179	```css
180	/* Shadow utilities */
181	.shadow-sm { box-shadow: 2px 2px 0 var(--border-color); }
182	.shadow-md { box-shadow: 4px 4px 0 var(--border-color); } /* Default */
183	.shadow-lg { box-shadow: 6px 6px 0 var(--border-color); }
184	.shadow-xl { box-shadow: 8px 8px 0 var(--border-color); } /* Modals */
185	.shadow-none { box-shadow: none; }
186	```
187
188	### Offset Shadow Values
189
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 \|
207
208	---
209
210	## Components
211
212	### Buttons
213
214	```html
215	<!-- Primary button (blue background, white text) -->
216	<button class="btn btn-primary">Action</button>
217
218	<!-- Secondary button (light background) -->
219	<button class="btn btn-secondary">Cancel</button>
220
221	<!-- Small button -->
222	<button class="btn btn-sm">Small</button>
223	```
224
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`):
231	- Default: 4px offset shadow
232	- Hover: Lifts up (-2px, -2px), shadow increases
233	- Active: Pushes down (1px, 1px), shadow shrinks
234
235	### Cards
236
237	```html
238	<div class="card">
239	<div class="card-header">
240	<h3 class="card-title">Card Title</h3>
241	</div>
242	<p class="card-description">Description text</p>
243	<div class="card-meta">
244	<span class="tag type-job">Job</span>
245	<span class="tag status-active">Active</span>
246	</div>
247	</div>
248	```
249
250	Cards have:
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
254
255	### Badges & Tags
256
257	Using data attributes (preferred):
258
259	```html
260	<span class="badge" data-color="green">Success</span>
261	<span class="badge" data-color="yellow">Warning</span>
262	<span class="badge" data-color="red">Error</span>
263	<span class="badge" data-color="cyan">Info</span>
264	<span class="badge" data-color="purple">Special</span>
265	<span class="badge" data-color="muted">Default</span>
266	```
267
268	Legacy classes:
269
270	```html
271	<span class="tag type-job">Job</span>
272	<span class="tag type-sideproject">Side Project</span>
273	<span class="tag status-active">Active</span>
274	<span class="tag status-completed">Completed</span>
275	```
276
277	### Form Inputs
278
279	```html
280	<div class="form-group">
281	<label class="form-label">Label</label>
282	<input type="text" class="form-input" placeholder="Enter text...">
283	</div>
284
285	<div class="form-group">
286	<label class="form-label">Select</label>
287	<select class="form-select">
288	<option>Option 1</option>
289	</select>
290	</div>
291
292	<div class="form-group">
293	<label class="form-label">Textarea</label>
294	<textarea class="form-textarea"></textarea>
295	</div>
296	```
297
298	Focus state: Blue ring (2px) around the input
299
300	### Modals
301
302	```html
303	<div class="modal-overlay">
304	<div class="modal-container">
305	<div class="modal-header">
306	<h2 class="modal-title">Modal Title</h2>
307	<button class="modal-close">×</button>
308	</div>
309	<div class="modal-content">
310	<!-- Content here -->
311	</div>
312	</div>
313	</div>
314	```
315
316	Modals have:
317	- 8px offset shadow
318	- 10px border radius
319	- Semi-transparent overlay
320
321	### Tables
322
323	```html
324	<table class="task-table">
325	<thead>
326	<tr>
327	<th>Column</th>
328	</tr>
329	</thead>
330	<tbody>
331	<tr>
332	<td>Data</td>
333	</tr>
334	</tbody>
335	</table>
336	```
337
338	Features:
339	- 4px offset shadow on container
340	- Uppercase, letter-spaced headers
341	- Hover state on rows
342	- Selected state (blue tint background)
343
344	### Empty & Error States
345
346	```html
347	<div class="empty-state">
348	<div class="empty-state-icon">icon</div>
349	<p class="empty-state-text">No items found</p>
350	</div>
351
352	<div class="error-state">
353	Error message here
354	</div>
355	```
356
357	---
358
359	## Animation Standards
360
361	### Timing
362
363	\| Type \| Duration \| Easing \|
364	\|------\|----------\|--------\|
365	\| Hover effects \| 0.1s - 0.15s \| ease \|
366	\| Transform (lift/press) \| 0.15s \| ease \|
367	\| Focus rings \| instant \| - \|
368
369	### Hover Lift Effect
370
371	Reserved for clickable cards (`.card`, `.dashboard-item`, `.kanban-card`, `.saved-view-item`), `.btn-primary`, `.btn-danger`, modals, dropdowns, mobile nav:
372
373	```css
374	.card:hover {
375	transform: translate(-2px, -2px);
376	box-shadow: 6px 6px 0 var(--border-color);
377	}
378	.btn-primary:active {
379	transform: translate(1px, 1px);
380	box-shadow: 1px 1px 0 var(--border-color);
381	}
382	```
383
384	Static containers (tables, filter bars, stat cards, review sections) have shadow but no hover lift.
385
386	---
387
388	## Accessibility
389
390	### Focus States
391
392	All interactive elements have visible focus indicators:
393
394	```css
395	.btn:focus-visible,
396	.form-input:focus-visible {
397	outline: 3px solid var(--accent-blue);
398	outline-offset: 2px;
399	}
400	```
401
402	### Screen Reader Support
403
404	Use `.sr-only` for visually hidden but accessible text:
405
406	```html
407	<span class="sr-only">Screen reader text</span>
408	```
409
410	### Color Contrast
411
412	All text colors meet WCAG AA standards against their backgrounds:
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
416
417	---
418
419	## File Organization
420
421	```
422	src-tauri/frontend/
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 and export
439	\| +-- app.js # App initialization, menu listeners
440	+-- index.html # Entry point (no inline styles)
441	```
442
443	See `ARCHITECTURE.md` (in this folder) for the full JS file listing and namespace organization.
444
445	---
446
447	## CSS Naming Convention
448
449	GoingsOn uses a simplified BEM-adjacent pattern with kebab-case.
450
451	### Pattern: `.block-element`
452
453	```
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)
457	```
458
459	### Examples
460
461	```css
462	/* Block */
463	.card { }
464	.modal { }
465	.btn { }
466
467	/* Elements (single hyphen) */
468	.card-header { }
469	.card-title { }
470	.card-description { }
471	.modal-overlay { }
472	.modal-content { }
473
474	/* Modifiers (single hyphen) */
475	.btn-primary { }
476	.btn-secondary { }
477	.btn-sm { }
478
479	/* State modifiers (class combination) */
480	.tab.active { }
481	.btn:disabled { }
482	.form-input:focus { }
483	```
484
485	### Data Attributes for Dynamic Styling
486
487	Use `data-*` attributes for programmatic variants:
488
489	```css
490	.badge[data-color="green"] { }
491	.badge[data-color="red"] { }
492	```
493
494	### Utility Classes
495
496	Single-purpose utilities use descriptive names:
497
498	```css
499	.shadow-sm { }
500	.shadow-lg { }
501	.hover-lift { }
502	.sr-only { }
503	```
504
505	### Conventions
506
507	\| Pattern \| Usage \| Example \|
508	\|---------\|-------\|---------\|
509	\| `.block` \| Component root \| `.card`, `.modal`, `.btn` \|
510	\| `.block-element` \| Child element \| `.card-header`, `.btn-icon` \|
511	\| `.block-modifier` \| Variant \| `.btn-primary`, `.card-compact` \|
512	\| `.block.state` \| State class \| `.tab.active`, `.item.selected` \|
513	\| `.utility` \| Single purpose \| `.shadow-lg`, `.hover-lift` \|
514	\| `[data-attr]` \| Dynamic variants \| `[data-color="red"]` \|
515
516	### Naming Rules
517
518	1. kebab-case only - No camelCase or underscores
519	2. Single hyphen - `.card-header` not `.card__header` (simplified BEM)
520	3. Descriptive names - `.form-input` not `.fi`
521	4. Component prefix - `.modal-title` not `.title` (within modal context)
522	5. No abbreviations - `.button` not `.btn` (exception: `.btn` is established)
523
524	---
525
526	## Quick Reference
527
528	### Element Standards
529
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 \|
549
550	### Color Usage
551
552	\| Context \| Background \| Border \|
553	\|---------\|------------\|--------\|
554	\| Primary action \| blue \| black \|
555	\| Success \| green 20% mix \| green \|
556	\| Warning \| yellow 20% mix \| yellow \|
557	\| Error \| red 20% mix \| red \|
558	\| Info \| cyan 20% mix \| cyan \|
559	\| Special \| purple 20% mix \| purple \|
560	\| Default \| tertiary \| muted \|
561