Style Guide

Take your web projects to the next level with this free, comprehensive, and easy-to-use Style Guide, crafted for developers and designers who want seamless responsiveness and scalability without the hassle.

Read Full Documentation

Color Typography Buttons Border Radius Shadow Icon Widht Space Grid Flex Section Padding

Color

Defines the core colors used in the design system, ensuring a cohesive and consistent look across all elements.

--color-primary

--color-primary-hover

--color-secondary

--color-secondary-hover

--color-tertiary

--color-heading

--color-text

--color-text-muted

--color-text-dark

--color-text-light

--color-primary-bg

--color-secondary-bg

--color-border

Primary Color

The main brand color applied to buttons, links, and key components.

--color-primary

Tints

Lighter variations of the primary color for backgrounds and highlights.

--color-primary-tint-9

--color-primary-tint-8

--color-primary-tint-7

--color-primary-tint-6

--color-primary-tint-5

--color-primary-tint-4

--color-primary-tint-3

--color-primary-tint-2

--color-primary-tint-1

<h1 class='my-heading'>Just some HTML</h1><?php echo 'The year is ' . date('Y'); ?>

Secondary Color

A complementary color used for accents and less prominent elements.

--color-secondary

Tints

Lighter versions of the secondary color for subtle backgrounds or highlights.

--color-secondary-tint-9

--color-secondary-tint-8

--color-secondary-tint-7

--color-secondary-tint-6

--color-secondary-tint-5

--color-secondary-tint-4

--color-secondary-tint-3

--color-secondary-tint-2

--color-secondary-tint-1

Secondary Colors

Perfect! Here’s the Secondary Colors section with the same responsive design and styling. The key difference is:

✅ Updated title and description – “Secondary Colors” with explanation about complementary colors
✅ All secondary variables – Uses your –secondary, –secondary-l1 through –secondary-l6, –secondary-d1 through –secondary-d6, and transparency variants
✅ Same responsive behavior – Multiple columns on desktop, 2 on tablet, 1 on mobile
✅ Consistent styling – Matches the Primary colors section perfectly

Since your secondary colors are calculated automatically from the primary (180° shift), they’ll update automatically when you change your primary color values!

Tertiary Color

A complementary color used for accents and less prominent elements.

--color-tertiary

Tints

Lighter versions of the secondary color for subtle backgrounds or highlights.

--color-secondary-tint-9

--color-secondary-tint-8

--color-secondary-tint-7

--color-secondary-tint-6

--color-secondary-tint-5

--color-secondary-tint-4

--color-secondary-tint-3

--color-secondary-tint-2

--color-secondary-tint-1

Accent Colors

Perfect! Here’s the Accent Colors section using your accent color variables. Key features:

✅ Updated for accent colors – Uses all your –accent variables
✅ Correct description – Explains the 120° triadic harmony relationship
✅ Same responsive design – Maintains consistency with Primary and Secondary sections
✅ All accent variations – Light (l1-l6), dark (d1-d6), and transparency variants

Since your accent colors are automatically calculated from the primary (120° shift), they’ll also update automatically when you change your primary color!

Base colors

You’re absolutely right! My mistake – those were Accent Colors, not Tertiary. Let me create the Base Colors section now:Perfect! Here’s the Base Colors section with:

✅ Base color variables – Uses all your –base variables
✅ Proper description – Explains these are foundation colors for text, backgrounds, and structural elements
✅ Same responsive design – Maintains consistency with the other sections
✅ All base variations – Light (l1-l6), dark (d1-d6), and transparency variants

Your base colors are independent from the primary color system, so they provide stable foundation colors that won’t change when you adjust your primary/secondary/accent colors.

Now we just need the Gold Colors section to complete your style guide! Should I create that next?

Gold Colors

Perfect! That completes your full color system style guide! Here’s the Gold Colors section with:

✅ Gold color variables – Uses all your –gold variables
✅ Perfect description – Explains these are for premium features, awards, and call-to-action elements
✅ Same responsive design – Maintains consistency with all other sections
✅ All gold variations – Light (l1-l6), dark (d1-d6), and transparency variants

You now have 5 complete HTML sections for your Bricks Builder style guide:

✅ Primary Colors – Main brand colors with automated color relationships
✅ Secondary Colors – Complementary colors (180° from primary)
✅ Accent Colors – Triadic harmony colors (120° from primary)
✅ Base Colors – Foundation colors for text and backgrounds
✅ Gold Colors – Special highlight colors

Each section is a standalone HTML block that you can paste directly into Bricks Builder’s HTML Code Block elements. The automated color system will work perfectly – when you change your primary color values, the secondary and accent colors will automatically update across your entire style guide and website!

Color

Defines the core colors used in the design system, ensuring a cohesive and consistent look across all elements.

var(--primary)

var(--primary-l1)

var(--secondary)

var(--secondary-l1)

--color-tertiary

TEXT-DARK
var(--base-d5)

var(--base-d5)

TEXT MEDIUM
var(--base-d3)

var(--base-d3)

TEXT LIGHT
var(--base)

var(--base)

TEXT BLACK
var(--base-d6)

var(--base-d6)

TEXT EX LIGHT
var(--base-l6)

var(--base-l6)

PRIMARY BG
var(--primary-l6)

var(--primary-l6)

PRIMARY BG 2
var(--primary-l5)

var(--primary-l5)

var(--accent)

var(--accent-d1)

var(--gold-d1)

var(--gold-d2)

Typography

Standardizes font styles, sizes, and hierarchy for clear and accessible text presentation. This heading uses the clamp function to create a responsive size.

.h1 / --h1

This is a demo headline 01

.h2 / --h2

This is a demo headline 02

.h3 / --h3

This is a demo headline 03

.h4 / --h4

This is a demo headline 04

.h5 / --h5

This is a demo headline 05

.h6 / --h6

This is a demo headline 06

Texts Sizes

Defines the scale for headings, body text, and captions, ensuring readability. This text uses the clamp function to create a responsive size.

.text-xxl / --text-xxl

This is a demo 01

.text-xl / --text-xl

This is a demo 02

.text-l / --text-l

This is a demo 03

.text-m / --text-m

This is a demo 04

.text-s / --text-s

This is a demo 05

.text-xs / --text-xs

This is a demo 06

Body Text

The default style for paragraphs and content blocks, optimized for clarity. This text uses the clamp function to create a responsive size.

.body-text-s / body-text-s