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

Y2K

Millennium plastic and chrome: glossy jelly buttons and Aqua pinstripes.

Y2K

Millennium plastic and chrome: glossy jelly buttons and Aqua pinstripes.

Exo 2

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Bold
Fonts
Exo 2
Radius
pill controls · 20px surfaces
Edges & depth
chrome frames · gloss · soft drop shadow
Motion
160 / 280ms

Use it

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

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

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

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

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

When to use it

Good fit

  • Music, fashion and nostalgic brands
  • Campaign pages and limited editions

Think twice

  • Sober B2B products
  • Data-dense screens: frames and stripes compete with the data

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 Y2K

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

Tokens

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

Typography
--cml-font-body"Exo 2", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-display"Exo 2", system-ui, sans-serifvar(--cml-font-body)
--cml-font-size0.875rem0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display700600
Color
--cml-surfacelight-dark(#e2e8f2, #0a1128)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #121b3a)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#0b1530, #eef2ff)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#4a5672, #a0abc9)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-y2k-hair) = light-dark(#e3e8f0, #26304f)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#6b7896, #7884a6)light-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-textinheritslight-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-control999px8px
--cml-radius-surface20px12px
--cml-radius-popover18px10px
--cml-shadow-controlinset 0 1px 0 var(--cml-y2k-gleam), 0 1px 2px light-dark(rgb(11 21 48 / 0.14), rgb(0 0 0 / 0.4))none
--cml-shadow-surface0 18px 40px -16px light-dark(rgb(11 21 48 / 0.6), rgb(0 0 0 / 0.75))0 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.25rem2.25rem
--cml-field-height2.375rem2.375rem
--cml-surface-paddinginherits1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fast160ms180ms
--cml-duration-baseinherits280ms
--cml-ease-standardinheritscubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate1px0px
All 152 custom properties this skin sets
--cml-y2k-chrome-1
light-dark(#ffffff, #3d4a6e)
--cml-y2k-chrome-2
light-dark(#f0f3f8, #2c3758)
--cml-y2k-chrome-3
light-dark(#dfe5ef, #1f2848)
--cml-y2k-chrome-4
light-dark(#eef1f7, #2a3555)
--cml-y2k-chrome
linear-gradient(180deg, var(--cml-y2k-chrome-1) 0%, var(--cml-y2k-chrome-2) 48%, var(--cml-y2k-chrome-3) 52%, var(--cml-y2k-chrome-4) 100%)
--cml-y2k-chrome-line
light-dark(#7f8aa6, #6e7a9c)
--cml-y2k-chrome-soft-line
light-dark(#a9b4c8, #4a5577)
--cml-y2k-gleam
light-dark(#ffffff, rgb(255 255 255 / 0.16))
--cml-y2k-frame
linear-gradient(180deg, light-dark(#b8c2d3, #6a7699) 0%, light-dark(#8f9bb3, #3c4769) 42%, light-dark(#eef1f6, #7c88aa) 56%, light-dark(#7d89a3, #2e3858) 100%)
--cml-y2k-fill
linear-gradient(var(--cml-surface-raised), var(--cml-surface-raised))
--cml-y2k-recess
linear-gradient(180deg, light-dark(#cfd7e4, #070c1e), light-dark(#e9edf4, #131b38))
--cml-y2k-recess-line
light-dark(#8f9bb3, #4a5577)
--cml-y2k-recess-shadow
inset 0 1px 2px light-dark(rgb(11 21 48 / 0.22), rgb(0 0 0 / 0.55)), 0 1px 0 light-dark(#ffffff, rgb(255 255 255 / 0.05))
--cml-y2k-bead
radial-gradient(circle at 38% 30%, #ffffff 0 16%, light-dark(#e3e8f1, #c9d1e2) 48%, light-dark(#9fabc2, #6f7c9c) 100%)
--cml-y2k-rim
color-mix(in oklab, var(--cml-accent) 72%, #000000)
--cml-y2k-danger-rim
color-mix(in oklab, var(--cml-danger) 72%, #000000)
--cml-y2k-glow
radial-gradient(50% 100% at 50% 100%, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0))
--cml-y2k-shine
linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.2))
--cml-y2k-gel
linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 55%)
--cml-y2k-shade
light-dark(rgb(11 21 48 / 0.2), rgb(0 0 0 / 0.45))
--cml-y2k-pressed
inset 0 2px 4px rgb(0 0 0 / 0.25)
--cml-y2k-iris
linear-gradient(90deg, light-dark(#9be7ff, #3aa7cf), light-dark(#c4b5fd, #8b7be0) 35%, light-dark(#fbcfe8, #c779a8) 65%, light-dark(#fde68a, #c9a54a))
--cml-y2k-iris-soft
linear-gradient(100deg, light-dark(#d4f1ff, #17385a) 0%, light-dark(#e2dbff, #2c2a62) 38%, light-dark(#ffdcef, #4b2550) 68%, light-dark(#fff0c9, #4a3a1c) 100%)
--cml-y2k-ink-section
light-dark(#3a4766, #b9c2dc)
--cml-y2k-hair
light-dark(#e3e8f0, #26304f)
--cml-y2k-zebra
light-dark(#f4f6fb, #172042)
--cml-y2k-backdrop
repeating-linear-gradient(180deg, light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.035)) 0 2px, rgb(255 255 255 / 0) 2px 4px), radial-gradient(ellipse 60% 45% at 88% 0%, light-dark(rgb(255 255 255 / 0), rgb(124 92 255 / 0.14)), rgb(124 92 255 / 0) 70%), linear-gradient(180deg, light-dark(#e7ecf5, #0c1430), light-dark(#dde4f0, #070c20))
--cml-font-body
"Exo 2", system-ui, sans-serif
--cml-font-display
"Exo 2", system-ui, 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.8125rem
--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-letter-spacing-control
0.01em
--cml-surface
light-dark(#e2e8f2, #0a1128)
--cml-surface-raised
light-dark(#ffffff, #121b3a)
--cml-fg
light-dark(#0b1530, #eef2ff)
--cml-fg-secondary
light-dark(#2f3b57, #c3cbe2)
--cml-fg-muted
light-dark(#4a5672, #a0abc9)
--cml-border
var(--cml-y2k-hair)
--cml-border-control
light-dark(#6b7896, #7884a6)
--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-backdrop
light-dark(rgb(20 32 72 / 0.42), rgb(2 5 18 / 0.66))
--cml-item-highlight
light-dark(rgb(11 21 48 / 0.06), rgb(255 255 255 / 0.08))
--cml-danger
light-dark(#b42318, #f97066)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#166534, #4ade80)
--cml-warning
light-dark(#854d0e, #facc15)
--cml-disabled-opacity
0.5
--cml-radius-control
999px
--cml-radius-control-sm
999px
--cml-radius-control-lg
999px
--cml-radius-surface
20px
--cml-radius-popover
18px
--cml-radius-check
7px
--cml-radius-item
999px
--cml-radius-field
999px
--cml-shadow-control
inset 0 1px 0 var(--cml-y2k-gleam), 0 1px 2px light-dark(rgb(11 21 48 / 0.14), rgb(0 0 0 / 0.4))
--cml-shadow-control-active
inset 0 2px 3px light-dark(rgb(11 21 48 / 0.2), rgb(0 0 0 / 0.45))
--cml-shadow-surface
0 18px 40px -16px light-dark(rgb(11 21 48 / 0.6), rgb(0 0 0 / 0.75))
--cml-shadow-popover
0 10px 24px -12px light-dark(rgb(11 21 48 / 0.4), rgb(0 0 0 / 0.7)), 0 1px 2px light-dark(rgb(11 21 48 / 0.08), rgb(0 0 0 / 0.3))
--cml-control-height
2.25rem
--cml-control-height-sm
1.875rem
--cml-control-height-lg
2.75rem
--cml-control-padding
1rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.375rem
--cml-item-height
2rem
--cml-duration-fast
160ms
--cml-motion-scale
0.96
--cml-press-translate
1px
--cml-button-solid-shadow
inset 0 -1px 0 rgb(255 255 255 / 0.22), 0 1px 1px var(--cml-y2k-shade), 0 3px 8px -3px color-mix(in srgb, var(--cml-accent) 60%, transparent)
--cml-button-danger-shadow
inset 0 -1px 0 rgb(255 255 255 / 0.22), 0 1px 1px var(--cml-y2k-shade), 0 3px 8px -3px color-mix(in srgb, var(--cml-danger) 55%, transparent)
--cml-button-outline-bg
var(--cml-y2k-chrome-2)
--cml-button-outline-border
var(--cml-y2k-chrome-line)
--cml-button-outline-shadow
var(--cml-shadow-control)
--cml-toggle-pressed-bg
var(--cml-accent)
--cml-toggle-pressed-fg
var(--cml-accent-fg)
--cml-toggle-pressed-shadow
var(--cml-button-solid-shadow)
--cml-field-height
2.375rem
--cml-field-padding
1rem
--cml-field-bg
light-dark(#ffffff, #0a1230)
--cml-field-shadow
inset 0 2px 3px light-dark(rgb(11 21 48 / 0.1), rgb(0 0 0 / 0.4)), 0 1px 0 light-dark(#ffffff, rgb(255 255 255 / 0.05))
--cml-field-focus-halo
0 0 0 6px color-mix(in srgb, var(--cml-accent) 14%, transparent)
--cml-check-size
1.25rem
--cml-check-border-width
1.5px
--cml-check-shadow
inset 0 1px 0 var(--cml-y2k-gleam), 0 1px 1px light-dark(rgb(11 21 48 / 0.12), rgb(0 0 0 / 0.4))
--cml-check-on-image
var(--cml-y2k-gel)
--cml-check-on-border
var(--cml-y2k-rim)
--cml-switch-width
2.625rem
--cml-switch-height
1.5rem
--cml-switch-border
1.5px
--cml-switch-pad
2px
--cml-switch-knob
18px
--cml-switch-knob-on
18px
--cml-switch-track
var(--cml-y2k-chrome-3)
--cml-switch-on-shadow
inset 0 1px 2px rgb(0 0 0 / 0.2)
--cml-switch-knob-bg
light-dark(#e3e8f1, #c9d1e2)
--cml-switch-knob-on-bg
light-dark(#e3e8f1, #c9d1e2)
--cml-switch-knob-shadow
0 0 0 1px light-dark(#5d6a88, #0a1128), 0 1px 2px var(--cml-y2k-shade)
--cml-switch-knob-on-shadow
0 0 0 1px var(--cml-y2k-rim), 0 1px 2px var(--cml-y2k-shade)
--cml-slider-track-h
10px
--cml-slider-track
var(--cml-y2k-chrome-3)
--cml-slider-fill-inset
-1px
--cml-slider-fill-image
linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 60%)
--cml-slider-thumb-w
1.375rem
--cml-slider-thumb-h
1.375rem
--cml-slider-thumb-bg
light-dark(#e3e8f1, #c9d1e2)
--cml-slider-thumb-border
1.5px solid light-dark(#4f5b78, #0a1128)
--cml-slider-thumb-shadow
0 1px 3px light-dark(rgb(11 21 48 / 0.32), rgb(0 0 0 / 0.6))
--cml-number-weight
600
--cml-number-btn-size
2.5rem
--cml-number-btn-bg
var(--cml-y2k-chrome-2)
--cml-number-divider
1px solid var(--cml-y2k-chrome-soft-line)
--cml-select-trigger-shadow
var(--cml-shadow-control)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
transparent
--cml-popover-border-width
2px
--cml-popover-padding
5px
--cml-item-padding
0.75rem
--cml-item-highlight-fg
var(--cml-accent-fg)
--cml-dialog-border
transparent
--cml-tabs-gap
2px
--cml-tabs-list-bg
var(--cml-y2k-chrome-3)
--cml-tabs-list-border
var(--cml-y2k-recess-line)
--cml-tabs-list-shadow
var(--cml-y2k-recess-shadow)
--cml-tabs-list-padding
3px
--cml-tabs-list-radius
999px
--cml-tab-radius
999px
--cml-tab-active-fg
var(--cml-fg)
--cml-tab-active-shadow
inset 0 0 0 1px var(--cml-y2k-chrome-line), 0 1px 3px light-dark(rgb(11 21 48 / 0.28), rgb(0 0 0 / 0.5))
--cml-card-border
transparent
--cml-card-shadow
0 1px 2px light-dark(rgb(11 21 48 / 0.08), rgb(0 0 0 / 0.3)), 0 14px 30px -18px light-dark(rgb(11 21 48 / 0.35), rgb(0 0 0 / 0.7))
--cml-avatar-ring
var(--cml-surface-raised)
--cml-skeleton
light-dark(#dfe5ef, #1e2747)
--cml-tooltip-bg
light-dark(#121c3a, #c3cbdc)
--cml-tooltip-fg
light-dark(#f4f7ff, #0b1530)
--cml-scrollbar-size
12px
--cml-scrollbar-track
var(--cml-y2k-chrome-3)
--cml-scrollbar-track-shadow
inset 0 0 0 1px var(--cml-y2k-recess-line), inset 0 1px 2px light-dark(rgb(11 21 48 / 0.22), rgb(0 0 0 / 0.55))
--cml-scrollbar-thumb
var(--cml-accent)
--cml-scrollbar-thumb-shadow
inset 0 0 0 1px var(--cml-y2k-rim)
--cml-scrollbar-idle-opacity
1

Same family

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

NeubrutalismThick ink lines, hard shadows and loud color. Proudly unpolished.RetroThe classic desktop, rebuilt with real contrast and keyboard support.Retro pixel8-bit edges: 4px pixel borders, stepped corners, chunky type.
Was this page helpful? · Edit this page on GitHub