Active Palette: Obsidian
Dark slate, electric accent โ sharp, modern, minimal
Color System
Core Colors
Primary
On Primary
Primary Container
On Prim. Container
Secondary
On Secondary
Secondary Container
On Sec. Container
Tertiary
On Tertiary
Tertiary Container
On Ter. Container
Error
Error
On Error
Error Container
On Error Container
Surface & Background
Surface
On Surface
Surface Variant
On Surface Variant
Container Lowest
Container Low
Container
Container High
Container Highest
Outline
Outline Variant
Inverse Surface
Inverse On Surface
Inverse Primary
Typography Scale
Display Large
The quick brown fox
Display Medium
The quick brown fox
Display Small
The quick brown fox
Headline Large
Headline Large
Headline Medium
Headline Medium
Headline Small
Headline Small
Title Large
Title Large
Title Medium
Title Medium
Title Small
Title Small
Body Large
Body large text โ the primary typeface for reading.
Body Medium
Body medium text โ used for most content.
Body Small
Body small text โ secondary information.
Label Large
LABEL LARGE
Label Medium
LABEL MEDIUM
Label Small
LABEL SMALL
Elevation
Level 0
No elevation โ flat surface
Level 1
Subtle lift โ cards resting on surface
Level 2
Medium lift โ lifted cards, FAB at rest
Level 3
High lift โ dialogs, menus, FAB active
Level 4
Search bar, snackbar
Level 5
Modal โ max elevation for overlays
Buttons
Filled
Outlined & Tonal
Icon & FAB
Cards
Elevated Card
Default elevation style
Elevated cards stand slightly above the surface with a shadow, providing visual hierarchy.
Filled Card
Surface container highest
Filled cards use the highest container color, creating strong contrast with the background.
Outlined Card
Bordered, no shadow
Outlined cards use a border for definition โ no shadow, flat on the surface.
Text Fields
Chips
Snackbar & Dialog
Delete project?
This will permanently remove the project and all associated data. This action cannot be undone.
Lists
Inbox
12 new messages
Calendar
3 events today
Analytics
Last updated 2h ago
Progress
Motion & Shape
Corner Radii
None (0px)
XS (4px)
Small (8px)
Medium (12px)
Large (16px)
XL (28px)
Full (pill)
Spacing Scale
4px โ xs
8px โ sm
12px โ md
16px โ base
24px โ lg
32px โ xl
48px โ 2xl
theme-kaleb-one ยท Material Design 3 ยท kaleb.one ecosystem
Palettes: