Design Operating System

O nosso Design System

Os fundamentos visuais que dão coerência a todos os nossos projetos. Tokens, paletas, tipografia, espaçamentos — abertos e documentados.

Paleta de cores

Primary — Terracota

--primary: 16 71% 42%

A cor de ação: CTA, ligações. 5,3:1 sobre branco

Accent — Azul-marinho

--accent: 214 52% 25%

Títulos, estrutura. 11,3:1 sobre branco

Azul-marinho profundo

--navy-deep: 213 56% 17%

Fundos de faixas e rodapé

Dourado vivo

--gold-bright: 41 88% 62%

Números apenas sobre fundos azul-marinho

Texto

--foreground: 215 28% 17%

Corpo de texto. 14,7:1 sobre branco

Texto secundário

--muted-foreground: 215 14% 40%

Notas, legendas. 6,0:1 sobre branco

Rosa

--rose: 14 62% 40%

Paleta alargada, ajustada à gama

Violeta

--violet: 214 52% 32%

Paleta alargada, ajustada à gama

Ciano

--cyan: 205 48% 33%

Paleta alargada, ajustada à gama

Dourado

--gold: 40 90% 30%

Avaliações, distinções. ≥ 4,5:1 sobre branco

Índigo

--indigo: 213 56% 25%

Paleta alargada, ajustada à gama

Destructive

--destructive: 0 72% 42%

Erros, eliminação

Tipografia

Display — Outfit Variable

Elegância tipográfica de Lyon

Títulos, CTA, destaques. 100–900.

Body — Plus Jakarta Sans Variable

Legibilidade ideal para parágrafos longos, com um ritmo editorial cuidado.

Corpo de texto, navegação, rótulos. 200–800.

Elemento	Tamanho (fluido)	Entrelinha	Utilização
`h1`	clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem)	1.06	Título de página, primeiro ecrã
`h2`	clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem)	1.14	Título de secção
`h3`	clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem)	1.25	Subtítulo, cartão
`h4`	1.125rem	1.35	Intertítulo
`h5, h6`	1rem	1.4	Títulos menores
`body`	1rem	1.65	Corpo de texto (Plus Jakarta Sans)
`text-sm`	0.875rem	1.25rem	Texto secundário, notas
`text-xs`	0.75rem	1rem	Metadados, badges, legendas

Espaçamento (escala Tailwind)

0.52px

14px

28px

312px

416px

624px

832px

1248px

1664px

2496px

Sombras

shadow-e1

Filete quase impercetível — campos, etiquetas

shadow-e2

Cartões em repouso

shadow-e3

Cartões ao passar o cursor, botões flutuantes

shadow-e4

Diálogos, painéis

Utilitários CSS personalizados

.glass

Cartão branco, filete fino, sombra suave — cartões, campos

.glass-strong

Mesma superfície, sombra mais marcada — diálogos, cabeçalhos

.glass-premium

Superfície em destaque — primeiro ecrã, portfólio

.surface-sunken

Secção alternada cinzento frio, margens esbatidas em 40 px

.section-y

Ritmo vertical de secção (--section-y)

.measure

Comprimento de linha limitado a 68 caracteres

.text-gradient-warm

Fundo terracota numa palavra do título

.text-gradient-cool

Fundo azul-marinho numa palavra do título

.cta-gradient

Fundo terracota + texto --primary-foreground

.section-divider

Filete de 1 px, esbatido nas duas extremidades

.card-img-frame

Moldura de imagem 16/10, CLS zero, zoom ao passar o cursor

.spot-card

Brilho e contorno que seguem o cursor

.btn-glow-fill

Botão preenchido: reflexo + halo terracota ao passar o cursor

.btn-glow-ring

Botão de contorno: contorno luminoso ao passar o cursor

.link-grow

Sublinhado que se estende a partir da esquerda

.skip-link

Ligação de salto, visível ao receber o foco

Pré-visualização de componentes

Botões

Badges

PrimarySuccessWarningError

Gradientes

KAYZEN Premium

Engenharia moderna

Glass Strong

Exemplo de cartão que utiliza a classe .glass-strong.

Um design system reutilizável

Os seus projetos beneficiam deste design system comprovado. A coerência visual, a acessibilidade e o desempenho são garantidos de raiz.

Ver o stack técnico Registo de alterações Iniciar um projeto