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

Swiss

Grade, tipografia e mais nada. A hierarquia vem do tamanho e do peso.

Swiss

Grade, tipografia e mais nada. A hierarquia vem do tamanho e do peso.

Archivo

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Tipográfico
Fontes
Archivo
Raio
controles 0px · superfícies 0px
Bordas e profundidade
fios de tinta de 1px · cantos retos · sem sombra
Movimento
100 / 160ms

Como usar

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

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

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

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

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

Quando usar

Combina com

  • Produtos com muitos dados: relatórios, tabelas, analytics
  • Ferramentas de publicação, design e arquitetura
  • Marcas que querem a cor da marca como único sinal

Pense duas vezes

  • Apps de consumo divertidos
  • Interfaces em que as pessoas dependem de profundidade para ver o que é clicável

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 Swiss

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

Tokens

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

Tipografia
--cml-font-body"Archivo", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayherdavar(--cml-font-body)
--cml-font-sizeherda0.9375rem
--cml-font-weight-controlherda500
--cml-font-weight-display700600
Cor
--cml-surfacelight-dark(#ffffff, #000000)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-surface) = light-dark(#ffffff, #000000)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#000000, #ffffff)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#5c5c5c, #a3a3a3)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-fg) = light-dark(#000000, #ffffff)light-dark(#e4e4e7, #27272a)
--cml-border-controlvar(--cml-fg) = light-dark(#000000, #ffffff)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-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringvar(--cml-fg) = light-dark(#000000, #ffffff)var(--cml-accent-text)
--cml-dangerherdalight-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-widthherda1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlnonenone
--cml-shadow-surfacenone0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width2px2px
Densidade
--cml-control-height2.5rem2.25rem
--cml-field-height2.5rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast100ms180ms
--cml-duration-base160ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
Todas as 112 propriedades que este estilo define
--cml-font-body
"Archivo", system-ui, sans-serif
--cml-font-size-control
0.9375rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1.0625rem
--cml-font-size-field
0.9375rem
--cml-font-size-label
0.875rem
--cml-font-weight-display
700
--cml-font-weight-error
500
--cml-surface
light-dark(#ffffff, #000000)
--cml-surface-raised
var(--cml-surface)
--cml-fg
light-dark(#000000, #ffffff)
--cml-fg-secondary
light-dark(#262626, #dcdcdc)
--cml-fg-muted
light-dark(#5c5c5c, #a3a3a3)
--cml-border
var(--cml-fg)
--cml-border-control
var(--cml-fg)
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ring
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-item-highlight-fg
var(--cml-surface)
--cml-tone-soft
9%
--cml-ink
var(--cml-fg)
--cml-quiet
light-dark(#404040, #c7c7c7)
--cml-rule
light-dark(#d4d4d4, #3d3d3d)
--cml-soft
light-dark(#ebebeb, #262626)
--cml-hint
light-dark(#8c8c8c, #808080)
--cml-disabled-bg
light-dark(#ebebeb, #1f1f1f)
--cml-disabled-fg
light-dark(#8a8a8a, #808080)
--cml-disabled-border
light-dark(#b3b3b3, #5c5c5c)
--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-pill
0
--cml-radius-radio
50%
--cml-shadow-control
none
--cml-shadow-control-active
none
--cml-shadow-surface
none
--cml-shadow-popover
none
--cml-focus-width
2px
--cml-focus-offset
2px
--cml-control-height
2.5rem
--cml-control-height-sm
2rem
--cml-control-height-lg
3rem
--cml-control-padding
1rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.375rem
--cml-surface-padding
1.25rem
--cml-button-solid-shadow
none
--cml-button-outline-border
var(--cml-ink)
--cml-button-outline-shadow
none
--cml-button-danger-shadow
none
--cml-button-disabled-shadow
none
--cml-field-height
2.5rem
--cml-field-padding
0.75rem
--cml-field-shadow
0 0 0 0 transparent
--cml-field-focus-halo
0 0 0 0 transparent
--cml-check-size
1.125rem
--cml-check-border-width
1px
--cml-check-on-border
var(--cml-ink)
--cml-switch-width
2.5rem
--cml-switch-height
1.25rem
--cml-switch-border
1px
--cml-switch-pad
3px
--cml-switch-knob
12px
--cml-switch-knob-on
12px
--cml-switch-knob-bg
var(--cml-ink)
--cml-switch-on
var(--cml-ink)
--cml-switch-knob-on-bg
var(--cml-surface)
--cml-slider-track-h
2px
--cml-slider-track
var(--cml-ink)
--cml-slider-thumb-w
10px
--cml-slider-thumb-h
24px
--cml-slider-thumb-bg
var(--cml-ink)
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
0 0 0 2px var(--cml-surface)
--cml-number-btn-bg
var(--cml-field-bg)
--cml-number-divider
1px solid var(--cml-ink)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
var(--cml-ink)
--cml-popover-border-width
1px
--cml-popover-padding
0
--cml-item-height
2.25rem
--cml-item-padding
0.75rem
--cml-item-divider
1px solid var(--cml-rule)
--cml-item-check
var(--cml-ink)
--cml-radius-item
0
--cml-dialog-border
var(--cml-ink)
--cml-tabs-gap
0
--cml-tabs-list-border
var(--cml-ink)
--cml-tab-active-bg
var(--cml-ink)
--cml-tab-active-fg
var(--cml-surface)
--cml-tab-active-shadow
none
--cml-tooltip-bg
var(--cml-ink)
--cml-tooltip-fg
var(--cml-surface)
--cml-card-border
var(--cml-ink)
--cml-card-shadow
none
--cml-avatar-bg
var(--cml-soft)
--cml-avatar-fg
var(--cml-fg)
--cml-skeleton
light-dark(#e5e5e5, #262626)
--cml-scrollbar-size
8px
--cml-scrollbar-track
var(--cml-rule)
--cml-scrollbar-thumb
var(--cml-ink)
--cml-scrollbar-idle-opacity
1
--cml-duration-fast
100ms
--cml-duration-base
160ms
--cml-ease-standard
cubic-bezier(0.2, 0, 0, 1)
--cml-motion-distance
4px
--cml-motion-scale
1
--cml-press-translate
1px

Mesma família

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

MinimalDiscreto e neutro. Sai da frente do seu conteúdo.EditorialLê-se como uma revista. Texto serifado, títulos de display, fios finos.
Esta página foi útil? · Editar esta página no GitHub