Design System v1.0
Software House Premium • SaaS • GovTech
Setembro 2026

Foundations

Tokens visuais, tipografia, espaçamento e efeitos do Design System SINAPTECH.

Colors

Brand

#FFFFFF
Brand Snow
--color-brand-snow
#0F172A
Brand Ink
--color-brand-ink
#64748B
Brand Muted
--color-brand-muted

Primary — Forest Trust

50
100
200
300
400
500
600
700
800
900

Secondary — Synaptic Mint

50
100
200
300
400
500
600
700
800
900

Accent — Human Amber

50
100
200
300
400
500
600
700
800
900

Status

#EF4444
Error
--color-error
#10B981
Success
--color-success
#F59E0B
Warning
--color-warning
#3B82F6
Info
--color-info

Typography

Fontes: Plus Jakarta Sans (títulos) + Inter (corpo)

Display XL
A sinapse perfeita
Plus Jakarta Sans Bold
64px / 72px
Display LG
Inteligência Colaborativa
Plus Jakarta Sans Bold
56px / 64px
Display MD
Soluções Digitais
Plus Jakarta Sans Bold
48px / 58px
H1
Título Principal
Plus Jakarta Sans Bold
36px / 44px
H2
Seção da Página
Plus Jakarta Sans Bold
30px / 38px
H3
Subseção
Plus Jakarta Sans Semibold
24px / 32px
H4
Card Title
Plus Jakarta Sans Semibold
20px / 28px
H5
Label Importante
Inter Semibold
18px / 26px
Body LG
Texto de destaque para parágrafos importantes.
Inter Regular
20px / 30px
Body
Texto padrão do corpo de qualquer aplicação.
Inter Regular
16px / 24px
Body SM
Texto auxiliar e descrições secundárias.
Inter Regular
14px / 20px
Caption
Legendas e metadados
Inter Regular
12px / 16px
Overline
LABEL EM CAPS
Inter Semibold
11px / 16px
letter-spacing: 0.1em

Spacing

Escala baseada em 4px — todos os valores são múltiplos de 4.

0
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px

Border Radius

none
0px
sm
4px
md
6px
lg
8px
xl
12px
2xl
16px
full
circle

Shadows

xs
sm
md
lg
xl
brand
mint

Components

Todos os componentes com variantes, tamanhos e estados.

Button
Variant
Size
State
Input
Variant
Email
Nunca compartilharemos seu email.
Senha
Senha obrigatória
Nome
Desabilitado
Size
Select
Default
Checkbox
States
Unchecked
Checked
Disabled
Switch
States
Off
On
Badge
Variant
Default Primary Secondary Success Warning Error Info
Size
SM MD LG
Avatar
Size
DR
DR
DR
DR
DR
Shape
Circle
Square
Alert
Informação
Esta é uma mensagem informativa para o usuário.
Sucesso!
Operação realizada com sucesso. Seus dados foram salvos.
Atenção
Verifique os dados antes de continuar.
Erro
Encontramos um obstáculo, mas nossa IA está recalculando...
Card
Default
Título do Card
Descrição do card com conteúdo secundário.
Elevated
Card com Sombra
Sombra elevada para destaque.
Bordered
Borda Destacada
Borda mais grossa para separação.
Interactive
Hover Me
Efeito hover com lift e sombra.
Tabs
Skeleton
Divider
Seção

Patterns

Combinações de componentes para padrões comuns de interface.

Formulário de Contato
Nome completo
Email corporativo
Nunca compartilharemos seu email.
Serviço de interesse
Concordo com os termos de uso e privacidade
Card de Solução
Software
Software Sob Medida
Sistemas desenvolvidos para necessidades específicas do seu negócio.
IA
IA Aplicada
Automação, análise e inteligência incorporadas aos produtos.