Want this look?

Build me a complete, responsive business website in the CORPORATE FLAT (modern SaaS) style — the trust-at-first-glance look of Stripe, Notion, and Linear: a clean light ground, one confident accent color used everywhere, a tidy grid with generous whitespace, soft rounded cards, and calm motion. Every choice exists to make an unfamiliar product feel instantly safe. Combine this style seed with my brief below. If I don't give you the details, invent a plausible product that suits this calm, credible look — a project-management SaaS, a fintech dashboard, a developer tool, a B2B analytics platform — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different products. A few dimensions are yours to choose: the exact ACCENT and neutral scale, the TYPE face, and the overall LAYOUT APPROACH. Pick one of each that fits my brand and COMMIT to it across the whole site — every option below is equally on-style, so don't second-guess the choice with your own taste. ── INVARIANTS (never break these — they define the style) ── • ONE trustworthy accent color, reused for every link, button, active state, and highlight — consistency reads as competence. Do not introduce a second competing accent; a single supporting neutral scale carries everything else. • A tidy, aligned grid with generous whitespace — nothing improvised or misaligned. Alignment itself is a credibility signal; padding is calm and even, not cramped. • Soft, rounded cards and surfaces (gentle corner radius) sitting on the light ground, lifted by soft, low-blur shadows — never hard offset shadows, never sharp squared boxes. • Subtle gradient and abstract blob accents that soften the grid's rigidity and add quiet "modern tech" warmth — used lightly behind or beside content, never loud or saturated enough to fight the copy. • Motion is "align / settle": elements fade up gently and snap calmly into their grid position — bars growing, numbers counting up, cards settling. Never glitchy, bouncy, or chaotic. Honor prefers-reduced-motion, and keep ALL content visible without JavaScript — never leave a section stuck invisible. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 for body, ≥3:1 for large/headline text. Choose the ink from each block's ACTUAL background — deep navy or near-black text on white and light-tinted cards; near-white text on the accent-filled buttons and any dark or saturated panel. Muted/secondary text still clears 4.5:1 — "muted" is a step toward the background, not below the line. Never faint grey-on-white that dips under the threshold, and re-check the label on every filled accent button. ── VARIABLES (choose one of each that fits my brand, then commit) ── • PALETTE — bring my own brand color if I give one; otherwise choose a single trustworthy accent. Express it as tone and relationship: a clean light ground (white or a barely-tinted off-white), a slightly cooler or warmer light surface tone for cards, a deep near-black/navy for text, a cool muted grey for secondary text, and ONE saturated-but-composed accent (a confident blue or violet is typical — teal, indigo, or a considered green also work). Keep the accent calm, not neon. Example combos (not required): confident blue accent on white with navy text · violet accent on white with slate text · teal accent on a cool off-white. • TYPE — one friendly, slightly geometric humanist sans, used for both display and body, loaded via Google Fonts. Pick one: Plus Jakarta Sans · Inter · Manrope · DM Sans · Sora. Set headings tight and confident, body relaxed and readable. • LAYOUT APPROACH — choose one structural feel and commit: a centered hero above a "trusted by" logo wall and three-column feature row; a left-aligned hero beside a product visual with alternating feature rows below; a bento grid of feature cards; or a dashboard-preview-led layout with a sidebar rhythm. Also settle on your own hero composition, shadow softness, blob placement, and overall density. ── MEDIA MODEL (product-led, clean and modern) ── Lead with clean product visuals — a placeholder <img> for each planned UI screenshot, dashboard mockup, or app frame, sized generously and set inside a soft rounded card with a gentle shadow. Add real customer/partner logos as a quiet logo wall, and build metric callouts and abstract gradient/blob shapes from code. Generate visuals appropriate to MY product, not a reuse of any demo. Never fake a screenshot with a plain colored div — use a placeholder image where a real UI would go. WHAT THIS SITE MUST ACHIEVE (business goal): Make an unfamiliar product feel safe and credible in the first few seconds; explain plainly who it helps and what it does; back the claim with real proof (metrics, customer logos, testimonials, security/uptime signals — whatever is true for the product); and drive one clear next step — a signup, a demo request, a trial, a sales call. Let the product and its brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY product and goal — whatever sections move a stranger from curiosity to trust to action, each with one clear job, in an order that builds understanding then credibility then conversion. Include working navigation and a footer. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line), proper internal hierarchy, and the full corporate-flat treatment. If a section only serves the style, cut it; if a section serves the goal but feels thin, flesh it out. • Real, tailored copy for MY product — clear, confident, benefit-first, written to reduce a stranger's doubt and explain the value, not filler. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the CONTRAST invariant enforced on EVERY section — especially button labels on filled accent buttons and muted text on light cards. On mobile, stack the grid cleanly while keeping the whitespace, rounded cards, and calm alignment. • Apply the chosen accent, type, and layout approach to EVERY section, not just the hero.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the CORPORATE FLAT (modern SaaS) look — the trust-at-first-glance aesthetic of Stripe, Notion, and Linear: a clean light ground, one confident accent color used everywhere, a tidy grid with generous whitespace, soft rounded cards, and calm motion. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so the whole thing reads as calm and credible. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand color — carry my existing primary brand color in as the single trustworthy accent rather than swapping in a new one. Just push it into the corporate-flat logic: use it for every link, button, active state, and highlight, and demote everything else to a neutral scale (light ground, light card surface, deep navy/near-black text, cool muted grey for secondary text). If I currently use several competing colors, pick the one truest to my brand as the accent and quiet the rest. Then make one TYPE choice and COMMIT — a friendly geometric sans that suits my brand. ── INVARIANTS (never break these) ── • ONE accent color, reused consistently for links, buttons, active states, and highlights — collapse competing accents into a single supporting neutral scale. • A tidy, aligned grid with generous, even whitespace — straighten misaligned elements, open up cramped padding, let alignment carry credibility. • Soft, rounded cards and surfaces lifted by soft low-blur shadows on the light ground — replace hard borders and sharp squared boxes with gentle radius and gentle elevation. • Add subtle gradient/blob accents to soften the grid — light, calm, never saturated enough to fight the copy. Flatten harsh or clashing existing color into this calm scheme. • Motion becomes "align / settle": a gentle fade-up and calm snap into place per section, numbers counting up where they fit. Remove glitchy, bouncy, or jittery motion. Honor prefers-reduced-motion and never leave a section stuck invisible; keep content visible without JavaScript. • Never: hard offset shadows, sharp squared/bordered boxes, multiple competing accent colors, harsh saturated color, chaotic or bouncy motion. ── TYPE (pick one to suit my brand, then commit) ── One friendly, slightly geometric humanist sans for both display and body — Plus Jakarta Sans · Inter · Manrope · DM Sans · Sora — loaded via Google Fonts. Set any existing image inside a soft rounded card with a gentle shadow (never full-bleed harsh edges); replace loud decorative elements with clean gradient/blob accents and metric callouts. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every block (≥4.5:1 body, ≥3:1 large; pick the ink from each block's ACTUAL background: deep navy/near-black on white and light cards, near-white on filled accent buttons and dark panels; never faint grey-on-white, and re-check every button label). Restyle what already exists so every section carries the corporate-flat system consistently — same content, new skin.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the CORPORATE FLAT (modern SaaS) style — the trust-at-first-glance look of Stripe, Notion, and Linear: a clean light ground, one confident accent color, a tidy grid with generous whitespace, soft rounded cards, and calm motion. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — a hero that lands what the product is, a feature grid, a pricing table, a metrics/social-proof band, a testimonial row, a call-to-action. If I don't name one, build a clean hero for a plausible SaaS product you invent that suits this calm, credible style. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy, and depth, not a title plus one thin line. ── INVARIANTS ── • ONE trustworthy accent color for links/buttons/highlights. Tidy aligned grid with generous whitespace. Soft rounded cards lifted by soft low-blur shadows — no hard offset shadows, no sharp squared boxes. Subtle gradient/blob accents softening the grid, never loud. Motion is a gentle fade-up that settles calmly into place; no glitch or bounce; content visible without JavaScript, honoring prefers-reduced-motion. • Never: hard offset shadows, sharp squared/bordered boxes, multiple competing accents, harsh saturated color, chaotic or bouncy motion. ── VARIABLES (pick one of each, commit) ── • PALETTE — bring my brand color if I give one; otherwise choose a single composed accent (a confident blue or violet is typical; teal, indigo, or a considered green also work) on a clean light ground, with deep navy/near-black text and a cool muted grey for secondary text. Keep the accent calm, not neon. • TYPE — one friendly geometric sans (Plus Jakarta Sans · Inter · Manrope · DM Sans · Sora) for both display and body, via Google Fonts. Build the section from clean type, aligned grid, and soft rounded cards. If it genuinely needs an image, use a real placeholder <img> inside a soft rounded card with a gentle shadow — never a fake colored div standing in for a screenshot, never full-bleed harsh edges. Include a clear primary button in the accent color where the section's job calls for one. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): pick the ink from the actual background (deep navy/near-black on white and light cards, near-white on filled accent buttons), never faint grey-on-white, and re-check the button label. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude