# Design Language for longitude.day

## Aesthetics and Tone

**The feeling:** A sun-warmed afternoon in a garden cottage — jars of dried lavender on the windowsill, the soft creak of a wooden chair, golden light pooling across a worn linen tablecloth, the smell of chamomile and old books. longitude.day is a site that feels like the exact hour before sunset when time slows and every shadow is amber.

**Visual direction:** Cottagecore meets bento-grid warmth. The aesthetic rejects the clinical whitespace of tech portfolios and instead embraces organic, slightly imperfect layouts — bento boxes of varying sizes arranged like a handmade quilt, each tile holding its own little world. Surfaces carry visible grain (fine noise texture, 3–5% opacity), as if the page was printed on matte vellum.

**Tone vocabulary:** unhurried, sun-dappled, handcrafted, softly luminous, lived-in, tender. Every element feels placed by hand, not machine-generated. Borders are organic — slightly uneven radius values, never perfectly identical. The overall mood is "golden hour in a cottage kitchen" rather than "startup SaaS landing page."

**Inspiration references:** Anna Atkins' cyanotype botanical photography, the color palette of William Morris wallpaper, a beeswax candle burning on a windowsill at dusk, the worn pages of a well-loved field journal.

## Layout Motifs and Structure

**Core layout:** Asymmetric bento-box grid — 12-column base, tiles spanning 3, 4, 5, 7, or 8 columns and 1–3 rows. No two tiles are the same size. The arrangement follows a loose golden-ratio stagger: larger "anchor" tiles at top-left and bottom-right, smaller "accent" tiles filling the interstitial spaces. The grid breathes — gutters are 16px, tiles have variable internal padding (24px–56px).

**Stagger pattern (restrained use — frequency: 58%, must be purposeful):** Used only for the initial tile entrance animation. Each tile enters with a 60ms stagger delay cascading from top-left to bottom-right, floating up 12px with fade. Once settled, nothing staggers. The stagger serves reveal, not decoration.

**Spatial hierarchy:**
- **Hero tile** (col-span 8, row-span 2): Full bleed warm-gradient or noise-texture background, the domain name rendered in expressive variable weight, a one-line poetic tagline below
- **Time tile** (col-span 4, row-span 1): Live current longitude-based solar time or a single rotating quote about daylight
- **Visual accent tiles** (col-span 3–4, row-span 1): Botanical motif blocks, floating petal animations, color swatches
- **Story tile** (col-span 5, row-span 2): Editorial text block with generous leading, a small pressed-flower illustration in the corner
- **Micro-detail tiles** (col-span 3, row-span 1): Texture closeup, a single handwritten-style numeral, a tiny SVG icon

**Floating elements:** Dried petals (rose, chamomile, lavender) drift very slowly — CSS `translate` keyframes over 18–30s, each petal on its own timeline with random seed. Maximum 6 petals visible at any time, opacity 0.35–0.55, scale 0.4–0.8. They drift diagonally from top-right toward bottom-left, occasionally pausing (3s `animation-play-state: paused` at random intervals). They never cover text.

**Navigation:** None. The bento tiles are the navigation — hovering a tile shifts its border color to `#E8A87C` (peach) and lifts it 2px with `box-shadow: 0 6px 24px rgba(180, 100, 40, 0.18)`. Clicking navigates or expands. No hamburger menus, no header bars, no sticky navs.

## Typography and Palette

**Typefaces (Google Fonts only):**

- **Display / Hero:** *Playfair Display* — variable weight axis, set at wght 400–800. The domain name uses `font-variation-settings: 'wght' 700` normally, animating to `'wght' 400` on a slow 2s ease when the page loads, as if the letters are exhaling. Size: clamp(3.5rem, 7vw, 7rem).
- **Body / Editorial:** *Lora* — a serif with warm, slightly calligraphic strokes. Used at 18px/1.75 line-height for all prose tiles. Italic variant for pulled quotes.
- **Accent / Label:** *Caveat* — a handwritten-style variable font for small labels, timestamps, and tile captions. Used sparingly at 14–16px, weight 400–600.

**Typographic treatments:**
- Tile headlines: Playfair Display, wght 650, tracking -0.02em, color `#2C1810`
- Body paragraphs: Lora, 18px, color `#4A3728`, line-height 1.75
- Labels/captions: Caveat, 15px, color `#8B6551`, letter-spacing 0.04em
- Timestamps / numerals: Caveat, 32–48px, color `#C4874E`, used as decorative anchors

**Color palette — Sunset Warm:**

| Role | Name | Hex |
|---|---|---|
| Page background | Parchment | `#F7EDD8` |
| Tile surface primary | Cream linen | `#F2E4C8` |
| Tile surface secondary | Warm ivory | `#EDD8B0` |
| Hero tile bg | Dusk amber | `#D4874A` |
| Border / divider | Toasted wheat | `#C4A882` |
| Accent hover | Peach glow | `#E8A87C` |
| Text primary | Dark walnut | `#2C1810` |
| Text secondary | Warm mahogany | `#4A3728` |
| Text tertiary / muted | Dusty rose-brown | `#8B6551` |
| Floating petal tint | Faded rose | `#D4948A` |
| Noise layer tint | Warm sand | `#C8B090` |

**Gradient usage (restrained — frequency: 78%, used deliberately):** A single linear gradient appears only in the hero tile: `linear-gradient(135deg, #D4874A 0%, #E8A87C 45%, #F2C896 100%)`. No other gradients anywhere — all other tiles use flat color + noise texture overlay.

## Imagery and Motifs

**Noise texture:** A single tileable SVG `feTurbulence` filter defines the page grain. `baseFrequency="0.65"`, `numOctaves="4"`, `type="fractalNoise"`. Applied as a pseudo-element overlay at 4% opacity across all tiles — subtle enough to feel like paper grain, strong enough to read on close inspection. This is the signature texture of the site; it replaces the photography-heavy approach (89% frequency in registry — actively avoided).

**Botanical motifs (inline SVG only, no photography, no stock art):**
- **Pressed chamomile:** A flat, stylized daisy with 8 petals, stroke `#C4A882`, no fill, 1px stroke weight. Appears in corner of the story tile at 64×64px, slightly rotated (-8deg).
- **Lavender sprig:** Three-branched spray, each branch with 5–7 oval floret marks. Stroke `#9B8DB0` (soft lavender), 1px. Used as a tile divider element at 120px wide.
- **Rose hip cluster:** Three oval berries on a curved stem, filled `#C4584A` (muted terracotta red), no stroke. Appears in the hero tile corner at 80px.
- **Wheat stalk:** A minimalist single stalk with 6 grain marks, stroke `#C4A882`. Used as an end-of-section ornament.

**Floating petal elements (CSS animated):**
- 6 petals total, each a simple `<div>` with border-radius making an oval (12×8px to 20×14px)
- Colors cycle: `#D4948A` (rose), `#C4A882` (wheat), `#B8A090` (linen)
- Animation: `translateX(-120vw) translateY(+60vh) rotate(360deg)` over 18–28s, `animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)`, `animation-iteration-count: infinite`, each with a unique `animation-delay: -Xs` to desync them

**Tile surface texture:** Each tile also has a subtle hand-drawn border effect — `border: 1.5px solid rgba(196, 168, 130, 0.6)`, `border-radius` values set individually (e.g., `12px 14px 11px 13px` — four deliberately unequal values to feel hand-placed).

## Prompts for Implementation

**The story:** longitude.day is about the quality of light at a specific moment on Earth's surface. The site does not explain itself with bullet points or calls to action. Instead, it shows you what it feels like to be at exactly this longitude at this hour — the warmth in the air, the angle of shadows, the way golden-hour light catches on the edge of a ceramic mug. You are not being sold anything. You are being given a moment.

**HTML structure:**
```html
<body class="parchment">
  <div class="petal-layer" aria-hidden="true"><!-- 6 floating petal divs --></div>
  <main class="bento-grid">
    <article class="tile tile--hero">...</article>
    <article class="tile tile--time">...</article>
    <article class="tile tile--story">...</article>
    <article class="tile tile--botanical">...</article>
    <article class="tile tile--accent tile--accent--1">...</article>
    <article class="tile tile--accent tile--accent--2">...</article>
    <article class="tile tile--micro tile--micro--1">...</article>
    <article class="tile tile--micro tile--micro--2">...</article>
  </main>
</body>
```

**CSS architecture:**
- CSS custom properties for all palette values and spacing
- `display: grid` on `.bento-grid` with `grid-template-columns: repeat(12, 1fr)` and `gap: 16px`
- Each tile class uses `grid-column: span X` and `grid-row: span Y`
- Noise texture via `filter: url(#noise)` on a `position: fixed; inset: 0; pointer-events: none; opacity: 0.04; z-index: 9999` overlay SVG
- Organic border radii: each tile class has its own unique 4-value `border-radius`

**Variable font animation:**
```css
@keyframes exhale-weight {
  from { font-variation-settings: 'wght' 800; }
  to   { font-variation-settings: 'wght' 400; }
}
.tile--hero h1 {
  animation: exhale-weight 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
```

**Tile entrance (staggered float-up — used once, on load only):**
```css
@keyframes tile-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tile { animation: tile-rise 0.6s ease forwards; opacity: 0; }
.tile:nth-child(1) { animation-delay: 0ms; }
.tile:nth-child(2) { animation-delay: 60ms; }
.tile:nth-child(3) { animation-delay: 120ms; }
/* ...etc, max 8 tiles, max 420ms total delay */
```

**Floating petal keyframe:**
```css
@keyframes petal-drift {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.45; }
  92%  { opacity: 0.45; }
  100% { transform: translate(-110vw, 55vh) rotate(280deg); opacity: 0; }
}
.petal { position: fixed; animation: petal-drift var(--duration) linear infinite; }
.petal--1 { --duration: 22s; top: 8%; right: 5%; width: 18px; height: 11px; background: #D4948A; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation-delay: -4s; }
.petal--2 { --duration: 28s; top: 2%; right: 18%; width: 14px; height: 8px; background: #C4A882; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; animation-delay: -11s; }
/* ...4 more petals with varying sizes, colors, delays, positions */
```

**JavaScript (minimal):** A single `<script>` tag reads `navigator.geolocation` (with fallback) to compute the actual solar time at the user's longitude and renders it in the time tile as `"14:32 solar time"` in Caveat font. No frameworks. No dependencies. No tracking.

**Anti-patterns to avoid:**
- No hero with a background photograph
- No "Get Started" or "Sign Up" buttons
- No feature grids with icons + headlines + body text
- No testimonial carousels
- No pricing tiers
- No sticky header with logo + nav links
- No gradient-text CSS effects
- No glassmorphism (frosted blur panels) — the site uses grain, not blur

## Uniqueness Notes

**Differentiators from other designs in registry:**

1. **Bento-box as quilt, not dashboard.** Most bento-box implementations in the registry treat tiles as data containers (stats, metrics, feature highlights). Here, tiles are *tactile objects* — each one has organic border-radius (four unequal values), a paper grain overlay, and a slightly imprecise placement energy. The grid is technical underneath but feels hand-assembled, like a pinboard in a cottage kitchen.

2. **Variable font weight exhale as the only hero animation.** The registry skews heavily toward parallax, scroll-triggered reveals, and typing animations. This site uses a single, unhurried 2.4-second variable font weight transition on the domain name — from bold (800) to light (400) — as the sole hero motion. It reads as a breath. Nothing else moves in the hero tile during load.

3. **Solar longitude time as interactive content.** No other design in the registry uses geolocation to compute actual solar time (as opposed to clock time or timezone time). The "time tile" shows the visitor's true solar noon offset — a quietly meaningful piece of data that makes `longitude.day` feel like it's *about something real*, not just a visual exercise.

4. **Cottagecore palette without desaturation.** Most cottagecore web interpretations flatten to dusty muted tones (low saturation, low contrast). This palette keeps warmth saturated in the hero tile (`#D4874A` dusk amber) while transitioning to softer ivories in body tiles — creating genuine luminosity rather than the washed-out beige that dominates cottagecore web design.

5. **Noise texture as the primary imagery strategy.** With photography at 89% in the registry, this design deliberately uses zero photography. The noise-texture grain, botanical SVG illustrations, and floating petal CSS elements replace imagery entirely — making the site visually rich without a single image file.

**Planned seed from assignment:**
aesthetic: cottagecore, layout: bento-box, typography: expressive-variable, palette: sunset-warm, patterns: stagger, imagery: noise-texture, motifs: floating-elements, tone: warm-inviting

**Patterns avoided from frequency analysis:**
- `stagger` (58% — most overused pattern): Used only for initial tile entrance, not as a persistent scrolling effect or decorative principle
- `warm` palette (91%): Used, but differentiated by maintaining saturation in hero vs. muted ivories elsewhere, avoiding the flat beige sameness
- `gradient` (78%): Strictly limited to a single gradient in the hero tile only; all other surfaces use flat color + noise
- `photography` (89%): Zero photography; replaced entirely with noise texture + handcrafted SVG botanicals + CSS petal elements
- `minimal` (38%): Actively avoided — the design is rich and layered, not stripped down
<!-- DESIGN STAMP
  timestamp: 2026-05-08T18:03:28
  domain: longitude.day
  seed: from assignment:
  aesthetic: The feeling:** A sun-warmed afternoon in a garden cottage — jars of dried lavend...
  content_hash: 54020d1191d1
-->