Vercel and Geist

Documentation clarity, composable primitives, and restrained visual systems. All research.

Vercel + Geist: turn taste into component contracts

Vercel publishes the rules and Geist publishes the primitives. The useful lesson is not black-and-white styling. It is enforcement: similar-looking controls have different jobs, token scales carry semantic roles, loading preserves geometry, and accessibility lives in the component API.

Role before shape. Table is comparison. Entity is identity plus one or two actions. Description is key/value facts. Select is a short fixed list; Combobox is searchable. Menu is local; Command Menu is global.
Rules become infrastructure. A rule should not stay prose when a primitive can enforce the accessible name, focus return, keyboard behavior, live state, hit target, or reduced-motion behavior.
Tokens name jobs. Geist's color scale maps ranges to backgrounds, borders, contrast surfaces, and text. Thorbis keeps its own OKLCH palette but adopts the role-first token discipline.
Type is a role bundle. Heading, label, copy, action, and mono/tabular styles carry size, leading, tracking, weight, and numeric behavior together. We keep Inter for UI and Geist Mono where code-like alignment helps.
Empty has a cause. First-run, no-results, cleared, permission, plan, error, and offline/degraded states need different copy and a specific next or recovery action.
Loading is the final geometry. Skeletons mirror the row, avatar, field, media, and columns they replace. Nothing jumps when data arrives.
Keep Thorbis's boundaries. Do not switch to Geist Sans, Vercel's palette, product-wide Title Case, visible guide grids on workbench pages, badge-heavy status, or desktop drawers replacing routes and inspectors.

Primary sources: design.md, Web Interface Guidelines, Geist, Colors, Typography, and Materials.

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Make invalid combinations difficult to express

Independent loading, success, and error flags can contradict each other; presentation and business logic become tangled as a component grows.

Choose an explicit state model and a semantic composition API. Reuse the approved primitives, keep domain operations outside them, and locate loading boundaries according to the work they protect. Documentation names which variants actually ship.

Thorbis example. A payment dialog composes an approved trigger, content, fields, and actions around a domain-owned operation. The button receives one coherent request state, not several competing booleans and a private set of colors.

Verify. Exercise each valid state and transition, keyboard and focus behavior, controlled and uncontrolled contracts where supported, server-rendered output, and slow or missing data. Check provenance and license before source adoption.

Do not import. No arbitrary color escape hatch, duplicate component kit, unregistered dependency, or migration from Astro merely because a source uses RSC.

Open the composition skill · Evidence: React handbook; components.build; Component Architecture for React Server Components; shadcncraft