Soul Magic Studio · Blueprint
Your design system, ready to become someone's.
This page is a living style guide. Every color, heading, button, and card on it is wired to your global tokens — change a color in Site Settings and the whole page responds. Think of it as the soul of a site, before the site has a name.
01 — Color
A palette built to carry mood without demanding attention.
Four brand colors do all the feeling. Swap just these four — Accent, Accent Soft, Ink, Ink Soft — and every button, heading, section, and card transforms with them. Change a token in Site Settings → Global Colors and the whole site responds. No hunting through modules. No mirroring anything twice.
The other nine tokens are the quiet structure underneath — surfaces, borders, and states that hold the page together without drawing focus to themselves.
Accent
#B8593A
Brand color 1 of 4 — CTAs, buttons, links
Accent Soft
#F2DDD2
Brand color 2 of 4 — CTA section BG, hover tints
Ink
#1F1A14
Brand color 3 of 4 — all headings
Ink Soft
#4A4239
Brand color 4 of 4 — body paragraphs
Ink Muted
#8C8275
Captions, meta, eyebrows
BG Page
#FBF6EE
Warm off-white page background
BG Surface
#FFFFFF
Cards + raised panels
BG Alt
#F4ECE0
Tinted alt-section background
BG Dark
#1F1A14
Inverted dark section
Success
#5A7A4F
Positive feedback states
Warning
#C68B3E
Cautionary feedback states
Error
#9C3E3E
Error / destructive states
02 — Type
Words deserve to be read.
A fluid scale from caption labels to display headings. Each step uses a clamp() formula so type breathes differently on a phone than on a wide monitor — no sudden jumps, no media queries to manage.
H1 / Display
Something worth beginning.
H2 / Section
This is where the section speaks.
H3 / Subhead
A supporting idea, clearly held.
H4 / Card
Card or feature heading.
H5 / Small
A smaller heading for steps and labels.
H6 / Tiny
The smallest heading in the scale.
Lead
A lead paragraph — used for hero subheadings and section intros. Slightly larger and quieter than body text.
Body
Body paragraph text. This is what most of your site reads at — comfortable, legible, unhurried. Italics are always welcome here, and links look like this.
Small
Small text for captions, fine print, and quiet supporting copy that doesn't need to shout.
Eyebrow
EYEBROW LABEL TEXT
H1: Design with Purpose
Good design is more than aesthetics – it's about creating experiences that connect with your audience. Every element should serve a clear purpose, guiding visitors toward meaningful interactions while reflecting your brand's unique personality.
H2: Creating Visual Hierarchy
When we establish clear visual hierarchy through thoughtful typography choices, we guide users naturally through our content. Strategic use of heading sizes, font weights, and spacing helps readers quickly scan and understand the structure of information, making your message more accessible and engaging.
H3: Typography Sets the Tone
Every choice we make shapes how visitors experience your message. That’s why we approach each project with intention and care.
Typography is the craft of endowing human language with a durable visual form.
- Robert Bringhurst
Ready to transform your web presence? Explore our design services and discover how strategic design can elevate your brand.
H4: Why typography matters:
Good design is more than aesthetics – it’s about creating experiences that connect with your audience.
- Sets the emotional tone of your website
- Improves reaproves readability and user experience proves readability and user experiencedability and user experience
- Creates consistency across all pages
H5: Attention to Detail
It’s the small refinements that separate good design from great design. Even minor adjustments can significantly impact user engagement.
- Sets the emotional tone of your website
- Improves readability and user experience proves readability and user experienceproves readability and user experienceproves readability and user experien proves readability and user experiencece
- Creates consistency across all pages
H6: Fine-Tuning the Experience
Good design is more than aesthetics – it’s about creating experiences that connect with your audience. When we establish clear visual hierarchy through thoughtful typography choices, we guide users naturally through our content.
03 — Buttons
Every action needs a tone.
Three styles, three situations. Primary for the moment you're inviting someone toward something. Secondary when you want to offer an alternative without urgency. Text link for quieter, in-flow moments — or anywhere a button would feel too heavy.
Primary
Secondary
Text link
04 — Components
The building blocks, ready to place.
Cards built on presets, not one-off styles. Edit the blurb preset once and every card on every page responds. The same is true for sections, rows, and buttons — the system moves together, or it doesn't move at all.
Tokens at the spine
Colors, type, spacing — stored as global tokens. One edit cascades through every component on every page. Nothing is hardcoded twice.
Presets do the work
Option group presets for typography and buttons. Element presets for sections, rows, and cards. Build once, place anywhere, edit from one place.
Swap-ready by design
Tuned to stay coherent on brand swap. Change the accent color, change the font — the system holds together without needing to touch a single module.
05 — CTA Pattern
A closing that invites, not pushes.
This CTA section is a reusable element preset. Drop it on any page, change the copy, and it inherits your brand colors and spacing automatically. No styling required.
Getting started
Three steps to make this yours.
You don't need to touch individual modules or hunt through settings. Everything flows from three places. Change them there, and the whole site follows.
01 — Colors
Site Settings → Global Colors. Your 13 blueprint tokens are already imported. Edit the four brand colors — Accent, Accent Soft, Ink, Ink Soft — to match your client's palette. Every preset, section, button and card updates the moment you save. Nothing else to change.
02 — Fonts
Variable Manager → Fonts. Set Heading Font and Body Font. The default pairing is Alegreya + Alegreya Sans. Swap them and the full type system — scale, weight, spacing — follows automatically. No preset editing required.
03 — Fine-tuning
Variable Manager → Numbers. Type scale, spacing, and radius tokens live here. Adjust Space 3XL to breathe sections out or pull them in. Adjust heading sizes if your font needs a different scale. Most clients won't need this step at all.