GNOMON — The Sundial Garden demo
GNOMON — The Sundial Garden

A serene minimal-Zen aesthetic inspired by a sundial garden, using generous whitespace, soft backdrop-filter blurs, and muted earthy tones to evoke quiet contemplation.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 14.2 KB · 2008 words
# CODING AGENT PROMPT — Build: "GNOMON — the sundial garden" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single pass — your first attempt must be shippable. No partial scaffolds, no TODOs.

**Project:** GNOMON — the sundial garden. A minimal/zen, 2020s-contemporary landing page for a conceptual sundial garden. The mood: a walled morning garden, warm earth tones, frosted-glass panels, quiet serif typography, and light-driven CSS motifs (a gnomon blade, its cast shadow, hour arcs). Every visual effect — glass, blur, hover, transitions — must feel calm and deliberate, never busy.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is **forbidden** anywhere in `index.html`.
* **Class/ID Selectors Only:** Every color, layout rule, effect, and state is defined in `style.css` and targeted via classes/IDs.
* **Minimal HTML Modifications:** HTML stays semantic and style-agnostic. All theming must be achievable by editing `style.css` alone.

### 1.2 CSS Variables & Theme Tokens
Store **all** visual tokens in `:root` and theme classes. Use exactly this palette mapping:

| Token | Value |
|---|---|
| `--primary` | `#4a3a28` (deep umber — headings, strong accents) |
| `--secondary` | `#5a4a32` (warm bronze) |
| `--accent` | `#a08c6a` |
| `--accent-deep` | `#8a6e44` (focus rings, active accents) |
| `--sand` | `#c9b896` |
| `--bg-primary` | `#f6eee0` (warm cream — page background) |
| `--bg-secondary` | `#fefefe` (cards/panels — **never `#ffffff`**) |
| `--text-primary` | `#4a3a28` |
| `--text-secondary` | `#5a4a32` |
| `--text-success` / `--text-error` | Muted sage green and terracotta meeting WCAG AA on cream (e.g., `#3f6d50` / `#a8462e`) |
| `--border-default` / `--border-error` / `--border-success` | Low-opacity umber/sand borders + success/error variants |
| `--glass-bg` / `--glass-blur` / `--glass-border` | Translucent panel tokens (see Section 2.1) |

Additionally define: `--font-base`, `--font-display`, `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 26px`, `--shadow-sm`, `--shadow-md` (warm-tinted, e.g., `0 12px 32px rgba(74,58,40,0.14)`), `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 320ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` (define z tokens even if unused).

* **Contrast Pairing (mandatory, every theme):** Light backgrounds always pair with dark text tokens; dark backgrounds always pair with light text tokens.
* **Accent Color Discipline:** `#a08c6a`, `#c9b896`, and `#8a6e44` are reserved for **large display text (≥24px), icons, borders, gradients, and decorative accents only** — never small body text, to preserve AA contrast.
* **Pure white is forbidden** — use `#fefefe` where a near-white surface is needed.

### 1.3 Mandatory Dark Mode Support
* **Dark Mode is not optional.** Define dark tokens under both a `.dark` class selector and `@media (prefers-color-scheme: dark)` — implement via variable overrides only, no HTML restructuring.
* **Night-garden palette:** Derive dark mode from the umber hue — warm espresso/ink backgrounds (e.g., `--bg-primary: #201a13`, `--bg-secondary: #2b241b`), text `--text-primary: #f6eee0`, `--text-secondary: #c9b896`, borders `rgba(160,140,106,0.28)`, dark glass tokens, deeper shadows, and adjusted success/error tokens (e.g., `#a3c293` / `#e8917a`). **Never cold gray, navy, or pure black.**
* **Button inversion:** The primary button must invert per theme — Light: `#4a3a28` background + `#f6eee0` text; Dark: `#f6eee0` background + `#4a3a28` text — guaranteeing the contrast pairing in both themes.
* **Exception clause:** The source style spec is light-first. The Zen Garden light theme is the hero presentation, but this does **not** waive Dark Mode — the night-garden variant must be equally polished.
* **Toggle & Persistence:** A visible toggle in the header (Material Symbols `light_mode` / `dark_mode`) with correct `aria-pressed` and a dynamically updated `aria-label`. Persist choice in `localStorage` (`gnomon-theme`); on first visit fall back to `prefers-color-scheme`, defaulting to light.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structure with Flexbox (Tailwind flex utilities or `display: flex`).
* **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.
* Mobile-first: card rows and step rows become columns below ~768px; fluid type via `clamp()`; no horizontal scrolling at any width; minimum touch target 44×44px.

### 1.5 Framework: Tailwind CSS
* Use Tailwind CSS (CDN) for layout/spacing utilities **unless** a build step makes clean custom CSS simpler — either way, all visual identity, tokens, component classes, and states live in `style.css`.
* Utilities must map back to CSS variables via generic reusable component classes: `.btn`, `.card`, `.glass-panel`, `.input-group`, `.accordion-item`, `.pricing-card`.
* One fixed naming convention across the whole deliverable — never mix conventions.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Fonts:** Google Fonts — `Cormorant Garamond` (500/600 + italic, display/headings) and `Inter` (400/500, body). Bind via `<link>` tags to `--font-display` and `--font-base`.
* **Icons:** Google Material Symbols (Rounded style). **Inline SVGs, local icon files, and emoji icons are forbidden.**
* **Decorative motifs (gnomon blade, cast shadow, hour arcs, sun glow) must be built with pure CSS** — gradients, borders, `clip-path`, pseudo-elements, transforms.

---

## 2. VISUAL LANGUAGE — GLASS, BLUR, HOVER

### 2.1 Glass Effect Specification
* Glass panels (`header bar, hero panel, cards, final CTA`): `background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.15); -webkit-backdrop-filter: …; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);`
* **Fallback required:** wrap `backdrop-filter` in `@supports not (backdrop-filter: blur(1px))` → increase background opacity to ~0.9, no blur.
* Light glass: `rgba(254,254,254,0.55)` bg / `rgba(255,255,255,0.6)` border. Dark glass: `rgba(43,36,27,0.55)` bg / `rgba(201,184,150,0.18)` border.

### 2.2 Hover & Motion Language
* Hover shifts are gentle: `translateY(-2px)`, `--shadow-md`, `filter: brightness(1.03)`, icon color drift toward `--accent-deep`. Nothing bounces or scales dramatically.
* All interactive state changes use `transition: var(--transition-normal) var(--ease-standard)`.
* Hero may include one subtle ambient animation (a 24s "shadow drift" across the gnomon motif). **All animations and transitions must be disabled/minimized under `prefers-reduced-motion: reduce`.**

---

## 3. SECTION-BY-SECTION SPECIFICATIONS

Write **all user-facing copy in English** in Gnomon's quiet, precise, light-imagery voice (e.g., hero headline: *"Time, told in light."*). Real copy everywhere — no lorem ipsum, no placeholder text.

### 3.1 Header — Sticky Glass Navigation
Wordmark "GNOMON" in the serif display font; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle; small primary CTA. Sticky with `--z-dropdown`, glass background, hairline bottom border appearing on scroll. Below 768px, collapse links into a keyboard-operable menu button (`aria-expanded`, `aria-controls`).

### 3.2 Hero
Full viewport height on desktop. Background layers built in CSS: warm radial-gradient sun glow (top right), faint concentric "hour arc" circles (1px borders, low-opacity sand), and a translucent gnomon blade (a `clip-path` triangle) casting a soft skewed gradient "shadow" across the section. Centered glass panel contains: eyebrow ("A garden that keeps time"), a single `<h1>`, one line of subcopy, and two CTAs — primary "Enter the garden" and secondary anchor-link "See how it works". Include a quiet scroll cue (Material Symbols `expand_more`).

### 3.3 Features — 3 Cards
Flex row → column on mobile, `var(--spacing-gap)` gutters. Three glass cards, each: Material Symbols icon in a soft circle (`wb_sunny`, `spa`, `self_improvement` suggested), serif title, 2-line body copy. Suggested themes: honest solar time, design for stillness, hours you can watch pass. Cards apply all states from Section 4.2.

### 3.4 How It Works — 3 Steps
Three steps with oversized serif numerals (01 / 02 / 03), titles, and short copy (suggested: "The blade stands" / "The sun writes" / "You simply notice"), joined by a thin `--border-default` connector line on desktop; stacked vertically on mobile. Subtle hover highlight per step.

### 3.5 Testimonials
Three quote cards: Material Symbols `format_quote`, italic serif quote, name + role, and a circular avatar placeholder using a Material Symbols `person` icon (no external images). Realistic names and full quotes in the Gnomon voice.

### 3.6 Pricing — 3 Tiers
Tiers named **Dawn** (free), **Meridian** (recommended), **Dusk** (premium), with monthly prices, feature lists using Material Symbols `check` icons, and a CTA button per tier. The Meridian card is visually elevated: 1px `--accent` border, a "Recommended" text badge (not color-only), desktop `translateY(-8px)`, stronger shadow, and the primary button; other tiers use secondary buttons. All button states from Section 4.1 apply.

### 3.7 FAQ — Accordion
5–6 written questions (e.g., "What is a gnomon, exactly?", "Does the garden work on cloudy days?", "Can I visit at night?", "Is the garden accessible?", "Can I cancel my membership?"). ARIA accordion: each item is a `<button aria-expanded aria-controls>` header plus a panel (`role="region"`), animated open/close via the `grid-template-rows: 0fr → 1fr` technique, chevron (`expand_more`) rotating 180°. Fully keyboard operable; state is communicated by chevron rotation **and** `aria-expanded`, never color alone.

### 3.8 Final CTA
Full-bleed glass panel over a warm gradient sun-glow band: serif `<h2>`, one line of copy, primary button ("Begin your visit") and a secondary text link.

### 3.9 Footer — Secondary Links
Wordmark + one-line tagline; three muted link columns (e.g., Garden: Visit / Hours / Journal / Contact; Explore: Features / How it works / Pricing / FAQ; Legal: Privacy / Terms / Accessibility); social icon links (Material Symbols with `aria-label`); copyright line; back-to-top link with smooth scrolling guarded by `prefers-reduced-motion`.

---

## 4. COMPONENT DESIGN SPECIFICATIONS

### 4.1 Buttons
All states styled via classes; variants: `.btn-primary`, `.btn-secondary` (glass/outline), `.btn-ghost`, and `.btn-danger` (distinct in **both** themes).
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px.
* **Hover:** brightness/shadow shift, `cursor: pointer`.
* **Focus:** distinct `:focus-visible` ring (2px `--accent-deep`, 2px offset — `--sand` in dark mode).
* **Active:** `transform: scale(0.97)`.
* **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol **without changing button dimensions**.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` and matching border tokens.

### 4.2 Cards
* **Default:** Flexbox layout, glass or `--bg-secondary` surface, subtle `--border-default`, `--shadow-sm`, `--radius-md`/`--radius-lg`.
* **Hover:** elevation shift + `translateY(-2px)`.
* **Focus-within:** border highlights `--accent-deep` when a child link/button receives focus.
* **Loading (Skeleton):** define shimmer animation styles that prevent layout jumps.
* **Empty State:** structured fallback (Material Symbol + guidance text) defined in CSS.

### 4.3 Forms & Inputs
If any input appears anywhere on the page (e.g., an optional newsletter field), it must implement: **empty, focused (outline ring), filled, valid (success border + icon), invalid (error border + error icon + message — not color alone, announced via `aria-live`), disabled, read-only.** Structure: `.input-group` flex container wrapping label, field, and a dedicated error message container.

### 4.4 Accordion / Modal
* The FAQ accordion (Section 3.7) is mandatory and must meet its full ARIA/keyboard spec.
* A modal is **not required** for this page. If you introduce one, it must include: centered flex overlay with backdrop, Google Icon close button, focus trapping, `Esc` and overlay-click closing, and animated opening/open/loading/success-error/closing states via CSS transitions.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.
* **Smooth animations:** CSS transitions on all state changes; fully respect `prefers-reduced-motion`.
* **Accessibility (a11y):** AA contrast in light and dark modes; semantic HTML5 landmarks (`header`, `nav`, `main`, `footer`); a skip-to-content link; exactly one `<h1>` with logical heading order; ARIA roles/labels on all custom widgets (toggle, menu, accordion); logical DOM/focus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for any dynamic feedback.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions** (if any appear) must be visually distinct in both themes.
* **JS scope (in `script.js` only):** theme toggle + persistence, accordion behavior, subtle IntersectionObserver reveal-on-scroll (fade/translate 16px — skipped or instant under reduced motion), guarded smooth anchor scrolling. Keep JavaScript minimal and unobtrusive.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js` — separate, clean files.
* **Scripts:** `index.html` may reference only external scripts (Tailwind CDN engine if used) plus a single `<script src="script.js" defer>`. **No inline script code blocks, no inline styles.** Google Fonts and Material Symbols load via `<link>` tags.
* **Naming:** one consistent convention (generic component classes + Tailwind layout utilities, or one fixed custom set) — never mixed.
* **Copy:** complete, real English copy for every headline, paragraph, testimonial, FAQ answer, and pricing feature in the voice defined in Section 3 — placeholders are permitted only where genuinely unspecified content cannot be invented.
* All class names, IDs, variables, and file names in English/ASCII.