Kage Design logo kage
desertant.com
Desert Ant Labs · Landing page · Minimal · Editorial · Retro screenshot

Design analysis

A warm cream editorial landing page where an enormous tight grotesque headline (first line distressed with a spray-paint texture) sits over tiny monospace body copy — the size contrast is the whole hierarchy. Colour is withheld until a full-bleed carousel of slightly rotated, duotone-pastel model cards, after which the page settles into a dense three-column grid of flat beige model cards with mono uppercase tag pills, a punchy free-tier CTA with pill buttons, and a six-column mono-labelled footer. Rhythm alternates airy statements with dense card clusters down the page, and beta models are signalled by greyed-out text plus small Beta badges in both grid and footer.

Prompt preview
## 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/desert-ant-labs/9afde706-8b4f-4c5f-a9d8-7a634f78e07d-1789106538010-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/desert-ant-labs/9afde706-8b4f-4c5f-a9d8-7a634f78e07d-1789106536160.webp
- Design on Kage: https://kage.design/designs/desert-ant-labs-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, logo). Wait for the answers before writing any code. Everything below is a design language to apply to *their* product, not a page to copy.

## Page structure
1. **Top nav** — thin bar on the page background: small glyph logo + bold wordmark left; 4–5 plain text links right, one with a dropdown chevron; no buttons, no border, no background.
2. **Hero** — left-aligned, two-line oversized display headline filling most of the viewport width (line 1 can carry a distressed/glitch texture treatment, line 2 clean); one short monospace sentence below; generous top and bottom padding, nothing else in the section.
3. **Product showcase carousel** — full-bleed horizontal row of large rounded cards, each slightly rotated (±2–6°) like a spread deck, with the first and last cards bleeding off the page edges. Each card: full-bleed duotone photographic or 3D imagery, a mono uppercase category tag in the top-right, a bold product name and one-line monospace benefit, and one handwritten-script accent inside the imagery. This is the page's only colour moment.
4. **Statement section** — left-aligned two-line display heading stating the company thesis, followed by a 2–3 line monospace paragraph; wide margins, maximum whitespace.
5. **Model/feature grid** — three-column grid of flat beige cards, each with a bold name, a one-line monospace description, and a mono uppercase tag pill; the last row is three muted, greyed-out cards with small "Beta" pills top-right. 12–15 items total, compact vertical padding between rows.
6. **Free-tier CTA** — two-line display heading in short declarative sentences, two short monospace paragraphs of pricing terms, then a button row: one solid ink-black pill primary plus two 1px outlined pills.
7. **Footer** — hairline rule on top; logo row; six link columns with mono uppercase column headers (company/platform/social plus product categories), plain sans links, "BETA" mono suffixes on unreleased items; bottom bar with a tiny monospace legal/pricing line left and a language selector right.

## Design language
- **Palette**: warm paper cream `#F7F5EE` page background, near-black ink `#17170F` for text and solid buttons, beige panels `#ECE9DF` for grid cards, hairlines `#D8D4C6`. Saturated colour appears only inside media cards as muted duotones — deep teal `#3E6B6B`, mauve `#C08B99`, sage `#B9C4A9`, burnt orange `#E8642C`. Never tint the page chrome; the cream stays constant top to bottom.
- **Type pairing and scale**: one heavy tight-tracking grotesque for display only (hero ~90–120px, section headings ~40–48px, always lowercase-first statements) and one monospace for everything small — body copy, card descriptions, tags, buttons, footer headers (13–14px body, 10–11px uppercase tags with ~8% letter-spacing). There is almost no mid-size type; hierarchy is enormous-vs-tiny.
- **Density rhythm**: airy hero → full-bleed colour carousel → airy statement → dense card grid → airy CTA → dense footer. Alternate breathing room and density instead of padding every section equally.
- **Cards and surfaces**: 14–16px radius, flat fills, no shadows, no borders on grid cards — the beige fill itself separates them from the cream page. Showcase cards separate through imagery and rotation instead.
- **Pills and states**: fully rounded tags with a 1px border or slightly darker fill for categories; a small light pill for "Beta", always paired with greyed-out card text; the same Beta signal repeats as mono suffixes in the footer.
- **Buttons**: fully rounded pills, generous horizontal padding; exactly one solid black primary per group, all others 1px outlined with transparent fill; no drop shadows.
- **Motion**: subtle — showcase cards straighten or lift ~2–4px on hover, carousel is draggable; transitions ≤200ms ease-out; no gradients, glows, or parallax.
- **Footer voice**: mono uppercase headers, hairline separators, and a tiny mono terms line — the footer is a sitemap, not a marketing surface.

## Never
- No logos, wordmarks, product or model names, copy, photography, illustrations, or icon sets from the reference; never present the result as that product.

Components from this page

All components

Related designs