A full-width scrapbook profile page: die-cut character stickers, a frosted quote card, a street-sign scene with speech bubbles, a stat bar and a photo card, with a working theme toggle.
## Goal Design a friendship profile page for Otter & Owl, a social app for best-friend duos. Keep the tone playful, warm and a little chaotic. Use the style, layout, image and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same sections, the same number of items in each, and similar text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. The page is a playful sticker-scrapbook: soft cream and sage panels with big rounded corners, die-cut character stickers with white outlines, speech bubbles and tight, light, friendly type. - Fonts, from Google Fonts: **Outfit** (200, 300, 400, 500, 600) for everything; **Caveat** (600) only for the small handwritten logotype in the footer. Headings and short lines use Outfit 300 to 400 with letter-spacing -0.035em and line-height 0.98 (tight and light). Body text is 300. - Colors: page background a 170deg gradient from #DDE9D8 to #F6E7D6; cream panels #FBF7EF; sage #A9BEA6 and #8DA88B (deep #5F7D61); soft blue #CFE0EA; the main accent, a warm clay brown #A9714F, is used for pills, the search field and the big buttons; a persimmon #E0813F for little hearts; ink #3B3128; muted text #7A6C60. - A second theme, "dusk", swaps the palette when the top toggle is on: background #D8DDF0 to #F1DCE6, sage becomes lavender #AEB4D8 and #8F97C8, soft blue #E2D8EE, persimmon #D9627E, clay #9C5A7A. Colors change smoothly over 700ms. - **Panels**: background cream, radius clamp(26px, 2.8vw, 42px), shadow 0 24px 50px -28px rgb(59 49 40 / 0.45). - **Stickers**: transparent PNG cutouts with a thick white outline, with a drop shadow of 0 8px 10px rgb(59 49 40 / 0.28). - Pills and buttons are fully rounded. Every focusable element shows a 2px persimmon focus outline with 3px offset. - The layout is fluid and fills the whole width: side padding clamp(16px, 3.2vw, 56px), no max-width on sections. ## Layout From top to bottom: 1. **Top bar** (cream, rounded only at the bottom corners, side padding as above, 22px top padding, shadow): a tab hanging from the top edge in the middle (width min(34vw, 420px), 34px tall, rounded at the bottom, a sage-to-soft-blue gradient). Row 1: the wordmark "Otter & Owl" on the left (20px, weight 400, clay brown) and "account acc" on the right (18px, the second word at 70% opacity). Row 2, 22px below: a full-width search bar (42px tall, fully rounded, background #E4E6DF, 14px muted text "Typing…" with a small magnifier on the left) with a 40 × 22px toggle switch at its right end (a white knob that slides 18px and turns the track persimmon when on). 2. **Profile panel** (below the bar, 28px gap, background a 135deg gradient from sage to soft blue, radius as panels, padding clamp(22px, 2.4vw, 38px) clamp(22px, 3vw, 48px)): a grid of four columns [avatar, sticker, text, name card] with gaps clamp(14px, 2vw, 36px), items vertically centered. - Avatar: a round, slightly wobbly photo (5px white border, soft shadow, width clamp(170px, 16vw, 230px)) with a white blob rotated -8deg behind it, and a peeling sticker corner at its bottom right (a small white-to-grey folded corner). - The standing sticker pair of the two characters (width clamp(210px, 19vw, 290px)). - Text: "see more profile pages" in white (clamp(15px, 1.4vw, 21px), weight 400) with "set privacy settings" under it in a smaller size, and a 40px round bell button (white at 30%). - Name card: a cream rounded card (34px radius, 22px 28px padding) with the names underlined in clay brown (clamp(22px, 2.1vw, 32px), weight 600), a 13px muted line under them, and a 44px round paw button outlined in clay brown at its right. - Four little round hearts float over the panel's top-right corner (cream and persimmon circles of 34 to 54px with small hearts), bobbing 8px up and down on 5s to 6.5s loops. 3. **Words row**: two columns (0.95fr and 1.25fr), clamp(18px, 2.4vw, 40px) gap. Left, a frosted quote card (min-height clamp(260px, 25vw, 380px), padding clamp(24px, 3vw, 44px), a soft blurry gradient of lilac-blue, peach and sage with white glows) with the quote at the bottom left in white (clamp(26px, 3vw, 46px), weight 300, tight, max 12em); on its right edge, centered between the two columns, an 80px round cream "+" button with a 4px white border (it turns 90deg and grows on hover). Right, a 16 : 7 video-style image (22px radius, a 4px clay brown border, shown faded and slightly blurred, with a rotating 76px loading ring in the middle), and under it a row with a clay brown search field (58px tall, 16px radius, white placeholder "Typing…", magnifier icon) and a light soft-blue "Search" button. 4. **Street scene**: a full-bleed band (it runs edge to edge, outside the page padding; a 170deg gradient from #A9B6CB to #D9DDE6, radius as panels at the top left and bottom right only, min-height clamp(340px, 31vw, 470px)). A tall grey-brown pole on the left, with a green street sign (white 4px border, rounded, text "BURROW ST." uppercase, weight 600, clamp(22px, 3vw, 44px)) rotated -9deg and gently swaying; a yellow pedestrian-signal box (88px, a dark screen with a walking figure) at the bottom of the pole; the large sticker pair standing at the bottom (width clamp(240px, 24vw, 380px)); two speech bubbles (#EFE8E2, clay brown text, tails) "What’s up, hoot?" and "Such a show-off!" with a small pink popsicle drawn in SVG; white text "We laugh like kids, care like grown-ups." with a "Hey you!" outlined pill beside it; two overlapping round avatar badges (an otter face and an owl face drawn in SVG, 4px clay brown borders) at the top right; white text "Two weirdos, somehow right for each other." at the right (clamp(22px, 2.5vw, 38px)); and a small white owl silhouette. 5. **Stat bar**: a cream panel (padding clamp(34px, 3.4vw, 54px) clamp(24px, 3.4vw, 56px) clamp(24px, 2.6vw, 40px)) in four columns: a clay brown pill (78px tall) with a white vertical bar and a circled plus; "My Duo: Fig & Olive" (clamp(22px, 2.2vw, 34px), weight 400, clay brown) with a muted line; "Chaos level: cute!"; and a clay brown speech bubble (34px radius) "today I come with a mischievous partner." with a small cream bubble "i love you!" overlapping its top right. A 92px round cream button with a 5px clay brown border and a heart icon is centered on the top edge of the bar. 6. **Photo card and footer**: a cream panel (max-width 1100px, centered, padding clamp(14px, 1.6vw, 26px)) holding the large 4 : 3 photo (24px radius), with an acorn sticker drawn in SVG at its top left (tilted -14deg) and a round gold medal with a star at its top right (tilted 10deg), both with white outlines and soft shadows. Under it a cream footer panel (rounded at the top only, the same width as the other panels) with a clay brown pill "just like otters, chaotic but warm", a right-aligned line "If connection was a place, I’d find you there." in clay brown, and the handwritten logotype "otter&owl" underlined. Under 1100px wide: the profile panel becomes two columns (avatar and sticker on top, then the text and the name card full width), the hearts hide, and the stat bar becomes two columns with the pill and the speech bubble on their own rows. Under 820px: the words row stacks (the "+" button moves to the quote card's bottom right corner, overlapping its edge, and the quote has extra bottom padding), the street scene is at least 600px tall with its texts stacked at the left (starting 52px from the left edge so they clear the pole, and below the sign: the first text 29% down, the second 41% down, with the sign kept at the very top) and the "Hey you!" pill, avatar badges, popsicle and second speech bubble hidden, and the footer stacks centered. Every grid column must be allowed to shrink (minmax(0, 1fr)) so nothing runs wider than the screen. ## Motion Easing for everything: cubic-bezier(0.22, 1, 0.36, 1). - **Reveal**: the main sections fade in and rise 26px over 800ms when 10% visible, staggered 100ms apart. Each animates once. - **Looping**: the little hearts and the speech bubbles and owl silhouette bob 8px up and down; the street sign sways between -9deg and -6deg every 6s; the loading ring spins once per 1.1s with linear timing (the only exception to the easing above). - **Working controls**: the toggle switches between the sage and dusk themes. The "+" button changes the quote to the next of three lines (fading out and in over 350ms each) and wraps around. Submitting the search form makes the faded video image sharp and fully opaque (and hides the ring) for 4 seconds. The heart button toggles (filled persimmon when on) and, when turned on, sends a burst of 7 small hearts floating up and out, staggered 60ms. - **Hover**: the "+" button turns 90deg and grows to 1.06; the Search button lifts 2px and turns white; the heart button grows to 1.06. - **Reduced motion**: with prefers-reduced-motion: reduce, turn all animation and transitions off and show everything at once. ## Sample content - Wordmark "Otter & Owl". Search placeholder "Typing…". Names "FIG & OLIVE" with the line "chaotic duo: every moment we spend together is so good." Profile texts "see more profile pages", "set privacy settings". - Quotes (the "+" button cycles them): "Like two otters holding hands, we drift, we laugh and still float back to each other.", "We argue about snacks, laugh about nothing and still choose each other.", "Chaotic on the outside, warm everywhere else." - Street: sign "BURROW ST.", bubbles "What’s up, hoot?" and "Such a show-off!", lines "We laugh like kids, care like grown-ups." and "Two weirdos, somehow right for each other.", pill "Hey you!" - Stats: "My Duo: Fig & Olive" with "we are the people who know each other the most.", "Chaos level: cute!", the bubble "today I come with a mischievous partner." with "i love you!" - Footer: "just like otters, chaotic but warm", "If connection was a place, I’d find you there.", logotype "otter&owl". ## Images Every image slot below must show a real image, never an empty box or emoji. Each slot has an image prompt in **Image prompts** at the end of this prompt. The two characters are original (an otter and an owl): do not use characters from any film or franchise. 1. If you can generate images, generate one for each slot from its image prompt. For the sticker pair, remove the magenta background afterwards so the PNG is transparent. 2. Otherwise, load each slot's image from the file name given below (in an `images/` folder next to the page), so the user can generate the images from the image prompts and drop them in. Under every image, draw a fallback so the page looks finished before the files exist: a soft sage-to-soft-blue gradient (#A9BEA6 → #CFE0EA) in the photo and clip slots. The sticker slots need no fallback: they simply stay empty until the file loads. Slots: - Photo, `images/photo-selfie.jpg`: the large photo in the footer card, and also (cropped to cover, focused 30% from the top) the round avatar. - Stickers, `images/stickers.png`: a transparent PNG shown twice, small in the profile panel and large in the street scene. - Clip, `images/market.jpg`: the faded video image (16 : 7, cropped to cover). ## Output A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag. The only external files allowed are the two Google Fonts and the images above; no libraries or frameworks. Designed for a 1440px-wide screen, filling the full width of any screen, and responsive down to 375px wide with no horizontal scrolling, with semantic HTML (header, main, sections with labels, a real search form, labelled buttons and a role="switch" toggle). ## Image prompts Use these with any image generator. Keep each image free of text and logos. - **photo-selfie.jpg** (4:3): 3D animated-film style render with soft warm light. A cheerful otter with sleek brown fur and a teal scarf and a small owl with soft cream-and-caramel feathers and round glasses, original characters, pose cheek to cheek taking a selfie together, the owl giving a peace sign. Behind them a blurred sunny town rooftop view with pastel buildings and a bright blue sky. Friendly, expressive eyes, premium quality. No text, no logos. - **stickers.png** (1:1, transparent background after removing the magenta): Die-cut sticker illustration in a 3D animated-film style. A cheerful otter with sleek brown fur and a teal scarf, waving, and a small owl with soft cream-and-caramel feathers and round glasses, one wing on its hip, standing full-body side by side and smiling. A thick clean white sticker outline around the pair. Isolated on a plain solid pure magenta background (#FF00FF), no shadow, no text, no logos. - **market.jpg** (16:9): 3D animated-film style render with shallow depth of field. A cheerful otter with sleek brown fur and a teal scarf and a small owl with soft cream-and-caramel feathers and round glasses peeking over a colorful market stall full of fruit and flowers, curious expressions, soft warm light, pastel colors, softly blurred background. No text, no logos.
