## 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/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074817179-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789073643738.webp
- Design on Kage: https://kage.design/designs/convex-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, and any existing logo or imagery). Wait for their answers before designing. Apply the reference's design language to their product, not to the reference product.

## Page structure
1. **Top navigation** — Use a dark, compact header with a left-aligned wordmark placeholder, grouped product/developer/company links, and small utility pills for ecosystem metrics, login, or account access.
2. **Hero** — Build a dark split layout: oversized two-line condensed headline and short explanatory copy with outlined and filled CTAs on the left; a dark command/setup panel with copyable prompt rows and terminal-like project actions on the right.
3. **Hero accent** — Run thick yellow, red, and purple rounded bands from the lower hero edge, bending upward behind the setup panel to create a recognisable transition into the next section.
4. **Trusted-by row** — Switch to a warm cream background and center a small outlined eyebrow above a wide horizontal row of monochrome customer marks.
5. **Proof / solved section** — Keep the cream background, use a two-column layout with a bold heading, short paragraph, four-row checked problem list, and dark pill CTA on the left; place a pale spreadsheet/grid visualization with sparse colored bars on the right.
6. **Components section** — Change to near-black and add a small outlined eyebrow, a large white heading, and supporting copy. Follow with three dark rounded cards for product modules, each containing a compact label, title, description, and monospace install command; add a row of smaller integration cards and a centered library CTA.
7. **Testimonial section** — Use a muted olive background with a centered eyebrow, large italic serif quote, attribution, and two translucent olive quote cards below in a two-column arrangement.
8. **Founder credibility section** — Use a deep brown-black background with a centered eyebrow and a wide centered heading. Present two founder profile columns with circular portraits, names, roles, and concise credibility biographies.
9. **Enterprise strip** — Insert a short rust-red horizontal band with a centered eyebrow and a compact segmented enterprise/compliance CTA, combining light and dark segments.
10. **Final build CTA** — Return to a dark brown section with a large black grid panel. Add sparse pixel-like geometric accents around the panel, centered heading and italic subheading, a large command/setup panel, and paired outlined/filled CTA buttons.
11. **Footer** — Finish with a dark footer: large wordmark placeholder at left, four link columns grouped by product, developers, company, and social, compliance badges on the right, and a small copyright line along the bottom.

## Design language
- Build hierarchy through contrast and scale: use a very large, tightly set sans-serif headline, compact uppercase eyebrow labels, short body copy, and occasional oversized italic serif quotations.
- Use a restrained editorial palette: near-black brown `#171515`, deep brown `#211719`, warm cream `#F4EBD8`, muted olive `#4A4B38`, rust `#87352E`, and white `#F7F5EF`. Reserve bright yellow `#FFC21A`, red `#F32B35`, and purple `#8D2D8C` for the hero bands and small accents.
- Let rhythm change down the page: make the hero spacious and graphic, use a calm proof section, increase density with component and integration cards, slow the pace for testimonials and biographies, then compress the enterprise strip before expanding into the final CTA and dense footer.
- Pair a heavy condensed or tightly tracked grotesk for headlines with a clean readable sans-serif for body text, labels, navigation, and metadata. Use a high-contrast italic serif only for featured testimonial lines or short editorial subheads.
- Treat borders as visible structure: use thin cream or gray outlines, small outlined all-caps labels, dark inset command panels, and subtle separators. Keep card radii moderate around `10–14px`; use almost no blur or elevation, relying on tonal contrast and inset borders instead.
- Make technical UI feel tactile: terminal commands use monospace text, copy controls, arrow affordances, and layered dark rows. Buttons are compact pills with clear outlined-versus-filled hierarchy.
- Use grids as quiet technical texture in diagrams and the final CTA, with low-contrast lines and sparse rectangular or pixel-like data marks. Keep visual decoration geometric rather than illustrative.
- Keep motion restrained: use quick hover changes in border, fill, and arrow position; allow command rows and cards to lift or brighten slightly, but avoid dramatic parallax or continuous animation. Preserve strong keyboard focus states.

## Never
- Do not reuse the reference's logos, wordmarks, product names, copy, illustrations, photography, portraits, customer marks, or icon sets.
- Do not present the result as Convex or imply an affiliation with Convex.
- Replace all brand-specific material with the user's own name, content, assets, and product-specific examples while preserving the structural and visual principles above.