SentraXDesign Preview · validação visual

Design System

Cores validadas com Felipe via Framer Color Picker (2026-05-08). Brand = rosa + laranja; roxo só em degradê. Sem azul na brand. Compare lado-a-lado com sentrax.com.br.

Logo

Variantes full (símbolo + wordmark) e mark (só o X). Gradient embutido roxo→rosa→laranja.

SentraXLogo full em bg.primary (preto)
SentraXLogo full em bg.secondary (roxo escuro)
SentraXLogo full em surface glassmorphism
SentraX
Tamanhos do variant="full"
SentraX
sm — 20px height
SentraX
md — 32px (default)
SentraX
lg — 48px
SentraX
xl — 80px
Tamanhos do variant="mark" (favicon, avatar, espaço compacto)
SentraX
sm — 24px
SentraX
md — 48px (default)
SentraX
lg — 96px
SentraX
xl — 192px
Favicon (com fundo escuro arredondado — versão otimizada pra ícone pequeno)
favicon
16px (browser tab)
icon 32
32px PNG
apple touch icon
apple-icon 180px (iOS)
icon 192
192px (PWA Android)
Browser tab usa /favicon.svg em browsers modernos; cai pro PNG 32 nos legados. iOS usa /apple-icon.png 180×180 quando o cliente salva no home screen.

Tipografia

Inter via next/font/google · weights 400/500/600/700/900

Display 50px / 900
H2 32px / 700
H3 24px / 600
Sub-heading 18px / 500
Body alt 16px / 400
Body padrão 14px / 400 — texto corrido do portal
Caption 13px / 400
Label/micro 12px / 400

Brand colors

Rosa + laranja primários. Roxo decorativo / gradient.

primary
#FF00A6
rosa — links, destaques principais
primary.hover
#E60095
hover (-10% lightness)
accent
#FF6200
laranja CTA "Contratar"
accent.hover
#FF924F
hover laranja claro
purple
#B700FF
gradient start
purple.light
#8C45FF
glow neon decorativo
purple.deep
#371866
bg roxo escuro

Background scale

Dark-mode-first — preto domina ~70% do site

bg.primary
#000000
bg.secondary
#190d2e
bg.elevated
#371866
bg.neutral
#401800

Feedback

Cores de status — azul fica aqui (convenção UX universal: info=azul)

success
#10B981
warning
#FBBF24
error
#EF4444
info
#0099FF
azul — só pra feedback (convenção UX)

Botões

Variantes que serão extraídas em <Button> shadcn

Inputs

bg sutil, border focus rosa primary

Cards

Variantes pra dashboard cliente e admin

MRR atual
R$ 12.430
+8.2% vs mês anterior
Glassmorphism inset
12 clientes
3 em onboarding
Plano em destaque
Pro
365 dias de retenção · suporte priority

Badges

Status e destaques (glow neon nos NEW)

NEW (rosa + glow)ALT (roxo + glow)activepast_duecanceledpending

Gradient CTA

Característico do site — roxo → rosa → laranja, ~77° diagonal

linear-gradient(77deg, #B700FF 0%, #FF00A6 51%, #FF6200 100%)
Variante alt: rosa → laranja (sem roxo)