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

Minimal

Quiet and neutral. It gets out of the way of your content.

Minimal

Quiet and neutral. It gets out of the way of your content.

Inter

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Typographic
Fonts
Inter
Radius
8px controls · 12px surfaces
Edges & depth
1px borders · soft surface shadow
Motion
180 / 280ms

Use it

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

<StyleProvider>…</StyleProvider>

Minimal is the default: base.css already contains it, so there is no extra file. An element without data-style renders minimal.

Fonts are not bundled. The skin asks for 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 { Inter } from "next/font/google";

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

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

When to use it

Good fit

  • SaaS dashboards, admin tools and internal apps
  • Products that have to age well without a redesign
  • A neutral base for your own skin: every token defaults to it

Think twice

  • Brands that need a loud, recognizable look
  • Landing pages that must stand out at a glance

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 Minimal

Real components from the library, in Minimal, 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 Minimal →

Tokens

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

Typography
--cml-font-body"Inter", system-ui, sans-serif
--cml-font-displayvar(--cml-font-body) = "Inter", system-ui, sans-serif
--cml-font-size0.9375rem
--cml-font-weight-control500
--cml-font-weight-display600
Color
--cml-surfacelight-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #18181b)
--cml-fglight-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringvar(--cml-accent-text)
--cml-dangerlight-dark(#b42318, #f97066)
Shape & depth
--cml-border-width1px
--cml-radius-control8px
--cml-radius-surface12px
--cml-radius-popover10px
--cml-shadow-controlnone
--cml-shadow-surface0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width2px
Density
--cml-control-height2.25rem
--cml-field-height2.375rem
--cml-surface-padding1.5rem
--cml-gap0.5rem
Motion
--cml-duration-fast180ms
--cml-duration-base280ms
--cml-ease-standardcubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate0px
All 91 default tokens
--cml-font-body
"Inter", system-ui, sans-serif
--cml-font-display
var(--cml-font-body)
--cml-font-control
var(--cml-font-body)
--cml-font-field
var(--cml-font-body)
--cml-font-label
var(--cml-font-body)
--cml-font-size
0.9375rem
--cml-font-size-control
0.875rem
--cml-font-size-control-sm
0.8125rem
--cml-font-size-control-lg
0.9375rem
--cml-font-size-field
0.875rem
--cml-font-size-label
0.8125rem
--cml-font-size-help
0.8125rem
--cml-font-weight-control
500
--cml-font-weight-label
500
--cml-font-weight-display
600
--cml-text-transform-control
none
--cml-text-transform-label
none
--cml-letter-spacing-control
normal
--cml-letter-spacing-label
normal
--cml-surface
light-dark(#ffffff, #09090b)
--cml-surface-raised
light-dark(#ffffff, #18181b)
--cml-fg
light-dark(#09090b, #fafafa)
--cml-fg-secondary
light-dark(#52525b, #d4d4d8)
--cml-fg-muted
light-dark(#71717a, #a1a1aa)
--cml-border
light-dark(#e4e4e7, #27272a)
--cml-border-control
light-dark(#8e8e98, #71717a)
--cml-accent
light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fg
light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-hover
light-dark(var(--cml-brand-600-hover), var(--cml-brand-400-hover))
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ring
var(--cml-accent-text)
--cml-backdrop
light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.6))
--cml-danger
light-dark(#b42318, #f97066)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#15803d, #4ade80)
--cml-warning
light-dark(#854d0e, #facc15)
--cml-info
var(--cml-accent-text)
--cml-tone-soft
7%
--cml-tone-line
28%
--cml-item-highlight
color-mix(in oklab, var(--cml-fg) 6%, transparent)
--cml-border-subtle
color-mix(in oklab, var(--cml-border) 70%, transparent)
--cml-item-hover
var(--cml-item-highlight)
--cml-surface-subtle
color-mix(in oklab, var(--cml-fg) 3%, var(--cml-surface))
--cml-disabled-opacity
0.45
--cml-border-width
1px
--cml-radius-control
8px
--cml-radius-control-sm
7px
--cml-radius-control-lg
10px
--cml-radius-surface
12px
--cml-radius-popover
10px
--cml-radius-check
5px
--cml-radius-pill
999px
--cml-shadow-control
none
--cml-shadow-control-active
none
--cml-shadow-surface
0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-shadow-popover
0 12px 32px -12px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.04)
--cml-focus-width
2px
--cml-focus-offset
2px
--cml-field-height
2.375rem
--cml-field-padding
0.75rem
--cml-field-bg
var(--cml-surface-raised)
--cml-field-shadow
0 1px 2px rgb(0 0 0 / 0.04)
--cml-field-border-width
1px
--cml-check-size
1.125rem
--cml-check-border-width
1.5px
--cml-switch-width
2.25rem
--cml-switch-height
1.25rem
--cml-switch-border
1.5px
--cml-switch-pad
3px
--cml-switch-knob
10px
--cml-switch-knob-on
14px
--cml-slider-track-h
6px
--cml-slider-thumb-w
1.125rem
--cml-slider-thumb-h
1.125rem
--cml-item-height
2.125rem
--cml-space
0.25rem
--cml-control-height
2.25rem
--cml-control-height-sm
1.875rem
--cml-control-height-lg
2.75rem
--cml-control-padding
0.875rem
--cml-control-padding-sm
0.625rem
--cml-control-padding-lg
1.25rem
--cml-surface-padding
1.5rem
--cml-gap
0.5rem
--cml-duration-fast
180ms
--cml-duration-base
280ms
--cml-motion-duration
var(--cml-duration-fast)
--cml-ease-standard
cubic-bezier(0.22, 1, 0.36, 1)
--cml-motion-distance
8px
--cml-motion-scale
0.98
--cml-press-translate
0px

Same family

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

SwissGrid, type and nothing else. Hierarchy comes from size and weight.EditorialReads like a magazine. Serif text, display headings, hairline rules.
Was this page helpful? · Edit this page on GitHub