# Design Language for iggi.boo
## Aesthetics and Tone
iggi.boo is a pastoral-romantic sanctuary where maximalist abundance meets the quiet beauty of a sunlit garden journal. The aesthetic draws from the visual world of nineteenth-century botanical illustrators who crowded every margin with pressed flowers, trailing vines, and hand-lettered observations — but translated into a contemporary web context alive with subtle motion and layered depth.
The tone is unabashedly lush. Nothing is sparse. Color bleeds into color. Typefaces nest against watercolor washes. Decorative borders frame content the way a gilded mirror frames a view of the garden. This is not minimalism reclaimed — it is a deliberate, joyful overload of soft, creamy, pastoral warmth.
Mood references: a Victorian conservatory in late afternoon light; the endpapers of a clothbound nature diary; a meadow in June with overlapping wildflower silhouettes; ink-stained fingers pressing a sprig of lavender between notebook pages.
The site feels handmade and intimate, as though every element was placed with personal care. Visitors should feel they have stepped into someone's private creative world — overflowing, personal, warm, and endlessly detailed.
## Layout Motifs and Structure
The core layout is a persistent sidebar composition: a wide, illustrated left rail (approximately 280–320px) anchored by a decorative nature-motif panel, and a main content column that scrolls independently while the sidebar breathes quietly beside it.
**Sidebar Rail:**
The sidebar is not a navigation list — it is an illustrated garden panel. It carries a tall watercolor botanical strip (full sidebar height), layered with semi-transparent cream overlays, delicate pressed-flower ornaments, a monogram or crest for the site identity, and vertically stacked navigation links rendered as hand-lettered labels. At its foot, a decorative botanical footer ornament anchors the rail.
**Main Content Column:**
Content flows in a multi-column magazine grid within the main area (two asymmetric columns at desktop: one wide editorial column, one narrower annotation column). Sections are separated by ornamental dividers — hand-drawn twig-and-berry rules, not horizontal lines. Cards and article previews use irregular, slightly-rotated stacking (1–2° tilt) to suggest papers spread across a wooden desk.
**Skeleton Loading:**
Before content resolves, skeleton placeholders mirror the watercolor-wash aesthetic: they use animated soft gradients cycling between #F5EFE0 and #EDE3CC rather than hard grey bars. The skeletons have organic, slightly imprecise outlines — not perfect rectangles — suggesting pressed paper.
**Spatial Philosophy:**
White space is replaced by cream space. Even empty areas are populated with micro-botanical motifs (tiny sprig SVGs, faint watercolor washes at very low opacity). The composition should never feel airy — it should feel full without being claustrophobic, the way a well-tended garden bed is full.
## Typography and Palette
**Fonts:**
- **Display / Headings:** "Cormorant Garamond" — an elegant, high-contrast serif with swooping italics ideal for pastoral, literary headings. Used at fluid sizes from clamp(2rem, 5vw, 5rem) for major headings.
- **Body / Editorial:** "IM Fell English" — a digitization of a historical typeface with organic irregularities, giving body text a hand-set quality. Used for long-form prose passages.
- **Annotations / Labels:** "Caveat" — a handwriting-style variable font for sidebar labels, captions, and decorative annotation callouts. Applied at fluid sizes via CSS `font-variation-settings`.
- **UI / Utility:** "Nunito" — a rounded sans for metadata, dates, and functional UI elements (breadcrumbs, tags), maintaining warmth without interfering with the editorial voice.
Variable fluid sizing applied throughout via CSS `clamp()` expressions anchored to viewport width, with `font-variation-settings` for Caveat's weight axis.
**Palette:**
| Role | Name | Hex |
|---|---|---|
| Background base | Parchment | #FAF5EB |
| Sidebar panel | Antique cream | #F2E8D5 |
| Skeleton shimmer start | Linen | #EDE3CC |
| Skeleton shimmer end | Warm ivory | #F5EFE0 |
| Primary accent | Dusty rose | #D4876A |
| Secondary accent | Sage green | #7A9E7E |
| Tertiary accent | Lavender dusk | #A693BF |
| Deep text | Bark brown | #3D2B1F |
| Soft text / muted | Dried herb | #8A7560 |
| Ornamental highlight | Wheat gold | #C9A96E |
| Watercolor wash overlay | Blush mist | rgba(212, 135, 106, 0.08) |
| Watercolor wash overlay | Sage mist | rgba(122, 158, 126, 0.10) |
All backgrounds remain firmly in the creamy-pastel register — no pure white (#ffffff), no cool greys. Every surface is warm.
## Imagery and Motifs
**Watercolor Imagery:**
All illustrative imagery is rendered in a watercolor style — loose, wet-edge washes with visible pigment blooms and paper texture beneath. Photographs, if used, are post-processed with a watercolor overlay filter (SVG `feTurbulence` + `feColorMatrix` pipeline) to integrate them into the painted aesthetic. No crisp photography appears raw.
**Nature Motifs:**
The nature vocabulary is specific and botanical: ferns, meadow grasses, blackberries, small songbirds, pressed wildflowers (cornflower, oxeye daisy, cow parsley), and trailing ivy. These appear as:
- Full-bleed watercolor botanical illustrations behind section headers
- Inline decorative ornaments between paragraphs (SVG sprig marks)
- Animated petal-fall particles drifting slowly down the viewport (CSS `@keyframes`, very subtle)
- Corner botanical flourishes on card elements
- Sidebar botanical strip (full-height illustrated panel)
**Skeleton Loading Motifs:**
Skeleton states use organic blob shapes (SVG `clip-path: path()` with gentle curves) rather than rectangular bars. They pulse with the creamy shimmer animation at 1.8s intervals. Each skeleton element is slightly different in shape, as if hand-drawn outlines of content to come.
**Decorative System:**
- Section dividers: SVG twig-and-berry rule (a horizontal botanical illustration, ~40px tall)
- Card borders: a double-line with botanical corner flourish at each corner
- Pull quotes: set inside a watercolor-washed oval, like ink on wet paper
- Navigation hover states: a pressed-flower stamp effect (SVG mask revealing a floral shape behind the label)
## Prompts for Implementation
**Entry Experience:**
On first load, the page is blank parchment. The sidebar botanical panel paints in from the top using an SVG `stroke-dashoffset` animation over 1.2s — as if a brush is drawing the illustration live. Content skeletons are visible in the main column, their organic shapes pulsing. As content resolves, each block fades in with a gentle upward drift (translateY(-8px) → 0, opacity 0 → 1, staggered 80ms per block).
**Skeleton Loading Implementation:**
```
.skeleton-organic {
background: linear-gradient(90deg, #EDE3CC 0%, #F5EFE0 50%, #EDE3CC 100%);
background-size: 200% 100%;
animation: shimmer-pastoral 1.8s ease-in-out infinite;
clip-path: path('M 0 8 Q 10 0 30 4 Q 60 8 90 2 Q 110 0 W 6 Z');
}
@keyframes shimmer-pastoral {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
```
Each skeleton has a unique `clip-path` path string — no two are identical rectangles.
**Sidebar Behavior:**
The sidebar is `position: sticky; top: 0; height: 100vh; overflow: hidden`. The botanical illustration inside is `position: absolute; inset: 0; object-fit: cover` — a tall watercolor strip SVG or PNG. Over it, a semi-transparent cream overlay `rgba(242, 232, 213, 0.55)` softens it. Navigation links sit above the overlay with `mix-blend-mode: multiply` so they stain into the illustration below rather than sitting atop it flatly.
**Variable Fluid Typography:**
```css
:root {
--step-0: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
--step-1: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
--step-2: clamp(1.75rem, 1.2rem + 1.5vw, 3rem);
--step-3: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}
h1 { font-size: var(--step-3); font-family: 'Cormorant Garamond', serif; font-style: italic; }
h2 { font-size: var(--step-2); font-family: 'Cormorant Garamond', serif; }
body { font-size: var(--step-0); font-family: 'IM Fell English', serif; }
.label { font-size: var(--step-0); font-family: 'Caveat', cursive; font-variation-settings: 'wght' 500; }
```
**Petal Drift Animation:**
Ten or more SVG petal elements (simple 5-point organic shapes, ~12px, in dusty rose and lavender) are absolutely positioned and drift downward via CSS keyframes with randomized `animation-delay` and `animation-duration` (between 8s and 18s). They have `pointer-events: none` and `opacity: 0.35`. This creates a persistent gentle snowfall of petals across the viewport without interfering with reading.
**Card Tilt Stacking:**
Article preview cards have `transform: rotate(var(--card-tilt, 0deg))`. Each card receives a CSS custom property via inline style: `--card-tilt: 1.2deg`, `--card-tilt: -0.8deg`, `--card-tilt: 1.5deg` alternating, creating the spread-papers-on-a-desk composition. On hover: `transform: rotate(0deg) translateY(-4px)` with a 0.3s ease transition.
**Watercolor Filter Pipeline (CSS/SVG):**
```html
```
Apply `filter: url(#watercolor-wash)` to any photographic `` to integrate it into the painted world.
**No CTA blocks. No pricing grids. No stat counters.** The site tells a story through imagery and typography. If there is a call to engagement, it is woven into prose: a hand-lettered invitation at the end of a section, not a button grid.
## Uniqueness Notes
**3+ Differentiators:**
1. **Organic Skeleton Loading:** Rather than standard rectangular grey bars, skeleton states use hand-drawn blob `clip-path` outlines that pulse with a warm creamy shimmer — a pattern entirely unmatched across the corpus. Skeleton loading is explicitly tied to the pastoral aesthetic rather than being a neutral utility component.
2. **Botanical Sidebar as Illustration Panel:** The sidebar is not a navigation drawer — it is a full-height watercolor botanical illustration that the navigation lives inside, with links using `mix-blend-mode: multiply` to stain into the painted surface. No other design in the corpus uses the sidebar as an illustrated canvas.
3. **Card Tilt Stacking with Inline CSS Custom Properties:** The rotated-card composition using per-card `--card-tilt` CSS variables gives the layout a uniquely handmade, scattered-papers quality that contrasts deliberately with the grid-based ordering common across the corpus.
4. **Live SVG Brush-Draw Entry Animation:** The botanical sidebar panel animates in via `stroke-dashoffset` as if painted in real time, creating a performative, theatrical entry experience specific to the watercolor medium.
5. **Full Watercolor Integration of Photography:** Any photographs are processed through an SVG `feTurbulence` filter pipeline that integrates them visually with the painted illustration style, preventing the jarring realism break that crisp photography causes in illustrated contexts.
**Chosen Seed:** `aesthetic: maximalist, layout: sidebar, typography: variable-fluid, palette: creamy-pastel, patterns: skeleton-loading, imagery: watercolor, motifs: nature, tone: pastoral-romantic`
**Avoided Patterns (from frequency analysis):**
- Photography (90% usage) — replaced with watercolor illustration and filtered imagery
- Minimal aesthetic (38% usage) — deliberately inverted to maximalist abundance
- Centered layout (90% usage) — replaced with persistent sidebar composition
- Full-bleed layout (76% usage) — replaced with sidebar + magazine-column hybrid
- Generic grey skeleton loading — replaced with organic creamy-shimmer blob skeletons