Meta do trimestre
Neubrutalism
Contornos grossos de tinta, sombras duras e cores berrantes. Orgulhosamente cru.
Neubrutalism
Contornos grossos de tinta, sombras duras e cores berrantes. Orgulhosamente cru.
AaSpace Grotesk
- Família
- Ousado
- Fontes
- Space Grotesk
- Raio
- controles 6px · superfícies 8px
- Bordas e profundidade
- bordas de tinta de 2px · sombra dura deslocada
- Movimento
- 120 / 200ms
Como usar
import "@camaleo/styles/base.css";
import "@camaleo/styles/neubrutalism.css";
<StyleProvider styleName="neubrutalism">…</StyleProvider>
As fontes não vêm no pacote. O estilo pede Space Grotesk 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 { Space_Grotesk } from "next/font/google";
const spacegrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-spacegrotesk" });
<html className={`${spacegrotesk.variable}`}>
Quando usar
Combina com
- Produtos independentes, ferramentas criativas e lançamentos
- Landing pages que precisam ser lembradas
- Cores de marca vibrantes: os preenchimentos ficam chapados e fortes
Pense duas vezes
- Públicos corporativos conservadores
- Telas de administração longas e densas: cada contorno pesa
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 Neubrutalism
Componentes reais da biblioteca, em Neubrutalism, 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 Neubrutalism →
Tokens
Os valores que este estilo define, lidos de neubrutalism.css. Sobrescreva qualquer um deles num elemento pai para ajustar localmente.
Tipografia
--cml-font-body"Space Grotesk", 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-display700600
Cor
--cml-surfacelight-dark(#fbf5e6, #14130f)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #1f1d18)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#111111, #f5efe0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#5c574f, #aaa395)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-fg) = light-dark(#111111, #f5efe0)light-dark(#e4e4e7, #27272a)
--cml-border-controlvar(--cml-fg) = light-dark(#111111, #f5efe0)light-dark(#8e8e98, #71717a)
--cml-accentvar(--cml-brand-500)light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fgvar(--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-dangerherdalight-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-width2px1px
--cml-radius-control6px8px
--cml-radius-surface8px12px
--cml-radius-popover6px10px
--cml-shadow-control3px 3px 0 var(--cml-ink)none
--cml-shadow-surface6px 6px 0 var(--cml-ink)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.5rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast120ms180ms
--cml-duration-base200ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate4px0px
Todas as 308 propriedades que este estilo define
- --cml-font-body
- "Space Grotesk", system-ui, sans-serif
- --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-weight-control
- 600
- --cml-font-weight-label
- 600
- --cml-font-weight-display
- 700
- --cml-font-weight-error
- 600
- --cml-surface
- light-dark(#fbf5e6, #14130f)
- --cml-surface-raised
- light-dark(#ffffff, #1f1d18)
- --cml-fg
- light-dark(#111111, #f5efe0)
- --cml-fg-secondary
- light-dark(#3b3833, #d3ccbd)
- --cml-fg-muted
- light-dark(#5c574f, #aaa395)
- --cml-border
- var(--cml-fg)
- --cml-border-control
- var(--cml-fg)
- --cml-accent
- var(--cml-brand-500)
- --cml-accent-fg
- var(--cml-brand-500-fg)
- --cml-accent-hover
- var(--cml-brand-500-hover)
- --cml-accent-text
- light-dark(var(--cml-brand-700), var(--cml-brand-300))
- --cml-backdrop
- light-dark(rgb(17 17 17 / 0.5), rgb(0 0 0 / 0.7))
- --cml-item-highlight
- var(--cml-highlight)
- --cml-item-highlight-fg
- var(--cml-highlight-fg)
- --cml-disabled-opacity
- 1
- --cml-ink
- var(--cml-fg)
- --cml-prose
- light-dark(#2b2823, #e4ddce)
- --cml-soft
- light-dark(#ece4d0, #2b2822)
- --cml-highlight
- #ffd23f
- --cml-highlight-fg
- #111111
- --cml-danger-fill
- #ff5c5c
- --cml-disabled-border
- light-dark(#8a8478, #77715f)
- --cml-disabled-fg
- light-dark(#6b665c, #9c9688)
- --cml-press-translate
- 4px
- --cml-lift
- calc(var(--cml-press-translate) / 4)
- --cml-border-width
- 2px
- --cml-radius-control
- 6px
- --cml-radius-control-sm
- 6px
- --cml-radius-control-lg
- 6px
- --cml-radius-surface
- 8px
- --cml-radius-popover
- 6px
- --cml-radius-check
- 4px
- --cml-shadow-control
- 3px 3px 0 var(--cml-ink)
- --cml-shadow-control-active
- none
- --cml-shadow-surface
- 6px 6px 0 var(--cml-ink)
- --cml-shadow-popover
- 4px 4px 0 var(--cml-ink)
- --cml-focus-width
- 3px
- --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-outline-border
- var(--cml-ink)
- --cml-button-ghost-decoration
- underline 2px
- --cml-toggle-pressed-fg
- var(--cml-surface-raised)
- --cml-field-height
- 2.5rem
- --cml-field-padding
- 0.75rem
- --cml-field-border-width
- 2px
- --cml-field-shadow
- 0 0 0 0 transparent
- --cml-field-focus-halo
- 0 0 0 0 transparent
- --cml-radius-field
- 6px
- --cml-check-size
- 1.25rem
- --cml-check-border-width
- 2px
- --cml-check-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-check-on-border
- var(--cml-ink)
- --cml-check-on-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-radio-dot-shadow
- 0 0 0 1.5px var(--cml-ink)
- --cml-switch-width
- 2.75rem
- --cml-switch-height
- 1.5rem
- --cml-switch-border
- 2px
- --cml-switch-pad
- 2px
- --cml-switch-knob
- 16px
- --cml-switch-knob-on
- 16px
- --cml-switch-track
- var(--cml-soft)
- --cml-switch-knob-bg
- var(--cml-surface-raised)
- --cml-switch-knob-on-bg
- var(--cml-surface-raised)
- --cml-switch-on-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-slider-track-h
- 14px
- --cml-slider-track
- var(--cml-surface-raised)
- --cml-slider-track-border
- 2px
- --cml-slider-thumb-w
- 1.375rem
- --cml-slider-thumb-h
- 1.375rem
- --cml-slider-thumb-bg
- var(--cml-surface-raised)
- --cml-slider-thumb-border
- 2px solid var(--cml-ink)
- --cml-slider-thumb-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-number-weight
- 600
- --cml-number-btn-size
- 2.5rem
- --cml-number-btn-bg
- var(--cml-soft)
- --cml-number-divider
- 2px solid var(--cml-ink)
- --cml-select-trigger-shadow
- var(--cml-shadow-control)
- --cml-popover-bg
- var(--cml-surface-raised)
- --cml-popover-border
- var(--cml-ink)
- --cml-popover-border-width
- 2px
- --cml-popover-padding
- 4px
- --cml-radius-item
- 4px
- --cml-dialog-border
- var(--cml-ink)
- --cml-tabs-list-border
- var(--cml-ink)
- --cml-tab-radius
- 6px 6px 0 0
- --cml-tab-active-bg
- var(--cml-ink)
- --cml-tab-active-fg
- var(--cml-surface-raised)
- --cml-tab-active-shadow
- none
- --cml-duration-fast
- 120ms
- --cml-duration-base
- 200ms
- --cml-ease-standard
- cubic-bezier(0.2, 0, 0, 1)
- --cml-motion-distance
- 6px
- --cml-motion-scale
- 1
- --cml-card-border
- var(--cml-ink)
- --cml-card-shadow
- 4px 4px 0 var(--cml-ink)
- --cml-avatar-bg
- var(--cml-soft)
- --cml-avatar-fg
- var(--cml-fg)
- --cml-skeleton
- light-dark(#e6ddc7, #2f2c25)
- --cml-scrollbar-size
- 14px
- --cml-scrollbar-track
- var(--cml-surface-raised)
- --cml-scrollbar-track-shadow
- inset 0 0 0 2px var(--cml-ink)
- --cml-scrollbar-thumb
- var(--cml-ink)
- --cml-scrollbar-idle-opacity
- 1
- --cml-input-addon-bg
- var(--cml-soft)
- --cml-input-addon-fg
- var(--cml-fg)
- --cml-input-addon-divider
- 2px solid var(--cml-ink)
- --cml-input-button-on-bg
- var(--cml-ink)
- --cml-otp-gap
- 0.625rem
- --cml-otp-cell-width
- 2.75rem
- --cml-otp-cell-height
- 3rem
- --cml-otp-cell-radius
- 6px
- --cml-otp-font-size
- 1.25rem
- --cml-otp-font-weight
- 700
- --cml-otp-separator
- var(--cml-ink)
- --cml-tag-height
- 1.75rem
- --cml-tag-bg
- var(--cml-soft)
- --cml-tag-fg
- var(--cml-fg)
- --cml-tag-border
- 2px solid var(--cml-ink)
- --cml-tag-radius
- 4px
- --cml-tag-font-size
- 0.875rem
- --cml-tag-font-weight
- 600
- --cml-dropzone-bg
- var(--cml-surface-raised)
- --cml-dropzone-border
- 2px dashed var(--cml-ink)
- --cml-dropzone-radius
- 8px
- --cml-dropzone-active-bg
- light-dark(#fff4cc, #2e2914)
- --cml-dropzone-icon-bg
- var(--cml-highlight)
- --cml-dropzone-icon-fg
- var(--cml-highlight-fg)
- --cml-dropzone-icon-border
- 2px solid var(--cml-ink)
- --cml-dropzone-icon-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-file-item-bg
- var(--cml-surface-raised)
- --cml-file-item-border
- 2px solid var(--cml-ink)
- --cml-file-item-radius
- 8px
- --cml-file-item-shadow
- 3px 3px 0 var(--cml-ink)
- --cml-file-icon-bg
- var(--cml-soft)
- --cml-file-icon-fg
- var(--cml-fg)
- --cml-file-icon-radius
- 6px
- --cml-star-size
- 1.625rem
- --cml-star-color
- var(--cml-ink)
- --cml-star-empty
- var(--cml-ink)
- --cml-star-fill
- var(--cml-highlight)
- --cml-chip-height
- 2rem
- --cml-chip-bg
- var(--cml-surface-raised)
- --cml-chip-fg
- var(--cml-fg)
- --cml-chip-border
- 2px solid var(--cml-ink)
- --cml-chip-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-chip-font-size
- 0.875rem
- --cml-chip-on-bg
- var(--cml-ink)
- --cml-chip-on-fg
- var(--cml-surface-raised)
- --cml-chip-on-border
- 2px solid var(--cml-ink)
- --cml-chip-on-shadow
- none
- --cml-chip-on-translate
- min(2px, var(--cml-press-translate)) min(2px, var(--cml-press-translate))
- --cml-calendar-border
- 2px solid var(--cml-ink)
- --cml-calendar-radius
- 8px
- --cml-calendar-shadow
- 4px 4px 0 var(--cml-ink)
- --cml-calendar-title-weight
- 700
- --cml-calendar-nav-size
- 2rem
- --cml-calendar-nav-radius
- 6px
- --cml-calendar-nav-bg
- var(--cml-surface-raised)
- --cml-calendar-nav-border
- 2px solid var(--cml-ink)
- --cml-calendar-nav-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-calendar-header-fg
- var(--cml-fg)
- --cml-calendar-header-weight
- 700
- --cml-calendar-header-transform
- uppercase
- --cml-calendar-header-tracking
- 0.04em
- --cml-calendar-cell-radius
- 6px
- --cml-calendar-cell-weight
- 600
- --cml-calendar-today-border
- 2px solid var(--cml-ink)
- --cml-calendar-today-bg
- var(--cml-highlight)
- --cml-calendar-today-fg
- var(--cml-highlight-fg)
- --cml-calendar-selected-bg
- var(--cml-accent)
- --cml-calendar-selected-fg
- var(--cml-accent-fg)
- --cml-calendar-selected-border
- 2px solid var(--cml-ink)
- --cml-calendar-selected-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-calendar-range-bg
- var(--cml-soft)
- --cml-calendar-range-fg
- var(--cml-fg)
- --cml-calendar-range-border
- 1px solid var(--cml-ink)
- --cml-segment-radius
- 4px
- --cml-segment-focus-bg
- var(--cml-highlight)
- --cml-segment-focus-fg
- var(--cml-highlight-fg)
- --cml-segment-focus-border
- 1.5px solid var(--cml-ink)
- --cml-stat-border
- var(--cml-ink)
- --cml-stat-radius
- 8px
- --cml-stat-shadow
- 4px 4px 0 var(--cml-ink)
- --cml-stat-label-weight
- 700
- --cml-stat-label-transform
- uppercase
- --cml-stat-label-tracking
- 0.04em
- --cml-stat-value-weight
- 700
- --cml-table-head-bg
- var(--cml-soft)
- --cml-table-head-fg
- var(--cml-fg)
- --cml-table-head-transform
- uppercase
- --cml-table-head-tracking
- 0.04em
- --cml-table-row-selected-bg
- var(--cml-highlight)
- --cml-table-row-selected-fg
- var(--cml-highlight-fg)
- --cml-table-footer-bg
- var(--cml-soft)
- --cml-data-list-term-bg
- var(--cml-soft)
- --cml-data-list-term-fg
- var(--cml-fg)
- --cml-data-list-term-transform
- uppercase
- --cml-data-list-term-tracking
- 0.04em
- --cml-ring-linecap
- butt
- --cml-ring-track
- var(--cml-soft)
- --cml-meter-height
- 0.75rem
- --cml-meter-bg
- var(--cml-soft)
- --cml-meter-border
- var(--cml-ink)
- --cml-meter-radius
- 4px
- --cml-timeline-dot-radius
- 4px
- --cml-timeline-line
- var(--cml-ink)
- --cml-tree-row-radius
- 4px
- --cml-tree-selected-bg
- var(--cml-highlight)
- --cml-tree-selected-fg
- var(--cml-highlight-fg)
- --cml-tree-selected-border
- 2px solid var(--cml-ink)
- --cml-tree-selected-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-code-bg
- #171717
- --cml-code-fg
- #f5f5f5
- --cml-code-header-bg
- #262626
- --cml-code-header-fg
- #fafafa
- --cml-code-header-border
- var(--cml-ink)
- --cml-code-border
- var(--cml-ink)
- --cml-code-radius
- 8px
- --cml-code-shadow
- 4px 4px 0 var(--cml-ink)
- --cml-carousel-slide-bg
- var(--cml-soft)
- --cml-carousel-slide-border
- var(--cml-ink)
- --cml-carousel-slide-radius
- 6px
- --cml-carousel-dot-radius
- 2px
- --cml-app-shell-bg
- var(--cml-surface)
- --cml-app-shell-header-bg
- var(--cml-surface)
- --cml-app-shell-header-border
- 2px solid var(--cml-ink)
- --cml-sidebar-bg
- var(--cml-soft)
- --cml-sidebar-border
- 2px solid var(--cml-ink)
- --cml-sidebar-brand-border
- 2px solid var(--cml-ink)
- --cml-sidebar-footer-border
- 2px solid var(--cml-ink)
- --cml-sidebar-item-radius
- 4px
- --cml-sidebar-item-active-bg
- var(--cml-highlight)
- --cml-sidebar-item-active-fg
- var(--cml-highlight-fg)
- --cml-sidebar-indicator-bg
- var(--cml-ink)
- --cml-sidebar-indicator-width
- 4px
- --cml-sidebar-group-label-size
- 0.6875rem
- --cml-sidebar-group-label-weight
- 700
- --cml-sidebar-group-label-transform
- uppercase
- --cml-sidebar-group-label-tracking
- 0.04em
- --cml-nav-popup-bg
- var(--cml-surface)
- --cml-nav-popup-border
- 2px solid var(--cml-ink)
- --cml-nav-popup-radius
- 8px
- --cml-nav-item-radius
- 4px
- --cml-nav-trigger-open-bg
- var(--cml-highlight)
- --cml-menubar-bg
- var(--cml-surface)
- --cml-menubar-border
- 2px solid var(--cml-ink)
- --cml-menubar-radius
- 6px
- --cml-menubar-shadow
- 2px 2px 0 var(--cml-ink)
- --cml-menubar-active-bg
- var(--cml-ink)
- --cml-menubar-active-fg
- var(--cml-surface)
- --cml-menubar-trigger-radius
- 4px
- --cml-toolbar-bg
- var(--cml-surface)
- --cml-toolbar-border
- 2px solid var(--cml-ink)
- --cml-toolbar-radius
- 6px
- --cml-toolbar-shadow
- 3px 3px 0 var(--cml-ink)
- --cml-toolbar-btn-radius
- 4px
- --cml-toolbar-toggle-active-bg
- var(--cml-highlight)
- --cml-toolbar-toggle-active-border
- 2px solid var(--cml-ink)
- --cml-toolbar-toggle-active-fg
- var(--cml-highlight-fg)
- --cml-stepper-line
- 2px solid var(--cml-ink)
- --cml-stepper-completed-line
- 2px solid var(--cml-ink)
- --cml-stepper-completed-bg
- var(--cml-highlight)
- --cml-stepper-completed-fg
- var(--cml-highlight-fg)
- --cml-stepper-completed-border
- 2px solid var(--cml-ink)
- --cml-stepper-current-bg
- var(--cml-surface)
- --cml-stepper-current-fg
- var(--cml-fg)
- --cml-stepper-current-border
- 2px solid var(--cml-ink)
- --cml-stepper-error-bg
- var(--cml-danger-fill)
- --cml-stepper-error-fg
- var(--cml-highlight-fg)
- --cml-stepper-error-border
- 2px solid var(--cml-ink)
- --cml-step-indicator-radius
- 6px
- --cml-step-indicator-bg
- var(--cml-soft)
- --cml-step-indicator-fg
- var(--cml-fg)
- --cml-step-indicator-border
- 2px solid var(--cml-ink)
- --cml-cmd-bg
- var(--cml-surface)
- --cml-cmd-border
- 2px solid var(--cml-ink)
- --cml-cmd-radius
- 8px
- --cml-cmd-header-border
- 2px solid var(--cml-ink)
- --cml-cmd-footer-border
- 2px solid var(--cml-ink)
- --cml-cmd-active-bg
- var(--cml-highlight)
- --cml-cmd-active-fg
- var(--cml-highlight-fg)
- --cml-hover-card-bg
- var(--cml-surface)
- --cml-hover-card-border
- 2px solid var(--cml-ink)
- --cml-hover-card-radius
- 8px
- --cml-toggletip-bg
- var(--cml-surface)
- --cml-toggletip-border
- 2px solid var(--cml-ink)
- --cml-toggletip-radius
- 6px
- --cml-splitter-border
- 2px solid var(--cml-ink)
- --cml-splitter-handle-bg
- var(--cml-soft)
- --cml-splitter-radius
- 4px
- --cml-splitter-active-bg
- var(--cml-highlight)
- --cml-splitter-grip
- var(--cml-ink)
Mesma família
Outros estilos da família Ousado. Comparar lado a lado →
RetroO desktop clássico, refeito com contraste de verdade e suporte a teclado.Retro pixelBordas 8-bit: contornos de pixel de 4px, cantos em degrau, letras grossas.Y2KPlástico e cromo da virada do milênio: botões de gelatina brilhantes e listras Aqua.
Esta página foi útil? · Editar esta página no GitHub