dash.luizramos.com.br · v1.4-beta
Design System · Painel LR
Showcase do estilo do dashboard administrativo. Inter + JetBrains Mono · canvas #0a0a0a dark-vibrant · accent dinâmico em 5 cores · radius 6–8px · grid 12 colunas · backdrop-filter no topbar. Tudo em um arquivo HTML standalone.
1. Tokens — Cores
var(--*) · CSS custom propertiesSuperfícies
Texto
Accent — paleta dinâmica (clique nos pills do topbar)
Semânticos (fixos · não trocam com accent)
Setores CMYK (intra-gestão)
2. Tipografia
Inter (display + body) · JetBrains Mono (labels/numerais)
--text-display-xl
Aa
4.5rem · 72px
--text-display
Painel LR
3rem · 48px
--text-h1
Cabeçalho H1
2rem · 32px
--text-h2
Seção H2
1.5rem · 24px
--text-h3
Subtítulo H3
1.25rem · 20px
--text-body
Corpo de texto padrão usado em parágrafos e listas.
0.9375rem · 15px
--text-sm
Texto pequeno · navegação · labels
0.875rem · 14px
--text-xs
JetBrains Mono · captions
0.8125rem · 13px
--text-caption
MONO LABEL CAPS
0.75rem · 12px
3. Espaçamento · Raio
grid 4px · arredondamento 4–12px--space-xxxs4px
--space-xxs8px
--space-xs12px
--space-sm16px
--space-md24px
--space-lg32px
--space-xl48px
--space-xxl64px
none0
sm4px
md6px
lg8px
xl12px
fullpill
4. Botões
.btn-primary · .btn-outline · .btn-ghost · .btn-danger5. Stat cards
borda topo colorida · numerais tnum · barra progresso
Clientes ativos
07
▲ +2 vs mês passado
OS abertas
12
3 com prazo essa semana
Faturamento mês
R$ 5.420
68% da meta
Meta R$ 8.000
R$ 2.580
▼ faltam 32%
6. Widgets · Cards
.widget · .widget--accent · grid 12-col7. Forms · inputs
--radius-md · border --hairline · focus accent8. Tags · Status · Alerts
pills mono uppercase · alerts border-left 3pxBackup semanal OK6 domínios snapshotados · 4 rotações mantidas.
Cron não registradoRollover de tarefas (1 3 * * *) aguarda registro no hPanel.
Sentinel canary detectou driftArquivo
_shared/canary modificado. Investigar.Accent picker ativoClique nas pílulas do topbar pra retingir tudo.
9. Modal · Dialog
tutorial · sector top-border · backdrop blurComo usar o painel
- 1. Use o accent picker pra trocar a cor de destaque global.
- 2. Sidebar exibe páginas e atalhos · clique nos chips do topbar.
- 3. Stat cards usam
--cinline pra cor por card. - 4. Widgets entram em grid 12-col ·
--spancontrola largura.
10. Tela de login
radial-gradient accent-soft · monograma LR
LR
Acesso
Painel administrativo · luizramos.com.br
bcrypt cost 12 · rate-limit 3/60s
11. Mockup viewport
browser-frame estilizado pra preview de telas12. Animações
tool-feel · 120-320ms · cubic-bezier(.4,0,.2,1) · respeita reduced-motionPrincípiosSnappy, sem bounce. Animação serve hierarquia e feedback — não decoração. Tudo desativa em
prefers-reduced-motion: reduce.