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

Neumorphism

One surface shaped by light: raised for actions, sunken for inputs.

Neumorphism

One surface shaped by light: raised for actions, sunken for inputs.

Manrope

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Soft depth
Fonts
Manrope
Radius
12px controls · 24px surfaces
Edges & depth
paired light and dark shadows · 1px borders on fields
Motion
220 / 320ms

Use it

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

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

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

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

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

When to use it

Good fit

  • Small control surfaces: players, smart home, calculators
  • Settings panels with a handful of switches and sliders

Think twice

  • Dense forms: the extra borders that keep 3:1 make long forms busy
  • Data tables and lists with many rows

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 Neumorphism

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

Tokens

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

Typography
--cml-font-body"Manrope", "Inter", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayinheritsvar(--cml-font-body)
--cml-font-sizeinherits0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display800600
Color
--cml-surfacelight-dark(#e7eaf0, #2a2d32)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-surface) = light-dark(#e7eaf0, #2a2d32)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#2f3645, #e2e8f0)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#586174, #a0aec0)light-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#cfd4dd, #3a3e45)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#7c8494, #7d8592)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(#a51d14, #fca5a5)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-widthinherits1px
--cml-radius-control12px8px
--cml-radius-surface24px12px
--cml-radius-popover16px10px
--cml-shadow-controlvar(--cml-raised)none
--cml-shadow-surface9px 9px 22px var(--cml-shade), -9px -9px 22px var(--cml-light)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.5rem2.25rem
--cml-field-height2.625rem2.375rem
--cml-surface-paddinginherits1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fast220ms180ms
--cml-duration-base320ms280ms
--cml-ease-standardinheritscubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateinherits0px
All 120 custom properties this skin sets
--cml-font-body
"Manrope", "Inter", system-ui, sans-serif
--cml-font-weight-control
600
--cml-font-weight-label
700
--cml-font-weight-display
800
--cml-surface
light-dark(#e7eaf0, #2a2d32)
--cml-surface-raised
var(--cml-surface)
--cml-fg
light-dark(#2f3645, #e2e8f0)
--cml-fg-secondary
light-dark(#586174, #b8c2d0)
--cml-fg-muted
light-dark(#586174, #a0aec0)
--cml-border
light-dark(#cfd4dd, #3a3e45)
--cml-border-control
light-dark(#7c8494, #7d8592)
--cml-backdrop
light-dark(rgb(231 234 240 / 0.7), rgb(20 22 25 / 0.7))
--cml-item-highlight
transparent
--cml-disabled-opacity
0.5
--cml-shade
light-dark(#c3c9d4, rgb(16 18 20 / 0.6))
--cml-light
light-dark(rgb(255 255 255 / 0.7), rgb(60 65 72 / 0.5))
--cml-raised
5px 5px 12px var(--cml-shade), -5px -5px 12px var(--cml-light)
--cml-raised-sm
3px 3px 7px var(--cml-shade), -3px -3px 7px var(--cml-light)
--cml-inset
inset 3px 3px 6px var(--cml-shade), inset -3px -3px 6px var(--cml-light)
--cml-inset-sm
inset 2px 2px 5px var(--cml-shade), inset -2px -2px 5px var(--cml-light)
--cml-convex
linear-gradient(145deg, var(--cml-accent), var(--cml-accent-hover))
--cml-radius-control
12px
--cml-radius-control-sm
10px
--cml-radius-control-lg
14px
--cml-radius-surface
24px
--cml-radius-popover
16px
--cml-radius-check
7px
--cml-shadow-control
var(--cml-raised)
--cml-shadow-control-active
var(--cml-inset)
--cml-shadow-surface
9px 9px 22px var(--cml-shade), -9px -9px 22px var(--cml-light)
--cml-shadow-popover
8px 8px 18px light-dark(rgb(40 52 72 / 0.22), var(--cml-shade)), -4px -4px 12px color-mix(in srgb, var(--cml-light) 40%, transparent)
--cml-control-height
2.5rem
--cml-control-height-sm
2rem
--cml-control-height-lg
3rem
--cml-control-padding
1.125rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.5rem
--cml-button-solid-image
var(--cml-convex)
--cml-button-solid-shadow
var(--cml-raised), inset 1px 1px 0 rgb(255 255 255 / 0.18)
--cml-button-outline-bg
var(--cml-surface)
--cml-button-outline-border
transparent
--cml-button-outline-shadow
var(--cml-raised)
--cml-button-ghost-fg
var(--cml-accent-text)
--cml-button-disabled-shadow
var(--cml-inset-sm)
--cml-toggle-pressed-bg
var(--cml-surface)
--cml-toggle-pressed-fg
var(--cml-accent-text)
--cml-toggle-pressed-shadow
var(--cml-inset)
--cml-field-height
2.625rem
--cml-field-padding
0.875rem
--cml-field-bg
var(--cml-surface)
--cml-field-shadow
var(--cml-inset)
--cml-field-gap
0.5rem
--cml-check-size
1.375rem
--cml-check-border-width
1px
--cml-check-shadow
inset 2px 2px 4px var(--cml-shade), inset -2px -2px 4px var(--cml-light)
--cml-check-on-image
var(--cml-convex)
--cml-check-on-shadow
2px 2px 5px var(--cml-shade), -2px -2px 5px var(--cml-light)
--cml-radio-dot-shadow
1px 1px 3px var(--cml-shade)
--cml-switch-width
2.875rem
--cml-switch-height
1.625rem
--cml-switch-border
1px
--cml-switch-knob
18px
--cml-switch-knob-on
18px
--cml-switch-knob-bg
var(--cml-surface)
--cml-switch-knob-shadow
2px 2px 4px var(--cml-shade), -1px -1px 3px var(--cml-light)
--cml-switch-on-shadow
inset 2px 2px 5px color-mix(in srgb, var(--cml-accent), black 45%)
--cml-switch-knob-on-bg
#f3f5f9
--cml-switch-knob-on-shadow
1px 1px 3px rgb(0 0 0 / 0.35)
--cml-slider-track-h
10px
--cml-slider-track
var(--cml-surface)
--cml-slider-fill-image
var(--cml-convex)
--cml-slider-fill-inset
2px
--cml-slider-thumb-w
1.5rem
--cml-slider-thumb-h
1.5rem
--cml-slider-thumb-bg
var(--cml-surface)
--cml-slider-thumb-shadow
3px 3px 7px var(--cml-shade), -3px -3px 7px var(--cml-light)
--cml-number-padding
4px
--cml-number-gap
8px
--cml-number-weight
700
--cml-number-btn-align
center
--cml-number-btn-size
2rem
--cml-number-btn-block
2rem
--cml-number-btn-bg
var(--cml-surface)
--cml-number-btn-radius
9px
--cml-number-btn-shadow
2px 2px 5px var(--cml-shade), -2px -2px 5px var(--cml-light)
--cml-number-divider
0
--cml-select-trigger-shadow
4px 4px 10px var(--cml-shade), -4px -4px 10px var(--cml-light)
--cml-popover-bg
var(--cml-surface)
--cml-popover-border
transparent
--cml-popover-padding
6px
--cml-item-height
2.25rem
--cml-item-padding
0.75rem
--cml-item-highlight-shadow
var(--cml-inset-sm)
--cml-dialog-border
transparent
--cml-tabs-list-bg
var(--cml-surface)
--cml-tabs-list-border
transparent
--cml-tabs-list-shadow
var(--cml-inset)
--cml-tabs-list-padding
4px
--cml-tabs-list-radius
14px
--cml-tab-radius
10px
--cml-tab-active-bg
var(--cml-surface)
--cml-tab-active-shadow
var(--cml-raised-sm)
--cml-duration-fast
220ms
--cml-duration-base
320ms
--cml-success
light-dark(#17663f, #6ee7a8)
--cml-warning
light-dark(#8a5a00, #fbbf24)
--cml-danger
light-dark(#a51d14, #fca5a5)
--cml-card-border
transparent
--cml-card-shadow
8px 8px 20px var(--cml-shade), -8px -8px 20px var(--cml-light)
--cml-avatar-bg
var(--cml-surface)
--cml-skeleton
var(--cml-surface)
--cml-tooltip-bg
var(--cml-surface)
--cml-tooltip-fg
var(--cml-fg)
--cml-button-danger-shadow
var(--cml-raised)
--cml-scrollbar-size
12px
--cml-scrollbar-track
var(--cml-surface)
--cml-scrollbar-track-shadow
var(--cml-inset-sm)
--cml-scrollbar-thumb
var(--cml-surface)
--cml-scrollbar-thumb-shadow
2px 2px 4px var(--cml-shade), -1px -1px 3px var(--cml-light)
--cml-scrollbar-idle-opacity
1

Same family

Other skins in the Soft depth family. Compare side by side →

GlassFrosted, translucent layers over soft color. Light, airy, a little luxurious.ClayPuffy pastel shapes that look moulded from modelling clay. Friendly and tactile.
Was this page helpful? · Edit this page on GitHub