Primitives

Os sete primitives de brand — o que cada um é, quando usar, e o exemplo canônico.

Todos os primitives vivem em apps/client/components/brand/ e são barreled através de @/components/brand. Importe o símbolo; nunca copie e cole o markup.

import {
  BrandMark,
  VersionChip,
  GridGlowBackground,
  NoiseOverlay,
  MonoLabel,
  AuthCard,
  BrandCard,
} from '@/components/brand';

BrandMark

O wordmark UseDeploy. Renderiza como <Link href="/"> por default; passe href={null} para um span inline não-link. Children renderizam ao lado (uso típico: um <VersionChip>).

Source: apps/client/components/brand/BrandMark.tsx

Prop	Tipo	Default	Notas
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Mapeia para `text-base / text-lg / text-2xl`.
`href`	`string \| null`	`'/'`	`null` renderiza um `<span>` inline em vez de um link.
`children`	`ReactNode`	—	Renderizados após o wordmark dentro da mesma flex row.
`className`	`string`	—	Mesclado com o outer do link / span.
`aria-label`	`string`	—	Nome acessível.

<BrandMark>
  <VersionChip />
</BrandMark>

Quando usar. Em qualquer lugar onde você digitaria a palavra "UseDeploy" em markup estilizado — nav da landing, header do dashboard, título do auth card.

VersionChip

Pequeno chip mono em maiúsculas mostrando a versão da app. Default para process.env.NEXT_PUBLIC_APP_VERSION (cai para v0.1.0). Override passando children.

Source: apps/client/components/brand/VersionChip.tsx

Prop	Tipo	Default	Notas
`children`	`ReactNode`	versão derivada de env	Override da string exibida.
`className`	`string`	—

<BrandMark>
  <VersionChip />
</BrandMark>

<BrandMark>
  <VersionChip>BETA</VersionChip>
</BrandMark>

Quando usar. Fixado ao lado do wordmark para surfaces de produto. Mantenha pequeno — é um sinal de metadata, não um badge.

Duas camadas empilhadas — um radial glow violeta e um grid de linhas brancas de 64 px mascarado por trás — que dão a cada surface UseDeploy sua assinatura de ambient depth sem se apoiar em uma imagem hero. Puro CSS, server-rendered, zero JS.

Source: apps/client/components/brand/GridGlowBackground.tsx

Prop	Tipo	Default	Notas
`intensity`	`'subtle' \| 'default' \| 'bold'`	`'default'`	Ajusta opacidade do glow e do grid.
`className`	`string`	—	Aplicada à camada do glow.

<div className="relative min-h-screen bg-background">
  <GridGlowBackground intensity="subtle" />
  {/* conteúdo da página aqui, position relative ou z-10 */}
</div>

O container precisa de position: relative porque o primitive usa absolute inset-0. Envolva seu conteúdo em outro elemento acima (relative z-10) para que fique por cima.

Quando usar. Toda surface fullscreen — landing, auth, marketing pages. Pule em telas de dados densos (tabelas do dashboard, settings) onde competiria com o conteúdo.

NoiseOverlay

Noise estático SVG turbulence, fixed através do viewport. Adiciona textura film-grain para que surfaces escuras não pareçam planamente digitais. Data URI inline, zero network requests.

Source: apps/client/components/brand/NoiseOverlay.tsx

Prop	Tipo	Default	Notas
`opacity`	`number`	`0.03`	Ajuste com cuidado — 0.05 já é demais.
`className`	`string`	—

<>
  <GridGlowBackground />
  <NoiseOverlay />
  {/* conteúdo */}
</>

É position: fixed; z-index: 1; mix-blend-mode: overlay. Conteúdo com z-index mais alto fica acima; conteúdo em z: auto default não.

Quando usar. Pareie com <GridGlowBackground> em hero surfaces. Não empilhe duplo através de layouts aninhados — uma instância por página.

MonoLabel

O padrão recorrente de metadata uppercase tracked-wide — texto mono pequeno usado como section eyebrows, KPI labels, list section headers. Encapsula a utility class .label-mono.

Source: apps/client/components/brand/MonoLabel.tsx

Prop	Tipo	Default	Notas
`as`	`'span' \| 'div' \| 'p'`	`'span'`	O elemento renderizado.
`className`	`string`	—	Mesclado com `label-mono`.
`children`	`ReactNode`	—	O texto do label.

<MonoLabel as="div">Members</MonoLabel>
<div className="text-3xl font-semibold">42</div>

Quando usar. Qualquer metadata uppercase — captions de KPI, "Step 01", "Section", section eyebrows. Não re-roll os estilos inline.

AuthCard

Glass card usado por toda página (auth). Centraliza o markup wrapper para que as páginas parem de divergir em estilos de shell e só declarem o conteúdo do seu form.

Source: apps/client/components/brand/AuthCard.tsx

Prop	Tipo	Notas
`title`	`ReactNode`	Renderizado em `<h1 class="text-2xl font-semibold">`.
`subtitle`	`ReactNode`	Renderizado como body copy muted sob o título.
`footer`	`ReactNode`	Abaixo do form, separado por uma hairline — típico "Já tem uma conta? Sign in".
`children`	`ReactNode`	O form.
`className`	`string`	Mesclado no div do card.

<AuthCard
  title="Sign in to UseDeploy"
  subtitle="Welcome back."
  footer={<Link href="/register">Create an account</Link>}
>
  <SignInForm />
</AuthCard>

Quando usar. Toda página de auth: sign-in, register, forgot password, reset password, magic-link. O (auth)/layout.tsx já monta o <GridGlowBackground> e centraliza o card; páginas são donas apenas do form.

BrandCard

A surface de card do dashboard / marketing. Border hairline, glass surface sutil, gradient-sweep hover opcional que espelha os feature cards da landing. Token-driven então trackeia o tema escuro automaticamente.

Source: apps/client/components/brand/BrandCard.tsx

Prop	Tipo	Default	Notas
`label`	`ReactNode`	—	Eyebrow mono uppercase acima do título (ex. "01", "MEMBERS").
`title`	`ReactNode`	—	Bold, tracking apertado. Maior quando há `label` ou `action`.
`action`	`ReactNode`	—	Slot top-right — típico: um ícone.
`interactive`	`boolean`	`false`	Adiciona o sweep hairline `card-glow` + shift de bg no hover. Usar para cards clicáveis.
`className`	`string`	—
`children`	`ReactNode`	—	Conteúdo body sob o título.

<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>

Quando usar. KPIs do dashboard, list rows, feature cards de marketing. Use interactive somente quando o usuário pode clicar no card inteiro — caso contrário o hint de hover engana.

O que não está aqui (e por quê)

Você vai notar que não há Button, Input, Dialog, etc. — esses são primitives derivados de shadcn em apps/client/components/ui/, já token-aware. O namespace brand/ é somente para as surfaces e motifs únicos do UseDeploy. Se algo é genérico (um botão, um checkbox), vive em ui/. Se é específico da identidade deste produto (um wordmark, um glass auth card, um grid-and-glow background), vive em brand/.

Nesta página