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

Material

Inspired by Material Design 3: tonal surfaces from one brand color and pill-shaped buttons.

Material

Inspired by Material Design 3: tonal surfaces from one brand color and pill-shaped buttons.

Roboto Flex

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Platform
Fonts
Roboto Flex
Radius
pill controls · 12px surfaces
Edges & depth
tonal surfaces · elevation shadows
Motion
200 / 300ms

Not affiliated. This skin is inspired by Material Design. Camaleo is not affiliated with Google and ships none of its fonts, icons or trademarks.

Use it

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

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

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

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

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

When to use it

Good fit

  • Web apps that live next to Android products
  • Teams already fluent in Material’s patterns
  • Brands that want every neutral tinted by the brand color

Think twice

  • Projects that need Google’s official components, fonts or icons
  • Strictly square layouts: every button is a full pill

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 Material

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

Tokens

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

Typography
--cml-font-body"Roboto Flex", Roboto, system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayinheritsvar(--cml-font-body)
--cml-font-size1rem0.9375rem
--cml-font-weight-control500500
--cml-font-weight-display400600
Color
--cml-surfacelight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #ffffff), color-mix(in oklab, var(--cml-brand-600) 4%, #101010))light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-surface-low)light-dark(#ffffff, #18181b)
--cml-fglight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #191919), color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8))light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #5e5e5e), color-mix(in oklab, var(--cml-brand-600) 4%, #aeaeae))light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-outline-variant)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #777777), color-mix(in oklab, var(--cml-brand-600) 4%, #929292))light-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-600), var(--cml-brand-300))light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-600-fg), var(--cml-brand-300-fg))light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringinheritsvar(--cml-accent-text)
--cml-dangerlight-dark(#ba1a1a, #ffb4ab)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-widthinherits1px
--cml-radius-controlvar(--cml-radius-pill) = 999px8px
--cml-radius-surface12px12px
--cml-radius-popover4px10px
--cml-shadow-controlinheritsnone
--cml-shadow-surfacevar(--cml-e3)0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width3px2px
Density
--cml-control-height2.5rem2.25rem
--cml-field-height3.5rem2.375rem
--cml-surface-padding1.5rem1.5rem
--cml-gap0.5rem0.5rem
Motion
--cml-duration-fast200ms180ms
--cml-duration-base300ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate0px0px
All 320 custom properties this skin sets
--cml-surface-lowest
light-dark(#ffffff, color-mix(in oklab, var(--cml-brand-600) 4%, #0b0b0b))
--cml-surface-low
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #fafafa), color-mix(in oklab, var(--cml-brand-600) 4%, #191919))
--cml-surface-container
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #f3f3f3), color-mix(in oklab, var(--cml-brand-600) 4%, #1d1d1d))
--cml-surface-high
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #eeeeee), color-mix(in oklab, var(--cml-brand-600) 4%, #272727))
--cml-surface-highest
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8), color-mix(in oklab, var(--cml-brand-600) 4%, #333333))
--cml-outline-variant
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #cacaca), color-mix(in oklab, var(--cml-brand-600) 4%, #454545))
--cml-secondary
light-dark(color-mix(in oklab, var(--cml-brand-200) 50%, #e5e5e5), color-mix(in oklab, var(--cml-brand-800) 50%, #333333))
--cml-on-secondary
light-dark(color-mix(in oklab, var(--cml-brand-900) 50%, #1a1a1a), color-mix(in oklab, var(--cml-brand-100) 50%, #e8e8e8))
--cml-inverse
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #2e2e2e), color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8))
--cml-inverse-fg
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #f4f4f4), color-mix(in oklab, var(--cml-brand-600) 4%, #2e2e2e))
--cml-inverse-secondary
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #cacaca), color-mix(in oklab, var(--cml-brand-600) 4%, #454545))
--cml-inverse-primary
light-dark(var(--cml-brand-300), var(--cml-brand-700))
--cml-layer
var(--cml-surface)
--cml-shadow-tint
light-dark(rgb(25 28 32 / 0.16), rgb(0 0 0 / 0.5))
--cml-shadow-tint-soft
light-dark(rgb(25 28 32 / 0.08), rgb(0 0 0 / 0.3))
--cml-e1
0 1px 2px var(--cml-shadow-tint), 0 1px 3px 1px var(--cml-shadow-tint-soft)
--cml-e2
0 1px 2px var(--cml-shadow-tint), 0 2px 6px 2px var(--cml-shadow-tint-soft)
--cml-e3
0 1px 3px var(--cml-shadow-tint), 0 4px 8px 3px var(--cml-shadow-tint-soft)
--cml-ease-emphasized-in
cubic-bezier(0.05, 0.7, 0.1, 1)
--cml-ease-emphasized-out
cubic-bezier(0.3, 0, 0.8, 0.15)
--cml-font-body
"Roboto Flex", Roboto, system-ui, sans-serif
--cml-font-size
1rem
--cml-font-size-control
0.875rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1rem
--cml-font-size-field
1rem
--cml-font-size-label
0.75rem
--cml-font-size-help
0.75rem
--cml-font-weight-control
500
--cml-font-weight-label
400
--cml-font-weight-display
400
--cml-letter-spacing-control
0.1px
--cml-letter-spacing-label
0.4px
--cml-surface
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #ffffff), color-mix(in oklab, var(--cml-brand-600) 4%, #101010))
--cml-surface-raised
var(--cml-surface-low)
--cml-fg
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #191919), color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8))
--cml-fg-secondary
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #454545), color-mix(in oklab, var(--cml-brand-600) 4%, #cacaca))
--cml-fg-muted
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #5e5e5e), color-mix(in oklab, var(--cml-brand-600) 4%, #aeaeae))
--cml-border
var(--cml-outline-variant)
--cml-border-control
light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #777777), color-mix(in oklab, var(--cml-brand-600) 4%, #929292))
--cml-accent
light-dark(var(--cml-brand-600), var(--cml-brand-300))
--cml-accent-fg
light-dark(var(--cml-brand-600-fg), var(--cml-brand-300-fg))
--cml-accent-hover
light-dark(var(--cml-brand-600-hover), var(--cml-brand-300-hover))
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-backdrop
rgb(0 0 0 / 0.32)
--cml-danger
light-dark(#ba1a1a, #ffb4ab)
--cml-danger-fg
light-dark(#ffffff, #690005)
--cml-success
light-dark(#146c2e, #7bd88f)
--cml-warning
light-dark(#7c5800, #f5bd5c)
--cml-item-highlight
color-mix(in oklab, var(--cml-fg) 8%, transparent)
--cml-disabled-opacity
0.38
--cml-radius-control
var(--cml-radius-pill)
--cml-radius-control-sm
var(--cml-radius-pill)
--cml-radius-control-lg
var(--cml-radius-pill)
--cml-radius-surface
12px
--cml-radius-popover
4px
--cml-radius-check
2px
--cml-radius-field
4px
--cml-radius-item
0
--cml-shadow-surface
var(--cml-e3)
--cml-shadow-popover
var(--cml-e2)
--cml-focus-width
3px
--cml-focus-offset
2px
--cml-control-height
2.5rem
--cml-control-height-sm
2rem
--cml-control-height-lg
3.5rem
--cml-control-padding
1.5rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.5rem
--cml-surface-padding
1.5rem
--cml-gap
0.5rem
--cml-button-solid-shadow
none
--cml-button-danger-shadow
none
--cml-button-outline-bg
transparent
--cml-button-outline-border
var(--cml-border-control)
--cml-button-outline-shadow
none
--cml-button-ghost-fg
var(--cml-accent-text)
--cml-toggle-pressed-bg
var(--cml-accent)
--cml-toggle-pressed-fg
var(--cml-accent-fg)
--cml-toggle-pressed-shadow
none
--cml-field-height
3.5rem
--cml-field-padding
1rem
--cml-field-bg
transparent
--cml-field-shadow
0 0 0 0 transparent
--cml-field-focus-halo
inset 0 0 0 1px var(--cml-focus-ring)
--cml-field-gap
0.25rem
--cml-check-size
1.125rem
--cml-check-border-width
2px
--cml-switch-width
3.25rem
--cml-switch-height
2rem
--cml-switch-border
2px
--cml-switch-pad
2px
--cml-switch-knob
16px
--cml-switch-knob-on
24px
--cml-switch-track
var(--cml-surface-highest)
--cml-switch-knob-bg
var(--cml-border-control)
--cml-switch-knob-on-bg
var(--cml-accent-fg)
--cml-slider-track-h
16px
--cml-slider-track
var(--cml-secondary)
--cml-slider-thumb-w
4px
--cml-slider-thumb-h
44px
--cml-slider-thumb-bg
var(--cml-accent)
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
0 0 0 6px var(--cml-layer)
--cml-number-weight
400
--cml-number-btn-size
3rem
--cml-number-btn-bg
transparent
--cml-number-divider
0
--cml-popover-bg
var(--cml-surface-container)
--cml-popover-border-width
0
--cml-popover-padding
8px 0
--cml-item-height
3rem
--cml-item-padding
1rem
--cml-item-check
var(--cml-on-secondary)
--cml-dialog-border
transparent
--cml-tabs-gap
0
--cml-tabs-list-border
var(--cml-outline-variant)
--cml-tab-active-fg
var(--cml-accent-text)
--cml-tab-active-shadow
none
--cml-card-shadow
var(--cml-e1)
--cml-card-border
transparent
--cml-avatar-bg
var(--cml-surface-highest)
--cml-avatar-fg
var(--cml-fg-secondary)
--cml-avatar-ring
var(--cml-layer)
--cml-skeleton
var(--cml-surface-highest)
--cml-tooltip-bg
var(--cml-inverse)
--cml-tooltip-fg
var(--cml-inverse-fg)
--cml-scrollbar-size
8px
--cml-scrollbar-track
transparent
--cml-scrollbar-thumb
color-mix(in oklab, var(--cml-fg-secondary) 55%, transparent)
--cml-scrollbar-idle-opacity
0.6
--cml-duration-fast
200ms
--cml-duration-base
300ms
--cml-ease-standard
cubic-bezier(0.2, 0, 0, 1)
--cml-motion-distance
12px
--cml-motion-scale
0.94
--cml-press-translate
0px
--cml-info-container
light-dark(var(--cml-brand-100), color-mix(in oklab, var(--cml-brand-800) 60%, #262626))
--cml-on-info-container
light-dark(var(--cml-brand-900), var(--cml-brand-100))
--cml-success-container
light-dark(#c4eed0, #1f4a2c)
--cml-on-success-container
light-dark(#0a3a1e, #c4eed0)
--cml-warning-container
light-dark(#ffdfb0, #523b12)
--cml-on-warning-container
light-dark(#4f2f00, #ffdfb0)
--cml-danger-container
light-dark(#ffdad6, #6e1d19)
--cml-on-danger-container
light-dark(#73100c, #ffdad6)
--cml-tertiary-container
light-dark(#ffdcbe, #5a3a1c)
--cml-on-tertiary-container
light-dark(#5c2c00, #ffdcbe)
--cml-input-addon-bg
transparent
--cml-input-addon-fg
var(--cml-fg-secondary)
--cml-input-addon-divider
0
--cml-input-button-on-bg
var(--cml-secondary)
--cml-otp-gap
0.5rem
--cml-otp-cell-width
3rem
--cml-otp-cell-height
3.5rem
--cml-otp-cell-radius
4px
--cml-otp-font-size
1.5rem
--cml-otp-font-weight
400
--cml-otp-separator
var(--cml-border-control)
--cml-tag-height
2rem
--cml-tag-bg
transparent
--cml-tag-fg
var(--cml-fg-secondary)
--cml-tag-border
1px solid var(--cml-border-control)
--cml-tag-radius
8px
--cml-tag-font-size
0.875rem
--cml-tag-font-weight
500
--cml-tag-letter-spacing
0.1px
--cml-dropzone-bg
var(--cml-surface-container)
--cml-dropzone-border
2px dashed var(--cml-border-control)
--cml-dropzone-radius
12px
--cml-dropzone-shadow
none
--cml-dropzone-active-bg
color-mix(in oklab, var(--cml-accent-text) 8%, var(--cml-surface-container))
--cml-dropzone-icon-bg
var(--cml-info-container)
--cml-dropzone-icon-fg
var(--cml-on-info-container)
--cml-dropzone-icon-border
0 solid transparent
--cml-dropzone-icon-shadow
none
--cml-file-item-bg
var(--cml-surface-container)
--cml-file-item-border
0 solid transparent
--cml-file-item-radius
12px
--cml-file-item-shadow
none
--cml-file-icon-bg
var(--cml-secondary)
--cml-file-icon-fg
var(--cml-on-secondary)
--cml-file-icon-radius
var(--cml-radius-pill)
--cml-star-size
1.75rem
--cml-star-color
var(--cml-accent)
--cml-star-empty
var(--cml-border-control)
--cml-star-on-bg
var(--cml-secondary)
--cml-chip-height
2rem
--cml-chip-radius
8px
--cml-chip-bg
transparent
--cml-chip-fg
var(--cml-fg-secondary)
--cml-chip-border
1px solid var(--cml-border-control)
--cml-chip-shadow
none
--cml-chip-font-size
0.875rem
--cml-chip-letter-spacing
0.1px
--cml-chip-on-bg
var(--cml-secondary)
--cml-chip-on-fg
var(--cml-on-secondary)
--cml-chip-on-border
1px solid transparent
--cml-chip-on-shadow
none
--cml-chip-on-translate
none
--cml-calendar-width
20rem
--cml-calendar-padding
1rem
--cml-calendar-bg
var(--cml-surface-high)
--cml-calendar-border
0 solid transparent
--cml-calendar-radius
28px
--cml-calendar-shadow
var(--cml-e1)
--cml-calendar-title-size
0.9375rem
--cml-calendar-title-weight
500
--cml-calendar-title-tracking
0.1px
--cml-calendar-nav-size
2.25rem
--cml-calendar-nav-radius
var(--cml-radius-pill)
--cml-calendar-nav-bg
transparent
--cml-calendar-nav-border
1px solid var(--cml-border-control)
--cml-calendar-header-size
0.75rem
--cml-calendar-header-weight
500
--cml-calendar-header-tracking
0.4px
--cml-calendar-cell-size
2.375rem
--cml-calendar-cell-radius
var(--cml-radius-pill)
--cml-calendar-cell-size-font
0.875rem
--cml-calendar-cell-weight
400
--cml-calendar-today-border
1px solid var(--cml-accent-text)
--cml-calendar-today-fg
var(--cml-accent-text)
--cml-calendar-selected-bg
var(--cml-accent)
--cml-calendar-selected-fg
var(--cml-accent-fg)
--cml-calendar-range-bg
var(--cml-secondary)
--cml-calendar-range-fg
var(--cml-on-secondary)
--cml-segment-radius
4px
--cml-segment-focus-bg
var(--cml-secondary)
--cml-segment-focus-fg
var(--cml-on-secondary)
--cml-stat-bg
var(--cml-surface-lowest)
--cml-stat-border
var(--cml-outline-variant)
--cml-stat-radius
16px
--cml-stat-shadow
var(--cml-e1)
--cml-stat-value-weight
500
--cml-table-head-bg
var(--cml-surface-container)
--cml-table-row-selected-bg
var(--cml-secondary)
--cml-table-row-selected-fg
var(--cml-on-secondary)
--cml-table-footer-bg
var(--cml-surface-container)
--cml-data-list-term-bg
var(--cml-surface-container)
--cml-ring-track
var(--cml-surface-highest)
--cml-meter-bg
var(--cml-surface-container)
--cml-tree-row-radius
var(--cml-radius-pill)
--cml-tree-selected-bg
var(--cml-secondary)
--cml-tree-selected-fg
var(--cml-on-secondary)
--cml-tree-selected-border
1px solid var(--cml-border-control)
--cml-code-bg
#1d1b20
--cml-code-fg
#f5eff7
--cml-code-header-bg
#2b2930
--cml-code-header-fg
#e6e0e9
--cml-code-header-border
#49454f
--cml-code-border
var(--cml-border-control)
--cml-code-radius
16px
--cml-code-shadow
var(--cml-e1)
--cml-carousel-slide-bg
var(--cml-surface-container)
--cml-carousel-slide-border
var(--cml-outline-variant)
--cml-carousel-slide-radius
12px
--cml-app-shell-bg
var(--cml-surface-lowest)
--cml-app-shell-header-bg
var(--cml-surface-container)
--cml-app-shell-header-border
1px solid var(--cml-outline-variant)
--cml-sidebar-bg
var(--cml-surface-container-low)
--cml-sidebar-border
1px solid var(--cml-outline-variant)
--cml-sidebar-brand-border
1px solid var(--cml-outline-variant)
--cml-sidebar-footer-border
1px solid var(--cml-outline-variant)
--cml-sidebar-item-radius
var(--cml-radius-pill)
--cml-sidebar-item-active-bg
var(--cml-secondary-container)
--cml-sidebar-item-active-fg
var(--cml-on-secondary-container)
--cml-sidebar-indicator-bg
var(--cml-primary)
--cml-sidebar-indicator-width
3px
--cml-nav-popup-bg
var(--cml-surface-high)
--cml-nav-popup-border
0
--cml-nav-popup-radius
20px
--cml-nav-item-radius
var(--cml-radius-pill)
--cml-nav-trigger-open-bg
var(--cml-surface-container-highest)
--cml-menubar-bg
var(--cml-surface-container)
--cml-menubar-border
1px solid var(--cml-outline-variant)
--cml-menubar-radius
var(--cml-radius-pill)
--cml-menubar-shadow
var(--cml-e1)
--cml-menubar-active-bg
var(--cml-secondary-container)
--cml-menubar-active-fg
var(--cml-on-secondary-container)
--cml-menubar-trigger-radius
var(--cml-radius-pill)
--cml-toolbar-bg
var(--cml-surface-container)
--cml-toolbar-border
1px solid var(--cml-outline-variant)
--cml-toolbar-radius
var(--cml-radius-pill)
--cml-toolbar-shadow
var(--cml-e1)
--cml-toolbar-btn-radius
var(--cml-radius-pill)
--cml-toolbar-toggle-active-bg
var(--cml-secondary-container)
--cml-toolbar-toggle-active-border
1px solid var(--cml-outline-variant)
--cml-toolbar-toggle-active-fg
var(--cml-on-secondary-container)
--cml-stepper-line
2px solid var(--cml-outline-variant)
--cml-stepper-completed-line
2px solid var(--cml-primary)
--cml-stepper-completed-bg
var(--cml-primary)
--cml-stepper-completed-fg
var(--cml-on-primary)
--cml-stepper-completed-border
0
--cml-stepper-current-bg
var(--cml-secondary-container)
--cml-stepper-current-fg
var(--cml-on-secondary-container)
--cml-stepper-current-border
2px solid var(--cml-primary)
--cml-stepper-error-bg
var(--cml-danger)
--cml-stepper-error-fg
var(--cml-danger-fg)
--cml-stepper-error-border
0
--cml-step-indicator-radius
var(--cml-radius-pill)
--cml-step-indicator-bg
var(--cml-surface-container-highest)
--cml-step-indicator-fg
var(--cml-on-surface-variant)
--cml-step-indicator-border
1px solid var(--cml-outline-variant)
--cml-cmd-bg
var(--cml-surface-high)
--cml-cmd-border
0
--cml-cmd-radius
28px
--cml-cmd-header-border
1px solid var(--cml-outline-variant)
--cml-cmd-footer-border
1px solid var(--cml-outline-variant)
--cml-cmd-active-bg
var(--cml-secondary-container)
--cml-cmd-active-fg
var(--cml-on-secondary-container)
--cml-hover-card-bg
var(--cml-surface-high)
--cml-hover-card-border
0
--cml-hover-card-radius
16px
--cml-toggletip-bg
var(--cml-surface-high)
--cml-toggletip-border
0
--cml-toggletip-radius
12px
--cml-splitter-border
1px solid var(--cml-outline-variant)
--cml-splitter-handle-bg
var(--cml-surface-container)
--cml-splitter-radius
var(--cml-radius-surface)
--cml-splitter-active-bg
var(--cml-secondary-container)
--cml-splitter-grip
var(--cml-primary)

Same family

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

ProgressiveA neutral installable-app look, warm and modern, without borrowing any platform.CupertinoInspired by Apple’s Human Interface Guidelines: hairlines, grouped lists and continuous corners.
Was this page helpful? · Edit this page on GitHub