▶
OKAMI
/
BRAND_SYSTEM
/
v0.2.0
Design System_
Sistema visual e de componentes para a Okami — uma operação técnica de IA, segurança e desenvolvimento para PMEs.
Estética: terminal/code, escuro, com glow contido. Construído sobre tokens CSS, OKLCH e tipografia geométrica.
§01 / brand
Logomarca
A marca opera em fundo claro e escuro. O escuro é preferido em produto.
// light surface
// dark surface
// transparent · preferred in product
_ clearspace
Reservar ao redor da marca um espaço mínimo equivalente à altura da letra "K".
_ min size
Símbolo isolado: 32px. Marca completa com tagline: 120px de largura.
_ don't
Não rotacionar, não trocar as cores do circuito, não usar sobre imagem com baixo contraste.
§02 / color
Paleta
5 cores primárias. Acentos compartilham o mesmo envelope OKLCH (L≈72, C≈0.18) para harmonia.
Onyx
--ok-bg-0
#060609
Heat Orange
--ok-orange
oklch(72% .19 45)
Neon Magenta
--ok-magenta
oklch(70% .27 340)
Volt Cyan
--ok-cyan
oklch(82% .14 200)
Bone
--ok-fg
#f4f4f8
bg-0#060609
bg-1#0b0b12
bg-2#11111b
bg-3#1a1a26
fg-dim#3d3e50
fg-mute#6c6d80
fg-soft#b9bac8
fg#f4f4f8
● SUCCESS
Operacional
--ok-success
● WARNING
Atenção
--ok-warning
● DANGER
Crítico
--ok-danger
● INFO
Informativo
--ok-info
§03 / type
Tipografia
Space Grotesk (display) + JetBrains Mono (UI, captions, code). Tracking apertado em títulos.
Display / 88Space Grotesk · 500
-0.04em
-0.04em
Multi-vendor IA, sem prisão.
H1 / 56Space Grotesk · 500
-0.03em
-0.03em
Segurança como pré-requisito.
H2 / 36Space Grotesk · 500
-0.02em
-0.02em
AppSec, DevSecOps, GAP Analysis.
H3 / 24Space Grotesk · 500
-0.01em
-0.01em
Gateway de modelos com fallback inteligente.
Body / 17Space Grotesk · 400
1.6 line-height
1.6 line-height
A Okami opera no encontro entre engenharia de segurança e inteligência artificial. Nossa abordagem desacopla o cliente do fornecedor, mantendo a flexibilidade para trocar modelos sem refazer pipelines.
Small / 13Space Grotesk · 400
1.55 line-height
1.55 line-height
Texto auxiliar, descrições de campo, captions. Usado abaixo de cards e em footnotes.
Mono / 13JetBrains Mono · 400
+0.04em
+0.04em
$ curl -X POST https://api.okamiops.com/v1/route
Caps / 11JetBrains Mono · 500
+0.18em uppercase
+0.18em uppercase
§ section identifier · metadata
§04 / buttons
Botões
Cantos retos por padrão. Hover preenche com cor sólida e ativa o glow correspondente.
_ primary · solid
_ outline
_ ghost · danger
_ sizes
_ with icon
§05 / forms
Inputs & controles
Foco em ciano com box-shadow externo. Errors em magenta. Labels em mono uppercase.
// como aparece em invoices
⚠ CNPJ não passou na validação Receita
_ checkboxes
_ radios
_ toggle
Telemetria anônima
§06 / cards
Cards
Cards base + variantes: featured (acento), glow (destaque), com canto recortado.
// service · 001
AppSec Journey
Programa de maturidade em segurança de aplicações, do threat modeling ao deploy seguro.
// featured
Vendor Assessment
Avaliação independente de fornecedores de IA: custo, latência, compliance e risco de lock-in.
// new · 2026
Secure Product Design
Arquitetura segura por padrão, com gateways multi-modelo e isolamento por tenant.
§07 / badges
Badges & status
Indicadores de estado, categoria e versão. Sempre em mono uppercase.
PRIORIDADE
BETA
v2.4
OPERACIONAL
CRÍTICO
DEFAULT
SOLID PRIMARY
PILL
PILL MAGENTA
SISTEMAS ONLINE
APPSEC
DEVSECOPS
GATEWAY
MULTI-LLM
LGPD
GDPR
ISO 27001
SOC 2
§08 / terminal
Code · Terminal
Bloco terminal para snippets, logs e CTAs técnicos.
okami@gateway ~%okami route --task "extract invoice fields" --policy cost-optimal
→ scoring 4 vendors against policy cost-optimal...
✓ anthropic.claude-haiku-4.5 $0.0008/req · 220ms · A+
✓ openai.gpt-4o-mini $0.0011/req · 310ms · A
✓ google.gemini-flash-2.5 $0.0006/req · 280ms · A
⚠ self-hosted.llama-3.1-8b unhealthy · skipping
→selected: google.gemini-flash-2.5 · fallback chain ready
okami@gateway ~%_
§09 / nav
Navegação & tabs
Tabs com índice numérico e bottom-border laranja no estado ativo.
01OVERVIEW
02SERVIÇOS
03GATEWAY
04COMPLIANCE
05API
§10 / overlays
Modal · Toasts
Faixa lateral colorida codifica intenção. Modais com sombra/glow leve.
// confirm.action
[ esc ]
Revogar token de API?
Esta ação encerra todas as conexões ativas do token sk-okm-***42a e não pode ser desfeita.
i
Novo modelo disponívelclaude-sonnet-5 já está no roteador.
✓
Deploy concluídookami-gateway @ v2.4.1 · 18 nodes
!
Cota próxima do limite87% do orçamento mensal de tokens consumido.
×
Falha na auditoria2 controles ISO 27001 fora de conformidade.
§11 / icons
Ícones
Grid 24×24, traço 2px, cantos retos, terminadores arredondados. Estilo linear único.
shield
lock
core
grid
pulse
globe
code
audit
route
graph
chart
stack
time
menu
search
arrow
§12 / spacing
Spacing & radii
Escala 4-base, 12 stops. Radii sharp por padrão.
r-0 · 0
r-1 · 2
r-2 · 4
r-3 · 8
r-pill
§13 / motion
Motion
Animações com propósito: estado, atenção, identidade. Easing: cubic-bezier(.2,.7,.2,1).
_ pulse · 1.8s
_ scan · 2s linear
_ glitch · on hover/identity
OKAMI