# DESIGN REFERENCE: Samia — Constelaciones Familiares y Terapia Cuántica
---

## METADATA
```yaml
version: 1.0.0
generated: 2026-07-09
source_url: https://samia.soy.cx
analysis_timestamp: 2026-07-09T00:00:00Z
design_epoch: 2026
accessibility_level: Unknown
mobile_first: true
framework_detected: Vanilla
design_system_used: Custom
core_philosophy: minimalist
```

---

## BRAND IDENTITY

### Brand Essence
```
A serene, spiritual wellness brand offering emotional harmonization and conscious transformation through Family Constellations and Quantum Therapy, presented with soft, feminine, and calming visual language.
```

### Visual Hierarchy Principles
```
- Primary: The logo mark — central, elevated, and anchored by drop shadow
- Secondary: The introductory message — readable, warm, and inviting
- Tertiary: Language selection cards — clear, tappable, and distinct
- Quaternary: Footer copyright — minimal, unobtrusive, grounding
```

### Emotional Tone
```
Primary emotion: Calm
Secondary emotion: Trust
Overall mood: Serene, spiritual, welcoming
```

---

## TYPOGRAPHY SYSTEM

### Primary Font Family
```yaml
name: Poppins
fallback: Helvetica, Montserrat, Tahoma, Geneva, Verdana, sans-serif
weights_used: 300, 400, 500
styles_used: normal
usage: Body, Navigation, Accents
```

### Secondary Font Family
```yaml
name: Bettina Signature
source: https://www.cdnfonts.com/bettina-signature.font
fallback: [None]
weights_used: 400
styles_used: Normal
usage: Headings
```

### Typographic Scale
```yaml
heading_1: { size: 2rem, weight: 500, line-height: 1.2, tracking: 0.5px }
heading_2: { size: 2rem, weight: 500, line-height: 1.2, tracking: 0.5px }
heading_3: { size: [Not used], weight: [Not used], line-height: [Not used], tracking: [Not used] }
heading_4: { size: [Not used], weight: [Not used], line-height: [Not used], tracking: [Not used] }
body_large: { size: 1.15rem, weight: 300, line-height: 1.8, tracking: normal }
body_default: { size: 1.05rem, weight: 400, line-height: 1.6, tracking: normal }
body_small: { size: 0.9rem, weight: 300, line-height: 1.5, tracking: normal }
caption: { size: 0.85rem, weight: 300, line-height: 1.4, tracking: normal }
```

### Letter Spacing Classes
```yaml
tight: [Inferred: -0.02em]
normal: [0em]
wide: [0.5px]
```

---

## COLOR ARCHITECTURE

### Primary Palette
```yaml
primary_100: { hex: #f5e6f0, rgb: (245,230,240), usage: [Background gradient start] }
primary_200: { hex: #e8d4e6, rgb: (232,212,230), usage: [Background gradient middle] }
primary_300: { hex: #d4c4e0, rgb: (212,196,224), usage: [Background gradient end] }
primary_400: { hex: #b8a0c8, rgb: (184,160,200), usage: [Secondary text, Border hover] }
primary_500: { hex: #9d7bb5, rgb: (157,123,181), usage: [Primary accent, Divider gradient, Footer text] }
primary_600: { hex: #7a5d8c, rgb: (122,93,140), usage: [Headings, Primary text, Card titles] }
primary_700: { hex: #6b4d7a, rgb: (107,77,122), usage: [Intro text] }
```

### Secondary Palette
```yaml
secondary_100: { hex: #ffffff, rgb: (255,255,255), usage: [Card backgrounds, Text on dark] }
secondary_200: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
secondary_300: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
secondary_400: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
secondary_500: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
```

### Accent Colors
```yaml
success: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
warning: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
error: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
info: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
highlight: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
```

### Neutral Scale
```yaml
white: { hex: #ffffff, rgb: (255,255,255), usage: [Card backgrounds, Text backgrounds] }
gray_100: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
gray_200: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
gray_300: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
gray_400: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
gray_500: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
gray_600: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
gray_700: { hex: [Not used], rgb: [Not used], usage: [Not applicable] }
black: { hex: #000000, rgb: (0,0,0), usage: [Shadow base (via rgba)] }
```

### Color Relationships
```yaml
contrast_ratios:
  text_on_primary: [Inferred: ~4.5:1 — #6b4d7a on #f5e6f0]
  text_on_secondary: [Inferred: ~2.5:1 — #9d7bb5 on #ffffff]
  text_on_light: [Inferred: ~4.5:1 — #7a5d8c on #ffffff]
  text_on_dark: [Inferred: Not applicable]
color_harmony: analogous
accessibility_compliance: partially_compliant
```

---

## SPACING & LAYOUT SYSTEM

### Base Unit
```yaml
base_unit: 8px
scaling_factor: 1.25
```

### Spacing Scale
```yaml
spacing_0: { value: 0px, usage: [No spacing] }
spacing_1: { value: 2px, usage: [Tiny gaps] }
spacing_2: { value: 4px, usage: [Small paddings] }
spacing_3: { value: 6px, usage: [Element gaps] }
spacing_4: { value: 8px, usage: [Standard spacing] }
spacing_5: { value: 12px, usage: [Medium spacing] }
spacing_6: { value: 16px, usage: [Large spacing] }
spacing_7: { value: 24px, usage: [XL spacing] }
spacing_8: { value: 32px, usage: [Section spacing] }
spacing_9: { value: 48px, usage: [Hero spacing] }
spacing_10: { value: 64px, usage: [Page margins] }
```

### Breakpoints
```yaml
mobile_portrait: { min: 0px, max: 480px, columns: 4, gutter: 16px }
mobile_landscape: { min: 481px, max: 768px, columns: 6, gutter: 20px }
tablet: { min: 769px, max: 1024px, columns: 8, gutter: 24px }
desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 32px }
widescreen: { min: 1441px, max: 1920px, columns: 12, gutter: 40px }
ultrawide: { min: 1921px, columns: 16, gutter: 48px }
```

### Container Widths
```yaml
narrow: { max_width: 600px, padding: 1.5rem }
default: { max_width: 900px, padding: 2rem }
wide: { max_width: 1200px, padding: 2rem }
full: { max_width: 100%, padding: 2rem }
```

---

## COMPONENT LIBRARY

### Navigation Components

#### Primary Navigation
```yaml
type: none
position: none
height: none
background: none
alignment: none
submenu_style: none
```

#### Secondary Navigation
```yaml
type: none
position: none
style: none
```

### Button System

#### Primary Button
```yaml
default: { bg: #ffffff, text: #7a5d8c, padding: 2.5rem 3.5rem, radius: 16px }
hover: { bg: #ffffff, text: #7a5d8c, transform: translateY(-8px), shadow: 0 15px 45px rgba(123,93,140,0.25), border: 2px solid #b8a0c8 }
active: { bg: #ffffff, text: #7a5d8c }
focus: { outline: 2px solid #9d7bb5, offset: 2px }
disabled: { bg: #f0e8f2, text: #b8a0c8, opacity: 0.6 }
```

#### Secondary Button
```yaml
default: { bg: transparent, text: #9d7bb5, border: none, padding: 0, radius: 0 }
hover: { bg: transparent, text: #7a5d8c }
active: { bg: transparent, text: #7a5d8c }
focus: { outline: 2px solid #9d7bb5, offset: 2px }
disabled: { opacity: 0.5 }
```

#### Tertiary/Text Button
```yaml
default: { bg: transparent, text: #9d7bb5, padding: 0 }
hover: { bg: transparent, text: #7a5d8c }
active: { bg: transparent, text: #7a5d8c }
focus: { outline: 2px solid #9d7bb5, offset: 2px }
disabled: { opacity: 0.5 }
```

#### Button Sizes
```yaml
small: { padding: 1rem 1.5rem, font_size: 0.875rem, height: auto }
medium: { padding: 2rem 2.5rem, font_size: 1rem, height: auto }
large: { padding: 2.5rem 3.5rem, font_size: 1.125rem, height: auto }
```

### Form Elements

#### Input Fields
```yaml
default: { bg: #ffffff, border: 2px solid #d4c4e0, radius: 12px, padding: 0.75rem 1rem }
focus: { border: 2px solid #9d7bb5, shadow: 0 0 0 4px rgba(157,123,181,0.2) }
error: { border: 2px solid #e74c3c, icon: false }
success: { border: 2px solid #2ecc71, icon: false }
disabled: { bg: #f5f0f7, opacity: 0.6 }
```

#### Select Menus
```yaml
default: { bg: #ffffff, border: 2px solid #d4c4e0, radius: 12px, padding: 0.75rem 1rem }
focus: { border: 2px solid #9d7bb5, shadow: 0 0 0 4px rgba(157,123,181,0.2) }
error: { border: 2px solid #e74c3c }
disabled: { bg: #f5f0f7, opacity: 0.6 }
```

#### Checkboxes & Radios
```yaml
default: { size: 20px, border: 2px solid #d4c4e0, radius: square }
checked: { bg: #9d7bb5, border: #9d7bb5 }
focus: { outline: 2px solid #9d7bb5, offset: 2px }
disabled: { opacity: 0.6 }
```

### Cards

#### Language Selection Card
```yaml
default: { bg: #ffffff, border: 2px solid transparent, radius: 16px, shadow: 0 8px 30px rgba(123,93,140,0.15), padding: 2.5rem 3.5rem, min-width: 240px }
hover: { shadow: 0 15px 45px rgba(123,93,140,0.25), transform: translateY(-8px), border-color: #b8a0c8 }
variants:
  - feature: { [Not applicable] }
  - product: { [Not applicable] }
  - testimonial: { [Not applicable] }
  - blog: { [Not applicable] }
```

### Modals/Dialogs
```yaml
overlay: { bg: rgba(0,0,0,0.5), opacity: 0.5, backdrop_blur: [Not used] }
container: { max_width: 600px, bg: #ffffff, radius: 16px, padding: 2rem, shadow: 0 20px 60px rgba(0,0,0,0.2) }
animation: { open: opacity 0.3s ease, close: opacity 0.3s ease }
```

### Tables
```yaml
header: { bg: #f5e6f0, text: #6b4d7a, weight: 600 }
row_striping: { even: #ffffff, odd: #faf8fc }
borders: { type: collapsed, width: 1px, color: #d4c4e0 }
hover: { bg: #f5e6f0 }
```

### Alerts & Notifications
```yaml
success: { bg: #d5f5e3, border: #2ecc71, text: #1a7a42, icon: [Not used] }
warning: { bg: #fdebd0, border: #f39c12, text: #7a4a00, icon: [Not used] }
error: { bg: #fadbd8, border: #e74c3c, text: #7a1a1a, icon: [Not used] }
info: { bg: #d6eaf8, border: #3498db, text: #1a4a7a, icon: [Not used] }
position: inline
dismissible: false
```

### Tooltips
```yaml
trigger: hover
position: top
bg: #6b4d7a, text: #ffffff
arrow: true
delay: 300ms
animation: opacity 0.2s ease
```

### Progress Indicators
```yaml
linear: { height: 4px, bg: #d4c4e0, fill: #9d7bb5, radius: 2px }
circular: { size: 40px, stroke: 4px, color: #9d7bb5, bg: #d4c4e0 }
skeleton: { bg: #e8d4e6, animation: pulse }
```

---

## LAYOUT PATTERNS

### Page Structures
```yaml
homepage:
  - hero_section: { position: center, size: full viewport, content_type: logo + tagline + language selector }
  - feature_grid: { [Not applicable] }
  - testimonials: { [Not applicable] }
  - cta_section: { [Not applicable] }
  - footer: { position: absolute bottom center, content: copyright text }

content_page:
  - header: { [Not applicable] }
  - main_content: { width: 90% max 900px, sidebar: none, typography: centered }
  - sidebar: { [Not applicable] }
  - footer: { position: absolute bottom center, content: copyright text }

product_page:
  - gallery: { [Not applicable] }
  - product_info: { [Not applicable] }
  - pricing: { [Not applicable] }
  - reviews: { [Not applicable] }
  - related: { [Not applicable] }
```

### Grid Systems
```yaml
standard: { columns: 1, gap: 2rem, alignment: center }
masonry: { [Not applicable] }
dashboard: { [Not applicable] }
```

### Section Patterns
```yaml
hero: { height: 100vh (min), alignment: center, bg: linear-gradient(135deg, #f5e6f0 0%, #e8d4e6 50%, #d4c4e0 100%) with animated radial overlays }
features: { [Not applicable] }
testimonials: { [Not applicable] }
pricing: { [Not applicable] }
faq: { [Not applicable] }
cta: { [Not applicable] }
```

### Content Hierarchy
```yaml
reading_pattern: F-pattern (centered single-column)
content_weight_distribution:
  headline_to_body_ratio: 1:1.15
  image_to_text_ratio: 1:2
  whitespace_density: generous
```

---

## MOTION & INTERACTION

### Transition Durations
```yaml
instant: 50ms
micro: 150ms
fast: 250ms
default: 350ms
slow: 500ms
macro: 750ms
```

### Easing Curves
```yaml
linear: cubic-bezier(0, 0, 1, 1)
ease: cubic-bezier(0.25, 0.1, 0.25, 1)
ease_in: cubic-bezier(0.42, 0, 1, 1)
ease_out: cubic-bezier(0, 0, 0.58, 1)
ease_in_out: cubic-bezier(0.42, 0, 0.58, 1)
smooth: cubic-bezier(0.34, 1.56, 0.64, 1)
```

### Animation Types
```yaml
fade: { enter: opacity 1s ease-out, exit: opacity 0.3s ease }
slide: { enter: translateY(-30px) 1s ease-out, exit: translateY(30px) 0.3s ease }
scale: { [Not used] }
stagger: { child_delay: 200ms, parent_duration: 1s }
parallax: { speed: [Not used], direction: [Not used] }
```

### Hover States
```yaml
scale: { value: 1.0, duration: [Not used] }
lift: { value: -8px, duration: 0.4s }
underline: { style: none, duration: [Not used] }
glow: { value: 0 15px 45px rgba(123,93,140,0.25), duration: 0.4s }
color_shift: { speed: [Not used] }
```

### Scroll Interactions
```yaml
reveal: { trigger: on_view, animation: fade }
sticky_nav: { [Not applicable] }
parallax_sections: { speed: [Not used] }
scroll_progress: { [Not applicable] }
infinite_scroll: { [Not applicable] }
```

---

## MEDIA & ICONOGRAPHY

### Icon System
```yaml
library: None
style: None
size: None
color: None
stroke_width: None
corner_style: None
```

### Image Treatment
```yaml
default_ratio: auto
rounded_corners: none
object_fit: contain
overlay: { gradient: none, opacity: none }
shadow: { type: drop, value: 0 4px 12px rgba(0,0,0,0.1) }
filter: { type: none, value: none }
```

### Video Components
```yaml
aspect_ratio: [Not used]
controls: [Not used]
autoplay: [Not used]
loop: [Not used]
muted: [Not used]
poster: { style: none, position: none }
play_button: { style: none, position: none }
```

---

## RESPONSIVE BEHAVIORS

### Priority of Elements
```yaml
mobile_priority: [logo, intro-text, language-prompt, language-selector, footer]
tablet_priority: [logo, intro-text, language-prompt, language-selector, footer]
desktop_priority: [logo, intro-text, language-prompt, language-selector, footer]
```

### Collapse Points
```yaml
navigation: [Not applicable]
sidebar: [Not applicable]
multi_column_layout: [Not applicable]
accordion_conversion: [Not applicable]
```

### Touch Targets
```yaml
minimum_size: 44x44px (language cards exceed this)
spacing_between: 2rem (desktop) / 1.5rem (tablet)
tap_feedback: scale + shadow (translateY(-8px) + box-shadow increase)
```

---

## ACCESSIBILITY FEATURES

### Semantic HTML Structure
```yaml
landmarks: [main (implicit via .container), footer]
heading_hierarchy: [h2 → no h1 present]
aria_roles: [aria-label on language links]
```

### Focus Management
```yaml
focus_indicator: { style: outline (browser default), color: [Not specified], size: [Not specified] }
focus_trap: [Not applicable]
focus_visible: [Not specified]
```

### Color Contrast
```yaml
normal_text: [Inferred: ~4.5:1 — #6b4d7a on #f5e6f0]
large_text: [Inferred: ~3.5:1 — #7a5d8c on #ffffff]
ui_elements: [Inferred: ~2.5:1 — #9d7bb5 on #ffffff]
graphics: [Not applicable]
```

### Alternative Media
```yaml
alt_text_pattern: descriptive
caption_style: [Not applicable]
transcript_available: false
```

---

## SPECIAL FEATURES & EFFECTS

### Visual Effects
```yaml
gradients: { type: linear, direction: 135deg, stops: ['#f5e6f0 0%', '#e8d4e6 50%', '#d4c4e0 100%'] }
glassmorphism: { bg_opacity: [Not used], blur: [Not used], border: [Not used] }
neumorphism: { shadow_style: [Not used], color_temperature: [Not used] }
skeuomorphism: { depth: [Not used], texture: [Not used] }
flat_design: { shadows: minimal }
```

### Performance Considerations
```yaml
lazy_loading: [Not used]
prefetch: [Not used]
caching_strategy: static
asset_optimization: svg (logo is PNG)
```

---

## DESIGN RATIONALES

### Why This Works
The design employs a single-page, language-selection gateway that immediately establishes the brand's spiritual and calming identity. The soft analogous gradient background in lavender and mauve tones creates a soothing, feminine atmosphere aligned with the wellness industry. The centered layout with generous whitespace draws the user's eye directly to the logo and core message, reducing cognitive load and decision fatigue.

The language selection cards function as clear, tappable calls-to-action with satisfying hover animations (lift + shadow + border) that provide immediate tactile feedback. The subtle floating background animation adds a layer of sophistication without distracting from the primary content. The typography is clean and readable, with a restrained palette that reinforces the brand's serene personality.

### Unique Differentiators
- Language selection as the primary interaction, making the site immediately accessible to bilingual users
- Soft gradient background with animated radial overlays creating a living, breathing canvas
- Card-based language options with micro-interactions (shimmer effect on hover) that feel premium
- No navigation chrome — a pure, distraction-free gateway experience
- Footer anchored at the absolute bottom, providing a subtle grounding element

### Potential Improvements
- Add a visible focus indicator for keyboard navigation to improve accessibility
- Consider using a more distinctive typeface (e.g., a serif or display font) to strengthen brand personality
- Include a skip-to-content link for screen reader users
- Add meta tags for social sharing optimization (Open Graph already present but could be expanded)
- Consider lazy-loading the logo image for faster initial paint
- Add a subtle loading state or skeleton for the logo image

---

## SOURCE INVENTORY

### URLs Analyzed
```yaml
- https://samia.soy.cx: Landing page / Language selection gateway
```

### Assets Referenced
```yaml
fonts: ['Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif']
images: ['https://samia.soy.cx/site/assets/files/9204/web-logo.png']
icons: [None detected]
css_included: [Inline styles only]
js_libraries: [None detected]
```

---

## CONTEXTUAL INFORMATION

### Industry
```
Wellness / Alternative Therapy — Family Constellations and Quantum Therapy
```

### Target Audience
```
Spanish and English-speaking individuals seeking emotional healing, conscious transformation, and spiritual wellness. Likely adults (30–60) with an interest in holistic and alternative therapeutic approaches.
```

### Design Trends Aligned
- Soft gradients and pastel color palettes
- Card-based UI with micro-interactions
- Minimalist, content-first layouts
- Bilingual gateway pages
- Floating / animated background elements

### Cultural Considerations
```
The site is fully bilingual (Spanish/English) with equal visual weight given to both languages. The color palette (lavender, mauve, soft purple) aligns with feminine and spiritual aesthetics common in Latin American and Western wellness cultures.
```

---

*End of Design Reference Document*