design-example-shadcn.md

Brand & Style

Drift is a focused task tracker for solo founders and small async teams. The product premise is that work is a moving thing — momentum matters more than perfectly groomed backlogs, and the right tool surfaces what you're working on now without making you administer a system to find it. The brand expression follows: a serif display moment in an otherwise sober sans-serif surface, a single warm accent that means this is what's live, and visual restraint everywhere else.

Drift inherits shadcn/ui defaults wholesale. This DESIGN.md specifies only the brand-layer deltas — primary color, accent color, display typography, slightly tighter corners, and a handful of brand-specific components. The 80% of components that ship from shadcn (Button, Card, Dialog, Sheet, Command, Popover, Toast) inherit shadcn's visual specs as-is. Customizing those is explicitly against the brand discipline — shadcn's defaults are the contract.

Colors

The Drift palette is two colors of brand-layer plus shadcn defaults for everything else.

• **Primary Navy (#0F4C81 light / #5C8AC2 dark)** is the brand color. Used on primary buttons, active nav items, link underlines, and the "current week" indicator. Replaces shadcn's default primary.
• **Focus Amber (#F59E0B light / #FBC470 dark)** is the accent. Used exclusively to indicate the task or project currently in focus — the one you're working on right now. Never used for chrome, never used decoratively, never used for state badges. Amber means "live."
• All other tokens (background, foreground, muted, muted-foreground, border, input, ring, card, popover, destructive) inherit from shadcn defaults. If the brand can't justify overriding a token, it doesn't override it.

Avoid: chromatic flourishes, gradient surfaces, custom destructive colors (use shadcn's), more than two brand colors. The discipline is two-colors-and-stop.

Typography

Body / label / caption inherit shadcn's Geist Sans ramp. Only the display role is brand-overridden, set in Instrument Serif at 36px (24px small variant). The serif moment appears in:

• Empty-state hero text on Today and project surfaces
• Project titles in the project detail header
• The "Welcome back, {name}" greeting at first session of the day

Everything else stays in Geist Sans. The serif is a punctuation mark, not a default voice.

Layout & Spacing

shadcn / Tailwind spacing scale inherited as-is (the 4-based scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64). Maximum content width: max-w-3xl (768px) — Drift is not a wide-table product, and forcing one-column reading keeps the surface focused.

Single-column layout. Sidebar nav on lg (1024px+); on smaller viewports, the sidebar becomes a sheet triggered from the top bar.

Elevation & Depth

Inherited from shadcn — subtle shadow on hover/active states, no elevation as a visual hierarchy device. Drift adds nothing on top of this; brand discipline is "shadcn's shadows are correct."

Shapes

Tighter than shadcn defaults: rounded/sm (4px) for inputs, rounded/md (6px) for cards and buttons, rounded/lg (8px) for dialogs and the command palette. The crispness reads "tool" rather than "consumer app." Pill shapes (rounded/full) appear only on status badges.

Components

Drift uses the following shadcn components as-is, unchanged: Button, Card, Dialog, Sheet, Popover, DropdownMenu, Toast, Tabs, Avatar, Separator. The contract: don't customize these.

Brand-layer-overridden components:

• Button (primary variant) — {colors.primary} fill, {colors.primary-foreground} text, {rounded.md} corner. Other variants (secondary, outline, ghost, destructive) inherit shadcn defaults.
• Focus card — Custom Drift component. The "this is what you're working on now" card on Today and project detail. {colors.accent} fill, no border, slightly elevated. Appears at most once per surface.
• Command palette result (active) — Override on shadcn's Command component: the highlighted/keyboard-selected result row uses {colors.accent} instead of shadcn's default accent token. Reinforces "this is what will fire if you hit Enter."

Do's and Don'ts