---
version: alpha
name: Bellevalia Hydra
description: Editorial Aegean luxury — Reckless high-contrast serif headlines over Laca humanist-sans body, an off-white paper canvas with near-black ink, and a muted coastal palette of slate navy, sun-bleached taupe, bronze, and sage. Sharp zero-radius geometry, wide-tracked uppercase labels, and underline-only buttons.

colors:
  # Canvas + ink
  background: "#f9fafb"
  surface: "#f9fafb"
  surface-paper: "#ebe9e4"
  ink: "#040708"
  ink-pure: "#000000"

  # Coastal accents
  navy: "#304f7d"
  taupe: "#c9c4b8"
  bronze: "#9c856a"
  sage: "#7d8a80"

  # Functional
  primary: "#304f7d"
  link: "#304f7d"

  # Neutral scale (derived from ink over canvas)
  gray-700: "#3d4042"
  gray-500: "#6b6f72"
  gray-300: "#abafb2"
  gray-100: "#dcdcdc"

  # On-color
  on-primary: "#f9fafb"
  on-ink: "#f9fafb"
  on-bronze: "#040708"

typography:
  display-hero:
    fontFamily: "Reckless, Playfair Display, Georgia, serif"
    fontSize: 88px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px
  display-large:
    fontFamily: "Reckless, Playfair Display, Georgia, serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: 0px
  heading:
    fontFamily: "Reckless, Playfair Display, Georgia, serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0px
  heading-medium:
    fontFamily: "Reckless, Playfair Display, Georgia, serif"
    fontSize: 44px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0px
  heading-small:
    fontFamily: "Reckless, Playfair Display, Georgia, serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
  sub-heading:
    fontFamily: "Reckless, Playfair Display, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "laca, Hanken Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "laca, Hanken Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  body-small:
    fontFamily: "laca, Hanken Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-eyebrow:
    fontFamily: "laca, Hanken Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 2.7px
  button-ui:
    fontFamily: "laca, Hanken Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 2.7px
  caption:
    fontFamily: "laca, Hanken Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  full: 9999px

components:
  # Underline-only primary CTA (dark ink, animated 1px underline)
  button-primary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.bronze}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px

  # Inverted CTA on dark/photo overlay
  button-light:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.on-ink}"

  # Solid reservation CTA
  button-solid:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 40px

  # Eyebrow label
  eyebrow:
    backgroundColor: "{colors.background}"
    textColor: "{colors.bronze}"
    typography: "{typography.label-eyebrow}"
    rounded: "{rounded.none}"
    padding: 0px

  # Editorial card — flat paper, no radius
  card:
    backgroundColor: "{colors.surface-paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 40px
    borderColor: "{colors.taupe}"

  # Image / content card
  card-image:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.gray-100}"

  # Input — bottom-rule only
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.gray-300}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.navy}"

  # Top nav bar — transparent over hero, ink links
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-eyebrow}"
    padding: 24px 40px
    borderColor: "{colors.gray-100}"

  # Footer — paper tone
  footer:
    backgroundColor: "{colors.surface-paper}"
    textColor: "{colors.gray-700}"
    typography: "{typography.body-small}"
    padding: 96px 40px
---

# Bellevalia Hydra Design System

## Overview

Bellevalia Hydra is the website of a boutique Aegean property, and its design speaks the visual language of slow, editorial luxury rather than conversion-driven hospitality marketing. The canvas is a soft off-white (`{colors.background}`) — paper, not pure white — and the ink (`{colors.ink}`) is a near-black with a trace of blue-green warmth that keeps long-form reading gentle on the eye. The whole system feels printed: wide margins, generous vertical rhythm, and photography given room to breathe like full-bleed plates in a travel monograph.

The typographic pairing carries the identity. Headlines are set in **Reckless**, a high-contrast modern serif, at large sizes (up to 88px) in a light weight (300) — the thin-to-thick stroke modulation gives the display type a couture, almost fashion-editorial cadence. Body and interface copy run in **Laca**, a humanist sans-serif in a light 300 weight, which keeps paragraphs airy and quiet so the serif headlines stay the loudest voice on the page. The contrast between a delicate display serif and a calm reading sans is the signature move.

Where the type relaxes, the labels tighten. Eyebrows, nav links, and buttons use Laca in weight 600 with very wide letter-spacing (2.7px), frequently uppercase — a tracked, gallery-wall treatment that signals navigation and calls-to-action without resorting to color or fills. Buttons themselves are minimal: an animated 1px underline that retracts on hover, never a pill or a box. Geometry across the site is uncompromisingly sharp — `border-radius` is zero almost everywhere — reinforcing the architectural, stone-and-whitewash feeling of Hydra itself.

Color is muted and coastal. A slate navy (`{colors.navy}`) anchors interactive accents and overlays, while a sun-bleached taupe (`{colors.taupe}`), warm bronze (`{colors.bronze}`), and soft sage (`{colors.sage}`) fill out an earthy supporting palette drawn from the island's textures — limewash, driftwood, olive, and sea-stone. Nothing is saturated; nothing competes with the photography.

**Key Characteristics:**
- Reckless high-contrast serif for all headlines, light weight 300, sizes up to 88px
- Laca humanist sans for body (weight 300) and tracked labels (weight 600)
- Wide 2.7px letter-spacing on uppercase eyebrows, nav, and buttons
- Underline-only buttons with an animated 1px retracting rule — no fills, no radius
- Off-white paper canvas (`{colors.background}`) with near-black ink (`{colors.ink}`)
- Zero border-radius everywhere — sharp, architectural geometry
- Muted coastal palette: slate navy, taupe, bronze, sage
- Full-bleed editorial photography as the primary visual material

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, nav. Near-black with faint warmth, not pure black.
- **Paper White** (`{colors.background}`): Page and surface background — soft off-white, never #fff.
- **Paper Tone** (`{colors.surface-paper}`): Sectioned surfaces, cards, footer — a warmer limewash tint.

### Coastal Accents
- **Slate Navy** (`{colors.navy}`): Interactive accent, links, reservation CTA, photo overlays.
- **Taupe** (`{colors.taupe}`): Driftwood neutral — card borders, dividers, muted fills.
- **Bronze** (`{colors.bronze}`): Warm metallic accent — eyebrows, hover states, fine detail.
- **Sage** (`{colors.sage}`): Soft olive-green tone for subtle supporting accents.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Footer text, secondary copy.
- **Gray 500** (`{colors.gray-500}`): Tertiary text, captions.
- **Gray 300** (`{colors.gray-300}`): Input rules, placeholders, hairlines.
- **Gray 100** (`{colors.gray-100}`): Subtle dividers, image borders.

### On-Color
- **On Primary** (`{colors.on-primary}`): Paper-white text on navy.
- **On Ink** (`{colors.on-ink}`): Paper-white text on ink overlays.

## Typography

### Font Family
- **Display / Headings**: `Reckless`, with fallbacks `Playfair Display, Georgia, serif` — a high-contrast modern serif, used at weight 300.
- **Body / UI**: `laca`, with fallbacks `Hanken Grotesk, Helvetica Neue, Arial, sans-serif` — a humanist sans, weights 300 (reading) and 600 (labels).

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px Reckless hero — full editorial impact |
| `display-large` | 72px section openers |
| `heading` | 56px feature headings |
| `heading-medium` | 44px sub-section headings |
| `heading-small` | 32px card / block headings |
| `sub-heading` | 24px serif lead-ins |
| `body-large` | 20px introductions |
| `body` | 18px standard reading text (Laca 300) |
| `body-small` | 16px UI text |
| `label-eyebrow` | 13px uppercase tracked eyebrow (2.7px spacing) |
| `button-ui` | 16px uppercase tracked button label |
| `caption` | 13px metadata, fine print |

### Principles
- **Serif speaks, sans whispers**: Reckless at weight 300 carries all the voice; Laca at 300 stays deliberately quiet underneath.
- **Tracking marks function**: Anything navigational or actionable gets 2.7px letter-spacing and weight 600 — wide tracking is the UI signal, not color.
- **Light weights throughout**: Display serif is 300, body sans is 300. The page reads delicate, never heavy.
- **No bold display**: Headlines never go above 300 weight — the contrast comes from the serif's stroke modulation, not from heaviness.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Vertical rhythm is generous — sections separate with `{spacing.3xl}`–`{spacing.4xl}` of breathing room.

### Grid & Container
- Wide content measure with deep outer margins — print-like framing
- Hero: full-bleed photography with overlaid serif headline
- Editorial sections: alternating image/text two-column blocks
- Full-width photographic plates between text sections

### Whitespace Philosophy
- **Paper margins**: Whitespace is the luxury — generous gutters and tall section padding.
- **Photography first**: Layout exists to frame full-bleed imagery; text is restrained and offset.
- **Quiet rhythm**: Sections alternate paper-white and paper-tone surfaces, separated by space rather than lines.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default — text, paper surfaces |
| Hairline (Level 1) | 1px `{colors.gray-100}` rule | Dividers, image edges, nav underline |
| Card (Level 2) | `{colors.surface-paper}` tone shift, optional 1px `{colors.taupe}` | Content cards on paper canvas |
| Overlay (Level 3) | `{colors.navy}` or `{colors.ink}` translucent wash over photography | Hero text legibility |
| Focus (Accessibility) | 2px `{colors.navy}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Depth is almost entirely flat. There are no drop shadows in the brand vocabulary — separation comes from tonal surface shifts (paper-white vs paper-tone), hairline rules, and translucent navy/ink overlays on photography. The aesthetic is printed and architectural, not material/elevated.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — sharp, architectural corners |
| `full` | 9999px | Reserved for circular media icons / avatars only |

The system is defined by its lack of rounding. Buttons, cards, inputs, and images all use square corners (`{rounded.none}`). The only round geometry is the occasional circular social/media icon (`{rounded.full}`).

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Ink text, no fill, animated 1px underline that retracts left-to-right on hover; uppercase tracked label.
- **`button-light`** — Inverted variant (paper-white text + underline) for use over dark photography.
- **`button-solid`** — The one filled CTA: navy background, paper-white tracked label, square corners — used for reservations.

### Labels
- **`eyebrow`** — Bronze, uppercase, 13px Laca weight 600, 2.7px tracking. Sits above serif headings.

### Cards
- **`card`** — Paper-tone surface, square corners, generous 40px padding, optional taupe hairline.
- **`card-image`** — Edge-to-edge photographic card, no radius, thin gray-100 edge.

### Inputs
- **`input`** — Bottom-rule only (`{colors.gray-300}`), transparent fill, square corners. Focus shifts the rule to navy.

### Navigation
- **`nav-bar`** — Minimal header, uppercase tracked links in ink, transparent over hero with a gray-100 hairline once scrolled.

### Footer
- **`footer`** — Paper-tone surface, quiet gray-700 small text, tall 96px padding.

## Do's and Don'ts

### Do
- Use Reckless serif at weight 300 for all headlines — let stroke contrast do the work
- Pair with Laca sans at weight 300 for body — keep it light and quiet
- Apply 2.7px letter-spacing and weight 600 to nav, eyebrows, and buttons
- Use underline-only buttons with the retracting 1px hover animation
- Keep all corners square (`{rounded.none}`)
- Build separation from tonal surface shifts and whitespace, not shadows
- Let full-bleed photography carry the page; keep chrome minimal
- Use the off-white paper canvas (`{colors.background}`), never pure white

### Don't
- Don't set headlines in bold — weight 300 is the ceiling for display serif
- Don't use rounded corners on buttons, cards, or inputs
- Don't add drop shadows — the system is flat and printed
- Don't saturate the accents; the coastal palette stays muted
- Don't let body sans compete with the serif — keep it light and small
- Don't drop the wide tracking on labels — it's the core UI signal
- Don't use pure white `#ffffff` as a surface; use paper `{colors.background}`
- Don't crowd the layout — whitespace is the luxury

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down sharply, stacked image/text |
| Tablet | 600–1024px | Two-column editorial blocks begin, reduced section padding |
| Desktop | 1024–1440px | Full layout, deep margins, large serif display |
| Large Desktop | >1440px | Maximum measure centered, generous outer gutters |

### Touch Targets
- Underline buttons get added vertical padding for tap area on mobile
- Nav collapses to a tracked uppercase menu / hamburger
- Inputs keep bottom-rule treatment with comfortable height

### Collapsing Strategy
- Hero serif: 88px → ~44px on mobile, weight 300 preserved
- Two-column image/text → stacked single column
- Full-bleed plates maintain edge-to-edge framing at all sizes
- Section padding: `{spacing.4xl}` → `{spacing.2xl}` on mobile
- Footer: multi-column → stacked

### Image Behavior
- Photography remains full-bleed and edge-to-edge across breakpoints
- Navy/ink overlays scale to preserve headline legibility over images
- No border-radius applied to images at any size

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper White `{colors.background}`
- Heading text: Ink `{colors.ink}` (Reckless serif, weight 300)
- Body text: Ink `{colors.ink}` / Gray 700 `{colors.gray-700}` (Laca, weight 300)
- Accent / links: Slate Navy `{colors.navy}`
- Eyebrow / detail: Bronze `{colors.bronze}`
- Card surface: Paper Tone `{colors.surface-paper}`

### Example Component Prompts
- "Create a hero: full-bleed photo with a soft navy overlay. Headline in Reckless serif, 88px, weight 300, paper-white, line-height 1.0. Above it an uppercase eyebrow in Laca 13px weight 600, 2.7px letter-spacing, bronze."
- "Design an editorial section: paper-white background, two columns. Left: Reckless heading 44px weight 300 + Laca body 18px weight 300 in ink. Right: full-bleed square-cornered image."
- "Build a button: no fill, ink text, uppercase Laca 16px weight 600 with 2.7px tracking, a 1px underline that retracts on hover. Square corners."
- "Create a reservation CTA: navy fill, paper-white uppercase tracked label, square corners, 18px/40px padding."
- "Design an input: transparent fill, bottom 1px gray-300 rule only, square corners, Laca 16px. On focus, rule turns navy."

### Iteration Guide
1. Headlines always Reckless serif at weight 300 — never bold, never sans
2. Body and labels always Laca — 300 for reading, 600 + 2.7px tracking for UI
3. Every corner is square (`{rounded.none}`) except circular media icons
4. Separation comes from paper-tone surfaces and whitespace, not shadows
5. Keep the coastal palette muted; navy is the only assertive accent
6. Let photography be full-bleed and dominant; keep all chrome minimal

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Bellevalia Hydra. Brand names and trademarks belong to their respective owners.