Blockify

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.

WordPress

Add Card Icon
Add Submenu Icon
Add Template Icon
Align Center Icon
Align Justify Icon
Align Left Icon
Align None Icon
Align Right Icon
Archive Title Icon
Archive Icon
Arrow Down Left Icon
Arrow Down Right Icon
Arrow Down Icon
Arrow Left Icon
Arrow Right Icon
Arrow Up Left Icon
Arrow Up Right Icon
Arrow Up Icon
Aspect Ratio Icon
At Symbol Icon
Audio Icon
Backup Icon
Before After Icon
Block Default Icon
Block Meta Icon
Block Table Icon
Border Icon
Box Icon
Brush Icon
Bug Icon
Button Icon
Buttons Icon
Calendar Icon
Cancel Circle Filled Icon
Caption Icon
Capture Photo Icon
Capture Video Icon
Category Icon
Chart Bar Icon
Check Icon
Chevron Down Icon
Chevron Left Small Icon
Chevron Left Icon
Chevron Right Small Icon
Chevron Right Icon
Chevron Up Down Icon
Chevron Up Icon
Circle Filled Icon
Circle Icon
Classic Icon
Close Small Icon
Close Icon
Cloud Upload Icon
Cloud Icon
Code Icon
Cog Icon
Color Icon
Column Icon
Columns Icon
Comment Author Avatar Icon
Comment Author Name Icon
Comment Content Icon
Comment Edit Link Icon
Comment Reply Link Icon
Comment Icon
Copy Icon
Cover Icon
Create Icon
Crop Icon
Currency Dollar Icon
Currency Euro Icon
Currency Pound Icon
Custom Link Icon
Custom Post Type Icon
Desktop Icon
Details Icon
Download Icon
Drag Handle Icon
Drawer Left Icon
Drawer Right Icon
Edit Icon
External Icon
File Icon
Filter Icon
Flip Horizontal Icon
Flip Vertical Icon
Footer Icon
Format Bold Icon
Format Capitalize Icon
Format Indent Rtl Icon
Format Indent Icon
Format Italic Icon
Format List Bullets Rtl Icon
Format List Bullets Icon
Format List Numbered Rtl Icon
Format List Numbered Icon
Format Lowercase Icon
Format Ltr Icon
Format Outdent Rtl Icon
Format Outdent Icon
Format Rtl Icon
Format Strikethrough Icon
Format Underline Icon
Format Uppercase Icon
Fullscreen Icon
Gallery Icon
Globe Icon
Grid Icon
Group Icon
Handle Icon
Header Icon
Heading Level 1 Icon
Heading Level 2 Icon
Heading Level 3 Icon
Heading Level 4 Icon
Heading Level 5 Icon
Heading Level 6 Icon
Heading Icon
Help Filled Icon
Help Icon
Home Icon
Html Icon
Image Icon
Inbox Icon
Info Icon
Insert After Icon
Insert Before Icon
Institution Icon
Justify Center Icon
Justify Left Icon
Justify Right Icon
Justify Space Between Icon
Justify Stretch Icon
Key Icon
Keyboard Close Icon
Keyboard Return Icon
Keyboard Icon
Language Icon
Layout Icon
Level Up Icon
Lifesaver Icon
Line Dashed Icon
Line Dotted Icon
Line Solid Icon
Link Off Icon
Link Icon
List Item Icon
List View Icon
List Icon
Lock Outline Icon
Lock Small Icon
Lock Icon
Login Icon
Loop Icon
Mail Icon
Map Marker Icon
Media And Text Icon
Media Icon
Megaphone Icon
Menu Icon
Mobile Icon
Moon Icon
More Horizontal Mobile Icon
More Horizontal Icon
More Vertical Icon
More Icon
Move To Icon
Navigation Icon
Next Icon
Not Found Icon
Overlay Text Icon
Page Break Icon
Page Icon
Pages Icon
Paragraph Icon
Payment Icon
Pencil Icon
People Icon
Percent Icon
Pin Small Icon
Pin Icon
Plugins Icon
Plus Circle Filled Icon
Plus Circle Icon
Plus Icon
Position Center Icon
Position Left Icon
Position Right Icon
Post Author Icon
Post Categories Icon
Post Comments Count Icon
Post Comments Form Icon
Post Comments Icon
Post Content Icon
Post Date Icon
Post Excerpt Icon
Post Featured Image Icon
Post List Icon
Post Terms Icon
Post Title Icon
Post Icon
Preformatted Icon
Previous Icon
Pull Left Icon
Pull Right Icon
Pullquote Icon
Query Pagination Next Icon
Query Pagination Numbers Icon
Query Pagination Previous Icon
Query Pagination Icon
Query Title Icon
Quote Icon
Receipt Icon
Redo Icon
Remove Bug Icon
Remove Submenu Icon
Replace Icon
Reset Icon
Resize Corner N E Icon
Reusable Block Icon
Rotate Left Icon
Rotate Right Icon
Row Icon
Rss Icon
Search Icon
Seen Icon
Separator Icon
Settings Icon
Shadow Icon
Share Icon
Shield Icon
Shipping Icon
Shortcode Icon
Shuffle Icon
Sidebar Icon
Sides All Icon
Sides Axial Icon
Sides Bottom Icon
Sides Horizontal Icon
Sides Left Icon
Sides Right Icon
Sides Top Icon
Sides Vertical Icon
Site Logo Icon
Slide Icon
Slider Icon
Stack Icon
Star Empty Icon
Star Filled Icon
Star Half Icon
Store Icon
Stretch Full Width Icon
Stretch Wide Icon
Styles Icon
Subscript Icon
Sun Icon
Superscript Icon
Swatch Icon
Symbol Filled Icon
Symbol Icon
Table Column After Icon
Table Column Before Icon
Table Column Delete Icon
Table Row After Icon
Table Row Before Icon
Table Row Delete Icon
Table Icon
Tablet Icon
Tabs Vertical Icon
Tabs Icon
Tag Icon
Term Description Icon
Text Color Icon
Text Horizontal Icon
Text Vertical Icon
Tip Icon
Title Icon
Tool Icon
Trash Icon
Trending Down Icon
Trending Up Icon
Typography Icon
Undo Icon
Ungroup Icon
Unlock Icon
Unseen Icon
Update Icon
Upload Icon
Verse Icon
Video Icon
Warning Icon
Widget Icon
WordPress Icon

Social

Amazon Icon
Bandcamp Icon
Behance Icon
Blockify Icon
Chain Icon
Codepen Icon
Deviantart Icon
Dribbble Icon
Dropbox Icon
Etsy Icon
Facebook Icon
Feed Icon
Fivehundredpx Icon
Flickr Icon
Foursquare Icon
Github Icon
Goodreads Icon
Google Icon
Instagram Icon
Lastfm Icon
Linkedin Icon
Mail Icon
Mastodon Icon
Medium Icon
Meetup Icon
Patreon Icon
Pinterest Icon
Pocket Icon
Reddit Icon
Skype Icon
Slack Icon
Snapchat Icon
Soundcloud Icon
Spotify Icon
Telegram Icon
Tiktok Icon
Tumblr Icon
Twitch Icon
Twitter Icon
Vimeo Icon
Vk Icon
WordPress Icon
X Icon
Yelp Icon
Youtube Icon