Design system

Tokens and primitives every screen is built from. Toggle the theme to verify both modes.

Color tokens

Semantic, theme-aware. Reference these — never raw hex values.

background

card

primary

secondary

muted

accent

destructive

border

Geist Sans for UI, Geist Mono for code.

The quick brown fox

Body large — jumps over the lazy dog.

Body small — jumps over the lazy dog.

Muted — secondary and helper text.

const doc = new Y.Doc();

Variants and sizes.

Document title

OwnerEditorViewerOffline

Roadmap.md

Last edited 2 minutes ago · synced

A card is the container for a document in the dashboard.

Dialog, dropdown menu, toast.