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

Retro

The classic desktop, rebuilt with real contrast and keyboard support.

Retro

The classic desktop, rebuilt with real contrast and keyboard support.

IBM Plex Sans

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Bold
Fonts
IBM Plex Sans
Radius
0px controls · 0px surfaces
Edges & depth
four-color bevels · no blur · square
Motion
40 / 80ms · linear

Use it

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

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

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

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

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

When to use it

Good fit

  • Nostalgic products, games and fun internal tools
  • Tool-like apps with windows, toolbars and lists

Think twice

  • Anything that must look current
  • Products that need to feel soft or premium

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 Retro

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

Tokens

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

Typography
--cml-font-body"IBM Plex Sans", ui-sans-serif, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayinheritsvar(--cml-font-body)
--cml-font-size0.875rem0.9375rem
--cml-font-weight-control400500
--cml-font-weight-display700600
Color
--cml-surfacevar(--cml-face) = light-dark(#c0c0c0, #3c3c3c)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-face) = light-dark(#c0c0c0, #3c3c3c)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#000000, #f2f2f2)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#444444, #c4c4c4)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-sh) = light-dark(#808080, #1f1f1f)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#0a0a0a, #a0a0a0)light-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-800), var(--cml-brand-600))light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-800-fg), var(--cml-brand-600-fg))light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-800), var(--cml-brand-300))light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringinheritsvar(--cml-accent-text)
--cml-dangerlight-dark(#900000, #ff9b94)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-width0px1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlvar(--cml-raised)none
--cml-shadow-surfacevar(--cml-window)0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width2px2px
Density
--cml-control-height2rem2.25rem
--cml-field-height2.125rem2.375rem
--cml-surface-padding0.75rem1.5rem
--cml-gap0.4375rem0.5rem
Motion
--cml-duration-fast40ms180ms
--cml-duration-base80ms280ms
--cml-ease-standardlinearcubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
All 155 custom properties this skin sets
--cml-font-body
"IBM Plex Sans", ui-sans-serif, sans-serif
--cml-font-size
0.875rem
--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.875rem
--cml-font-size-help
0.8125rem
--cml-font-weight-control
400
--cml-font-weight-label
400
--cml-font-weight-display
700
--cml-font-weight-error
500
--cml-face
light-dark(#c0c0c0, #3c3c3c)
--cml-hi
light-dark(#ffffff, #8a8a8a)
--cml-lt
light-dark(#dfdfdf, #5a5a5a)
--cml-sh
light-dark(#808080, #1f1f1f)
--cml-dk
light-dark(#0a0a0a, #000000)
--cml-field-edge
light-dark(#8c8c8c, #767676)
--cml-well
light-dark(#ffffff, #141414)
--cml-dither
repeating-conic-gradient(light-dark(#ffffff, #5a5a5a) 0 25%, var(--cml-face) 0 50%) 0 0 / 2px 2px
--cml-raised
inset -1px -1px var(--cml-dk), inset 1px 1px var(--cml-hi), inset -2px -2px var(--cml-sh), inset 2px 2px var(--cml-lt)
--cml-window
inset -1px -1px var(--cml-dk), inset 1px 1px var(--cml-lt), inset -2px -2px var(--cml-sh), inset 2px 2px var(--cml-hi)
--cml-sunken
inset -1px -1px var(--cml-hi), inset 1px 1px var(--cml-dk), inset -2px -2px var(--cml-lt), inset 2px 2px var(--cml-sh)
--cml-field-bevel
inset -1px -1px var(--cml-hi), inset 1px 1px var(--cml-sh), inset -2px -2px var(--cml-field-edge), inset 2px 2px var(--cml-dk)
--cml-drop
2px 2px 0 rgb(0 0 0 / 0.35)
--cml-titlebar
linear-gradient(90deg, var(--cml-brand-900), var(--cml-brand-700))
--cml-titlebar-fg
var(--cml-brand-700-fg)
--cml-etched
light-dark(#808080, #7a7a7a)
--cml-etched-shadow
light-dark(#ffffff, #1f1f1f)
--cml-surface
var(--cml-face)
--cml-surface-raised
var(--cml-face)
--cml-fg
light-dark(#000000, #f2f2f2)
--cml-fg-secondary
light-dark(#222222, #dedede)
--cml-fg-muted
light-dark(#444444, #c4c4c4)
--cml-border
var(--cml-sh)
--cml-border-control
light-dark(#0a0a0a, #a0a0a0)
--cml-accent
light-dark(var(--cml-brand-800), var(--cml-brand-600))
--cml-accent-fg
light-dark(var(--cml-brand-800-fg), var(--cml-brand-600-fg))
--cml-accent-hover
var(--cml-accent)
--cml-accent-text
light-dark(var(--cml-brand-800), var(--cml-brand-300))
--cml-backdrop
light-dark(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.6))
--cml-danger
light-dark(#900000, #ff9b94)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#0a5c0a, #7ddc7d)
--cml-warning
light-dark(#6b4400, #ffd34d)
--cml-tone-soft
11%
--cml-tone-line
100%
--cml-item-highlight
var(--cml-accent)
--cml-item-highlight-fg
var(--cml-accent-fg)
--cml-item-check
var(--cml-fg)
--cml-disabled-opacity
0.55
--cml-border-width
0px
--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-radio
50%
--cml-radius-pill
0
--cml-radius-item
0
--cml-radius-field
0
--cml-shadow-control
var(--cml-raised)
--cml-shadow-control-active
var(--cml-sunken)
--cml-shadow-surface
var(--cml-window)
--cml-shadow-popover
var(--cml-window), var(--cml-drop)
--cml-focus-width
2px
--cml-focus-offset
1px
--cml-control-height
2rem
--cml-control-height-sm
1.75rem
--cml-control-height-lg
2.375rem
--cml-control-padding
0.875rem
--cml-control-padding-sm
0.625rem
--cml-control-padding-lg
1.25rem
--cml-surface-padding
0.75rem
--cml-gap
0.4375rem
--cml-button-solid-shadow
inset -1px -1px var(--cml-dk), inset 1px 1px color-mix(in oklab, var(--cml-accent), white 40%), inset -2px -2px color-mix(in oklab, var(--cml-accent), black 45%), inset 2px 2px color-mix(in oklab, var(--cml-accent), white 20%), 0 0 0 1px var(--cml-dk)
--cml-button-danger-shadow
inset -1px -1px var(--cml-dk), inset 1px 1px #e08080, inset -2px -2px #560000, inset 2px 2px #c23a3a, 0 0 0 1px var(--cml-dk)
--cml-button-outline-bg
var(--cml-face)
--cml-button-outline-border
transparent
--cml-button-outline-shadow
var(--cml-raised)
--cml-button-disabled-shadow
var(--cml-raised)
--cml-toggle-pressed-bg
var(--cml-face)
--cml-toggle-pressed-fg
var(--cml-fg)
--cml-toggle-pressed-shadow
var(--cml-sunken)
--cml-field-height
2.125rem
--cml-field-padding
0.5rem
--cml-field-bg
var(--cml-well)
--cml-field-shadow
var(--cml-field-bevel)
--cml-field-border-width
0px
--cml-field-focus-halo
0 0 0 0 transparent
--cml-field-gap
0.3125rem
--cml-check-size
1rem
--cml-check-border-width
0px
--cml-check-shadow
var(--cml-field-bevel)
--cml-check-on-border
transparent
--cml-check-on-shadow
var(--cml-field-bevel)
--cml-switch-width
2.5rem
--cml-switch-height
1.25rem
--cml-switch-border
0px
--cml-switch-pad
2px
--cml-switch-knob
16px
--cml-switch-knob-on
16px
--cml-switch-track
var(--cml-well)
--cml-switch-on-shadow
var(--cml-field-bevel)
--cml-switch-knob-bg
var(--cml-face)
--cml-switch-knob-shadow
var(--cml-raised)
--cml-switch-knob-on-bg
var(--cml-face)
--cml-switch-knob-on-shadow
var(--cml-raised)
--cml-slider-track-h
8px
--cml-slider-track
var(--cml-well)
--cml-slider-track-border
0px
--cml-slider-fill-inset
2px
--cml-slider-thumb-w
0.75rem
--cml-slider-thumb-h
1.375rem
--cml-slider-thumb-bg
var(--cml-face)
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
var(--cml-raised)
--cml-number-padding
2px
--cml-number-gap
2px
--cml-number-weight
500
--cml-number-btn-size
1.75rem
--cml-number-btn-bg
var(--cml-face)
--cml-number-btn-shadow
var(--cml-raised)
--cml-number-divider
0
--cml-select-trigger-shadow
var(--cml-field-bevel)
--cml-popover-bg
var(--cml-face)
--cml-popover-border
transparent
--cml-popover-padding
3px
--cml-item-height
1.75rem
--cml-item-padding
0.375rem
--cml-dialog-border
transparent
--cml-tabs-gap
0
--cml-tab-active-shadow
none
--cml-card-border
transparent
--cml-card-shadow
var(--cml-window)
--cml-avatar-bg
color-mix(in oklab, var(--cml-accent) 22%, var(--cml-well))
--cml-avatar-fg
light-dark(var(--cml-brand-900), var(--cml-brand-200))
--cml-avatar-ring
var(--cml-face)
--cml-skeleton
var(--cml-face)
--cml-tooltip-bg
light-dark(#ffffe1, #4a4a2e)
--cml-tooltip-fg
light-dark(#000000, #f5f5dc)
--cml-scrollbar-size
16px
--cml-scrollbar-track
var(--cml-face)
--cml-scrollbar-track-shadow
none
--cml-scrollbar-thumb
var(--cml-face)
--cml-scrollbar-thumb-shadow
var(--cml-raised)
--cml-scrollbar-idle-opacity
1
--cml-duration-fast
40ms
--cml-duration-base
80ms
--cml-ease-standard
linear
--cml-motion-distance
0px
--cml-motion-scale
1
--cml-press-translate
1px
--cml-spinner-ease
steps(2)

Same family

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

NeubrutalismThick ink lines, hard shadows and loud color. Proudly unpolished.Retro pixel8-bit edges: 4px pixel borders, stepped corners, chunky type.Y2KMillennium plastic and chrome: glossy jelly buttons and Aqua pinstripes.
Was this page helpful? · Edit this page on GitHub