Quarter goal
Clay
Puffy pastel shapes that look moulded from modelling clay. Friendly and tactile.
Clay
Puffy pastel shapes that look moulded from modelling clay. Friendly and tactile.
AaNunito + Fredoka
- Family
- Soft depth
- Fonts
- Nunito + Fredoka
- Radius
- 16px controls · 28px surfaces
- Edges & depth
- no borders · inner highlight + soft drop shadow
- Motion
- 140 / 280ms
Use it
import "@camaleo/styles/base.css";
import "@camaleo/styles/clay.css";
<StyleProvider styleName="clay">…</StyleProvider>
Fonts are not bundled. The skin asks for Nunito + Fredoka 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 { Nunito, Fredoka } from "next/font/google";
const nunito = Nunito({ subsets: ["latin"], variable: "--font-nunito" });
const fredoka = Fredoka({ subsets: ["latin"], variable: "--font-fredoka" });
<html className={`${nunito.variable} ${fredoka.variable}`}>
When to use it
Good fit
- Kids, education and family products
- Playful consumer apps, games and onboarding
- Brands with rounded, friendly illustration
Think twice
- Serious finance, legal or enterprise tools
- Dense screens: 28px corners and deep shadows need room
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
Draft
Weekly report
Sent every Monday at 9:00.
Monthly quota
Draft
Components in Clay
Real components from the library, in Clay, with the mode and brand from the preview bar.
As it appears on your ID. We print it on invoices.
Plan
In reviewNewArchived
Uploading invoice-march.pdf
Storage64.2 of 100 GB
CPERLFMS+3
How was your stay?
Copy
Ctrl+C
Paste
Ctrl+V
Find in all files
Ctrl+Shift+F
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.
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
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 |
Acme Store
Online store · created on 03/02/2025
Shown on invoices and in emails to customers.
Checkout3 items · $54.80
- Cart
- Shipping
- Payment
- Review
| Invoice | Status | Amount |
|---|---|---|
| INV-4029 | Paid | $340.00 |
| INV-4028 | Pending | $1,280.50 |
| INV-4027 | Overdue | $75.00 |
Order placed
Order #48920, 3 items, $214.90.
Payment approved
Visa ending in 4242.
Delivered
Signed for by the front desk.
Preview every component page in Clay →
Tokens
The values this skin sets, read from clay.css. Override any of them on a parent element to adjust it locally.
Typography
--cml-font-body"Nunito", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-display"Fredoka", "Nunito", system-ui, sans-serifvar(--cml-font-body)
--cml-font-sizeinherits0.9375rem
--cml-font-weight-control700500
--cml-font-weight-display600600
Color
--cml-surfacelight-dark(#fbf7f0, #1d1929)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #2b2640)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#2e2a3f, #f3effb)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#5f5a72, #aaa3bf)light-dark(#71717a, #a1a1aa)
--cml-borderlight-dark(#e7e1f1, #3a3452)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#837d9b, #8a83a3)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(#b42318, #f4847a)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-width0px1px
--cml-radius-control16px8px
--cml-radius-surface28px12px
--cml-radius-popover20px10px
--cml-shadow-controlvar(--cml-clay)none
--cml-shadow-surface0 24px 44px -18px var(--cml-clay-modal-drop), inset 3px 4px 3px var(--cml-clay-hl), inset -4px -5px 12px var(--cml-clay-core)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-gapinherits0.5rem
Motion
--cml-duration-fast140ms180ms
--cml-duration-baseinherits280ms
--cml-ease-standardinheritscubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateinherits0px
All 149 custom properties this skin sets
- --cml-clay-drop
- light-dark(rgb(78 62 130 / 0.34), rgb(4 2 12 / 0.62))
- --cml-clay-drop-strong
- light-dark(rgb(78 62 130 / 0.42), rgb(4 2 12 / 0.7))
- --cml-clay-drop-soft
- light-dark(rgb(78 62 130 / 0.08), rgb(4 2 12 / 0.3))
- --cml-clay-modal-drop
- light-dark(rgb(30 20 64 / 0.5), rgb(0 0 0 / 0.7))
- --cml-clay-hl
- light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.09))
- --cml-clay-hl-soft
- light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.06))
- --cml-clay-core
- light-dark(rgb(78 62 130 / 0.12), rgb(0 0 0 / 0.26))
- --cml-clay-core-soft
- light-dark(rgb(78 62 130 / 0.08), rgb(0 0 0 / 0.2))
- --cml-clay-cavity
- light-dark(rgb(78 62 130 / 0.16), rgb(0 0 0 / 0.38))
- --cml-clay-cavity-soft
- light-dark(rgb(78 62 130 / 0.12), rgb(0 0 0 / 0.35))
- --cml-clay-rim
- light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.05))
- --cml-clay-line
- light-dark(rgb(78 62 130 / 0.1), rgb(255 255 255 / 0.08))
- --cml-clay-glow
- light-dark(color-mix(in srgb, var(--cml-accent) 75%, transparent), color-mix(in srgb, var(--cml-accent) 30%, rgb(0 0 0 / 0.55)))
- --cml-clay-tray
- light-dark(#efeafb, #18142a)
- --cml-clay-lavender
- light-dark(#efeafb, #3a3356)
- --cml-clay-lilac
- light-dark(#f4f0fe, #2e2846)
- --cml-clay-soft
- light-dark(var(--cml-brand-100), oklch(from var(--cml-brand) 0.35 min(c, 0.07) h))
- --cml-clay-soft-fg
- light-dark(var(--cml-brand-700), var(--cml-brand-200))
- --cml-clay
- 0 8px 16px -8px var(--cml-clay-drop), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px var(--cml-clay-hl), inset -3px -4px 8px var(--cml-clay-core)
- --cml-clay-hover
- 0 10px 20px -8px var(--cml-clay-drop), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px var(--cml-clay-hl), inset -3px -4px 8px var(--cml-clay-core)
- --cml-clay-brand
- 0 8px 16px -8px var(--cml-clay-glow), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px rgb(255 255 255 / 0.28), inset -3px -4px 7px rgb(0 0 0 / 0.18)
- --cml-clay-press
- 0 1px 2px var(--cml-clay-drop-soft), inset 3px 4px 7px var(--cml-clay-cavity), inset -2px -2px 3px var(--cml-clay-hl-soft)
- --cml-clay-tray-in
- inset 2px 3px 6px var(--cml-clay-cavity), inset -2px -2px 3px var(--cml-clay-rim)
- --cml-clay-small
- 0 3px 6px -2px var(--cml-clay-drop), inset 1px 2px 1px var(--cml-clay-hl), inset -2px -2px 4px var(--cml-clay-core)
- --cml-clay-chip
- inset 1px 2px 1px var(--cml-clay-hl-soft), inset -2px -2px 3px var(--cml-clay-core)
- --cml-clay-fill
- inset 1px 2px 1px rgb(255 255 255 / 0.3), inset -2px -2px 3px rgb(0 0 0 / 0.16)
- --cml-clay-surface
- 0 14px 28px -16px var(--cml-clay-drop), 0 2px 4px var(--cml-clay-drop-soft), inset 3px 4px 3px var(--cml-clay-hl), inset -4px -5px 12px var(--cml-clay-core-soft)
- --cml-clay-lift
- -2px
- --cml-font-body
- "Nunito", system-ui, sans-serif
- --cml-font-display
- "Fredoka", "Nunito", system-ui, sans-serif
- --cml-font-weight-control
- 700
- --cml-font-weight-label
- 800
- --cml-font-weight-display
- 600
- --cml-font-weight-error
- 800
- --cml-surface
- light-dark(#fbf7f0, #1d1929)
- --cml-surface-raised
- light-dark(#ffffff, #2b2640)
- --cml-fg
- light-dark(#2e2a3f, #f3effb)
- --cml-fg-secondary
- light-dark(#48435c, #d6d0e6)
- --cml-fg-muted
- light-dark(#5f5a72, #aaa3bf)
- --cml-border
- light-dark(#e7e1f1, #3a3452)
- --cml-border-control
- light-dark(#837d9b, #8a83a3)
- --cml-backdrop
- light-dark(rgb(58 46 98 / 0.36), rgb(8 5 18 / 0.62))
- --cml-item-highlight
- var(--cml-clay-lavender)
- --cml-success
- light-dark(#166534, #7ee2a8)
- --cml-warning
- light-dark(#854d0e, #f7cf6b)
- --cml-danger
- light-dark(#b42318, #f4847a)
- --cml-danger-fg
- light-dark(#ffffff, #1a0f14)
- --cml-tone-soft
- 13%
- --cml-disabled-opacity
- 0.45
- --cml-border-width
- 0px
- --cml-radius-control
- 16px
- --cml-radius-control-sm
- 13px
- --cml-radius-control-lg
- 19px
- --cml-radius-surface
- 28px
- --cml-radius-popover
- 20px
- --cml-radius-check
- 8px
- --cml-radius-item
- 13px
- --cml-shadow-control
- var(--cml-clay)
- --cml-shadow-control-active
- var(--cml-clay-press)
- --cml-shadow-surface
- 0 24px 44px -18px var(--cml-clay-modal-drop), inset 3px 4px 3px var(--cml-clay-hl), inset -4px -5px 12px var(--cml-clay-core)
- --cml-shadow-popover
- 0 18px 36px -16px var(--cml-clay-drop-strong), 0 3px 8px var(--cml-clay-drop-soft), inset 2px 3px 2px var(--cml-clay-hl), inset -3px -4px 10px var(--cml-clay-core-soft)
- --cml-control-height
- 2.625rem
- --cml-control-height-sm
- 2.125rem
- --cml-control-height-lg
- 3.125rem
- --cml-control-padding
- 1.25rem
- --cml-control-padding-sm
- 0.875rem
- --cml-control-padding-lg
- 1.625rem
- --cml-item-height
- 2.25rem
- --cml-motion-scale
- 0.96
- --cml-button-solid-shadow
- var(--cml-clay-brand)
- --cml-button-danger-shadow
- 0 8px 16px -8px color-mix(in srgb, var(--cml-danger) 60%, transparent), 0 2px 3px var(--cml-clay-drop-soft), inset 2px 3px 2px rgb(255 255 255 / 0.22), inset -3px -4px 7px rgb(0 0 0 / 0.2)
- --cml-button-outline-bg
- var(--cml-surface-raised)
- --cml-button-outline-border
- transparent
- --cml-button-outline-shadow
- var(--cml-clay)
- --cml-button-ghost-fg
- var(--cml-accent-text)
- --cml-toggle-pressed-bg
- var(--cml-clay-soft)
- --cml-toggle-pressed-fg
- var(--cml-clay-soft-fg)
- --cml-toggle-pressed-shadow
- var(--cml-clay-press)
- --cml-field-height
- 2.75rem
- --cml-field-padding
- 1rem
- --cml-field-bg
- var(--cml-surface-raised)
- --cml-field-shadow
- inset 2px 3px 5px var(--cml-clay-cavity-soft)
- --cml-field-border-width
- 1.5px
- --cml-field-focus-halo
- 0 0 0 0 transparent
- --cml-field-gap
- 0.4375rem
- --cml-check-size
- 1.375rem
- --cml-check-border-width
- 1.5px
- --cml-check-shadow
- inset 2px 2px 3px var(--cml-clay-cavity-soft)
- --cml-check-on-shadow
- 0 3px 6px -2px var(--cml-clay-glow), inset 1px 2px 1px rgb(255 255 255 / 0.3), inset -2px -2px 3px rgb(0 0 0 / 0.16)
- --cml-radio-dot-shadow
- inset 1px 1px 1px rgb(255 255 255 / 0.35), inset -1px -1px 2px rgb(0 0 0 / 0.2)
- --cml-switch-width
- 2.875rem
- --cml-switch-height
- 1.625rem
- --cml-switch-border
- 1.5px
- --cml-switch-pad
- 3px
- --cml-switch-knob
- 18px
- --cml-switch-knob-on
- 18px
- --cml-switch-track
- var(--cml-clay-tray)
- --cml-switch-knob-bg
- light-dark(#ffffff, #c9c2dc)
- --cml-switch-knob-shadow
- 0 2px 3px var(--cml-clay-drop), inset -2px -2px 3px var(--cml-clay-core)
- --cml-switch-on-shadow
- inset 2px 3px 5px rgb(0 0 0 / 0.2)
- --cml-switch-knob-on-bg
- light-dark(#ffffff, #2b2640)
- --cml-switch-knob-on-shadow
- 0 2px 3px rgb(0 0 0 / 0.25), inset -2px -2px 3px var(--cml-clay-core)
- --cml-slider-track-h
- 12px
- --cml-slider-track
- var(--cml-clay-tray)
- --cml-slider-thumb-w
- 1.625rem
- --cml-slider-thumb-h
- 1.625rem
- --cml-slider-thumb-bg
- var(--cml-surface-raised)
- --cml-slider-thumb-border
- 1.5px solid var(--cml-border-control)
- --cml-slider-thumb-shadow
- 0 4px 8px -3px var(--cml-clay-drop-strong), inset -3px -3px 5px var(--cml-clay-core)
- --cml-number-padding
- 4px
- --cml-number-gap
- 6px
- --cml-number-weight
- 800
- --cml-number-btn-align
- center
- --cml-number-btn-size
- 2.125rem
- --cml-number-btn-block
- 2.0625rem
- --cml-number-btn-bg
- var(--cml-clay-lavender)
- --cml-number-btn-radius
- 12px
- --cml-number-btn-shadow
- var(--cml-clay-small)
- --cml-number-divider
- 0
- --cml-select-trigger-shadow
- var(--cml-clay)
- --cml-popover-bg
- var(--cml-surface-raised)
- --cml-popover-border
- transparent
- --cml-popover-border-width
- 0px
- --cml-popover-padding
- 6px
- --cml-item-padding
- 0.75rem
- --cml-tabs-gap
- 4px
- --cml-tabs-list-bg
- var(--cml-clay-tray)
- --cml-tabs-list-border
- transparent
- --cml-tabs-list-shadow
- var(--cml-clay-tray-in)
- --cml-tabs-list-padding
- 4px
- --cml-tabs-list-radius
- 19px
- --cml-tab-radius
- 15px
- --cml-tab-active-bg
- var(--cml-surface-raised)
- --cml-tab-active-shadow
- var(--cml-clay)
- --cml-card-border
- transparent
- --cml-card-shadow
- var(--cml-clay-surface)
- --cml-avatar-bg
- var(--cml-clay-lavender)
- --cml-avatar-fg
- var(--cml-fg-secondary)
- --cml-avatar-ring
- var(--cml-surface)
- --cml-skeleton
- var(--cml-clay-lavender)
- --cml-tooltip-bg
- light-dark(#2e2a3f, #ece7f7)
- --cml-tooltip-fg
- light-dark(#fffdf8, #2e2a3f)
- --cml-scrollbar-size
- 12px
- --cml-scrollbar-track
- var(--cml-clay-tray)
- --cml-scrollbar-track-shadow
- var(--cml-clay-tray-in)
- --cml-scrollbar-thumb
- light-dark(#ffffff, #5d5579)
- --cml-scrollbar-thumb-shadow
- var(--cml-clay-small)
- --cml-scrollbar-idle-opacity
- 1
- --cml-duration-fast
- 140ms
Same family
Other skins in the Soft depth family. Compare side by side →
GlassFrosted, translucent layers over soft color. Light, airy, a little luxurious.NeumorphismOne surface shaped by light: raised for actions, sunken for inputs.
Was this page helpful? · Edit this page on GitHub