# Design Language for kaguya.stream

## Aesthetics and Tone

kaguya.stream is **neomorphism re-interpreted as a desert-pottery workshop** -- a soft single-column scroll where every surface looks pressed into the wall of an adobe kiln, illuminated by sunset and dotted with crystalline geometry. The mood is **grounded-earthy**: warm clay, slow scroll, careful hands. Inspirations: Dieter Rams' soft-edged Braun audio products, the muted neomorphic UI mockups that briefly took over Dribbble in 2020, the burnt-orange interiors of New Mexico adobe homes (Georgia O'Keeffe's Abiquiú studio), Brian Eno's "Music for Airports" cover, the crystalline grids of malachite cross-sections, and the rolling slow zoom of slow-cinema directors like Apichatpong Weerasethakul. Neomorphism here is not a UI gimmick but a tactile surface: every block looks pressed into clay. The single-column layout walks the eye down a quiet path of pressed-clay panels. The burnt-orange palette + crystalline motifs give the page a desert-mineral character. Futura-geometric typography reads as honest signage in a workshop. Custom-illustration figures (small earthenware vessels, cacti, crystals) sit on each panel like found objects. Shake-error animations are reserved for the rare moments when a form (or the user) gets something wrong.

## Layout Motifs and Structure

A **single-column** layout, narrow and centered, where each section is a soft pressed-clay panel sitting in the desert sun.

- **Opening panel (110vh):** A large neomorphic clay panel (640px wide, 70vh tall) centered in the viewport. The panel has soft pressed edges (dual shadows, light and dark). Inside: the wordmark "KAGUYA.STREAM" in Futura-geometric type at clamp(48px, 8vw, 96px), debossed into the clay surface. Below the wordmark, a single line: "an open stream of small things, made by hand."
- **Stream entries (variable height, ~120vh per entry):** Each entry is one pressed-clay panel:
  - The panel itself has the neomorphic embossed/debossed treatment.
  - Inside, a small custom-illustration of an earthenware object (a vase, a bowl, a teacup, a small clay bird).
  - Beneath, a 2-3 sentence body in Futura-geometric body type.
  - A small "made on..." date in small caps.
- **Crystalline divider (40vh between entries):** A small horizontal line of crystalline geometric motifs (octahedra, prisms) in burnt-orange line work, between entries.
- **Workshop note (90vh):** A larger panel near the end with a longer message from the maker -- a quiet essay on the day's work.
- **Footer (50vh):** A final small panel with: "thank you for watching the stream. the kiln cools at midnight."

The single-column discipline is total. Nothing breaks the column. Everything is centered, soft-edged, and patient.

## Typography and Palette

**Fonts (Google Fonts only):**
- **Display:** "Jost" weight 700 at clamp(48px, 8vw, 96px). Jost is the Google Fonts close cousin of Futura -- geometric, clean, with constructed circle-and-square proportions. Used here for the wordmark and section openers.
- **Sub-display:** "Jost" weight 500 at clamp(24px, 3.4vw, 40px), tracking 2%.
- **Body:** "Jost" weight 400 at 18px / 1.75. The Futura-geometric body reads as workshop signage.
- **Italic:** "Jost" italic at weight 400.
- **Numerals:** "Jost" tabular at 20px.
- **Captions / small labels:** "Jost" weight 500 small caps at 11px tracking 14%.

**Palette (burnt-orange desert clay):**
- `#f4e2c4` -- pale clay (primary background, panel surface)
- `#e8d0a8` -- toasted clay (secondary background, deeper panel base)
- `#c4884c` -- burnt orange (primary accent, custom-illustration ink)
- `#a85420` -- kiln umber (debossed shadows, dark accents)
- `#5a3018` -- iron oxide (body text)
- `#f0b878` -- sunset glow (light highlight on embossed surfaces)
- `#84b8a4` -- malachite green (crystalline motif accent only)

Most of the palette is warm desert clay; the malachite green is the single cool accent reserved for crystalline shapes.

## Imagery and Motifs

- **Neomorphic clay panels:** Each section panel uses the neomorphic surface treatment -- a dual shadow combining a dark inner shadow (kiln umber at 28% opacity) and a light outer highlight (sunset glow at 60% opacity), giving the panel an embossed-from-clay appearance.
- **Custom-illustration earthenware objects:** Each entry has a small hand-drawn illustration of a clay object -- vase, bowl, plate, teacup, clay bird -- in 1.5px burnt-orange line work on the pale-clay panel.
- **Crystalline geometric motifs:** Octahedra, prisms, and hexagonal crystals appear as section dividers in 1.5px malachite green strokes, giving the warm palette its single cool note.
- **Shake-error animation:** Reserved for one specific interaction -- the closing mailto form input (which the user might submit empty). On error, the input shakes horizontally (±6px, three cycles over 320ms) with a brief kiln-umber tint.
- **Debossed wordmark:** The opening wordmark is text-shadow-debossed: a dark shadow at +1px,+1px and a light highlight at -1px,-1px, suggesting the letters are stamped into clay.
- **Sunset washes:** Two soft sunset-glow radial gradients at the top and bottom of the page, fading from pale clay into a slightly deeper toasted clay, suggesting late afternoon light entering through high windows.

## Prompts for Implementation

The site is a quiet single-column stream of pressed-clay vignettes. Build a narrow centered column with neomorphic panels, custom illustrations, and crystalline dividers.

- Single-column layout: `max-width: 640px; margin: 0 auto; padding: 0 24px;`. Every panel sits within this column. No grids, no sidebars.
- Neomorphic panel: `background: #f4e2c4; border-radius: 24px; box-shadow: 8px 8px 24px rgba(168, 84, 32, 0.28), -8px -8px 24px rgba(240, 184, 120, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);` -- the dual shadows produce the pressed-clay surface.
- Debossed wordmark: `color: #a85420; text-shadow: 1px 1px 0 rgba(90, 48, 24, 0.4), -1px -1px 0 rgba(240, 184, 120, 0.8);` -- the dark/light pair creates the deboss illusion.
- Shake-error: `@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }` at 320ms. Triggered only on the mailto-form error state.
- Custom illustrations: inline SVG with `stroke="#c4884c" stroke-width="1.5" fill="none" stroke-linejoin="round";`. Each illustration ~120x120px, centered above its caption.
- Crystalline dividers: small SVG `<polygon>` clusters in malachite green, ~80px tall, centered horizontally between entries.
- Reduced motion: shake-error becomes a single 200ms color flash; no other motion exists.
- AVOID CTAs, pricing modules, signup banners, "feature cards." The site is a workshop stream. There is exactly one form: a small mailto-like contact box at the very end ("send the maker a note") which gracefully handles empty submits with the shake-error animation.
- Storytelling: opening panel declares the workshop; entries unfold one by one as small clay objects from today's work; crystalline dividers space them quietly; the workshop note offers a longer reflection; the footer cools the kiln.
- Grounded-earthy voice: "today I made a small cup. the handle came out wrong." "the kiln runs from morning to evening. I cannot rush it." "thank you for watching. there are more cups tomorrow."

## Uniqueness Notes

**Differentiators from other designs:**

1. **Neomorphism reimagined as adobe clay, not synthetic UI:** Neomorphism is typically rendered as cold plastic. Here it is warmed into pressed-clay surfaces using burnt-orange tonal modulation, anchoring the abstract UI trend in a tactile material.
2. **Single-column total discipline:** No sidebars, no grids, no multi-column anywhere. The entire site obeys one 640px-wide axis. The constraint produces unusual focus.
3. **Custom-illustration earthenware vocabulary:** Every illustration is a clay object, drawn in the same single-weight burnt-orange ink. The visual vocabulary is unified by material.
4. **Crystalline motifs as the only cool accent:** Malachite green appears nowhere except in crystalline dividers; the discipline of color reservation reinforces its meaning.
5. **Shake-error as the sole motion vocabulary:** No bouncing, parallax, or hover lifts. The only animation on the page is the shake-error -- and it only fires once, when needed.

**Chosen seed:** neomorphism single-column futura-geometric burnt-orange shake-error custom-illustration crystalline grounded-earthy -- planned seed from assignment.

**Frequency-aware choices:** `neomorphism` (1%), `single-column` layout, `futura-geometric` typography, `burnt-orange` palette, `shake-error` pattern, `custom-illustration`, and `crystalline` motifs are all under 3%. Avoids overused `playful`, `corporate`, and `photography` patterns. Jost paired with burnt-orange clay is rare.
<!-- DESIGN STAMP
  timestamp: 2026-05-12T01:04:05
  seed: from assignment
  aesthetic: kaguya.stream is **neomorphism re-interpreted as a desert-pottery workshop** -- ...
  content_hash: b87b1e32445c
-->