Brand Styleguide
Miracle The G Design System
Typography
Display
Playfair Display
Elegant serif for headings and emphasis. Brings gravitas and timeless sophistication.
Transform
Hero / Display
Sacred Journey
H1 / Page Title
The path reveals itself
Emphasis / Quote
Body
Inter
Clean sans-serif for body text. Readable, modern, and versatile.
Transform
Hero / Display
Body text brings clarity to complex spiritual concepts.
18px / Body Large
Standard paragraph text for descriptions and content.
16px / Body
Metadata, captions, and supporting details.
14px / Small
Section Labels
10px / Label
Monochrome Palette
Ink
#1a1a1a
Deep black for text and borders
Paper
#f8f6f3
Primary light background
Warm Paper
#f5f2ed
Aged card texture
Ash
#a8a29e
Subtle mid-tones
Mist
#e7e5e4
Light gray accents
Mystical Spectrum
Violet
#7c5cbf
The Oracle
Magenta
#a855a1
The Shaman
Gold
#c9a227
The Teacher
Teal
#2d8a8a
The Healer
Indigo
#5b5ea6
Mystery
Buttons
Motion Language
The Bounce Transition
duration-[800ms] cubic-bezier(0.34, 1.56, 0.64, 1)
Intentional pacing. Smooth entrance, slight bounce on arrival. Used for hovers, reveals, and focus states.
The Glow Shadow
Violet aura at 0.5 opacity
Paired with the bounce transition for interactive elements. Creates a soft halo effect.
Sacred Archetypes
THE HEALER
Snake Medicine
THE HEALER
{
title: "THE HEALER",
image: "/images/snake-healer1.jpg",
color: "#8B5CF6",
archetype: "Snake Medicine",
description: "Reiki sessions and energy healing for deep restoration, pain relief, and chakra balancing.",
href: "/services/healer"
}THE SHAMAN
Jaguar Medicine
THE SHAMAN
{
title: "THE SHAMAN",
image: "/images/jaguar-shaman1.jpg",
color: "#6366F1",
archetype: "Jaguar Medicine",
description: "Sacred plant medicine ceremonies and shamanic rituals for profound transformation and spiritual awakening.",
href: "/services/shaman"
}THE ORACLE
Peacock Medicine
THE ORACLE
{
title: "THE ORACLE",
image: "/images/peacock-oracle1.jpg",
color: "#EC4899",
archetype: "Peacock Medicine",
description: "Psychic readings, tarot consultations, and intuitive guidance to illuminate your path forward.",
href: "/services/oracle"
}THE TEACHER
Fox Medicine
THE TEACHER
{
title: "THE TEACHER",
image: "/images/fox-teacher1.jpg",
color: "#F59E0B",
archetype: "Fox Medicine",
description: "Medicine packages combining multiple healing modalities and Reiki training to awaken your gifts.",
href: "/services/teacher"
}