Style: Mono AI SaaS (v1)

Direction

Calm and expensive, slightly futuristic. A near-monochrome page in warm off-white and near-black type, where one vermilion accent marks every action and photoreal or 3D imagery carries the drama. Think of an AI product launch page with confident headlines, lots of air, and a few live widgets that show the product working right now. Keep everything restrained except the hero image.

Assets (mandatory)

All photography, portraits, 3D objects, and landscapes come from the provided files in assets/. Never draw people, objects, or scenery with SVG or CSS. Code draws only UI: cards, widgets, charts, dashboards, icons for controls, badges.

Tokens

Color

Rules: vermilion is the only saturated color on the page apart from icon-tile tints and the imagery. One vermilion moment per component (a button's arrow circle, a card's border, a delta), never several in one card. The single exception is the featured pricing card, which may combine its border, top tab, plan name, and arrow button.

Type

• One family: "Geist" (Google Fonts), weights 400, 500, 600.
• Headlines: 500 weight, letter-spacing -0.035em, line-height 1.02. Hero 72px, section 52px, card titles 20px/600.
• Body 17px/1.55 in ink or ink-muted. Labels 12px/500, uppercase, letter-spacing 0.06em.
• Numbers (stats, prices, dashboard): Geist 600, tabular figures.
• Scale (px): 12 · 14 · 15 · 17 · 20 · 24 · 32 · 44 · 52 · 72.

Shape and depth

• Radius: 10 (icon tiles, small chips), 16 (cards, widgets), 24 (large panels, dashboard frame, CTA band), 999 (pills, buttons).
• Borders: 1px line on every card. Featured card: 2px vermilion border.
• Shadow (only on floating widgets and the dashboard mockup): 0 1px 2px rgba(20,20,20,.04), 0 16px 40px -12px rgba(20,20,20,.14). Flat cards have no shadow.
• Spacing (px): 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 · 112 · 160. Sections are separated by 112 to 160px.
• Max content width 1200px; desktop side margin 48px; mobile 20px.

Signature patterns

1. Two-part badge: a pill with a small vermilion-600 segment in white caps ("NEW", "PRO", "WHY") followed by a label in ink-hint uppercase on sunken. Sits above section headlines. One per section.
2. Arrow button: ink pill, white 15px/500 text, and a 32px vermilion circle with a white → arrow inside the right end. Secondary: white pill with 1px line border, ink text, no arrow circle.
3. Ethereal hero: the hero image (a portrait or object dissolving into smoke/particles, on a canvas-colored background) sits center or right, its edges fading into the page with a radial mask. Headline on the left; live widgets float on the right.
4. Live widgets: white floating cards (16px radius, shadow) that show the product working: a rotating "I can…" task list, a stat with a delta, a short chat exchange. Each animates subtly (see Motion).
5. Product frame: a large dashboard mockup built in HTML (not an image), 24px radius, shadow, bleeding off the right edge of the viewport on desktop.
6. Object cards: cards with a 3D object image on a soft sunken panel, title and one line below, "Learn more" + small arrow at the bottom.
7. Stat trio: three big numbers (44px/600) with ink-hint captions, separated by hairlines.

Section rhythm

Hero → integrations strip → features (badge + centered 52px headline + 4 icon cards) → product frame → object cards → proof (story card + stat trio) → pricing → dark CTA band → footer. Alternate centered and left-aligned section heads; never three centered sections in a row.

Motion

• Easing cubic-bezier(0.22, 1, 0.36, 1). Section reveal: fade + 12px rise, 600ms, stagger 60ms.
• Rotating task list: items scroll upward one row every 2.2s; the active item is ink, items above and below fade to ink-hint and then to 0 opacity via a vertical mask. Pauses on hover.
• Stat counters count up once when they enter the viewport (800ms).
• Living hero (ethereal image): the still image never sits dead. Two layers, both pure code:
  1. Breathing: the image scales 1 → 1.015 and back over 7s, ease-in-out, infinite.
  2. Particle drift: a <canvas> over the image (same box, pointer-events: none) emits 90 to 140 particles from the image's dissolve region (given per item), drifting away from the subject at 6 to 16 px/s with a slight sine wobble, radius 0.6 to 2.2 px, color ink-muted at 15 to 45% alpha with ~15% of them silver #A6A6A1, fading in over 0.6s and out before they leave the masked area. Cap devicePixelRatio at 2, use requestAnimationFrame, and pause when the hero is off-screen (IntersectionObserver) or the tab is hidden. Optional on pointer devices: the image follows the pointer by at most 6px (lerp 0.06). With reduced motion: no breathing, no canvas, no parallax. Prefer this over a generated video: video tools tend to 'repair' a dissolve effect back into an ordinary person within a second, and a code layer ships with the prompt.
• Chat bubbles in the CTA appear one by one (fade + 8px rise, 450ms apart), with a 3-dot typing indicator before each reply.
• Everything must be fully visible and static when prefers-reduced-motion: reduce is set; above-the-fold content must be visible within 1s of load without scrolling. Implementation: reveal observers use threshold: 0 with no negative bottom rootMargin, and anything already inside the viewport on load is revealed immediately.

Copy voice

Direct, outcome-first, a little bold. Short headlines that pair a claim with proof ("Closes the books while you sleep."). Specific numbers over adjectives.

Never

• Gradient backgrounds, purple/blue glow, glassmorphism, neon, blur behind cards
• Inter, Roboto, Arial, or system fonts as the visible font
• Vermilion text below 18px (use vermilion-text), or vermilion used decoratively where nothing is clickable or meaningful
• More than one accent color; colorful icons outside the tinted icon tiles
• Emoji
• Real company logos or names, or fake "Trusted by 8,000+" claims; integrations strips use the fictional product's own named connectors or generic tool names
• Photos or 3D images with visible hard edges against the canvas; every image on canvas must fade or sit inside a card
• Hand-coded SVG/CSS illustrations of people, objects, or scenery
• Phrases like "unlock", "supercharge", "seamless", "revolutionize", "next level", "empower"