Startboard project

Startboard / Design system

Documentation v1.0.0 · Public product

Design system contents

Foundations

Motion and loading

Small hover transforms and a delayed wallpaper reveal support the daily surface.

On this page

Implemented motion

Bookmark and add tiles translate up by one utility unit on hover. Header/settings actions scale to 1.02. Tile dragging applies dnd-kit transforms and a reduced-opacity drag state. The wallpaper waits for image load, then body::before fades opacity over 0.8 seconds.

AI textareas grow to a maximum of five line heights and then scroll. Search debounce is 200ms; title lookup debounce is 500ms. These delays are functional pacing rather than decorative animation.

Loading and reduction

Clock/date start with placeholders until the client sets the current Date. Link selection sets isLoadingLinks, but the source does not draw a spinner or skeleton; the prior links may remain until the new response arrives. Saving editors disable their submit button and replace its label with Saving....

No prefers-reduced-motion rule exists in the audited global styles. Add an explicit reduction policy before claiming reduced-motion support; do not disable source animations globally just to conceal a capture problem.

Source references

Source references
Repository fileResponsibility
app/globals.cssWallpaper transition
app/(home)/AppHome.tsxDebounces, dynamic textarea and drag transforms

Examples from the app

Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Dashboard Edit Mode Desktop Light · Screen · Light · Desktop · Edit Mode · 2880 × 2000 px
Ai Composer Filled Desktop Light · Component detail · Light · Desktop · Filled · 2088 × 330 px

Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0