feat: rename magic link sign-in to "Sign in with e-mail"

Author: mroderick

.impeccable/design.json

@@ -0,0 +1,121 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-07-06T08:45:00Z",
+  "title": "Design System: codebar Auth",
+  "extensions": {
+    "colorMeta": {
+      "primary-btn": { "role": "primary", "displayName": "Trust Blue", "canonical": "#1a6cb3", "tonalRamp": ["#0a2e4f", "#0f4775", "#145994", "#1a6cb3", "#3a8ad0", "#6aa9e0", "#9fc8ef", "#d4e6f8"] },
+      "brand-blue": { "role": "secondary", "displayName": "Brand Blue", "canonical": "#4bafff", "tonalRamp": ["#1a4a7a", "#2e6ea8", "#3a8ad0", "#4bafff", "#72bfff", "#9acfff", "#c2dfff", "#e6f3ff"] },
+      "brand-green": { "role": "secondary", "displayName": "Brand Green", "canonical": "#19f3be", "tonalRamp": ["#0a5c47", "#0d8a6e", "#10b892", "#19f3be", "#4df5cd", "#80f8dc", "#b3faea", "#e6fdf7"] },
+      "brand-magenta": { "role": "tertiary", "displayName": "Brand Magenta", "canonical": "#ff036a", "tonalRamp": ["#8a0036", "#b80048", "#e0005a", "#ff036a", "#ff3d89", "#ff70a7", "#ffa3c5", "#ffd6e5"] }
+    },
+    "typographyMeta": {
+      "body": { "displayName": "Body", "purpose": "All body text, paragraphs, form content" }
+    },
+    "shadows": [],
+    "motion": [
+      { "name": "btn-hover", "value": "background-color 0.15s ease-in-out", "purpose": "Button hover/focus state transitions" }
+    ],
+    "breakpoints": [
+      { "name": "sm", "value": "576px" },
+      { "name": "md", "value": "768px" },
+      { "name": "lg", "value": "992px" }
+    ]
+  },
+  "components": [
+    {
+      "name": "Primary Button",
+      "kind": "button",
+      "refersTo": "button-primary",
+      "description": "Primary call-to-action. Sign in, submit, confirm.",
+      "html": "<button class=\"ds-btn-primary\">Sign In</button>",
+      "css": ".ds-btn-primary { background: #1a6cb3; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-size: 1rem; transition: background-color 0.15s ease-in-out; } .ds-btn-primary:hover { background: #145994; } .ds-btn-primary:active { background: #0f4775; }"
+    },
+    {
+      "name": "Outline Button",
+      "kind": "button",
+      "refersTo": "button-outline",
+      "description": "Secondary action. Back, cancel, navigation.",
+      "html": "<button class=\"ds-btn-outline\">← Back</button>",
+      "css": ".ds-btn-outline { background: transparent; color: #6c757d; border: 1px solid #6c757d; padding: 4px 8px; border-radius: 6px; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 400; font-size: 0.875rem; transition: background-color 0.15s ease-in-out; } .ds-btn-outline:hover { background: #f8f9fa; color: #5a6268; }"
+    },
+    {
+      "name": "Navbar",
+      "kind": "nav",
+      "refersTo": "nav",
+      "description": "Top navigation bar with logo.",
+      "html": "<nav class=\"ds-nav\"><a class=\"ds-nav-brand\" href=\"/\"><img src=\"codebar-logo.svg\" alt=\"codebar logo\" height=\"30\" /><span>auth</span></a></nav>",
+      "css": ".ds-nav { background: #1a6cb3; padding: 8px 16px; display: flex; align-items: center; } .ds-nav-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-family: 'Open Sans', system-ui, sans-serif; } .ds-nav-brand img { filter: brightness(0) invert(1); }"
+    },
+    {
+      "name": "Alert — Error",
+      "kind": "custom",
+      "refersTo": "alert-error",
+      "description": "Error or destructive message.",
+      "html": "<div class=\"ds-alert-error\"><strong>Error:</strong> Something went wrong.</div>",
+      "css": ".ds-alert-error { background: #ffccdd; color: #8a0036; border: 1px solid #ff99bb; border-radius: 8px; padding: 12px 16px; font-family: 'Open Sans', system-ui, sans-serif; font-size: 0.875rem; margin-bottom: 16px; }"
+    },
+    {
+      "name": "Alert — Success",
+      "kind": "custom",
+      "refersTo": "alert-success",
+      "description": "Success confirmation message.",
+      "html": "<div class=\"ds-alert-success\">✅ Magic link sent!</div>",
+      "css": ".ds-alert-success { background: #d1f9ee; color: #0a5c47; border: 1px solid #a3f3dd; border-radius: 8px; padding: 12px 16px; font-family: 'Open Sans', system-ui, sans-serif; font-size: 0.875rem; margin-bottom: 16px; }"
+    },
+    {
+      "name": "Form Input",
+      "kind": "input",
+      "refersTo": "input-text",
+      "description": "Text input field with label.",
+      "html": "<label class=\"ds-label\">Email address</label><input class=\"ds-input\" type=\"email\" placeholder=\"you@example.com\" />",
+      "css": ".ds-label { display: block; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 400; font-size: 0.875rem; color: #212529; margin-bottom: 4px; } .ds-input { display: block; width: 100%; padding: 6px 12px; font-family: 'Open Sans', system-ui, sans-serif; font-size: 1rem; font-weight: 300; color: #212529; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; box-sizing: border-box; } .ds-input:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); }"
+    },
+    {
+      "name": "Card with Accent Header",
+      "kind": "card",
+      "refersTo": "card-accent",
+      "description": "Data surface with magenta header accent.",
+      "html": "<div class=\"ds-card\"><div class=\"ds-card-header\"><h3>User Information</h3></div><div class=\"ds-card-body\"><dl><dt>Name</dt><dd>Alex</dd><dt>Email</dt><dd>alex@example.com</dd></dl></div></div>",
+      "css": ".ds-card { background: #fff; border: 1px solid rgba(0,0,0,0.125); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .ds-card-header { padding: 12px 16px; border-bottom: 3px solid #ff036a; } .ds-card-header h3 { margin: 0; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; } .ds-card-body { padding: 16px; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 300; }"
+    },
+    {
+      "name": "Admin Table",
+      "kind": "custom",
+      "refersTo": "table-admin",
+      "description": "Admin user list with inline role selector.",
+      "html": "<table class=\"ds-table\"><thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead><tbody><tr><td>Alex</td><td>alex@example.com</td><td><select class=\"ds-select\"><option>User</option><option>Admin</option></select></td></tr></tbody></table>",
+      "css": ".ds-table { width: 100%; border-collapse: collapse; font-family: 'Open Sans', system-ui, sans-serif; font-size: 0.875rem; } .ds-table th { background: #f8f9fa; padding: 8px 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6; } .ds-table td { padding: 8px 12px; border-bottom: 1px solid #dee2e6; } .ds-table tbody tr:hover { background: #f8f9fa; } .ds-select { padding: 4px 8px; font-size: 0.875rem; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; }"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Welcome Desk",
+    "overview": "The auth app is a warm, unceremonious gateway — like a friendly reception desk at a community event. Users arrive to sign in, check their profile, or get a quick admin task done, then move on to what matters (the workshop). Every element should feel intentional but never demanding.",
+    "keyCharacteristics": [
+      "Warm but efficient: a smile and a clear direction, not small talk",
+      "Flat and grounded: no floating cards, no shadows — Bootstrap\u2019s default flatness with subtle layering via tinted backgrounds",
+      "Friendly and tactile: buttons feel pressable, labels are plain language, space breathes without being sparse",
+      "Distinctively codebar: the unusual brand palette (blue, green, magenta) is used deliberately, never as decoration"
+    ],
+    "rules": [
+      { "name": "The Rarity Rule", "body": "Each brand accent appears on at most one surface per page. Blue header, green success message, or magenta card accent \u2014 never two at once. Their infrequency is the point.", "section": "colors" },
+      { "name": "The Flat-By-Default Rule", "body": "Surfaces sit flush. No box-shadows on cards, no floating elements, no drag-and-drop affordances.", "section": "elevation" }
+    ],
+    "dos": [
+      "Do use the darker Trust Blue (#1a6cb3) for any interactive surface (buttons, nav) \u2014 it passes WCAG AA with white text",
+      "Do reserve the brand accent colours (blue #4bafff, green #19f3be, magenta #ff036a) for tinted backgrounds and decorative borders only",
+      "Do keep pages flat \u2014 no card shadows, no floating elements, no drag-and-drop",
+      "Do use plain-language labels on forms (\u201cEmail address\u201d, not \u201cE-mail\u201d)",
+      "Do use the magenta card-header accent to distinguish data surfaces from content surfaces"
+    ],
+    "donts": [
+      "Don\u2019t use brand accent colours as text or button backgrounds on white \u2014 they fail contrast",
+      "Don\u2019t add corporate SaaS patterns (dark sidebars, metric dashboards, status badges)",
+      "Don\u2019t use AI-slop patterns: gradient text, glassmorphism, hero-metric templates, generic card grids",
+      "Don\u2019t nest cards \u2014 one level of card depth is the limit",
+      "Don\u2019t use border-left greater than 1px as a coloured accent stripe on cards or alerts",
+      "Don\u2019t use em dashes in UX copy",
+      "Don\u2019t render the data-bs-theme as light \u2014 use auto to respect OS preference"
+    ]
+  }
+}

DESIGN.md

@@ -0,0 +1,163 @@
+---
+name: codebar Auth
+description: Authentication gateway for codebar workshops
+colors:
+  primary-btn: "#1a6cb3"
+  brand-blue: "#4bafff"
+  brand-green: "#19f3be"
+  brand-magenta: "#ff036a"
+  neutral-bg: "#ffffff"
+  neutral-text: "#212529"
+typography:
+  body:
+    fontFamily: "Open Sans, system-ui, -apple-system, sans-serif"
+    fontSize: "1rem"
+    fontWeight: 300
+rounded:
+  sm: "6px"
+  md: "8px"
+  lg: "12px"
+spacing:
+  xs: "4px"
+  sm: "8px"
+  md: "16px"
+  lg: "24px"
+components:
+  button-primary:
+    backgroundColor: "{colors.primary-btn}"
+    textColor: "#fff"
+    rounded: "{rounded.sm}"
+    padding: "6px 12px"
+  button-primary-hover:
+    backgroundColor: "#145994"
+  button-primary-active:
+    backgroundColor: "#0f4775"
+  nav:
+    backgroundColor: "{colors.primary-btn}"
+    textColor: "#fff"
+  card-accent:
+    borderBottom: "3px solid {colors.brand-magenta}"
+---
+
+# Design System: codebar Auth
+
+## 1. Overview
+
+**Creative North Star: "The Welcome Desk"**
+
+The auth app is a warm, unceremonious gateway — like a friendly reception desk at a community event. Users arrive to sign in, check their profile, or get a quick admin task done, then move on to what matters (the workshop). Every element should feel intentional but never demanding.
+
+**Key Characteristics:**
+
+- Warm but efficient: a smile and a clear direction, not small talk
+- Flat and grounded: no floating cards, no shadows — Bootstrap's default flatness with subtle layering via tinted backgrounds
+- Friendly and tactile: buttons feel pressable, labels are plain language, space breathes without being sparse
+- Distinctively codebar: the unusual brand palette (blue, green, magenta) is used deliberately, never as decoration
+
+## 2. Colors
+
+A three-accent palette anchored by a trustworthy blue. The brand colours appear in tinted backgrounds (alerts) and as accent borders; the darker blue carries interaction surfaces (nav, primary buttons).
+
+### Primary
+
+- **Trust Blue** (`#1a6cb3`): Navigation bar background, primary buttons. The workhorse blue that users interact with.
+- **Brand Blue** (`#4bafff`): Accent only — decorative borders, secondary highlights. Never used for text or interactive surfaces (fails contrast).
+
+### Secondary
+
+- **Brand Green** (`#19f3be`): Success alerts, secondary accent. Used as tinted backgrounds only; too light for text or buttons on white.
+
+### Tertiary
+
+- **Brand Magenta** (`#ff036a`): Error/destructive alerts, card header accent stripe (`card-header-cb`). The exclamation point of the palette — used sparingly for emphasis.
+
+### Neutral
+
+- **Clean White** (`#ffffff`): Page background, card surfaces, alert backgrounds.
+- **Dark Slate** (`#212529`): Body text — Bootstrap's default dark, strong contrast.
+
+### Named Rules
+
+**The Rarity Rule.** Each brand accent appears on at most one surface per page. Blue header, green success message, or magenta card accent — never two at once. Their infrequency is the point.
+
+## 3. Typography
+
+**Body Font:** Open Sans (light 300, regular 400, semibold 600, bold 700) with system-ui fallback stack.
+
+**Character:** Friendly without being casual. Open Sans at 300 weight gives a light, airy feel at body sizes while staying readable. Weight contrast (300 body, 600/700 headings) creates clear hierarchy without extra spacing.
+
+### Hierarchy
+
+- **Headline** (700, `1.75rem` / `28px`): Page titles (h1). Warm and grounded.
+- **Title** (600, `1.25rem` / `20px`): Card headers, section titles (h2-h3).
+- **Body** (300, `1rem` / `16px`): Paragraphs, labels, form text. 65–75ch max line length.
+- **Label** (400, `0.875rem` / `14px`): Form labels, small print, table headers.
+
+## 4. Elevation
+
+Flat by default. Depth is conveyed through tonal layering (tinted alert backgrounds, card header borders) rather than shadows. Bootstrap's default card shadow is acceptable for admin tables but should not be added elsewhere.
+
+**The Flat-By-Default Rule.** Surfaces sit flush. No box-shadows on cards, no floating elements, no drag-and-drop affordances. The sole exception is Bootstrap's default `.card` shadow, which is mild enough to pass.
+
+## 5. Components
+
+### Buttons
+
+- **Shape:** Gently rounded, 6px radius (Bootstrap `btn` default)
+- **Primary (Trust Blue):** `#1a6cb3` background, white text, 6px 12px padding. Hover darkens to `#145994`, active to `#0f4775`.
+- **Secondary/Outline:** Bootstrap `btn-outline-secondary` — grey border, inherits text colour. Used for navigation links and secondary actions.
+- **Danger:** Bootstrap `btn-outline-danger` — used only for logout. Red signals finality.
+- **Brand variants (`.btn-cb-green`, `.btn-cb-magenta`):** Available but reserved for admin contexts. Not used in main user flows.
+
+### Cards
+
+- **Corner Style:** 8px radius (Bootstrap `card` default)
+- **Background:** White (`#fff`)
+- **Shadow Strategy:** Bootstrap's default mild card shadow only. No additional elevation.
+- **Accent variant:** Add `card-header-cb` for a 3px magenta (`#ff036a`) bottom border on the header — used on profile and admin pages to distinguish data surfaces.
+
+### Alerts
+
+- **Shape:** Bootstrap `alert` defaults with tinted brand backgrounds
+- **Brand Blue alert:** Blue tint (`#d9edff`), dark navy text (`#1a4a7a`) — informational messages
+- **Brand Green alert:** Green tint (`#d1f9ee`), dark forest text (`#0a5c47`) — success messages
+- **Brand Magenta alert:** Magenta tint (`#ffccdd`), dark wine text (`#8a0036`) — error/destructive messages
+
+### Inputs and Forms
+
+- **Style:** Bootstrap `form-control` defaults — light grey border, white fill, 8px radius
+- **Focus:** Bootstrap default blue ring (`box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)`)
+- **Labels:** Bootstrap `form-label` — 400 weight, 14px, clear and descriptive
+- **Error handling:** Inline validation via Bootstrap's `is-invalid` class with magenta-tinted feedback
+
+### Navigation
+
+- **Style:** Fixed-top `navbar` with Trust Blue (`#1a6cb3`) background, white text, `navbar-dark` class
+- **Logo:** codebar SVG logo (white via `brightness(0) invert(1)`) with "auth" wordmark
+- **Mobile:** Bootstrap `navbar-expand-sm` — collapses to hamburger below 576px
+
+### Tables (Admin)
+
+- **Style:** Bootstrap `table table-hover` with `table-light` head
+- **Role selector:** Bootstrap `form-select form-select-sm` inline within rows
+- **Responsive:** Wrapped in `table-responsive` for horizontal scroll on narrow viewports
+
+## 6. Do's and Don'ts
+
+### Do:
+
+- **Do** use the darker Trust Blue (`#1a6cb3`) for any interactive surface (buttons, nav) — it passes WCAG AA with white text
+- **Do** reserve the brand accent colours (blue `#4bafff`, green `#19f3be`, magenta `#ff036a`) for tinted backgrounds and decorative borders only
+- **Do** keep pages flat — no card shadows, no floating elements, no drag-and-drop
+- **Do** use plain-language labels on forms ("Email address", not "E-mail")
+- **Do** use the magenta card-header accent to distinguish data surfaces from content surfaces
+
+### Don't:
+
+- **Don't** use brand accent colours as text or button backgrounds on white — they fail contrast
+- **Don't** add corporate SaaS patterns (dark sidebars, metric dashboards, status badges)
+- **Don't** use AI-slop patterns: gradient text, glassmorphism, hero-metric templates, generic card grids
+- **Don't** nest cards — one level of card depth is the limit
+- **Don't** use `border-left` greater than 1px as a coloured accent stripe on cards or alerts
+- **Don't** use em dashes in UX copy
+- **Don't** render the `data-bs-theme` as `light` — use `auto` to respect OS preference

PRODUCT.md

@@ -0,0 +1,35 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Students and coaches of codebar workshops. They're here to sign in, manage their profile, or — for organisers — administer user roles. The auth app is a step on the way to something else (a workshop, their dashboard), not the destination.
+
+## Product Purpose
+
+Authentication gateway for codebar. Handles sign-in via GitHub OAuth and magic links, shows profile info, and provides basic admin user management. Success means users get signed in quickly without friction and move on to what they came for.
+
+## Brand Personality
+
+Warm and inclusive. Friendly without being twee, clear without being clinical. codebar is a charity that runs free programming workshops for underrepresented groups — the auth app should reflect that same welcoming spirit. No corporate jargon, no stock photos, no AI-generated genericism.
+
+## Anti-references
+
+- Corporate SaaS dashboards (dark sidebars, metric overload, grey-on-grey)
+- AI slop (gradient text, glassmorphism, hero-metric templates, generic card grids)
+- Overly serious "enterprise" anything
+- Any design where you can tell an AI made it without a human in the loop
+
+## Design Principles
+
+- **Inclusive by default** — accessible language, clear labels, generous touch targets. The auth page is often someone's first interaction with codebar's systems.
+- **Warmth without fluff** — friendly colours and tone, but no decoration for its own sake. This is a utility, not a marketing page.
+- **Direct and unceremonious** — get users signed in and out of the way. Every unnecessary element is friction.
+- **Distinctive not derivative** — codebar's brand colours (blue, green, magenta) are unusual for an auth app. Lean into them rather than defaulting to safe blues.
+
+## Accessibility & Inclusion
+
+WCAG AA minimum. Good contrast, keyboard navigable, screen-reader friendly forms. Consider users who may be new to tech — avoid jargon, use plain language in labels and error messages.