Clearwater Blue Swiss Minimal

/clearwaterBlueSwissMinimal
A crisp, architectural coastal design system using luminous daytime imagery, Swiss typographic restraint, generous whitespace, and a single structural blue for premium, calm, high-clarity visual interfaces.
Jul 29, 2026
Design System Content
# Clearwater Blue Swiss Minimal Design System

A crisp, architectural coastal design language built around luminous daytime photography, Swiss typographic restraint, and one clear structural blue.

---

## Philosophy

> “A coastal interface should feel built, not decorated.”

Clearwater Blue Swiss Minimal is a calm, high-clarity visual system for premium coastal, architectural, hospitality, real estate, editorial, and lifestyle interfaces. It pairs cinematic full-bleed imagery with rigorous alignment, restrained typography, and a single recurring blue used as structure rather than decoration.

The system should feel open, sunlit, precise, and composed. It should avoid visual noise entirely. The interface is not embellished with icons, shadows, gradients, labels, badges, or secondary accents. Instead, it relies on photography, proportion, whitespace, crisp rectangular geometry, and consistent blue architectural planes.

### Core Beliefs

1. **Photography carries emotion** — Full-bleed, luminous daytime imagery establishes atmosphere. UI should not compete with it.
2. **Blue is structural, not decorative** — Clearwater Blue appears as panels, borders, navigation structure, CTA outlines, and footer/nav backgrounds when needed.
3. **Typography is architectural** — Large, composed sans-serif headings create spatial rhythm and confidence.
4. **No visual chatter** — Avoid badges, icons, chips, decorative labels, gradients, drop shadows, and accent colors.
5. **Sharp rectangles define the system** — Crops, panels, buttons, and modules use clean rectangular geometry with little to no rounding.
6. **Whitespace is coastal air** — Generous spacing should make the interface feel quiet, premium, and sunlit.
7. **Consistency creates calm** — Navbar, footer, panel backgrounds, CTA borders, and blue structural moments must use the same clearwater blue.

### Strict Rules

* **One Blue Only** — Clearwater Blue is the only saturated color permitted.
* **No Additional Accent Colors** — No green success states, yellow warnings, red errors, pink highlights, purple tags, or colored overlays.
* **No Icons** — Do not use decorative or functional iconography. Navigation and actions are expressed with text and layout.
* **No Visual Labels or Badges** — Avoid eyebrow labels, category chips, status badges, pill tags, and floating descriptors.
* **No Shadows** — Depth is created through spacing, color fields, image contrast, and borders.
* **No Gradients** — Backgrounds, image treatments, and buttons remain flat.
* **No Glassmorphism** — Avoid blur panels, frosted navs, translucent cards, and layered opacity effects.
* **No Rounded Decorative Cards** — Geometry should remain sharp, rectangular, and architectural.
* **No Dark Theme** — The system is bright, coastal, daytime, and light-led.
* **No Busy Navigation** — Navigation should remain minimal and quiet.

---

## Color Palette

The palette is intentionally narrow: clearwater blue, chalk white, and pale blue-gray. Neutral values exist only to support legibility and soft architectural separation.

### Core Colors

```css
:root {
  /* Primary Structural Color */
  --clearwater-blue: #1478A8;

  /* Light Surfaces */
  --chalk-white: #FAFAF7;
  --pure-white: #FFFFFF;
  --pale-blue-gray: #EAF1F4;
  --pale-blue-gray-soft: #F3F7F8;

  /* Text */
  --ink: #162025;
  --ink-soft: #3D4A50;
  --ink-muted: #6F7E84;

  /* Lines */
  --line-blue: #1478A8;
  --line-soft: #D8E4E8;
  --line-faint: #EAF1F4;
}
```

### Tailwind-Style Token Mapping

```css
/* Primary Structural Blue */
bg-clearwater        /* #1478A8 — blue panels, nav/footer, solid structural areas */
text-clearwater      /* #1478A8 — rare text use only for active navigation or focused links */
border-clearwater    /* #1478A8 — CTA borders, nav dividers, active state lines */

/* Light Surfaces */
bg-chalk             /* #FAFAF7 — primary page canvas */
bg-white             /* #FFFFFF — image-adjacent content areas */
bg-bluegray          /* #EAF1F4 — quiet secondary panels */
bg-bluegray-soft     /* #F3F7F8 — subtle section backgrounds */

/* Text */
text-ink             /* #162025 — primary headings and body copy */
text-ink-soft        /* #3D4A50 — secondary body text */
text-ink-muted       /* #6F7E84 — tertiary information */

/* Borders */
border-clearwater    /* #1478A8 — all primary structural borders */
border-bluegray      /* #D8E4E8 — subtle internal section dividers */
border-faint         /* #EAF1F4 — very quiet structural rules */
```

### Color Usage Ratios

| Color | Recommended Usage | Purpose |
| --- | ---: | --- |
| Chalk White | 45–55% | Main canvas, negative space, editorial calm |
| Photography | 25–35% | Emotional atmosphere and coastal context |
| Clearwater Blue | 10–18% | Structural panels, nav/footer, CTA borders |
| Pale Blue-Gray | 5–10% | Secondary quiet sections and subtle divisions |
| Ink | 3–5% | Typography only |

### Clearwater Blue Rules

Clearwater Blue must always feel architectural and consistent.

```css
/* Correct uses */
background-color: #1478A8; /* panels, nav bars, footer */
border-color: #1478A8;     /* outline CTAs, module edges, active nav underline */
color: #1478A8;            /* rare active navigation state */

/* Incorrect uses */
box-shadow: 0 0 24px #1478A8;
background: linear-gradient(...);
color: #1478A8; /* for random highlighted words */
```

### Approved Pairings

| Background | Text | Border | Use |
| --- | --- | --- | --- |
| `bg-chalk` | `text-ink` | `border-bluegray` | Standard page sections |
| `bg-white` | `text-ink` | `border-faint` | Content modules beside images |
| `bg-clearwater` | `text-white` | `border-clearwater` | Blue panels, footer, nav |
| `bg-bluegray-soft` | `text-ink` | `border-bluegray` | Secondary architectural content zones |
| Image | `text-white` or `text-ink` depending on crop | none or `border-clearwater` | Hero sections |

### Forbidden Color Behavior

```css
/* Not Allowed */
bg-red-500
bg-green-500
bg-yellow-400
bg-purple-500
text-orange-600
from-blue-500 to-cyan-300
bg-black
bg-neutral-950
shadow-blue-500/20
```

---

## Typography

Typography should feel composed, Swiss, architectural, and coastal. Use clean sans-serif families with confident scale and disciplined spacing.

### Font Families

```css
/* Hero / Display Typography */
font-family: "Plain", "Switzer", "Neue Montreal", Arial, sans-serif;

/* Body / Navigation / Buttons */
font-family: "Satoshi", "Untitled Sans", "Inter", Arial, sans-serif;
```

### Font Roles

| Role | Preferred Fonts | Usage |
| --- | --- | --- |
| Display | Plain, Switzer, Neue Montreal | Hero headings, large section titles, architectural statements |
| Body | Satoshi, Untitled Sans | Paragraphs, navigation, buttons, captions |
| Interface | Satoshi, Untitled Sans | Forms, CTAs, footer links, small navigation |

### Font Weights

```css
font-light       /* Hero typography, large architectural headings */
font-normal      /* Body copy, navigation, footer text */
font-medium      /* Buttons, primary nav, important links */
font-semibold    /* Rare; only for compact UI clarity */

/* Avoid font-bold. Use scale, alignment, and spacing instead. */
```

### Display Type Scale

Hero typography must sit between 74px and 86px on large desktop screens.

```css
/* Desktop Display */
text-hero-sm      /* 74px / line-height 0.96 */
text-hero-md      /* 80px / line-height 0.95 */
text-hero-lg      /* 86px / line-height 0.94 */

/* Section Display */
text-section-xl   /* 56px / line-height 1.0 */
text-section-lg   /* 48px / line-height 1.02 */
text-section-md   /* 40px / line-height 1.05 */

/* Body & Interface */
text-xl           /* 20px / line-height 1.45 */
text-lg           /* 18px / line-height 1.5 */
text-base         /* 16px / line-height 1.55 */
text-sm           /* 14px / line-height 1.5 */
text-xs           /* 12px / line-height 1.4 */
```

### CSS Type Tokens

```css
.text-hero {
  font-family: "Plain", "Switzer", "Neue Montreal", Arial, sans-serif;
  font-size: clamp(3.5rem, 7vw, 5.375rem); /* 56px to 86px */
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 300;
}

.text-section {
  font-family: "Plain", "Switzer", "Neue Montreal", Arial, sans-serif;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem); /* 40px to 56px */
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 300;
}

.text-body {
  font-family: "Satoshi", "Untitled Sans", "Inter", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-weight: 400;
}

.text-nav {
  font-family: "Satoshi", "Untitled Sans", "Inter", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.text-button {
  font-family: "Satoshi", "Untitled Sans", "Inter", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: -0.005em;
  font-weight: 500;
}
```

### Responsive Typography

| Breakpoint | Hero Size | Section Size | Body Size | Notes |
| --- | ---: | ---: | ---: | --- |
| Mobile | 42–52px | 32–40px | 16px | Preserve strong scale but avoid cramped lines |
| Tablet | 56–68px | 40–48px | 16–17px | Maintain generous line length |
| Desktop | 74–86px | 48–56px | 16–18px | Target cinematic architectural presence |
| Wide | 86px max | 64px max | 18px max | Do not overscale beyond composed range |

### Letter Spacing

```css
tracking-hero      /* -0.045em — large hero headings */
tracking-section   /* -0.035em — section headings */
tracking-tight     /* -0.02em — large content titles */
tracking-normal    /* -0.005em — body and navigation */
tracking-button    /* -0.005em — CTA text */
```

### Typography Hierarchy Examples

| Element | Size | Weight | Font | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | 74–86px | light | Plain / Switzer / Neue Montreal | white or ink | -0.045em |
| Section Heading | 48–56px | light | Plain / Switzer / Neue Montreal | ink or white | -0.035em |
| Panel Heading | 36–48px | light | Plain / Switzer / Neue Montreal | ink or white | -0.03em |
| Body Copy | 16–18px | normal | Satoshi / Untitled Sans | ink-soft | -0.005em |
| Navigation | 14px | normal | Satoshi / Untitled Sans | ink or white | -0.01em |
| CTA | 14px | medium | Satoshi / Untitled Sans | ink / white / clearwater | -0.005em |
| Footer Links | 14px | normal | Satoshi / Untitled Sans | white | -0.005em |

---

## Layout System

The layout is based on architectural alignment, full-width imagery, sharp rectangular modules, and repeated blue structural panels.

### Grid

```css
/* Desktop Container */
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 48px;
padding-right: 48px;

/* Wide Editorial Container */
max-width: 1680px;
padding-left: 64px;
padding-right: 64px;

/* Content Measure */
max-width: 560px;

/* Narrow Text Measure */
max-width: 480px;
```

### Grid Columns

```css
/* Desktop */
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 24px;

/* Tablet */
grid-template-columns: repeat(8, minmax(0, 1fr));
column-gap: 20px;

/* Mobile */
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 16px;
```

### Spacing Scale

```css
space-1    /* 4px */
space-2    /* 8px */
space-3    /* 12px */
space-4    /* 16px */
space-5    /* 20px */
space-6    /* 24px */
space-8    /* 32px */
space-10   /* 40px */
space-12   /* 48px */
space-16   /* 64px */
space-20   /* 80px */
space-24   /* 96px */
space-28   /* 112px */
space-32   /* 128px */
```

### Section Rhythm

| Section Type | Desktop Vertical Padding | Mobile Vertical Padding |
| --- | ---: | ---: |
| Hero | full viewport or 760px min | 680px min |
| Standard Content Section | 112–128px | 72–88px |
| Image/Content Module | 0 or 96px | 0 or 72px |
| Blue Panel Section | 96–128px | 72–88px |
| Footer | 72–96px | 56–72px |

### Alignment Rules

* Hero headings are left-aligned.
* Body copy is left-aligned.
* Navigation can align horizontally but should remain minimal.
* Modules alternate image/content and content/image on desktop.
* Mobile stacks image first, content second unless the narrative requires otherwise.
* Do not center hero typography unless absolutely necessary.
* Avoid asymmetrical decoration. Asymmetry should come from layout, not ornament.

---

## Imagery

Photography is the emotional core of the system. Images should feel luminous, coastal, architectural, and real.

### Image Direction

Use images that feature:

* Daytime coastal light
* Clear skies or soft haze
* White architecture
* Calm water
* Stone, concrete, plaster, linen, glass, timber, or pale sand
* Strong horizontal or vertical architectural lines
* Spacious compositions with natural negative space

Avoid images that feature:

* Night scenes
* Heavy contrast
* Neon color
* Dense crowds
* Artificial color grading
* Warm orange filters
* Dramatic cinematic darkness
* Busy lifestyle clutter
* Decorative overlays

### Image Treatment

```css
.image-architectural {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: none;
}
```

### Cropping Rules

| Image Type | Crop | Use |
| --- | --- | --- |
| Hero | Full-bleed 16:9 to viewport | Cinematic opening image |
| Module Image | Sharp rectangle, 4:5 or 3:4 | Alternating content modules |
| Wide Feature | 21:9 or 16:7 | Transitional full-width image |
| Split Image | 1:1 or 4:5 | Paired with blue/content panel |
| Gallery Row | Uniform rectangles | Architectural rhythm |

### Forbidden Image Treatments

```css
/* Not Allowed */
filter: grayscale(100%);
filter: sepia(30%);
filter: contrast(140%);
background: linear-gradient(...);
box-shadow: 0 24px 80px rgba(...);
border-radius: 24px;
mix-blend-mode: multiply;
backdrop-filter: blur(20px);
```

### Hero Image Legibility

Because gradients and dark overlays are forbidden, choose photography with natural negative space on the left side when placing white hero typography over the image.

If the photo is too busy, use one of these approved solutions:

1. Place the heading over a naturally calm area of the image.
2. Use `text-ink` over a bright architectural surface within the photograph.
3. Use a solid Clearwater Blue panel adjacent to the image instead of placing text over the image.
4. Select a different image.

Do not add an overlay to force legibility.

---

## Navigation

Navigation should be minimal, calm, and structural. It must never feel like a marketing toolbar.

### Navbar Variants

#### Transparent Image Navbar

Used over a full-bleed hero image when the crop naturally supports legibility.

```tsx
<header className="absolute inset-x-0 top-0 z-20 h-20 px-8 md:px-12 flex items-center justify-between text-white">
  <a className="text-nav font-medium tracking-[-0.01em]" href="/">
    Clearwater
  </a>

  <nav className="hidden md:flex items-center gap-8">
    <a className="text-nav" href="/locations">Locations</a>
    <a className="text-nav" href="/residences">Residences</a>
    <a className="text-nav" href="/contact">Contact</a>
  </nav>
</header>
```

#### Solid Clearwater Navbar

Used on interior pages, blue-panel pages, or when the hero image cannot support text.

```tsx
<header className="h-20 px-8 md:px-12 flex items-center justify-between bg-clearwater text-white border-b border-clearwater">
  <a className="text-nav font-medium" href="/">
    Clearwater
  </a>

  <nav className="hidden md:flex items-center gap-8">
    <a className="text-nav opacity-90 hover:opacity-100 transition-opacity" href="/locations">Locations</a>
    <a className="text-nav opacity-90 hover:opacity-100 transition-opacity" href="/residences">Residences</a>
    <a className="text-nav opacity-90 hover:opacity-100 transition-opacity" href="/contact">Contact</a>
  </nav>
</header>
```

### Navigation Rules

* Maximum 3–5 nav items.
* No icons.
* No dropdown indicators.
* No pill backgrounds.
* No active badges.
* Use text, spacing, and a single blue underline or border when needed.
* Navbar height should be 72–88px.
* Do not use shadows under the navbar.
* If the navbar is solid, it must use Clearwater Blue.

### Active Nav State

```tsx
<a
  href="/residences"
  className="text-nav border-b border-current pb-1"
>
  Residences
</a>
```

---

## Hero System

The hero is cinematic but uncluttered: full-bleed daytime image, left-aligned heading, minimal nav, and one restrained outline CTA.

### Hero Layout

```tsx
<section className="relative min-h-screen bg-chalk overflow-hidden">
  <img
    src="/coastal-architecture.jpg"
    alt=""
    className="absolute inset-0 h-full w-full object-cover"
  />

  <div className="relative z-10 min-h-screen flex items-end px-8 md:px-12 pb-16 md:pb-24">
    <div className="max-w-[760px]">
      <h1 className="text-hero text-white">
        Coastal architecture in clear daylight.
      </h1>

      <a
        href="/residences"
        className="mt-10 inline-flex h-12 items-center border border-white px-7 text-button text-white hover:bg-white hover:text-ink transition-colors"
      >
        View Residences
      </a>
    </div>
  </div>
</section>
```

### Hero Typography Placement

| Placement | Rule |
| --- | --- |
| Left Bottom | Preferred; cinematic and composed |
| Left Center | Allowed when image has strong open space |
| Centered | Avoid |
| Right Aligned | Avoid unless architectural composition demands it |
| Over Busy Image | Not allowed |

### Hero CTA

The hero CTA should be restrained and outline-based.

```tsx
// On image
"inline-flex h-12 items-center border border-white px-7 text-button text-white hover:bg-white hover:text-ink transition-colors"

// On chalk background
"inline-flex h-12 items-center border border-clearwater px-7 text-button text-clearwater hover:bg-clearwater hover:text-white transition-colors"

// On blue panel
"inline-flex h-12 items-center border border-white px-7 text-button text-white hover:bg-white hover:text-clearwater transition-colors"
```

### Hero Restrictions

* No multiple CTAs.
* No icons inside buttons.
* No badges above heading.
* No gradient overlay.
* No shadow under text.
* No dark translucent text block.
* No video controls visible in the hero.
* No decorative lines unless they are functional borders.

---

## Content Modules

Below the hero, pages should alternate full-width image/content modules with sharp rectangular crops and solid Clearwater Blue panels.

### Alternating Image / Content Module

```tsx
<section className="grid min-h-[720px] grid-cols-1 md:grid-cols-2 bg-chalk">
  <div className="h-[480px] md:h-auto">
    <img
      src="/white-villa-water.jpg"
      alt=""
      className="h-full w-full object-cover"
    />
  </div>

  <div className="flex items-center px-8 py-20 md:px-16 lg:px-24 bg-white">
    <div className="max-w-[520px]">
      <h2 className="text-section text-ink">
        Built with the clarity of the coast.
      </h2>
      <p className="mt-8 text-body text-ink-soft">
        Open plans, pale materials, and measured proportions create interiors that stay calm throughout the day.
      </p>
      <a
        href="/architecture"
        className="mt-10 inline-flex h-12 items-center border border-clearwater px-7 text-button text-clearwater hover:bg-clearwater hover:text-white transition-colors"
      >
        Explore Architecture
      </a>
    </div>
  </div>
</section>
```

### Reverse Module

```tsx
<section className="grid min-h-[720px] grid-cols-1 md:grid-cols-2 bg-chalk">
  <div className="order-2 md:order-1 flex items-center px-8 py-20 md:px-16 lg:px-24 bg-clearwater text-white">
    <div className="max-w-[520px]">
      <h2 className="text-section">
        A single blue line through every space.
      </h2>
      <p className="mt-8 text-body text-white/90">
        The system uses one consistent blue across panels, borders, navigation, and footer structure.
      </p>
      <a
        href="/design"
        className="mt-10 inline-flex h-12 items-center border border-white px-7 text-button text-white hover:bg-white hover:text-clearwater transition-colors"
      >
        View Design
      </a>
    </div>
  </div>

  <div className="order-1 md:order-2 h-[480px] md:h-auto">
    <img
      src="/pool-courtyard.jpg"
      alt=""
      className="h-full w-full object-cover"
    />
  </div>
</section>
```

### Full-Width Image Break

Used between major content areas.

```tsx
<section className="h-[70vh] min-h-[520px] bg-chalk">
  <img
    src="/coastal-horizon.jpg"
    alt=""
    className="h-full w-full object-cover"
  />
</section>
```

### Blue Statement Panel

```tsx
<section className="bg-clearwater px-8 py-24 md:px-12 md:py-32 text-white">
  <div className="max-w-[1120px]">
    <h2 className="text-section max-w-[840px]">
      Architecture, light, and water held in a precise blue frame.
    </h2>
  </div>
</section>
```

### Pale Blue-Gray Section

```tsx
<section className="bg-bluegray-soft px-8 py-24 md:px-12 md:py-32">
  <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
    <div className="md:col-span-5">
      <h2 className="text-section text-ink">
        Quiet material rhythm.
      </h2>
    </div>

    <div className="md:col-span-6 md:col-start-7">
      <p className="text-body text-ink-soft">
        Pale surfaces, measured openings, and direct coastal light create a visual system that feels deliberate without feeling severe.
      </p>
    </div>
  </div>
</section>
```

---

## Component Catalog

Components are intentionally sparse. The system should feel more like an architectural editorial layout than a dense application interface.

---

### Buttons

Buttons are text-only, rectangular, and border-led. Filled buttons are rare and should only use Clearwater Blue or white.

#### Primary Outline Button

```tsx
<a
  href="/contact"
  className="inline-flex h-12 items-center justify-center border border-clearwater px-7 text-button text-clearwater hover:bg-clearwater hover:text-white transition-colors"
>
  Request Details
</a>
```

#### White Outline Button on Image or Blue Panel

```tsx
<a
  href="/view"
  className="inline-flex h-12 items-center justify-center border border-white px-7 text-button text-white hover:bg-white hover:text-clearwater transition-colors"
>
  View Collection
</a>
```

#### Filled Clearwater Button

Use sparingly outside the hero.

```tsx
<a
  href="/schedule"
  className="inline-flex h-12 items-center justify-center bg-clearwater border border-clearwater px-7 text-button text-white hover:bg-transparent hover:text-clearwater transition-colors"
>
  Schedule Visit
</a>
```

#### Minimal Text Link

```tsx
<a
  href="/learn"
  className="inline-flex border-b border-clearwater pb-1 text-button text-ink hover:text-clearwater transition-colors"
>
  Learn More
</a>
```

### Button Rules

* One primary CTA per section.
* No icons.
* No rounded pills.
* No shadows.
* No gradients.
* No filled black buttons.
* Button height should be 48px.
* Border color should be Clearwater Blue or white only.
* Hover states should invert fill and text color, not introduce new colors.

---

### Image Cards

Cards are not decorative containers. They are sharp rectangular image/content compositions.

```tsx
<article className="bg-white border border-bluegray">
  <div className="aspect-[4/5]">
    <img
      src="/residence.jpg"
      alt=""
      className="h-full w-full object-cover"
    />
  </div>

  <div className="p-8">
    <h3 className="font-display text-[32px] leading-[1.05] tracking-[-0.03em] font-light text-ink">
      North Shore Residence
    </h3>

    <p className="mt-5 text-body text-ink-soft">
      Pale stone, open terraces, and direct views across the water.
    </p>
  </div>
</article>
```

### Card Rules

* Use sharp rectangles.
* Borders may use pale blue-gray only.
* No shadows.
* No icon rows.
* No badges.
* No rounded image corners.
* No tinted image overlays.
* Do not stack dense metadata.

---

### Blue Content Panel

A primary structural unit.

```tsx
<div className="bg-clearwater text-white px-8 py-20 md:px-16 md:py-24">
  <h3 className="font-display text-[44px] leading-[1.02] tracking-[-0.035em] font-light">
    Designed around light, air, and horizon.
  </h3>

  <p className="mt-8 text-body text-white/90 max-w-[520px]">
    Every plane, crop, and border follows the same clear blue system.
  </p>
</div>
```

### Panel Rules

* All blue panels use the same Clearwater Blue.
* Do not introduce darker or lighter blue variants.
* Text on blue panels should be white.
* CTA borders on blue panels should be white.
* No internal cards with shadows.
* No patterned backgrounds.

---

### Split Feature

A high-impact architectural section pairing a tall crop with a strong typographic block.

```tsx
<section className="grid grid-cols-1 lg:grid-cols-12 bg-chalk">
  <div className="lg:col-span-7 h-[560px] lg:h-[820px]">
    <img
      src="/terrace-sea.jpg"
      alt=""
      className="h-full w-full object-cover"
    />
  </div>

  <div className="lg:col-span-5 flex items-center bg-clearwater px-8 py-20 lg:px-16 text-white">
    <div>
      <h2 className="text-section">
        Measured by the waterline.
      </h2>

      <p className="mt-8 text-body text-white/90">
        Strong horizontal composition, quiet materials, and coastal light define the visual structure.
      </p>
    </div>
  </div>
</section>
```

---

### Editorial Text Block

Used for calm explanatory sections.

```tsx
<section className="bg-chalk px-8 py-24 md:px-12 md:py-32">
  <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
    <div className="md:col-span-4">
      <h2 className="text-section text-ink">
        Clarity before decoration.
      </h2>
    </div>

    <div className="md:col-span-6 md:col-start-7">
      <p className="text-lg leading-[1.55] tracking-[-0.01em] text-ink-soft">
        The page structure is intentionally restrained. Large photography and generous white space do most of the work, while typography and blue planes provide order.
      </p>
    </div>
  </div>
</section>
```

---

### Forms

Forms should remain minimal, rectangular, and quiet. Avoid floating labels, icons, helper badges, and colored validation states.

```tsx
<form className="bg-chalk border border-bluegray p-8 md:p-10">
  <div className="grid grid-cols-1 gap-5">
    <input
      type="text"
      placeholder="Name"
      className="h-12 w-full border border-bluegray bg-white px-4 text-body text-ink placeholder:text-ink-muted focus:border-clearwater focus:outline-none"
    />

    <input
      type="email"
      placeholder="Email"
      className="h-12 w-full border border-bluegray bg-white px-4 text-body text-ink placeholder:text-ink-muted focus:border-clearwater focus:outline-none"
    />

    <textarea
      placeholder="Message"
      rows={5}
      className="w-full resize-none border border-bluegray bg-white px-4 py-3 text-body text-ink placeholder:text-ink-muted focus:border-clearwater focus:outline-none"
    />

    <button
      type="submit"
      className="mt-3 inline-flex h-12 w-fit items-center justify-center border border-clearwater px-7 text-button text-clearwater hover:bg-clearwater hover:text-white transition-colors"
    >
      Send Request
    </button>
  </div>
</form>
```

### Form Rules

* Inputs are rectangular.
* Borders are pale blue-gray by default.
* Focus border is Clearwater Blue.
* No icons in inputs.
* No colored validation messages.
* No rounded pill fields.
* No shadows.
* No gradient submit buttons.
* Keep forms short and spacious.

---

### Tables / Structured Information

If structured information is required, use simple lines and spacious rows.

```tsx
<div className="border-t border-clearwater">
  <div className="grid grid-cols-2 border-b border-bluegray py-5">
    <div className="text-body text-ink-soft">Location</div>
    <div className="text-body text-ink">North Coast</div>
  </div>

  <div className="grid grid-cols-2 border-b border-bluegray py-5">
    <div className="text-body text-ink-soft">Orientation</div>
    <div className="text-body text-ink">Southwest</div>
  </div>

  <div className="grid grid-cols-2 border-b border-bluegray py-5">
    <div className="text-body text-ink-soft">Material</div>
    <div className="text-body text-ink">Limestone, plaster, glass</div>
  </div>
</div>
```

### Structured Information Rules

* Use horizontal rules, not boxed grids.
* Do not use colored status indicators.
* Do not use icons.
* Avoid dense spreadsheet-like tables.
* Keep row height generous.

---

## Footer

The footer is a major structural endpoint and should use Clearwater Blue consistently.

### Footer Layout

```tsx
<footer className="bg-clearwater text-white px-8 py-16 md:px-12 md:py-20">
  <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
    <div className="md:col-span-5">
      <a href="/" className="font-medium text-base">
        Clearwater
      </a>

      <p className="mt-8 max-w-[420px] text-body text-white/85">
        Coastal architecture shaped by light, air, and precise blue structure.
      </p>
    </div>

    <div className="md:col-span-6 md:col-start-7 grid grid-cols-2 gap-8">
      <div className="flex flex-col gap-4">
        <a href="/locations" className="text-nav text-white/85 hover:text-white transition-colors">Locations</a>
        <a href="/residences" className="text-nav text-white/85 hover:text-white transition-colors">Residences</a>
        <a href="/architecture" className="text-nav text-white/85 hover:text-white transition-colors">Architecture</a>
      </div>

      <div className="flex flex-col gap-4">
        <a href="/contact" className="text-nav text-white/85 hover:text-white transition-colors">Contact</a>
        <a href="/privacy" className="text-nav text-white/85 hover:text-white transition-colors">Privacy</a>
      </div>
    </div>
  </div>

  <div className="mt-16 border-t border-white/30 pt-6 text-sm text-white/70">
    © 2026 Clearwater
  </div>
</footer>
```

### Footer Rules

* Footer background must be Clearwater Blue.
* Footer links are white with opacity changes only.
* No icons.
* No newsletter card with shadows.
* No gradient top border.
* No secondary accent colors.
* Footer border lines may use white opacity or Clearwater Blue depending on context.

---

## Animation System

Animation should be nearly invisible. It should feel like architectural elements arriving into place, not decorative motion.

### Core Animation Principles

* Use opacity and slight vertical movement.
* Keep transitions short and clean.
* Avoid bounce, elastic motion, rotation, blur, parallax, and complex sequencing.
* Never animate color through multiple hues.
* Do not use gradient reveals.
* Do not animate icons because icons are not part of this system.

### Page Entrance

```tsx
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
```

### Image Reveal

Use a simple clip reveal without gradients.

```tsx
initial={{ clipPath: "inset(0 0 100% 0)" }}
animate={{ clipPath: "inset(0 0 0% 0)" }}
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
```

### Section Stagger

```tsx
const container = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 14 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.45,
      ease: [0.22, 1, 0.36, 1]
    }
  }
};
```

### Hover Interactions

```tsx
// Outline CTA hover
"transition-colors duration-200 ease-out hover:bg-clearwater hover:text-white"

// Image hover, if needed
"transition-transform duration-500 ease-out hover:scale-[1.015]"
```

### Animation Restrictions

* No blur-to-clear effects.
* No glowing lines.
* No pulsing.
* No springy bounce.
* No animated gradients.
* No shadow animation.
* No icon motion.
* No large parallax drift.

---

## Page Templates

---

### Homepage Template

```tsx
<main className="bg-chalk text-ink">
  <Hero />

  <section className="grid min-h-[720px] grid-cols-1 md:grid-cols-2">
    <ImageBlock />
    <ContentBlock />
  </section>

  <section className="grid min-h-[720px] grid-cols-1 md:grid-cols-2">
    <BlueContentBlock />
    <ImageBlock />
  </section>

  <FullWidthImage />

  <EditorialTextBlock />

  <section className="grid min-h-[720px] grid-cols-1 md:grid-cols-2">
    <ImageBlock />
    <BlueContentBlock />
  </section>

  <Footer />
</main>
```

### Interior Page Template

```tsx
<main className="bg-chalk text-ink">
  <SolidClearwaterNavbar />

  <section className="px-8 py-24 md:px-12 md:py-32">
    <div className="max-w-[860px]">
      <h1 className="text-hero text-ink">
        Residences shaped by light and horizon.
      </h1>
    </div>
  </section>

  <section className="h-[70vh] min-h-[520px]">
    <img
      src="/interior-hero.jpg"
      alt=""
      className="h-full w-full object-cover"
    />
  </section>

  <AlternatingModules />

  <Footer />
</main>
```

### Gallery Page Template

```tsx
<main className="bg-chalk text-ink">
  <SolidClearwaterNavbar />

  <section className="px-8 py-24 md:px-12 md:py-32">
    <h1 className="text-hero max-w-[760px]">
      A clear view of coastal form.
    </h1>
  </section>

  <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0">
    <img src="/gallery-1.jpg" alt="" className="aspect-[4/5] h-full w-full object-cover" />
    <img src="/gallery-2.jpg" alt="" className="aspect-[4/5] h-full w-full object-cover" />
    <img src="/gallery-3.jpg" alt="" className="aspect-[4/5] h-full w-full object-cover" />
    <img src="/gallery-4.jpg" alt="" className="aspect-[4/5] h-full w-full object-cover" />
    <img src="/gallery-5.jpg" alt="" className="aspect-[4/5] h-full w-full object-cover" />
    <img src="/gallery-6.jpg" alt="" className="aspect-[4/5] h-full w-full object-cover" />
  </section>

  <Footer />
</main>
```

---

## Border System

Borders are structural and must remain crisp.

### Border Tokens

```css
border-clearwater    /* Primary blue structural border */
border-bluegray      /* Quiet internal dividers */
border-faint         /* Very subtle section boundaries */
border-white         /* CTA borders on image or blue panel */
```

### Border Usage

| Element | Border |
| --- | --- |
| Hero CTA on image | `border-white` |
| CTA on chalk/white | `border-clearwater` |
| Blue panel edge | none or `border-clearwater` |
| Input default | `border-bluegray` |
| Input focus | `border-clearwater` |
| Cards/modules | `border-bluegray` |
| Footer divider | `border-white/30` |
| Active navigation | `border-current` |

### Border Rules

* Use 1px borders only.
* No double borders.
* No decorative dashed borders.
* No rounded border pills.
* No shadow substitutes.
* Blue borders must use the exact Clearwater Blue value.

---

## Radius System

The system is primarily sharp and rectangular.

```css
radius-none     /* 0px — default */
radius-sm       /* 2px — only for small form comfort if required */
radius-md       /* 4px — maximum permitted radius */
```

### Radius Rules

* Hero images: `0px`
* Module images: `0px`
* Panels: `0px`
* Buttons: `0px`
* Cards: `0px`
* Inputs: `0px` preferred, `2px` allowed if needed
* Never exceed `4px`

---

## Accessibility

The system should remain visually minimal while meeting practical accessibility standards.

### Contrast

| Pairing | Requirement |
| --- | --- |
| White text on Clearwater Blue | Must pass AA |
| Ink text on Chalk White | Must pass AAA where possible |
| Ink-soft on Chalk White | Must pass AA |
| White CTA border on image | Must remain visible against crop |
| Clearwater CTA border on Chalk White | Must pass visual clarity requirements |

### Focus States

Use a clear rectangular focus outline.

```tsx
"focus:outline-none focus-visible:ring-2 focus-visible:ring-clearwater focus-visible:ring-offset-2 focus-visible:ring-offset-chalk"
```

On blue backgrounds:

```tsx
"focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-clearwater"
```

### Accessibility Rules

* Do not use color alone for critical meaning.
* Do not introduce colored semantic states.
* Keep focus states visible and rectangular.
* Ensure text over photography is naturally legible.
* Do not rely on overlays to fix inaccessible image choices.

---

## Implementation Tokens

### CSS Variables

```css
:root {
  /* Colors */
  --color-clearwater: #1478A8;
  --color-chalk: #FAFAF7;
  --color-white: #FFFFFF;
  --color-bluegray: #EAF1F4;
  --color-bluegray-soft: #F3F7F8;
  --color-line-bluegray: #D8E4E8;
  --color-ink: #162025;
  --color-ink-soft: #3D4A50;
  --color-ink-muted: #6F7E84;

  /* Typography */
  --font-display: "Plain", "Switzer", "Neue Montreal", Arial, sans-serif;
  --font-body: "Satoshi", "Untitled Sans", "Inter", Arial, sans-serif;

  /* Spacing */
  --space-page-mobile: 32px;
  --space-page-tablet: 48px;
  --space-page-desktop: 64px;

  /* Motion */
  --ease-clear: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-medium: 450ms;
  --duration-slow: 700ms;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
}
```

### Tailwind Extension Example

```js
export default {
  theme: {
    extend: {
      colors: {
        clearwater: "#1478A8",
        chalk: "#FAFAF7",
        bluegray: {
          DEFAULT: "#EAF1F4",
          soft: "#F3F7F8",
          line: "#D8E4E8"
        },
        ink: {
          DEFAULT: "#162025",
          soft: "#3D4A50",
          muted: "#6F7E84"
        }
      },
      fontFamily: {
        display: ["Plain", "Switzer", "Neue Montreal", "Arial", "sans-serif"],
        body: ["Satoshi", "Untitled Sans", "Inter", "Arial", "sans-serif"]
      },
      borderRadius: {
        none: "0px",
        sm: "2px",
        md: "4px"
      },
      transitionTimingFunction: {
        clear: "cubic-bezier(0.22, 1, 0.36, 1)"
      }
    }
  }
};
```

---

## Quality Checklist

* [ ] Is Clearwater Blue the only saturated color in the interface?
* [ ] Are navbar, footer, CTA borders, and blue panels using the exact same blue?
* [ ] Does the hero use a luminous full-bleed daytime image?
* [ ] Is the hero heading left-aligned and between 74–86px on desktop?
* [ ] Is there only one restrained outline CTA in the hero?
* [ ] Are Plain, Switzer, or Neue Montreal used for hero/display typography?
* [ ] Are Satoshi or Untitled Sans used for body, buttons, and navigation?
* [ ] Are all image crops sharp rectangles?
* [ ] Are content modules alternating image/content and content/image?
* [ ] Are there no icons anywhere?
* [ ] Are there no badges, chips, or decorative labels?
* [ ] Are there no drop shadows?
* [ ] Are there no gradients or overlays?
* [ ] Are buttons rectangular, text-only, and border-led?
* [ ] Are blue panels solid Clearwater Blue?
* [ ] Does the layout feel spacious, coastal, and architectural?
* [ ] Is all depth created through spacing, panels, image scale, and borders?
* [ ] Does every section have enough whitespace to feel calm and premium?

---

## Allowed vs Not Allowed

### Allowed

* Luminous daytime coastal photography.
* White architecture, water, pale stone, plaster, sand, sky, and glass.
* Full-bleed hero images.
* Left-aligned 74–86px hero typography.
* Plain, Switzer, or Neue Montreal for display text.
* Satoshi or Untitled Sans for body and interface text.
* Solid Clearwater Blue panels.
* Clearwater Blue CTA borders.
* Minimal text-only navigation.
* Sharp rectangular image crops.
* Pale blue-gray section backgrounds.
* 1px structural borders.
* Quiet opacity-based hover states.
* Generous whitespace.
* Alternating full-width image/content modules.

### Not Allowed

* Icons.
* Emojis.
* Badges.
* Chips.
* Eyebrow labels.
* Decorative labels.
* Drop shadows.
* Gradients.
* Dark overlays.
* Glassmorphism.
* Multiple accent colors.
* Rounded pill buttons.
* Card shadows.
* Heavy black backgrounds.
* Neon photography.
* Night photography as the primary visual direction.
* Busy navigation.
* Centered marketing-style hero layouts.
* Multiple hero CTAs.
* Colored status states.
* Decorative patterns.
* Blue glow effects.
* Parallax-heavy motion.
Preview