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

Progressive

A neutral installable-app look, warm and modern, without borrowing any platform.

Progressive

A neutral installable-app look, warm and modern, without borrowing any platform.

Figtree

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Platform
Fonts
Figtree
Radius
14px controls · 20px surfaces
Edges & depth
1px soft borders · three elevation tiers
Motion
160 / 260ms

Use it

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

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

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

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

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

When to use it

Good fit

  • Installable web apps (PWA) with an app shell and safe areas
  • Consumer SaaS, onboarding and checkout flows
  • Touch-first screens: controls are 44px tall

Think twice

  • Dense desktop tools, where 44px rows waste space
  • Products that need a strong retro or bold voice

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 Progressive

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

Tokens

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

Typography
--cml-font-body"Figtree", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayinheritsvar(--cml-font-body)
--cml-font-size0.9375rem0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display700600
Color
--cml-surfacelight-dark(#f3f2ef, #1c1a18)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #262321)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#1c1917, #f5f3f0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#6b645d, #a9a198)light-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#e7e5e1, #3a3632)light-dark(#e4e4e7, #27272a)
--cml-border-control#8a837blight-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-600), var(--cml-brand-500))light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-600-fg), var(--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-ringinheritsvar(--cml-accent-text)
--cml-dangerlight-dark(#b42318, #f97066)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-widthinherits1px
--cml-radius-control14px8px
--cml-radius-surface20px12px
--cml-radius-popover16px10px
--cml-shadow-controlinheritsnone
--cml-shadow-surfacevar(--cml-e3)0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width3px2px
Density
--cml-control-height2.75rem2.25rem
--cml-field-height2.75rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fast160ms180ms
--cml-duration-base260ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
All 170 custom properties this skin sets
--cml-surface-float
light-dark(#ffffff, #2f2c29)
--cml-sunk
light-dark(#e8e6e2, #2c2926)
--cml-sunk-pill
light-dark(#ffffff, #46413c)
--cml-strip
light-dark(#fbfaf9, #2b2825)
--cml-table-strip
light-dark(#f7f6f4, #2b2825)
--cml-chip
light-dark(#f1efec, #3a3632)
--cml-divider
light-dark(#efedea, #34302c)
--cml-line
light-dark(#d6d3ce, #4a4540)
--cml-switch-line
light-dark(#79736c, #8a837b)
--cml-rail
light-dark(#dcd9d4, #3d3935)
--cml-handle
light-dark(#c9c5bf, #5a554f)
--cml-inverse
light-dark(#292524, #ece9e5)
--cml-inverse-fg
light-dark(#fafaf9, #1c1917)
--cml-inverse-secondary
light-dark(#d6d3d1, #4a4540)
--cml-inverse-line
light-dark(rgb(255 255 255 / 0.3), rgb(28 25 23 / 0.3))
--cml-inverse-hover
light-dark(rgb(255 255 255 / 0.1), rgb(28 25 23 / 0.08))
--cml-e1
0 1px 2px light-dark(rgb(28 25 23 / 0.06), rgb(0 0 0 / 0.3))
--cml-e1-card
var(--cml-e1), 0 1px 1px light-dark(rgb(28 25 23 / 0.04), rgb(0 0 0 / 0.2))
--cml-e2
0 8px 24px -8px light-dark(rgb(28 25 23 / 0.18), rgb(0 0 0 / 0.55)), 0 2px 6px light-dark(rgb(28 25 23 / 0.06), rgb(0 0 0 / 0.25))
--cml-e3
0 24px 48px -16px light-dark(rgb(28 25 23 / 0.32), rgb(0 0 0 / 0.7)), 0 4px 12px light-dark(rgb(28 25 23 / 0.08), rgb(0 0 0 / 0.3))
--cml-e-fill
0 1px 2px rgb(28 25 23 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.12)
--cml-e-pill
0 1px 3px light-dark(rgb(28 25 23 / 0.14), rgb(0 0 0 / 0.4)), 0 0 0 1px light-dark(rgb(28 25 23 / 0.04), rgb(255 255 255 / 0.04))
--cml-font-body
"Figtree", system-ui, sans-serif
--cml-font-size
0.9375rem
--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-size-help
0.8125rem
--cml-font-weight-control
600
--cml-font-weight-label
600
--cml-font-weight-display
700
--cml-font-weight-error
600
--cml-surface
light-dark(#f3f2ef, #1c1a18)
--cml-surface-raised
light-dark(#ffffff, #262321)
--cml-fg
light-dark(#1c1917, #f5f3f0)
--cml-fg-secondary
light-dark(#4a4540, #d4cec7)
--cml-fg-muted
light-dark(#6b645d, #a9a198)
--cml-border
light-dark(#e7e5e1, #3a3632)
--cml-border-control
#8a837b
--cml-accent
light-dark(var(--cml-brand-600), var(--cml-brand-500))
--cml-accent-fg
light-dark(var(--cml-brand-600-fg), var(--cml-brand-500-fg))
--cml-accent-hover
light-dark(var(--cml-brand-600-hover), var(--cml-brand-500-hover))
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-backdrop
light-dark(rgb(28 25 23 / 0.45), rgb(0 0 0 / 0.6))
--cml-danger
light-dark(#b42318, #f97066)
--cml-success
light-dark(#13703a, #4ade80)
--cml-warning
light-dark(#854d0e, #facc15)
--cml-tone-soft
10%
--cml-tone-line
24%
--cml-item-highlight
var(--cml-chip)
--cml-radius-control
14px
--cml-radius-control-sm
11px
--cml-radius-control-lg
16px
--cml-radius-surface
20px
--cml-radius-popover
16px
--cml-radius-check
7px
--cml-radius-field
12px
--cml-radius-item
10px
--cml-shadow-surface
var(--cml-e3)
--cml-shadow-popover
var(--cml-e2)
--cml-focus-width
3px
--cml-focus-offset
2px
--cml-control-height
2.75rem
--cml-control-height-sm
2.25rem
--cml-control-height-lg
3.25rem
--cml-control-padding
1.125rem
--cml-control-padding-sm
0.875rem
--cml-control-padding-lg
1.5rem
--cml-surface-padding
1.25rem
--cml-button-solid-shadow
var(--cml-e-fill)
--cml-button-danger-shadow
var(--cml-e-fill)
--cml-button-outline-border
var(--cml-line)
--cml-button-outline-shadow
var(--cml-e1)
--cml-toggle-pressed-bg
var(--cml-accent)
--cml-toggle-pressed-fg
var(--cml-accent-fg)
--cml-toggle-pressed-shadow
inset 0 1px 0 rgb(255 255 255 / 0.12)
--cml-field-height
2.75rem
--cml-field-padding
0.875rem
--cml-field-shadow
0 0 0 0 transparent
--cml-field-focus-halo
0 0 0 0 transparent
--cml-check-size
1.375rem
--cml-check-border-width
2px
--cml-switch-width
2.875rem
--cml-switch-height
1.75rem
--cml-switch-border
1.5px
--cml-switch-pad
2px
--cml-switch-knob
21px
--cml-switch-knob-on
21px
--cml-switch-track
var(--cml-sunk)
--cml-switch-knob-bg
#ffffff
--cml-switch-knob-shadow
0 1px 3px rgb(28 25 23 / 0.3), 0 0 0 1px rgb(28 25 23 / 0.1)
--cml-switch-knob-on-shadow
0 1px 3px rgb(28 25 23 / 0.3)
--cml-slider-track-h
8px
--cml-slider-track
var(--cml-rail)
--cml-slider-thumb-w
1.5rem
--cml-slider-thumb-h
1.5rem
--cml-slider-thumb-border
1px solid var(--cml-switch-line)
--cml-slider-thumb-shadow
0 2px 6px rgb(28 25 23 / 0.18)
--cml-number-weight
600
--cml-number-btn-size
2.75rem
--cml-number-btn-bg
light-dark(#f5f4f2, #2b2825)
--cml-number-divider
1px solid var(--cml-border)
--cml-popover-bg
var(--cml-surface-float)
--cml-popover-padding
6px
--cml-item-height
2.5rem
--cml-item-padding
0.75rem
--cml-tabs-gap
2px
--cml-tabs-list-bg
var(--cml-sunk)
--cml-tabs-list-padding
4px
--cml-tabs-list-radius
var(--cml-radius-pill)
--cml-tab-radius
var(--cml-radius-pill)
--cml-tab-active-bg
var(--cml-accent)
--cml-tab-active-fg
var(--cml-accent-fg)
--cml-tab-active-shadow
0 1px 2px rgb(28 25 23 / 0.14)
--cml-card-shadow
var(--cml-e1-card)
--cml-avatar-ring
var(--cml-surface)
--cml-skeleton
light-dark(#eceae6, #322e2b)
--cml-tooltip-bg
var(--cml-inverse)
--cml-tooltip-fg
var(--cml-inverse-fg)
--cml-scrollbar-size
8px
--cml-scrollbar-track
transparent
--cml-scrollbar-thumb
light-dark(#a8a29e, #6b645d)
--cml-scrollbar-idle-opacity
0.7
--cml-duration-fast
160ms
--cml-duration-base
260ms
--cml-ease-standard
cubic-bezier(0.2, 0, 0, 1)
--cml-motion-distance
12px
--cml-motion-scale
0.97
--cml-press-translate
1px
--cml-avatar-1-bg
light-dark(var(--cml-brand-100), var(--cml-brand-900))
--cml-avatar-1-fg
light-dark(var(--cml-brand-800), var(--cml-brand-200))
--cml-avatar-2-bg
light-dark(#dcf2e3, #183a25)
--cml-avatar-2-fg
light-dark(#14532d, #a7f3c0)
--cml-avatar-3-bg
light-dark(#fcefc9, #3d2e0f)
--cml-avatar-3-fg
light-dark(#78350f, #fcd98a)
--cml-app-shell-bg
light-dark(#f3f2ef, #1c1a18)
--cml-app-shell-header-bg
light-dark(#ffffff, #262321)
--cml-app-shell-header-border
1px solid var(--cml-border-subtle)
--cml-sidebar-bg
light-dark(#f3f2ef, #1c1a18)
--cml-sidebar-border
1px solid var(--cml-border-subtle)
--cml-sidebar-brand-border
1px solid var(--cml-border-subtle)
--cml-sidebar-footer-border
1px solid var(--cml-border-subtle)
--cml-sidebar-item-radius
6px
--cml-sidebar-item-active-bg
light-dark(#ffffff, #262321)
--cml-sidebar-item-active-fg
var(--cml-fg)
--cml-sidebar-indicator-bg
var(--cml-brand)
--cml-sidebar-indicator-width
3px
--cml-nav-popup-bg
light-dark(#ffffff, #2f2c29)
--cml-nav-popup-border
1px solid var(--cml-border-subtle)
--cml-nav-popup-radius
8px
--cml-menubar-bg
light-dark(#ffffff, #262321)
--cml-menubar-border
1px solid var(--cml-border-subtle)
--cml-menubar-radius
6px
--cml-toolbar-bg
light-dark(#ffffff, #262321)
--cml-toolbar-border
1px solid var(--cml-border-subtle)
--cml-toolbar-radius
6px
--cml-cmd-bg
light-dark(#ffffff, #262321)
--cml-cmd-border
1px solid var(--cml-border-subtle)
--cml-cmd-radius
10px
--cml-hover-card-bg
light-dark(#ffffff, #2f2c29)
--cml-hover-card-border
1px solid var(--cml-border-subtle)
--cml-hover-card-radius
8px
--cml-toggletip-bg
light-dark(#ffffff, #2f2c29)
--cml-toggletip-border
1px solid var(--cml-border-subtle)
--cml-toggletip-radius
6px
--cml-splitter-border
1px solid var(--cml-border-subtle)
--cml-splitter-handle-bg
light-dark(#f3f2ef, #1c1a18)
--cml-splitter-radius
4px

Same family

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

MaterialInspired by Material Design 3: tonal surfaces from one brand color and pill-shaped buttons.CupertinoInspired by Apple’s Human Interface Guidelines: hairlines, grouped lists and continuous corners.
Was this page helpful? · Edit this page on GitHub