aurachat.io

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.

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.