GINJU
Style Guide & Design System Back to StoreFont Families
Theme fonts, heading scales, and body copy treatments.
Aa
Heading Font Family
var(--font-heading-family)
Aa
Body Font Family
var(--font-body-family)
Colors
Theme color schemes and CSS variables used across components.
#000
var(--color-base-black)
#181818
var(--color-black-100)
#232323
var(--color-neutral-almost-black)
#121212
var(--color-black-900)
#ffffff
var(--color-base-white)
#EFE9DE
var(--color-natural-white-300)
#F6F1E8
var(--color-natural-white-400)
#FAFAF7
var(--color-natural-white-500)
#B4B4B4
var(--color-natural-white-600)
#B0ADA6
var(--color-neutral-warm-gray)
#0B0B0B
var(--color-gray-100)
#6E6E6E
var(--color-gray-400)
#B4B4B4
var(--color-gray-600)
#D3D3D3
var(--color-gray-700)
#EEEEEE
var(--color-gray-800)
#4E4E4E
var(--color-neutral-charcoal-gray)
Titles
Heading decorations and stylized section headers.
Standard Section Title
Page title - h1 title italic.
Section title large - h2 title italic.
Section title medium - h3 title italic.
Section title small - h4 title italic.
Layout Container
Layout container responsive alignment
Use the page-width class for the container to ensure all sections are aligned consistently across all devices.