## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/moji/682da163-2f11-4698-8415-78d5458fc05f-1789192951631-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/moji/682da163-2f11-4698-8415-78d5458fc05f-1789192947115.webp
- Design on Kage: https://kage.design/designs/moji-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type). Wait for the answers; everything below is applied to their product, not to the reference site.

## Page structure
1. **Nav bar**: small wordmark left; centred anchor links (Story, Features, Gallery, Download); language selector + GitHub icon right. Slim, transparent over the hero.
2. **Hero (light, 2 columns)**: left column has an eyebrow badge (small red seal icon + uppercase label), a very large serif headline with a red brushstroke underline on the key phrase, a short paragraph, two buttons (solid dark primary "Download", outlined secondary "View on GitHub"), and a version/licence meta line. Right column shows a large dark app-window screenshot with small floating pill labels ("Live preview").
3. **Capability strip**: four columns separated by hairlines, each a term (PDF / HTML / PNG / Mermaid) with a tiny uppercase descriptor beneath — a quiet, text-only interlude after the hero.
4. **Story section (near-black)**: left is a large card with an oversized kanji glyph; right has a red seal badge + eyebrow, big serif statement headline, two paragraphs, and a quote block with a red left border. Long, airy, dark.
5. **Features section (light)**: eyebrow + serif headline + one-line intro, then a 3×2 grid of bordered cards. Each card: small icon top-left, faint large kanji numeral watermark top-right, serif card title, grey body. One card inverted (dark) for accent.
6. **Showcase section (near-black)**: serif headline + subline, then a large app screenshot with caption bar, followed by two smaller side-by-side screenshots with labelled captions. Caption row: serif title left, grey note right.
7. **Diagram feature (light, 2 columns)**: tilted/stacked screenshots left, right column has eyebrow badge, serif headline, paragraph and a red-check bullet list.
8. **Download section (light beige, centred)**: eyebrow, big centred serif headline, subline, then three platform cards (Windows/macOS/Linux) with icons, description and dark download buttons; one card carries a red "Recommended" tag. Licence note below.
9. **Open-source CTA (dark rounded panel)**: seal icon, serif headline, one paragraph, light "Open repository" button on the right.
10. **Footer**: minimal — wordmark + tagline left, MIT credit centre, scroll-to-top circle right.

## Design language
- **Palette**: warm paper base `#f2ede6`/`#e9e4dc`, near-black `#141414` for dark bands, text dark grey `#2a2a2a`, muted grey `#8a857e`, single crimson accent `#c0392b`-ish used only for seal stamps, underlines, check marks, one tag and the primary underline. No gradients except very subtle dark-surface texture.
- **Type**: a serif (e.g. a Georgia/Playfair-class face) for all headlines and card titles at very large sizes (hero ~72–90px, section heads ~44–56px); a small sans for body, labels and buttons. Eyebrows are 11–12px uppercase with wide letter-spacing, always paired with a tiny red seal-stamp square containing a kanji or glyph.
- **Rhythm**: alternate light/dark full-width bands to reset attention every 2–3 sections. Keep one idea per band. Density rises only in grids (features, downloads); everything else is generous vertical padding (~120px).
- **Cards**: white or dark surfaces, 1px hairline borders, small radius (~8–12px), no heavy shadows; the dark feature card is the single inversion accent. Faint oversized numerals/glyphs as watermarks give texture without noise.
- **Buttons**: solid near-black rounded rect for primary with small icon, hairline-outlined transparent for secondary; large touch-friendly padding, no gradients.
- **Screenshots**: dark app windows with rounded corners on dark bands, slight tilt/stack only where showing multiple views; small floating pill labels and caption bars ("Title — note") anchor each image.
- **Motion**: minimal; hover states on cards/buttons, smooth-scroll anchor nav, occasional scroll-to-top control.
- **Motif**: use a consistent cultural/brand glyph system (kanji here, or the client's equivalent) across eyebrows, watermarks and seal badges — it is the page's identity glue.

## Never
Do not reuse Moji's name, logo, kanji seal set, copy, or its app screenshots. Do not copy the exact "Open Markdown files like PDFs" wording. Never present the result as Moji.