Presence Embodied
Brand guidelines, component library, and admin interface mockups.
Machine-readable for LLMs and developers.
Foundations
Core design tokens that define the visual language of Presence Embodied.
Color Palette
/* Presence Embodied Color Tokens */
--pe-bg: #F3EEE7 /* Linen — page background */
--pe-surface: #EAE3D7 /* Sand — card/component backgrounds */
--pe-accent: #C9A86A /* Rich Golden — primary accent, CTAs */
--pe-stone: #B4B0A8 /* Stone — neutral/muted elements */
--pe-text: #333333 /* Charcoal — primary text */
--pe-subtext: #6F6B64 /* Taupe Grey — secondary text */
--pe-border: #D9D3C7 /* Border — dividers, outlines */
/* Extended Palette */
--pe-success: #7A9E7E /* Sage Green — success states */
--pe-warning: #D4A574 /* Warm Amber — warnings */
--pe-error: #C47B7B /* Muted Rose — errors */
--pe-info: #7B9EB5 /* Dusty Blue — informational */ --pe-bg #F3EEE7 · Linen --pe-surface #EAE3D7 · Sand --pe-accent #C9A86A · Rich Golden --pe-stone #B4B0A8 · Stone --pe-text #333333 · Charcoal --pe-subtext #6F6B64 · Taupe Grey --pe-border #D9D3C7 Extended Semantic Colors
--pe-success #7A9E7E · Sage Green --pe-warning #D4A574 · Warm Amber --pe-error #C47B7B · Muted Rose --pe-info #7B9EB5 · Dusty Blue Gradients
radial-gradient(circle at 0% 0%, #fffe83, #c48814) linear-gradient(135deg, --pe-surface, --pe-bg) Typography Scale
/* Typography Tokens */
--font-heading: 'Cormorant Garamond', serif /* Headings, display */
--font-body: 'Source Sans 3', sans-serif /* Body text, UI */
/* Scale */
Display: 4.6rem / 1.2 (mobile: 3.2rem)
H1: clamp(36px, 5.2vw, 52px) / 1.25, letter-spacing: 0.02em
H2: clamp(32px, 4vw, 42px) / 1.25, letter-spacing: -0.01em
H3: 1.95rem / 1.3
Body: clamp(19px, 1.9vw, 23px) / 1.6
Small: 1.125rem / 1.5
Button: 1.125rem / 1, font-weight: 600 font-family: Cormorant Garamond · 4.6rem · weight 400 Presence & Embodiment
.h1 · clamp(36px, 5.2vw, 52px) · letter-spacing: 0.02em Therapeutic Offerings
.h2 · clamp(32px, 4vw, 42px) · letter-spacing: -0.01em Compassionate Inquiry
.h3 · 1.95rem (31.2px) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Source Sans 3 · clamp(19px, 1.9vw, 23px) · line-height: 1.6 Supporting text for captions, labels, and metadata. Used for secondary information.
.small · 1.125rem (18px) · line-height: 1.5 Typefaces
Used for headings, display text, and pull quotes. Conveys elegance, warmth, and presence. Weights: 400 (regular), 600 (semibold).
Used for body text, UI elements, buttons, and navigation. Clean, readable, professional. Weights: 400 (regular), 600 (semibold).
Spacing & Layout
/* Layout Tokens */
Container widths: sm=640px md=768px lg=1024px xl=1200px
Section padding: sm=2rem md=3rem lg=5rem xl=7rem
Mobile padding: All sections collapse to 2rem on ≤768px
Container padding: 0 1.5rem (1rem on mobile)
Border radius: 14px (--radius)
Breakpoint: 768px (mobile/desktop threshold) Container Widths
Section Padding
Design Tokens
--radius: 14px --shadow-sm: 0 1px 2px rgba(0,0,0,.04) --shadow-md: 0 6px 20px rgba(0,0,0,.06) --transition: 220ms cubic-bezier(.2,.8,.2,1) Brand Voice
Tone
Warm, grounded, inviting. The language should feel like a safe space — not clinical, not overly casual. Present and embodied.
Do
- Use first person ("I offer", "we explore")
- Speak to the reader directly ("you")
- Use embodied, sensory language
- Keep it simple and accessible
Don't
- Use overly clinical or academic jargon
- Make grandiose promises
- Use pressure or urgency tactics
- Over-explain or over-qualify
Components
Reusable UI building blocks used across the site.
Buttons & CTAs
Primary
Golden gradient CTA. Used for the main action on a page (Book, Learn More).
.btn .btn-primary Secondary
Outlined button. Used for secondary actions (Learn More, View Details).
.btn .btn-secondary Link CTA
Text link with animated underline on hover. Used for inline navigation.
.link-cta Disabled State
Buttons when action is unavailable.
disabled attribute Button Specifications
| Variant | Padding | Min Height | Font Size | Border Radius |
|---|---|---|---|---|
| Default | 0.875rem 1.75rem | 48px | 1.125rem | 14px |
| Small | 0.625rem 1.25rem | 40px | 0.875rem | 14px |
Cards
Service Card
Compassionate Inquiry
A therapeutic approach developed by Dr. Gabor Maté that reveals what lies beneath the appearance we present to the world.
Pricing Card
Difuso Explorative Call
An introductory call to explore how we might work together. No commitment required.
Quote / Testimonial Card
"Working with Stephanie has been transformative. Her gentle, embodied approach helped me reconnect with parts of myself I had long forgotten."
0 people found this helpful
Info Card
Edinburgh, Scotland
In-person sessions available in the New Town area. Online sessions available worldwide via secure video.
Stat Cards
Form Elements
Badges & Tags
Status Badges
Location Tags
Category Tags
Alerts & Notifications
Patterns
Composite layouts and recurring UI patterns used across the site.
Hero Sections
A space for healing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. A safe container for exploration and growth.
Split Hero
Presence Embodied
Somatic therapy and compassionate inquiry in Edinburgh, Scotland. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Explore OfferingsCentered Minimal Hero
Content Blocks
Feature Row
Compassionate Inquiry
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CTA Banner
FAQ / Accordion
What is Compassionate Inquiry?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
How long is a typical session?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sessions typically last between 50-90 minutes depending on the type of work.
Do you offer online sessions?
Yes, online sessions are available worldwide via secure video platform. Lorem ipsum dolor sit amet.
Testimonial Layouts
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. The sessions have been truly life-changing."
"Lorem ipsum dolor sit amet. Working with Stephanie helped us reconnect in ways we didn't think possible."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. A truly grounded and present therapist."
Grid Layouts
3-Column Service Grid
Individual Therapy
Lorem ipsum dolor sit amet, one-on-one therapeutic support tailored to your needs.
Couples Therapy
Lorem ipsum dolor sit amet, navigate relationship challenges with compassion.
Difuso Intensives
Lorem ipsum dolor sit amet, deep immersive healing experiences over multiple days.
2-Column Split
Left Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Right Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Navigation Patterns
Breadcrumb
Tab Navigation
Pagination
Admin CRM
Mockup interface for managing clients, sessions, and practice operations. All data shown is placeholder (lorem ipsum).
Dashboard
Today's Sessions
Quick Actions
Recent Activity
Client List
| Client | Type | Status | Last Session | Next Session | Sessions | Actions |
|---|---|---|---|---|---|---|
| MR Maria Rossi maria.rossi@email.com | Individual | Active | 12 Apr 2026 | 15 Apr 2026 | 24 | View → |
| LB Luca Bianchi luca.b@email.com | Difuso | New | — | 15 Apr 2026 | 0 | View → |
| JS James & Sarah K. james.sarah.k@email.com | Couples | Active | 10 Apr 2026 | 15 Apr 2026 | 8 | View → |
| EV Elena Vasquez elena.v@email.com | Individual | Active | 8 Apr 2026 | 15 Apr 2026 | 16 | View → |
| AT Amara Thornton amara.t@email.com | Individual | Inactive | 14 Feb 2026 | — | 12 | View → |
Client Detail
Maria Rossi
maria.rossi@email.com · +44 7700 900123
Overview
Forms & Documents
Billing
Session History
| Date | Type | Duration | Format | Status | Notes |
|---|---|---|---|---|---|
| 15 Apr 2026 | Compassionate Inquiry | 60 min | In-Person | Upcoming | Add → |
| 12 Apr 2026 | Compassionate Inquiry | 60 min | In-Person | Completed | View → |
| 5 Apr 2026 | Compassionate Inquiry | 60 min | Online | Completed | View → |
| 29 Mar 2026 | Compassionate Inquiry | 60 min | In-Person | Completed | View → |
Session Calendar
April 2026
Session Notes
Maria Rossi — Session #24
12 April 2026 · 60 min · Compassionate Inquiry · In-Person
Session Summary
Key Observations
Follow-up & Homework
LLM Reference Data
Machine-readable design system summary for AI agents and developers.
{
"designSystem": "Presence Embodied v1.0",
"brand": {
"name": "Presence Embodied",
"founder": "Stephanie Canavesio",
"location": "Edinburgh, Scotland",
"services": ["Individual Therapy", "Couples Therapy", "Difuso Intensives", "Compassionate Inquiry", "Integration Sessions"],
"tone": ["warm", "grounded", "inviting", "present", "compassionate"]
},
"tokens": {
"colors": {
"background": "#F3EEE7",
"surface": "#EAE3D7",
"accent": "#C9A86A",
"stone": "#B4B0A8",
"text": "#333333",
"subtext": "#6F6B64",
"border": "#D9D3C7",
"success": "#7A9E7E",
"warning": "#D4A574",
"error": "#C47B7B",
"info": "#7B9EB5"
},
"typography": {
"heading": "'Cormorant Garamond', serif",
"body": "'Source Sans 3', sans-serif",
"scale": {
"display": "4.6rem",
"h1": "clamp(36px, 5.2vw, 52px)",
"h2": "clamp(32px, 4vw, 42px)",
"h3": "1.95rem",
"body": "clamp(19px, 1.9vw, 23px)",
"small": "1.125rem"
}
},
"spacing": {
"containerWidths": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1200px" },
"sectionPadding": { "sm": "2rem", "md": "3rem", "lg": "5rem", "xl": "7rem" }
},
"effects": {
"radius": "14px",
"shadowSm": "0 1px 2px rgba(0,0,0,.04)",
"shadowMd": "0 6px 20px rgba(0,0,0,.06)",
"transition": "220ms cubic-bezier(.2,.8,.2,1)"
},
"gradients": {
"primaryCta": "radial-gradient(circle at 0% 0%, #fffe83 0%, #c48814 100%)",
"primaryCtaHover": "radial-gradient(circle at 100% 100%, #fffe83 0%, #c48814 100%)"
}
},
"components": ["Hero", "ServiceCard", "PricingCard", "Quote", "Section", "Container", "Header", "Footer", "FAQ", "AcuityInline", "TestimonialSlider", "InstagramFeed", "NewsletterCta", "BreadcrumbList"],
"breakpoints": { "mobile": "768px" },
"accessibility": {
"focusVisible": "2px solid #333, offset 3px",
"reducedMotion": "supported",
"semanticHtml": true,
"ariaLabels": true
}
}