Blockify Demo
Style Guide
Color Palette
Default color palette for creating beautiful designs
Primary
primary-950: #1b174f
Copied!
primary-900: #2c2788
Copied!
primary-800: #3027ac
Copied!
primary-700: #3a2cd6
Copied!
primary-600: #4539f2
Copied!
primary-500: #575afd
Copied!
primary-400: #7783ff
Copied!
primary-300: #9eaeff
Copied!
primary-200: #c3cfff
Copied!
primary-100: #dde6ff
Copied!
primary-50: #edf1ff
Copied!
primary-25: #f6f8ff
Copied!
Neutral
neutral-950: #030712
Copied!
neutral-900: #111827
Copied!
neutral-800: #1f2937
Copied!
neutral-700: #374151
Copied!
neutral-600: #4b5563
Copied!
neutral-500: #6b7280
Copied!
neutral-400: #9ca3af
Copied!
neutral-300: #d1d5db
Copied!
neutral-200: #e5e7eb
Copied!
neutral-100: #f3f4f6
Copied!
neutral-50: #f9fafb
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
primary-600-500: linear-gradient(135deg,var(–wp–preset–color–primary-700) 0%,var(–wp–preset–color–primary-500) 100%)
Copied!
primary-500-300: linear-gradient(135deg,var(–wp–preset–color–primary-500) 0%,var(–wp–preset–color–primary-300) 100%)
Copied!
primary-transparent: linear-gradient(180deg,var(–wp–preset–color–transparent) 0%,var(–wp–preset–color–primary-100) 100%)
Copied!
primary-foreground: linear-gradient(135deg,var(–wp–preset–color–primary-900) 0%,var(–wp–preset–color–neutral-950) 100%)
Copied!
body-heading: linear-gradient(135deg,var(–wp–preset–color–neutral-600) 0%,var(–wp–preset–color–neutral-950) 100%)
Copied!
surface-border: linear-gradient(135deg,var(–wp–preset–color–neutral-100) 0%,var(–wp–preset–color–neutral-200) 100%)
Copied!
background-transparent: linear-gradient(0deg,var(–wp–custom–body–background) 50%,transparent 50%)
Copied!
transparent-background: linear-gradient(180deg,var(–wp–custom–body–background) 50%,transparent 50%)
Copied!
fade-left: linear-gradient(90deg,var(–wp–preset–color–neutral-0) 0%,transparent 100%)
Copied!
fade-right: linear-gradient(-90deg,var(–wp–preset–color–neutral-0) 0%,transparent 100%)
Copied!
checkerboard: repeating-conic-gradient(var(–wp–preset–color–neutral-200) 0% 25%, transparent 0% 50%) 50% / 16px 16px
Copied!
grid: conic-gradient(from 90deg at 1px 1px,transparent 90deg,var(–wp–custom–gradient-grid–color,var(–wp–preset–color–neutral-100)) 0) -1px -1px / var(–wp–custom–gradient-grid–size,40px) var(–wp–custom–gradient-grid–size,40px)
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
Display / 60px
Almost before we knew it we had left the ground.
Heading 1 / 44px
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.