Design System · v1.0 · 2026

BASE
Operating System
para marcas.

Um sistema visual construído para uma empresa que orquestra automação, dados e IA. Pensado em grid, tipografado em Geist, pontuado em verde menta.

DesignerVictor Amemiya
Versão1.0 · Abril 2026
FontesGeist · Geist Mono
StatusEm produção

01 / BRAND

Marca

A marca BASE é composta pelo wordmark (grotesca pesada, em verde menta ou preto) e pelo ícone — uma monograma do 'B' estilizado em forma de fita, encaixado em um quadrado com cantos arredondados. O ícone nunca deve ser redesenhado; apenas recolorido dentro do sistema.

BRAND / 01
B

BASE

Wordmark + MarkLockup principal · horizontal
Clear space≥ 1× altura do mark
B
MARK · DARK
B
MARK · LIGHT
BASEWORDMARK · DARK
BASEWORDMARK · MINT BG

02 / COLORS

Cores

A paleta é intencionalmente reduzida: um quase-preto profundo como base, um off-white tépido como contrapeso, e verde menta como única cor de marca ativa. Âmbar e rosa são reservados apenas para estados (alerta, atenção) e nunca aparecem como decoração.

PRIMARY
Ink#0E1117
ACCENT
Mint#5DFBA8
SURFACE
Paper#F4F1EA
NEUTRAL
Ink 200#151921
mint/50#E7FDF0
mint/100#C9FCDC
mint/200#9DFBC0
mint/300#7BFBB3
mint/400#5DFBA8
mint/500#3FE08C
mint/600#2CB771
mint/700#1F8A55
mint/800#155E3B
mint/900#0B3522

Status · Semantics

4 TOKENS
LIVE · RunningNEW · BetaWARN · AttentionIDLE · Paused

Contrast · Pares validados

AA/AAA
Ink / Paper · 15.8
Ink / Mint · 13.2
Mint / Ink · 13.2

03 / TYPE

Tipografia

Geist é a voz da BASE. Grotesca geométrica, contemporânea, técnica. Usamos pesos 900 para manchetes, 500 para títulos e 400 para texto corrente. Geist Mono aparece em labels, meta, timestamps e rótulos de sistema — nunca em parágrafos longos.

Display · 900Geist · 120/88pxTracking -4%Leading 0.88
Automação
com base.
Hero · ManchetesHome · Capa de caso
H1 · 700Geist · 64/64pxTracking -3%
Orquestrando dados, IA e pessoas.
Seções · Títulos internos
H2 · 500Geist · 40/44pxTracking -2%
Um só lugar para automações que realmente entregam.
Subtítulos · Cards grandes
H3 · 500Geist · 24/32px
Integração com WhatsApp, Zapier e APIs próprias.
Cards · Features
Body · 400Geist · 16/25px
Da coleta ao envio. A BASE conecta coleta, integrações, bots e APIs dentro de um mesmo fluxo operacional — com visibilidade, logs e governança que o time inteiro entende.
Parágrafos · Descrições
Mono · 500Geist Mono · 14/20pxTracking +2%
[01] LIVE · automation.run("coleta → envio")
Labels · Logs · Meta

04 / TOKENS

Espaçamento & forma

Escala de 4px, com steps dobrando a cada nível relevante. Raios sutis (4 / 8 / 14 / 24) — nada de bolhas. Sombras quase inexistentes em dark; reservadas para callouts sobre paper.

Spacing scale

s-14px
s-28px
s-312px
s-416px
s-624px
s-832px
s-1248px
s-1664px
s-2496px
s-32128px

Radii

0 · sharp
4 · xs
8 · sm
14 · md
24 · lg
∞ · pill

Elevation

elev/1
elev/2
elev/3 · mint glow

05 / COMPONENTS

Componentes

Vocabulário de UI enxuto, construído em torno de poucos átomos: botões pill, inputs quadrados, cards com borda fina e badges mono. Interações preferem sutileza — transições de 150ms, hover que ilumina a borda.

Buttons · 5 variantes · 3 tamanhos

ATOMS / BTN

Forms · Inputs & fields

ATOMS / FORM

Cards · Feature

MOLECULES
01 / COLETA
Formulários, WhatsApp, e-mail

Ingestão unificada com validação, deduplicação e enriquecimento automático antes de seguir o fluxo.

02 / INTEGRA
200+ conectores nativos

Zapier, Make, HubSpot, RD, WhatsApp Business e endpoints REST customizados por projeto.

03 / ENVIA
Ação com IA supervisionada

Agentes da BASE executam tarefas com logs auditáveis. Humano no loop quando necessário.

Navigation · Pill bar

ORGANISMS
BBASE

Iconography · 1.5px stroke · 22px

SYSTEM · 16

06 / IN PRODUCTION

Veja em uso

Os tokens e componentes acima rodam ao vivo no resto do site. Algumas referências rápidas: