Startboard design system

Product and audiences

Startboard is a finished public product at startboard.so. The audited startboard-next repository matches the live brand, homepage copy, version-2 footer, and dashboard vocabulary. This documentation describes that source revision; it does not claim every local change is deployed.

The primary audience is a person who wants the same daily workspace across browsers. Secondary audiences are visitors opening a public board, and teams maintaining the dashboard, account settings, and browser extension.

Scope and organization

Foundations define exact source styles and theme roles. Components explain contracts, anatomy and states. Patterns describe complete tasks and failure boundaries. Applied screens connect these pieces. Accessibility records observed gaps and measured contrast rather than a compliance claim. Implementation provides reproducible source and capture instructions.

Design principles inferred from the implementation

• Keep the daily surface quiet: clock, one search/AI input, board selectors and bookmark tiles.
• Expose organization controls deliberately through Edit and settings rather than crowding every tile.
• Separate the purple brand gradient from user-selected dashboard accents.
• Use one dashboard renderer across the web and new-tab extension.
• Treat a shared board as a reading surface; keep management in the authenticated owner experience.

Evidence boundaries

All app examples use the real source components with a deterministic fictional account. Provider APIs and persistence are replaced only in a disposable snapshot. Local success and error states demonstrate the frontend contract, not production email delivery, storage, authentication or provider availability.

Light and dark are implemented. Seven accent options have distinct light/dark values. Captures include desktop and phone screens at 2× pixel density and native component crops. The B2 wallpaper catalog is excluded from isolated capture, so these examples retain its empty state rather than introducing a stock wallpaper.

The Chrome extension shares AppHome and runtime adapters. Its architecture is documented from source; these captures show the web renderer, not an installed browser extension session.

Start here

• Building a dashboard surface: read Layout, Bookmark tile, Search composer and Board navigation.
• Changing organization workflows: read Link editor, Board editor and Save and recovery.
• Working on personalization: read Color and accents, Theme controller and Personalize the workspace.
• Shipping changes: read Readiness and gaps, Reproduce captures and Maintenance.

Source references