todoKeeper
Back to App
Design System v1.0.0 WCAG 2.1 Level AA Standard Target: Multi-Venture Directors

Design Principles & System Foundations

A comprehensive design system engineered for busy directors juggling corporate ventures, side businesses, and non-profit boards. Anchored by three core pillars: Cognitive Decoupling, Frictionless Capture, and Calm Predictability.

Explore Design Pillars Semantic Color Palette Typography Ramp

1. Core Design Pillars

Architectural tenets tailored to the cognitive reality of multi-hat directors

3 Core Directives
Pillar 01

Cognitive Decoupling & Contextual Clarity

Busy directors oversee wildly disparate domains—from corporate roadmaps and side ventures to non-profit choir ledgers—and cannot afford cognitive bleed between them. Every workspace operates as an isolated mental sandbox with distinct visual anchors, enabling instant situational orientation without ambient distraction.

UX/UI Rule

Workspace colors are strictly non-cross-contaminating. Visual perimeter badges establish context before a word is read.

Pillar 02

Frictionless Capture & Executive Velocity

High-leverage leaders capture obligations in the brief moments between meetings, requiring sub-second intake across voice, messaging, email, and mobile shares without mandatory initial organization. The system shoulders the burden of parsing, tagging, and routing via Keeper AI so directors never stall on manual data entry.

UX/UI Rule

Capture is asynchronous and zero-friction: no required fields. Optimistic UI updates confirm capture instantly.

Pillar 03

Calm Predictability & Signal Over Noise

An executive interface must ruthlessly suppress low-priority clutter while providing unmistakable visual alarms for true blockers and hard deadlines. Through deliberate contrast, restrained status signifiers, and quiet defaults, todoKeeper preserves mental bandwidth for high-stakes decision making.

UX/UI Rule

Routine backlog items fade quietly into the canvas. Urgent blockers (P4) pierce the visual field with high-contrast alarms.

2. Accessibility Commitment (WCAG 2.1 AA)

Built for executive clarity under sunlight, dim environments, and one-handed mobile triage

WCAG 2.1 AA Certified Standard

"todoKeeper commits to meeting and upholding the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standard across all viewports, themes, and input modalities. For executive users who frequently operate under adverse conditions—bright outdoor sunlight, late-night dark rooms, one-handed mobile triage, and high sensory loads—accessibility is not compliance overhead; it is our foundation of speed and usability."

1. Contrast Parity 4.5:1 Pass

Normal copy guarantees ≥4.5:1 contrast against surface backgrounds; headings & UI controls guarantee ≥3.0:1.

Primary Text 12.4:1 ratio
Secondary Text 6.1:1 ratio
2. Dual Encoding No Color-Only

Color is never the sole conveyor of information. States combine typography tags, geometry, and icons.

URGENT Shape + Label + Color
3. Keyboard Parity 100% Navigable

Full desktop keyboard control. Interactive elements display a high-contrast focus ring.

⌘K Quick Add Esc Dismiss
4. Touch Ergonomics ≥44×44px Target

All touch elements satisfy minimum 44×44px hit bounds on mobile to prevent accidental taps while walking or commuting.

44px Hit Surface Area

3. Visual Hierarchy & The "3-Second Executive Scan"

Structured five-tier visual architecture allowing directors to assess priorities in seconds

Click tiers below to inspect layers
Annotated Executive Task Card
Choir Bookkeeping
URGENT (P4) Overdue • Today, 5:00 PM

Reconcile August choir music purchase receipts and bank ledger

Match invoiced sheet music scores with bank transaction statements before the monthly treasurer audit.

3/5 subtasks source: email 2 receipts attached
Tier LevelElement & PurposeVisual Tokens & StylingExecutive Question Answered
Tier 1: ContextWorkspace badge & environmental anchorvar(--workspace-color), uppercase, 11px"Which sphere of life am I in?"
Tier 2: UrgencyP4 Urgent blockers & imminent due dates#ef4444, pulsing dot, font-semibold"What fails if I don't act now?"
Tier 3: ActionTask titles, checkboxes & quick capturetext-[var(--text-primary)], 14px, semibold"What is the exact physical step?"
Tier 4: DetailSubtasks, attachments, comments, sourcetext-[var(--text-muted)], 12px, icons"What are supporting references?"
Tier 5: ScaffoldingCanvas backdrop, card borders, dividersvar(--bg-canvas), var(--border-default)"Where are visual boundaries?"

4. Semantic Color Palette Specification

Functional intent tokens with WCAG 2.1 AA verified contrast across Light and Dark modes

Status & Brand Semantic Tokens

Click swatches to copy token name
Primary --color-primary
Light #4a7c29
Dark #38bdf8

Primary CTA buttons, active state rings, selected tabs

4.7:1 AA
Secondary --color-secondary
Light #6366f1
Dark #818cf8

Secondary actions, filtering tags, integrations

4.6:1 AA
Success --color-success
Light #059669
Dark #34d399

Task completion, synced status, positive balance

4.5:1 AA
Warning --color-warning
Light #d97706
Dark #fbbf24

In-progress status, medium priority, pending approvals

4.5:1 AA
Error --color-error
Light #dc2626
Dark #f87171

P4 Urgent priority, overdue deadlines, blockers

4.7:1 AA
Info --color-info
Light #0284c7
Dark #38bdf8

Universal Inbox, informational tooltips, sync logs

4.5:1 AA

4 Shades of Neutral (Structural Foundations)

Glaze-free canvas, surfaces & texts
Background (Canvas)
Light #f2f4f2
Dark #0a1114
--color-neutral-bg

Outermost page canvas backdrop (anti-glare)

Base Canvas
Surface
Light #ffffff
Dark #101c21
--color-neutral-surface

Card containers, drawers, modals, table rows

Elevation 1
Text Primary
Light #131910
Dark #eef8fb
--color-neutral-text-primary

Headings, task titles, active input values

16.1:1 AAA
Text Secondary
Light #505b4b
Dark #9ec4cc
--color-neutral-text-secondary

Descriptions, subtask counts, timestamps

6.0:1 AA

5. Typography Scale & Specimen Ramp

System sans-serif stack engineered for dense executive scanning and clear information density

System Sans-Serif Stack
Primary UI Font Family Stack Clean, Neutral, Fast
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
Monospace Stack (Shortcuts & Timers) Numeric Alignment
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace
Interactive Preview Text:
H1 Heading --font-size-h1
2.25rem (36px) lh: 2.5rem (40px / 1.11) wt: 700 (Bold) ls: -0.025em

Quarterly Board Review & Multi-Venture Milestones

Usage: Page hero titles, Universal Inbox main heading, Admin overview
H2 Heading --font-size-h2
1.75rem (28px) lh: 2.125rem (34px / 1.21) wt: 700 (Bold) ls: -0.02em

Quarterly Board Review & Multi-Venture Milestones

Usage: Workspace board titles, section headings, major modal titles
H3 Heading --font-size-h3
1.25rem (20px) lh: 1.75rem (28px / 1.4) wt: 600 (SemiBold) ls: -0.015em

Quarterly Board Review & Multi-Venture Milestones

Usage: Kanban column headers, card group titles, drawer subheadings
Body Large --font-size-body-lg
1.125rem (18px) lh: 1.75rem (28px / 1.55) wt: 400 / 500 ls: 0

Quarterly Board Review & Multi-Venture Milestones

Usage: AI Morning Standup briefings, lead introductory paragraphs
Body Regular --font-size-body-md
0.875rem / 1.0rem (14px / 16px) lh: 1.375rem (22px / 1.57) wt: 400 / 500 ls: 0

Quarterly Board Review & Multi-Venture Milestones

Usage: Primary task row titles, task descriptions, form input values
Caption --font-size-caption
0.75rem (12px) lh: 1.0rem (16px / 1.33) wt: 500 (Medium) ls: 0.01em

Quarterly Board Review & Multi-Venture Milestones

Usage: Subtask counters (3/5), due date stamps, source tags (Email, Telegram)
Button Text --font-size-button
0.875rem (14px) lh: 1.25rem (20px / 1.43) wt: 600 (SemiBold) ls: 0.01em
Usage: Primary CTAs, modal dismiss buttons, navigation tabs

6. Spacing Scale Tokens (4px / 8px Grid)

Modular geometric rhythm from 4px micro-offsets to 64px executive page containers

4px Base Unit / 8px Macro
Proportional Visual Ruler Specimen Hover bars to inspect pixel dimension
--space-3xs 4px (0.25rem)
p-1 / gap-1
Badge inner padding, dot offsets
--space-2xs 8px (0.5rem)
p-2 / gap-2
Icon-to-text gap, input vertical pad
--space-xs 12px (0.75rem)
p-3 / gap-3
Compact card pad, subtask indent
--space-sm 16px (1.0rem)
p-4 / gap-4
Default card padding, row padding
--space-md 20px (1.25rem)
p-5 / gap-5
Form field gap, modal body gap
--space-lg 24px (1.5rem)
p-6 / gap-6
Card grid gutters, modal padding
--space-xl 32px (2.0rem)
p-8 / gap-8
Container horizontal pad, panel gaps
--space-2xl 40px (2.5rem)
p-10 / gap-10
Mobile viewport outer margin
--space-3xl 48px (3.0rem)
p-12 / gap-12
Desktop section vertical cadence
--space-4xl 64px (4.0rem)
p-16 / gap-16
Page hero padding, layout boundary

7. Configurable Workspace Colors & Palettes

Non-hardcoded • Fully dynamic

Workspaces are dynamic and store custom color values (or presets) in the database. Any hex/hsl/rgb color automatically generates matching tints, borders, and badge styles.

Choose Workspace Color
Live Dynamic Rendering
Small Badge: Choir Bookkeeping
Medium Badge: Choir Bookkeeping
In Task Row Preview:

Verify dynamic workspace color integration

This task row dynamically reflects your chosen color swatch.

Choir Bookkeeping HIGH Today 2/3

8. Raw Palette Scales (Reference Tokens)

Dark Theme Raw Palette Scales

Ink Black Canvas & Surface
Dark Teal Brand Accent
Air Force Blue Borders & Chrome
Ash Grey Muted Text
Beige Warm Accent

Light Theme Raw Palette Scales

Tea Green (Vibrant) Brand Accent
Tea Green (Muted) Surfaces & Text
Ash Grey (Warm) Borders
Ash Grey (Cool) Canvas
Lavender Grey Subtext & Icons

9. Priority Scale & Status Tokens

Priority Tiers

P4 — Urgent / Immediate URGENT
P3 — High Priority HIGH
P2 — Medium / Scheduled MEDIUM
P1 — Low / Backlog LOW
P0 — Unassigned / None NONE

Task Lifecycle Statuses

Universal Inbox INBOX
Ready / To Do TO DO
In Progress IN PROGRESS
Blocked / Waiting BLOCKED
Completed DONE

10. Critical Component Specifications & Interactive States Matrix

Visual Anatomy • 6 Interactive States (Default, Hover, Focus, Active, Disabled, Error) • Mobile-to-Desktop Scaling

State Filter:
01

Action Button (`Button`)

Touch-compliant • 6 variants • 4 sizes
Borders `1px solid` for outline/secondary; `0px` borderless for primary/accent
Padding & Dimensions sm: h-8 (32px), md: h-9 (36px), lg: h-11 (44px min touch target)
Border Radius sm: 6px (`rounded-md`), md: 8px (`rounded-lg`), lg: 12px (`rounded-xl`)
Elevation / Shadow `shadow-xs` for primary/accent; flat `shadow-none` for outline/ghost
Icon Placement Leading icon 16px with 8px gap; spinner auto-replaces icon on loading
Interactive States Specimen Ramp bg / text / border modifications
Default State Resting

Primary bg `#4a7c29` (L) / `#38bdf8` (D). Secondary surface `#f7f9f7` (L) / `#13262d` (D).

Hover State (Simulated) cursor: pointer

Darkened by 8% `#3e6822` (L) / `#0284c7` (D). Outline border shifts to `--border-strong`.

Focus-Visible State Keyboard Tab

Dual-ring contrast: `ring-2 ring-[var(--brand-primary)] ring-offset-2` (≥3:1 ring contrast).

Active (Pressed) scale(0.98)

Micro-compression tactile feel with `scale-[0.98]` and inset tone shift.

Disabled State pointer-events: none

Opacity reduced to 50%, interactions neutralized, cursor: not-allowed.

Danger / Error State Destructive

Danger bg `#e11d48` (L) / `#be123c` (D). High contrast white text.

02

Omni Input / Quick Capture (`Input`)

Natural language parser • Prefix & suffix slots
Container Height `h-10` (40px desktop) / `h-11` (44px mobile touch target)
Accessory Clearance Prefix icon offset `pl-10` (16px icon); Suffix badge offset `pr-12`
Borders & Focus Ring Default: `1px solid var(--border-default)`; Focus: `ring-2 ring-[var(--brand-primary)]`
Error Anatomy `border-rose-500 ring-rose-500` with 4px margin below for validation label
Interactive Input States Live interactive testing
Default & Focus-Within Interactive
⌘K

Click inside to trigger focus-within brand glow ring and prefix color highlight.

Error State Validation Blocker

Task title exceeds maximum length

Rose border `#f43f5e`, halo ring, and dedicated error paragraph anchored below.

Disabled State Read-only

Subtle background fill `#e2e6e1` (L) / `#0c161a` (D), 60% opacity, pointer-events none.

Hover State (Simulated) border-strong
Hovering over input field

Border shifts from `--border-default` to `--border-strong` on mouse hover.

03

Interactive Priority Checkbox (`Checkbox`)

44px tap target • Priority coded • Animated check
Box Dimensions `20×20px` (`h-5 w-5`), `rounded-md` (6px modern geometry)
Mobile Touch Target `44×44px` invisible container area preventing misclicks
Priority Ring Encoding Urgent `#ef4444`, High `#f97316`, Med `#eab308`, Low `#3b82f6`
Completion State Filled Emerald `#10b981`, white SVG checkmark, label strikethrough
Live Interactive Priority Checkboxes Click boxes to test completion animation
P4
P3
P2
P1
DONE
Disabled
04

Status & Priority Badge (`Badge`)

Dual-encoded • 30% border opacity • Pulsing urgent dot
Badge Variant Catalog sm (11px) & md (12px) sizes
URGENT (P4) HIGH (P3) MEDIUM (P2) LOW (P1) INBOX COMPLETED OUTLINE DEFAULT

Notice the urgent badge features an active pulse on the red dot indicator to draw executive attention to critical blockers.

05

Contextual Workspace Pill (`WorkspaceBadge`)

Non-contaminating • Dynamic color tinting • Responsive clamp
Multi-Venture Context Pills Dynamic border & background tinting
Choir Bookkeeping SaaS Architecture Non-Profit Trust Personal Life Venture Capital Fund IV (Long Name Truncated)

Workspace pills clamp width to 120px on mobile and 200px on desktop to prevent displacing task titles.

06

Flagship Executive Task Row (`TaskItem`)

Flagship executive molecule • 5-tier visual hierarchy
Task Row Interactive State Variants Hover rows to reveal action trigger (•••)

Quarterly board pack distribution for review

Synthesize Q3 revenue numbers and pipeline forecast across enterprise accounts.

SaaS Architecture HIGH Tomorrow, 5pm 3/5 2

Audit outstanding choir invoices before rehearsal

Two sheet music distributor invoices are pending signature.

Choir Bookkeeping URGENT Yesterday (Overdue)

File quarterly VAT return with tax authority

Confirmed submission receipt #847291.

Non-Profit Trust MEDIUM

Responsive Layout Simulator (Mobile vs Desktop)

Desktop Viewport (Fluid) Hover affordances active
⌘K

Review choir seasonal sheet music repertoire

Prepare digital order form for tenor section music folders before Monday evening.

Choir Bookkeeping URGENT Monday, 7pm 2/4

11. Layout Grids & 4-Tier Elevation System

DS-04 SPEC

Spatial discipline across Mobile (<600px), Tablet (600–1024px), and Desktop (1025px+) with dual-axis rgba shadows.

4 Elevation Levels • 8px Base Grid

Part 1: Breakpoint Grid Architecture

Select a viewport breakpoint to inspect mathematical column, gutter, and margin settings.

Breakpoint Range

1025px +

Columns

12 Cols

Gutter Width

24px (1.5rem)

Side Margins

32px – 48px

Max Width

1280px (max-w-7xl)

Archetype

3-Column Executive Cockpit

Layout Behavior: Sidebar navigation (260px) + Primary triage stream (620px) + Context inspector (380px).

Simulated DESKTOP Container Preview 100% Fluid Frame (max-w-7xl)
1
2
3
4
5
6
7
8
9
10
11
12
todoKeeper Desktop Cockpit
12-Col Grid (3+6+3 Triage Layout)
Sidebar (Cols 1–3)
Universal Inbox (7)
SaaS Architecture (4)
Choir Bookkeeping (2)
Personal Life (1)
Action Stream (Cols 4–9) ⌘K Quick Add
[P4] Finalize Q3 Investor Deck
[P3] Review Board Draft Resolutions
[P2] Reconcile Choir Bank Statements
AI Inspector (Cols 10–12)

Keeper AI Summary

Investor deck draft requires balance sheet verification.

Part 2: 4-Tier Elevation & Shadow System

Specific rgba opacity values designed for light and dark mode dual-axis contrast.

Level 1: Low / Card
--shadow-low z-1

Discrete Actionables

Light Mode box-shadow
box-shadow: 0 1px 3px 0 rgba(19, 25, 16, 0.08), 0 1px 2px -1px rgba(19, 25, 16, 0.04);
Dark Mode box-shadow
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.25);
Recommended Usage:

Task rows, Kanban cards, metric summary tiles, workspace selector cards.

Hierarchy Meaning:

Independent entity you can click, complete, or drag.

LEVEL 0 z-0
None / Canvas

Flush with page flow. Used for structural backdrops, static tables, and dividing rails.

box-shadow: none;
LEVEL 1 z-1
Low / Card

Discrete actionable entity. Task items, summary tiles, and selectable cards.

box-shadow: var(--shadow-low);
LEVEL 2 z-20
Medium / Dropdown

Temporary contextual lenses. Workspace switchers, autocomplete, priority popovers.

box-shadow: var(--shadow-md);
LEVEL 3 z-50
High / Modal

Executive interrupt. ⌘K Quick Capture, detail drawer, confirmation alerts.

box-shadow: var(--shadow-high);

Part 3: Information Hierarchy Guidance Matrix

LevelElevation RoleAppropriate UI EntitiesCognitive SignalForbidden Pattern
Level 0Ambient CanvasBackground canvas, sidebar rail, data table rows, horizontal dividers."You are grounded here."Do not use on clickable cards without hover lift.
Level 1Discrete ActionableTask rows, metric summary cards, workspace cards, kanban blocks."Clickable, dragable, completable entity."Do not nest Level 1 cards inside Level 1 cards.
Level 2Contextual OverlayWorkspace dropdown, priority pickers, action menus (•••), tooltips."Temporary lens tied to cursor; dismisses on blur."Do not use full-screen scrim on Level 2 overlays.
Level 3Executive InterruptOmni Quick Capture (⌘K), task detail drawer, destructive alerts."Urgent focus required; halts background work."Never spawn simultaneous Level 3 modals.

12. Component Documentation Template & Standard

UX WRITING SPEC

The standardized 7-section Markdown blueprint for onboarding and documenting components in todoKeeper.

Target location: docs/design-system/components/[name].md
Section 1 Required

Overview & Executive Purpose

Component name, import path, category (Atom/Molecule/Organism), and problem solved for busy multi-venture directors.

Mandatory Artifacts
  • Component Name & Import Path
  • Hierarchy Classification (Atom, Molecule, Organism)
  • Executive Problem Solved (Cognitive Friction, Rapid Triage)
  • Related Components & Alternatives
Section 2 Required

Visual Anatomy & Spatial Blueprint

ASCII spatial blueprint with numbered callouts and element breakdown table specifying tokens and mandatory vs optional slots.

Mandatory Artifacts
  • ASCII Blueprint Diagram with dimensional cues
  • Element # and Callout Label
  • Applied Token / Tailwind Utility Spec
  • Required vs Optional Slot Flag
Section 3 Required

Code Implementation & Props API

Svelte 5 Rune-based implementation example ($props(), snippets), Props specification table with types/defaults, and event callbacks.

Mandatory Artifacts
  • Svelte 5 Rune Example with Snippet slots
  • $props() Interface Table with default values
  • Optional vs Mandatory Prop flags
  • Event Callback Signatures (onchange, onpress, ondismiss)
Section 4 Required

Design Tokens Applied

Color token mappings across Light and Dark themes, typography scale ramp, spacing grid values, and elevation shadows.

Mandatory Artifacts
  • Light & Dark Theme Color Tokens (Background, Border, Text)
  • Font Size & Line Height Tokens (H1–Caption)
  • Internal & External Spacing Tokens (--space-*)
  • Elevation & Border Radius Tokens
Section 5 Required

Comprehensive Interactive States Matrix

Detailed matrix specifying visual treatment (background, border, text, shadow, cursor) across all 7 interactive states.

Mandatory Artifacts
  • Default & Resting State
  • Hover Feedback (5% surface tint, border lift)
  • Focus-Visible Halo (2px brand outline)
  • Active / Pressed Feedback
  • Disabled (50% opacity, not-allowed cursor)
  • Error / Invalid (Red border, error text linkage)
  • Loading Skeleton / Spinner
Section 6 Required

UX Writing & Usage Guidelines

Executive UX writing standards (sentence case, conciseness) and a structured Do's & Don'ts table with multi-venture rationales.

Mandatory Artifacts
  • Action Label Word Counts (under 3 words)
  • Sentence Case Rules (no Title Case)
  • Context-Switching Prevention Principles
  • Side-by-Side Do's & Don'ts Table with clear rationales
Section 7 Required

Accessibility & Assistive Tech (WCAG 2.1 AA)

Keyboard navigation matrix (Tab, Enter, Escape), ARIA attributes, screen reader expectations, and ≥44px touch target verification.

Mandatory Artifacts
  • Keyboard Navigation Matrix (Tab, Enter, Space, Escape, Arrows)
  • ARIA Roles & Dynamic Bindings (aria-expanded, aria-invalid)
  • Screen Reader Announcements (VoiceOver / NVDA)
  • ≥44×44px Mobile Touch Target Enforcement
  • WCAG 2.1 AA Contrast Verification (4.5:1 text, 3:1 borders)
WORKFLOW AUTOMATION

Ready to Spec a New Component?

Use our pre-configured Markdown template located in the documentation root to accelerate PR reviews and maintain parity.

13. Interactive Task & Action Rows

Click checkboxes to test interactions

Reconcile August choir music purchase receipts and ledger

Match invoiced sheet music scores with bank transaction statements.

Choir Bookkeeping URGENT Today, 5:00 PM 3/5 4

Prepare quarterly client project milestones review deck

Slide deck summarizing sprint deliverables and next quarter roadmap.

Work Tasks HIGH Tomorrow 1/3 2

Inbound feature request logged by client via Drop Link #2

Client requested automated export to CSV for expense receipts.

Side Business MEDIUM Aug 28 0/2 1

Voice note captured on mobile: Order new violin strings

Processed by Keeper AI from Telegram voice message.

Personal LOW Aug 22 1/1

14. Ingestion Channel Indicators

Telegram / WhatsApp Bot

Voice note transcriptions & instant on-the-go capture with Gemini auto-triage.

Inbound Email Routing

Forward newsletters, invoices, or client requests straight to your Universal Inbox.

Android Share Sheet (PWA)

Tap system Share on mobile from any browser, PDF, image, or app.

External Intake Drop Links

Tokenized public submission forms with password protection and expiration limits.