# strawberrybrowser.com

Source: https://strawberrybrowser.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, playful, corporate-clean, warm, friendly, calm, optimistic, trustworthy
Colors: #fdfcfa, #d4d3d1, #b4b2b0, #252522, #908e8c, #747370, #d58786, #82bbdb
Type (h1): Strawberry Sans · 50.8px/55.88px · 480 · tracking -2.032px — "AIthatworksalongsideyou"
Type (h2): Strawberry Sans · 38px/41.8px · 480 · tracking -1.52px — "Meet your companion"
Type (h3): Strawberry Sans · 20px/27px · 500 · tracking -0.2px — "Beautiful Presentations"
Type (body): Strawberry Sans · 21.6px/29.808px · 400 · tracking -0.216px — "Strawberry is a browser with built-in AI agents that understand your context, to"
Type (small): Strawberry Sans · 9.6px/9.6px · 500 · tracking 0.48px — "BETA"
Type (button): Strawberry Sans · 13px/19.5px · 500 — "Download"
Button (primary): "Download" — fill #252522, text #fffcfa, radius 100px, border 0px, padding 8px 20px, height 36px, type 13px/500
Button (secondary): "Use Cases" — text #252522, radius 4px, border 0px, padding 8px 14px, height 34px, type 15.32px/400
Radii: 13px (11), 12px (9), 4px (6), 100px (6), 999px (6)

## Images

- Hero (desktop): https://media.lvly.design/library/strawberrybrowser-com/hero.webp?v=4224d202
- Page crop (mid-1): https://media.lvly.design/library/strawberrybrowser-com/mid-1.webp?v=0c632aa6
- Page crop (mid-2): https://media.lvly.design/library/strawberrybrowser-com/mid-2.webp?v=c026e523
- Hero (mobile): https://media.lvly.design/library/strawberrybrowser-com/mobile-hero.webp?v=f9488658
- Full page (desktop): https://media.lvly.design/library/strawberrybrowser-com/full.jpg?v=9306b0d5
- Full page (mobile): https://media.lvly.design/library/strawberrybrowser-com/mobile-full.jpg?v=97c89fe1
- Clip preview (mp4): https://media.lvly.design/library/strawberrybrowser-com/video-slz2fb.preview.mp4?v=021824e0

Strawberry sells an "agentic browser" on a page that is almost entirely warm off-white (`#fffcfa`, 94% of the pixels) and lets four tiny 3D companion characters — a lilac, a sky-blue, a mint and a strawberry-pink blob with dot eyes — do all the personality work. The type is a custom grotesk, Strawberry Sans, set tight (50.8px at weight 480 with −2px tracking for the headline, 21.6px body) in a soft charcoal `#252522` rather than black, so even the dense sections read quiet. A faint halftone-dot texture sits behind the hero, a real browser-window mock anchors it, and below that everything is a two-up or three-up grid of hairline-bordered, 12–13px-radius cards on a slightly warmer cream than the page, each one holding a miniature product surface (a "Transcribing" input, a "Routine: Gmail received" workflow card) instead of an illustration. Testimonials keep the same card, only with a quote and a LinkedIn-badged avatar. Pill buttons — a solid charcoal primary, a white-with-hairline secondary — and a 100px radius everywhere give it the rounded, approachable feel of a consumer app while the grayscale restraint keeps it credible for teams.

## Steal-worthy details

- Character mascots as the only saturated color: four pastel companions peek over the hero's browser mock and reappear inside the product UI ("Simon" with a gear), which turns the AI agents into something you'd name rather than fear.
- Hero mock is a real browser chrome — traffic lights, Gmail/Slack tabs, URL bar — with the agent prompt ("find me 50 leads") and a suggestion chip centered inside it; the product demos itself without a screenshot frame.
- Feature cards hold live-looking micro-UIs (a transcription bar with a red "Stop and attach" pill, a workflow card with Gmail trigger chips and a thought-timeline) cropped by the card edge, so each tile implies depth beyond its bounds.
- Two layers of warm neutral: page `#fffcfa`, card fill a touch warmer, hairline `#d4d3d1` border — tonal layering with no shadows.
- Charcoal `#252522` for the primary pill button and headings instead of pure black; on the cream ground it reads softer and more premium.
- Section headings are short, sentence-case, tightly tracked, with a one-line gray deck and — for carousels — a pair of round prev/next buttons flush right on the same baseline.
- Halftone-dot background texture, faded to near-invisible, gives the hero a printed-paper grain without competing with the mascots.
- A small pill "BETA" badge sits beside the logo in the nav, lowercase-calm rather than shouty.

## Style recipe

Build on a warm off-white ground `#fffcfa` with foreground charcoal `#252522` and mid-gray secondary text `#747370`; never use pure black or pure white for large areas. Use one tight geometric grotesk for everything (Inter or Geist if a custom face is unavailable): display 48–52px, weight 480–500, tracking −0.04em, line-height 1.1; body 20–22px, weight 400, tracking −0.01em, line-height 1.38; captions 13px weight 500. Surfaces are cards with a 1px hairline `#d4d3d1`, radius 12–13px, filled a shade warmer than the page (`#fbf8f5`), with no drop shadows — depth comes from tone and from nesting a smaller white panel inside a cream card. Buttons are 36px pills (radius 100px, padding 8px 20px, 13px/500): primary solid `#252522` on `#fffcfa` text, secondary white with the hairline border; icon buttons are 40px circles with the same border. Reserve color for a small set of pastel accents — strawberry `#d58786`, sky `#82bbdb`, lilac, mint — applied to mascots, status dots and brand marks only, never to backgrounds or type. Compose sections as centered headline + one-line gray deck, then a 2- or 3-column card grid with 24px gaps; put a product micro-UI inside each card, cropped by the card edge, rather than an icon. Add a barely-visible halftone or dot texture behind hero areas, and keep nav to a logo, five text links, a ghost "Account" and one charcoal pill CTA.