---
version: "alpha"
name: "Shiftline"
colors:
  success: "#16885c"
  success-dark: "#55c995"
  action-background: "#f1f2f4"
  action-background-dark: "#242831"
  action-foreground: "#17181b"
  action-foreground-dark: "#f4f6f8"
  surface-canvas: "#f7f7f8"
  surface-canvas-dark: "#111318"
  surface-raised: "#ffffff"
  surface-raised-dark: "#191c22"
  surface-raised-foreground: "#747780"
  surface-raised-foreground-dark: "#9ca3af"
  text-body: "#17181b"
  text-body-dark: "#f4f6f8"
  accent-1: "#087cf0"
  accent-2: "#55a7ff"
  accent-3: "#b76b11"
typography:
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "14px"
  display:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "19px"
  h2:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "15px"
rounded:
  step-1: "8px"
  step-2: "9px"
  step-3: "10px"
  step-4: "11px"
  step-5: "12px"
  step-6: "14px"
spacing:
  step-1: "4px"
  step-2: "8px"
  step-3: "12px"
  step-4: "16px"
---

# DESIGN.md

## Overview

Shiftline is a local weekly scheduling dashboard for teams of about 8-20 people. The product keeps the Atlas Dispatch shell density (232px sidebar, sticky header, 1280px main column, 4/8/12/16px spacing) while replacing logistics copy with coverage, availability, and shift planning.

Pages:
- `index.html` - Overview with coverage summary cards, coverage trend chart, team availability bars, and today's shifts table.
- `schedule.html` - Separate Schedule page with Mon-Sun week grid, day/team filters, shift list, and the same Add shift dialog.

Primary action: **Add shift**. Shifts persist in `localStorage` under `shiftline-shifts` via `assets/shifts-app.js`. No backend.

Captured reference for the previous Atlas Dispatch page is preserved byte-for-byte in `REFERENCE_DESIGN.md`.

## Colors

- **success:** `#16885c` / dark `#55c995`
- **action / soft surface:** `#f1f2f4` / dark `#242831`
- **canvas:** `#f7f7f8` / dark `#111318`
- **raised surface:** `#ffffff` / dark `#191c22`
- **muted text:** `#747780` / dark `#9ca3af`
- **body text:** `#17181b` / dark `#f4f6f8`
- **accent:** `#087cf0` / dark `#55a7ff`
- **warning:** `#b76b11` / dark `#efb566`
- **danger:** `#d04455` / dark `#ff7d8c`
- **line:** `#e3e4e8`

CSS variables on `html`: `--canvas`, `--surface`, `--soft`, `--line`, `--ink`, `--muted`, `--accent`, `--success`, `--danger`, `--warning`, `--radius`.

## Typography

Inter with system UI fallbacks. Body 14px, page titles ~19px, section titles 15px, meta/labels 9-11px. Table cells tighten to 12px under 520px.

## Layout and spacing

- App shell: `grid-template-columns: 232px minmax(0, 1fr)`; collapses to one column at `max-width: 900px` (sidebar hidden).
- Main: `width: min(100%, 1280px)`, padding `18px 24px 40px` (mobile `14px 16px 32px`).
- Summary metrics: 4-column grid (`.ca-23`), 2 columns at 900px, 2 at 520px.
- Week grid (Schedule): 7 columns desktop, 4 at 1100px, 2 at 900px, 1 at 520px.
- Corner radii: 8-14px; cards use `--radius: 14px`.
- Elevation: light `0 1px 2px rgba(0,0,0,0.03)` on cards; theme toggle uses stronger `0 8px 24px rgba(0,0,0,0.2)`.

## Components

- Sidebar brand mark (`S` / Shiftline), user chip, workspace nav (Overview, Schedule, Teams, Availability, Reports), Help/Settings.
- Sticky frosted header with greeting or page title and primary **Add shift** button.
- Metric articles, chart panel, availability meters, data tables with status pills (Covered / Open / Gap risk).
- Schedule filters (`All days` / day, `All teams` / team).
- Modal dialog for Add shift (person, team, day, start, end).
- Fixed circular theme toggle (`data-ca-theme-action="toggle"`).

## Responsive behavior

- **1440px:** full sidebar + dense dashboard / 7-day week.
- **768px:** single column, sidebar hidden; mobile brand chip and Overview/Schedule link appear in the header; summary cards 2-up; week grid 2-up.
- **390px:** brand chip + Schedule/Overview link + Add shift stay visible; greeting title is screen-reader-only; search/notification controls hide; table windows hide; week grid stacks; no page-level horizontal overflow (tables scroll inside `overflow-x-auto`).

## Themes

Light/dark themes are driven by `src/theme-runtime.js` (copied to `assets/ca-theme.js`):

- Storage key: `ca-theme` (`light` | `dark`).
- Toggle control: fixed button with `data-ca-theme-action="toggle"` and `data-ca-theme-toggle`.
- Applies `data-ca-theme` on `<html>`, swaps `light` / `light dark` classes, sets `color-scheme`.
- Fallback: `prefers-color-scheme` when nothing is saved; hash `#ca-t-l` / `#ca-t-d` can force a theme.
- Verified fallbacks live in `src/theme-overrides.css` for nav and header control contrast.
- Persistence: choice survives reload via `localStorage`.

## Motion and interaction

Mostly static product UI. Interactive pieces: theme toggle, Add shift dialog, day/team filters, local shift list refresh. No marketing scroll motion.

## Content and identity replacements

Replaced Atlas Dispatch / Atlas, Ada Vale, Routes, Field log, Crew, Equipment, sales money metrics, and gallery source framing with Shiftline scheduling language. Favicon: `assets/favicon.svg`. No production canonical URL, analytics IDs, or invented legal/contact claims.