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

Retro pixel

8-bit edges: 4px pixel borders, stepped corners, chunky type.

Retro pixel

8-bit edges: 4px pixel borders, stepped corners, chunky type.

Pixelify Sans + Press Start 2P

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Bold
Fonts
Pixelify Sans + Press Start 2P
Radius
0px controls · 0px surfaces
Edges & depth
4px pixel borders · stepped in-box shading
Motion
100 / 160ms · steps(3, end)

Use it

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

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

Fonts are not bundled. The skin asks for Pixelify Sans + Press Start 2P 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 { Pixelify_Sans, Press_Start_2P } from "next/font/google";

const pixelifysans = Pixelify_Sans({ subsets: ["latin"], variable: "--font-pixelifysans" });
const pressstart2p = Press_Start_2P({ subsets: ["latin"], weight: "400", variable: "--font-pressstart2p" });

<html className={`${pixelifysans.variable} ${pressstart2p.variable}`}>

When to use it

Good fit

  • Games, hackathons and playful launches
  • Short, punchy screens: scores, menus, sign-ups

Think twice

  • Long-form reading
  • Accented headings: Press Start 2P covers basic Latin only, so accents fall back to Pixelify Sans

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 pixel

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

Tokens

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

Typography
--cml-font-body"Pixelify Sans", ui-monospace, monospace"Inter", system-ui, sans-serif
--cml-font-display"Press Start 2P", "Pixelify Sans", ui-monospace, monospacevar(--cml-font-body)
--cml-font-size1rem0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display400600
Color
--cml-surfacelight-dark(#fbfaf5, #141414)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #1c1c1f)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#17171c, #f0f0f0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#4a4a55, #c2c2c2)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-fg) = light-dark(#17171c, #f0f0f0)light-dark(#e4e4e7, #27272a)
--cml-border-controlvar(--cml-fg) = light-dark(#17171c, #f0f0f0)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-textinheritslight-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringinheritsvar(--cml-accent-text)
--cml-dangerlight-dark(#b0231a, #e76e55)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-widthvar(--cml-pixel) = 4px1px
--cml-radius-control08px
--cml-radius-surface012px
--cml-radius-popover010px
--cml-shadow-controlinset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 var(--cml-shade)none
--cml-shadow-surface6px 6px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))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.625rem2.25rem
--cml-field-height2.75rem2.375rem
--cml-surface-paddinginherits1.5rem
--cml-gap0.75rem0.5rem
Motion
--cml-duration-fast100ms180ms
--cml-duration-base160ms280ms
--cml-ease-standardsteps(3, end)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateinherits0px
All 125 custom properties this skin sets
--cml-font-body
"Pixelify Sans", ui-monospace, monospace
--cml-font-display
"Press Start 2P", "Pixelify Sans", ui-monospace, monospace
--cml-font-size
1rem
--cml-font-size-control
1rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1.125rem
--cml-font-size-field
1.125rem
--cml-font-size-label
1rem
--cml-font-size-help
0.9375rem
--cml-font-weight-control
600
--cml-font-weight-label
700
--cml-font-weight-display
400
--cml-font-weight-error
600
--cml-surface
light-dark(#fbfaf5, #141414)
--cml-surface-raised
light-dark(#ffffff, #1c1c1f)
--cml-fg
light-dark(#17171c, #f0f0f0)
--cml-fg-secondary
light-dark(#4a4a55, #c2c2c2)
--cml-fg-muted
light-dark(#4a4a55, #c2c2c2)
--cml-border
var(--cml-fg)
--cml-border-control
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-disabled-opacity
0.55
--cml-pixel
4px
--cml-shade
light-dark(#c9ccd8, #3a3a44)
--cml-sunken
light-dark(#dcdde4, #2b2b31)
--cml-accent-shade
color-mix(in oklab, var(--cml-accent), black 30%)
--cml-accent-light
color-mix(in oklab, var(--cml-accent), white 18%)
--cml-border-width
var(--cml-pixel)
--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
0
--cml-radius-pill
0
--cml-shadow-control
inset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 var(--cml-shade)
--cml-shadow-control-active
inset var(--cml-pixel) var(--cml-pixel) 0 var(--cml-shade)
--cml-shadow-surface
6px 6px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))
--cml-shadow-popover
4px 4px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))
--cml-focus-offset
3px
--cml-control-height
2.625rem
--cml-control-height-sm
2.125rem
--cml-control-height-lg
3.125rem
--cml-control-padding
1.125rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.5rem
--cml-gap
0.75rem
--cml-button-solid-shadow
inset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 var(--cml-accent-shade), inset var(--cml-pixel) var(--cml-pixel) 0 var(--cml-accent-light)
--cml-button-outline-border
var(--cml-fg)
--cml-button-outline-shadow
var(--cml-shadow-control)
--cml-button-ghost-decoration
underline 2px
--cml-toggle-pressed-shadow
inset var(--cml-pixel) var(--cml-pixel) 0 rgb(0 0 0 / 0.6)
--cml-field-height
2.75rem
--cml-field-padding
0.875rem
--cml-field-border-width
var(--cml-pixel)
--cml-field-shadow
inset var(--cml-pixel) var(--cml-pixel) 0 var(--cml-sunken)
--cml-field-focus-halo
0 0 0 0 transparent
--cml-field-gap
0.4375rem
--cml-check-size
1.5rem
--cml-check-border-width
3px
--cml-check-shadow
inset 3px 3px 0 var(--cml-sunken)
--cml-check-on-border
var(--cml-fg)
--cml-check-on-shadow
inset -3px -3px 0 var(--cml-accent-shade)
--cml-switch-width
3.25rem
--cml-switch-height
1.75rem
--cml-switch-border
3px
--cml-switch-knob
16px
--cml-switch-knob-on
16px
--cml-switch-knob-bg
var(--cml-fg)
--cml-switch-on-shadow
inset -3px -3px 0 var(--cml-accent-shade)
--cml-switch-knob-on-bg
#ffffff
--cml-slider-track-h
14px
--cml-slider-track
var(--cml-surface-raised)
--cml-slider-track-border
3px
--cml-slider-fill-image
repeating-linear-gradient(90deg, transparent 0 6px, var(--cml-accent-shade) 6px 8px)
--cml-slider-thumb-w
1rem
--cml-slider-thumb-h
1.75rem
--cml-slider-thumb-bg
var(--cml-fg)
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
inset 3px 3px 0 color-mix(in oklab, var(--cml-fg), white 30%)
--cml-number-weight
700
--cml-number-btn-size
2.5rem
--cml-number-btn-bg
var(--cml-surface-raised)
--cml-number-btn-shadow
var(--cml-shadow-control)
--cml-number-divider
var(--cml-pixel) solid var(--cml-fg)
--cml-select-trigger-shadow
var(--cml-shadow-control)
--cml-popover-bg
var(--cml-surface-raised)
--cml-popover-border
var(--cml-fg)
--cml-popover-border-width
var(--cml-pixel)
--cml-item-highlight-fg
var(--cml-surface-raised)
--cml-radius-item
0
--cml-dialog-border
var(--cml-fg)
--cml-tabs-list-border
var(--cml-fg)
--cml-tab-active-bg
var(--cml-fg)
--cml-tab-active-fg
var(--cml-surface)
--cml-tab-active-shadow
none
--cml-duration-fast
100ms
--cml-duration-base
160ms
--cml-ease-standard
steps(3, end)
--cml-motion-scale
1
--cml-spinner-ease
steps(8)
--cml-success
light-dark(#2e6b14, #92cc41)
--cml-warning
light-dark(#7a5a00, #f7d51d)
--cml-danger
light-dark(#b0231a, #e76e55)
--cml-fill-info
#7ec2f5
--cml-fill-success
#92cc41
--cml-fill-warning
#f7d51d
--cml-fill-danger
#e76e55
--cml-ink
#17171c
--cml-card-border
var(--cml-fg)
--cml-card-shadow
6px 6px 0 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6))
--cml-avatar-bg
color-mix(in oklab, var(--cml-accent), #ffffff 65%)
--cml-avatar-fg
var(--cml-ink)
--cml-skeleton
var(--cml-sunken)
--cml-accordion-chevron
none
--cml-accordion-plus
inline-block
--cml-menu-icons
none
--cml-scrollbar-size
16px
--cml-scrollbar-track
var(--cml-sunken)
--cml-scrollbar-track-shadow
inset 0 0 0 3px var(--cml-fg)
--cml-scrollbar-thumb
var(--cml-fg)
--cml-scrollbar-idle-opacity
1
--cml-button-danger-shadow
inset calc(-1 * var(--cml-pixel)) calc(-1 * var(--cml-pixel)) 0 color-mix(in oklab, var(--cml-danger), black 30%), inset var(--cml-pixel) var(--cml-pixel) 0 color-mix(in oklab, var(--cml-danger), white 18%)

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.Y2KMillennium plastic and chrome: glossy jelly buttons and Aqua pinstripes.
Was this page helpful? · Edit this page on GitHub