strawberrybrowser.com

Strawberry Browser | The Agentic Browsersaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #FDFCFA

ground#fdfcfa·94.33%#d4d3d1·2.15%#b4b2b0·0.70%#252522·0.67%#908e8c·0.63%#747370·0.49%accent#d58786·0.19%#82bbdb·0.14%

Sized by coverage · click to copy.

Typography1 family · 5 styles · Strawberry Sans

AIthatworksalongsideyou

Strawberry Sans · 51/56 · 480 · -2.032px

Meet your companion

Strawberry Sans · 38/42 · 480 · -1.52px

Beautiful Presentations

Strawberry Sans · 20/27 · 500 · -0.2px

Body

Strawberry is a browser with built-in AI agents that understand your context, to

Strawberry Sans · 22/30 · 400 · -0.216px

Small

BETA

Strawberry Sans · 10/10 · 500 · 0.48px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsDownload2 styles

DownloadUse Cases

primary · fill #252522 · label #fffcfa · radius 100px · border 0px · padding 8px 20px · height 36px · type 13px / 500

secondary · fill — · label #252522 · radius 4px · border 0px · padding 8px 14px · height 34px · type 15.32px / 400

Shape5 radii · 38 uses

13px11 uses · 29%

12px9 uses · 24%

4px6 uses · 16%

100px6 uses · 16%

999px6 uses · 16%

AnalysisStrawberry 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 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.

Style recipeBuild 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.

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.

Details8 worth noting

strawberrybrowser.com — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Pastel character mascots
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.
2Real browser chrome hero mock
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.
3Cropped micro-UIs in feature cards
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.
4Two layers of warm neutral
Two layers of warm neutral: page #fffcfa, card fill a touch warmer, hairline #d4d3d1 border — tonal layering with no shadows.
5Charcoal instead of pure black
Charcoal #252522 for the primary pill button and headings instead of pure black; on the cream ground it reads softer and more premium.
6Section heading with gray deck
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.
7Faded halftone-dot hero texture
Halftone-dot background texture, faded to near-invisible, gives the hero a printed-paper grain without competing with the mascots.
8Quiet BETA pill beside the logo
A small pill "BETA" badge sits beside the logo in the nav, lowercase-calm rather than shouty.