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

Cupertino

Inspirado nas Human Interface Guidelines da Apple: fios finos, listas agrupadas e cantos contínuos.

Cupertino

Inspirado nas Human Interface Guidelines da Apple: fios finos, listas agrupadas e cantos contínuos.

SF (Apple) / Inter

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Plataforma
Fontes
SF (Apple) / Inter
Raio
controles 18px · superfícies 22px
Bordas e profundidade
fios de 0,5px · células agrupadas · barras translúcidas
Movimento
200 / 340ms

Sem afiliação. Este estilo é inspirado nas Human Interface Guidelines da Apple. O Camaleo não é afiliado à Apple e não distribui fontes, ícones nem marcas da Apple.

Como usar

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

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

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. Em aparelhos Apple o estilo pede primeiro a fonte do sistema (San Francisco); nos demais, a Inter.

// 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

  • Web apps que convivem com produtos iOS e macOS
  • Interfaces cheias de ajustes, montadas com listas agrupadas
  • Produtos calmos, em que a marca funciona como cor de destaque do sistema

Pense duas vezes

  • Visual idêntico ao de um app nativo da Apple: a SF só aparece em aparelhos Apple (não vem no pacote) e não há SF Symbols
  • Marcas que querem geometria reta e quadrada

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 Cupertino

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

Tokens

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

Tipografia
--cml-font-body-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayherdavar(--cml-font-body)
--cml-font-size0.9375rem0.9375rem
--cml-font-weight-control500500
--cml-font-weight-display600600
Cor
--cml-surfacelight-dark(#f2f2f7, #000000)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #1c1c1e)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#000000, #ffffff)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#636366, #aeaeb2)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-cu-hairline) = light-dark(#c6c6c8, #38383a)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#7c7c80, #8e8e93)light-dark(#8e8e98, #71717a)
--cml-accentvar(--cml-brand-600)light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fgvar(--cml-brand-600-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-ringlight-dark(var(--cml-brand-600), var(--cml-brand-500))var(--cml-accent-text)
--cml-dangerlight-dark(#d70015, #ff8078)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-width0.5px1px
--cml-radius-control18px8px
--cml-radius-surface22px12px
--cml-radius-popover20px10px
--cml-shadow-controlherdanone
--cml-shadow-surface0 16px 40px -12px light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.7))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.5rem2.25rem
--cml-field-height2.75rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast200ms180ms
--cml-duration-base340ms280ms
--cml-ease-standardcubic-bezier(0.32, 0.72, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate0px0px
Todas as 156 propriedades que este estilo define
--cml-cu-elevated
light-dark(#ffffff, #2c2c2e)
--cml-cu-hairline
light-dark(#c6c6c8, #38383a)
--cml-cu-hairline-glass
light-dark(rgb(60 60 67 / 0.3), rgb(235 235 245 / 0.16))
--cml-cu-fill
light-dark(rgb(120 120 128 / 0.16), rgb(120 120 128 / 0.3))
--cml-cu-grey
light-dark(#e3e3e8, #2c2c2e)
--cml-cu-segment-track
light-dark(#dcdce1, #1c1c1e)
--cml-cu-segment
light-dark(#ffffff, #636366)
--cml-cu-zebra
light-dark(#f4f4f7, #232325)
--cml-cu-gray-ink
light-dark(#8e8e93, #636366)
--cml-cu-tinted
light-dark(var(--cml-brand-100), var(--cml-brand-900))
--cml-cu-tinted-line
color-mix(in oklab, var(--cml-accent-text) 30%, transparent)
--cml-cu-glass
light-dark(rgb(250 250 252 / 0.8), rgb(36 36 38 / 0.94))
--cml-cu-glass-pop
light-dark(rgb(250 250 252 / 0.82), rgb(36 36 38 / 0.94))
--cml-cu-glass-alert
light-dark(rgb(246 246 248 / 0.96), rgb(36 36 38 / 0.96))
--cml-cu-glass-tip
light-dark(rgb(36 36 38 / 0.9), rgb(72 72 74 / 0.9))
--cml-cu-glass-tip-solid
light-dark(rgb(36 36 38), rgb(72 72 74))
--cml-cu-glass-pop-solid
light-dark(rgb(250 250 252), rgb(36 36 38))
--cml-cu-blur
blur(24px) saturate(180%)
--cml-cu-blur-alert
blur(30px) saturate(180%)
--cml-cu-blur-tip
blur(20px) saturate(160%)
--cml-cu-edge
light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1))
--cml-cu-shadow-float
0 0 0 0.5px var(--cml-cu-edge), 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6)), 0 2px 6px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3))
--cml-cu-shadow-raised
0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.04)
--cml-cu-shadow-knob
0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.16)
--cml-cu-spring
cubic-bezier(0.34, 1.32, 0.64, 1)
--cml-font-body
-apple-system, BlinkMacSystemFont, "Inter", 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
1.0625rem
--cml-font-size-field
0.9375rem
--cml-font-size-label
0.8125rem
--cml-font-size-help
0.8125rem
--cml-font-weight-control
500
--cml-font-weight-label
600
--cml-font-weight-display
600
--cml-font-weight-error
500
--cml-surface
light-dark(#f2f2f7, #000000)
--cml-surface-raised
light-dark(#ffffff, #1c1c1e)
--cml-fg
light-dark(#000000, #ffffff)
--cml-fg-secondary
light-dark(#3c3c43, #d1d1d6)
--cml-fg-muted
light-dark(#636366, #aeaeb2)
--cml-border
var(--cml-cu-hairline)
--cml-border-control
light-dark(#7c7c80, #8e8e93)
--cml-accent
var(--cml-brand-600)
--cml-accent-fg
var(--cml-brand-600-fg)
--cml-accent-hover
var(--cml-brand-600-hover)
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ring
light-dark(var(--cml-brand-600), var(--cml-brand-500))
--cml-backdrop
light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.56))
--cml-danger
light-dark(#d70015, #ff8078)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#187236, #30d158)
--cml-warning
light-dark(#8a4a00, #ffd60a)
--cml-info
var(--cml-accent-text)
--cml-item-highlight
var(--cml-cu-fill)
--cml-disabled-opacity
0.4
--cml-border-width
0.5px
--cml-corner-shape
squircle
--cml-radius-control
18px
--cml-radius-control-sm
15px
--cml-radius-control-lg
22px
--cml-radius-surface
22px
--cml-radius-popover
20px
--cml-radius-check
7px
--cml-radius-field
16px
--cml-radius-item
0px
--cml-shadow-surface
0 16px 40px -12px light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.7))
--cml-shadow-popover
var(--cml-cu-shadow-float)
--cml-focus-width
3px
--cml-focus-offset
2px
--cml-control-height
2.5rem
--cml-control-height-sm
2rem
--cml-control-height-lg
3.125rem
--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-danger-shadow
none
--cml-button-outline-bg
var(--cml-cu-tinted)
--cml-button-outline-border
transparent
--cml-button-outline-shadow
none
--cml-button-ghost-fg
var(--cml-accent-text)
--cml-toggle-pressed-bg
var(--cml-accent)
--cml-toggle-pressed-fg
var(--cml-accent-fg)
--cml-field-height
2.75rem
--cml-field-padding
0.875rem
--cml-field-border-width
1px
--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
1.5px
--cml-switch-width
51px
--cml-switch-height
31px
--cml-switch-border
0px
--cml-switch-pad
2px
--cml-switch-knob
27px
--cml-switch-knob-on
27px
--cml-switch-track
light-dark(#8a8a8e, #6c6c70)
--cml-switch-knob-bg
#ffffff
--cml-switch-knob-shadow
var(--cml-cu-shadow-knob)
--cml-switch-knob-on-shadow
var(--cml-cu-shadow-knob)
--cml-slider-track-h
4px
--cml-slider-track
light-dark(#8e8e93, #636366)
--cml-slider-thumb-w
26px
--cml-slider-thumb-h
26px
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
0 0 0 0.5px rgb(0 0 0 / 0.18), 0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.12)
--cml-number-gap
6px
--cml-number-padding
5px
--cml-number-weight
600
--cml-number-btn-align
center
--cml-number-btn-size
44px
--cml-number-btn-block
32px
--cml-number-btn-bg
var(--cml-cu-tinted)
--cml-number-btn-radius
12px
--cml-number-divider
0 solid transparent
--cml-select-trigger-shadow
none
--cml-popover-bg
var(--cml-cu-glass)
--cml-popover-border
transparent
--cml-popover-border-width
0px
--cml-popover-padding
0px
--cml-item-height
2.625rem
--cml-item-padding
1rem
--cml-item-divider
0.5px solid var(--cml-cu-hairline-glass)
--cml-dialog-border
transparent
--cml-tabs-gap
2px
--cml-tabs-list-bg
var(--cml-cu-glass)
--cml-tabs-list-border
transparent
--cml-tabs-list-shadow
0 0 0 0.5px var(--cml-cu-edge), 0 8px 24px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6)), 0 1px 3px rgb(0 0 0 / 0.05)
--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-cu-tinted)
--cml-tab-active-fg
var(--cml-accent-text)
--cml-tab-active-shadow
none
--cml-card-border
transparent
--cml-card-shadow
none
--cml-avatar-ring
var(--cml-surface)
--cml-skeleton
light-dark(#e8e8ed, #2c2c2e)
--cml-tooltip-bg
var(--cml-cu-glass-tip)
--cml-tooltip-fg
#ffffff
--cml-scrollbar-size
8px
--cml-scrollbar-track
transparent
--cml-scrollbar-thumb
light-dark(rgb(0 0 0 / 0.38), rgb(255 255 255 / 0.38))
--cml-scrollbar-idle-opacity
0.5
--cml-duration-fast
200ms
--cml-duration-base
340ms
--cml-ease-standard
cubic-bezier(0.32, 0.72, 0, 1)
--cml-motion-distance
10px
--cml-motion-scale
0.96
--cml-press-translate
0px
--cml-cu-avatar-1
linear-gradient(180deg, var(--cml-brand-600), var(--cml-brand-700))
--cml-cu-avatar-2
linear-gradient(180deg, #27804a, #1a6337)
--cml-cu-avatar-3
linear-gradient(180deg, #a85a0c, #874505)

Mesma família

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

ProgressiveUm visual neutro de app instalável, quente e moderno, sem copiar nenhuma plataforma.MaterialInspirado no Material Design 3: superfícies tonais a partir de uma cor de marca e botões em pílula.
Esta página foi útil? · Editar esta página no GitHub