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

Progressive

Um visual neutro de app instalável, quente e moderno, sem copiar nenhuma plataforma.

Progressive

Um visual neutro de app instalável, quente e moderno, sem copiar nenhuma plataforma.

Figtree

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Plataforma
Fontes
Figtree
Raio
controles 14px · superfícies 20px
Bordas e profundidade
bordas suaves de 1px · três níveis de elevação
Movimento
160 / 260ms

Como usar

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

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

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

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

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

Quando usar

Combina com

  • Web apps instaláveis (PWA) com app shell e áreas seguras
  • SaaS de consumo, onboarding e checkout
  • Telas pensadas para toque: os controles têm 44px de altura

Pense duas vezes

  • Ferramentas densas de desktop, em que linhas de 44px desperdiçam espaço
  • Produtos que precisam de uma voz retrô ou ousada

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 Progressive

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

Tokens

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

Tipografia
--cml-font-body"Figtree", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayherdavar(--cml-font-body)
--cml-font-size0.9375rem0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display700600
Cor
--cml-surfacelight-dark(#f3f2ef, #1c1a18)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #262321)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#1c1917, #f5f3f0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#6b645d, #a9a198)light-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#e7e5e1, #3a3632)light-dark(#e4e4e7, #27272a)
--cml-border-control#8a837blight-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-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))light-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-control14px8px
--cml-radius-surface20px12px
--cml-radius-popover16px10px
--cml-shadow-controlherdanone
--cml-shadow-surfacevar(--cml-e3)0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width3px2px
Densidade
--cml-control-height2.75rem2.25rem
--cml-field-height2.75rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast160ms180ms
--cml-duration-base260ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
Todas as 170 propriedades que este estilo define
--cml-surface-float
light-dark(#ffffff, #2f2c29)
--cml-sunk
light-dark(#e8e6e2, #2c2926)
--cml-sunk-pill
light-dark(#ffffff, #46413c)
--cml-strip
light-dark(#fbfaf9, #2b2825)
--cml-table-strip
light-dark(#f7f6f4, #2b2825)
--cml-chip
light-dark(#f1efec, #3a3632)
--cml-divider
light-dark(#efedea, #34302c)
--cml-line
light-dark(#d6d3ce, #4a4540)
--cml-switch-line
light-dark(#79736c, #8a837b)
--cml-rail
light-dark(#dcd9d4, #3d3935)
--cml-handle
light-dark(#c9c5bf, #5a554f)
--cml-inverse
light-dark(#292524, #ece9e5)
--cml-inverse-fg
light-dark(#fafaf9, #1c1917)
--cml-inverse-secondary
light-dark(#d6d3d1, #4a4540)
--cml-inverse-line
light-dark(rgb(255 255 255 / 0.3), rgb(28 25 23 / 0.3))
--cml-inverse-hover
light-dark(rgb(255 255 255 / 0.1), rgb(28 25 23 / 0.08))
--cml-e1
0 1px 2px light-dark(rgb(28 25 23 / 0.06), rgb(0 0 0 / 0.3))
--cml-e1-card
var(--cml-e1), 0 1px 1px light-dark(rgb(28 25 23 / 0.04), rgb(0 0 0 / 0.2))
--cml-e2
0 8px 24px -8px light-dark(rgb(28 25 23 / 0.18), rgb(0 0 0 / 0.55)), 0 2px 6px light-dark(rgb(28 25 23 / 0.06), rgb(0 0 0 / 0.25))
--cml-e3
0 24px 48px -16px light-dark(rgb(28 25 23 / 0.32), rgb(0 0 0 / 0.7)), 0 4px 12px light-dark(rgb(28 25 23 / 0.08), rgb(0 0 0 / 0.3))
--cml-e-fill
0 1px 2px rgb(28 25 23 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.12)
--cml-e-pill
0 1px 3px light-dark(rgb(28 25 23 / 0.14), rgb(0 0 0 / 0.4)), 0 0 0 1px light-dark(rgb(28 25 23 / 0.04), rgb(255 255 255 / 0.04))
--cml-font-body
"Figtree", system-ui, sans-serif
--cml-font-size
0.9375rem
--cml-font-size-control
0.9375rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1rem
--cml-font-size-field
0.9375rem
--cml-font-size-label
0.875rem
--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-surface
light-dark(#f3f2ef, #1c1a18)
--cml-surface-raised
light-dark(#ffffff, #262321)
--cml-fg
light-dark(#1c1917, #f5f3f0)
--cml-fg-secondary
light-dark(#4a4540, #d4cec7)
--cml-fg-muted
light-dark(#6b645d, #a9a198)
--cml-border
light-dark(#e7e5e1, #3a3632)
--cml-border-control
#8a837b
--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-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-backdrop
light-dark(rgb(28 25 23 / 0.45), rgb(0 0 0 / 0.6))
--cml-danger
light-dark(#b42318, #f97066)
--cml-success
light-dark(#13703a, #4ade80)
--cml-warning
light-dark(#854d0e, #facc15)
--cml-tone-soft
10%
--cml-tone-line
24%
--cml-item-highlight
var(--cml-chip)
--cml-radius-control
14px
--cml-radius-control-sm
11px
--cml-radius-control-lg
16px
--cml-radius-surface
20px
--cml-radius-popover
16px
--cml-radius-check
7px
--cml-radius-field
12px
--cml-radius-item
10px
--cml-shadow-surface
var(--cml-e3)
--cml-shadow-popover
var(--cml-e2)
--cml-focus-width
3px
--cml-focus-offset
2px
--cml-control-height
2.75rem
--cml-control-height-sm
2.25rem
--cml-control-height-lg
3.25rem
--cml-control-padding
1.125rem
--cml-control-padding-sm
0.875rem
--cml-control-padding-lg
1.5rem
--cml-surface-padding
1.25rem
--cml-button-solid-shadow
var(--cml-e-fill)
--cml-button-danger-shadow
var(--cml-e-fill)
--cml-button-outline-border
var(--cml-line)
--cml-button-outline-shadow
var(--cml-e1)
--cml-toggle-pressed-bg
var(--cml-accent)
--cml-toggle-pressed-fg
var(--cml-accent-fg)
--cml-toggle-pressed-shadow
inset 0 1px 0 rgb(255 255 255 / 0.12)
--cml-field-height
2.75rem
--cml-field-padding
0.875rem
--cml-field-shadow
0 0 0 0 transparent
--cml-field-focus-halo
0 0 0 0 transparent
--cml-check-size
1.375rem
--cml-check-border-width
2px
--cml-switch-width
2.875rem
--cml-switch-height
1.75rem
--cml-switch-border
1.5px
--cml-switch-pad
2px
--cml-switch-knob
21px
--cml-switch-knob-on
21px
--cml-switch-track
var(--cml-sunk)
--cml-switch-knob-bg
#ffffff
--cml-switch-knob-shadow
0 1px 3px rgb(28 25 23 / 0.3), 0 0 0 1px rgb(28 25 23 / 0.1)
--cml-switch-knob-on-shadow
0 1px 3px rgb(28 25 23 / 0.3)
--cml-slider-track-h
8px
--cml-slider-track
var(--cml-rail)
--cml-slider-thumb-w
1.5rem
--cml-slider-thumb-h
1.5rem
--cml-slider-thumb-border
1px solid var(--cml-switch-line)
--cml-slider-thumb-shadow
0 2px 6px rgb(28 25 23 / 0.18)
--cml-number-weight
600
--cml-number-btn-size
2.75rem
--cml-number-btn-bg
light-dark(#f5f4f2, #2b2825)
--cml-number-divider
1px solid var(--cml-border)
--cml-popover-bg
var(--cml-surface-float)
--cml-popover-padding
6px
--cml-item-height
2.5rem
--cml-item-padding
0.75rem
--cml-tabs-gap
2px
--cml-tabs-list-bg
var(--cml-sunk)
--cml-tabs-list-padding
4px
--cml-tabs-list-radius
var(--cml-radius-pill)
--cml-tab-radius
var(--cml-radius-pill)
--cml-tab-active-bg
var(--cml-accent)
--cml-tab-active-fg
var(--cml-accent-fg)
--cml-tab-active-shadow
0 1px 2px rgb(28 25 23 / 0.14)
--cml-card-shadow
var(--cml-e1-card)
--cml-avatar-ring
var(--cml-surface)
--cml-skeleton
light-dark(#eceae6, #322e2b)
--cml-tooltip-bg
var(--cml-inverse)
--cml-tooltip-fg
var(--cml-inverse-fg)
--cml-scrollbar-size
8px
--cml-scrollbar-track
transparent
--cml-scrollbar-thumb
light-dark(#a8a29e, #6b645d)
--cml-scrollbar-idle-opacity
0.7
--cml-duration-fast
160ms
--cml-duration-base
260ms
--cml-ease-standard
cubic-bezier(0.2, 0, 0, 1)
--cml-motion-distance
12px
--cml-motion-scale
0.97
--cml-press-translate
1px
--cml-avatar-1-bg
light-dark(var(--cml-brand-100), var(--cml-brand-900))
--cml-avatar-1-fg
light-dark(var(--cml-brand-800), var(--cml-brand-200))
--cml-avatar-2-bg
light-dark(#dcf2e3, #183a25)
--cml-avatar-2-fg
light-dark(#14532d, #a7f3c0)
--cml-avatar-3-bg
light-dark(#fcefc9, #3d2e0f)
--cml-avatar-3-fg
light-dark(#78350f, #fcd98a)
--cml-app-shell-bg
light-dark(#f3f2ef, #1c1a18)
--cml-app-shell-header-bg
light-dark(#ffffff, #262321)
--cml-app-shell-header-border
1px solid var(--cml-border-subtle)
--cml-sidebar-bg
light-dark(#f3f2ef, #1c1a18)
--cml-sidebar-border
1px solid var(--cml-border-subtle)
--cml-sidebar-brand-border
1px solid var(--cml-border-subtle)
--cml-sidebar-footer-border
1px solid var(--cml-border-subtle)
--cml-sidebar-item-radius
6px
--cml-sidebar-item-active-bg
light-dark(#ffffff, #262321)
--cml-sidebar-item-active-fg
var(--cml-fg)
--cml-sidebar-indicator-bg
var(--cml-brand)
--cml-sidebar-indicator-width
3px
--cml-nav-popup-bg
light-dark(#ffffff, #2f2c29)
--cml-nav-popup-border
1px solid var(--cml-border-subtle)
--cml-nav-popup-radius
8px
--cml-menubar-bg
light-dark(#ffffff, #262321)
--cml-menubar-border
1px solid var(--cml-border-subtle)
--cml-menubar-radius
6px
--cml-toolbar-bg
light-dark(#ffffff, #262321)
--cml-toolbar-border
1px solid var(--cml-border-subtle)
--cml-toolbar-radius
6px
--cml-cmd-bg
light-dark(#ffffff, #262321)
--cml-cmd-border
1px solid var(--cml-border-subtle)
--cml-cmd-radius
10px
--cml-hover-card-bg
light-dark(#ffffff, #2f2c29)
--cml-hover-card-border
1px solid var(--cml-border-subtle)
--cml-hover-card-radius
8px
--cml-toggletip-bg
light-dark(#ffffff, #2f2c29)
--cml-toggletip-border
1px solid var(--cml-border-subtle)
--cml-toggletip-radius
6px
--cml-splitter-border
1px solid var(--cml-border-subtle)
--cml-splitter-handle-bg
light-dark(#f3f2ef, #1c1a18)
--cml-splitter-radius
4px

Mesma família

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

MaterialInspirado no Material Design 3: superfícies tonais a partir de uma cor de marca e botões em pílula.CupertinoInspirado nas Human Interface Guidelines da Apple: fios finos, listas agrupadas e cantos contínuos.
Esta página foi útil? · Editar esta página no GitHub