# GoingsOn Style Guide

## Design Language: Neobrute

GoingsOn uses **Neobrute**, a clean neobrutalism design system inspired by [neobrutalism.dev](https://www.neobrutalism.dev/).

### Core Philosophy

- **Bold and high-contrast**: Black borders, black text, crisp offset shadows with zero blur
- **Blue-dominant palette**: Primary actions use bright blue, yellow reserved for warnings/status
- **Cards have presence**: 4px offset shadows on all cards and containers, hover lift on clickable cards
- **Sans-serif headings**: System sans-serif at weight 700 for all headings

---

## Color System

### Background Colors

| Variable | Hex | Usage |
|----------|-----|-------|
| `--bg-primary` | `#E0E4FA` | Page background (lavender-blue) |
| `--bg-secondary` | `#CDD3F0` | Secondary surfaces, hover states |
| `--bg-tertiary` | `#BAC2E6` | Tertiary surfaces |
| `--bg-card` | `#FFFFFF` | Cards, modals, inputs |

### Text Colors

| Variable | Hex | Usage |
|----------|-----|-------|
| `--text-primary` | `#000000` | Headings, primary text |
| `--text-secondary` | `#2D2D2D` | Body text, descriptions |
| `--text-muted` | `#6B6B6B` | Captions, hints, disabled |

### Accent Colors

| Variable | Hex | Usage |
|----------|-----|-------|
| `--accent-blue` | `#6196FF` | **Primary actions**, active states, focus, buttons |
| `--accent-yellow` | `#F7D154` | Warnings, snooze, medium priority, "on hold" status |
| `--accent-green` | `#5CB85C` | Success, active status, tasks |
| `--accent-purple` | `#7B68EE` | Recurrence, essays, special |
| `--accent-red` | `#DC3545` | Errors, high priority, danger |
| `--accent-cyan` | `#17A2B8` | Info, side projects, completed |

---

## Logo

### Full Logo

The GoingsOn wordmark uses **Reglo Bold** with the following specifications:

- **Font**: Reglo Bold
- **Color**: `--text-primary` (#000000) on light backgrounds
- **Alternate**: White on dark backgrounds
- **Letter-spacing**: -0.02em (slightly tightened)

### Small Logo (Icon)

The compact logo displays **"GO"** in Reglo Bold, centered within a neobrutalist container:

```
+-----------------+
|                 |
|       GO        |
|                 |
+-----------------+
```

**Specifications:**
- **Background**: `--accent-blue` (#6196FF)
- **Text**: `--text-on-accent` (#FFFFFF)
- **Border**: 2px solid `--border-color` (#000000)
- **Border Radius**: `--radius-sm` (5px)
- **Shadow**: 2px 2px 0 `--border-color` (neobrutalist offset)

**Files:**
- `media/logo-go.svg` - Small "GO" icon logo
- `media/logo-goingson.svg` - Full wordmark (future)

### Usage Guidelines

| Context | Logo | Min Size |
|---------|------|----------|
| App icon / Favicon | GO icon | 16x16px |
| Sidebar / Header | GO icon | 32x32px |
| Splash / Marketing | Full wordmark | 120px wide |
| Documentation | Either | Context-dependent |

---

## Typography

### Font Families

```css
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-serif: Georgia, 'Times New Roman', serif;
--font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
--font-display: 'Reglo', var(--font-serif);
```

### Display Font: Reglo

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.

- **Source**: [Reglo by Sebastien Sanfilippo](https://github.com/nicokant/reglo) (OFL license)
- **Usage**: Logo wordmark "GoingsOn", hero headings, splash screens
- **Weights**: Bold only (display use)

```css
@font-face {
    font-family: 'Reglo';
    src: url('fonts/Reglo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
```

### Semantic Aliases

- `--font-display`: Uses `Reglo` for logo and hero headings
- `--font-heading`: Uses `--font-sans` for titles and headings
- `--font-body`: Uses `--font-sans` for body text

### Type Scale

| Element | Size | Weight | Font |
|---------|------|--------|------|
| Page Title | 1.75rem | 700 | Sans |
| Card Title | 1.1rem | 700 | Sans |
| Modal Title | 1.25rem | 700 | Sans |
| Body | 1rem | 400 | Sans |
| Small | 0.875rem | 400 | Sans |
| Caption | 0.75rem | 600 | Sans |

---

## Spacing

The spacing system uses a consistent rem-based scale:

| Name | Value | Usage |
|------|-------|-------|
| xs | 0.25rem | Badge padding, tight gaps |
| sm | 0.5rem | Small gaps, icon spacing |
| md | 0.75rem | Standard padding |
| lg | 1rem | Section padding |
| xl | 1.25rem | Card padding |
| 2xl | 1.5rem | Page margins |

---

## Border & Shadow System

### Border Widths

| Element | Width |
|---------|-------|
| Cards, Buttons, Modals | 2px (`--border-width`) |
| Inputs, Badges, Tags | 2px |
| Dividers | 2px |

### Border Radius

| Variable | Value | Usage |
|----------|-------|-------|
| `--radius-xs` | 3px | Scrollbars, tiny elements |
| `--radius-sm` | 5px | Buttons, badges, inputs |
| `--radius-md` | 5px | Cards, filter bars (uniform with buttons) |
| `--radius-lg` | 10px | Modals |
| `--radius-xl` | 20px | Pills |

### Shadow System

All shadows use **zero blur** for crisp neobrutalist edges:

```css
/* Shadow utilities */
.shadow-sm  { box-shadow: 2px 2px 0 var(--border-color); }
.shadow-md  { box-shadow: 4px 4px 0 var(--border-color); }  /* Default */
.shadow-lg  { box-shadow: 6px 6px 0 var(--border-color); }
.shadow-xl  { box-shadow: 8px 8px 0 var(--border-color); }  /* Modals */
.shadow-none { box-shadow: none; }
```

### Offset Shadow Values

| Element | Shadow Offset | Hover Lift |
|---------|---------------|------------|
| Cards (project) | 4px | Yes (-2px translate) |
| Dashboard items | 4px | Yes |
| Kanban cards | 4px | Yes |
| Saved views | 4px | Yes |
| Tables (task, event, data) | 4px | No |
| Email list | 4px | No |
| Filter bar | 4px | No |
| Stat cards | 4px | No |
| Review sections/cards | 4px | No |
| Milestone cards | 4px | No |
| Buttons (default) | none | No |
| Buttons (primary/danger) | 4px | Yes |
| Modals | 8px | No |
| Dropdowns/Context menus | 3-6px | No |
| Inputs | none | No |

---

## Components

### Buttons

```html
<!-- Primary button (blue background, white text) -->
<button class="btn btn-primary">Action</button>

<!-- Secondary button (light background) -->
<button class="btn btn-secondary">Cancel</button>

<!-- Small button -->
<button class="btn btn-sm">Small</button>
```

**States (default `.btn`):**
- **Default**: Flat (border only, no shadow)
- **Hover**: Background changes to `--bg-secondary`
- **Active**: Background changes to `--bg-tertiary`

**States (`.btn-primary`, `.btn-danger`):**
- **Default**: 4px offset shadow
- **Hover**: Lifts up (-2px, -2px), shadow increases
- **Active**: Pushes down (1px, 1px), shadow shrinks

### Cards

```html
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card Title</h3>
    </div>
    <p class="card-description">Description text</p>
    <div class="card-meta">
        <span class="tag type-job">Job</span>
        <span class="tag status-active">Active</span>
    </div>
</div>
```

Cards have:
- White background with 4px offset shadow
- Hover: lifts up (-2px), shadow grows, bg shifts to `--bg-secondary`
- Touch devices: no hover transform

### Badges & Tags

**Using data attributes (preferred):**

```html
<span class="badge" data-color="green">Success</span>
<span class="badge" data-color="yellow">Warning</span>
<span class="badge" data-color="red">Error</span>
<span class="badge" data-color="cyan">Info</span>
<span class="badge" data-color="purple">Special</span>
<span class="badge" data-color="muted">Default</span>
```

**Legacy classes:**

```html
<span class="tag type-job">Job</span>
<span class="tag type-sideproject">Side Project</span>
<span class="tag status-active">Active</span>
<span class="tag status-completed">Completed</span>
```

### Form Inputs

```html
<div class="form-group">
    <label class="form-label">Label</label>
    <input type="text" class="form-input" placeholder="Enter text...">
</div>

<div class="form-group">
    <label class="form-label">Select</label>
    <select class="form-select">
        <option>Option 1</option>
    </select>
</div>

<div class="form-group">
    <label class="form-label">Textarea</label>
    <textarea class="form-textarea"></textarea>
</div>
```

**Focus state**: Blue ring (2px) around the input

### Modals

```html
<div class="modal-overlay">
    <div class="modal-container">
        <div class="modal-header">
            <h2 class="modal-title">Modal Title</h2>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-content">
            <!-- Content here -->
        </div>
    </div>
</div>
```

Modals have:
- 8px offset shadow
- 10px border radius
- Semi-transparent overlay

### Tables

```html
<table class="task-table">
    <thead>
        <tr>
            <th>Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```

Features:
- 4px offset shadow on container
- Uppercase, letter-spaced headers
- Hover state on rows
- Selected state (blue tint background)

### Empty & Error States

```html
<div class="empty-state">
    <div class="empty-state-icon">icon</div>
    <p class="empty-state-text">No items found</p>
</div>

<div class="error-state">
    Error message here
</div>
```

---

## Animation Standards

### Timing

| Type | Duration | Easing |
|------|----------|--------|
| Hover effects | 0.1s - 0.15s | ease |
| Transform (lift/press) | 0.15s | ease |
| Focus rings | instant | - |

### Hover Lift Effect

Reserved for clickable cards (`.card`, `.dashboard-item`, `.kanban-card`, `.saved-view-item`), `.btn-primary`, `.btn-danger`, modals, dropdowns, mobile nav:

```css
.card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--border-color);
}
.btn-primary:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--border-color);
}
```

Static containers (tables, filter bars, stat cards, review sections) have shadow but no hover lift.

---

## Accessibility

### Focus States

All interactive elements have visible focus indicators:

```css
.btn:focus-visible,
.form-input:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 2px;
}
```

### Screen Reader Support

Use `.sr-only` for visually hidden but accessible text:

```html
<span class="sr-only">Screen reader text</span>
```

### Color Contrast

All text colors meet WCAG AA standards against their backgrounds:
- Primary text (#000000) on card (#FFFFFF): 21:1
- Secondary text (#2D2D2D) on card (#FFFFFF): 14.7:1
- Muted text (#6B6B6B) on card (#FFFFFF): 5.7:1

---

## File Organization

```
src-tauri/frontend/
+-- css/
|   +-- styles.css          # All styles (design system + components)
+-- fonts/
|   +-- Reglo-Bold.woff2    # Display font
+-- js/
|   +-- goingson.js          # Namespace root (window.GoingsOn)
|   +-- api.js               # Tauri IPC abstraction
|   +-- state.js             # Centralized state + pub/sub
|   +-- utils.js             # HTML escaping, validation, debounce
|   +-- components.js        # Modal, toast, form modal, confirm dialog
|   +-- navigation.js        # View switching, sidebar
|   +-- tasks.js             # Task list, CRUD, rendering
|   +-- projects.js          # Project list, detail view
|   +-- events.js            # Event list, CRUD
|   +-- emails.js            # Email list, threading
|   +-- settings.js          # Settings and export
|   +-- app.js               # App initialization, menu listeners
+-- index.html               # Entry point (no inline styles)
```

See `ARCHITECTURE.md` (in this folder) for the full JS file listing and namespace organization.

---

## CSS Naming Convention

GoingsOn uses a simplified BEM-adjacent pattern with kebab-case.

### Pattern: `.block-element`

```
.component          -> Block (card, modal, btn, form)
.component-part     -> Element within block (card-header, modal-title)
.component-modifier -> Variant (btn-primary, btn-sm)
```

### Examples

```css
/* Block */
.card { }
.modal { }
.btn { }

/* Elements (single hyphen) */
.card-header { }
.card-title { }
.card-description { }
.modal-overlay { }
.modal-content { }

/* Modifiers (single hyphen) */
.btn-primary { }
.btn-secondary { }
.btn-sm { }

/* State modifiers (class combination) */
.tab.active { }
.btn:disabled { }
.form-input:focus { }
```

### Data Attributes for Dynamic Styling

Use `data-*` attributes for programmatic variants:

```css
.badge[data-color="green"] { }
.badge[data-color="red"] { }
```

### Utility Classes

Single-purpose utilities use descriptive names:

```css
.shadow-sm { }
.shadow-lg { }
.hover-lift { }
.sr-only { }
```

### Conventions

| Pattern | Usage | Example |
|---------|-------|---------|
| `.block` | Component root | `.card`, `.modal`, `.btn` |
| `.block-element` | Child element | `.card-header`, `.btn-icon` |
| `.block-modifier` | Variant | `.btn-primary`, `.card-compact` |
| `.block.state` | State class | `.tab.active`, `.item.selected` |
| `.utility` | Single purpose | `.shadow-lg`, `.hover-lift` |
| `[data-attr]` | Dynamic variants | `[data-color="red"]` |

### Naming Rules

1. **kebab-case only** - No camelCase or underscores
2. **Single hyphen** - `.card-header` not `.card__header` (simplified BEM)
3. **Descriptive names** - `.form-input` not `.fi`
4. **Component prefix** - `.modal-title` not `.title` (within modal context)
5. **No abbreviations** - `.button` not `.btn` (exception: `.btn` is established)

---

## Quick Reference

### Element Standards

| Element | Border | Radius | Shadow | Hover Lift |
|---------|--------|--------|--------|------------|
| Cards | 2px | 5px | 4px offset | Yes |
| Dashboard items | 2px | - | 4px offset | Yes |
| Kanban cards | 2px | - | 4px offset | Yes |
| Saved views | 2px | 5px | 4px offset | Yes |
| Tables (task, event) | 2px | 10px | 4px offset | No |
| Email list | 2px | 5px | 4px offset | No |
| Filter bar | 2px | 5px | 4px offset | No |
| Stat cards | 2px | - | 4px offset | No |
| Review sections/cards | 2px | 5px | 4px offset | No |
| Milestone cards | 2px | 5px | 4px offset | No |
| Buttons (default) | 2px | 5px | none | No |
| Buttons (primary/danger) | 2px | 5px | 4px offset | Yes |
| Inputs | 2px | 5px | none | No |
| Badges/Tags | 2px | 5px | none | No |
| Modals | 2px | 10px | 8px offset | No |
| Dropdowns | 2px | 5px | 3px offset | No |
| Context menus | 2px | 5px | 6px offset | No |

### Color Usage

| Context | Background | Border |
|---------|------------|--------|
| Primary action | blue | black |
| Success | green 20% mix | green |
| Warning | yellow 20% mix | yellow |
| Error | red 20% mix | red |
| Info | cyan 20% mix | cyan |
| Special | purple 20% mix | purple |
| Default | tertiary | muted |