Referência de identidade visual da Rheon. Paleta preto e branco, tipografia Inter (substituta de Rumiko para uso web), interface densa e tokens semânticos em OKLCH. Construído sobre a mesma arquitetura white-label do projeto base.
White-label: cada tenant pode sobrescrever cores, raios e tokens via API de layouts. Este documento exibe o tema base Rheon definido em src/styles.css.
Cores
Tokens semânticos em OKLCH. A Rheon opera sobre paleta preto e branco — preto para força e impacto, branco para equilíbrio e respiro visual. Use sempre os nomes semânticos em vez de valores fixos.
Superfícies & texto
Background
--background
oklch(1 0 0) — #ffffff
Foreground
--foreground
oklch(0.1 0 0) — #111111
Card
--card
oklch(1 0 0) — #ffffff
Muted
--muted
oklch(0.96 0 0) — #f5f5f5
Sidebar
--sidebar
oklch(0.985 0 0) — #fafafa
Ação & destaque
Primary
--primary
oklch(0.1 0 0) — #000000
Primary Foreground
--primary-foreground
oklch(1 0 0) — #ffffff
Secondary
--secondary
oklch(0.96 0 0) — #f5f5f5
Accent
--accent
oklch(0.96 0 0) — #f5f5f5
Neutros & feedback
Muted Foreground
--muted-foreground
oklch(0.45 0 0) — #6b6b6b
Destructive
--destructive
oklch(0.577 0.245 27.325)
Border / Input
--border, --input
oklch(0.88 0 0) — #e0e0e0
Ring (focus)
--ring
oklch(0.5 0 0) — #808080
Charts
Chart 1
--chart-1
oklch(0.2 0 0)
Chart 2
--chart-2
oklch(0.35 0 0)
Chart 3
--chart-3
oklch(0.5 0 0)
Chart 4
--chart-4
oklch(0.65 0 0)
Chart 5
--chart-5
oklch(0.8 0 0)
Tipografia
Família base: Inter (substituta web de Rumiko). Pesos disponíveis: 400 Regular, 500 Medium, 700 Bold. Escalas em rem para consistência entre densidades.
Escala
type-xl · 1.25rem / 1.4 · weight 700
Força, solidez e inovação.
type-lg · 1rem / 1.625 · weight 500
Movimento contínuo, transformação e impacto.
type-base · 0.875rem / 1.625 · weight 400
Identidade que não busca atenção pelo excesso, mas pelo posicionamento firme e pela clareza.
type-sm · 0.75rem / 1.625 · weight 400
Evoluir com propósito, impactar com inteligência e construir valor ao longo do tempo.
type-xs · 0.625rem / 1.625 · weight 400
Uso em labels, hints e metadados de interface.
Pesos
font-weight: 400 — Regular
Rheon Design System — texto corrido e descrições
font-weight: 500 — Medium
Rheon Design System — labels e subtítulos
font-weight: 700 — Bold
Rheon Design System — títulos e destaques
Preços
type-price-old + type-price
R$ 32,90 R$ 24,90
Raios & Espaçamento
Base: --radius: 0.5rem. Escalas derivadas garantem consistência. A Rheon usa raios menores que o tema base original, reforçando solidez e estrutura.
Border radius
--radius-sm 0.3rem
--radius-md 0.4rem
--radius-lg 0.5rem
--radius-xl 0.7rem
--radius-2xl 0.9rem
9999px pill / badge
Espaçamento
1 · 0.25rem (4px)
2 · 0.5rem (8px)
3 · 0.75rem (12px)
4 · 1rem (16px)
6 · 1.5rem (24px)
8 · 2rem (32px)
10 · 2.5rem (40px)
12 · 3rem (48px)
Botões
Elemento base .btn com variantes de cor e tamanho. Variante btn--default usa preto puro — cor primária Rheon. Transição suave em 0.15s; active com translateY(1px).
Variantes
Tamanhos
Ícone
Loading
Com ícone
Badges
Pílula arredondada (rounded-full), altura 1.25rem, texto 0.625rem, font-medium. Usados para tags, status e indicadores de desconto.