Meta do trimestre
Clay
Formas fofas em tons pastel, como se fossem de massinha. Simpático e tátil.
Clay
Formas fofas em tons pastel, como se fossem de massinha. Simpático e tátil.
AaNunito + Fredoka
- Família
- Profundidade suave
- Fontes
- Nunito + Fredoka
- Raio
- controles 16px · superfícies 28px
- Bordas e profundidade
- sem bordas · brilho interno + sombra suave
- Movimento
- 140 / 280ms
Como usar
import "@camaleo/styles/base.css";
import "@camaleo/styles/clay.css";
<StyleProvider styleName="clay">…</StyleProvider>
As fontes não vêm no pacote. O estilo pede Nunito + Fredoka 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 { Nunito, Fredoka } from "next/font/google";
const nunito = Nunito({ subsets: ["latin"], variable: "--font-nunito" });
const fredoka = Fredoka({ subsets: ["latin"], variable: "--font-fredoka" });
<html className={`${nunito.variable} ${fredoka.variable}`}>
Quando usar
Combina com
- Produtos para crianças, educação e família
- Apps de consumo divertidos, jogos e onboarding
- Marcas com ilustração arredondada e amigável
Pense duas vezes
- Ferramentas sérias de finanças, jurídico ou corporativas
- Telas densas: cantos de 28px e sombras profundas precisam de espaço
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 Clay
Componentes reais da biblioteca, em Clay, 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 Clay →
Tokens
Os valores que este estilo define, lidos de clay.css. Sobrescreva qualquer um deles num elemento pai para ajustar localmente.
Tipografia
--cml-font-body"Nunito", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-display"Fredoka", "Nunito", system-ui, sans-serifvar(--cml-font-body)
--cml-font-sizeherda0.9375rem
--cml-font-weight-control700500
--cml-font-weight-display600600
Cor
--cml-surfacelight-dark(#fbf7f0, #1d1929)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #2b2640)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#2e2a3f, #f3effb)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#5f5a72, #aaa3bf)light-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#e7e1f1, #3a3452)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#837d9b, #8a83a3)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(#b42318, #f4847a)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-width0px1px
--cml-radius-control16px8px
--cml-radius-surface28px12px
--cml-radius-popover20px10px
--cml-shadow-controlvar(--cml-clay)none
--cml-shadow-surface0 24px 44px -18px var(--cml-clay-modal-drop), inset 3px 4px 3px var(--cml-clay-hl), inset -4px -5px 12px var(--cml-clay-core)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.625rem2.25rem
--cml-field-height2.75rem2.375rem
--cml-surface-paddingherda1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast140ms180ms
--cml-duration-baseherda280ms
--cml-ease-standardherdacubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateherda0px
Todas as 149 propriedades que este estilo define
- --cml-clay-drop
- light-dark(rgb(78 62 130 / 0.34), rgb(4 2 12 / 0.62))
- --cml-clay-drop-strong
- light-dark(rgb(78 62 130 / 0.42), rgb(4 2 12 / 0.7))
- --cml-clay-drop-soft
- light-dark(rgb(78 62 130 / 0.08), rgb(4 2 12 / 0.3))
- --cml-clay-modal-drop
- light-dark(rgb(30 20 64 / 0.5), rgb(0 0 0 / 0.7))
- --cml-clay-hl
- light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.09))
- --cml-clay-hl-soft
- light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.06))
- --cml-clay-core
- light-dark(rgb(78 62 130 / 0.12), rgb(0 0 0 / 0.26))
- --cml-clay-core-soft
- light-dark(rgb(78 62 130 / 0.08), rgb(0 0 0 / 0.2))
- --cml-clay-cavity
- light-dark(rgb(78 62 130 / 0.16), rgb(0 0 0 / 0.38))
- --cml-clay-cavity-soft
- light-dark(rgb(78 62 130 / 0.12), rgb(0 0 0 / 0.35))
- --cml-clay-rim
- light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.05))
- --cml-clay-line
- light-dark(rgb(78 62 130 / 0.1), rgb(255 255 255 / 0.08))
- --cml-clay-glow
- light-dark(color-mix(in srgb, var(--cml-accent) 75%, transparent), color-mix(in srgb, var(--cml-accent) 30%, rgb(0 0 0 / 0.55)))
- --cml-clay-tray
- light-dark(#efeafb, #18142a)
- --cml-clay-lavender
- light-dark(#efeafb, #3a3356)
- --cml-clay-lilac
- light-dark(#f4f0fe, #2e2846)
- --cml-clay-soft
- light-dark(var(--cml-brand-100), oklch(from var(--cml-brand) 0.35 min(c, 0.07) h))
- --cml-clay-soft-fg
- light-dark(var(--cml-brand-700), var(--cml-brand-200))
- --cml-clay
- 0 8px 16px -8px var(--cml-clay-drop), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px var(--cml-clay-hl), inset -3px -4px 8px var(--cml-clay-core)
- --cml-clay-hover
- 0 10px 20px -8px var(--cml-clay-drop), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px var(--cml-clay-hl), inset -3px -4px 8px var(--cml-clay-core)
- --cml-clay-brand
- 0 8px 16px -8px var(--cml-clay-glow), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px rgb(255 255 255 / 0.28), inset -3px -4px 7px rgb(0 0 0 / 0.18)
- --cml-clay-press
- 0 1px 2px var(--cml-clay-drop-soft), inset 3px 4px 7px var(--cml-clay-cavity), inset -2px -2px 3px var(--cml-clay-hl-soft)
- --cml-clay-tray-in
- inset 2px 3px 6px var(--cml-clay-cavity), inset -2px -2px 3px var(--cml-clay-rim)
- --cml-clay-small
- 0 3px 6px -2px var(--cml-clay-drop), inset 1px 2px 1px var(--cml-clay-hl), inset -2px -2px 4px var(--cml-clay-core)
- --cml-clay-chip
- inset 1px 2px 1px var(--cml-clay-hl-soft), inset -2px -2px 3px var(--cml-clay-core)
- --cml-clay-fill
- inset 1px 2px 1px rgb(255 255 255 / 0.3), inset -2px -2px 3px rgb(0 0 0 / 0.16)
- --cml-clay-surface
- 0 14px 28px -16px var(--cml-clay-drop), 0 2px 4px var(--cml-clay-drop-soft), inset 3px 4px 3px var(--cml-clay-hl), inset -4px -5px 12px var(--cml-clay-core-soft)
- --cml-clay-lift
- -2px
- --cml-font-body
- "Nunito", system-ui, sans-serif
- --cml-font-display
- "Fredoka", "Nunito", system-ui, sans-serif
- --cml-font-weight-control
- 700
- --cml-font-weight-label
- 800
- --cml-font-weight-display
- 600
- --cml-font-weight-error
- 800
- --cml-surface
- light-dark(#fbf7f0, #1d1929)
- --cml-surface-raised
- light-dark(#ffffff, #2b2640)
- --cml-fg
- light-dark(#2e2a3f, #f3effb)
- --cml-fg-secondary
- light-dark(#48435c, #d6d0e6)
- --cml-fg-muted
- light-dark(#5f5a72, #aaa3bf)
- --cml-border
- light-dark(#e7e1f1, #3a3452)
- --cml-border-control
- light-dark(#837d9b, #8a83a3)
- --cml-backdrop
- light-dark(rgb(58 46 98 / 0.36), rgb(8 5 18 / 0.62))
- --cml-item-highlight
- var(--cml-clay-lavender)
- --cml-success
- light-dark(#166534, #7ee2a8)
- --cml-warning
- light-dark(#854d0e, #f7cf6b)
- --cml-danger
- light-dark(#b42318, #f4847a)
- --cml-danger-fg
- light-dark(#ffffff, #1a0f14)
- --cml-tone-soft
- 13%
- --cml-disabled-opacity
- 0.45
- --cml-border-width
- 0px
- --cml-radius-control
- 16px
- --cml-radius-control-sm
- 13px
- --cml-radius-control-lg
- 19px
- --cml-radius-surface
- 28px
- --cml-radius-popover
- 20px
- --cml-radius-check
- 8px
- --cml-radius-item
- 13px
- --cml-shadow-control
- var(--cml-clay)
- --cml-shadow-control-active
- var(--cml-clay-press)
- --cml-shadow-surface
- 0 24px 44px -18px var(--cml-clay-modal-drop), inset 3px 4px 3px var(--cml-clay-hl), inset -4px -5px 12px var(--cml-clay-core)
- --cml-shadow-popover
- 0 18px 36px -16px var(--cml-clay-drop-strong), 0 3px 8px var(--cml-clay-drop-soft), inset 2px 3px 2px var(--cml-clay-hl), inset -3px -4px 10px var(--cml-clay-core-soft)
- --cml-control-height
- 2.625rem
- --cml-control-height-sm
- 2.125rem
- --cml-control-height-lg
- 3.125rem
- --cml-control-padding
- 1.25rem
- --cml-control-padding-sm
- 0.875rem
- --cml-control-padding-lg
- 1.625rem
- --cml-item-height
- 2.25rem
- --cml-motion-scale
- 0.96
- --cml-button-solid-shadow
- var(--cml-clay-brand)
- --cml-button-danger-shadow
- 0 8px 16px -8px color-mix(in srgb, var(--cml-danger) 60%, transparent), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px rgb(255 255 255 / 0.22), inset -3px -4px 7px rgb(0 0 0 / 0.2)
- --cml-button-outline-bg
- var(--cml-surface-raised)
- --cml-button-outline-border
- transparent
- --cml-button-outline-shadow
- var(--cml-clay)
- --cml-button-ghost-fg
- var(--cml-accent-text)
- --cml-toggle-pressed-bg
- var(--cml-clay-soft)
- --cml-toggle-pressed-fg
- var(--cml-clay-soft-fg)
- --cml-toggle-pressed-shadow
- var(--cml-clay-press)
- --cml-field-height
- 2.75rem
- --cml-field-padding
- 1rem
- --cml-field-bg
- var(--cml-surface-raised)
- --cml-field-shadow
- inset 2px 3px 5px var(--cml-clay-cavity-soft)
- --cml-field-border-width
- 1.5px
- --cml-field-focus-halo
- 0 0 0 0 transparent
- --cml-field-gap
- 0.4375rem
- --cml-check-size
- 1.375rem
- --cml-check-border-width
- 1.5px
- --cml-check-shadow
- inset 2px 2px 3px var(--cml-clay-cavity-soft)
- --cml-check-on-shadow
- 0 3px 6px -2px var(--cml-clay-glow), inset 1px 2px 1px rgb(255 255 255 / 0.3), inset -2px -2px 3px rgb(0 0 0 / 0.16)
- --cml-radio-dot-shadow
- inset 1px 1px 1px rgb(255 255 255 / 0.35), inset -1px -1px 2px rgb(0 0 0 / 0.2)
- --cml-switch-width
- 2.875rem
- --cml-switch-height
- 1.625rem
- --cml-switch-border
- 1.5px
- --cml-switch-pad
- 3px
- --cml-switch-knob
- 18px
- --cml-switch-knob-on
- 18px
- --cml-switch-track
- var(--cml-clay-tray)
- --cml-switch-knob-bg
- light-dark(#ffffff, #c9c2dc)
- --cml-switch-knob-shadow
- 0 2px 3px var(--cml-clay-drop), inset -2px -2px 3px var(--cml-clay-core)
- --cml-switch-on-shadow
- inset 2px 3px 5px rgb(0 0 0 / 0.2)
- --cml-switch-knob-on-bg
- light-dark(#ffffff, #2b2640)
- --cml-switch-knob-on-shadow
- 0 2px 3px rgb(0 0 0 / 0.25), inset -2px -2px 3px var(--cml-clay-core)
- --cml-slider-track-h
- 12px
- --cml-slider-track
- var(--cml-clay-tray)
- --cml-slider-thumb-w
- 1.625rem
- --cml-slider-thumb-h
- 1.625rem
- --cml-slider-thumb-bg
- var(--cml-surface-raised)
- --cml-slider-thumb-border
- 1.5px solid var(--cml-border-control)
- --cml-slider-thumb-shadow
- 0 4px 8px -3px var(--cml-clay-drop-strong), inset -3px -3px 5px var(--cml-clay-core)
- --cml-number-padding
- 4px
- --cml-number-gap
- 6px
- --cml-number-weight
- 800
- --cml-number-btn-align
- center
- --cml-number-btn-size
- 2.125rem
- --cml-number-btn-block
- 2.0625rem
- --cml-number-btn-bg
- var(--cml-clay-lavender)
- --cml-number-btn-radius
- 12px
- --cml-number-btn-shadow
- var(--cml-clay-small)
- --cml-number-divider
- 0
- --cml-select-trigger-shadow
- var(--cml-clay)
- --cml-popover-bg
- var(--cml-surface-raised)
- --cml-popover-border
- transparent
- --cml-popover-border-width
- 0px
- --cml-popover-padding
- 6px
- --cml-item-padding
- 0.75rem
- --cml-tabs-gap
- 4px
- --cml-tabs-list-bg
- var(--cml-clay-tray)
- --cml-tabs-list-border
- transparent
- --cml-tabs-list-shadow
- var(--cml-clay-tray-in)
- --cml-tabs-list-padding
- 4px
- --cml-tabs-list-radius
- 19px
- --cml-tab-radius
- 15px
- --cml-tab-active-bg
- var(--cml-surface-raised)
- --cml-tab-active-shadow
- var(--cml-clay)
- --cml-card-border
- transparent
- --cml-card-shadow
- var(--cml-clay-surface)
- --cml-avatar-bg
- var(--cml-clay-lavender)
- --cml-avatar-fg
- var(--cml-fg-secondary)
- --cml-avatar-ring
- var(--cml-surface)
- --cml-skeleton
- var(--cml-clay-lavender)
- --cml-tooltip-bg
- light-dark(#2e2a3f, #ece7f7)
- --cml-tooltip-fg
- light-dark(#fffdf8, #2e2a3f)
- --cml-scrollbar-size
- 12px
- --cml-scrollbar-track
- var(--cml-clay-tray)
- --cml-scrollbar-track-shadow
- var(--cml-clay-tray-in)
- --cml-scrollbar-thumb
- light-dark(#ffffff, #5d5579)
- --cml-scrollbar-thumb-shadow
- var(--cml-clay-small)
- --cml-scrollbar-idle-opacity
- 1
- --cml-duration-fast
- 140ms
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.NeumorphismUma superfície moldada pela luz: em relevo para ações, afundada para campos.
Esta página foi útil? · Editar esta página no GitHub