folk.com

A consumer-SaaS landing that opens as a sticker collage on a clear-sky gradient: the whole hero viewport is a saturated #22b0ea blue fading to a pale, cloud-hazed #9fd8f2 at the horizon, and scattered across it — tilted, white-outlined, drop-shadowed like die-cut vinyl — are a smiley, a broken heart, a padlock, a notepad, a green chat bubble and a "LOCK IN" wordmark, each an emoji-scale cameo of a feature. Type is the system rounded face (SF Pro Rounded) at 600, a 75px display with −1.5px tracking set in white, with the word "friend" dropped to a translucent pale-blue and a tiny waving mascot inlined into the headline. A real iPhone frame rises from the bottom edge showing the product as an iMessage thread, and floating around it are loose gray and blue chat bubbles at random rotations. Below the fold the sky ends abruptly and the page becomes a quiet greige-to-white SaaS layout — #e8e3da page ground, white 15px-radius cards for community "folkways", a dashed-border "make your own" slot, and a huge near-black rounded headline with a word-by-word fade to gray and a pill of three messenger app icons set inline in the sentence. The hero button is deliberately small and white with a glossy bevel, the nav is a white floating pill with a single black CTA. It reads like a friendly cartoon that has read the iOS Human Interface Guidelines.

Use a rounded humanist sans — SF Pro Rounded via ui-rounded, falling back to Inter — at 600 for display and 400 for body. Display 72–76px with −1.5px tracking and 1.08 line-height, all lowercase; body 13–14px with −0.08px tracking. Build two grounds: a hero sky gradient from #22b0ea at the top through #5fc5f2 to #9fd8f2 at the horizon with white cloud haze at 20–30% opacity along the bottom, and a page ground of warm greige #e8e3da with white #ffffff cards below it. Text on the sky is white; text on the ground is near-black #1f2a2f with a secondary gray #7e8486. Make emphasis with opacity, not hue — dim a keyword to 45–55% of the surrounding color, and fade long headlines word by word toward #cccece. Decorate with stickers: flat, single-color pictograms in candy tones (yellow #f2d94a, coral #f06a55, mint #8fd48a, orange #f29a5c) with a 6–8px white stroke, a 0 8px 24px rgba(0,0,0,.15) shadow and a random ±12° rotation; scatter them at the viewport edges, never over the copy. Radii: 9px for small chips, 15px for cards, 20px for large panels, 9999px for every button and the nav. Primary buttons are small white pills, 40px tall, 14–16px horizontal padding, 13.5px label, with an inset top highlight and a 1px darker bottom edge to read as a physical key; the single dark CTA is a #1f2a2f pill of the same size. The nav is a floating white pill with 1px #e6e6e6 border and a faint shadow. Cards are white with no border, a 0 1px 2px shadow, 15px radius and 16–20px padding; an add-new slot is the same card with a 1px dashed #cccece border and a centered plus. Set small objects inline in headlines — sized to the cap height, on the baseline — instead of beside them. Keep the mood lowercase, friendly and physical: everything looks like it could be peeled off.