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

Y2K

Plástico e cromo da virada do milênio: botões de gelatina brilhantes e listras Aqua.

Y2K

Plástico e cromo da virada do milênio: botões de gelatina brilhantes e listras Aqua.

Exo 2

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Ousado
Fontes
Exo 2
Raio
controles em pílula · superfícies 20px
Bordas e profundidade
molduras cromadas · brilho · sombra suave
Movimento
160 / 280ms

Como usar

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

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

As fontes não vêm no pacote. O estilo pede Exo 2 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 { Exo_2 } from "next/font/google";

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

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

Quando usar

Combina com

  • Marcas de música, moda e nostalgia
  • Páginas de campanha e edições limitadas

Pense duas vezes

  • Produtos B2B sóbrios
  • Telas com muitos dados: molduras e listras disputam atenção com os dados

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 Y2K

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

Tokens

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

Tipografia
--cml-font-body"Exo 2", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-display"Exo 2", system-ui, sans-serifvar(--cml-font-body)
--cml-font-size0.875rem0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display700600
Cor
--cml-surfacelight-dark(#e2e8f2, #0a1128)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #121b3a)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#0b1530, #eef2ff)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#4a5672, #a0abc9)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-y2k-hair) = light-dark(#e3e8f0, #26304f)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#6b7896, #7884a6)light-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-600), var(--cml-brand-500))light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-600-fg), var(--cml-brand-500-fg))light-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(#b42318, #f97066)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-widthherda1px
--cml-radius-control999px8px
--cml-radius-surface20px12px
--cml-radius-popover18px10px
--cml-shadow-controlinset 0 1px 0 var(--cml-y2k-gleam), 0 1px 2px light-dark(rgb(11 21 48 / 0.14), rgb(0 0 0 / 0.4))none
--cml-shadow-surface0 18px 40px -16px light-dark(rgb(11 21 48 / 0.6), rgb(0 0 0 / 0.75))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.25rem2.25rem
--cml-field-height2.375rem2.375rem
--cml-surface-paddingherda1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast160ms180ms
--cml-duration-baseherda280ms
--cml-ease-standardherdacubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
Todas as 152 propriedades que este estilo define
--cml-y2k-chrome-1
light-dark(#ffffff, #3d4a6e)
--cml-y2k-chrome-2
light-dark(#f0f3f8, #2c3758)
--cml-y2k-chrome-3
light-dark(#dfe5ef, #1f2848)
--cml-y2k-chrome-4
light-dark(#eef1f7, #2a3555)
--cml-y2k-chrome
linear-gradient(180deg, var(--cml-y2k-chrome-1) 0%, var(--cml-y2k-chrome-2) 48%, var(--cml-y2k-chrome-3) 52%, var(--cml-y2k-chrome-4) 100%)
--cml-y2k-chrome-line
light-dark(#7f8aa6, #6e7a9c)
--cml-y2k-chrome-soft-line
light-dark(#a9b4c8, #4a5577)
--cml-y2k-gleam
light-dark(#ffffff, rgb(255 255 255 / 0.16))
--cml-y2k-frame
linear-gradient(180deg, light-dark(#b8c2d3, #6a7699) 0%, light-dark(#8f9bb3, #3c4769) 42%, light-dark(#eef1f6, #7c88aa) 56%, light-dark(#7d89a3, #2e3858) 100%)
--cml-y2k-fill
linear-gradient(var(--cml-surface-raised), var(--cml-surface-raised))
--cml-y2k-recess
linear-gradient(180deg, light-dark(#cfd7e4, #070c1e), light-dark(#e9edf4, #131b38))
--cml-y2k-recess-line
light-dark(#8f9bb3, #4a5577)
--cml-y2k-recess-shadow
inset 0 1px 2px light-dark(rgb(11 21 48 / 0.22), rgb(0 0 0 / 0.55)), 0 1px 0 light-dark(#ffffff, rgb(255 255 255 / 0.05))
--cml-y2k-bead
radial-gradient(circle at 38% 30%, #ffffff 0 16%, light-dark(#e3e8f1, #c9d1e2) 48%, light-dark(#9fabc2, #6f7c9c) 100%)
--cml-y2k-rim
color-mix(in oklab, var(--cml-accent) 72%, #000000)
--cml-y2k-danger-rim
color-mix(in oklab, var(--cml-danger) 72%, #000000)
--cml-y2k-glow
radial-gradient(50% 100% at 50% 100%, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0))
--cml-y2k-shine
linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.2))
--cml-y2k-gel
linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 55%)
--cml-y2k-shade
light-dark(rgb(11 21 48 / 0.2), rgb(0 0 0 / 0.45))
--cml-y2k-pressed
inset 0 2px 4px rgb(0 0 0 / 0.25)
--cml-y2k-iris
linear-gradient(90deg, light-dark(#9be7ff, #3aa7cf), light-dark(#c4b5fd, #8b7be0) 35%, light-dark(#fbcfe8, #c779a8) 65%, light-dark(#fde68a, #c9a54a))
--cml-y2k-iris-soft
linear-gradient(100deg, light-dark(#d4f1ff, #17385a) 0%, light-dark(#e2dbff, #2c2a62) 38%, light-dark(#ffdcef, #4b2550) 68%, light-dark(#fff0c9, #4a3a1c) 100%)
--cml-y2k-ink-section
light-dark(#3a4766, #b9c2dc)
--cml-y2k-hair
light-dark(#e3e8f0, #26304f)
--cml-y2k-zebra
light-dark(#f4f6fb, #172042)
--cml-y2k-backdrop
repeating-linear-gradient(180deg, light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.035)) 0 2px, rgb(255 255 255 / 0) 2px 4px), radial-gradient(ellipse 60% 45% at 88% 0%, light-dark(rgb(255 255 255 / 0), rgb(124 92 255 / 0.14)), rgb(124 92 255 / 0) 70%), linear-gradient(180deg, light-dark(#e7ecf5, #0c1430), light-dark(#dde4f0, #070c20))
--cml-font-body
"Exo 2", system-ui, sans-serif
--cml-font-display
"Exo 2", system-ui, 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.8125rem
--cml-font-size-help
0.8125rem
--cml-font-weight-control
600
--cml-font-weight-label
600
--cml-font-weight-display
700
--cml-font-weight-error
600
--cml-letter-spacing-control
0.01em
--cml-surface
light-dark(#e2e8f2, #0a1128)
--cml-surface-raised
light-dark(#ffffff, #121b3a)
--cml-fg
light-dark(#0b1530, #eef2ff)
--cml-fg-secondary
light-dark(#2f3b57, #c3cbe2)
--cml-fg-muted
light-dark(#4a5672, #a0abc9)
--cml-border
var(--cml-y2k-hair)
--cml-border-control
light-dark(#6b7896, #7884a6)
--cml-accent
light-dark(var(--cml-brand-600), var(--cml-brand-500))
--cml-accent-fg
light-dark(var(--cml-brand-600-fg), var(--cml-brand-500-fg))
--cml-accent-hover
light-dark(var(--cml-brand-600-hover), var(--cml-brand-500-hover))
--cml-backdrop
light-dark(rgb(20 32 72 / 0.42), rgb(2 5 18 / 0.66))
--cml-item-highlight
light-dark(rgb(11 21 48 / 0.06), rgb(255 255 255 / 0.08))
--cml-danger
light-dark(#b42318, #f97066)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#166534, #4ade80)
--cml-warning
light-dark(#854d0e, #facc15)
--cml-disabled-opacity
0.5
--cml-radius-control
999px
--cml-radius-control-sm
999px
--cml-radius-control-lg
999px
--cml-radius-surface
20px
--cml-radius-popover
18px
--cml-radius-check
7px
--cml-radius-item
999px
--cml-radius-field
999px
--cml-shadow-control
inset 0 1px 0 var(--cml-y2k-gleam), 0 1px 2px light-dark(rgb(11 21 48 / 0.14), rgb(0 0 0 / 0.4))
--cml-shadow-control-active
inset 0 2px 3px light-dark(rgb(11 21 48 / 0.2), rgb(0 0 0 / 0.45))
--cml-shadow-surface
0 18px 40px -16px light-dark(rgb(11 21 48 / 0.6), rgb(0 0 0 / 0.75))
--cml-shadow-popover
0 10px 24px -12px light-dark(rgb(11 21 48 / 0.4), rgb(0 0 0 / 0.7)), 0 1px 2px light-dark(rgb(11 21 48 / 0.08), rgb(0 0 0 / 0.3))
--cml-control-height
2.25rem
--cml-control-height-sm
1.875rem
--cml-control-height-lg
2.75rem
--cml-control-padding
1rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.375rem
--cml-item-height
2rem
--cml-duration-fast
160ms
--cml-motion-scale
0.96
--cml-press-translate
1px
--cml-button-solid-shadow
inset 0 -1px 0 rgb(255 255 255 / 0.22), 0 1px 1px var(--cml-y2k-shade), 0 3px 8px -3px color-mix(in srgb, var(--cml-accent) 60%, transparent)
--cml-button-danger-shadow
inset 0 -1px 0 rgb(255 255 255 / 0.22), 0 1px 1px var(--cml-y2k-shade), 0 3px 8px -3px color-mix(in srgb, var(--cml-danger) 55%, transparent)
--cml-button-outline-bg
var(--cml-y2k-chrome-2)
--cml-button-outline-border
var(--cml-y2k-chrome-line)
--cml-button-outline-shadow
var(--cml-shadow-control)
--cml-toggle-pressed-bg
var(--cml-accent)
--cml-toggle-pressed-fg
var(--cml-accent-fg)
--cml-toggle-pressed-shadow
var(--cml-button-solid-shadow)
--cml-field-height
2.375rem
--cml-field-padding
1rem
--cml-field-bg
light-dark(#ffffff, #0a1230)
--cml-field-shadow
inset 0 2px 3px light-dark(rgb(11 21 48 / 0.1), rgb(0 0 0 / 0.4)), 0 1px 0 light-dark(#ffffff, rgb(255 255 255 / 0.05))
--cml-field-focus-halo
0 0 0 6px color-mix(in srgb, var(--cml-accent) 14%, transparent)
--cml-check-size
1.25rem
--cml-check-border-width
1.5px
--cml-check-shadow
inset 0 1px 0 var(--cml-y2k-gleam), 0 1px 1px light-dark(rgb(11 21 48 / 0.12), rgb(0 0 0 / 0.4))
--cml-check-on-image
var(--cml-y2k-gel)
--cml-check-on-border
var(--cml-y2k-rim)
--cml-switch-width
2.625rem
--cml-switch-height
1.5rem
--cml-switch-border
1.5px
--cml-switch-pad
2px
--cml-switch-knob
18px
--cml-switch-knob-on
18px
--cml-switch-track
var(--cml-y2k-chrome-3)
--cml-switch-on-shadow
inset 0 1px 2px rgb(0 0 0 / 0.2)
--cml-switch-knob-bg
light-dark(#e3e8f1, #c9d1e2)
--cml-switch-knob-on-bg
light-dark(#e3e8f1, #c9d1e2)
--cml-switch-knob-shadow
0 0 0 1px light-dark(#5d6a88, #0a1128), 0 1px 2px var(--cml-y2k-shade)
--cml-switch-knob-on-shadow
0 0 0 1px var(--cml-y2k-rim), 0 1px 2px var(--cml-y2k-shade)
--cml-slider-track-h
10px
--cml-slider-track
var(--cml-y2k-chrome-3)
--cml-slider-fill-inset
-1px
--cml-slider-fill-image
linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 60%)
--cml-slider-thumb-w
1.375rem
--cml-slider-thumb-h
1.375rem
--cml-slider-thumb-bg
light-dark(#e3e8f1, #c9d1e2)
--cml-slider-thumb-border
1.5px solid light-dark(#4f5b78, #0a1128)
--cml-slider-thumb-shadow
0 1px 3px light-dark(rgb(11 21 48 / 0.32), rgb(0 0 0 / 0.6))
--cml-number-weight
600
--cml-number-btn-size
2.5rem
--cml-number-btn-bg
var(--cml-y2k-chrome-2)
--cml-number-divider
1px solid var(--cml-y2k-chrome-soft-line)
--cml-select-trigger-shadow
var(--cml-shadow-control)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
transparent
--cml-popover-border-width
2px
--cml-popover-padding
5px
--cml-item-padding
0.75rem
--cml-item-highlight-fg
var(--cml-accent-fg)
--cml-dialog-border
transparent
--cml-tabs-gap
2px
--cml-tabs-list-bg
var(--cml-y2k-chrome-3)
--cml-tabs-list-border
var(--cml-y2k-recess-line)
--cml-tabs-list-shadow
var(--cml-y2k-recess-shadow)
--cml-tabs-list-padding
3px
--cml-tabs-list-radius
999px
--cml-tab-radius
999px
--cml-tab-active-fg
var(--cml-fg)
--cml-tab-active-shadow
inset 0 0 0 1px var(--cml-y2k-chrome-line), 0 1px 3px light-dark(rgb(11 21 48 / 0.28), rgb(0 0 0 / 0.5))
--cml-card-border
transparent
--cml-card-shadow
0 1px 2px light-dark(rgb(11 21 48 / 0.08), rgb(0 0 0 / 0.3)), 0 14px 30px -18px light-dark(rgb(11 21 48 / 0.35), rgb(0 0 0 / 0.7))
--cml-avatar-ring
var(--cml-surface-raised)
--cml-skeleton
light-dark(#dfe5ef, #1e2747)
--cml-tooltip-bg
light-dark(#121c3a, #c3cbdc)
--cml-tooltip-fg
light-dark(#f4f7ff, #0b1530)
--cml-scrollbar-size
12px
--cml-scrollbar-track
var(--cml-y2k-chrome-3)
--cml-scrollbar-track-shadow
inset 0 0 0 1px var(--cml-y2k-recess-line), inset 0 1px 2px light-dark(rgb(11 21 48 / 0.22), rgb(0 0 0 / 0.55))
--cml-scrollbar-thumb
var(--cml-accent)
--cml-scrollbar-thumb-shadow
inset 0 0 0 1px var(--cml-y2k-rim)
--cml-scrollbar-idle-opacity
1

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.Retro pixelBordas 8-bit: contornos de pixel de 4px, cantos em degrau, letras grossas.
Esta página foi útil? · Editar esta página no GitHub