---
version: "1.0"
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"
  text-body: "#17181b"
  text-body-dark: "#f4f6f8"
  accent-blue: "#087cf0"
  accent-green: "#16885c"
  accent-orange: "#b76b11"
typography:
  body: "Inter, ui-sans-serif, system-ui, sans-serif"
  display: "Inter, ui-sans-serif, system-ui, sans-serif"
spacing: ["4px", "8px", "12px", "16px"]
---

# Shiftline Design

## Overview

Shiftline is a dense weekly team scheduling dashboard for teams of 8–20 people. The interface keeps the compact Atlas starter rhythm while changing all product identity and content to local team planning.

## Colors

- Canvas: `#f7f7f8` light / `#111318` dark
- Raised surfaces: `#ffffff` light / `#191c22` dark
- Body text: `#17181b` light / `#f4f6f8` dark
- Primary blue: `#087cf0`
- Success green: `#16885c`
- Attention orange: `#b76b11`

## Typography and spacing

Inter or the system sans stack is used throughout. Body text is 14px, display headings are 19px, and section headings are 15px. The spacing scale is 4px, 8px, 12px, and 16px; corners use compact 8–14px radii.

## Components

The 232px desktop sidebar contains the Shiftline mark, workspace navigation, settings, and user identity. A sticky 66px top bar contains breadcrumbs, search, theme control, and profile. Dashboard metric cards, coverage rows, availability summary, and the weekly schedule grid share a lightly bordered raised surface.

The primary action is `Add shift`. It opens a labelled accessible dialog containing a local form for person, team, day, time range, and color. Opening moves focus into the dialog, Tab and Shift+Tab stay trapped inside it, and Escape closes it and restores the actual trigger focus. Added shifts are stored in browser local storage and are reflected on both routes. Day pills and team select filter the same local schedule data.

## Responsive behavior

- Above 900px: 232px sidebar plus a flexible content column.
- At 900px and below: sidebar becomes a mobile menu and content uses 16px horizontal padding.
- At 620px and below: heading actions stack, compact metric grids remain two columns, and the seven schedule columns remain readable inside a contained horizontal scroller; the page itself never overflows horizontally.
- At 420px and below, the page-main and schedule content use 12px horizontal padding (the real narrow-screen exception to the 16px rule).
- The dashboard and schedule route consume the same local shift dataset, so day/team filters and newly created shifts stay consistent across views.
- The v0 example stores shifts only under `shiftline-v0-shifts-v1`; it never reads or migrates the unrelated `shiftline-shifts` key. The production artifact is a static export rooted at `/gallery-assets/coding-guides/v0/`: serve `out/` with a plain static HTTP server, open `index.html` for the dashboard and `schedule.html` for Schedule, and keep all same-origin assets under that base path.

## Themes and keyboard operation

Light and dark themes use CSS variables and persist under `shiftline-theme` after reload. The theme button exposes an accessible label. `N` focuses the Add shift action; Enter opens the labelled Add shift dialog when that trigger is focused, moves focus into the form, and submits the valid form; Tab and Shift+Tab remain trapped inside the dialog; Escape closes it and restores focus to the actual trigger. All navigation, filters, and controls are keyboard reachable.