Style Guide

Comprehensive guide for creating blogs and custom pages

Color Palette

Primary Colors

Primary #1b3028
Secondary #88938f
Accent #c6e970

Additional Accent Colors

Blue #4a9dd4
Coral #ff7a4d
Orange #FB4D17
Purple #9b7dd4

Neutral Colors

White #ffffff
Gray Light #6B7280
Gray Medium #707070
Gray Dark #1A1A1A
Black #000000

Typography

Font Family

Manrope - Primary Font

Manrope - Heading Font

Headings

Heading 1 - 48px

Heading 2 - 38px

Heading 3 - 32px

Heading 4 - 22px

Heading 5 - 18px
Heading 6 - 16px

Text Sizes

Extra Small Text - 12px

Small Text - 14px

Base Text - 16px

Large Text - 18px

Extra Large Text - 20px

2XL Text - 22px

3XL Text - 30px

Semantic vs Utility Headings

Headings can be applied via semantic tags (<h1>–<h6>) or utility classes (.h1–.h6).

Heading 1 — semantic tag
<h1>Heading 1</h1>

Heading 1

Heading 1 — utility class
<div class="h1">Heading 1</div>
Heading 1
Heading 4 Light — utility classes
<div class="h4 light">Heading 4 Light</div>
Heading 4 Light

Body Text Variants

Use size utilities (.large, .small) together with weight utilities (.light, .strong) for consistent typography.

Large / Light
<p class="large light">Your data, made credible</p>

Your data, made credible

Regular / SemiBold
<p class="body-regular strong">Your data, made credible</p>

Your data, made credible

Small / Light
<p class="small light">Your data, made credible</p>

Your data, made credible

Buttons

Primary Buttons

Primary Button
<button class="button button--dark">Primary Button</button>
Primary with Arrow
<button class="button button--dark with-arrow">Primary with Arrow</button>

Secondary Buttons

Secondary Button
<button class="button button--white">Secondary Button</button>
Secondary with Arrow
<button class="button button--white with-arrow">Secondary with Arrow</button>

Link Buttons

Use .button.button--link for low-emphasis actions that still look like part of the button system.

Text Link Button
<button class="button button--link">Text Link Button</button>
Link Button with Arrow
<button class="button button--link with-arrow">Link Button with Arrow</button>

Utility Classes

Spacing Utilities

u-mt-0
u-mb-4
u-p-6
u-px-3

Flexbox Utilities

u-flex
u-justify-between
u-items-center
u-flex-col

Text Utilities

u-text-center
u-text-left
u-font-bold
u-uppercase

Grid System

Basic Layout

Use the Bootstrap-style grid system for creating responsive layouts. Based on 12-column system with .row and .col-* classes.

Two Column Layout
<div class="row">
  <div class="col-6">col-6</div>
  <div class="col-6">col-6</div>
</div>
col-6
col-6
Mixed Layout (8+4)
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>
col-8
col-4
Mixed Layout (4+4+4)
<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>
col-3
col-6
col-3

Grid with Gaps

Add gaps between grid items using gap utilities.

Layout with Gaps
<div class="row g-3">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>
col-4
col-4
col-4

Advanced Layouts

More complex layout combinations for different use cases.

Four Column Layout (3+3+3+3)
<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
</div>
col-3
col-3
col-3
col-3
Mixed Layout (2+8+2)
<div class="row">
  <div class="col-2">col-2</div>
  <div class="col-8">col-8</div>
  <div class="col-2">col-2</div>
</div>
col-2
col-8
col-2

Icons

Material Icons

You can use Material Icons from Material UI by adding the Material Icons font and using the material-icons class.

Basic Icon
<i class="material-icons">home</i>
home
Icon Sizes
<i class="material-icons">star</i>
<i class="material-icons icon-sm">star</i>
<i class="material-icons icon-lg">star</i>
star star star
Icon Colors
<i class="material-icons icon-primary">favorite</i>
<i class="material-icons icon-accent">check_circle</i>
<i class="material-icons icon-secondary">info</i>
favorite check_circle info

Brand SVG Icons

Inline SVG icons should be pasted directly into templates for full control over styling. Below are examples of brand icons used in the theme.

Primary Logo Mark
<svg xmlns="http://www.w3.org/2000/svg" width="44.397" height="56.737" viewBox="0 0 44.397 56.737">
    <path d="M36.959,28.45A168.383,168.383,0,0,0,26.426,47.1a1.977,1.977,0,0,1-1.746,1.138l-3.506.091a1.466,1.466,0,0,1-1.093-.455c-1.7-1.821-8.728-8.986-12.659-12.674a.839.839,0,0,1-.046-1.184c3.051-3.218,6.087-2.52,8.424-.167,2.019,2.034,4.918,4.751,6.572,6.481,6.587-12.173,12.31-21.052,16.757-26.76a5.256,5.256,0,0,0,.319-6.056,13.412,13.412,0,0,0-3.324-3.506Q30.774.005,20.567-.01H2.049A2.083,2.083,0,0,0,0,2.054V54.329a2.4,2.4,0,0,0,2.4,2.4H22.191q11.02,0,16.62-4.053A13.227,13.227,0,0,0,44.4,41.321a14.53,14.53,0,0,0-2.231-8.272,14.159,14.159,0,0,0-5.206-4.614Z" fill="#1b2f28"/>
</svg>