Driftly: Ship a startup site your whole team is proud of
Playful illustrated 'sunny sky' startup-website landing page for an AI design agent: cream paper base with a sky-blue + coral duo-tone, rounded Poppins type, a hand-illustrated hero scene (layered SVG hills, floating clouds, sun, tiny rooftop town, founder mascots), sticky blurred nav, two-up feature cards, a numbered 3-step how-it-works band, stats row, a gallery strip, and a deep-sky rounded CTA banner.
Summary
A playful, illustrated 'sunny sky' startup-website landing page for an AI design agent that turns a one-sentence brief into a full site on an infinite canvas. Cream-paper base with a friendly sky-blue + coral palette, rounded Poppins type, and a hand-illustrated hero scene (layered SVG rolling hills, floating clouds, a coral sun, a tiny rooftop town, evergreen trees, two waving founder mascots and a planted flag). Sticky blurred nav, a two-up product-feature row, a numbered 3-step 'how it works' band on white, a 4-up stats row, a 3-up 'made with' gallery strip, a deep-sky rounded CTA banner with floating clouds, and a 4-column footer. Subtle dotted paper grain over everything.
Style
Playful illustrated 'sunny sky' style. Warm cream paper base (#fdf9f3) with a friendly duo-tone of sky blue (#38bdf8 / deep #0ea5e9 / ink #0c4a6e) and coral (#fb7185 / deep #f43f5e), near-black warm ink (#1f2433) for text. All-Poppins rounded geometric sans (weights 400-800, headings extrabold and tightly tracked). Generous soft rounded radii (custom 4xl 2rem and 5xl 2.75rem on cards/CTA, fully-rounded pill buttons), soft warm-tinted layered shadows plus a sky-blue 'glow' shadow on the logo/CTA, a faint radial-dot paper grain over the body, a hand-drawn coral SVG squiggle underline under one hero word, and gentle floating/blink keyframe animations on the illustration. Mood: cheerful, hand-drawn, friendly and reassuring, never corporate or cold.
Layout & Structure
Single-column long-form landing page centered in a max-w-6xl (and tighter max-w-5xl / max-w-3xl) container with px-6 gutters. Top-down order: sticky blurred header nav, a centered hero (eyebrow pill, big headline with a doodle-underlined word, sub-paragraph, two pill CTAs, reassurance line) sitting above a full-width hand-illustrated sky scene (gradient sky band, layered SVG hills, floating clouds, sun, rooftop town, trees, two founder mascots, a planted flag); a centered sub-statement; a two-up feature-card row; a 'how it works' band on white with three numbered step cards and a 4-up stats row; a 'made with' gallery strip (3 project cards); a deep sky-ink rounded CTA banner with floating clouds and a star; and a 4-column footer with a bottom bar. Responsive: nav links hide below md, hero headline scales down and the illustration band shrinks in height, grids collapse (features 2->1, steps 3->1, stats 4->2, gallery 3->2) and CTAs stack on mobile.
Sticky nav
Hero (copy + eyebrow)
Hero illustration scene
Sub-statement
Feature cards
How it works + stats
Gallery strip
CTA banner
Footer
Special Notes
Font loaded from Google Fonts: Poppins (weights 400/500/600/700/800) used for everything as the rounded geometric sans. Styled with Tailwind via the CDN (cdn.tailwindcss.com) using a custom theme: colors cream #fdf9f3, sky {DEFAULT #38bdf8, deep #0ea5e9, ink #0c4a6e}, coral {DEFAULT #fb7185, deep #f43f5e}, ink #1f2433; custom borderRadius 4xl 2rem / 5xl 2.75rem; custom boxShadow soft / softer / glow. Icons via Iconify (code.iconify.design) using the Phosphor 'ph:*' set. html has scroll-behavior:smooth; the body carries the radial-dot 'grain' background. Animations are pure CSS keyframes (floaty, blink). The whole illustration (hills, clouds, town, mascots, flag) is built from divs + inline SVG, no external images. Keep the mood cheerful, hand-drawn, friendly and reassuring; never neon, corporate or cold.