SMN Design System - Fonte Única da Verdade

Paleta de Cores

Cores extraídas diretamente dos logos da SMN, criando uma identidade visual coesa e profissional

Navy Profundo (Primária)

Cor principal da identidade SMN, transmitindo confiança e profissionalismo

500

Primary 500

#2e304f

600

Primary 600

#26314c

700

Primary 700

#1f2537

800

Primary 800

#181c2a

Slate Suave (Secundária)

Cores complementares para elementos secundários e backgrounds

300

Secondary 300

#637a85

500

Secondary 500

#4f6e7c

Verde Menta (Destaque)

Cor de destaque para CTAs, links e elementos interativos

500

Accent 500

#40df80

600

Accent 600

#38c271

Light

Accent Light

#8af2c0

Neutros

Escala de cinzas para textos, backgrounds e elementos de interface

Neutral 50

#ffffff

100

Neutral 100

#f8f9fa

200

Neutral 200

#e9ecf1

300

Neutral 300

#d1d2d6

500

Neutral 500

#737380

800

Neutral 800

#33333a

Gradientes

Gradientes para backgrounds e elementos especiais

Background

Gradient Background

135deg, #637a85 → #2e304f

Button

Gradient Button

90deg, #40df80 → #8af2c0

Tipografia

Sistema tipográfico baseado em SF Pro e Inter para máxima legibilidade e consistência

Display Large

SF Pro Display, 48px, Bold · Títulos principais e hero sections

Heading Principal

SF Pro Display, 32px, Semibold · Títulos de seções importantes

Heading Secundário

SF Pro Display, 24px, Semibold · Subtítulos e divisões

Body Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

SF Pro Text, 18px, Regular · Textos destacados e introduções

Body Regular - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

SF Pro Text, 16px, Regular · Texto padrão para conteúdo

Body Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SF Pro Text, 14px, Regular · Textos secundários e legendas

const smnTokens = { primary: '#2e304f', accent: '#40df80', neutral: '#ffffff' };

Fira Code, 14px, Regular · Código e valores técnicos

Escala Tipográfica

Hierarquia harmônica baseada em proporções matemáticas

5XL

48px · Display Large

4XL

36px · Display Medium

3XL

30px · Heading 1

2XL

24px · Heading 2

20px · Heading 3

18px · Body Large

BASE

16px · Body Regular

14px · Body Small

12px · Caption

Pesos de Fonte

Variações de peso para criar hierarquia e ênfase

Light 300

Para textos delicados

Regular 400

Texto padrão

Medium 500

Destaque sutil

Semibold 600

Títulos importantes

Bold 700

Máxima ênfase

Componentes Interativos

Elementos essenciais da identidade digital SMN com estados e interações

Botões

Elementos de ação com hierarquia visual clara e estados interativos

Estados dos Botões

Toggle Switches

Controles de alternância para configurações e estados binários

Modo Escuro

Notificações

Auto-save

Desabilitado

Campos de Entrada

Elementos de formulário com estados visuais claros

Nome Completo

Mensagem

Categoria

Estados dos Inputs

Cards

Containers para organizar conteúdo com hierarquia visual

Card Simples

Conteúdo do card com informações relevantes e bem organizadas.

Card Interativo

Card com elementos interativos e hover effects.

Card Destaque

Card com destaque visual usando a cor accent da SMN.

Badges e Tags

Elementos para categorização e status

Status

Ativo Pendente Inativo Novo