DESIGN.md

name	Setpoint
description	A private executive-assistant workspace for current snapshots, inbox triage, schedule awareness, an infinite ideas canvas, deadlines, and finances.
colors	page page-deep surface surface-elevated card floating-panel notes-canvas text-primary text-muted text-subtle accent-primary accent-secondary danger warning success info sky-info finance-income finance-outflow finance-transfer v3-page v3-app v3-rail v3-card-tint v3-text v3-muted v3-accent #1e1e2e #0b0b13 #24243a #313244 #24243a66 #16161e #11111b #cdd6f4 #a6adc8 #6c7086 #cba6da #f97316 #f38ba8 #f9e2af #a6e3a1 #89b4fa #89dceb #a6e3a1 #f38ba8 #89b4fa #f4f1f8 #ffffff #fbf9fe #f4edfb #171528 #69647a #7c3aed
typography	display headline title body label mono fontFamily fontSize fontWeight lineHeight letterSpacing Montserrat, sans-serif 48px 600 1.05 -0.5px fontFamily fontSize fontWeight lineHeight letterSpacing Montserrat, sans-serif 28px 600 1.12 0 fontFamily fontSize fontWeight lineHeight letterSpacing Montserrat, sans-serif 13px 500 1.35 0 fontFamily fontSize fontWeight lineHeight letterSpacing Montserrat, sans-serif 12px 400 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing Montserrat, sans-serif 11px 600 1.2 1.5px fontFamily fontSize fontWeight lineHeight letterSpacing "Fira Code", monospace 11px 500 1.35 0
rounded	xs sm control md lg xl full 2px 4px 6px 8px 12px 16px 9999px
spacing	hairline tight compact small control section card roomy generous spacious 2px 4px 6px 8px 10px 12px 16px 20px 24px 32px
components	button-primary button-ghost card-default floating-panel notes-save-indicator notes-recovery-button notes-checklist-card notes-checklist-checkbox-checked v3-primary-button backgroundColor textColor rounded padding {colors.accent-primary} {colors.page-deep} {rounded.lg} 8px 12px backgroundColor textColor rounded padding #ffffff05 {colors.text-primary} {rounded.lg} 8px 12px backgroundColor textColor rounded padding {colors.card} {colors.text-primary} {rounded.lg} 16px backgroundColor textColor rounded padding {colors.floating-panel} {colors.text-primary} {rounded.xl} 16px backgroundColor textColor rounded padding {colors.floating-panel} {colors.text-muted} {rounded.full} 4px 8px backgroundColor textColor rounded padding {colors.floating-panel} {colors.text-primary} {rounded.md} 0 12px backgroundColor textColor rounded padding tldraw theme noteFill for the selected DefaultColorStyle tldraw theme noteText for the selected DefaultColorStyle 1px tldraw DefaultSizeStyle metrics backgroundColor textColor rounded size tldraw theme solid for the selected DefaultColorStyle tldraw theme noteFill for the selected DefaultColorStyle 3px tldraw DefaultSizeStyle metrics backgroundColor textColor rounded padding {colors.v3-accent} {colors.v3-app} {rounded.md} 8px 12px

Design System: Setpoint

Overview

Creative North Star: "The Private Ops Desk"

Setpoint is a private product surface, not a brand page. The physical scene is a single user checking the day from a laptop in a quiet room before moving into meetings, schoolwork, errands, or finance admin. The interface chooses a restrained dark theme because it is used repeatedly, often around calendar transitions or early in the day, when low glare and stable hierarchy matter more than spectacle.

The visual system is compact, border-led, and data-first. Purple is the default primary accent, but it should appear as a control signal, not a wash over the product. The shell can support a scoped V3 light mode, but new work must respect this file's normative frontmatter and its .impeccable/design.json extension sidecar.

Key Characteristics:

• Dense operational surfaces with stable scan paths.
• Muted tinted neutrals with one primary accent and domain status colors.
• Portaled panels that feel solid, opaque, and separate from page scroll.
• A single sans-serif family with hierarchy carried by size, weight, and spacing.
• Subtle motion for orientation only.

Height changes. Content-driven height changes use the same 160ms CSS ease (cubic-bezier(0.25, 0.1, 0.25, 1)) transition in both directions across Setpoint, matching the event notes field and analytics modal. This is the default for new and updated UI: in-flow disclosures, expanding notes, panels, and modals whose height changes when switching tabs or moving between loading, error, empty, and populated states. Animate the containing surface's growth and shrinkage, not just the incoming content's opacity. Keep initial presentation at its natural height rather than growing from zero.

Reuse the shared implementations rather than introducing per-surface timings or measurement logic:

• Use AnimatedHeight from src/components/shared/AnimatedHeight.tsx around bounded content swaps; keep the wrapper mounted across tab and data-state changes, with padding and spacing inside its measured content. The analytics modal is the reference for tab-driven resizing.
• Use AnimatedCollapse from src/components/shared/AnimatedCollapse.tsx for content that mounts/unmounts with a disclosure; keep spacing inside its height envelope and make exiting content inert immediately.
• For explicit height targets, use heightTransition from src/lib/motion.ts for Motion and --sp-motion-height / --sp-ease-height for CSS. Ordinary notes expand on focus, remain expanded with content, and collapse when empty on blur.

Measured resize bursts have a 250ms animation budget, retaining the 160ms base curve. AnimatedHeight follows an already animated DOM descendant directly rather than easing its intermediate heights again; the final measurement stays immediate until the burst is quiet. Portaled surfaces remain independent. CSS height/min-height/max-height transitions are detected through browser animations; native disclosures also use their DOM toggle signal because browsers may hide pseudo-element animations; custom Motion height owners must expose data-height-animating="true" for their active movement (including exit), then clear it on completion. This budget limits animation time, not data fetching or deliberate completion-receipt holds.

Preserve viewport height limits and scrolling so taller content remains reachable. Reduced motion makes height changes immediate. Direct manipulation, virtualized geometry, and streamed text retain immediate sizing. This height rule does not replace separate entrance/exit or hover/focus motion. Verify growth, shrinkage, rapid switching, small-screen scrolling, and reduced motion when adopting it on a new surface.

Colors

The palette is restrained Catppuccin-influenced dusk: purple-tinted neutrals, lavender as the primary accent, orange reserved for notification and warning roles, and named status colors tied to real data states.

Primary

• Lavender Control (#cba6da): Default --ea-accent, active navigation, primary action emphasis, selected states, and accent glows. It is user-customizable, so components should receive accent or use --ea-accent instead of hard-coding when practical.

Secondary

• Warning Orange (#f97316): Secondary-only accent for snooze, time warnings, suspended-service states, and notification semantics. Do not use it as the main brand color.

Neutral

• Mocha Page (#1e1e2e): Main dark body background.
• Deep Page (#0b0b13): Deep gradient stop and background depth.
• Panel Surface (#24243a): Elevated panels and settings surfaces.
• Input Surface (#313244): Inputs and higher-emphasis controls.
• Floating Panel Solid (#16161e): Portaled dropdowns, popovers, history, search, and menus. This must remain opaque.
• Notes Canvas Black (#11111b): Full-bleed background behind the native dark tldraw surface and its loading or setup states.
• Primary Text (#cdd6f4): Main copy and titles.
• Muted Text (#a6adc8): Metadata, carried-over text, and lower-priority labels.

Status

• Urgent Rose (#f38ba8): Errors, overdue work, dismissive actions, high urgency.
• Due Soon Cream (#f9e2af): Due-soon and skipped states.
• Success Green (#a6e3a1): Connected states, confirmations, recurring bills.
• Info Blue (#89b4fa): Informational badges and neutral status.
• Income Green (#a6e3a1): Income transactions and recorded-payment status/amounts. Sky-info retains cyan.
• Outflow Rose (#f38ba8): Spending, expense transactions, and scheduled payments. Labels distinguish payment direction or timing from errors and overdue states.
• Transfer Blue (#89b4fa): Neutral account-to-account movement and transfer schedules.

Named Rules

The Accent Rarity Rule. Lavender should guide attention, not coat the interface. On dense product screens, keep it to active controls, focus rings, selected states, and small emphasis.

The Source Color Rule. Domain colors map to data meaning. Do not repurpose task, transaction, urgency, or source colors as decorative theme colors.

The Finance Direction Rule. Inflows use green, outflows use rose, and transfers use info blue. Utilities uses the same green for recorded payment labels and amounts, and rose for scheduled payments; Journal retains signed direction colors. Use labels, signs, and check/clock or transfer icons to distinguish direction, recording status, and urgency.

Typography

Primary Font: Montserrat, with the system sans-serif stack as backup. Label/Mono Font: Fira Code for keyboard hints and tabular technical labels.

Character: One sans-serif family keeps assistant summaries, headings, and operational UI in the same exacting voice. Establish hierarchy through size, weight, line height, and spacing rather than decorative font changes.

Hierarchy

• Display (600, 48px, 1.05 line-height): Hero greeting, snapshot summary, and other rare top-level statements.
• Headline (600, 28px, 1.12 line-height): Page-level headings such as settings and major empty states.
• Title (500, 13px, 1.35 line-height): Card titles, row titles, input text, and dense primary labels.
• Body (400, 12px, 1.5 line-height): Summaries, descriptions, previews, and readable supporting copy. Cap long body text at 65 to 75 characters.
• Label (600, 11px, 1.5px tracking, uppercase where appropriate): Section headers, panel headings, date groups, and compact metadata.
• Micro Label (500 to 700, 9px to 10px): Source tags, type badges, timestamps, and tight counters.

Named Rules

The Single-Family Rule. Use Montserrat for all Setpoint-authored interface and assistant text. Distinguish hierarchy and voice through size, weight, line height, and spacing rather than switching typefaces. Native tools and user-authored content may retain their own type systems where Setpoint does not own the rendering surface.

Layout

Setpoint uses a dense, viewport-bound shell with stable scan paths. Desktop workspaces may own the shell's remaining height and suppress shell-level scrolling when their interaction model requires it; Notes and Calendar are the established examples. Default spacing follows a 4px rhythm, with 2px and 6px reserved for compact optical adjustments. On narrow viewports, tappable controls meet the 44px minimum touch target, safe-area insets protect shell chrome, and text fields render at 16px or larger to prevent browser zoom.

Notes is desktop-only. Its canvas fills the entire tab panel beneath the narrow Setpoint shell, with no inner card, max-width container, page padding, or independent page scroll. The canvas itself clips overflow and isolates its stacking context so native tldraw edge controls retain the full instrument surface. Mobile and demo omit Notes rather than presenting a reduced substitute.

Finances uses one centered frame for Utilities and Journal: 1680px maximum, expanding to 2800px at viewport widths of 2200px and above. Utilities has independently scrolling desktop overview and calendar columns. On desktop, selected details replace the calendar in its column, preserving the list and calendar scroll positions. Closing details restores the calendar. At 767px and below, details use a full-height shared modal sheet with contained focus and blocked background interaction. The centered surface has 24px minimum side margins, width equal to the viewport minus 48px capped at 560px, maximum height equal to the dynamic viewport minus 96px, and 20px inner padding; at least 48px remains above and below it. See Finances Workspace below for current payment organization and calendar semantics.

Journal keeps its date-grouped ledger beside the activity calendar. Standard desktop uses a ledger up to 860px with a 40px gap; at 2200px and above the ledger/calendar expand at a 1.45:1 ratio with a 48px gap. From 768px through 1199px, the calendar is a compact 300px rail with a 24px gap. At 767px and below, a non-sticky, expandable calendar week sits above the rows with a 24px gap; at 375px and below, Journal side padding is 8px. These are Finances surface rules, not global dashboard layouts.

The Instrument Owns the Work Area Rule. When a native spatial tool is the product surface, let it occupy the full available workspace; keep Setpoint framing at the shell boundary.

Elevation & Depth

Depth is border-first. Inline cards and list items should rely on 1px borders, tonal fills, and small accent glows, not elevation shadows. Shadows are reserved for portals, modals, dropdowns, and focus or accent effects that must sit above the app.

Shadow Vocabulary

• Floating Panel (0 20px 60px rgba(0,0,0,0.7)): Standard shadow for portaled dropdowns, menus, popovers, and modals.
• Accent Glow (0 0 6px {color}30 to 0 0 8px {color}60): Timeline dots, active indicators, and focused accents.

Named Rules

The Portal Shadow Rule. Shadows belong to things that escape normal layout. Cards, rails, rows, and inline sections should not gain decorative drop shadows.

Shapes

Setpoint uses gently rounded, border-led geometry. Dense controls use 6px to 8px corners, cards and recovery panels use 12px, large floating containers use 16px, and compact statuses use full pills. Borders are normally 1px and low contrast; strong silhouette changes are reserved for selected, focused, or urgent states. The Notes canvas is intentionally rectangular and flush to the tab boundary so it reads as an instrument surface rather than another card.

The Flush Canvas Rule. Never round or inset the Notes work surface. Rounded shapes belong to Setpoint's compact overlays and recovery controls, not to the canvas boundary.

Components

Buttons

• Shape: 8px to 12px radius, with icon buttons using stable square dimensions.
• Primary: Lavender fill or lavender-tinted border when the action truly changes state. Keep text compact and direct.
• Hover / Focus: Every enabled button and icon button needs a deliberate hover animation and visible focus state. Use 150ms to 240ms transitions, border or background tint changes, subtle foreground/icon shifts, or a restrained transform such as translateY(-1px) when it does not disturb dense layouts. Avoid layout-shifting hover states, heavy bounces, and motion that ignores prefers-reduced-motion.
• Secondary / Ghost: Use low-opacity white fills, muted borders, and foreground text. Ghost buttons should remain legible but subordinate.

Chips

• Style: 4px to 9999px radius depending on density. Use low-opacity fills and borders with text at 9px to 12px.
• State: Selected chips can use accent-tinted fills and stronger borders. Filter chips should not invent new colors beyond source, status, or accent roles.

Cards / Containers

• Corner Style: 12px for dense cards and row groups, 16px for large containers and shadcn Card.
• Background: Dark cards use rgba(36,36,58,0.4) to rgba(36,36,58,0.6). Floating panels use solid #16161e.
• Shadow Strategy: No card shadows at rest. Use 1px borders and state glows.
• Border: 1px solid rgba(255,255,255,0.04) for cards, 0.06 for sections, 0.08 for controls, and 0.10 for hover.
• Internal Padding: 16px is standard for cards, 12px for compact panels, 8px for small controls.

Inputs / Fields

• Style: #313244 or matching tokenized input background, 8px radius, 1px border, 12px to 13px type.
• Focus: Tab (including Shift+Tab), Enter, and Space enable keyboard focus indicators. Pointer actions and letter shortcuts such as E do not activate them. Typing and arrow navigation preserve the current mode. useKeyboardFocusIndicators owns the document-root data-sp-keyboard-focus flag; Tailwind focus-visible utilities and authored :focus-visible selectors must use that gate, including portaled controls. Shift border toward lavender and use a restrained accent glow only when focus needs stronger affordance.
• Error / Disabled: Error uses urgent rose with text or icon support. Disabled states reduce contrast but should remain readable.

Navigation

• Desktop: A slim, persistent shell prioritizes orientation across Dashboard, Inbox, Calendar, Notes, News, and Finances. Finances is the sixth tab and opens Utilities at /finances; retained record and review work stays in the guarded /finance foreground. Use text tabs with a restrained accent active state, quiet inactive labels, and no repeated icons or permanent shortcut badges. Keep Alfred compact with a visible open state and retain a clickable ⌘K control. Health stays visible in a stable right-hand position, signals refresh activity and issues, and contains the clickable Sync now action. Analytics, Snapshots, and Settings live in overflow. Avoid individually boxing every resting control.
• Mobile: Finances is the fourth bottom-navigation destination, after Dashboard, Inbox, and Calendar. Tabs and sheets must meet the --sp-touch-min (44px) canonical hit-target size and avoid reflowing labels into cramped controls. Text inputs must render at ≥16px on mobile viewports to prevent iOS auto-zoom.
• Keyboard: Preserve existing shortcuts, including 1–6 (Finances on 6, Calendar events/deadlines on 3), the Notes navigation chord, Alfred, and R for sync. Tab and Alfred shortcut hints live in tooltips; the command palette retains its visible ⌘K affordance.

Finances Workspace

Utilities is the default view, with Coming due and Recorded this month as primary utility groups and explicit Nothing due and unavailable-history groups. Other recurring payments has a visible section with separate Scheduled and Recorded lists; utility bills remain outside those lists. Utilities and Journal use underlined page tabs; Activity is a quiet header action. Search has an inset input surface and a search icon.

• Material And Type: Reuse the incumbent muted neutrals, lavender selection, one green for recorded-payment status/amounts and Journal inflows, rose for scheduled payments and Journal outflows, and blue for transfers with text/sign cues. The portaled detail drawer uses the opaque floating-panel fill (#16161e), a 12px radius, and a restrained desktop shadow (-12px 16px 40px -12px #0009); the mobile modal retains the same opaque material and radius. Its contents share the drawer surface, with no nested detail border or fill. Workspace type stays compact: 12px body, 11px supporting facts, 16px detail titles, and a tabular 28px bill amount. This local hierarchy does not introduce a new global type scale or palette.
• Selected Bill: Due month controls the whole hero: month/year, amount, comparison, payment evidence, and related actions. Keep Nothing due, account credit, schedule estimates, and unavailable statements explicit. A sparse annual bar chart and equivalent month selector drive the same selection; missing history is a gap, never a fabricated zero. Use three-letter month labels, angled at compact widths. Do not add a competing historical amount summary beneath the chart.
• Source History: Keep Statement & record history beneath the chart with its disclosure, provider/source heading, and distinct Amount billed, Due, and Received facts. Statement date, source email, corrections, processing fees, and the dated activity trail remain separately labeled when available. Preserve dated notices without due dates as a separate selection rather than assigning them a month.
• Journal: Payee or transfer endpoints, amount, and one supporting detail lead each date-grouped row. Expansion reveals account, category, recorded status, split detail, and supported bill links in the ledger column. The activity calendar and rows share one month of recorded transactions. Selecting a calendar day outlines its group with a neutral primary-text 1px stroke (#cdd6f4) and no day background tint; a 2px inner inset keeps row hover clear of the outline. It preserves neighboring rows; desktop also scrolls to the group, while phone widths through 767px preserve the user's scroll position. Row hover or keyboard focus previews its date and daily summary. The Go to a day picker and exact payment links retain direct navigation into recorded history.
• Activity Calendar: Keep inflows, outflows, and transfers separate, with green/rose signed amounts and blue transfer counts. The bordered 8px-radius companion uses a quiet tonal fill without a shadow. Desktop calendar cells show compact amounts, exact amounts when its content width reaches 530px, and direction markers at 355px or narrower; the daily summary retains exact totals. At phone viewport widths through 767px, cells always use centered direction markers with full amounts in the summary, regardless of container width. Keep 8px between the date grid and its controls. Phone starts with a navigable week and a Show month disclosure. Selected dates retain their lavender fill and border, only Today has a cyan underlined date, and row previews have a distinct border. In Utilities and Journal, clicking outside the selected date’s cell, matching rows/group, or day summary clears day selection; clicking within those matching surfaces preserves it, and choosing another date selects that date normally. Loading, unavailable activity, and incomplete history remain explicit; incomplete daily totals never appear as zero.
• Payment Calendar: Utilities shares the calendar’s date navigation and row preview behavior, showing utility and recurring payments. The day summary lists actual named payments with recorded/scheduled labels, amounts, and local detail actions. The legend pairs Recorded with a check, Scheduled with a clock, and Transfer with its transfer icon. Recorded amounts use green, scheduled amounts rose, and transfer icons blue. Recorded payment rows open local payment facts with an explicit View in Journal action. Date-matching Utilities and recurring-payment rows use the same neutral primary-text 1px outline as Journal, with no date-selection background tint; selected-item lavender fill remains a separate state. Recording dates and amounts come from exact Journal relationships; an occurrence marked recorded without a hydrated record remains explicitly unavailable and never gains a fabricated calendar date. Forecast navigation stays within the available schedule window.
• Workspace Frame: Utilities and Journal share a 1680px maximum width, expanding to 2800px at viewport widths of 2200px and above. At desktop widths, the Utilities overview and calendar scroll independently beneath the heading and tabs. Details use a right drawer on desktop and a centered modal on mobile, preserving the underlying layout and scroll positions. Mobile calendar visibility remains an open product decision.
• Detail Drawer: Utility, scheduled, and recorded payment selections share one detail surface. On desktop, selecting the same item again closes the nonmodal drawer; selecting another retargets it and resets its own scroll. Close, Escape, and outside interaction dismiss it. Opening focuses the drawer; dismissal restores the latest connected trigger when focus remains in the drawer or falls back to the document body, preserving focus deliberately moved elsewhere. A gentle horizontal entrance/exit and fade respect reduced motion. At phone widths through 767px, the shared modal dialog contains focus and blocks background interaction; close, Escape, or tapping the backdrop dismisses it and returns focus to the trigger.
• Controls: Compact controls use restrained 160ms hover/focus/press feedback and visible lavender focus outlines; reduced motion suppresses transitions and transforms. Search placeholders use full-opacity subtext for legibility. Mobile controls meet 44px targets, and inputs/selects use 16px text. The drawer header keeps its close action visible while its contents scroll.

The Selected Bill Rule. In Finances, selecting a due month updates the entire bill detail, while missing source facts and payment links remain explicitly unavailable.

The Journal Companion Rule. The activity calendar supports the recorded ledger: share its month, navigate to a day without filtering rows, preview dates from row hover or focus, and keep transfers separate from money in and out.

Reminders

Event and deadline editors use Reminders as the section title and Delivered via Discord as secondary text. Deadlines also clarify that these are separate from Todoist notifications; reserve “webhook” for connection setup. Place the custom date/time trigger inline with preset chips, wrapping naturally when space is tight. Custom pickers use the shared floating-panel disclosure animation and reduced-motion behavior. Date/time pickers size to their bounded content without internal scrolling; scrollable suggestion lists remain separate.

Layout Stability

Keep repeated navigation and controls stationary across tabs, filters, provider selections, loading, and empty states. Animate feedback without moving the next interaction target.

• Centered compact dialogs reserve the largest relevant content state, capped by the viewport. Keep the header and navigation outside the scrolling content. Inactive sizing content must be invisible, inert, and excluded from accessibility; never mount duplicate stateful forms or duplicate data requests just to measure them.
• Large list/detail workspaces retain their existing viewport-bounded frame. Keep filters in the header and pagination outside the scrolling records. Disable pagination while loading; do not remove it or move it after the last row.
• Reserve a slot for transient status and stable scrollbar gutters where overflow changes would move controls horizontally. Calendar rows retain consistent heights across dates and months.
• Preserve intentional disclosures, responsive reflow, and natural document reading. Do not apply full-viewport heights to compact dialogs, arbitrary fixed heights across the app, or height animations that continually recenter an active control.

Floating Panels

Floating panels must be portaled to document.body, fixed-positioned from the trigger rect, opaque #16161e, isolated with isolation: isolate, and scroll-contained. Outside click must check both trigger and portal refs.

Item details in Dashboard and Calendar use one shared layered treatment: the outer panel owns the single type label, icon, close control, and dragging; the inner card owns the title, facts, and action dock. Keep the inner card opaque with a restrained 4% domain tint over #20202a, a quiet border, 13px radius, and 15px compact padding. Do not repeat the type label inside the card.

Use aligned, unboxed label/value rows for deadline and bill facts. Give bills a prominent 29px outflow-colored amount; give events a 15px source-colored time range and icon-led location/duration metadata. Titles remain 17px on desktop and wrap naturally. Keep urgency in a separate text badge, ordinary metadata unboxed, and reminders visibly distinct. Payment wording describes whether a payment is recorded in Actual, never provider-confirmed settlement. Separate the compact action dock with one quiet divider. Dashboard email previews show snapshot sender, subject, summary, and action text; their Open email action enters the Inbox reader, where Mark handled remains available. Desktop email cards preview on body click and open the reader through their aligned footer; mobile email taps open the reader directly. Previews do not mark mail read or handled. Preserve Calendar's anchoring, caret, selection, editing, and mobile-sheet behavior when refining this shared presentation.

Notes Canvas

The Notes tab is the native dark tldraw infinite canvas, not a Setpoint note editor placed inside a dashboard container. Preserve tldraw's own tools, edge controls, page model, gestures, and interaction language without reskinning them. Setpoint adds only the loading and license states, ambient save status, device-local unsaved-work recovery, and revision-conflict recovery required to operate the surface safely. Local recovery stays invisible during normal operation; only a protection failure or divergent local/server versions earns persistent recovery UI.

• Surface: Full width and full height beneath the desktop shell, clipped and isolated against the near-black Notes canvas token. No card background, page padding, or max-width wrapper.
• Ambient Status: A non-interactive 9px label in an opaque, bordered pill sits centered 10px from the canvas top. Muted text communicates normal saving; rose text plus explicit wording communicates failure or conflict.
• Recovery: A centered opaque panel sits below the status pill, uses the standard portal shadow, and pairs rose urgency with primary and quiet recovery buttons. Keep the explanation visible and offer both reload-latest and download-local-copy actions.
• Setup And Loading: License and load failures use a centered compact state with a 44px accent-tinted icon tile, 13px heading, short 12px message, and one direct action. Loading uses a restrained shimmer; suppress that motion when reduced motion is requested.

The Native Canvas Rule. Do not add legacy note search, archive, list, dashboard-card, or mobile-substitute UI over or around tldraw. The infinite canvas is Notes.

The Ambient Until Actionable Rule. Normal saving stays tiny and non-interactive. Only failure, missing setup, or a revision conflict earns a Setpoint panel and controls.

Canvas Checklist

The canvas checklist is a compact, flat action instrument embedded as a native tldraw shape. Its content model is custom, but its visual identity and customization belong to tldraw rather than Setpoint.

• Native Styles: Include tldraw's DefaultColorStyle, DefaultFontStyle, and DefaultSizeStyle in the shape props. The native style panel owns these choices and tldraw remembers them for subsequent shapes.
• Container: Resolve the selected color through the active tldraw theme's noteFill, noteText, solid, and noteBorder values. Use tldraw's near-square note silhouette, spacing/radius variables, and subtle native shadow instead of Setpoint card tokens.
• Hierarchy: Use the selected tldraw font and size throughout. Keep the editable title bold, the completion count quiet, and item text regular without introducing Montserrat or Setpoint typography inside the shape.
• Completion: Fill the checkbox with the selected tldraw color's solid value and draw its checkmark in the card's noteFill. Mute and strike the item label as a redundant non-color cue.
• Direct Manipulation: Enter adds the next item, Backspace removes an empty row when another row remains, and row removal appears on hover or focus. Hover, focus, active, selection, and reorder states use tldraw UI theme variables and respect reduced motion.
• Portability: Resolve the same tldraw theme, color, font, and size values in exported SVG output so live and exported Checklists agree.

The Embedded Instrument Rule. Canvas-native structured tools should stay compact, movable, editable in place, and visually owned by the canvas system. Extend tldraw with one focused action model; do not surround the shape with dashboard chrome, skin it as a Setpoint card, or turn it into a second provider-backed task system.

Timeline And Rails

Timeline rows, rail cards, and dashboard sections should emphasize time, urgency, source, and action. Use stable row heights and compact metadata so live updates do not disrupt reading.

Calendar Mini Calendar

The calendar mini calendar is a compact rail navigator. Its title keeps the month text solid white and the year solid red, matching the main calendar shell title treatment. Non-today dates use white text. The selected date uses the same square cell treatment as Agenda Row Hover Preview, with a solid gray fill and slightly larger date text while preserving contrast. Today, when unselected, uses the same blue as the agenda rail's today date header. When today is selected, the square cell fill becomes that same blue and the date text becomes white.

Mini calendar activity markers are count or density signals, not a decorative presence-only dot. Use a hard maximum of four tiny markers per date; the fourth marker represents four or more items. Deadline items use one checkmark-style marker instead of a dot, placed after dot markers. When markers sit on a filled selected or preview cell, keep marker colors true and add only a contrast-aware light or dark halo when needed for legibility. An agenda row hover preview should immediately render an unaltered source-colored cell treatment around that item's mini calendar date and its marker row for pointer hover or keyboard focus with no intentional delay, visually win over selected-date and today treatments while active, and fade out very subtly after hover or focus ends. Do not dim, opacity-reduce, or mix down the source color for the hover preview. For multi-day all-day events, render the hover preview as one continuous unaltered source-colored pill across the covered mini calendar dates and keep the date number plus markers visually centered inside it.

Adjacent-month dates in the mini calendar use a gray, more muted date number instead of white. They may still show activity markers for confirmed active-workspace content in the six-row grid. Do not mute or dim their activity marker colors; the quieter date text is enough.

Keep the mini calendar on a stable six-row grid so month changes do not resize the agenda rail below it.

Do's and Don'ts

Do:

• Do treat this file's frontmatter as the normative token source and .impeccable/design.json as its extension sidecar.
• Do give every enabled button a hover animation plus keyboard-visible focus treatment. Static buttons should be rare and intentional.
• Do keep new spacing on the 4px grid: 2, 4, 6, 8, 12, 14, 16, 20, 24, 32.
• Do use 1px borders and tonal fills for product depth.
• Do reserve #f97316 for warnings, snooze, notifications, and suspended-service states.
• Do keep panel backgrounds opaque when they escape the document flow.
• Do support reduced motion, keyboard navigation, and non-color status cues.
• Do let the desktop Notes canvas fill the available tab workspace and keep normal save feedback compact.

Don't:

• Don't create public-SaaS hero sections, marketing metric layouts, or decorative landing-page compositions inside the product.
• Don't use glassmorphism, gradient text, neon cyberpunk styling, or generic finance-dashboard navy-and-gold treatment.
• Don't build repeated identical icon-card grids for dense product information.
• Don't use side-stripe borders wider than 1px as accents on cards, list items, callouts, or alerts.
• Don't add shadows to ordinary cards or rows. Reserve shadows for portaled overlays.
• Don't make every feed equally loud. Urgency and next action need the strongest visual priority.
• Don't wrap tldraw in a dashboard card, reskin its native chrome, or recreate the retired list-and-editor Notes UI.

Alfred

Desktop Alfred uses one continuous temporary conversation. The shell's Ask Alfred control opens a centered, bounded workbench; Inbox reserves adjacent reading space for the same conversation, collapsing navigation and message list at compact desktop widths. A stable body portal tracks the reserved space so switching pages does not remount the composer. Mobile and demo do not expose Alfred.

The header contains Alfred, bordered New chat and Close buttons with icons. No contextual subtitle. Suggestions fill and focus an editable multiline draft; they never submit. Source references use bordered interactive surfaces and View chevrons only when an existing action is available. Pending email context is a labeled attachment with a separate bordered remove control. While discussing an email, its existing summary becomes a compact disclosure so the source remains easy to reach. Buttons retain hover/focus/active states and respect reduced motion.