Internal Shivari system reference

Style Guide

Use this page as the source of truth for existing Shivari colors, text classes, buttons, and spacing utilities. New page sections should reuse these classes before adding new section-specific BEM classes.

Colors

Use color variables instead of hard-coded values when styling Shivari pages.

White

var(--white)

white

BG

var(--bg)

#f9f5f1

BG card

var(--bg-card)

#fcfaf8

BG card 2

var(--bg-card-2)

#f7eee9

Black

var(--black)

#2b2a28

Grafit

var(--grafit)

#58585c

Orange

var(--orange)

#e75802

Orange 2

var(--orange-2)

#d97834

Orange 3

var(--orange-3)

#bf612e

Grin border

var(--grin-border)

#4a6e42

Grin dop color

var(--grin-dop-color)

#79936b

Lazure

var(--lazure)

#59b3b4

Blue

var(--blue)

#1b7f7a

Grey

var(--grey)

hsla(0, 0%, 51.62%, 1)

Light Gray

var(--light-gray)

hsla(0, 0%, 87.06%, 1)

Brown

var(--brown)

#472c0d

Brown Lite

var(--brown-lite)

#6c563d

Dark Body

var(--dark-body)

hsla(284, 4.90%, 12.83%, 1)

Yellow Light

var(--yelow-light)

#fffef1

Blue Light

var(--blue-light)

#f6fef4

Text Styles

For existing pages, choose the closest existing class instead of creating new text or heading classes.

h1 large

Retreat page headline

h2

Section heading style

h3

Section heading style

text-24 relewey

Card heading style

text-22 relewey

Card heading style

text-18 grafit

Body copy for editorial sections, cards, descriptions, and support text across Shivari pages.

Buttons

Use existing button classes before creating page-specific button styles.

Btn-main
btn-trans

Spacing

Use global spacing utilities for page rhythm. Add BEM layout classes only for section-specific grids and wrappers.

padding bott-20

Primary section vertical rhythm.

padding bott-60

Heading block bottom spacing.

Grid gap 4rem / 3rem

Large two-column editorial sections.

Card gap 1.25rem

Repeated card grids and compact content groups.