# folk.com

Source: https://www.folk.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, playful, corporate-clean, playful, friendly, optimistic, energetic, human
Colors: #22b0ea, #9fd8f2, #5fc5f2, #f4f5f4, #cbe6f2, #079ac8, #cccece, #7e8486
Type (h1): ui-rounded · 74.88px/80.8704px · 600 · tracking -1.4976px — "the friend that actually helps you hit your goals."
Type (h2): ui-rounded · 38px/41.8px · 600 · tracking -0.76px — "give folk a skill. it starts texting you today."
Type (h3): ui-rounded · 17px/25.5px · 600 · tracking -0.17px — "for you"
Type (body): ui-rounded · 13px/18.2px · 400 · tracking -0.08px — "knows whether you were really at the gym. no excuses."
Type (small): -apple-system · 11px/13.2px · 400 · tracking -0.08px — "Delivered"
Type (button): ui-rounded · 14.5px/14.5px · 500 · tracking -0.08px — "Skills"
Button (primary): "Skills" — text #1f2a2f, radius 10px, border 0px, padding 0px 14px, height 36px, type 14.5px/500
Radii: 9.03px (62), 999px (34), 15px (29), 20px (8), 50% (6)

## Images

- Hero (desktop): https://media.lvly.design/library/folk-com/hero.webp?v=1104c461
- Page crop (mid-1): https://media.lvly.design/library/folk-com/mid-1.webp?v=5a1a7762
- Page crop (mid-2): https://media.lvly.design/library/folk-com/mid-2.webp?v=6bd99a66
- Hero (mobile): https://media.lvly.design/library/folk-com/mobile-hero.webp?v=cd48bb1d
- Full page (desktop): https://media.lvly.design/library/folk-com/full.jpg?v=30c3406c
- Full page (mobile): https://media.lvly.design/library/folk-com/mobile-full.jpg?v=b7b82a74
- Clip preview (mp4): https://media.lvly.design/library/folk-com/video-w9v4ii.preview.mp4?v=903e8705

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.

## Steal-worthy details

- A sticker system for feature hints: each object gets a thick white die-cut outline, a soft shadow and a 5–15° tilt, so a padlock or a heart becomes brand iconography without a single icon font.
- Emphasis by *dimming*, not colouring: "friend" in the hero is the display face at ~50% opacity pale blue on the blue sky, and the section headline fades word by word from `#1f2a2f` to light gray — hierarchy made from alpha alone.
- Inline objects inside running type: a mascot sprite and a three-app-icon pill are set on the baseline of the headline, sized to the cap height, so the sentence itself carries the product.
- The hero is sky-to-horizon: saturated blue at the top, pale at the bottom, with soft white cloud haze so the phone appears to rise out of weather rather than sit on a gradient.
- A "glossy tab" primary button: small (40px), white, `9999px` pill with a subtle vertical bevel highlight and a 1px darker bottom edge — a physical key rather than a flat CTA.
- Nav as a floating white pill with a single black pill inside it; the pill sits on the sky in the hero and on the greige below with no change, because it is always white on non-white.
- Community cards with an emboldened dashed "make your own" slot at the end of the row, turning an empty state into an invitation.
- The page palette flips at the fold: pure sky blue above, warm greige `#e8e3da` and white below, so the product section feels like landing back on the ground.

## Style recipe

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.