Primitives
The seven brand primitives — what each is, when to reach for it, and the canonical example.
All primitives live in apps/client/components/brand/ and are barreled through @/components/brand. Import the symbol; never copy-paste the markup.
import {
BrandMark,
VersionChip,
GridGlowBackground,
NoiseOverlay,
MonoLabel,
AuthCard,
BrandCard,
} from '@/components/brand';BrandMark
The UseDeploy wordmark. Renders as a <Link href="/"> by default; pass href={null} for an inline non-link span. Children render alongside (typical use: a <VersionChip>).
Source: apps/client/components/brand/BrandMark.tsx
| Prop | Type | Default | Notes |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Maps to text-base / text-lg / text-2xl. |
href | string | null | '/' | null renders an inline <span> instead of a link. |
children | ReactNode | — | Rendered after the wordmark inside the same flex row. |
className | string | — | Merged with the link / span outer. |
aria-label | string | — | Accessible name. |
<BrandMark>
<VersionChip />
</BrandMark>When to use it. Anywhere you'd otherwise type the word "UseDeploy" in styled markup — landing nav, dashboard header, auth card title.
VersionChip
Small uppercase mono chip showing the app version. Defaults to process.env.NEXT_PUBLIC_APP_VERSION (falls back to v0.1.0). Override by passing children.
Source: apps/client/components/brand/VersionChip.tsx
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | env-derived version | Override the displayed string. |
className | string | — |
<BrandMark>
<VersionChip />
</BrandMark>
<BrandMark>
<VersionChip>BETA</VersionChip>
</BrandMark>When to use it. Pinned next to the wordmark for product surfaces. Keep it small — it's a metadata signal, not a badge.
GridGlowBackground
Two stacked layers — a violet radial glow and a 64 px white-line grid masked behind it — that give every UseDeploy surface its signature ambient depth without leaning on a hero image. Pure CSS, server-rendered, zero JS.
Source: apps/client/components/brand/GridGlowBackground.tsx
| Prop | Type | Default | Notes |
|---|---|---|---|
intensity | 'subtle' | 'default' | 'bold' | 'default' | Tunes both glow opacity and grid opacity. |
className | string | — | Applied to the glow layer. |
<div className="relative min-h-screen bg-background">
<GridGlowBackground intensity="subtle" />
{/* page content here, position relative or z-10 */}
</div>The container needs position: relative because the primitive uses absolute inset-0. Wrap your content in another element above it (relative z-10) so it sits on top.
When to use it. Every fullscreen surface — landing, auth, marketing pages. Skip on dense data screens (dashboard tables, settings) where it would compete with content.
NoiseOverlay
Static SVG turbulence noise, fixed across the viewport. Adds film-grain texture so dark surfaces don't look flatly digital. Inline data URI, zero network requests.
Source: apps/client/components/brand/NoiseOverlay.tsx
| Prop | Type | Default | Notes |
|---|---|---|---|
opacity | number | 0.03 | Tune carefully — 0.05 is already too much. |
className | string | — |
<>
<GridGlowBackground />
<NoiseOverlay />
{/* content */}
</>It's position: fixed; z-index: 1; mix-blend-mode: overlay. Content with a higher z-index sits above; content at the default z: auto does not.
When to use it. Pair with <GridGlowBackground> on hero surfaces. Don't double-stack it across nested layouts — one instance per page.
MonoLabel
The recurring uppercase tracked-wide metadata pattern — small mono text used as section eyebrows, KPI labels, list section headers. Wraps the .label-mono utility class.
Source: apps/client/components/brand/MonoLabel.tsx
| Prop | Type | Default | Notes |
|---|---|---|---|
as | 'span' | 'div' | 'p' | 'span' | The element rendered. |
className | string | — | Merged with label-mono. |
children | ReactNode | — | The label text. |
<MonoLabel as="div">Members</MonoLabel>
<div className="text-3xl font-semibold">42</div>When to use it. Any uppercase metadata — KPI captions, "Step 01", "Section", section eyebrows. Don't re-roll the styles inline.
AuthCard
Glass card used by every (auth) page. Centralises the wrapper markup so pages stop diverging on shell styles and only declare their form content.
Source: apps/client/components/brand/AuthCard.tsx
| Prop | Type | Notes |
|---|---|---|
title | ReactNode | Rendered in <h1 class="text-2xl font-semibold">. |
subtitle | ReactNode | Rendered as muted body copy under the title. |
footer | ReactNode | Below the form, separated by a hairline — typical "Already have an account? Sign in". |
children | ReactNode | The form. |
className | string | Merged onto the card div. |
<AuthCard
title="Sign in to UseDeploy"
subtitle="Welcome back."
footer={<Link href="/register">Create an account</Link>}
>
<SignInForm />
</AuthCard>When to use it. Every auth page: sign-in, register, forgot password, reset password, magic-link. The (auth)/layout.tsx already mounts the <GridGlowBackground> and centres the card; pages own only the form.
BrandCard
The dashboard / marketing card surface. Hairline border, subtle glass surface, optional gradient-sweep hover that mirrors the landing's feature cards. Token-driven so it tracks the dark theme automatically.
Source: apps/client/components/brand/BrandCard.tsx
| Prop | Type | Default | Notes |
|---|---|---|---|
label | ReactNode | — | Uppercase mono eyebrow above the title (e.g. "01", "MEMBERS"). |
title | ReactNode | — | Bold, tight tracking. Larger when label or action is present. |
action | ReactNode | — | Top-right slot — typical: an icon. |
interactive | boolean | false | Adds the card-glow hairline sweep + hover bg shift. Use for clickable cards. |
className | string | — | |
children | ReactNode | — | Body content under title. |
<BrandCard label="MEMBERS" title="42">
<p className="text-muted-foreground">3 invited last week</p>
</BrandCard>
<BrandCard interactive label="01" title="Add a project" action={<ArrowUpRight />}>
Spin up a workspace and invite your team.
</BrandCard>When to use it. Dashboard KPIs, list rows, marketing feature cards. Use interactive only when the user can click the whole card — otherwise the hover hint is misleading.
What's not here (and why)
You'll notice no Button, Input, Dialog, etc. — those are shadcn-derived primitives in apps/client/components/ui/, already token-aware. The brand/ namespace is only for the surfaces and motifs unique to UseDeploy. If something is generic (a button, a checkbox), it lives in ui/. If it's specific to this product's identity (a wordmark, a glass auth card, a grid-and-glow background), it lives in brand/.
Dashboard primitives
The Vercel-derived dashboard rebuild introduced a separate set of primitives under apps/client/components/dashboard/. These are used inside the authenticated app shell — they're not part of the landing/auth brand surface (brand/* is). Both namespaces share the same tokens (see tokens) so they harmonize visually, but their semantics differ: brand/ is identity, dashboard/ is product UI.
Source-of-truth research is at docs/design-research/vercel/STYLE-GUIDE.md.
<SettingsCard>
Universal Vercel-style "Settings Card" with three slots:
<SettingsCard>
<SettingsCard.Header title="Team Name" description="Visible to members." />
<SettingsCard.Body>{/* form / control */}</SettingsCard.Body>
<SettingsCard.Footer hint="Up to 32 chars." action={<Button>Save</Button>} />
</SettingsCard>The footer has a hairline top-border separating it from the body. Use it for every settings preference and most informational cards. Source: components/dashboard/settings-card.tsx.
<MetadataGrid>
The 4-cell label-on-top, value-with-icon-below grid Vercel uses in deployment headers. Pass cells and an optional columns count.
<MetadataGrid
columns={4}
cells={[
{ label: 'Status', value: <StatusBadge variant="ready" dotOnly>Ready</StatusBadge> },
{ label: 'Created', icon: User, value: 'konixdev · 11/14/25' },
{ label: 'Branch', icon: GitBranch, value: 'main' },
{ label: 'Plan', icon: CreditCard, value: 'Pro' },
]}
/>Source: components/dashboard/metadata-grid.tsx.
<StatusBadge>
Variant-driven status pill. Always combines color + icon/dot + text — never use color alone.
<StatusBadge variant="ready">Ready</StatusBadge>
<StatusBadge variant="error">Error</StatusBadge>
<StatusBadge variant="ready" dotOnly>All systems normal</StatusBadge>Variants: ready | error | warning | preview | production | info | neutral. Source: components/dashboard/status-badge.tsx.
<PlanBadge>
Small inline pill for plan tier ("Hobby", "Pro", "Enterprise"). Use it in <OrgSwitcher> / <SettingsCard.Header> action slots. Source: components/dashboard/plan-badge.tsx.
<SidebarNav> + <SidebarSection>
Renders a vertical nav list inside the app-shell sidebar. Each item supports an icon, optional badge, and pathname-based active state. Wrap a list in <SidebarSection label="..."> to add an uppercase mono label above. Source: components/dashboard/sidebar-nav.tsx.
<SidebarSearch>
Sidebar input with a kbd-chip shortcut hint on the right (F by default). Single-letter no-modifier keypresses outside form inputs focus the field. Source: components/dashboard/sidebar-search.tsx.
<UserRow>
Bottom-of-sidebar row: avatar + name + kebab menu (Profile/Settings/Theme picker/Sign out) + notifications bell. Replaces what the topbar used to expose. Source: components/dashboard/user-row.tsx.
Shell components
<DashboardShell>: outer layout grid (sidebar + topbar + main), auth guard, impersonation banner.components/dashboard/dashboard-shell.tsx.<Sidebar>: route-aware — workspace/account nav on/dashboard/*, settings nav with "back to dashboard" affordance on/settings/*.components/dashboard/sidebar.tsx.<Topbar>: minimal centered section title (title derived from pathname).components/dashboard/topbar.tsx.