Marginalia Ui

Decision Rules

• Compose new screens from existing Marginalia components first.
• Add only thin layout wrappers around the kit; let components keep their own styling.
• Use Card, Badge, Button, Input, Sheet, Dialog, Tabs, DataTable, CodeViewer, and RichTextSurface as the main building blocks for most pages.
• Use client components only when interactivity requires them. Keep static surfaces server-safe when possible.
• If the kit is missing a needed pattern, compose it from existing primitives before inventing a brand-new visual language.

Theme Rules

• Default light theme: warm, paper-like, elegant.
• Dark mode: warm dark, never cold blue-black unless the user explicitly asks.
• Density changes should come from theme tokens, not ad hoc one-off overrides.
• Prefer token overrides in :root, .dark, or [data-marginalia-theme="dark"].

Quick Reference Map

• references/component-index.md: complete export map and source paths
• references/foundations-forms.md: foundations and form inputs
• references/overlays-navigation.md: dialogs, menus, tooltips, tabs, pagination, and shells
• references/data-editorial.md: tables, empty states, progress, step flows, code, and reading surfaces
• references/theme-system.md: tokens, dark mode, sizing, spacing, and theme customization
• references/page-recipes.md: how to assemble full websites and product pages from the kit