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

Minimal

Discreto e neutro. Sai da frente do seu conteúdo.

Minimal

Discreto e neutro. Sai da frente do seu conteúdo.

Inter

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Tipográfico
Fontes
Inter
Raio
controles 8px · superfícies 12px
Bordas e profundidade
bordas de 1px · sombra suave nas superfícies
Movimento
180 / 280ms

Como usar

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

<StyleProvider>…</StyleProvider>

O minimal é o padrão: o base.css já o contém, então não há arquivo extra. Um elemento sem data-style aparece em minimal.

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

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

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

Quando usar

Combina com

  • Dashboards de SaaS, painéis de administração e ferramentas internas
  • Produtos que precisam envelhecer bem sem redesenho
  • Uma base neutra para o seu próprio estilo: todo token parte dele

Pense duas vezes

  • Marcas que precisam de um visual marcante e reconhecível
  • Landing pages que precisam chamar atenção no primeiro olhar

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 Minimal

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

Tokens

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

Tipografia
--cml-font-body"Inter", system-ui, sans-serif
--cml-font-displayvar(--cml-font-body) = "Inter", system-ui, sans-serif
--cml-font-size0.9375rem
--cml-font-weight-control500
--cml-font-weight-display600
Cor
--cml-surfacelight-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #18181b)
--cml-fglight-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringvar(--cml-accent-text)
--cml-dangerlight-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-width1px
--cml-radius-control8px
--cml-radius-surface12px
--cml-radius-popover10px
--cml-shadow-controlnone
--cml-shadow-surface0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width2px
Densidade
--cml-control-height2.25rem
--cml-field-height2.375rem
--cml-surface-padding1.5rem
--cml-gap0.5rem
Movimento
--cml-duration-fast180ms
--cml-duration-base280ms
--cml-ease-standardcubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate0px
Todos os 91 tokens padrão
--cml-font-body
"Inter", system-ui, sans-serif
--cml-font-display
var(--cml-font-body)
--cml-font-control
var(--cml-font-body)
--cml-font-field
var(--cml-font-body)
--cml-font-label
var(--cml-font-body)
--cml-font-size
0.9375rem
--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
500
--cml-font-weight-label
500
--cml-font-weight-display
600
--cml-text-transform-control
none
--cml-text-transform-label
none
--cml-letter-spacing-control
normal
--cml-letter-spacing-label
normal
--cml-surface
light-dark(#ffffff, #09090b)
--cml-surface-raised
light-dark(#ffffff, #18181b)
--cml-fg
light-dark(#09090b, #fafafa)
--cml-fg-secondary
light-dark(#52525b, #d4d4d8)
--cml-fg-muted
light-dark(#71717a, #a1a1aa)
--cml-border
light-dark(#e4e4e7, #27272a)
--cml-border-control
light-dark(#8e8e98, #71717a)
--cml-accent
light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fg
light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-hover
light-dark(var(--cml-brand-600-hover), var(--cml-brand-400-hover))
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ring
var(--cml-accent-text)
--cml-backdrop
light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.6))
--cml-danger
light-dark(#b42318, #f97066)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#15803d, #4ade80)
--cml-warning
light-dark(#854d0e, #facc15)
--cml-info
var(--cml-accent-text)
--cml-tone-soft
7%
--cml-tone-line
28%
--cml-item-highlight
color-mix(in oklab, var(--cml-fg) 6%, transparent)
--cml-border-subtle
color-mix(in oklab, var(--cml-border) 70%, transparent)
--cml-item-hover
var(--cml-item-highlight)
--cml-surface-subtle
color-mix(in oklab, var(--cml-fg) 3%, var(--cml-surface))
--cml-disabled-opacity
0.45
--cml-border-width
1px
--cml-radius-control
8px
--cml-radius-control-sm
7px
--cml-radius-control-lg
10px
--cml-radius-surface
12px
--cml-radius-popover
10px
--cml-radius-check
5px
--cml-radius-pill
999px
--cml-shadow-control
none
--cml-shadow-control-active
none
--cml-shadow-surface
0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-shadow-popover
0 12px 32px -12px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.04)
--cml-focus-width
2px
--cml-focus-offset
2px
--cml-field-height
2.375rem
--cml-field-padding
0.75rem
--cml-field-bg
var(--cml-surface-raised)
--cml-field-shadow
0 1px 2px rgb(0 0 0 / 0.04)
--cml-field-border-width
1px
--cml-check-size
1.125rem
--cml-check-border-width
1.5px
--cml-switch-width
2.25rem
--cml-switch-height
1.25rem
--cml-switch-border
1.5px
--cml-switch-pad
3px
--cml-switch-knob
10px
--cml-switch-knob-on
14px
--cml-slider-track-h
6px
--cml-slider-thumb-w
1.125rem
--cml-slider-thumb-h
1.125rem
--cml-item-height
2.125rem
--cml-space
0.25rem
--cml-control-height
2.25rem
--cml-control-height-sm
1.875rem
--cml-control-height-lg
2.75rem
--cml-control-padding
0.875rem
--cml-control-padding-sm
0.625rem
--cml-control-padding-lg
1.25rem
--cml-surface-padding
1.5rem
--cml-gap
0.5rem
--cml-duration-fast
180ms
--cml-duration-base
280ms
--cml-motion-duration
var(--cml-duration-fast)
--cml-ease-standard
cubic-bezier(0.22, 1, 0.36, 1)
--cml-motion-distance
8px
--cml-motion-scale
0.98
--cml-press-translate
0px

Mesma família

Outros estilos da família Tipográfico. Comparar lado a lado →

SwissGrade, tipografia e mais nada. A hierarquia vem do tamanho e do peso.EditorialLê-se como uma revista. Texto serifado, títulos de display, fios finos.
Esta página foi útil? · Editar esta página no GitHub