Patterns

Composition rules for real surfaces, not abstract samples.

Pattern guidance explains how shared tokens and components assemble into real pages. It also shows where the marketing and app layers should intentionally diverge.

Marketing patterns

These patterns are rooted in `apps/marketing` and should keep persuasion, comparison, and conversion as the primary goal.

Marketing

Hero and CTA framing

Use for homepage and pricing entry points where the user is still deciding whether to engage.

Reference consumer: `apps/marketing/app/page.tsx` and related routes.

Marketing

Feature comparison sections

Use marketing cards and broader spacing to support scanning and decision-making.

Reference consumer: `apps/marketing/app/page.tsx` and related routes.

App patterns

These patterns are rooted in the main `app` and should optimize for task completion, clarity, and sustained workflow rather than conversion.

App

Onboarding and auth

Treat sign up, login, password reset, invite acceptance, and setup as app patterns rather than marketing pages.

Reference consumers: onboarding, settings, workspace, and auth routes in `app`.

App

Workspace and settings

Use shared app headers, section cards, toolbars, notices, and modal shells before route-specific wrappers.

Reference consumers: onboarding, settings, workspace, and auth routes in `app`.

Pattern implementation rule

If a pattern exists in more than one surface, try to solve it with shared tokens, shared primitives, or layer variables first. If the difference is mainly tone, density, or CTA emphasis, document it as a surface convention instead of forking the structure.