Quarter goal
Glass
Frosted, translucent layers over soft color. Light, airy, a little luxurious.
Glass
Frosted, translucent layers over soft color. Light, airy, a little luxurious.
AaPlus Jakarta Sans
- Family
- Soft depth
- Fonts
- Plus Jakarta Sans
- Radius
- 12px controls · 20px surfaces
- Edges & depth
- frosted fill · light rim · blur
- Motion
- 180 / 280ms
Use it
import "@camaleo/styles/base.css";
import "@camaleo/styles/glass.css";
<StyleProvider styleName="glass">…</StyleProvider>
Fonts are not bundled. The skin asks for Plus Jakarta 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 { Plus_Jakarta_Sans } from "next/font/google";
const plusjakartasans = Plus_Jakarta_Sans({ subsets: ["latin"], variable: "--font-plusjakartasans" });
<html className={`${plusjakartasans.variable}`}>
When to use it
Good fit
- Marketing pages, media and hero sections
- Dashboards and widgets that float over imagery
- Small surfaces where the backdrop can show through
Think twice
- Low-end devices: blur is expensive (it turns opaque with reduced transparency or without backdrop-filter)
- Long forms on busy backgrounds
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 Glass
Real components from the library, in Glass, 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 Glass →
Tokens
The values this skin sets, read from glass.css. Override any of them on a parent element to adjust it locally.
Typography
--cml-font-body"Plus Jakarta Sans", 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-display600600
Color
--cml-surfacelight-dark(#eef1f8, #0a0f1e)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-glass-surface)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#0f172a, #f1f5f9)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#3f4c63, #a3afc4)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-glass-line)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#64748b, #8190a6)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(#a51f16, #fc8f86)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-widthinherits1px
--cml-radius-control12px8px
--cml-radius-surface20px12px
--cml-radius-popover16px10px
--cml-shadow-controlinheritsnone
--cml-shadow-surfaceinset 0 1px 0 var(--cml-glass-hl), 0 24px 48px -20px light-dark(rgb(15 23 42 / 0.45), 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.375rem2.25rem
--cml-field-height2.5rem2.375rem
--cml-surface-paddinginherits1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fastinherits180ms
--cml-duration-baseinherits280ms
--cml-ease-standardinheritscubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateinherits0px
All 255 custom properties this skin sets
- --cml-glass-surface
- light-dark(rgb(255 255 255 / 0.58), rgb(30 41 66 / 0.5))
- --cml-glass-surface-soft
- light-dark(rgb(255 255 255 / 0.5), rgb(30 41 66 / 0.42))
- --cml-glass-field
- light-dark(rgb(255 255 255 / 0.62), rgb(10 16 34 / 0.45))
- --cml-glass-float
- light-dark(rgb(255 255 255 / 0.74), rgb(26 34 58 / 0.92))
- --cml-glass-modal
- light-dark(rgb(255 255 255 / 0.86), rgb(26 34 58 / 0.9))
- --cml-glass-control
- light-dark(rgb(255 255 255 / 0.58), rgb(255 255 255 / 0.08))
- --cml-glass-control-hover
- light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.14))
- --cml-glass-track
- light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.05))
- --cml-glass-pill
- light-dark(rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.12))
- --cml-glass-rail
- light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.08))
- --cml-glass-smoked
- light-dark(rgb(15 23 42 / 0.86), rgb(241 245 249 / 0.9))
- --cml-glass-smoked-fg
- light-dark(#f8fafc, #0f172a)
- --cml-glass-tint
- light-dark(rgb(255 255 255 / 0.78), rgb(30 41 66 / 0.55))
- --cml-glass-edge
- light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.12))
- --cml-glass-edge-float
- var(--cml-glass-edge)
- --cml-glass-edge-surface
- var(--cml-glass-edge)
- --cml-glass-hl
- light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.07))
- --cml-glass-line
- light-dark(rgb(15 23 42 / 0.08), rgb(255 255 255 / 0.1))
- --cml-glass-blur
- blur(20px) saturate(170%)
- --cml-glass-blur-field
- blur(14px) saturate(160%)
- --cml-glass-blur-control
- blur(16px) saturate(170%)
- --cml-glass-blur-float
- blur(24px) saturate(180%)
- --cml-glass-shadow-control
- inset 0 1px 0 var(--cml-glass-hl), 0 0 0 1px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.25)), 0 6px 14px -8px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.5))
- --cml-glass-shadow-track
- inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.05)), 0 6px 14px -8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.45))
- --cml-glass-shadow-pill
- 0 1px 3px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.4)), 0 0 0 1px light-dark(rgb(15 23 42 / 0.04), rgb(255 255 255 / 0.06))
- --cml-glass-shadow-surface
- inset 0 1px 0 var(--cml-glass-hl), 0 1px 2px light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.2)), 0 12px 32px -16px light-dark(rgb(15 23 42 / 0.22), rgb(0 0 0 / 0.6))
- --cml-glass-shadow-rail
- inset 0 1px 2px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.4)), 0 0 0 1px light-dark(rgb(100 116 139 / 0.3), rgb(148 163 184 / 0.25))
- --cml-glass-backdrop
- radial-gradient(ellipse 44% 40% at 6% 4%, light-dark(oklch(from var(--cml-brand) 0.88 min(c, 0.09) h), oklch(from var(--cml-brand) 0.3 min(c, 0.09) h)), transparent 70%), radial-gradient(ellipse 34% 36% at 96% 12%, light-dark(rgb(222 210 255), rgb(58 40 120)), transparent 70%), radial-gradient(ellipse 30% 30% at 34% 56%, light-dark(rgb(214 206 253 / 0.85), rgb(48 36 110 / 0.85)), transparent 70%), radial-gradient(ellipse 40% 38% at 74% 70%, light-dark(rgb(182 230 238), rgb(14 66 80)), transparent 70%), radial-gradient(ellipse 42% 36% at 10% 100%, light-dark(rgb(255 208 222), rgb(92 30 64)), transparent 70%), linear-gradient(160deg, light-dark(#f3f5fb, #0c1124), light-dark(#edf0f8, #080c1a))
- --cml-font-body
- "Plus Jakarta Sans", system-ui, sans-serif
- --cml-font-weight-control
- 600
- --cml-font-weight-label
- 600
- --cml-font-weight-display
- 600
- --cml-font-weight-error
- 600
- --cml-surface
- light-dark(#eef1f8, #0a0f1e)
- --cml-surface-raised
- var(--cml-glass-surface)
- --cml-fg
- light-dark(#0f172a, #f1f5f9)
- --cml-fg-secondary
- light-dark(#334155, #cbd5e1)
- --cml-fg-muted
- light-dark(#3f4c63, #a3afc4)
- --cml-border
- var(--cml-glass-line)
- --cml-border-control
- light-dark(#64748b, #8190a6)
- --cml-backdrop
- light-dark(rgb(30 41 82 / 0.3), rgb(2 6 23 / 0.55))
- --cml-item-highlight
- light-dark(rgb(15 23 42 / 0.07), rgb(255 255 255 / 0.09))
- --cml-success
- light-dark(#166534, #4ade80)
- --cml-danger
- light-dark(#a51f16, #fc8f86)
- --cml-info
- light-dark(#1d4ed8, #93c5fd)
- --cml-radius-control
- 12px
- --cml-radius-control-sm
- 10px
- --cml-radius-control-lg
- 14px
- --cml-radius-surface
- 20px
- --cml-radius-popover
- 16px
- --cml-radius-check
- 6px
- --cml-radius-item
- 10px
- --cml-shadow-surface
- inset 0 1px 0 var(--cml-glass-hl), 0 24px 48px -20px light-dark(rgb(15 23 42 / 0.45), rgb(0 0 0 / 0.75))
- --cml-shadow-popover
- inset 0 1px 0 var(--cml-glass-hl), 0 2px 6px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.2)), 0 20px 40px -18px light-dark(rgb(15 23 42 / 0.3), rgb(0 0 0 / 0.7))
- --cml-control-height
- 2.375rem
- --cml-control-height-sm
- 1.875rem
- --cml-control-height-lg
- 2.875rem
- --cml-control-padding
- 1rem
- --cml-control-padding-sm
- 0.75rem
- --cml-control-padding-lg
- 1.375rem
- --cml-button-solid-image
- linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(15 23 42 / 0.06))
- --cml-button-solid-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(15 23 42 / 0.12), 0 6px 16px -8px color-mix(in srgb, var(--cml-accent) 60%, transparent)
- --cml-button-danger-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 16px -8px color-mix(in srgb, var(--cml-danger) 60%, transparent)
- --cml-button-outline-bg
- var(--cml-glass-control)
- --cml-button-outline-border
- light-dark(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.14))
- --cml-button-outline-shadow
- var(--cml-glass-shadow-control)
- --cml-toggle-pressed-bg
- var(--cml-glass-smoked)
- --cml-toggle-pressed-fg
- var(--cml-glass-smoked-fg)
- --cml-toggle-pressed-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.16), 0 6px 14px -8px light-dark(rgb(15 23 42 / 0.4), rgb(0 0 0 / 0.5))
- --cml-field-height
- 2.5rem
- --cml-field-padding
- 0.875rem
- --cml-field-bg
- var(--cml-glass-field)
- --cml-field-shadow
- inset 0 1px 0 var(--cml-glass-hl), 0 1px 2px light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.2))
- --cml-field-focus-halo
- 0 0 0 0 transparent
- --cml-check-size
- 1.25rem
- --cml-check-border-width
- 1.5px
- --cml-check-shadow
- inset 0 1px 0 var(--cml-glass-hl)
- --cml-check-on-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.25), 0 3px 8px -3px color-mix(in srgb, var(--cml-accent) 60%, transparent)
- --cml-switch-width
- 2.5rem
- --cml-switch-height
- 1.375rem
- --cml-switch-border
- 1.5px
- --cml-switch-pad
- 3px
- --cml-switch-knob
- 12px
- --cml-switch-knob-on
- 16px
- --cml-switch-track
- var(--cml-glass-field)
- --cml-switch-on-shadow
- inset 0 1px 2px rgb(15 23 42 / 0.2)
- --cml-switch-knob-on-shadow
- 0 1px 3px rgb(15 23 42 / 0.3)
- --cml-slider-track-h
- 6px
- --cml-slider-track
- var(--cml-glass-rail)
- --cml-slider-thumb-w
- 1.25rem
- --cml-slider-thumb-h
- 1.25rem
- --cml-slider-thumb-shadow
- 0 2px 6px rgb(15 23 42 / 0.2)
- --cml-number-weight
- 600
- --cml-number-btn-size
- 2.5rem
- --cml-number-btn-bg
- light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.05))
- --cml-number-divider
- 1px solid light-dark(rgb(100 116 139 / 0.35), rgb(148 163 184 / 0.25))
- --cml-popover-bg
- var(--cml-glass-float)
- --cml-popover-border
- var(--cml-glass-edge-float)
- --cml-popover-padding
- 6px
- --cml-dialog-border
- var(--cml-glass-edge-float)
- --cml-tabs-gap
- 2px
- --cml-tabs-list-bg
- var(--cml-glass-track)
- --cml-tabs-list-border
- var(--cml-glass-edge)
- --cml-tabs-list-shadow
- var(--cml-glass-shadow-track)
- --cml-tabs-list-padding
- 3px
- --cml-tabs-list-radius
- 14px
- --cml-tab-radius
- 10px
- --cml-tab-active-bg
- var(--cml-glass-pill)
- --cml-tab-active-shadow
- var(--cml-glass-shadow-pill)
- --cml-card-border
- var(--cml-glass-edge-surface)
- --cml-card-shadow
- var(--cml-glass-shadow-surface)
- --cml-avatar-bg
- color-mix(in oklab, var(--cml-accent) 12%, light-dark(rgb(255 255 255 / 0.6), rgb(10 16 34 / 0.6)))
- --cml-avatar-ring
- light-dark(rgb(255 255 255 / 0.9), rgb(15 22 42 / 0.9))
- --cml-skeleton
- light-dark(rgb(15 23 42 / 0.07), rgb(255 255 255 / 0.08))
- --cml-tooltip-bg
- var(--cml-glass-smoked)
- --cml-tooltip-fg
- var(--cml-glass-smoked-fg)
- --cml-scrollbar-size
- 10px
- --cml-scrollbar-track
- var(--cml-glass-track)
- --cml-scrollbar-track-shadow
- inset 0 0 0 1px var(--cml-glass-edge)
- --cml-scrollbar-thumb
- light-dark(rgb(100 116 139 / 0.7), rgb(203 213 225 / 0.45))
- --cml-scrollbar-idle-opacity
- 0.8
- --cml-input-addon-bg
- var(--cml-number-btn-bg)
- --cml-input-addon-divider
- var(--cml-number-divider)
- --cml-input-button-on-bg
- light-dark(rgb(15 23 42 / 0.08), rgb(255 255 255 / 0.1))
- --cml-otp-cell-height
- 3.125rem
- --cml-otp-font-weight
- 700
- --cml-otp-separator
- var(--cml-border-control)
- --cml-tag-height
- 1.75rem
- --cml-tag-bg
- var(--cml-glass-pill)
- --cml-tag-border
- 1px solid var(--cml-glass-edge)
- --cml-tag-radius
- 9px
- --cml-tag-font-weight
- 600
- --cml-dropzone-bg
- var(--cml-glass-track)
- --cml-dropzone-shadow
- inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.05))
- --cml-dropzone-active-bg
- color-mix(in oklab, var(--cml-accent-text) 8%, var(--cml-glass-tint))
- --cml-dropzone-icon-bg
- var(--cml-glass-control-hover)
- --cml-dropzone-icon-fg
- var(--cml-accent-text)
- --cml-dropzone-icon-border
- 1px solid var(--cml-button-outline-border)
- --cml-dropzone-icon-shadow
- var(--cml-glass-shadow-control)
- --cml-file-item-bg
- var(--cml-glass-surface)
- --cml-file-item-border
- 1px solid var(--cml-glass-edge-surface)
- --cml-file-item-radius
- 16px
- --cml-file-item-shadow
- var(--cml-glass-shadow-surface)
- --cml-file-icon-bg
- light-dark(rgb(15 23 42 / 0.06), rgb(255 255 255 / 0.07))
- --cml-file-icon-radius
- 10px
- --cml-chip-bg
- var(--cml-glass-control)
- --cml-chip-border
- 1px solid var(--cml-button-outline-border)
- --cml-chip-shadow
- var(--cml-glass-shadow-control)
- --cml-chip-on-bg
- color-mix(in oklab, var(--cml-accent-text) 14%, var(--cml-glass-tint))
- --cml-chip-on-border
- 1px solid color-mix(in oklab, var(--cml-accent-text) 45%, transparent)
- --cml-chip-on-shadow
- inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.06)), 0 6px 14px -8px color-mix(in srgb, var(--cml-accent) 35%, transparent)
- --cml-calendar-bg
- var(--cml-glass-surface)
- --cml-calendar-border
- 1px solid var(--cml-glass-edge-surface)
- --cml-calendar-radius
- 20px
- --cml-calendar-shadow
- var(--cml-glass-shadow-surface)
- --cml-calendar-title-weight
- 700
- --cml-calendar-nav-radius
- 9px
- --cml-calendar-nav-bg
- var(--cml-glass-control)
- --cml-calendar-nav-border
- 1px solid var(--cml-button-outline-border)
- --cml-calendar-nav-shadow
- var(--cml-glass-shadow-control)
- --cml-calendar-header-weight
- 700
- --cml-calendar-cell-radius
- 9px
- --cml-calendar-cell-weight
- 600
- --cml-calendar-selected-border
- 1px solid rgb(255 255 255 / 0.22)
- --cml-calendar-selected-shadow
- var(--cml-button-solid-shadow)
- --cml-calendar-range-bg
- color-mix(in oklab, var(--cml-accent) 18%, var(--cml-glass-tint))
- --cml-calendar-range-fg
- var(--cml-fg)
- --cml-segment-radius
- 5px
- --cml-segment-focus-shadow
- 0 2px 6px -2px color-mix(in srgb, var(--cml-accent) 45%, transparent)
- --cml-stat-bg
- var(--cml-glass-surface)
- --cml-stat-border
- var(--cml-glass-edge-surface)
- --cml-stat-radius
- 18px
- --cml-stat-shadow
- var(--cml-glass-shadow-surface)
- --cml-stat-value-weight
- 700
- --cml-table-row-selected-bg
- color-mix(in oklab, var(--cml-accent-text) 12%, var(--cml-glass-tint))
- --cml-tree-row-radius
- 8px
- --cml-tree-selected-bg
- color-mix(in oklab, var(--cml-accent-text) 14%, var(--cml-glass-tint))
- --cml-tree-selected-border
- 1px solid color-mix(in oklab, var(--cml-accent-text) 45%, transparent)
- --cml-code-bg
- #0f172a
- --cml-code-fg
- #f8fafc
- --cml-code-header-bg
- #1e293b
- --cml-code-header-fg
- #e2e8f0
- --cml-code-header-border
- #334155
- --cml-code-border
- var(--cml-border-control)
- --cml-code-radius
- 18px
- --cml-code-shadow
- var(--cml-glass-shadow-surface)
- --cml-carousel-slide-bg
- var(--cml-glass-control)
- --cml-carousel-slide-border
- var(--cml-glass-edge)
- --cml-carousel-slide-radius
- 12px
- --cml-app-shell-bg
- var(--cml-surface)
- --cml-app-shell-header-bg
- var(--cml-glass-surface)
- --cml-app-shell-header-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-bg
- var(--cml-glass-surface)
- --cml-sidebar-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-brand-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-footer-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-item-radius
- 10px
- --cml-sidebar-item-active-bg
- var(--cml-glass-tint)
- --cml-sidebar-item-active-fg
- var(--cml-fg)
- --cml-sidebar-indicator-bg
- var(--cml-accent-text)
- --cml-sidebar-indicator-width
- 3px
- --cml-nav-popup-bg
- var(--cml-glass-float)
- --cml-nav-popup-border
- 1px solid var(--cml-glass-edge-float)
- --cml-nav-popup-radius
- 18px
- --cml-nav-item-radius
- 10px
- --cml-nav-trigger-open-bg
- var(--cml-glass-control)
- --cml-menubar-bg
- var(--cml-glass-surface)
- --cml-menubar-border
- 1px solid var(--cml-glass-edge)
- --cml-menubar-radius
- 12px
- --cml-menubar-shadow
- var(--cml-glass-shadow-surface)
- --cml-menubar-active-bg
- var(--cml-glass-control)
- --cml-menubar-active-fg
- var(--cml-fg)
- --cml-menubar-trigger-radius
- 8px
- --cml-menubar-popup-bg
- var(--cml-glass-float)
- --cml-menubar-popup-border
- 1px solid var(--cml-glass-edge-float)
- --cml-context-menu-bg
- var(--cml-glass-float)
- --cml-context-menu-border
- 1px solid var(--cml-glass-edge-float)
- --cml-toolbar-bg
- var(--cml-glass-surface)
- --cml-toolbar-border
- 1px solid var(--cml-glass-edge)
- --cml-toolbar-radius
- 12px
- --cml-toolbar-shadow
- var(--cml-glass-shadow-surface)
- --cml-toolbar-btn-radius
- 8px
- --cml-toolbar-toggle-active-bg
- var(--cml-glass-control)
- --cml-toolbar-toggle-active-border
- 1px solid var(--cml-glass-edge)
- --cml-toolbar-toggle-active-fg
- var(--cml-fg)
- --cml-stepper-line
- 1px solid color-mix(in oklab, var(--cml-border-control) 60%, transparent)
- --cml-stepper-completed-line
- 2px solid var(--cml-accent)
- --cml-stepper-completed-bg
- var(--cml-accent)
- --cml-stepper-completed-fg
- var(--cml-accent-fg)
- --cml-stepper-completed-border
- 1px solid var(--cml-accent)
- --cml-stepper-current-bg
- var(--cml-glass-tint)
- --cml-stepper-current-fg
- var(--cml-accent-text)
- --cml-stepper-current-border
- 2px solid var(--cml-accent-text)
- --cml-step-indicator-radius
- var(--cml-radius-pill)
- --cml-step-indicator-bg
- var(--cml-glass-control)
- --cml-step-indicator-fg
- var(--cml-fg-secondary)
- --cml-step-indicator-border
- 1px solid var(--cml-glass-edge)
- --cml-cmd-bg
- var(--cml-glass-modal)
- --cml-cmd-border
- 1px solid var(--cml-glass-edge-float)
- --cml-cmd-radius
- 20px
- --cml-cmd-header-border
- 1px solid var(--cml-glass-edge)
- --cml-cmd-footer-border
- 1px solid var(--cml-glass-edge)
- --cml-cmd-active-bg
- var(--cml-glass-tint)
- --cml-cmd-active-fg
- var(--cml-fg)
- --cml-hover-card-bg
- var(--cml-glass-float)
- --cml-hover-card-border
- 1px solid var(--cml-glass-edge-float)
- --cml-hover-card-radius
- 16px
- --cml-toggletip-bg
- var(--cml-glass-float)
- --cml-toggletip-border
- 1px solid var(--cml-glass-edge-float)
- --cml-toggletip-radius
- 12px
- --cml-splitter-border
- 1px solid var(--cml-glass-edge)
- --cml-splitter-handle-bg
- var(--cml-glass-control)
- --cml-splitter-radius
- 8px
- --cml-splitter-active-bg
- var(--cml-glass-tint)
- --cml-splitter-grip
- var(--cml-accent-text)
Same family
Other skins in the Soft depth family. Compare side by side →
NeumorphismOne surface shaped by light: raised for actions, sunken for inputs.ClayPuffy pastel shapes that look moulded from modelling clay. Friendly and tactile.
Was this page helpful? · Edit this page on GitHub