Design System v2.0

Uma Infraestrutura,
Infinitas Possibilidades.

Sistema de design unificado para o ecossistema SystentandoBR. Componentes de alta fidelidade, interações baseadas em física e tipografia espacial.

Scroll
01 / Tipografia

Escala tipográfica completa

Sistema tipográfico baseado em Inter, Space Grotesk e JetBrains Mono com escala harmônica e hierarquia clara.

Font Families

Primary

Inter

Sans-serif principal para UI e conteúdo

font-family: 'Inter', system-ui, sans-serif;

Display

Space Grotesk

Para títulos e headlines

font-family: 'Space Grotesk', sans-serif;

Monospace

JetBrains Mono

Para código e labels técnicos

font-family: 'JetBrains Mono', monospace;

Font Loading Strategy

• Preconnect para Google Fonts

• Weights: 200, 300, 400, 500, 600, 700, 800, 900

• Fallback stack: system-ui, sans-serif

H1 / Space Grotesk Bold / 4rem (64px) / line-height: 1 / letter-spacing: -0.04em

The quick brown fox jumps

H2 / Space Grotesk Semibold / 2.5rem (40px) / line-height: 1.1 / letter-spacing: -0.02em

Digital Interface

H3 / Inter Medium / 1.5rem (24px) / line-height: 1.3

Component Architecture

H4 / Inter Medium / 1.25rem (20px) / line-height: 1.4

Subsection Title

H5 / Inter Medium / 1.125rem (18px) / line-height: 1.5
Card Title
H6 / Inter Medium / 1rem (16px) / line-height: 1.5
Label Text
body-lg / Inter Regular / 1.125rem (18px) / line-height: 1.6

Texto de corpo grande para introduções e destaques. Utilizado em parágrafos principais e chamadas importantes.

body / Inter Regular / 1rem (16px) / line-height: 1.6

Texto padrão para conteúdo principal. Esta é a medida base do sistema tipográfico.

body-sm / Inter Regular / 0.875rem (14px) / line-height: 1.5

Helper text e captions. Utilizado para informações secundárias.

LABEL MONO
02 / Sistema de cores

Paleta e roles semânticos

Sistema de cores completo com variantes de opacidade, gradientes e roles semânticos para diferentes contextos.

Cores Primárias

Accent Primary

#d5ff40

RGB: 213, 255, 64

--token-d98a4c00-7e0c-42c7-87be-9d10760cb03b

accent
Surface

#15151a

RGB: 21, 21, 26

HSL: 240, 11%, 9%

--bg-highlight
Background

#0a0a0c

RGB: 10, 10, 12

HSL: 240, 9%, 4%

--bg-body
Muted

#64748b

RGB: 100, 116, 139

HSL: 215, 16%, 47%

slate-500

Variantes de Opacidade

10%
bg-accent/10
20%
bg-accent/20
30%
bg-accent/30
50%
bg-accent/50
100%
bg-accent

Gradientes

Gradient Hero

from-accent/20 to-blue-900/30

accent / blue blur
Gradient Surface

from-[#15151a] to-[#0f0f13]

Cards / Sections

Roles Semânticos

Contextos de Uso

  • • text: Cor do texto principal
  • • background: Fundo de seções
  • • border: Bordas e divisores
  • • hover: Estados de hover
  • • active: Estados ativos
  • • disabled: Elementos desabilitados

Contraste (WCAG)

  • • AA: Contraste mínimo 4.5:1
  • • AAA: Contraste mínimo 7:1
  • • Texto branco (#f8fafc) sobre fundo escuro (#0a0a0c): AAA
  • • Texto accent (#d5ff40) sobre fundo escuro: AA
03 / Componentes

Buttons, Inputs, Cards e mais

Componentes UI completos com animações, estados e variações.

Buttons

Inputs

Cards

Flashlight Card

Efeito de luz ao passar o mouse. Interação fluida e elegante.

Glow Card

Backdrop blur e borda sutil com efeito glow.

Card Simples

Estilo básico com hover e transições suaves.

Navbar

Modal

Badges & Tooltips

Badge Neutral Outline Info Warning Error Hover para tooltip Tooltip exemplo
04 / Ícones

Iconify Solar

Biblioteca de ícones Solar do Iconify com animações e estados interativos.

home
settings
user
notification
upload
security
code
palette
rocket
star
heart
magic
05 / Animações

Reveal, Float, Beam, Marquee e mais

Sistema completo de animações para criar experiências fluidas e envolventes.

animate-float

Animação de flutuação suave

animate-spin-slow

Rotação lenta contínua

reveal-up

Elemento 1
Elemento 2
Elemento 3

Revelação ao entrar na viewport

reveal-zoom

Zoom in ao aparecer

pulse-glow

Pulso com glow

shimmer

Shimmer Effect

Efeito de brilho deslizante

• SystentandoBR • Design System v2.0 • Infinitas Possibilidades • Inter • Space Grotesk • JetBrains Mono • Tailwind • GSAP • Iconify • SystentandoBR • Design System v2.0 • Infinitas Possibilidades