[02] Pilar 02

Foundations

A infraestrutura atômica que sustenta o cockpit. Tokens calibrados para precisão absoluta e legibilidade em alta densidade.

Color Relics · OKLCH

Paleta 100% dark-first. Todas as cores expressas em OKLCH para compatibilidade P3.

oklch(0.05 0.00 0)

Obsidian Core

--background

Fundo principal. Zero distração.

oklch(0.85 0.18 126)

BB Lime

--primary

Cor primária de ação e destaque.

oklch(0.12 0.008 126)

Obsidian Surface

--card

Fundo de componentes e cards.

oklch(0.82 0.16 85)

XP Gold

--gold

Cor de recompensa e elite.

oklch(0.55 0.22 25)

Critical Alert

--critical

Status de erro/emergência.

oklch(0.65 0.15 150)

Optimal Status

--optimal

Status operacional estável.

Typography System

4 famílias. Cada uma com papel específico no cockpit. Nunca misture fora das regras.

Ag

Tasa Orbiter Display

--font-display

Headlines > 72px · weight 900 · italic

RoleDisplay / Hero
Tracking-0.05em
Line-H0.7
Ag

Cormorant Garamond

--font-serif-modern

Subtítulos · italic · weight 300–600

RoleEditorial / Quotes
Trackingnormal
Line-H1.4
Ag

Inter

--font-sans

Interface geral · weight 400–700

RoleUI / Body
Tracking-0.025em
Line-H1.5
Ag

Roboto Mono

--font-mono

Telemetria 7px · tokens · código

RoleLabels / Code / Telemetry
Tracking0.15em
Line-H1

Spacing Scale

Micro--spacing-xs
4px
Standard--spacing-md
16px
Blueprint Gap--spacing-blueprint-gap
32px
Section--gap-section
64px
Datum Guide--datum-guide
120px

Rounding System

Sharp--radius-sm
8px
Technical--radius-lg
12px
Card--radius-2xl
20px
Bento--radius-bento
40px
Pill--radius-pill
9999px

Motion Durations

Três durações canônicas. Nunca use valores fora deste sistema.

150ms

Micro

--duration-micro

Hover, focus, feedback imediato

450ms

Card

--duration-card

Reveal de cards, modals, entry

800ms

Page

--duration-page

Transições de página, full animations

Easing Curves
Cockpit — Movimento precisocubic-bezier(0.2, 0, 0, 1)
Reveal — Entrada com inérciacubic-bezier(0.34, 1.56, 0.64, 1)