Tell us how it felt · Superflow Feedback (radio/pastel survey)

Summary

A friendly, pastel customer-feedback survey page ('Superflow') built around THE survey card. A warm cream ground (#fdf9f3) lit by a soft three-blob grain glow, a sky-blue (#38bdf8) + coral (#fb7185) accent pair, and Poppins type. A sticky translucent nav and a centered hero ('Tell us how it really felt', with a hand-drawn coral underline swash) sit above a white survey card that overlaps the hero by a negative top margin. The card has a live gradient progress strip ('3 of 4 answered') and four questions that demonstrate the full range of survey controls: Q1 a 5-tile emoji satisfaction RADIO group (each tile lifts and gets a sky border + filled dot when checked), Q2 a multi-select CHIP grid (coral check-circle + tinted body when checked), Q3 a 0-10 NPS RANGE slider with a big live value, a sky->coral fill track, and a live Promoter/Passive/Detractor pill, and Q4 a focus-glow TEXTAREA with a live 0/280 character count. A footer-action row (Save draft + a navy->burgundy gradient Submit) and a privacy note close the card. Pastel and warm by default; reflows from a 5-up tile row to stacked rows on mobile.

Style

Warm pastel survey UI. A cream paper ground (#fdf9f3) softly lit by a fixed three-blob radial 'grain' glow (sky and coral at ~0.08-0.12 alpha). A friendly two-accent palette: sky-blue (DEFAULT #38bdf8, soft #bae6fd, ink #0c4a6e) and coral (DEFAULT #fb7185, soft #fecdd3, ink #9f1239), over warm near-black ink #27201a text and muted #6f6457 secondary text. Poppins for everything (300-800). Generously rounded: 2xl-3xl on controls, 4xl (2rem) on the survey card, full pills on the nav buttons/CTA/progress track. Layered soft shadows: a big diffuse 'card' shadow with sky+coral tints, a sky 'pill' glow on the brand tile, a coral glow on the submit. Micro-interactions are gentle and physical: radio tiles and chips translate up ~2px and gain a tinted border + colored glow when selected, a check core springs in (cubic-bezier overshoot), the NPS value 'pops' on change, decorative blobs float. Friendly, human, reassuring, soft-but-confident, never sterile.

Layout & Structure

A single centered survey page: a sticky translucent nav, a full-bleed centered hero with a grain glow and floating blobs, a white survey card (max-w-3xl) that overlaps the hero by a negative top margin and holds a live progress strip + four questions + a footer-action row, a privacy note, and a full-width footer. The hero/nav/footer use a wider max-w-6xl column; the card uses max-w-3xl. Everything reflows to a single column on mobile (the Q1 5-tile row goes from sm:grid-cols-5 to stacked, chips from 3-up to 2-up, footer actions stack).

Sticky nav

Hero

Survey card (the hero component)

Q1 - emoji satisfaction radio group

Q2 - multi-select chip grid

Q3 - NPS range slider

Q4 - counted textarea

Footer

Components

Emoji satisfaction radio tile (.opt)

Multi-select chip (.chip)

Custom NPS range slider (input[type=range].nps)

Live progress strip

Focus-glow textarea

Hero underline swash

Gradient brand tile

Special Notes

Built on the Tailwind CDN with a tailwind.config extend: custom colors cream #fdf9f3, sky {DEFAULT #38bdf8, soft #bae6fd, ink #0c4a6e}, coral {DEFAULT #fb7185, soft #fecdd3, ink #9f1239}, ink #27201a, muted #6f6457; custom boxShadow card / pill / coral / soft; custom borderRadius 4xl 2rem and 5xl 2.75rem; fontFamily sans = Poppins. Fonts load from Google Fonts (Poppins 300-800); icons are Iconify Phosphor (ph:*) via the iconify-icon CDN; the body background is set to #fdf9f3. All form controls are real, accessible native inputs (radio/checkbox/range/textarea) visually replaced via the checked/focus-visible sibling pattern, so keyboard and screen-reader behavior is preserved. The progress strip, the NPS value+fill+segment pill, and the textarea character counter are driven by a small vanilla-JS block (no framework). On a single static frame the hover-lift, the checked springs, the .pop and the floating blobs only fully animate live; the survey is shown pre-filled to demonstrate range (Q1 'Satisfied' checked, Q2 Performance+Design checked, Q3 at 9/Promoter, progress at '3 of 4 answered'). 'Superflow' is an illustrative product/brand placeholder for a generic feedback-survey app.