Meta do trimestre
Neumorphism
Uma superfície moldada pela luz: em relevo para ações, afundada para campos.
Neumorphism
Uma superfície moldada pela luz: em relevo para ações, afundada para campos.
AaManrope
- Família
- Profundidade suave
- Fontes
- Manrope
- Raio
- controles 12px · superfícies 24px
- Bordas e profundidade
- pares de sombra clara e escura · bordas de 1px nos campos
- Movimento
- 220 / 320ms
Como usar
import "@camaleo/styles/base.css";
import "@camaleo/styles/neumorphism.css";
<StyleProvider styleName="neumorphism">…</StyleProvider>
As fontes não vêm no pacote. O estilo pede Manrope 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 { Manrope } from "next/font/google";
const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope" });
<html className={`${manrope.variable}`}>
Quando usar
Combina com
- Superfícies com poucos controles: players, casa inteligente, calculadoras
- Painéis de ajustes com alguns switches e sliders
Pense duas vezes
- Formulários densos: as bordas extras que garantem 3:1 deixam formulários longos carregados
- Tabelas de dados e listas com muitas linhas
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
Rascunho
Relatório semanal
Enviado toda segunda às 9h.
Cota do mês
Rascunho
Componentes em Neumorphism
Componentes reais da biblioteca, em Neumorphism, com o modo e a cor da marca da barra de pré-visualização.
Como está no seu documento. Ele sai na nota fiscal.
Plano
Em revisãoNovoArquivado
Enviando nota-marco.pdf
Armazenamento64,2 de 100 GB
CPERLFMS+3
Como foi sua estadia?
Copiar
Ctrl+C
Colar
Ctrl+V
Buscar em todos os arquivos
Ctrl+Shift+F
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.
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
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 |
Loja Acme
Loja virtual · criada em 02/03/2025
Aparece nas notas fiscais e nos e-mails para clientes.
Finalizar compra3 itens · R$ 274,00
- Carrinho
- Entrega
- Pagamento
- Revisão
| Fatura | Situação | Valor |
|---|---|---|
| INV-4029 | Paga | R$ 1.740,00 |
| INV-4028 | Pendente | R$ 6.402,50 |
| INV-4027 | Vencida | R$ 375,00 |
Pedido feito
Pedido nº 48920, 3 itens, R$ 214,90.
Pagamento aprovado
Pix recebido.
Entregue
Recebido pela portaria.
Ver todas as páginas de componente em Neumorphism →
Tokens
Os valores que este estilo define, lidos de neumorphism.css. Sobrescreva qualquer um deles num elemento pai para ajustar localmente.
Tipografia
--cml-font-body"Manrope", "Inter", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayherdavar(--cml-font-body)
--cml-font-sizeherda0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display800600
Cor
--cml-surfacelight-dark(#e7eaf0, #2a2d32)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-surface) = light-dark(#e7eaf0, #2a2d32)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#2f3645, #e2e8f0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#586174, #a0aec0)light-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#cfd4dd, #3a3e45)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#7c8494, #7d8592)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-textherdalight-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringherdavar(--cml-accent-text)
--cml-dangerlight-dark(#a51d14, #fca5a5)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-widthherda1px
--cml-radius-control12px8px
--cml-radius-surface24px12px
--cml-radius-popover16px10px
--cml-shadow-controlvar(--cml-raised)none
--cml-shadow-surface9px 9px 22px var(--cml-shade), -9px -9px 22px var(--cml-light)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.5rem2.25rem
--cml-field-height2.625rem2.375rem
--cml-surface-paddingherda1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast220ms180ms
--cml-duration-base320ms280ms
--cml-ease-standardherdacubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateherda0px
Todas as 120 propriedades que este estilo define
- --cml-font-body
- "Manrope", "Inter", system-ui, sans-serif
- --cml-font-weight-control
- 600
- --cml-font-weight-label
- 700
- --cml-font-weight-display
- 800
- --cml-surface
- light-dark(#e7eaf0, #2a2d32)
- --cml-surface-raised
- var(--cml-surface)
- --cml-fg
- light-dark(#2f3645, #e2e8f0)
- --cml-fg-secondary
- light-dark(#586174, #b8c2d0)
- --cml-fg-muted
- light-dark(#586174, #a0aec0)
- --cml-border
- light-dark(#cfd4dd, #3a3e45)
- --cml-border-control
- light-dark(#7c8494, #7d8592)
- --cml-backdrop
- light-dark(rgb(231 234 240 / 0.7), rgb(20 22 25 / 0.7))
- --cml-item-highlight
- transparent
- --cml-disabled-opacity
- 0.5
- --cml-shade
- light-dark(#c3c9d4, rgb(16 18 20 / 0.6))
- --cml-light
- light-dark(rgb(255 255 255 / 0.7), rgb(60 65 72 / 0.5))
- --cml-raised
- 5px 5px 12px var(--cml-shade), -5px -5px 12px var(--cml-light)
- --cml-raised-sm
- 3px 3px 7px var(--cml-shade), -3px -3px 7px var(--cml-light)
- --cml-inset
- inset 3px 3px 6px var(--cml-shade), inset -3px -3px 6px var(--cml-light)
- --cml-inset-sm
- inset 2px 2px 5px var(--cml-shade), inset -2px -2px 5px var(--cml-light)
- --cml-convex
- linear-gradient(145deg, var(--cml-accent), var(--cml-accent-hover))
- --cml-radius-control
- 12px
- --cml-radius-control-sm
- 10px
- --cml-radius-control-lg
- 14px
- --cml-radius-surface
- 24px
- --cml-radius-popover
- 16px
- --cml-radius-check
- 7px
- --cml-shadow-control
- var(--cml-raised)
- --cml-shadow-control-active
- var(--cml-inset)
- --cml-shadow-surface
- 9px 9px 22px var(--cml-shade), -9px -9px 22px var(--cml-light)
- --cml-shadow-popover
- 8px 8px 18px light-dark(rgb(40 52 72 / 0.22), var(--cml-shade)), -4px -4px 12px color-mix(in srgb, var(--cml-light) 40%, transparent)
- --cml-control-height
- 2.5rem
- --cml-control-height-sm
- 2rem
- --cml-control-height-lg
- 3rem
- --cml-control-padding
- 1.125rem
- --cml-control-padding-sm
- 0.75rem
- --cml-control-padding-lg
- 1.5rem
- --cml-button-solid-image
- var(--cml-convex)
- --cml-button-solid-shadow
- var(--cml-raised), inset 1px 1px 0 rgb(255 255 255 / 0.18)
- --cml-button-outline-bg
- var(--cml-surface)
- --cml-button-outline-border
- transparent
- --cml-button-outline-shadow
- var(--cml-raised)
- --cml-button-ghost-fg
- var(--cml-accent-text)
- --cml-button-disabled-shadow
- var(--cml-inset-sm)
- --cml-toggle-pressed-bg
- var(--cml-surface)
- --cml-toggle-pressed-fg
- var(--cml-accent-text)
- --cml-toggle-pressed-shadow
- var(--cml-inset)
- --cml-field-height
- 2.625rem
- --cml-field-padding
- 0.875rem
- --cml-field-bg
- var(--cml-surface)
- --cml-field-shadow
- var(--cml-inset)
- --cml-field-gap
- 0.5rem
- --cml-check-size
- 1.375rem
- --cml-check-border-width
- 1px
- --cml-check-shadow
- inset 2px 2px 4px var(--cml-shade), inset -2px -2px 4px var(--cml-light)
- --cml-check-on-image
- var(--cml-convex)
- --cml-check-on-shadow
- 2px 2px 5px var(--cml-shade), -2px -2px 5px var(--cml-light)
- --cml-radio-dot-shadow
- 1px 1px 3px var(--cml-shade)
- --cml-switch-width
- 2.875rem
- --cml-switch-height
- 1.625rem
- --cml-switch-border
- 1px
- --cml-switch-knob
- 18px
- --cml-switch-knob-on
- 18px
- --cml-switch-knob-bg
- var(--cml-surface)
- --cml-switch-knob-shadow
- 2px 2px 4px var(--cml-shade), -1px -1px 3px var(--cml-light)
- --cml-switch-on-shadow
- inset 2px 2px 5px color-mix(in srgb, var(--cml-accent), black 45%)
- --cml-switch-knob-on-bg
- #f3f5f9
- --cml-switch-knob-on-shadow
- 1px 1px 3px rgb(0 0 0 / 0.35)
- --cml-slider-track-h
- 10px
- --cml-slider-track
- var(--cml-surface)
- --cml-slider-fill-image
- var(--cml-convex)
- --cml-slider-fill-inset
- 2px
- --cml-slider-thumb-w
- 1.5rem
- --cml-slider-thumb-h
- 1.5rem
- --cml-slider-thumb-bg
- var(--cml-surface)
- --cml-slider-thumb-shadow
- 3px 3px 7px var(--cml-shade), -3px -3px 7px var(--cml-light)
- --cml-number-padding
- 4px
- --cml-number-gap
- 8px
- --cml-number-weight
- 700
- --cml-number-btn-align
- center
- --cml-number-btn-size
- 2rem
- --cml-number-btn-block
- 2rem
- --cml-number-btn-bg
- var(--cml-surface)
- --cml-number-btn-radius
- 9px
- --cml-number-btn-shadow
- 2px 2px 5px var(--cml-shade), -2px -2px 5px var(--cml-light)
- --cml-number-divider
- 0
- --cml-select-trigger-shadow
- 4px 4px 10px var(--cml-shade), -4px -4px 10px var(--cml-light)
- --cml-popover-bg
- var(--cml-surface)
- --cml-popover-border
- transparent
- --cml-popover-padding
- 6px
- --cml-item-height
- 2.25rem
- --cml-item-padding
- 0.75rem
- --cml-item-highlight-shadow
- var(--cml-inset-sm)
- --cml-dialog-border
- transparent
- --cml-tabs-list-bg
- var(--cml-surface)
- --cml-tabs-list-border
- transparent
- --cml-tabs-list-shadow
- var(--cml-inset)
- --cml-tabs-list-padding
- 4px
- --cml-tabs-list-radius
- 14px
- --cml-tab-radius
- 10px
- --cml-tab-active-bg
- var(--cml-surface)
- --cml-tab-active-shadow
- var(--cml-raised-sm)
- --cml-duration-fast
- 220ms
- --cml-duration-base
- 320ms
- --cml-success
- light-dark(#17663f, #6ee7a8)
- --cml-warning
- light-dark(#8a5a00, #fbbf24)
- --cml-danger
- light-dark(#a51d14, #fca5a5)
- --cml-card-border
- transparent
- --cml-card-shadow
- 8px 8px 20px var(--cml-shade), -8px -8px 20px var(--cml-light)
- --cml-avatar-bg
- var(--cml-surface)
- --cml-skeleton
- var(--cml-surface)
- --cml-tooltip-bg
- var(--cml-surface)
- --cml-tooltip-fg
- var(--cml-fg)
- --cml-button-danger-shadow
- var(--cml-raised)
- --cml-scrollbar-size
- 12px
- --cml-scrollbar-track
- var(--cml-surface)
- --cml-scrollbar-track-shadow
- var(--cml-inset-sm)
- --cml-scrollbar-thumb
- var(--cml-surface)
- --cml-scrollbar-thumb-shadow
- 2px 2px 4px var(--cml-shade), -1px -1px 3px var(--cml-light)
- --cml-scrollbar-idle-opacity
- 1
Mesma família
Outros estilos da família Profundidade suave. Comparar lado a lado →
GlassCamadas foscas e translúcidas sobre cor suave. Leve, arejado, um pouco luxuoso.ClayFormas fofas em tons pastel, como se fossem de massinha. Simpático e tátil.
Esta página foi útil? · Editar esta página no GitHub