Design Document
A living design document that previews the look and feel of the future website while presenting the complete specification.
Use 1hotels.com as the design system. Period.
Every visual decision — typography, color logic, spacing, components, layout patterns, animation, navigation — comes directly from the 1 Hotels base template. The core aesthetic is biophilic luxury: premium, calm, nature-rooted design that feels elevated without being pretentious.
1. Color
Purple replaces forest green as the primary accent color
2. Content
Kaleidoscope's content — recovery retreat, not hotel stays
3. CTA
"Take the Assessment" replaces "Book Now"
Nature is the brand, not decoration. Whitespace is as important as content. Photography does the heavy lifting — UI stays minimal. Luxury through restraint, not excess. Every element earns its place.
The 1 Hotels palette is earth-toned neutrals with a single strong accent. We keep the neutral foundation exactly and swap the accent from forest green to purple.
#F7F5F0 (linen) and #FFFFFF (white)#394034 (deep moss) — sparinglyrgba(57, 64, 52, 0.3) to rgba(57, 64, 52, 0.6)Two-font system only. Light-weight serif headlines are the signature look.
Headlines / Display
Playfair Display
Body / UI / Everything Else
Inter
Hero Headline
Where Healing Begins
Section Headline (H2)
Our Sanctuary
Sub-headline (H3)
The Retreat Experience
Card Title (H4)
Psychedelic Healing
Body Copy
Recovery doesn't end when you leave the retreat — it begins there. ForeverCare starts on-site, weaving your insights into a living plan for the future.
Caption / Meta
Currently Taking Applications for January 2027
Navigation Items
Our Story · Our Sanctuary · Our Team · The Experience
Button Text
Take the Assessment0.08em–0.15em680pxContainer Max
1440px
Content Max
1200px
Reading Width
680px
Grid Columns
12
Alternate between full-bleed image sections and contained content sections. Every 2–3 sections, insert a breathing section (large image, minimal text overlay). Content sections: generous vertical padding (80–120px).
| Token | Value | Usage |
|---|---|---|
sm | 640px | Mobile landscape |
md | 768px | Tablet |
lg | 1024px | Small desktop |
xl | 1280px | Desktop |
2xl | 1440px | Large desktop |
| Height | 100vh (or 85vh with content peek) |
| Background | Launch: Prana Del Mar image with Ken Burns zoom (20s). ASAP: Drone video loop (muted, 15–20s, H.264, <8MB mobile) |
| Overlay | Linear gradient rgba(0,0,0,0.1) → rgba(0,0,0,0.35) |
| Content | Centered vertically/horizontally |
| Headline | Playfair Display, 64–80px, 300, white |
| Subtext | Inter, 18px, 300, white/cream |
| CTA | Ghost button (white border) or solid purple |
| Scroll indicator | Subtle animated chevron at bottom |
Each section follows 1 Hotels layout patterns. The content is Kaleidoscope's. The design is 1 Hotels. Below is the homepage scroll map followed by each section's spec and preview.
| # | Section | 1 Hotels Pattern | Background |
|---|---|---|---|
| 1 | Hero | Full-viewport video/image + centered text | Full-bleed media |
| 2 | Our Story | Intro statement (centered serif on linen) | Linen #F7F5F0 |
| 3 | Our Sanctuary | Property showcase (hero image + gallery grid) | White #FFFFFF |
| 4 | Our Team | Card grid (3-column) | Linen #F7F5F0 |
| 5 | The Little Book | 2-column intro + interactive 9 truths + video gallery | White #FFFFFF |
| 6 | The Experience | Alternating image/text blocks (×4) | Linen #F7F5F0 |
| 7 | Psychedelic Healing | Content body (centered reading width) | Shell #EDE8E0 |
| 8 | Testimonial | Full-width quote block | Linen #F7F5F0 |
| 9 | Sign Up | Newsletter section (centered form) | Shell #EDE8E0 |
| 10 | Assessment CTA | Dark CTA section | Moss #394034 |
| 11 | Footer | Multi-column footer | Moss #394034 |
Section 6.1
[Noel's single inspirational paragraph will go here — a centered serif text block introducing the Kaleidoscope philosophy and mission.]
"It's Not About Not Drinking, It's About Not Wanting To"
Smashed: Sober (with a twist) — Download our book for free.
Section 6.2
Our Sanctuary
45m Beachfront
100% Solar Powered
Indoor + Outdoor Yoga
Saltwater Pool & Jacuzzi
5 Acres Private
Farm-to-Table Dining
15 minutes from Cabo San Lucas. 45 minutes from San José del Cabo International Airport.
Section 6.3
Brief bio text describing their role and journey.
Brief bio text describing their role and journey.
Brief bio text describing their role and journey.
Section 6.4
We utilize the truths of The Little Book, a key chapter in our founder's manifesto: Smashed: Sober (with a twist), to determine readiness. If you agree with these 9 concepts you are ready for transformation. Spend some time with them. Watch the videos. Check agree or disagree next to each and share your thoughts with us.
1. “Alcoholism is NOT a disease.”
2. “All the answers are inside you.”
3. “You aren't powerless over anything.”
4. “Even immense pain and trauma can be extinguished…fast.”
5. “Forgive yourself for what you had to do to survive.”
6. “Happiness is achievable for everyone.”
7. “It doesn't have to be this hard.”
8. “The choices are always yours.”
9. “You are not alone.”
Section 6.5
Getting Ready
Getting Ready begins the moment you say yes. From day one, we stabilize your system and conduct deep physical, emotional, and spiritual assessments to design a treatment path as unique as you are. Through safe, comfortable clinical detox, thoughtful medication titration, and the creation of your LifeMap — mapping family, vocation, and community — we clarify your intentions and prepare you, fully and deliberately, for the healing ahead.
Learn More →The Retreat
The 28-day Kaleidoscope retreat is not a program, it's a precisely curated catalyst. We fuse functional nutrition, bodywork and movement, trauma-focused psychotherapy and somatic therapies with energy healing, holotropic breathwork, sound and art immersion, sensory therapy, and hydrotherapy to restore balance across mind, body, and spirit. Anchored by a deep emotional and spiritual curriculum and expertly guided plant medicine ceremonies, this is where insight becomes transformation and pain finally releases its grip.
Learn More →Aftercare Program
Recovery doesn't end when you leave the retreat — it begins there. ForeverCare starts on-site, weaving your insights into a living plan for the future, then walks with you for life through The Twist™ — our fusion of technology, art, and healing — paired with live Sherpa coaching and access to our proprietary telehealth network. With alumni gatherings, meaningful reunions, and dynamic content that evolves as you do, you're never released back into the wild, you're supported into your next becoming.
Learn More →Partners & Spouses
Loving an alcoholic is its own form of trauma and the 'standard of care' barely acknowledges the broken connections left in its wake. At Kaleidoscope, we create an independent path of healing for spouses and partners, beginning with a sherpa-led virtual bootcamp focused on emotional mastery and intention, and culminating in an on-site immersive experience and Integration™ that restores connection at every level. When the home front is strengthened through education, insight, and lifelong support, everyone doesn't just survive — they begin to thrive.
Learn More →Section 6.6
[Draft content from Noel pending. This section uses the reading-width (680px) centered layout with Inter body text, exactly as 1 Hotels uses for their sustainability and philosophy pages.]
The three I's: Intention, Insight, Integration.
Section 6.7
Kaleidoscope didn't just help me get sober — it helped me rediscover who I was beneath the addiction. The personalized approach made all the difference.
— Bill
Section 6.8
Are you ready for complete transformation? Get connected to the Kaleidoscope movement — register and we'll share updates, events and moments that matter.
Section 6.9
Currently taking applications for January 2027
Begin AssessmentAll components follow 1 Hotels patterns exactly. Square corners, no shadows, minimal UI. Purple replaces forest green.
Primary
bg: #6B4C8A
color: #FFF
padding: 14px 32px
border-radius: 0
hover: #4A3366 + translateY(-1px)
Secondary
bg: transparent
color: #6B4C8A
border: 1px solid #6B4C8A
hover: filled purple + white text
Ghost
bg: transparent
color: #FFF
border: 1px solid rgba(255,255,255,0.7)
hover: bg rgba(255,255,255,0.15)
Brief description text. Hover over the image to see the zoom effect.
Learn More →Accent Divider (under headings)
width: 60px; height: 2px; background: #6B4C8A;
Full-Width Divider
border-top: 1px solid #EDE8E0;
Correct. There's no biological marker, no inherited gene, and no blood test. Alcoholism is a behavior, a coping mechanism responding to unresolved trauma.
Yes. Once accepted, we commit to full transformation. And we never let go. Watch a few of our testimonial videos.
Everything. We don't treat symptoms, we extinguish pain. No labels, no slogans, no sedation. Just fast, personal, permanent healing and a lifetime of support.
Motion should feel organic and unhurried — like watching a plant grow, not a sports car.
| Token | Value |
|---|---|
--ease-default | cubic-bezier(0.25, 0.1, 0.25, 1.0) |
--ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
--ease-out-soft | cubic-bezier(0.0, 0.0, 0.2, 1) |
| Element | Duration | Timing |
|---|---|---|
| Button hover | 0.3s | ease |
| Card image zoom | 0.6s | ease-out-soft |
| Nav background | 0.3s | ease |
| Fade in on scroll | 0.8s | ease-out-soft |
| Menu overlay | 0.4s | ease-in-out |
| Arrow link nudge | 0.2s | ease |
| FAQ accordion | 0.4s | ease |
| Hero Ken Burns | 20s | linear |
prefers-reduced-motion| Section | Where It Lives | Content | Notes |
|---|---|---|---|
| Giving | Footer + Nav link | Foundation overview, donation info, veteran/wounded warrior imagery | New content needed |
| Videos | Footer link | Full YouTube collection, organized | @KaleidoscopeLifeYoutube |
| Media | Footer link | Podcasts, events | Modular/CMS — easy to update |
| FAQ | Nav + Footer link | 10 full Q&A pairs | Accordion component |
| Social | Footer icons | IG (@kaleido.scope_life), LinkedIn | Same as current |
Correct. There's no biological marker, no inherited gene, and no blood test. Alcoholism is a behavior, a coping mechanism responding to unresolved trauma.
Yes. Once accepted, we commit to full transformation. And we never let go. Watch a few of our testimonial videos.
Read The Little Book and take our readiness assessment. If they agree with the 9 truths, they're ready.
Everything. We don't treat symptoms, we extinguish pain. No labels, no slogans, no sedation. Just fast, personal, permanent healing and a lifetime of support.
Nine simple truths that flip everything you've been told about addiction. If they resonate, you're ready. If they don't, keep reading until they do. Keep reading by downloading our founder's book Smashed: Sober (with a twist).
Yes, when appropriate. Psychedelic healing can be transformative, but only when paired with the right preparation, environment, and integration. The three I's: Intention, Insight, Integration.
So did we. Until something worked. If you're willing to be honest, open, and curious, we'll help you find your way out.
Both. We honor the science of trauma and the wisdom of the soul. Healing isn't one-size-fits-all. That's why everything we do is personalized.
About 5–7 weeks to start, including at-home prep, a 28-day immersive retreat, and the beginning of ForeverCare™. After that? We're with you, however you need us, side-by-side.
Absolutely. Addiction hurts everyone. Healing should reach everyone. If you want to be part of the transformation, we'll help you find your role.
The Media page must support easy content updates without code changes. Modular card grid — each card is a podcast, event, or media mention. Filterable by type. Content stored in a simple data format (JSON, MDX, or headless CMS) so non-developers can add entries without touching component code.
| Asset | Source | Status | Needed For |
|---|---|---|---|
| Hero video | Prana Del Mar VIDEO | Available | Hero section |
| Drone video (additional) | New shoot | Needs scheduling | Hero (ASAP) |
| 360 video | Prana Del Mar team | Request pending | Our Sanctuary |
| Our Story text | Noel | Pending | Section 6.1 |
| SMASHED PDF | kaleidoscope.life | Available | Section 6.1 |
| Sanctuary photos | pranadelmar.com + flipbook + Drive | Available | Section 6.2 |
| Team childhood photos | Team members | Pending — request sent | Section 6.3 |
| Team professional photos | Google Slides deck | Available | Section 6.3 |
| Little Book text + 9 truths | Updated scope | Available | Section 6.4 |
| YouTube videos | @KaleidoscopeLifeYoutube | Available | Section 6.4 + Videos |
| Experience content (all 4) | Updated scope | Available | Section 6.5 |
| Psychedelic Healing draft | Noel | Pending | Section 6.6 |
| Testimonial (Bill) | Current kaleidoscope.life | Available | Section 6.7 |
| Sign Up copy | Updated scope | Available | Section 6.8 |
| Assessment tool | TBD | In development | Section 6.9 |
| Giving content | New | Not yet written | Secondary page |
| FAQ content (10 Q&As) | Updated scope | Available | FAQ page |
| Media page content | TBD | Pending | Media page |
Complete reference for the design system tokens. Copy-paste ready for implementation.
/* === Colors === */ --color-moss: #394034; --color-charcoal: #1A1A1A; --color-linen: #F7F5F0; --color-shell: #EDE8E0; --color-sand: #D4C5A9; --color-driftwood: #A89279; --color-stone: #788A96; --color-white: #FFFFFF; --color-accent: #6B4C8A; --color-accent-dark: #4A3366; --color-accent-light: #8A6BAA; --color-success: #3A6B4A; --color-error: #8B3A3A; /* === Typography === */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* === Spacing (8px base) === */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 80px; --space-3xl: 120px; --space-4xl: 160px; /* === Layout === */ --container-max: 1440px; --content-max: 1200px; --reading-max: 680px; --gutter: 24px; --side-padding: 80px; /* === Motion === */ --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1.0); --ease-out-soft: cubic-bezier(0.0, 0.0, 0.2, 1); --duration-fast: 0.2s; --duration-normal: 0.3s; --duration-slow: 0.6s; --duration-enter: 0.8s; /* === Shadows === */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); /* === Borders === */ --border-light: 1px solid #EDE8E0; --border-medium: 1px solid #D4C5A9; --border-dark: 1px solid #394034; --border-accent: 1px solid #6B4C8A; /* === Radius (square = signature) === */ --radius-none: 0; --radius-sm: 4px; --radius-full: 9999px;
#6B4C8A on white = 4.6:1 (passes AA)outline: 2px solid #6B4C8A; outline-offset: 4pxalt textaria-labels on icon-only buttonsprefers-reduced-motion and prefers-color-schemefont-display: swap for web fontssrcset