Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Retro

O desktop clássico, refeito com contraste de verdade e suporte a teclado.

Retro

O desktop clássico, refeito com contraste de verdade e suporte a teclado.

IBM Plex Sans

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Ousado
Fontes
IBM Plex Sans
Raio
controles 0px · superfícies 0px
Bordas e profundidade
bisel de quatro cores · sem desfoque · cantos retos
Movimento
40 / 80ms · linear

Como usar

import "@camaleo/styles/base.css";
import "@camaleo/styles/retro.css";

<StyleProvider styleName="retro">…</StyleProvider>

As fontes não vêm no pacote. O estilo pede IBM Plex Sans pelo nome, então qualquer carregador que registre essa família funciona: next/font (abaixo), um <link> para um serviço de fontes ou o seu próprio @font-face.

// app/layout.tsx
import { IBM_Plex_Sans } from "next/font/google";

const ibmplexsans = IBM_Plex_Sans({ subsets: ["latin"], variable: "--font-ibmplexsans" });

<html className={`${ibmplexsans.variable}`}>

Quando usar

Combina com

  • Produtos nostálgicos, jogos e ferramentas internas divertidas
  • Apps com cara de ferramenta: janelas, barras de ferramentas e listas

Pense duas vezes

  • Qualquer coisa que precise parecer atual
  • Produtos que precisam parecer macios ou premium

Claro e escuro

Os dois modos são desenhados, não invertidos, e passam pelas mesmas verificações de contraste. A cor da marca vem da barra de pré-visualização.

Relatório semanal

Enviado toda segunda às 9h.

Cota do mês
x
Rascunho
claro

Relatório semanal

Enviado toda segunda às 9h.

Cota do mês
x
Rascunho
escuro

Componentes em Retro

Componentes reais da biblioteca, em Retro, com o modo e a cor da marca da barra de pré-visualização.

Botão

Como está no seu documento. Ele sai na nota fiscal.

Campo
Lista suspensa
Caixa de seleção
Plano
Grupo de rádio
Interruptor
Controle deslizante
Campo numérico
Botão de alternância
Em revisãoNovoArquivado
Selo
ReceitaR$ 48.250+14,2%em relação a setembro
Estatística
Enviando nota-marco.pdf
x
Barra de progresso
Armazenamento64,2 de 100 GB
x
Medidor
CPERLFMS+3
Avatar
Como foi sua estadia?
Avaliação
Chips
Indicador giratório
Dica
Copiar
Ctrl+C
Colar
Ctrl+V
Buscar em todos os arquivos
Ctrl+Shift+F
Tecla

Manutenção no domingo

O login fica fora do ar de 2h00 às 2h15 (horário de Brasília) em 02/11. Seus dados não são afetados.

Alerta

Datas da viagem, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Calendário de intervalo

Loja Acme

Loja virtual · criada em 02/03/2025

Aparece nas notas fiscais e nos e-mails para clientes.

Abas
Finalizar compra3 itens · R$ 274,00
  1. Carrinho, concluída
  2. Entrega
  3. Pagamento
  4. Revisão
Indicador de etapas
FaturaSituaçãoValor
INV-4029PagaR$ 1.740,00
INV-4028PendenteR$ 6.402,50
INV-4027VencidaR$ 375,00
Tabela

Sanfona
Paginação

  1. Pedido feito

    Pedido nº 48920, 3 itens, R$ 214,90.

  2. Pagamento aprovado

    Pix recebido.

  3. Entregue

    Recebido pela portaria.

Linha do tempo

Ver todas as páginas de componente em Retro →

Tokens

Os valores que este estilo define, lidos de retro.css. Sobrescreva qualquer um deles num elemento pai para ajustar localmente.

Tipografia
--cml-font-body"IBM Plex Sans", ui-sans-serif, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayherdavar(--cml-font-body)
--cml-font-size0.875rem0.9375rem
--cml-font-weight-control400500
--cml-font-weight-display700600
Cor
--cml-surfacevar(--cml-face) = light-dark(#c0c0c0, #3c3c3c)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-face) = light-dark(#c0c0c0, #3c3c3c)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#000000, #f2f2f2)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#444444, #c4c4c4)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-sh) = light-dark(#808080, #1f1f1f)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#0a0a0a, #a0a0a0)light-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-800), var(--cml-brand-600))light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-800-fg), var(--cml-brand-600-fg))light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-800), var(--cml-brand-300))light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringherdavar(--cml-accent-text)
--cml-dangerlight-dark(#900000, #ff9b94)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-width0px1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlvar(--cml-raised)none
--cml-shadow-surfacevar(--cml-window)0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width2px2px
Densidade
--cml-control-height2rem2.25rem
--cml-field-height2.125rem2.375rem
--cml-surface-padding0.75rem1.5rem
--cml-gap0.4375rem0.5rem
Movimento
--cml-duration-fast40ms180ms
--cml-duration-base80ms280ms
--cml-ease-standardlinearcubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
Todas as 155 propriedades que este estilo define
--cml-font-body
"IBM Plex Sans", ui-sans-serif, sans-serif
--cml-font-size
0.875rem
--cml-font-size-control
0.875rem
--cml-font-size-control-sm
0.8125rem
--cml-font-size-control-lg
0.9375rem
--cml-font-size-field
0.875rem
--cml-font-size-label
0.875rem
--cml-font-size-help
0.8125rem
--cml-font-weight-control
400
--cml-font-weight-label
400
--cml-font-weight-display
700
--cml-font-weight-error
500
--cml-face
light-dark(#c0c0c0, #3c3c3c)
--cml-hi
light-dark(#ffffff, #8a8a8a)
--cml-lt
light-dark(#dfdfdf, #5a5a5a)
--cml-sh
light-dark(#808080, #1f1f1f)
--cml-dk
light-dark(#0a0a0a, #000000)
--cml-field-edge
light-dark(#8c8c8c, #767676)
--cml-well
light-dark(#ffffff, #141414)
--cml-dither
repeating-conic-gradient(light-dark(#ffffff, #5a5a5a) 0 25%, var(--cml-face) 0 50%) 0 0 / 2px 2px
--cml-raised
inset -1px -1px var(--cml-dk), inset 1px 1px var(--cml-hi), inset -2px -2px var(--cml-sh), inset 2px 2px var(--cml-lt)
--cml-window
inset -1px -1px var(--cml-dk), inset 1px 1px var(--cml-lt), inset -2px -2px var(--cml-sh), inset 2px 2px var(--cml-hi)
--cml-sunken
inset -1px -1px var(--cml-hi), inset 1px 1px var(--cml-dk), inset -2px -2px var(--cml-lt), inset 2px 2px var(--cml-sh)
--cml-field-bevel
inset -1px -1px var(--cml-hi), inset 1px 1px var(--cml-sh), inset -2px -2px var(--cml-field-edge), inset 2px 2px var(--cml-dk)
--cml-drop
2px 2px 0 rgb(0 0 0 / 0.35)
--cml-titlebar
linear-gradient(90deg, var(--cml-brand-900), var(--cml-brand-700))
--cml-titlebar-fg
var(--cml-brand-700-fg)
--cml-etched
light-dark(#808080, #7a7a7a)
--cml-etched-shadow
light-dark(#ffffff, #1f1f1f)
--cml-surface
var(--cml-face)
--cml-surface-raised
var(--cml-face)
--cml-fg
light-dark(#000000, #f2f2f2)
--cml-fg-secondary
light-dark(#222222, #dedede)
--cml-fg-muted
light-dark(#444444, #c4c4c4)
--cml-border
var(--cml-sh)
--cml-border-control
light-dark(#0a0a0a, #a0a0a0)
--cml-accent
light-dark(var(--cml-brand-800), var(--cml-brand-600))
--cml-accent-fg
light-dark(var(--cml-brand-800-fg), var(--cml-brand-600-fg))
--cml-accent-hover
var(--cml-accent)
--cml-accent-text
light-dark(var(--cml-brand-800), var(--cml-brand-300))
--cml-backdrop
light-dark(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.6))
--cml-danger
light-dark(#900000, #ff9b94)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#0a5c0a, #7ddc7d)
--cml-warning
light-dark(#6b4400, #ffd34d)
--cml-tone-soft
11%
--cml-tone-line
100%
--cml-item-highlight
var(--cml-accent)
--cml-item-highlight-fg
var(--cml-accent-fg)
--cml-item-check
var(--cml-fg)
--cml-disabled-opacity
0.55
--cml-border-width
0px
--cml-radius-control
0
--cml-radius-control-sm
0
--cml-radius-control-lg
0
--cml-radius-surface
0
--cml-radius-popover
0
--cml-radius-check
0
--cml-radius-radio
50%
--cml-radius-pill
0
--cml-radius-item
0
--cml-radius-field
0
--cml-shadow-control
var(--cml-raised)
--cml-shadow-control-active
var(--cml-sunken)
--cml-shadow-surface
var(--cml-window)
--cml-shadow-popover
var(--cml-window), var(--cml-drop)
--cml-focus-width
2px
--cml-focus-offset
1px
--cml-control-height
2rem
--cml-control-height-sm
1.75rem
--cml-control-height-lg
2.375rem
--cml-control-padding
0.875rem
--cml-control-padding-sm
0.625rem
--cml-control-padding-lg
1.25rem
--cml-surface-padding
0.75rem
--cml-gap
0.4375rem
--cml-button-solid-shadow
inset -1px -1px var(--cml-dk), inset 1px 1px color-mix(in oklab, var(--cml-accent), white 40%), inset -2px -2px color-mix(in oklab, var(--cml-accent), black 45%), inset 2px 2px color-mix(in oklab, var(--cml-accent), white 20%), 0 0 0 1px var(--cml-dk)
--cml-button-danger-shadow
inset -1px -1px var(--cml-dk), inset 1px 1px #e08080, inset -2px -2px #560000, inset 2px 2px #c23a3a, 0 0 0 1px var(--cml-dk)
--cml-button-outline-bg
var(--cml-face)
--cml-button-outline-border
transparent
--cml-button-outline-shadow
var(--cml-raised)
--cml-button-disabled-shadow
var(--cml-raised)
--cml-toggle-pressed-bg
var(--cml-face)
--cml-toggle-pressed-fg
var(--cml-fg)
--cml-toggle-pressed-shadow
var(--cml-sunken)
--cml-field-height
2.125rem
--cml-field-padding
0.5rem
--cml-field-bg
var(--cml-well)
--cml-field-shadow
var(--cml-field-bevel)
--cml-field-border-width
0px
--cml-field-focus-halo
0 0 0 0 transparent
--cml-field-gap
0.3125rem
--cml-check-size
1rem
--cml-check-border-width
0px
--cml-check-shadow
var(--cml-field-bevel)
--cml-check-on-border
transparent
--cml-check-on-shadow
var(--cml-field-bevel)
--cml-switch-width
2.5rem
--cml-switch-height
1.25rem
--cml-switch-border
0px
--cml-switch-pad
2px
--cml-switch-knob
16px
--cml-switch-knob-on
16px
--cml-switch-track
var(--cml-well)
--cml-switch-on-shadow
var(--cml-field-bevel)
--cml-switch-knob-bg
var(--cml-face)
--cml-switch-knob-shadow
var(--cml-raised)
--cml-switch-knob-on-bg
var(--cml-face)
--cml-switch-knob-on-shadow
var(--cml-raised)
--cml-slider-track-h
8px
--cml-slider-track
var(--cml-well)
--cml-slider-track-border
0px
--cml-slider-fill-inset
2px
--cml-slider-thumb-w
0.75rem
--cml-slider-thumb-h
1.375rem
--cml-slider-thumb-bg
var(--cml-face)
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
var(--cml-raised)
--cml-number-padding
2px
--cml-number-gap
2px
--cml-number-weight
500
--cml-number-btn-size
1.75rem
--cml-number-btn-bg
var(--cml-face)
--cml-number-btn-shadow
var(--cml-raised)
--cml-number-divider
0
--cml-select-trigger-shadow
var(--cml-field-bevel)
--cml-popover-bg
var(--cml-face)
--cml-popover-border
transparent
--cml-popover-padding
3px
--cml-item-height
1.75rem
--cml-item-padding
0.375rem
--cml-dialog-border
transparent
--cml-tabs-gap
0
--cml-tab-active-shadow
none
--cml-card-border
transparent
--cml-card-shadow
var(--cml-window)
--cml-avatar-bg
color-mix(in oklab, var(--cml-accent) 22%, var(--cml-well))
--cml-avatar-fg
light-dark(var(--cml-brand-900), var(--cml-brand-200))
--cml-avatar-ring
var(--cml-face)
--cml-skeleton
var(--cml-face)
--cml-tooltip-bg
light-dark(#ffffe1, #4a4a2e)
--cml-tooltip-fg
light-dark(#000000, #f5f5dc)
--cml-scrollbar-size
16px
--cml-scrollbar-track
var(--cml-face)
--cml-scrollbar-track-shadow
none
--cml-scrollbar-thumb
var(--cml-face)
--cml-scrollbar-thumb-shadow
var(--cml-raised)
--cml-scrollbar-idle-opacity
1
--cml-duration-fast
40ms
--cml-duration-base
80ms
--cml-ease-standard
linear
--cml-motion-distance
0px
--cml-motion-scale
1
--cml-press-translate
1px
--cml-spinner-ease
steps(2)

Mesma família

Outros estilos da família Ousado. Comparar lado a lado →

NeubrutalismContornos grossos de tinta, sombras duras e cores berrantes. Orgulhosamente cru.Retro pixelBordas 8-bit: contornos de pixel de 4px, cantos em degrau, letras grossas.Y2KPlástico e cromo da virada do milênio: botões de gelatina brilhantes e listras Aqua.
Esta página foi útil? · Editar esta página no GitHub