Cabaña La Martina | Lujo y Naturaleza en Sabanagrande

Design Specification — Cabaña La Martina | Lujo y Naturaleza en Sabanagrande

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#F6EFE5), ink text (#282828), a vivid accent (#25D366). Display headings use a distinct face (ui-serif, Georgia, serif) over the body stack ('Playfair Display'). Detected font weights: 300, 400, 500, 600. Shapes are dominated by pill radii (9999px) — the page otherwise favors sharp, unrounded edges.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Typography

Primary typeface: Playfair Display — stack: 'Playfair Display'

Display / heading typeface: ui-serif, Georgia, serif (used for large headings; body uses the primary stack)

Font stacks (most used first)

• 'Playfair Display'
• 'Public Sans'
• ui-sans-serif, system-ui, sans-serif
• ui-serif, Georgia, serif

Web font sources

• fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Public+Sans:wght@300;400;600&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 1px 2px 0 rgba(0,0,0,0.05)
• 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)
• 0 25px 50px -12px rgba(0,0,0,0.25)
• 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)

Layout

Container max-width: 896px

Grid columns (largest detected grid): 4

Breakpoints

• 640px
• 768px
• 1024px

Animation & Motion

Transitions

• opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)
• none
• all 150ms cubic-bezier(0.4, 0, 0.2, 1)
• color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
• transform 150ms cubic-bezier(0.4, 0, 0.2, 1)
• opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)

Easing curves

• cubic-bezier(0.16, 1, 0.3, 1)
• cubic-bezier(0.4, 0, 0.2, 1)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Reservar”

button-secondary — sample text: “Inicia tu Reserva”

navigation-link

Source Design Tokens (CSS custom properties)

:root {
  --body-bg: #f6efe5;
  --body-color: #282828;
  --heading-font: ui-serif, Georgia, serif;
}

Do's and Don'ts

Do

• Do reserve the accent #25D366 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #F6EFE5; surfaces should stay within the detected neutral ramp.
• Do set large headings in ui-serif, Georgia, serif with tight tracking (-0.025em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 300, 400, 500, 600.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't round cards or containers; only pill-shaped elements (9999px) carry a radius on this page.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-background: #F6EFE5;
  --color-text-primary: #282828;
  --color-primary: #555B00;
  --color-accent: #25D366;
  --color-surface: #F6EFE5;
  --color-secondary: #000000;
  --color-text-secondary: #ADA89A;
  --color-border: #F6EFE5;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #282828;
  --font-sans: 'Playfair Display';
  --font-size-display: 128px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --font-display: ui-serif, Georgia, serif;
  --tracking-display: -0.025em;
  --tracking-label: 0.1em;
  --container-max: 896px;
}