WP Block Patterns

Utility Style Guide (Blockify)

Blockify, Themes

Color palette

Default color palette inspired by the “Modern” WordPress admin color scheme. Theme color palettes can be customized from the site editor.

Please Note: Neutral colors are reversed in dark mode, and the defaults can be changed by creating your own custom colors in the Styles editor with the following name scheme “Dark Mode Heading” “Dark Mode Body” and so on.

Brand

Neutral

Utility

Gradients

For use with text, backgrounds, box shadows and borders. Default conic gradients can be changed by creating your own custom gradients named “Conic Light” and “Conic Dark”.

Theme

WordPress

Typography

Fluid typography scale automatically adapts to all screen sizes

Heading / 72px

Almost before we knew it we had left the ground.

H1 / 60px

Almost before we knew it we had left the ground.

H2 / 48px

Almost before we knew it we had left the ground.

H3 / 36px

Almost before we knew it we had left the ground.

H4 / 30px

Almost before we knew it we had left the ground.

H5 / 24px

Almost before we knew it we had left the ground.

H6 / 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.

Buttons

Customizable uniform button styling

Notices

Add simple notices to let users know of important announcements

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.