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

Swiss

Grid, type and nothing else. Hierarchy comes from size and weight.

Swiss

Grid, type and nothing else. Hierarchy comes from size and weight.

Archivo

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Typographic
Fonts
Archivo
Radius
0px controls · 0px surfaces
Edges & depth
1px ink rules · square · no shadow
Motion
100 / 160ms

Use it

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

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

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

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

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

When to use it

Good fit

  • Data-heavy products: reports, tables, analytics
  • Publishing, design and architecture tools
  • Brands that want the brand color to be the only signal

Think twice

  • Playful consumer apps
  • Interfaces where people rely on depth to see what is clickable

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 Swiss

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

Tokens

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

Typography
--cml-font-body"Archivo", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayinheritsvar(--cml-font-body)
--cml-font-sizeinherits0.9375rem
--cml-font-weight-controlinherits500
--cml-font-weight-display700600
Color
--cml-surfacelight-dark(#ffffff, #000000)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-surface) = light-dark(#ffffff, #000000)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#000000, #ffffff)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#5c5c5c, #a3a3a3)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-fg) = light-dark(#000000, #ffffff)light-dark(#e4e4e7, #27272a)
--cml-border-controlvar(--cml-fg) = light-dark(#000000, #ffffff)light-dark(#8e8e98, #71717a)
--cml-accentinheritslight-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fginheritslight-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-ringvar(--cml-fg) = light-dark(#000000, #ffffff)var(--cml-accent-text)
--cml-dangerinheritslight-dark(#b42318, #f97066)
Shape & depth
--cml-border-widthinherits1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlnonenone
--cml-shadow-surfacenone0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width2px2px
Density
--cml-control-height2.5rem2.25rem
--cml-field-height2.5rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fast100ms180ms
--cml-duration-base160ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
All 112 custom properties this skin sets
--cml-font-body
"Archivo", system-ui, sans-serif
--cml-font-size-control
0.9375rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1.0625rem
--cml-font-size-field
0.9375rem
--cml-font-size-label
0.875rem
--cml-font-weight-display
700
--cml-font-weight-error
500
--cml-surface
light-dark(#ffffff, #000000)
--cml-surface-raised
var(--cml-surface)
--cml-fg
light-dark(#000000, #ffffff)
--cml-fg-secondary
light-dark(#262626, #dcdcdc)
--cml-fg-muted
light-dark(#5c5c5c, #a3a3a3)
--cml-border
var(--cml-fg)
--cml-border-control
var(--cml-fg)
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ring
var(--cml-fg)
--cml-backdrop
light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.75))
--cml-item-highlight
var(--cml-fg)
--cml-item-highlight-fg
var(--cml-surface)
--cml-tone-soft
9%
--cml-ink
var(--cml-fg)
--cml-quiet
light-dark(#404040, #c7c7c7)
--cml-rule
light-dark(#d4d4d4, #3d3d3d)
--cml-soft
light-dark(#ebebeb, #262626)
--cml-hint
light-dark(#8c8c8c, #808080)
--cml-disabled-bg
light-dark(#ebebeb, #1f1f1f)
--cml-disabled-fg
light-dark(#8a8a8a, #808080)
--cml-disabled-border
light-dark(#b3b3b3, #5c5c5c)
--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-radius-pill
0
--cml-radius-radio
50%
--cml-shadow-control
none
--cml-shadow-control-active
none
--cml-shadow-surface
none
--cml-shadow-popover
none
--cml-focus-width
2px
--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-solid-shadow
none
--cml-button-outline-border
var(--cml-ink)
--cml-button-outline-shadow
none
--cml-button-danger-shadow
none
--cml-button-disabled-shadow
none
--cml-field-height
2.5rem
--cml-field-padding
0.75rem
--cml-field-shadow
0 0 0 0 transparent
--cml-field-focus-halo
0 0 0 0 transparent
--cml-check-size
1.125rem
--cml-check-border-width
1px
--cml-check-on-border
var(--cml-ink)
--cml-switch-width
2.5rem
--cml-switch-height
1.25rem
--cml-switch-border
1px
--cml-switch-pad
3px
--cml-switch-knob
12px
--cml-switch-knob-on
12px
--cml-switch-knob-bg
var(--cml-ink)
--cml-switch-on
var(--cml-ink)
--cml-switch-knob-on-bg
var(--cml-surface)
--cml-slider-track-h
2px
--cml-slider-track
var(--cml-ink)
--cml-slider-thumb-w
10px
--cml-slider-thumb-h
24px
--cml-slider-thumb-bg
var(--cml-ink)
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
0 0 0 2px var(--cml-surface)
--cml-number-btn-bg
var(--cml-field-bg)
--cml-number-divider
1px solid var(--cml-ink)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
var(--cml-ink)
--cml-popover-border-width
1px
--cml-popover-padding
0
--cml-item-height
2.25rem
--cml-item-padding
0.75rem
--cml-item-divider
1px solid var(--cml-rule)
--cml-item-check
var(--cml-ink)
--cml-radius-item
0
--cml-dialog-border
var(--cml-ink)
--cml-tabs-gap
0
--cml-tabs-list-border
var(--cml-ink)
--cml-tab-active-bg
var(--cml-ink)
--cml-tab-active-fg
var(--cml-surface)
--cml-tab-active-shadow
none
--cml-tooltip-bg
var(--cml-ink)
--cml-tooltip-fg
var(--cml-surface)
--cml-card-border
var(--cml-ink)
--cml-card-shadow
none
--cml-avatar-bg
var(--cml-soft)
--cml-avatar-fg
var(--cml-fg)
--cml-skeleton
light-dark(#e5e5e5, #262626)
--cml-scrollbar-size
8px
--cml-scrollbar-track
var(--cml-rule)
--cml-scrollbar-thumb
var(--cml-ink)
--cml-scrollbar-idle-opacity
1
--cml-duration-fast
100ms
--cml-duration-base
160ms
--cml-ease-standard
cubic-bezier(0.2, 0, 0, 1)
--cml-motion-distance
4px
--cml-motion-scale
1
--cml-press-translate
1px

Same family

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

MinimalQuiet and neutral. It gets out of the way of your content.EditorialReads like a magazine. Serif text, display headings, hairline rules.
Was this page helpful? · Edit this page on GitHub