v 0.1 · 2026 · interno

Data is Power
Design System

BR / PT-BR
·
Editorial × Tech
·
Calm authority

Sistema visual para uma escola de Analytics & AI Engineering. Tom: dados acima de promessa, autoridade calma, sem vender medo. A composição é editorial — números grandes, regras finas, espaço — mas o vocabulário de cor e botão é de produto tech moderno brasileiro.

01 — Brand

Logomark & uso

"Power" sempre em itálico serif. O bloco-ícone evoca uma pilha de dados (rows). Em fundo escuro, inverter; em accent, manter "Power" em ink-black para garantir contraste contra o laranja-vermelho.

Data is Power
Data is Power
Data is Power
Voice

A IA não vai te substituir. Quem entende o negócio e alimenta a IA, vai.

Frases curtas. Dado antes de adjetivo. PT-BR direto.

Antivoice
  • "Transforme sua carreira hoje mesmo!"
  • "Domine IA em 7 dias 🚀"
  • "O método #1 do mercado"
  • Emojis decorativos, exclamações, urgência fabricada.
02 — Typography

Três famílias, papéis claros

Instrument Serif para títulos e números — dá peso editorial. Geist para UI e corpo — neutra, alta legibilidade em densidade. JetBrains Mono para metadados, código e labels.

Instrument Serif · 128 / 0.92 / -0.04em
R$ 25.000/mês
DISPLAY · stats, hero numbers
Instrument Serif · 72 / 1.05 / -0.03em
Engenheiro de Analytics, na era da IA
H1 · hero headline
Instrument Serif · 40 / 1.1 / -0.025em
O que você sai sabendo
H2 · section
Geist 500 · 22 / 1.35 / -0.01em
Construa pipelines semânticos que agentes de IA podem consumir.
H3 · sub-head
Geist 400 · 19 / 1.55
Texto de abertura, parágrafo de hero, citação. Mantém a leitura confortável em densidade média.
BODY-LG · lead
Geist 400 · 16 / 1.55
Corpo padrão. Usado em cards, listas, descrições. Atinge ~70 caracteres por linha em 1280px.
BODY · default
JetBrains Mono 500 · 11 / 0.12em / UPPER
Próxima turma · 03 de agosto · 24 vagas
EYEBROW / META
JetBrains Mono 400 · 13
SELECT * FROM models WHERE layer = 'semantic' AND ai_ready = TRUE;
CODE · technical content
03 — Color

Papel quente, tinta profunda, um único accent

Toda a paleta é OKLCH com chroma baixo (≤0.012) na escala de papel. Um único accent quente — usado para CTA, charts e ênfase — nunca para decoração. Teal e violet aparecem só em gráficos multi-série.

Paper scale · oklch L 0.085 → 0.985 · C 0.006-0.012 · H 80
paper/50
L 0.985
paper/100
L 0.965
paper/200
L 0.935
paper/300
L 0.880
paper/400
L 0.700
paper/500
L 0.520
paper/600
L 0.380
paper/700
L 0.260
paper/800
L 0.180
paper/900
L 0.130
paper/950
L 0.085
Accents · always L 0.62
accent
oklch0.62 0.18 35
chart/teal
oklch0.62 0.10 200
chart/violet
oklch0.62 0.14 290
chart/olive
oklch0.62 0.09 110
04 — Spacing & Radius

Escala 4 · radii contidos

Espaço é o principal recurso de hierarquia, junto da régua. Radii são pequenos: 0 para blocos editoriais, 6 para inputs/botões, 12 para cards. Nada de pílulas grandes (com exceção de tags).

Spacing scale
--s-1
4px
--s-2
8px
--s-3
12px
--s-4
16px
--s-6
24px
--s-8
32px
--s-12
48px
--s-16
64px
--s-24
96px
Radius
0 · editorial
4 · sm
6 · md / btn
12 · lg / card
tag
999 · tag only
Rules

1.5px · ink — section openers

1px · rule — most dividers

1px · rule-soft — dense rows
05 — Components

Núcleo

Botões, formulários, tags, cards. O conjunto mínimo para landing + checkout. O sistema é deliberadamente pequeno; novas peças exigem justificativa.

Buttons
Form fields
Usaremos para enviar a NF-e e o convite da turma.
Tags
Inscrições abertas PT-BR Cohort ao vivo 8 sábados Próxima turma · 03/ago
Cards
Curso 01

Analytics Engineering for AI

8 sábados · 56h · cohort ao vivo · projeto final.

A partir de
R$ 1.500
Curso 02 · 2027

Agentic AI & Context Engineering

Em planejamento. Avise-me quando abrir lista de espera.

Stat block
764
vagas em SP
LinkedIn · abr/2026 · "Analytics Engineer"
+108%
salário pleno (delta)
Analista BI → AE pleno · BR
−14,5%
backend BR yoy
Código Fonte TV · 2025→26
Bar comparison
Salário pleno · CLT · Brasil · 2026
Analista BI
R$ 9.500
Analista de Dados
R$ 16.000
Analytics Engineer
R$ 25.000
Sr. Data Engineer (SP)
R$ 26.800
Glassdoor BR · Robert Half 2026 · Coding Data Today
Quote / pull

"Semantic layers passaram de 'nice-to-have' a infraestrutura crítica em 2025."

06 — Tokens

Variáveis CSS exportadas

Importar styles/tokens.css e usar via var(--token). Suporte a tema escuro via [data-theme="dark"].

Color tokens
--bg
papel principal
--bg-alt
papel alternativo
--ink
texto principal
--ink-soft
texto secundário
--ink-mute
meta / labels
--rule
linhas / borders
--accent
CTA, ênfase, charts
Type & space
--font-serif
Instrument Serif
--font-sans
Geist
--font-mono
JetBrains Mono
--t-display
56→128 fluid
--t-h1
40→72 fluid
--s-1 → --s-32
4 → 128 px
--r-sm/md/lg
4 / 6 / 12 px