Camaleo
EN · PTGitHub
// preview in
saved for every page

Editorial

Reads like a magazine. Serif text, display headings, hairline rules.

Editorial

Reads like a magazine. Serif text, display headings, hairline rules.

Newsreader + Fraunces + Inter

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Typographic
Fonts
Newsreader + Fraunces + Inter
Radius
0px controls · 0px surfaces
Edges & depth
1px hairlines · ink on controls · no shadow
Motion
200 / 320ms

Use it

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

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

Fonts are not bundled. The skin asks for Newsreader + Fraunces + Inter by name, so any loader that registers that family works: next/font (below), a <link> to a font service or your own @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}`}>

When to use it

Good fit

  • Content sites, blogs, newsletters and docs
  • Portfolios and long reading
  • Products whose voice is closer to print than to software

Think twice

  • Dense dashboards full of controls
  • Small UI text: a serif at 13px is harder to scan than a grotesque

Light and dark

Both modes are designed, not inverted, and pass the same contrast checks. The brand comes from the preview bar.

Weekly report

Sent every Monday at 9:00.

Monthly quota
x
Draft
light

Weekly report

Sent every Monday at 9:00.

Monthly quota
x
Draft
dark

Components in Editorial

Real components from the library, in Editorial, with the mode and brand from the preview bar.

Button

As it appears on your ID. We print it on invoices.

Field
Select
Checkbox
Plan
Radio group
Switch
Slider
Number field
Toggle
In reviewNewArchived
Badge
Revenue$48,250+14.2%vs. September
Stat
Uploading invoice-march.pdf
x
Progress
Storage64.2 of 100 GB
x
Meter
CPERLFMS+3
Avatar
How was your stay?
Rating
Chip
Spinner
Tooltip
Copy
Ctrl+C
Paste
Ctrl+V
Find in all files
Ctrl+Shift+F
Kbd

Scheduled maintenance on Sunday

Sign-in will be unavailable from 2:00 to 2:15 AM UTC on November 2. Your data is not affected.

Alert

Trip dates, October 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
Range calendar

Acme Store

Online store · created on 03/02/2025

Shown on invoices and in emails to customers.

Tabs
Checkout3 items · $54.80
  1. Cart, done
  2. Shipping
  3. Payment
  4. Review
Stepper
InvoiceStatusAmount
INV-4029Paid$340.00
INV-4028Pending$1,280.50
INV-4027Overdue$75.00
Table

Accordion
Pagination

  1. Order placed

    Order #48920, 3 items, $214.90.

  2. Payment approved

    Visa ending in 4242.

  3. Delivered

    Signed for by the front desk.

Timeline

Preview every component page in Editorial →

Tokens

The values this skin sets, read from editorial.css. Override any of them on a parent element to adjust it locally.

Typography
--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
Color
--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-textinheritslight-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringinheritsvar(--cml-accent-text)
--cml-dangerlight-dark(#a3201b, #f08a80)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-widthinherits1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlinheritsnone
--cml-shadow-surfacenone0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-widthinherits2px
Density
--cml-control-height2.5rem2.25rem
--cml-field-height2.5rem2.375rem
--cml-surface-paddinginherits1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fast200ms180ms
--cml-duration-base320ms280ms
--cml-ease-standardinheritscubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateinherits0px
All 300 custom properties this skin sets
--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)

Same family

Other skins in the Typographic family. Compare side by side →

MinimalQuiet and neutral. It gets out of the way of your content.SwissGrid, type and nothing else. Hierarchy comes from size and weight.
Was this page helpful? · Edit this page on GitHub