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

Editorial

Lê-se como uma revista. Texto serifado, títulos de display, fios finos.

Editorial

Lê-se como uma revista. Texto serifado, títulos de display, fios finos.

Newsreader + Fraunces + Inter

Receita · 30 diasR$ 48,2 mil+12,4%vs. mês passado
Meta do trimestre
x
Família
Tipográfico
Fontes
Newsreader + Fraunces + Inter
Raio
controles 0px · superfícies 0px
Bordas e profundidade
fios finos de 1px · tinta nos controles · sem sombra
Movimento
200 / 320ms

Como usar

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

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

As fontes não vêm no pacote. O estilo pede Newsreader + Fraunces + 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.

// app/layout.tsx
import { Newsreader, Fraunces, Inter } from "next/font/google";

const newsreader = Newsreader({ subsets: ["latin"], variable: "--font-newsreader" });
const fraunces = Fraunces({ subsets: ["latin"], variable: "--font-fraunces" });
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

<html className={`${newsreader.variable} ${fraunces.variable} ${inter.variable}`}>

Quando usar

Combina com

  • Sites de conteúdo, blogs, newsletters e documentação
  • Portfólios e leitura longa
  • Produtos com voz mais próxima do impresso que do software

Pense duas vezes

  • Dashboards densos, cheios de controles
  • Texto pequeno de interface: uma serifa a 13px é mais difícil de escanear que uma grotesca

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 Editorial

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

Tokens

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

Tipografia
--cml-font-body"Newsreader", "Iowan Old Style", Georgia, serif"Inter", system-ui, sans-serif
--cml-font-display"Fraunces", Georgia, serifvar(--cml-font-body)
--cml-font-size1.0625rem0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display600600
Cor
--cml-surfacelight-dark(#f6f2ea, #161412)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#fbf8f2, #1f1c19)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#171513, #ede6da)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#5c574f, #b3aa9b)light-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#d6cdbd, #3a352f)light-dark(#e4e4e7, #27272a)
--cml-border-controlvar(--cml-fg) = light-dark(#171513, #ede6da)light-dark(#8e8e98, #71717a)
--cml-accentvar(--cml-fg) = light-dark(#171513, #ede6da)light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fgvar(--cml-surface) = light-dark(#f6f2ea, #161412)light-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(#a3201b, #f08a80)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-widthherda1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlherdanone
--cml-shadow-surfacenone0 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.5rem2.375rem
--cml-surface-paddingherda1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fast200ms180ms
--cml-duration-base320ms280ms
--cml-ease-standardherdacubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateherda0px
Todas as 300 propriedades que este estilo define
--cml-font-body
"Newsreader", "Iowan Old Style", Georgia, serif
--cml-font-display
"Fraunces", Georgia, serif
--cml-font-control
"Inter", system-ui, sans-serif
--cml-font-label
var(--cml-font-control)
--cml-font-size
1.0625rem
--cml-font-size-control
0.75rem
--cml-font-size-control-sm
0.6875rem
--cml-font-size-control-lg
0.8125rem
--cml-font-size-field
1.1875rem
--cml-font-size-label
0.6875rem
--cml-font-size-help
0.9375rem
--cml-font-weight-control
600
--cml-font-weight-label
600
--cml-font-weight-display
600
--cml-text-transform-control
uppercase
--cml-text-transform-label
uppercase
--cml-letter-spacing-control
0.12em
--cml-letter-spacing-label
0.14em
--cml-surface
light-dark(#f6f2ea, #161412)
--cml-surface-raised
light-dark(#fbf8f2, #1f1c19)
--cml-fg
light-dark(#171513, #ede6da)
--cml-fg-secondary
light-dark(#4d4842, #c9c0b1)
--cml-fg-muted
light-dark(#5c574f, #b3aa9b)
--cml-border
light-dark(#d6cdbd, #3a352f)
--cml-border-control
var(--cml-fg)
--cml-accent
var(--cml-fg)
--cml-accent-fg
var(--cml-surface)
--cml-accent-hover
color-mix(in oklab, var(--cml-fg), var(--cml-surface) 15%)
--cml-backdrop
light-dark(rgb(246 242 234 / 0.8), rgb(22 20 18 / 0.8))
--cml-item-highlight
light-dark(#ebe4d6, #2a2621)
--cml-disabled-opacity
0.4
--cml-radius-control
0
--cml-radius-control-sm
0
--cml-radius-control-lg
0
--cml-radius-surface
0
--cml-radius-popover
0
--cml-radius-check
0
--cml-shadow-surface
none
--cml-shadow-popover
none
--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.625rem
--cml-button-solid-shadow
none
--cml-button-outline-bg
transparent
--cml-button-outline-border
var(--cml-fg)
--cml-button-outline-shadow
none
--cml-button-ghost-decoration
underline 1px
--cml-field-height
2.5rem
--cml-field-padding
0
--cml-field-bg
transparent
--cml-field-shadow
none
--cml-field-border-sides
0 0 1px
--cml-field-focus-sides
0 0 2px
--cml-field-focus-halo
0 0 0 0 transparent
--cml-field-gap
0.25rem
--cml-placeholder-style
italic
--cml-font-style-help
italic
--cml-check-size
1.125rem
--cml-check-border-width
1px
--cml-switch-width
2.375rem
--cml-switch-height
1.25rem
--cml-switch-border
1px
--cml-switch-knob
12px
--cml-switch-knob-on
12px
--cml-switch-track
transparent
--cml-switch-knob-bg
var(--cml-fg)
--cml-switch-knob-on-bg
var(--cml-surface)
--cml-slider-track-h
1px
--cml-slider-track
var(--cml-fg)
--cml-slider-fill-inset
-1px
--cml-slider-thumb-w
0.875rem
--cml-slider-thumb-h
0.875rem
--cml-slider-thumb-bg
var(--cml-surface)
--cml-slider-thumb-border
1.5px solid var(--cml-fg)
--cml-slider-thumb-shadow
none
--cml-number-btn-align
center
--cml-number-btn-size
2rem
--cml-number-btn-block
2rem
--cml-number-btn-bg
transparent
--cml-number-btn-radius
50%
--cml-number-divider
1px solid var(--cml-fg)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
var(--cml-fg)
--cml-popover-padding
4px 0
--cml-item-height
2.25rem
--cml-item-padding
0.875rem
--cml-item-divider
1px solid light-dark(#e4dccd, #2c2824)
--cml-radius-item
0
--cml-item-check
var(--cml-accent-text)
--cml-dialog-border
var(--cml-fg)
--cml-tabs-list-border
var(--cml-border)
--cml-tab-active-shadow
inset 0 -2px 0 var(--cml-fg)
--cml-duration-fast
200ms
--cml-duration-base
320ms
--cml-motion-distance
0px
--cml-motion-scale
1
--cml-success
light-dark(#2f6b3a, #8fc49b)
--cml-warning
light-dark(#8a5300, #e0b25a)
--cml-danger
light-dark(#a3201b, #f08a80)
--cml-info
light-dark(#1d4f91, #8fb3e8)
--cml-card-border
var(--cml-fg)
--cml-card-shadow
none
--cml-avatar-bg
var(--cml-surface-raised)
--cml-avatar-fg
var(--cml-fg)
--cml-avatar-ring
var(--cml-surface)
--cml-skeleton
light-dark(#e4dccd, #2c2824)
--cml-accordion-chevron
none
--cml-accordion-plus
inline-block
--cml-crumb-chevron
none
--cml-crumb-slash
inline
--cml-menu-icons
none
--cml-tabs-gap
1.625rem
--cml-button-danger-shadow
none
--cml-scrollbar-size
7px
--cml-scrollbar-thumb
var(--cml-fg)
--cml-input-addon-bg
transparent
--cml-input-addon-fg
var(--cml-fg-secondary)
--cml-input-addon-divider
1px solid var(--cml-border)
--cml-input-button-on-bg
var(--cml-item-highlight)
--cml-otp-gap
0.625rem
--cml-otp-cell-width
2.875rem
--cml-otp-cell-height
3.25rem
--cml-otp-cell-radius
0
--cml-otp-font
var(--cml-font-display)
--cml-otp-font-size
1.75rem
--cml-otp-font-weight
500
--cml-otp-separator
var(--cml-fg)
--cml-tag-height
1.625rem
--cml-tag-bg
var(--cml-item-highlight)
--cml-tag-fg
var(--cml-fg)
--cml-tag-border
1px solid var(--cml-item-highlight)
--cml-tag-radius
0
--cml-tag-font-size
0.625rem
--cml-tag-font-weight
600
--cml-tag-text-transform
uppercase
--cml-tag-letter-spacing
0.12em
--cml-dropzone-bg
var(--cml-surface-raised)
--cml-dropzone-border
1px dashed var(--cml-fg)
--cml-dropzone-radius
0
--cml-dropzone-shadow
none
--cml-dropzone-active-bg
var(--cml-item-highlight)
--cml-dropzone-icon-bg
var(--cml-surface)
--cml-dropzone-icon-fg
var(--cml-fg)
--cml-dropzone-icon-border
1px solid var(--cml-fg)
--cml-dropzone-icon-shadow
none
--cml-file-item-bg
transparent
--cml-file-item-border
0
--cml-file-item-radius
0
--cml-file-item-shadow
none
--cml-file-icon-bg
transparent
--cml-file-icon-fg
var(--cml-fg)
--cml-file-icon-radius
0
--cml-star-size
1.5rem
--cml-star-color
var(--cml-fg)
--cml-star-empty
var(--cml-fg)
--cml-star-fill
currentColor
--cml-star-on-bg
transparent
--cml-chip-height
2rem
--cml-chip-radius
0
--cml-chip-bg
transparent
--cml-chip-fg
var(--cml-fg)
--cml-chip-border
1px solid var(--cml-fg)
--cml-chip-shadow
none
--cml-chip-font-size
0.6875rem
--cml-chip-text-transform
uppercase
--cml-chip-letter-spacing
0.12em
--cml-chip-on-bg
var(--cml-fg)
--cml-chip-on-fg
var(--cml-surface)
--cml-chip-on-border
1px solid var(--cml-fg)
--cml-chip-on-shadow
none
--cml-chip-on-translate
none
--cml-calendar-padding
1.125rem
--cml-calendar-border
1px solid var(--cml-fg)
--cml-calendar-radius
0
--cml-calendar-shadow
none
--cml-calendar-title-size
1.25rem
--cml-calendar-title-weight
500
--cml-calendar-title-tracking
-0.015em
--cml-calendar-nav-size
1.875rem
--cml-calendar-nav-radius
0
--cml-calendar-nav-bg
transparent
--cml-calendar-nav-border
1px solid var(--cml-fg)
--cml-calendar-header-size
0.6875rem
--cml-calendar-header-weight
600
--cml-calendar-header-transform
uppercase
--cml-calendar-header-tracking
0.12em
--cml-calendar-header-fg
var(--cml-fg-secondary)
--cml-calendar-cell-radius
0
--cml-calendar-cell-font
var(--cml-font-body)
--cml-calendar-cell-size-font
0.9375rem
--cml-calendar-cell-weight
400
--cml-calendar-today-border
1px solid var(--cml-accent-text)
--cml-calendar-today-fg
var(--cml-accent-text)
--cml-calendar-selected-bg
var(--cml-fg)
--cml-calendar-selected-fg
var(--cml-surface)
--cml-calendar-selected-border
1px solid var(--cml-fg)
--cml-calendar-range-bg
color-mix(in oklab, var(--cml-fg) 9%, var(--cml-surface-raised))
--cml-calendar-range-fg
var(--cml-fg)
--cml-segment-radius
0
--cml-segment-focus-bg
var(--cml-fg)
--cml-segment-focus-fg
var(--cml-surface)
--cml-stat-border
var(--cml-fg)
--cml-stat-radius
0
--cml-stat-shadow
none
--cml-stat-label-size
0.6875rem
--cml-stat-label-weight
600
--cml-stat-label-transform
uppercase
--cml-stat-label-tracking
0.1em
--cml-stat-value-size
1.5rem
--cml-stat-value-weight
500
--cml-table-head-transform
uppercase
--cml-table-head-tracking
0.08em
--cml-table-row-selected-bg
color-mix(in oklab, var(--cml-fg) 7%, var(--cml-surface-raised))
--cml-data-list-term-transform
uppercase
--cml-data-list-term-tracking
0.06em
--cml-ring-linecap
butt
--cml-meter-radius
0
--cml-timeline-dot-radius
0
--cml-tree-row-radius
0
--cml-tree-selected-bg
color-mix(in oklab, var(--cml-fg) 8%, var(--cml-surface-raised))
--cml-tree-selected-border
1px solid var(--cml-fg)
--cml-code-bg
#1c1917
--cml-code-fg
#f5f1e8
--cml-code-header-bg
#292524
--cml-code-header-fg
#e7e2d5
--cml-code-header-border
#57534e
--cml-code-border
var(--cml-fg)
--cml-code-radius
0
--cml-code-shadow
none
--cml-carousel-slide-radius
0
--cml-carousel-dot-radius
0
--cml-app-shell-bg
var(--cml-surface)
--cml-app-shell-header-bg
var(--cml-surface-raised)
--cml-app-shell-header-border
1px solid var(--cml-fg)
--cml-sidebar-bg
var(--cml-item-highlight)
--cml-sidebar-border
1px solid var(--cml-fg)
--cml-sidebar-brand-border
1px solid var(--cml-fg)
--cml-sidebar-footer-border
1px solid var(--cml-fg)
--cml-sidebar-item-radius
0
--cml-sidebar-item-active-bg
var(--cml-surface-raised)
--cml-sidebar-item-active-fg
var(--cml-fg)
--cml-sidebar-indicator-bg
var(--cml-brand)
--cml-sidebar-indicator-width
3px
--cml-sidebar-group-label-size
0.625rem
--cml-sidebar-group-label-weight
600
--cml-sidebar-group-label-transform
uppercase
--cml-sidebar-group-label-tracking
0.12em
--cml-nav-popup-bg
var(--cml-surface-raised)
--cml-nav-popup-border
1px solid var(--cml-fg)
--cml-nav-popup-radius
0
--cml-nav-item-radius
0
--cml-nav-trigger-open-bg
var(--cml-item-highlight)
--cml-menubar-bg
var(--cml-surface-raised)
--cml-menubar-border
1px solid var(--cml-fg)
--cml-menubar-radius
0
--cml-menubar-shadow
none
--cml-menubar-active-bg
var(--cml-fg)
--cml-menubar-active-fg
var(--cml-surface)
--cml-menubar-trigger-radius
0
--cml-toolbar-bg
var(--cml-surface-raised)
--cml-toolbar-border
1px solid var(--cml-fg)
--cml-toolbar-radius
0
--cml-toolbar-shadow
none
--cml-toolbar-btn-radius
0
--cml-toolbar-toggle-active-bg
var(--cml-fg)
--cml-toolbar-toggle-active-border
1px solid var(--cml-fg)
--cml-toolbar-toggle-active-fg
var(--cml-surface)
--cml-stepper-line
1px solid var(--cml-fg)
--cml-stepper-completed-line
2px solid var(--cml-fg)
--cml-stepper-completed-bg
var(--cml-fg)
--cml-stepper-completed-fg
var(--cml-surface)
--cml-stepper-completed-border
1px solid var(--cml-fg)
--cml-stepper-current-bg
var(--cml-surface-raised)
--cml-stepper-current-fg
var(--cml-fg)
--cml-stepper-current-border
2px solid var(--cml-fg)
--cml-step-indicator-radius
0
--cml-step-indicator-bg
var(--cml-item-highlight)
--cml-step-indicator-fg
var(--cml-fg-secondary)
--cml-step-indicator-border
1px solid var(--cml-fg-secondary)
--cml-cmd-bg
var(--cml-surface-raised)
--cml-cmd-border
2px solid var(--cml-fg)
--cml-cmd-radius
0
--cml-cmd-header-border
1px solid var(--cml-fg)
--cml-cmd-footer-border
1px solid var(--cml-fg)
--cml-cmd-active-bg
var(--cml-fg)
--cml-cmd-active-fg
var(--cml-surface)
--cml-hover-card-bg
var(--cml-surface-raised)
--cml-hover-card-border
1px solid var(--cml-fg)
--cml-hover-card-radius
0
--cml-toggletip-bg
var(--cml-surface-raised)
--cml-toggletip-border
1px solid var(--cml-fg)
--cml-toggletip-radius
0
--cml-splitter-border
1px solid var(--cml-fg)
--cml-splitter-handle-bg
var(--cml-item-highlight)
--cml-splitter-radius
0
--cml-splitter-active-bg
color-mix(in oklab, var(--cml-brand) 15%, var(--cml-item-highlight))
--cml-splitter-grip
var(--cml-fg)

Mesma família

Outros estilos da família Tipográfico. Comparar lado a lado →

MinimalDiscreto e neutro. Sai da frente do seu conteúdo.SwissGrade, tipografia e mais nada. A hierarquia vem do tamanho e do peso.
Esta página foi útil? · Editar esta página no GitHub