# aurachat.io

Source: https://aurachat.io/
Captured: 2026-09-20
Tags: saas, landing, light, both, minimal, swiss, calm, confident, technical, elegant
Colors: #fefefe, #202c2a, #a4aab2, #ced2d8, #676d6b, #4c5146, #899092, #0b1314
Type (h1): Inter · 60px/60px · 500 · tracking -3px — "Createbeautifuldesigns"
Type (h2): Inter · 18px/28px · 500 · tracking -0.45px — "Recently Featured"
Type (h3): Inter · 10px/20px · 100 · tracking -0.3px — "PRODUCT"
Type (body): Inter · 18px/28px · 100 · tracking -0.16px — "Generatetop-tierlandingpagesinseconds.Watch video."
Type (small): Inter · 12px/16px · 500 · tracking -0.16px — "Introducing Gemini 3.1, the most creative model"
Type (button): Inter · 12px/16px · 400 · tracking -0.16px — "CREATE"
Button: "Design System" — fill #ffffff, text #171717, radius 8px, border 1px, padding 4px 8px, height 25px, type 10px/400
Radii: 12px (43), 9999px (20), 8px (12), 6px (8)

## Images

- Hero (desktop): https://media.lvly.design/library/aurachat-io/hero.webp?v=115261ea
- Page crop (mid-1): https://media.lvly.design/library/aurachat-io/mid-1.webp?v=3953528e
- Page crop (mid-2): https://media.lvly.design/library/aurachat-io/mid-2.webp?v=17bf1e42
- Hero (mobile): https://media.lvly.design/library/aurachat-io/mobile-hero.webp?v=b7d80d49
- Full page (desktop): https://media.lvly.design/library/aurachat-io/full.jpg?v=f7f62370
- Full page (mobile): https://media.lvly.design/library/aurachat-io/mobile-full.jpg?v=e829ce4f
- Clip preview (mp4): https://media.lvly.design/library/aurachat-io/video-och508.preview.mp4?v=c62de343

An almost colorless page that gets all of its character from typography and a ruled grid. The hero is a near-white field (#fefefe over #ffffff) scored with faint hairlines — two vertical rules cutting in at roughly the 27% and 73% marks, plus horizontal bands — so the headline sits inside a visible measuring frame rather than floating in empty space. The type does the rest: a 60px Inter at weight 500 with -3px tracking, so tight the letterforms nearly touch, set directly above 18px Inter at weight **100**, a hairline thin that most sites never reach for. That five-step weight gap is the whole voice. Instead of a button, the hero's call to action is the product itself — a white 12px-radius composer card with a ghosted prompt, a row of pill chips for the design system, the model picker and the attachments, and a circular send button in the corner. Below the fold the page turns into a gallery: four identical section blocks, each a small left-aligned heading paired with a ghost "Browse →" pill on the right, then a three-up row of template cards whose thumbnails sit matted on a ground color pulled from the artwork itself, so the riot of color in the screenshots reads as content on a page that has none of its own. The near-black ink is not black but #202c2a, a slate green, and #0b1314 under it — a warmth that only shows when you sample it.

## Steal-worthy details

- Graph-paper lattice behind the hero — hairline rules at roughly 27% and 73% of the width plus horizontal bands, drawn in the faintest gray (near #ced2d8 at low opacity) over a #fefefe ground, so the hero has structure without a single filled box
- Headline at 60px/60px, weight **500**, letter-spacing **-3px** (-0.05em) — a medium weight, not bold, squeezed until the counters nearly close; the tightness reads as confidence where a 700 would read as shouting
- Subhead in Inter **weight 100** at 18px/28px, -0.16px — a true hairline paired with the medium headline; the contrast is carried by weight alone, since both lines are the same family and the same near-black
- The product replaces the CTA button: a 640px-wide white card, 12px radius, 1px hairline border and a soft ambient shadow, holding a ghosted prompt line and a toolbar of 25px-tall pill chips (10–12px/400 labels, 8px radius, 4px 8px padding) with a circular send affordance in the trailing corner
- Theme control as a three-state segmented pill — sun, monitor, moon in a 9999px-radius track with the active cell raised on white — and the same control repeated verbatim in the footer's copyright row
- One section header shape reused four times: an 18px/500 heading flush left against a right-aligned ghost pill that names the destination and ends in a → ("Browse Featured", "Browse Free Templates", "Browse Pro Templates", "Browse Paid Templates") — identical geometry every time, so the page scans as a rhythm
- Card anatomy in three fixed rows: a thumbnail matted on a ground color sampled from the artwork (deep green, orange, periwinkle), then a title line with a PRO badge or a price flush right, then a meta line of 20px avatar, author name, a remix glyph and an eye-and-count — the colored matting is what lets a monochrome page host wildly colorful content
- A four-value radius scale and nothing else: 12px for every card and panel (43 uses), 9999px for pills and toggles (20), 8px for chips and buttons (12), 6px for the smallest badges (8) — no arbitrary in-between values anywhere

## Style recipe

Build on near-white, not white: page ground #fefefe with cards and panels in pure #ffffff so raised surfaces read by value alone, and ink in a slate green — #202c2a for body copy, #0b1314 for headings — never pure black. Grays step #899092 → #a4aab2 → #ced2d8 for meta text, icons and hairlines. Use no accent hue at all; let imagery supply every color on the page.

Score the top of the page with a hairline lattice: two vertical rules at ~27% and ~73% of the viewport width and two or three horizontal rules banding the hero, all 1px in #ced2d8 at 40–60% opacity. The lattice stops where the content grid starts.

Set everything in Inter and get the contrast from weight, not size. Display: 60px/60px, weight 500, letter-spacing -3px. Section heading: 18px/28px, weight 500, -0.45px. Eyebrow and column label: 10px/20px, weight 100, -0.3px, uppercase, wide-tracked. Body and subhead: 18px/28px, **weight 100**, -0.16px. Small print and badges: 12px/16px, weight 500. Buttons: 12px/16px, weight 400, sentence case. The move to keep is the medium-over-thin pairing — a 500 display above a 100 paragraph.

Radii: 12px for cards and panels, 8px for buttons and chips, 6px for badges, 9999px for toggles and announcement pills. Borders are 1px hairlines in the lightest gray; shadows are one soft ambient blur under floating input surfaces and nothing else. Buttons are white-filled with a hairline border and dark label, 24–28px tall, 4px 8px padding — ghost by default, never filled with a brand color.

Rhythm: a 1080px content column inside a full-bleed ruled field, sections separated by 96–120px of air and a full-width hairline. Repeat one section header — heading flush left, ghost pill with a trailing → flush right — for every block; identical geometry each time is the point.

If the product has an interface, make that interface the hero's call to action instead of a button: a wide white card with a ghosted placeholder, a single row of small pill chips for its options, and one circular submit in the trailing corner. When hosting colorful imagery, mat each thumbnail on a ground color sampled from the image so the page itself stays neutral. Motion is restrained — 150–200ms opacity and 1px lifts on hover, no transforms on the headline.