Studio Marmalade — Make Brands People Smile About

Summary

A warm, playful pastel agency-website homepage for a friendly design studio. A sticky cream glassy nav (a coral rounded-square sparkle logo with a hard ink drop-shadow, a 'Studio Marmalade' wordmark with 'Marmalade' in coral, four center links, and a dark 'Start a project' pill) sits above a hero that splits a left copy column from a right floating bento collage. The hero copy has a teal pill eyebrow, a huge extrabold Poppins headline 'We make brands people actually smile about.' where 'smile' is coral with a hand-drawn sunny underline squiggle, a soft body line, a coral primary button with a hard ink offset shadow plus an outlined 'Say hello' button, and an overlapping-avatar social-proof row. The right collage is three floating rounded stat cards (teal 240+, sunny 4.9 stars, coral 9 yrs) with a rotated '100% human' badge. Below: a dark ink marquee strip of services (Branding / Web Design / Product UI / Illustration / Motion with asterisks, some words in outline stroke text), a 5-card project grid (3 colored cards, a wide ink campaign card with a spinning blob, and an outlined card) with lift-on-hover, a tinted-teal services trio (three rounded cards, the middle ink one raised) with hard-shadow icon chips and check lists, a centered client logo row of icon+wordmark lockups, a big coral rounded CTA panel with floating blobs and two pill buttons, and a dark four-column footer with social circles. The signature is the friendly maximalist craft: a cream #fdf9f3 canvas, a coral/teal/sunny trio on near-black ink #23201d, organic blob shapes, floaty/spin/marquee animations, and chunky hard-offset (0 8px 0 0 ink) drop-shadows on buttons and chips.

Style

Friendly, playful, warm-maximalist agency aesthetic built on a soft cream canvas with a bold coral / teal / sunny-yellow trio anchored by a near-black ink. Everything is rounded and chunky: fully-rounded pills, 2rem to 2.5rem rounded cards, and rounded-2xl icon chips. Depth and personality come from craft rather than gradients: a signature chunky hard-offset drop-shadow (box-shadow 0 8px 0 0 #23201d, collapsing to 0 4px 0 0 on hover as the element nudges down) on primary buttons and icon chips, soft colored glow shadows under the colored cards, organic 'blob' border-radius shapes that float and slowly spin in the background, a hand-drawn SVG underline squiggle under the hero accent word, and an infinite marquee of service words (some rendered as outline stroke-text). Motion is gentle and looping: floaty (translateY + slight rotate, 7s/10s), spin-slow (22s), and a 26s marquee. Type is Poppins throughout at heavy weights (extrabold/black) with tight tracking for display and a muted ink/65-70 for body. Iconify Phosphor fill glyphs (ph:*-fill) supply all icons and the playful illustrative spots (paint brush, ice cream, bird, flower, smiley).

Layout & Structure

A single-column, vertically stacked, frameless responsive marketing page on a cream canvas. Almost every section centers inside mx-auto max-w-[1180px] with px-6 -> lg:px-8 padding. Order top to bottom: a sticky glassy cream nav; a two-column hero (left copy lg:col-span-7, right floating bento collage lg:col-span-5) sitting over absolutely-positioned floating blob shapes; a full-bleed dark ink marquee statement strip of service words; a project grid (sm:grid-cols-2 -> lg:grid-cols-3 with one wide sm:col-span-2 card); a tinted-teal services trio (md:grid-cols-3, middle card raised); a centered wrap of client logo lockups; a big coral rounded CTA panel with floating blobs; and a dark four-column footer. Reflow: nav links hide below md (a hamburger button shows) and the 'Start a project' pill hides below sm; the hero grid is lg:grid-cols-12 that stacks to one column below lg with the collage dropping below the copy; the marquee is a duplicated track for a seamless loop; the project grid goes 1 -> 2 -> 3 columns with the wide card spanning 2; the services trio goes 1 -> 3 columns and the middle card's md:-translate-y-4 raise only applies at md+; the footer is md:grid-cols-12 that collapses to stacked columns; the bottom legal row is flex-col -> sm:flex-row. body is overflow-x-hidden so floating blobs and the rotated badge never trigger horizontal scroll.

Sticky glassy nav

Hero (split copy + bento collage)

Marquee statement strip

Project grid

Services trio

Client logo row

Coral CTA panel

Footer (dark, 4-column)

Components

Chunky hard-offset drop-shadow (the brand signature)

A solid, un-blurred offset shadow in ink under primary buttons, the logo square, and icon chips, that collapses as the element nudges down on hover, giving the whole page a tactile, sticker-like, pressable feel. This is the single most recognizable craft detail of the design.

Organic floating blob shapes

Soft pastel organic shapes (lopsided border-radius) that float and slowly spin in the hero and CTA backgrounds, plus a spinning blob behind the wide campaign card, supplying the warm, hand-made energy without any imagery.

Hand-drawn underline squiggle on the hero accent word

An imperfect, marker-style sunny underline swooshed under the coral word 'smile' in the hero headline, signalling the friendly, illustrative brand voice.

Infinite service marquee with outline stroke-text

A dark full-bleed band that scrolls the studio's services horizontally forever, alternating solid cream words with hollow outline-only words and colored asterisk separators, used as a rhythmic divider between the hero and the work grid.

Floating bento stat collage

The hero's right column: a small grid of rounded color-blocked stat cards (teal/sunny/coral) that gently bob out of phase, topped by a rotated circular '100% human' sticker badge, standing in for a hero product image.

Special Notes

Frameless, fully responsive playful agency marketing homepage (no browser chrome / no device frame): every section centers in mx-auto max-w-[1180px] with px-6 -> lg:px-8; the hero is a lg:grid-cols-12 split (copy col-span-7, bento collage col-span-5) that stacks below lg; the marquee is a full-bleed duplicated track; the project grid is sm:grid-cols-2 -> lg:grid-cols-3 with one wide sm:col-span-2 card; the services trio is md:grid-cols-3 with the middle card raised via md:-translate-y-4 only at md+; the footer is md:grid-cols-12; nav links hide below md (hamburger appears) and the 'Start a project' pill hides below sm; body is overflow-x-hidden so the absolutely-positioned floating blobs and the rotated badge never cause horizontal scroll. Built with Tailwind via CDN plus a small tailwind.config registering the custom colors (cream #fdf9f3, coral #ff7a59, teal #2bb6a3, sunny #ffc23c, ink #23201d), the Poppins font family, and a blob borderRadius token; Google Fonts loads Poppins 400-900; icons + illustrative spots are Iconify Phosphor (ph:*-fill) glyphs from the Iconify CDN. All copy and the 'Studio Marmalade' brand are placeholders meant to be swapped: the transferable value is the warm playful pastel palette (cream canvas + coral/teal/sunny trio on near-black ink #23201d, strictly no blue/purple/gradient-slop) and the friendly-maximalist craft system (chunky hard-offset ink drop-shadows that press on hover, organic floating blob shapes with floaty/spin animations, a hand-drawn underline squiggle on the hero accent word, an infinite service marquee with outline stroke-text, and a floating bento stat collage), applied to a standard agency layout (sticky glass nav -> split hero -> service marquee -> colorful work grid -> services trio -> client logo row -> big coral CTA panel -> 4-column dark footer), NOT the specific studio.