Cores
Tokens semânticos com os valores claro e escuro, lidos de tokens.css e do export do Figma.
Use sempre o token semântico (bg-action-primary, text-muted-foreground),
nunca a primitiva. Os valores abaixo são resolvidos do tokens.css gerado; o
nome e a descrição vêm do Figma.
Base (shadcn)
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/background | #ffffff | #0a0a0a | --background bg-background |
color/foreground | #0a0a0a | #fafafa | --foreground bg-foreground |
color/card | #ffffff | #171717 | --card bg-card |
color/card-foreground | #0a0a0a | #fafafa | --card-foreground bg-card-foreground |
color/popover | #ffffff | #171717 | --popover bg-popover |
color/popover-foreground | #0a0a0a | #fafafa | --popover-foreground bg-popover-foreground |
color/primary | #171717 | #e5e5e5 | --primary bg-primary |
color/primary-foreground | #fafafa | #171717 | --primary-foreground bg-primary-foreground |
color/secondary | #f5f5f5 | #262626 | --secondary bg-secondary |
color/secondary-foreground | #171717 | #fafafa | --secondary-foreground bg-secondary-foreground |
color/muted | #f5f5f5 | #262626 | --muted bg-muted |
color/muted-foreground | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
color/accent | #f5f5f5 | #262626 | --accent bg-accent |
color/accent-foreground | #171717 | #fafafa | --accent-foreground bg-accent-foreground |
color/destructive | #e7000b | #ff6467 | --destructive bg-destructive |
color/border | #e5e5e5 | #ffffff1a | --border bg-border |
color/input | #e5e5e5 | #ffffff26 | --input bg-input |
color/ring | #a1a1a1 | #737373 | --ring bg-ring |
color/brand | #764be5 | #8968f4 | --brand bg-brand |
color/brand-foreground | #ffffff | #ffffff | --brand-foreground bg-brand-foreground |
color/brand-warm | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
color/brand-warm-foreground | #422800 | #3d2200 | --brand-warm-foreground bg-brand-warm-foreground |
color/focus-ring Brand focus ring: 2px ring + 2px offset (ring-2 ring-focus-ring ring-offset-2). Use with effect style Focus/ring brand. | #764be5 | #8968f4 | --focus-ring bg-focus-ring |
color/canvas Backoffice page canvas behind cards (oklch 0.985 light). apps/backoffice --canvas. | #fafafa | #000000 | --canvas bg-canvas |
color/overlay Modal scrim behind Dialog, Sheet and Drawer (black 40% light, 60% dark). Use on Scrim Tone=Strong. Code: bg-overlay. | #00000066 | #00000099 | --overlay bg-overlay |
color/overlay-soft Light scrim for non-blocking overlays (popover on phone, soft sheet): black 10% light, 20% dark, paired with a 4px backdrop blur. Use on Scrim Tone=Soft. | #0000001a | #00000033 | --overlay-soft bg-overlay-soft |
Gráfico
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/chart/chart-1 | #d4d4d4 | #d4d4d4 | --chart-1 bg-chart-1 |
color/chart/chart-2 | #737373 | #737373 | --chart-2 bg-chart-2 |
color/chart/chart-3 | #525252 | #525252 | --chart-3 bg-chart-3 |
color/chart/chart-4 | #404040 | #404040 | --chart-4 bg-chart-4 |
color/chart/chart-5 | #262626 | #262626 | --chart-5 bg-chart-5 |
Sidebar
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/sidebar/sidebar | #fafafa | #171717 | --sidebar bg-sidebar |
color/sidebar/sidebar-foreground | #0a0a0a | #fafafa | --sidebar-foreground bg-sidebar-foreground |
color/sidebar/sidebar-primary | #171717 | #1447e6 | --sidebar-primary bg-sidebar-primary |
color/sidebar/sidebar-primary-foreground | #fafafa | #fafafa | --sidebar-primary-foreground bg-sidebar-primary-foreground |
color/sidebar/sidebar-accent | #f5f5f5 | #262626 | --sidebar-accent bg-sidebar-accent |
color/sidebar/sidebar-accent-foreground | #171717 | #fafafa | --sidebar-accent-foreground bg-sidebar-accent-foreground |
color/sidebar/sidebar-border | #e5e5e5 | #ffffff1a | --sidebar-border bg-sidebar-border |
color/sidebar/sidebar-ring | #a1a1a1 | #737373 | --sidebar-ring bg-sidebar-ring |
Alpha (transparências)
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
alpha/primary-80 color/primary at 80% (Tailwind /80). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #171717 | #e5e5e5 | --primary bg-primary |
alpha/foreground-5 color/foreground at 5% (Tailwind /5). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/destructive-10 color/destructive at 10% (Tailwind /10). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/destructive-20 color/destructive at 20% (Tailwind /20). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/destructive-40 color/destructive at 40% (Tailwind /40). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/brand-15 color/brand at 15% (Tailwind /15). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-warm-40 color/brand-warm at 40% (Tailwind /40). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/foreground-8 color/foreground at 8% (Tailwind /8). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/input-50 color/input at 50% (Tailwind /50). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e5e5e5 | #ffffff26 | --input bg-input |
alpha/muted-foreground-45 color/muted-foreground at 45% (Tailwind /45). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/foreground-30 color/foreground at 30% (Tailwind /30). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/destructive-60 color/destructive at 60% (Tailwind /60). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/foreground-10 color/foreground at 10% (Tailwind /10). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/muted-foreground-50 color/muted-foreground at 50% (Tailwind /50). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/muted-70 color/muted at 70% (Tailwind /70). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #f5f5f5 | #262626 | --muted bg-muted |
alpha/foreground-15 color/foreground at 15% (Tailwind /15). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/foreground-20 color/foreground at 20% (Tailwind /20). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/foreground-90 color/foreground at 90% (Tailwind /90). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/brand-3 color/brand at 3% (Tailwind /3). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-4 color/brand at 4% (Tailwind /4). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-5 color/brand at 5% (Tailwind /5). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-10 color/brand at 10% (Tailwind /10). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-12 color/brand at 12% (Tailwind /12). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-25 color/brand at 25% (Tailwind /25). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-30 color/brand at 30% (Tailwind /30). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #764be5 | #8968f4 | --brand bg-brand |
alpha/brand-warm-6 color/brand-warm at 6% (Tailwind /6). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/brand-warm-7 color/brand-warm at 7% (Tailwind /7). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/brand-warm-25 color/brand-warm at 25% (Tailwind /25). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/brand-warm-30 color/brand-warm at 30% (Tailwind /30). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/destructive-30 color/destructive at 30% (Tailwind /30). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/muted-40 color/muted at 40% (Tailwind /40). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #f5f5f5 | #262626 | --muted bg-muted |
alpha/muted-50 color/muted at 50% (Tailwind /50). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #f5f5f5 | #262626 | --muted bg-muted |
alpha/muted-60 color/muted at 60% (Tailwind /60). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #f5f5f5 | #262626 | --muted bg-muted |
alpha/background-70 color/background at 70% (Tailwind /70). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #ffffff | #0a0a0a | --background bg-background |
alpha/primary-90 color/primary at 90% (Tailwind /90). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #171717 | #e5e5e5 | --primary bg-primary |
alpha/input-30 color/input at 30% (Tailwind /30). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e5e5e5 | #ffffff26 | --input bg-input |
alpha/muted-foreground-25 color/muted-foreground at 25% (Tailwind /25). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/muted-foreground-35 color/muted-foreground at 35% (Tailwind /35). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/muted-foreground-40 color/muted-foreground at 40% (Tailwind /40). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/muted-foreground-60 color/muted-foreground at 60% (Tailwind /60). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/muted-foreground-70 color/muted-foreground at 70% (Tailwind /70). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/muted-foreground-80 color/muted-foreground at 80% (Tailwind /80). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
alpha/border-60 color/border at 60% (Tailwind /60). Figma drops paint opacity on bound fills inside instances, so alpha lives in the token. | #e5e5e5 | #ffffff1a | --border bg-border |
alpha/foreground-50 color/foreground at 50% | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/brand-warm-15 color/brand-warm at 15% | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/brand-warm-20 color/brand-warm at 20% | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/brand-warm-60 color/brand-warm at 60% | #ffd242 | #f6c835 | --brand-warm bg-brand-warm |
alpha/foreground-40 color/foreground at 40% | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/foreground-60 color/foreground at 60% | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/foreground-70 color/foreground at 70% | #0a0a0a | #fafafa | --foreground bg-foreground |
alpha/destructive-5 color/destructive at 5% | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/destructive-15 color/destructive at 15% | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/destructive-25 color/destructive at 25% | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/destructive-50 color/destructive at 50% | #e7000b | #ff6467 | --destructive bg-destructive |
alpha/card-80 color/card at 80% | #ffffff | #171717 | --card bg-card |
alpha/primary-50 color/primary at 50% | #171717 | #e5e5e5 | --primary bg-primary |
alpha/muted-foreground-30 color/muted-foreground at 30% | #737373 | #a1a1a1 | --muted-foreground bg-muted-foreground |
Sinal
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/signal/attention Attention / alert role (brand warm yellow). Use for "Vale conversar hoje" bands, "Precisa de você" status. Never for system failure. | #ffd242 | #f6c835 | --signal-attention bg-signal-attention |
color/signal/attention-foreground Text/icons on color/signal/attention (ink). | #111111 | #111111 | --signal-attention-foreground bg-signal-attention-foreground |
color/signal/attention-subtle Light attention surface behind ink text. | #fff7d9 | #3d2200 | --signal-attention-subtle bg-signal-attention-subtle |
color/signal/ok Calm success / protecting role. Icons and small accents; pair with a word, never color-only. | #1a7f4e | #4cc38a | --signal-ok bg-signal-ok |
color/signal/ok-foreground Text/icons on solid color/signal/ok. | #ffffff | #0a0a0a | --signal-ok-foreground bg-signal-ok-foreground |
color/signal/ok-subtle Calm success surface (status chips). | #e8f5ee | #0b2618 | --signal-ok-subtle bg-signal-ok-subtle |
color/signal/danger Failure that stops protection. Never decorative. | #e7000b | #ff6467 | --signal-danger bg-signal-danger |
color/signal/danger-subtle Danger tint surface (alert background). | #fef2f2 | #460809 | --signal-danger-subtle bg-signal-danger-subtle |
color/signal/info Neutral information signal. | #155dfc | #51a2ff | --signal-info bg-signal-info |
color/signal/info-subtle Info tint surface. | #eff6ff | #162456 | --signal-info-subtle bg-signal-info-subtle |
Superfície
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/surface/brand-subtle Lilac calm brand surface (calm state, initials avatar, script blocks). Ink text on it; brand-colored text fails AA here. | #e7e4ff | #1d1736 | --surface-brand-subtle bg-surface-brand-subtle |
color/surface/stage-yellow Farol stage block (yellow). Pair with surface/stage-yellow-foreground. | #ffd242 | #f6c835 | --surface-stage-yellow bg-surface-stage-yellow |
color/surface/stage-yellow-foreground Ink text on stage-yellow (14:1). | #111111 | #111111 | --surface-stage-yellow-foreground bg-surface-stage-yellow-foreground |
color/surface/stage-ink Farol stage block (ink). | #111111 | #171717 | --surface-stage-ink bg-surface-stage-ink |
color/surface/stage-ink-foreground Text on stage-ink. | #ffffff | #fafafa | --surface-stage-ink-foreground bg-surface-stage-ink-foreground |
color/surface/readonly Fill of read-only fields (autofilled address, locked values). Text stays foreground; no disabled styling. | #fafafa | #171717 | --surface-readonly bg-surface-readonly |
Ação
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/action/primary Primary action fill (brand purple). White text 5.0:1. bg-action-primary | #764be5 | #764be5 | --action-primary bg-action-primary |
color/action/primary-foreground Text/icon on action/primary. text-action-primary-foreground | #ffffff | #ffffff | --action-primary-foreground bg-action-primary-foreground |
color/action/primary-hover Primary hover. hover:bg-action-primary-hover | #6438d4 | #6438d4 | --action-primary-hover bg-action-primary-hover |
color/action/primary-pressed Primary pressed/active. active:bg-action-primary-pressed | #5229b5 | #5229b5 | --action-primary-pressed bg-action-primary-pressed |
color/action/secondary Secondary action: calm lilac brand surface. bg-action-secondary | #e7e4ff | #1d1736 | --action-secondary bg-action-secondary |
color/action/secondary-foreground Text/icon on action/secondary. | #111111 | #fafafa | --action-secondary-foreground bg-action-secondary-foreground |
color/action/secondary-hover Secondary hover/pressed. | #d6d0ff | #2a2150 | --action-secondary-hover bg-action-secondary-hover |
color/action/destructive Destructive confirmations only (delete, revoke). White text 4.6:1 in both modes. | #e7000b | #e7000b | --action-destructive bg-action-destructive |
color/action/destructive-foreground Text/icon on action/destructive. | #ffffff | #ffffff | --action-destructive-foreground bg-action-destructive-foreground |
color/action/destructive-hover Destructive hover/pressed. | #c10007 | #c10007 | --action-destructive-hover bg-action-destructive-hover |
color/action/disabled-surface Disabled control fill (replaces 50% opacity). | #f5f5f5 | #262626 | --action-disabled-surface bg-action-disabled-surface |
color/action/disabled-foreground Disabled text/icon: 4.3:1 light, 4.9:1 dark (disabled is exempt but stays at least 3:1). | #737373 | #a1a1a1 | --action-disabled-foreground bg-action-disabled-foreground |
color/action/link Link text. text-action-link | #764be5 | #8968f4 | --action-link bg-action-link |
color/action/link-hover Link hover text. | #5229b5 | #a48cf8 | --action-link-hover bg-action-link-hover |
color/action/destructive-subtle Tinted destructive surface (dense Destructive button, Default state). | #e7000b1a | #ff64671a | --action-destructive-subtle bg-action-destructive-subtle |
color/action/destructive-subtle-hover Hover/pressed tint of the destructive surface. Light is 15% (not 20%) so red/700 text keeps AA: 4.9:1 on 15%, 4.46:1 on 20%. | #e7000b26 | #ff646733 | --action-destructive-subtle-hover bg-action-destructive-subtle-hover |
color/action/destructive-subtle-foreground Text/icon on the tinted destructive surface (alpha/destructive-10/20), e.g. the dense Destructive button. red/700 keeps WCAG AA on the tint; color/destructive (red/600) measured about 4:1 there. | #c10007 | #ff6467 | --action-destructive-subtle-foreground bg-action-destructive-subtle-foreground |
Borda
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/border/strong Stronger border: outline buttons, selected cards, dividers that must read. | #d4d4d4 | #404040 | --border-strong bg-border-strong |
color/border/danger Error border for form controls and failed states (red/600, 4.8:1 on white, passes WCAG 1.4.11). Pair with an icon + message, never colour alone. | #e7000b | #ff6467 | --border-danger bg-border-danger |
color/border/danger-subtle Quiet red outline for destructive surfaces that are not errors (Consequence List Tone=Destructive, destructive confirm cards). Decorative: not a control boundary. | #e7000b33 | #ff64674d | --border-danger-subtle bg-border-danger-subtle |
color/border/hover Border of inputs and selectable cards on hover (one step stronger than border/strong). | #525252 | #525252 | --border-hover bg-border-hover |
Texto
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/text/subtle Secondary text stronger than muted-foreground (7.8:1 light). | #525252 | #a1a1a1 | --text-subtle bg-text-subtle |
Controle
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/control/border Boundary of unchecked checkbox, radio and switch-off track. neutral/500 = 4.7:1 on white, 4.2:1 on dark background: meets WCAG 1.4.11 (at least 3:1 non-text contrast). | #737373 | #737373 | --control-border bg-control-border |
avatar
| Token Figma | Claro | Escuro | CSS · Tailwind |
|---|---|---|---|
color/avatar/neutral-foreground Initials on the Neutral avatar (color/muted). Light is text/subtle (neutral/600, 7.0:1 on muted) because muted-foreground measured 4.35:1 at 12–14 px. Dark keeps muted-foreground (5.9:1; dark frozen, D9). | #525252 | #a1a1a1 | --avatar-neutral-foreground bg-avatar-neutral-foreground |