# Design Language for amamya.xyz ## Aesthetics and Tone amamya.xyz (v2) is a **Y2K-Terracotta Capsule** -- a professional-toned single-column briefing document for a fictional weather-forecasting cooperative imagined as if a 2003 corporate intranet had been re-skinned by a terracotta-loving ceramicist. The .xyz suffix is a "cooperative" handle, and the design behaves like a friendly, slightly nostalgic briefing leaflet you'd be handed at the cooperative's front desk. The mood is **professional**: composed, focused, slightly retro, with crisp Frutiger-clean typography ordering every paragraph into a clear column. Water-bubble imagery floats subtly in the page margins -- the cooperative's logo motif rendered as small drifting droplets. Skeleton-loading patterns reveal each block as if printed by a slightly-slow office printer. Star-celestial motifs accent date stamps, mimicking weather satellite icons. Where most y2k-futurism sites lean lime-and-chrome loud, this one stays in terracotta warm, sandstone, sage-mineral, and ink-paper -- a y2k that grew into a quiet office. ## Layout Motifs and Structure The composition is a **single-column** layout -- one centered reading column (max-width 760px) with a friendly office-leaflet rhythm. Sections are stacked vertically with clear hierarchy. The page reads like an office briefing dossier, not a marketing site. **Macro structure:** - **Briefing cover (Section 0, 100vh):** A centered column with the wordmark "amamya.xyz" set in frutiger-clean sans, with a small subtitle "Weather Cooperative // Briefing 026" in monospace tabular figures. A star-celestial weather satellite icon sits at the upper-right. - **Brief abstract (Section 1, 90vh):** A 6-paragraph briefing abstract in frutiger-clean sans, with each paragraph numbered (01, 02, 03) in terracotta. Skeleton-loading shimmer reveals each paragraph as the user scrolls. - **Forecast plate (Section 2, 130vh):** A vertical list of 7 weather observation entries (date, location, condition) set in tabular figures, with small star-celestial icons marking each entry. Water-bubble droplets float in the right margin. - **Field notes (Section 3, 120vh):** A long-form prose vignette describing the cooperative's recent fieldwork, with one inline still-life image (a barometric instrument) rendered in terracotta duotone. - **Sign-off (Section 4, 80vh):** A small office-style sign-off block with the cooperative's address (no email, no phone -- only a paper address) and a small star-celestial seal. **Skeleton-loading pattern:** Each text block reveals via a horizontal shimmer sweep (1.4s, terracotta-tinted) as it enters the viewport. The shimmer feels like a slow office-printer printing the page. **Spacing:** Outer margin auto, max-width 760px. Vertical rhythm 26px. Section gaps 8vh. Padding 5vw on body block sides. ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "Manrope" weight 600 -- a frutiger-clean sans used at clamp(32px, 4.5vw, 64px). Tracking 0.005em. Manrope's friendly humanist warmth fits the cooperative-briefing register. - **Sub-labels/numerals:** "Manrope" weight 500 small-caps at 13-14px, tracking 0.12em uppercase. Used for section numbers and date stamps. - **Body text:** "Manrope" weight 400 at clamp(16px, 1.2vw, 19px), line-height 1.7. Italic for inline field-note remarks. - **Numerals/data:** "JetBrains Mono" weight 400 tabular figures at 14-16px, for forecast entries. **Palette (terracotta-warm with mineral accents):** - `#F4ECDC` -- **Sandstone Paper**, the dominant background -- pale warm cream. - `#E7D7BB` -- **Aged Linen**, secondary background tint. - `#C8643C` -- **Terracotta Warm**, the primary accent -- baked clay-orange. - `#946A4B` -- **Burnt Sienna**, mid-tone for rules and numerals. - `#7B8A75` -- **Sage Mineral**, the cool counter-accent for star icons. - `#3A352D` -- **Ink Paper**, primary text color. - `#D9A86B` -- **Mineral Gold**, the rare accent for the cooperative's seal and section markers. The palette is warm, sandstone-baked, slightly mineral. Saturation kept moderate. ## Imagery and Motifs **Core visual motifs:** - **Water bubbles (imagery mandate):** Small drifting water-droplet bubbles float in the right margin -- 6-12px circles with a terracotta-fade inner gradient and a soft white highlight. Bubbles drift slowly upward (24s cycle, 80px Y-axis) and dissolve at the top of the viewport. Bubbles are constant ambient presence. - **Star-celestial motif (motif mandate):** Tiny star icons mark date stamps, section numbers, and the cooperative's seal -- 4-pointed star outlines drawn in 1.2px sage-mineral strokes. Stars subtly twinkle (1.4s opacity cycle). - **Skeleton-loading pattern:** Each text block reveals via a 1.4s horizontal shimmer sweep in terracotta tint. - **Office-leaflet rules:** Horizontal rules are 1px burnt-sienna lines, sometimes paired with a small sage-mineral star at the rule's center. - **Inline still-life image:** Section 3 includes one inline still-life image (a barometric instrument) rendered as a terracotta duotone with a subtle paper-grain overlay. - **Numbered paragraph badges:** Each section's paragraphs are numbered with a small terracotta-warm circular badge (01, 02, 03) -- a y2k-corporate convention. ## Prompts for Implementation **Opening narrative:** Page loads on Sandstone Paper. Over 1.8s, the wordmark "amamya.xyz" types in via frutiger-clean letter reveal (70ms stagger); the briefing subtitle types in mono cadence after a 500ms delay (50ms per character); the star-celestial satellite icon at the upper-right draws on via 1.2s SVG stroke reveal and begins its 1.4s twinkle cycle; the first water-bubble drifts up from the lower-right margin. **Scroll narrative:** As the user scrolls, each section's text block triggers a skeleton-loading shimmer (1.4s horizontal sweep in terracotta tint). Numbered paragraph badges (01, 02, 03) pop-in with a 220ms scale-from-0.8 spring. Water bubbles continue their slow 24s upward drift. Star icons twinkle at 1.4s cycle. The inline still-life image in Section 3 fades-in with a slow 2.0s alpha when entering viewport. **Microinteractions:** - **Paragraph hover:** Paragraph's terracotta badge scales 1.0 to 1.06 with a 280ms ease; the paragraph's text gains a faint sage-mineral underline draw (220ms). - **Forecast entry hover:** Star icon next to the entry twinkles brighter (1.0 to 1.2 scale at 0.6s cycle); date in tabular figures gains a 1px terracotta underline. - **Water bubble hover:** Bubble pauses its drift, scales 1.0 to 1.3 over 400ms, then resumes drift. - **Star icon hover:** Star twinkle accelerates to 0.6s cycle; stroke thickens from 1.2px to 1.6px. - **Section transitions:** Water bubbles drift slightly faster (24s to 18s) during section enter. **Storytelling:** The site is structured as a friendly weather cooperative's briefing leaflet. Section anchors: "Briefing Cover," "Abstract," "Forecast Plate," "Field Notes," "Sign-off." The voice is professional, composed, slightly nostalgic. There are no marketing CTAs. The sign-off ends with "Cooperative respondents may write c/o the harbor post office, Box 14." **Typography motion:** Manrope display reveals letter-by-letter with a 70ms stagger. Body sans cascades-in via skeleton-loading shimmer (1.4s sweep). JetBrains Mono tabular figures type in mono cadence (45ms per character) for forecast entries. **AVOID:** stat-grids, pricing tiers, "subscribe" CTAs, social-proof testimonial blocks, three-up service tiles, generic y2k lime-cyber cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Y2K as quiet office, not party:** The y2k-futurism aesthetic rendered in terracotta-sandstone-sage rather than lime-chrome -- a y2k that grew into a calm cooperative briefing room. 2. **Water bubbles drifting as ambient marginalia:** Small terracotta-fade water droplets drift slowly upward in the right margin (24s cycle) as a continuous quiet ambient -- a water-bubble imagery treatment not present in other designs. 3. **Star-celestial motif twinkling at 1.4s cycle:** Tiny 4-pointed sage-mineral stars mark every date and section, twinkling continuously -- a constellation rhythm beneath the page. 4. **Skeleton-loading shimmer as office printer:** Each text block reveals via a 1.4s horizontal terracotta-tinted shimmer sweep, mimicking a slow office printer. 5. **Cooperative-briefing voice with no CTA:** The site behaves as a quiet briefing leaflet -- no buttons, no marketing, only paragraphs and forecast entries. The sign-off lists only a postal address. **Chosen seed/style:** Planned seed -- aesthetic: y2k-futurism, layout: single-column, typography: frutiger-clean, palette: terracotta-warm, patterns: skeleton-loading, imagery: water-bubbles, motifs: star-celestial, tone: professional. **Avoided patterns from frequency analysis:** Avoided overused photography (91%), minimal imagery (33%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused y2k-futurism aesthetic (2%), water-bubbles imagery, star-celestial motif, terracotta-warm palette, and skeleton-loading pattern with frutiger-clean typography.