Design System v1.0

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 */
Background --pe-bg #F3EEE7 · Linen
Surface --pe-surface #EAE3D7 · Sand
Accent --pe-accent #C9A86A · Rich Golden
Stone --pe-stone #B4B0A8 · Stone
Text --pe-text #333333 · Charcoal
Subtext --pe-subtext #6F6B64 · Taupe Grey
Border --pe-border #D9D3C7

Extended Semantic Colors

Success --pe-success #7A9E7E · Sage Green
Warning --pe-warning #D4A574 · Warm Amber
Error --pe-error #C47B7B · Muted Rose
Info --pe-info #7B9EB5 · Dusty Blue

Gradients

Primary CTA Gradient radial-gradient(circle at 0% 0%, #fffe83, #c48814)
Surface Gradient 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
Display
The body remembers
font-family: Cormorant Garamond · 4.6rem · weight 400
H1

Presence & Embodiment

.h1 · clamp(36px, 5.2vw, 52px) · letter-spacing: 0.02em
H2

Therapeutic Offerings

.h2 · clamp(32px, 4vw, 42px) · letter-spacing: -0.01em
H3

Compassionate Inquiry

.h3 · 1.95rem (31.2px)
Body

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
Small

Supporting text for captions, labels, and metadata. Used for secondary information.

.small · 1.125rem (18px) · line-height: 1.5

Typefaces

Cormorant Garamond

Used for headings, display text, and pull quotes. Conveys elegance, warmth, and presence. Weights: 400 (regular), 600 (semibold).

Source Sans 3

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

sm · 640px
md · 768px
lg · 1024px
xl · 1200px

Section Padding

sm · 2rem
md · 3rem
lg · 5rem
xl · 7rem

Design Tokens

Border Radius
--radius: 14px
Shadow Small
--shadow-sm: 0 1px 2px rgba(0,0,0,.04)
Shadow Medium
--shadow-md: 0 6px 20px rgba(0,0,0,.06)
Transition
--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.

Compassionate Grounded Warm Present

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
Default0.875rem 1.75rem48px1.125rem14px
Small0.625rem 1.25rem40px0.875rem14px

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

30 min

An introductory call to explore how we might work together. No commitment required.

Online
Book Now

Quote / Testimonial Card

"Working with Stephanie has been transformative. Her gentle, embodied approach helped me reconnect with parts of myself I had long forgotten."

— Isabella M.
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

127 Active Clients
843 Sessions This Year
98% Return Rate
4.9 Avg. Rating

Form Elements

Badges & Tags

Status Badges

Active Pending Completed Cancelled New

Location Tags

Online In-Person Edinburgh Hybrid

Category Tags

Therapy Difuso Couples Integration Intake

Alerts & Notifications

Info: Your next session with Maria L. is scheduled for tomorrow at 2:00 PM (GMT).
Success: Session notes saved successfully. Client has been notified.
Warning: 3 intake forms are pending review. Please complete before sessions begin.
Error: Payment failed for invoice #1042. Please follow up with the client.

Patterns

Composite layouts and recurring UI patterns used across the site.

Hero Sections

Therapeutic Offerings

A space for healing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. A safe container for exploration and growth.

Split Hero

Welcome

Presence Embodied

Somatic therapy and compassionate inquiry in Edinburgh, Scotland. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Explore Offerings

Centered Minimal Hero

Inner Intelligence

Reconnect with the wisdom that already lives within you.

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.

Book

CTA Banner

Ready to begin?

Book a free explorative call and discover how we can work together.

Book Your Call

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."

IL
Isabella L. Individual Therapy
★★★★★

"Lorem ipsum dolor sit amet. Working with Stephanie helped us reconnect in ways we didn't think possible."

FM
Florence M. Couples Therapy
★★★★★

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. A truly grounded and present therapist."

JR
James R. Difuso Intensive

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

Presence Embodied
3 new Stephanie C.
12 Sessions This Week ↑ 20%
47 Active Clients ↑ 3
£4,280 Revenue (April) ↑ 12%
3 Pending Intakes

Today's Sessions

09:00
Maria Rossi Individual Therapy · Online
Confirmed
11:00
James & Sarah K. Couples Therapy · In-Person
Confirmed
14:00
Luca Bianchi Difuso Explorative Call · Online
In Progress
16:30
Elena Vasquez Compassionate Inquiry · Online
Upcoming

Quick Actions

Recent Activity

Maria R. completed intake form · 2h ago
Invoice #1038 paid · £120 · 4h ago
Elena V. booked session · 6h ago
James K. signed liability waiver · 1d ago

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

MR

Maria Rossi

maria.rossi@email.com · +44 7700 900123

Active Individual Therapy Edinburgh
Overview
Client Since June 2025
Total Sessions 24
Session Type Compassionate Inquiry
Frequency Weekly
Preferred Format In-Person
Emergency Contact Paolo R. (partner)
Forms & Documents
Intake Form Completed
Liability Waiver Signed
Privacy Consent Signed
Progress Assessment Pending
Billing
Outstanding £0.00
Last Payment 12 Apr 2026
Total Paid (YTD) £2,880
#1042 12 Apr £120 Paid
#1035 5 Apr £120 Paid
#1028 29 Mar £120 Paid

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

Mon 14
09:00 Elena V. CI · Online
14:00 James & Sarah Couples · In-Person
Tue 15
09:00 Maria R. CI · Online
11:00 Luca B. Difuso · Online
14:00 Luca B. CI · Online
16:30 Elena V. CI · Online
Wed 16
10:00 Amara T. CI · In-Person
Thu 17
09:00 R. & M. Chen Couples · Online
14:00 Sofia N. CI · In-Person
Fri 18
10:00 New Intake Discovery · Online
Individual Couples Difuso

Session Notes

Maria Rossi — Session #24

12 April 2026 · 60 min · Compassionate Inquiry · In-Person

Completed
Session Summary
Key Observations
Follow-up & Homework
Session Tags
Somatic Attachment Breathwork Breakthrough
Mood Check-in
1 2 3 4 5

Client self-reported: 4/5

Risk Assessment
Risk Level Low
Safety Plan On file

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
  }
}