Astryx Matcha demo
Astryx Matcha

An earthy matcha-green design system theme with a natural, sustainable palette and clean Figtree typography for eco-conscious brands.
Category: Nature & Organic
Era: 2020s Modern
Prompt: 17.6 KB · 2420 words
# SYSTEM PROMPT — CODING TASK: BUILD THE "ASTRYX MATCHA" LANDING PAGE

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page in a single first attempt — full HTML, full CSS, and full JS delivered together, with no truncation and no TODOs.

**Objective:** Build the **"Astryx Matcha"** landing page — an earthy, organic matcha-wellness brand site with vibrant green accents over warm neutral surfaces. All user-facing copy must be written in **English**, in a calm, fresh, confident wellness-brand voice. No lorem ipsum.

---

## 0. THEME SPECIFICATION — "ASTRYX MATCHA"

* **Style Name:** Astryx Matcha
* **Style Type:** Earthy green palette with system-first typography and warm neutral surfaces
* **Keywords:** matcha, green, earthy, nature, figtree, wellness, organic, fresh, vibrant, astryx
* **Design Era:** 2026 Meta — generous whitespace, fluid `clamp()` typography, soft elevation, 12px+ rounded organic surfaces, restrained but confident green accents
* **Themes:** Full Light mode **and** Full Dark mode — both mandatory and fully styled
* **Visual Direction:** matcha-green earthy UI, nature/wellness interface, green accent over warm neutral, organic fresh design, health-app aesthetic, sustainable-dashboard cleanliness
* **Palette:** Primary Green `#0D8626`, Bright Green `#0B991F`, Light Green `#24BB5E`; secondary = earthy warm neutrals, cream surfaces, muted olive tones
* **Motion Language:** Transitions use `cubic-bezier(0.24, 1, 0.4, 1)` — fast 175ms (hover/press feedback), medium 410ms (surfaces, disclosures, theme change). Vibrant greens act as **accents over warm neutral backgrounds** — never as low-contrast long-form text.
* **Signature CSS (must be honored via tokens):** `font-family: 'Figtree', sans-serif;` · `border-radius: 12px` · 410ms transitions with `cubic-bezier(0.24, 1, 0.4, 1)` · `--accent: #0D8626` · light background `#F8F5F0` · base text `#1A1A1A`

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* All styling must live exclusively in `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.** No `<style>` blocks.
* Target all design properties, layout rules, and states via **class or ID selectors only**.
* HTML must remain clean, semantic, and styling-agnostic — changing the site's look must require editing only the CSS file, never the markup.

### 1.2 CSS Variables & Theme Tokens
Store every visual token in `:root` (light) and `.dark` (dark). Required light-mode tokens:

```css
:root {
  --accent: #0D8626;            /* alias of --primary */
  --primary: #0D8626;
  --primary-bright: #0B991F;
  --primary-light: #24BB5E;
  --secondary: #6E7C59;         /* muted olive */
  --on-primary: #FEFEFE;        /* text paired ON primary surfaces */
  --bg-primary: #F8F5F0;        /* warm cream page background — never #ffffff */
  --bg-secondary: #FEFEFE;      /* card surfaces */
  --bg-alt: #F1EDE3;           /* alternating section band */
  --bg-tint: rgba(13, 134, 38, 0.08); /* green wash for chips/badges */
  --text-primary: #1A1A1A;
  --text-secondary: #55524A;    /* warm gray */
  --text-success: #0B991F;
  --text-error: #B3261E;
  --border-default: #E3DDCE;
  --border-error: #B3261E;
  --border-success: #0D8626;
  --focus-ring: rgba(13, 134, 38, 0.45);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.10);
  --spacing-gap: 1rem;
  --transition-fast: 175ms;
  --transition-normal: 410ms;
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
  --z-dropdown: 100; --z-modal: 400; --z-toast: 600;
  --font-base: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --header-height: 64px;
}
```

Required dark-mode overrides under `:root.dark` (or `.dark` applied to `<html>`):

```css
--accent: #24BB5E; --primary: #24BB5E; --primary-light: #4AD57C;
--secondary: #9AA47E;
--on-primary: #0F130D;          /* dark text on green — pairing FLIPS in dark mode */
--bg-primary: #131711; --bg-secondary: #1C2117; --bg-alt: #171C14;
--bg-tint: rgba(36, 187, 94, 0.12);
--text-primary: #F2EFE6; --text-secondary: #B7B3A4;
--text-success: #24BB5E; --text-error: #FFB4AB;
--border-default: #2B3123; --border-error: #FFB4AB; --border-success: #24BB5E;
--focus-ring: rgba(36, 187, 94, 0.50);
/* shadows: deepen/soften for dark surfaces */
```

* **Contrast pairing is mandatory in every theme:** light background token ↔ dark text token; dark background token ↔ light text token. Text on primary-green surfaces uses `--on-primary` (light in Light mode, dark in Dark mode). Verify ≥ 4.5:1 for body text and ≥ 3:1 for large text/UI components in **both** themes.
* Green tokens are reserved for **accents**: buttons, icons, badges, numerals, borders, highlights — not for long body copy on cream.

### 1.3 Mandatory Dark Mode Support
* Dark tokens must live under a `.dark` class on the `<html>` element; theme switching must swap variables seamlessly with **no HTML restructuring** (apply a `transition: background-color var(--transition-normal) var(--ease-standard)` cross-fade on `body` and major surfaces).
* **Persistence:** `script.js` reads `localStorage` (e.g., key `astryx-theme`) on load; on first visit fall back to `matchMedia('(prefers-color-scheme: dark)')`.
* **Visible toggle control** in the header: Material Symbols `light_mode` / `dark_mode` icon button with correct `aria-pressed` state and dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with **Flexbox**.
* Every flex container **must default to `align-items: center`** unless there is a documented exception (e.g., text-left card bodies may use `align-items: flex-start`, with a CSS comment justifying it).
* Mobile-first: all flex rows must convert to columns on small viewports; **zero horizontal scrolling** at any width from 320px up.

### 1.5 CSS Approach
* Use clean, hand-written custom CSS driven entirely by the tokens above (no framework CDN needed for this static build). If Tailwind is used instead, every utility must map 1:1 back to these CSS variables. Reusable generic classes required: `.btn`, `.card`, `.input`, `.container`, `.section`.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load **Figtree** (weights 400;500;600;700;800) from Google Fonts via `<link>` with `preconnect`; bind to `--font-base` (the system-ui fallback stack delivers the system-first feel).
* **Type scale (fluid):** `h1` `clamp(2.5rem, 5.5vw + 1rem, 4.25rem)` weight 800, line-height 1.05, letter-spacing −0.02em; `h2` `clamp(1.875rem, 3vw + 0.5rem, 2.75rem)` weight 700; `h3` 1.25–1.5rem weight 600; body 1–1.125rem line-height 1.6; meta/small 0.875rem.
* **Icons:** Use **Google Material Symbols (Rounded)** loaded from Google Fonts. Suggested valid names: `eco`, `spa`, `bolt`, `energy_savings_leaf`, `schedule`, `timer`, `verified`, `check`, `check_circle`, `star`, `expand_more`, `menu`, `close`, `arrow_forward`, `mail`, `error`, `progress`, `light_mode`, `dark_mode`, `workspace_premium`, `local_shipping`. **Raw inline SVGs and local icon files are explicitly forbidden.** Decorative icons get `aria-hidden="true"`; icons conveying meaning need adjacent text or an accessible name.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--outline`)
All states via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target **44×44px**, `border-radius: var(--radius-md)`, weight 600. Primary = `--primary` bg + `--on-primary` text; outline = transparent bg + `--border-default` + `--text-primary`.
* **Hover:** brightness or shadow shift, `cursor: pointer`, `transition: var(--transition-fast) var(--ease-standard)`.
* **Focus:** distinct `:focus-visible` ring via `--focus-ring` (`box-shadow: 0 0 0 3px var(--focus-ring)`) — never remove focus indication.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** disables pointer events, prevents double-clicks, renders a CSS spinner (border-based circle) or animated `progress` Material icon **without changing button dimensions**.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error (`.is-success` / `.is-error`):** temporary feedback states driven by `--text-success` / `--text-error` plus matching border tokens — demonstrated on the Final CTA submit flow.

### 2.2 Card Component (`.card`)
Used by Features, Testimonials, Pricing, and How-It-Works steps:
* **Default:** flex column layout, `--bg-secondary` surface, 1px `--border-default`, `border-radius: var(--radius-lg)`, `--shadow-sm`.
* **Hover (interactive cards only):** elevation shift plus `transform: translateY(-2px)`.
* **Focus-within:** border color transitions to `--primary` when a child link/button receives focus.
* **Skeleton:** define a reusable `.skeleton` shimmer animation utility class in CSS (not required in markup — no async loading in this build).
* **Empty state:** not required (static content), but do not invent fake loading content.

### 2.3 Form & Input Component (Final CTA email capture)
* **Structure:** flex container wrapping `<label>`, `<input type="email">`, and a dedicated error/success feedback element.
* **States (all via classes):** empty; focused (outline ring using `--focus-ring`); filled; **valid** `.is-valid` (success border + trailing `check` icon); **invalid** `.is-invalid` (error border, error icon, error text in `--text-error`); disabled; read-only. Input min-height 44px, `--bg-secondary` surface, `--radius-md`.
* **A11y:** error message linked via `aria-describedby`; feedback container has `aria-live="polite"`; **never rely on color alone** — always pair color with an icon and text.
* **JS behavior:** validate a simple email pattern on submit → invalid shows `.is-invalid` + message; valid triggers the button's loading → success cycle (Section 2.1), announced via the live region.

### 2.4 FAQ Accordion (interactive disclosure — no modals required in this build)
* **Pattern:** `<h3>` wrapping a `<button class="faq__trigger" aria-expanded="false" aria-controls="faq-panel-N">`; panel `<div id="faq-panel-N">`. Minimum 44px trigger height; native Enter/Space key operation.
* **Animation:** CSS-only smooth open/close using the `display: grid; grid-template-rows: 0fr → 1fr` technique, transitioned with `var(--transition-normal) var(--ease-standard)`.
* **Feedback:** `expand_more` icon rotates 180° when open; JS toggles and re-asserts `aria-expanded`. Choose either single-open or multi-open behavior and implement it consistently and accessibly.
* Do not add modals, popups, or any other unrequested overlay components.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` sizing, breakpoints around 640px/960px, no horizontal overflow, hamburger nav below 768px.
* **Smooth motion:** every state change transitions with `var(--transition-fast)` (hover/press) or `var(--transition-normal)` (surfaces, accordion, theme cross-fade), always with `var(--ease-standard)`. Transition explicit properties (`color, background-color, border-color, box-shadow, transform`) rather than `all`. Fully respect `prefers-reduced-motion: reduce` — disable transforms, reveals, and smooth scrolling.
* **Accessibility (a11y):** AA contrast in both themes; semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); exactly one `h1` (Hero) and one `h2` per section; logical DOM/focus order; full keyboard operability for nav menu, theme toggle, accordion, and form; visible focus everywhere; `aria-live` regions for form feedback and CTA success. Never communicate state by color alone.
* **Mandatory visual feedback:** every hover, click, and submission triggers a visible state change.
* **Destructive actions:** none exist in this build; no `.btn--danger` usage is required.
* **Scroll behavior:** `scroll-behavior: smooth` plus `scroll-padding-top: var(--header-height)` on `html`, wrapped in `@media (prefers-reduced-motion: no-preference)`; all nav links are in-page anchors.
* **Scroll reveal (optional):** IntersectionObserver adds an `.is-visible` class — subtle 12–16px translate + opacity fade, once per element. **Content must be fully visible without JS** (progressive enhancement only).

---

## 4. REQUIRED PAGE STRUCTURE — SECTION-BY-SECTION SPEC

Write original, polished English copy throughout (copy angles below are directional; produce real finished copy in that spirit). Reuse one consistent section-header pattern: small green-tinted eyebrow chip + `h2` + one supporting sentence.

### 4.0 Sticky Header
* Wordmark "Astryx Matcha" + `eco` icon; anchor nav: Features, How It Works, Testimonials, Pricing, FAQ; theme toggle (per 1.3); compact "Get Started" primary button → `#pricing`.
* Mobile: hamburger button (`aria-expanded`, `aria-controls`) toggling a flex-column panel; closes on `Esc` and on link click. Solid `--bg-primary` bar + bottom border; optional backdrop blur.

### 4.1 Hero
* Two-column flex on desktop (copy left, visual right), stacked and centered on mobile.
* Eyebrow chip (green tint bg, e.g., "2026 First Harvest — Now Available"); fluid `h1` promising calm, steady energy; 1–2 sentence subhead; two CTAs — primary "Start Your Ritual" → `#pricing`, outline "See How It Works" → `#how-it-works`.
* Social proof row: 5× `star` icons (`aria-hidden`) + short trust line, with an `aria-label` such as "Rated 4.9 out of 5".
* Visual: a **pure-CSS composition** — layered rounded panel with a green gradient wash and floating mini stat-chips using Material icons (e.g., "80mg natural caffeine", "L-theanine rich"); soft shadows. Do **not** add placeholder images.

### 4.2 Features — 3 Cards (`#features`)
* Exactly 3 cards, flex row → column on mobile; each: icon in a green-tint circle, `h3` title, 2–3 sentence body, "Learn more" link (focus-within highlight per 2.2).
* Angles: (1) clean, steady energy without the crash; (2) ceremonial-grade, organic single-origin sourcing; (3) a 90-second ritual made simple.

### 4.3 How It Works — 3 Steps (`#how-it-works`)
* Row on desktop with Material `arrow_forward` separators (hidden on mobile); column on mobile.
* Each step: numbered green badge (01/02/03) + optional icon + `h3` + short copy. Angles: choose your blend → whisk in 90 seconds → enjoy calm focus all day.

### 4.4 Testimonials (`#testimonials`)
* 3 cards, flex row → column; each: `figure > blockquote` (1–2 sentences), 5-star row with accessible rating label, avatar circle (initials on olive/green tint), `figcaption` name + role. Real-sounding personas (e.g., yoga instructor, startup founder, nutritionist).

### 4.5 Pricing — 3 Tiers (`#pricing`)
* 3 tiers: Starter / **Ritual (featured)** / Connoisseur. Featured tier gets a "Most Popular" chip and a distinct green treatment (e.g., primary border + tinted background, or inverted green surface with `--on-primary` text) that passes AA contrast in **both** themes and is slightly elevated.
* Each card: tier name, price + "/month", short blurb, feature list with `check` icons, CTA (primary on featured, outline elsewhere). Add a small "billed monthly, cancel anytime" note.

### 4.6 FAQ (`#faq`)
* 5–6 items per spec 2.4, covering: sourcing/quality, caffeine vs. coffee, preparation time/equipment, taste profile, shipping, and the guarantee/refund policy.

### 4.7 Final CTA (`#cta`)
* Full-width band with a theme-aware green surface (tinted or bold primary with paired `--on-primary` text); `h2` + one supporting sentence + email capture form per 2.3.
* Submit flow demonstrates the full button lifecycle: loading (spinner, interactions blocked) → success state with check icon, e.g., "Welcome to the ritual — check your inbox.", announced via `aria-live`.
* Form layout: input grows + fixed button in a row on desktop; stacked column on mobile.

### 4.8 Footer — Secondary Links (`#footer`)
* Top row: brand block (wordmark + tagline + `eco` icon) plus three link columns: **Product** (Features, Pricing, FAQ — real in-page anchors), **Company** (About, Journal, Contact), **Support** (Help Center, Shipping, Privacy, Terms).
* For destinations that do not exist in this single-page build, `href="#"` placeholders are acceptable (content was genuinely unspecified) — but any section that exists must use its real anchor.
* Bottom bar: "© 2026 Astryx Matcha. All rights reserved." + small legal links. All footer links receive `:focus-visible` styling; none trigger JS.

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. Only one script reference: `<script src="script.js" defer></script>`. No inline scripts, no inline styles, no `<style>` blocks.
* **Naming convention:** BEM throughout (`block__element--modifier`), e.g., `.hero__title`, `.btn--primary`, `.features__grid`, `.pricing-card--featured`, `.faq__trigger`. Never mix conventions.
* **JS scope:** theme toggle + `localStorage` persistence, mobile menu, accordion, email form validation + loading/success feedback, optional scroll reveal. No libraries, no build step — the page must work by opening `index.html` directly.
* **External assets:** Google Fonts only (Figtree + Material Symbols Rounded). No other CDNs, no local icon files, no inline SVGs.
* **Completeness:** deliver the entire page on the first attempt — all 8 sections plus header and footer, all component states, both themes, fully functional. No truncated files.
* **Self-check before finishing:** zero `style=` attributes; both themes toggle and persist; no horizontal scroll at 320px; every hover/click/submit shows visible feedback; a keyboard-only pass works end to end; Material icon names are valid; AA contrast holds in Light and Dark modes.