Color Palette
Default color palette for creating beautiful designs
Primary
primary-950: #193300
Copied!
primary-900: #355b0c
Copied!
primary-800: #3e6c08
Copied!
primary-700: #4c8a01
Copied!
primary-600: #64b600
Copied!
primary-500: #84e300
Copied!
primary-400: #acfd32
Copied!
primary-300: #bfff52
Copied!
primary-200: #dbff91
Copied!
primary-100: #edffc5
Copied!
primary-50: #f7ffe4
Copied!
primary-25: #fbfff2
Copied!
Neutral
neutral-950: #09090b
Copied!
neutral-900: #18181b
Copied!
neutral-800: #27272a
Copied!
neutral-700: #3f3f46
Copied!
neutral-600: #52525b
Copied!
neutral-500: #71717a
Copied!
neutral-400: #a1a1aa
Copied!
neutral-300: #d4d4d8
Copied!
neutral-200: #e4e4e7
Copied!
neutral-100: #f4f4f5
Copied!
neutral-50: #fafafa
Copied!
neutral-0: #ffffff
Copied!
Success
success-600: #059669
Copied!
success-500: #10b981
Copied!
success-100: #d1fae5
Copied!
Warning
warning-600: #d97706
Copied!
warning-500: #f59e0b
Copied!
warning-100: #feeac7
Copied!
Error
error-600: #e11d48
Copied!
error-500: #f43f5e
Copied!
error-100: #ffe4e6
Copied!
System
current: currentColor
Copied!
inherit: inherit
Copied!
transparent: transparent
Copied!
Gradients
For use with text, backgrounds, box shadows and borders
Theme
light-bulb: radial-gradient(75% 150% at 50% -50%, var(--wp--preset--color--neutral-50) 20%, transparent 100%)
Copied!
background: radial-gradient(75% 600px at 50% 0px, var(--wp--preset--color--neutral-50) 0%, var(--wp--preset--color--neutral-0) 100%)
Copied!
glow: radial-gradient(50% 50% at 50% 50%, var(--wp--preset--color--neutral-50) 0%, transparent 100%)
Copied!
primary: linear-gradient(135deg,var(--wp--preset--color--neutral-700) 0%,var(--wp--preset--color--neutral-400) 100%)
Copied!
primary-light: linear-gradient(135deg,var(--wp--preset--color--neutral-500) 0%,var(--wp--preset--color--neutral-300) 100%)
Copied!
primary-transparent: linear-gradient(180deg,var(--wp--preset--color--transparent) 0%,var(--wp--preset--color--neutral-100) 100%)
Copied!
primary-foreground: linear-gradient(135deg,var(--wp--preset--color--neutral-900) 50%,var(--wp--preset--color--neutral-800) 100%)
Copied!
primary-background: linear-gradient(135deg,var(--wp--preset--color--neutral-0) 40%,var(--wp--preset--color--neutral-300) 90%)
Copied!
body-heading: linear-gradient(135deg,var(--wp--preset--color--neutral-600) 0%,var(--wp--preset--color--neutral-0) 100%)
Copied!
surface-border: linear-gradient(135deg,var(--wp--preset--color--neutral-100) 0%,var(--wp--preset--color--neutral-200) 100%)
Copied!
Default
vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
Copied!
light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)
Copied!
luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)
Copied!
luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)
Copied!
very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)
Copied!
cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)
Copied!
blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)
Copied!
blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)
Copied!
luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)
Copied!
pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)
Copied!
electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)
Copied!
midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)
Copied!
Typography
For use with text, backgrounds, box shadows and borders
Heading 1 / 96px
Almost before we knew it we had left the ground.
Heading 2 / 36px
Almost before we knew it we had left the ground.
Heading 3 / 32px
Almost before we knew it we had left the ground.
Heading 4 / 28px
Almost before we knew it we had left the ground.
Heading 5 / 24px
Almost before we knew it we had left the ground.
Heading 6 / 20px
Almost before we knew it we had left the ground.
Text / 20px
Almost before we knew it we had left the ground.
Text / 18px
Almost before we knew it we had left the ground.
Text / 16px
Almost before we knew it we had left the ground.
Text / 14px
Almost before we knew it we had left the ground.
Spacing Scale
Smart grid spacing included for consistent layouts
Name
Token
Size
Width
XX Small
spacing-xxs
8px
X Small
spacing-xs
16px
Small
spacing-sm
24px
Medium
spacing-md
32px
Large
spacing-lg
48px
X Large
spacing-xl
64px
XX Large
spacing-xxl
96px
Shadows
Subtle shadow scale presets
Shadow (xxs)
var(--wp--preset--shadow--xxs)
Shadow (xs)
var(--wp--preset--shadow--xs)
Shadow (sm)
var(--wp--preset--shadow--sm)
Shadow (md)
var(--wp--preset--shadow--md)
Shadow (lg)
var(--wp--preset--shadow--lg)
Shadow (xl)
var(--wp--preset--shadow--xl)
Shadow (xxl)
var(--wp--preset--shadow--xxl)
Elements
Common HTML element styles
Buttons
Forms
Notices
Info: These are the default styles provided by the theme. Every setting can be changed easily from within WordPress.
Success: These are the default styles provided by the theme. Every setting can be changed easily from within WordPress.
Warning: These are the default styles provided by the theme. Every setting can be changed easily from within WordPress.
Error: These are the default styles provided by the theme. Every setting can be changed easily from within WordPress.
Icons
Default icon sets included with theme. Custom icon sets can be added to child themes.