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

Retro pixel

Bordas 8-bit: contornos de pixel de 4px, cantos em degrau, letras grossas.

Retro pixel

Bordas 8-bit: contornos de pixel de 4px, cantos em degrau, letras grossas.

Pixelify Sans + Press Start 2P

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Ousado
Fontes
Pixelify Sans + Press Start 2P
Raio
controles 0px · superfícies 0px
Bordas e profundidade
bordas de pixel de 4px · sombreamento em degrau
Movimento
100 / 160ms · steps(3, end)

Como usar

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

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

As fontes não vêm no pacote. O estilo pede Pixelify Sans + Press Start 2P 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 { Pixelify_Sans, Press_Start_2P } from "next/font/google";

const pixelifysans = Pixelify_Sans({ subsets: ["latin"], variable: "--font-pixelifysans" });
const pressstart2p = Press_Start_2P({ subsets: ["latin"], weight: "400", variable: "--font-pressstart2p" });

<html className={`${pixelifysans.variable} ${pressstart2p.variable}`}>

Quando usar

Combina com

  • Jogos, hackathons e lançamentos divertidos
  • Telas curtas e diretas: placares, menus, cadastros

Pense duas vezes

  • Leitura longa
  • Títulos com acento: a Press Start 2P só cobre o latim básico, então os acentos caem na Pixelify Sans

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 pixel

Componentes reais da biblioteca, em Retro pixel, 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 pixel →

Tokens

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

Tipografia
--cml-font-body"Pixelify Sans", ui-monospace, monospace"Inter", system-ui, sans-serif
--cml-font-display"Press Start 2P", "Pixelify Sans", ui-monospace, monospacevar(--cml-font-body)
--cml-font-size1rem0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display400600
Cor
--cml-surfacelight-dark(#fbfaf5, #141414)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #1c1c1f)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#17171c, #f0f0f0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#4a4a55, #c2c2c2)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-fg) = light-dark(#17171c, #f0f0f0)light-dark(#e4e4e7, #27272a)
--cml-border-controlvar(--cml-fg) = light-dark(#17171c, #f0f0f0)light-dark(#8e8e98, #71717a)
--cml-accentherdalight-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fgherdalight-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textherdalight-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringherdavar(--cml-accent-text)
--cml-dangerlight-dark(#b0231a, #e76e55)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-widthvar(--cml-pixel) = 4px1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlinset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 var(--cml-shade)none
--cml-shadow-surface6px 6px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-widthherda2px
Densidade
--cml-control-height2.625rem2.25rem
--cml-field-height2.75rem2.375rem
--cml-surface-paddingherda1.5rem
--cml-gap0.75rem0.5rem
Movimento
--cml-duration-fast100ms180ms
--cml-duration-base160ms280ms
--cml-ease-standardsteps(3, end)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateherda0px
Todas as 125 propriedades que este estilo define
--cml-font-body
"Pixelify Sans", ui-monospace, monospace
--cml-font-display
"Press Start 2P", "Pixelify Sans", ui-monospace, monospace
--cml-font-size
1rem
--cml-font-size-control
1rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1.125rem
--cml-font-size-field
1.125rem
--cml-font-size-label
1rem
--cml-font-size-help
0.9375rem
--cml-font-weight-control
600
--cml-font-weight-label
700
--cml-font-weight-display
400
--cml-font-weight-error
600
--cml-surface
light-dark(#fbfaf5, #141414)
--cml-surface-raised
light-dark(#ffffff, #1c1c1f)
--cml-fg
light-dark(#17171c, #f0f0f0)
--cml-fg-secondary
light-dark(#4a4a55, #c2c2c2)
--cml-fg-muted
light-dark(#4a4a55, #c2c2c2)
--cml-border
var(--cml-fg)
--cml-border-control
var(--cml-fg)
--cml-backdrop
light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.75))
--cml-item-highlight
var(--cml-fg)
--cml-disabled-opacity
0.55
--cml-pixel
4px
--cml-shade
light-dark(#c9ccd8, #3a3a44)
--cml-sunken
light-dark(#dcdde4, #2b2b31)
--cml-accent-shade
color-mix(in oklab, var(--cml-accent), black 30%)
--cml-accent-light
color-mix(in oklab, var(--cml-accent), white 18%)
--cml-border-width
var(--cml-pixel)
--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
0
--cml-radius-pill
0
--cml-shadow-control
inset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 var(--cml-shade)
--cml-shadow-control-active
inset var(--cml-pixel) var(--cml-pixel) 0 var(--cml-shade)
--cml-shadow-surface
6px 6px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))
--cml-shadow-popover
4px 4px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))
--cml-focus-offset
3px
--cml-control-height
2.625rem
--cml-control-height-sm
2.125rem
--cml-control-height-lg
3.125rem
--cml-control-padding
1.125rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.5rem
--cml-gap
0.75rem
--cml-button-solid-shadow
inset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 var(--cml-accent-shade), inset var(--cml-pixel) var(--cml-pixel) 0 var(--cml-accent-light)
--cml-button-outline-border
var(--cml-fg)
--cml-button-outline-shadow
var(--cml-shadow-control)
--cml-button-ghost-decoration
underline 2px
--cml-toggle-pressed-shadow
inset var(--cml-pixel) var(--cml-pixel) 0 rgb(0 0 0 / 0.6)
--cml-field-height
2.75rem
--cml-field-padding
0.875rem
--cml-field-border-width
var(--cml-pixel)
--cml-field-shadow
inset var(--cml-pixel) var(--cml-pixel) 0 var(--cml-sunken)
--cml-field-focus-halo
0 0 0 0 transparent
--cml-field-gap
0.4375rem
--cml-check-size
1.5rem
--cml-check-border-width
3px
--cml-check-shadow
inset 3px 3px 0 var(--cml-sunken)
--cml-check-on-border
var(--cml-fg)
--cml-check-on-shadow
inset -3px -3px 0 var(--cml-accent-shade)
--cml-switch-width
3.25rem
--cml-switch-height
1.75rem
--cml-switch-border
3px
--cml-switch-knob
16px
--cml-switch-knob-on
16px
--cml-switch-knob-bg
var(--cml-fg)
--cml-switch-on-shadow
inset -3px -3px 0 var(--cml-accent-shade)
--cml-switch-knob-on-bg
#ffffff
--cml-slider-track-h
14px
--cml-slider-track
var(--cml-surface-raised)
--cml-slider-track-border
3px
--cml-slider-fill-image
repeating-linear-gradient(90deg, transparent 0 6px, var(--cml-accent-shade) 6px 8px)
--cml-slider-thumb-w
1rem
--cml-slider-thumb-h
1.75rem
--cml-slider-thumb-bg
var(--cml-fg)
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
inset 3px 3px 0 color-mix(in oklab, var(--cml-fg), white 30%)
--cml-number-weight
700
--cml-number-btn-size
2.5rem
--cml-number-btn-bg
var(--cml-surface-raised)
--cml-number-btn-shadow
var(--cml-shadow-control)
--cml-number-divider
var(--cml-pixel) solid var(--cml-fg)
--cml-select-trigger-shadow
var(--cml-shadow-control)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
var(--cml-fg)
--cml-popover-border-width
var(--cml-pixel)
--cml-item-highlight-fg
var(--cml-surface-raised)
--cml-radius-item
0
--cml-dialog-border
var(--cml-fg)
--cml-tabs-list-border
var(--cml-fg)
--cml-tab-active-bg
var(--cml-fg)
--cml-tab-active-fg
var(--cml-surface)
--cml-tab-active-shadow
none
--cml-duration-fast
100ms
--cml-duration-base
160ms
--cml-ease-standard
steps(3, end)
--cml-motion-scale
1
--cml-spinner-ease
steps(8)
--cml-success
light-dark(#2e6b14, #92cc41)
--cml-warning
light-dark(#7a5a00, #f7d51d)
--cml-danger
light-dark(#b0231a, #e76e55)
--cml-fill-info
#7ec2f5
--cml-fill-success
#92cc41
--cml-fill-warning
#f7d51d
--cml-fill-danger
#e76e55
--cml-ink
#17171c
--cml-card-border
var(--cml-fg)
--cml-card-shadow
6px 6px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))
--cml-avatar-bg
color-mix(in oklab, var(--cml-accent), #ffffff 65%)
--cml-avatar-fg
var(--cml-ink)
--cml-skeleton
var(--cml-sunken)
--cml-accordion-chevron
none
--cml-accordion-plus
inline-block
--cml-menu-icons
none
--cml-scrollbar-size
16px
--cml-scrollbar-track
var(--cml-sunken)
--cml-scrollbar-track-shadow
inset 0 0 0 3px var(--cml-fg)
--cml-scrollbar-thumb
var(--cml-fg)
--cml-scrollbar-idle-opacity
1
--cml-button-danger-shadow
inset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 color-mix(in oklab, var(--cml-danger), black 30%), inset var(--cml-pixel) var(--cml-pixel) 0 color-mix(in oklab, var(--cml-danger), white 18%)

Mesma família

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

NeubrutalismContornos grossos de tinta, sombras duras e cores berrantes. Orgulhosamente cru.RetroO desktop clássico, refeito com contraste de verdade e suporte a teclado.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