Introduction

Guides document how we structure entire interface sections so similar features stay consistent — in the same spirit as Supabase’s UI patterns.

They compose Coss primitives (and sometimes Cal composites from @coss/ui/shared). They are not a second component library.

Because Cal owns coss.com/ui, we do not re-list every Button, Dialog, or Field here. Use coss.com for primitive APIs; use this section for Cal product patterns.

Rules for examples

• Examples must match compositions we actually ship in the Cal app.
• Copy may be paraphrased.
• Do not invent variations that do not exist in product.

See the design-system-docs skill when adding or editing a pattern.

Guides

• Empty states — absence of data and the next action
• Forms — settings cards, dialogs, validation, and field wiring
• Input addons and URL fields — units, fixed suffixes, profile URLs, and long-domain splitting
• Tables — list pages, filters, card tables, loading, and empty states
• Modality — dialogs, drawers, sheets, confirmations, and popovers
• Segmented controls — pill rows: radio, nav, Tabs, or Horizontal Tabs
• Settings page layout — SettingsShell, AppHeader, and stacked section frames

More patterns (layout, navigation, etc.) can be added as we document additional recurring Cal compositions — same rules as above: real call sites only, no invented layouts.