← Brand System
01.2 — Color System
— Sistema cromático

Esmeralda
profundo.
Creme vivo.

A paleta da Quabit evita o azul corporativo saturado. Em seu lugar: verde-petróleo — uma cor de confiança com densidade, associada a materiais nobres (folha molhada, malaquita, vidro antigo). O creme equilibra: dá calor onde o petróleo daria frieza.

Sistema construído para alto contraste em modo escuro, com uma única cor-acento funcional: o esmeralda.

01 — CORE
Paleta primária.
Três cores carregam 95% do sistema: petróleo (primária), creme (background claro / texto em escuro), esmeralda (acento funcional). Tudo além disso é suporte.
Primary · Background
01
#0E1E1B
Petrol
O fundo da marca. Usado em apresentações, interfaces escuras e peças premium.
HEX0E1E1B
RGB14 · 30 · 27
OKLCH0.18 0.02 175
Primary · Foreground
02
#F2EBDC
Cream
Papel digital. Suporte a texto longo.
HEXF2EBDC
RGB242 · 235 · 220
Accent
03
#17463B
Emerald
Acento único. Parcimônia.
HEX17463B
RGB23 · 70 · 59
02 — SCALES
Escalas de uso.
Da fundação mais escura ao brilho do acento. Cada step tem um papel específico no sistema (superfície, borda, texto, highlight).
Petróleo
Primary scale
ink / 950
#0B1513
petrol-900
#0E1E1B
petrol-800
#133029
petrol-700
#17463B
petrol-600
#1E5A4A
petrol-500
#2A6F5E
emerald-400
#2A9075
Creme & Neutros
Foreground scale
paper / 50
#FAF6EC
cream-50
#F8F3E7
cream-100
#F2EBDC
cream-200
#E4DBC2
stone-300
#C7BFA9
stone-500
#8C8675
stone-700
#4D4A42
03 — RATIOS
Proporção de uso.
Regra de ouro: petróleo domina, creme respira, esmeralda pontua. Inversões são permitidas para peças editoriais leves, mas o acento nunca deve passar de 5%.
Dominante · DarkApresentações, site, interfaces premium. Petróleo como assinatura.
75%
20%
5%
Invertida · LightPapelaria, propostas, documentos longos. Leitura confortável.
75%
20%
5%
Editorial · MediumPeças de transição — posts sociais e covers. Mais expressivo.
60%
35%
5%
04 — TOKENS
Design tokens.
Valores semânticos — para desenvolvedores implementarem o sistema em código. Cole direto no seu projeto.
// Brand colors
--brand-primary:#0E1E1B; /* petrol-900 */
--brand-accent:#17463B; /* emerald */
--brand-paper:#FAF6EC; /* paper */
--brand-ink:#0B1513; /* ink */
// Semantic · dark theme
--bg-base:#0E1E1B;
--bg-elevated:#133029;
--fg-default:#F2EBDC;
--fg-muted:rgba(242,235,220,0.55);
--border-subtle:rgba(242,235,220,0.1);
--accent-fg:#4FB499;
// Semantic · light theme
--bg-base:#FAF6EC;
--bg-elevated:#F2EBDC;
--fg-default:#0B1513;
--fg-muted:rgba(11,21,19,0.55);
--border-subtle:rgba(11,21,19,0.12);
--accent-fg:#17463B;