# botpress.com

Source: https://botpress.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, editorial, warm, confident, calm, trustworthy, human
Colors: #edeae6, #f4d97b, #b9b1af, #514d41, #c5ae66, #0d0c0b, #8f8a8b, #f3dcb0
Type (h1): Aspekta · 74.7668px/82.2435px · 700 · tracking -1.49534px — "The AI-native customer support platform."
Type (h2): Aspekta · 18.6218px/27.0016px · 400 — "Takes real action on refunds, account updates, and multi-step workflows. Never h"
Type (h3): Aspekta · 35.6516px/44.5645px · 500 — "AI handles the ticket"
Type (body): Aspekta · 17px/24.65px · 400 — "An AI agent company that built a helpdesk. Not the other way around."
Type (button): Aspekta · 13.6px/20.4px · 400 — "Get a demo"
Button (primary): "Get a demo" — fill #050404, text #f8f7f4, radius 6.4px, border 1px, padding 0px 12.8px, height 38px, type 13.6px/400
Button (secondary): "Platform" — text #050404, radius 8px, border 0px, padding 12.8px 8px, height 50px, type 12.8px/400
Radii: 8px (7), 80px (4), 6.4px (2), 11.2px (2), 4px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/botpress-com/hero.webp?v=0e34013f
- Page crop (mid-1): https://media.lvly.design/library/botpress-com/mid-1.webp?v=0a67e46f
- Page crop (mid-2): https://media.lvly.design/library/botpress-com/mid-2.webp?v=2031a4f9
- Hero (mobile): https://media.lvly.design/library/botpress-com/mobile-hero.webp?v=a69013b5
- Full page (desktop): https://media.lvly.design/library/botpress-com/full.jpg?v=15c6e5c4
- Full page (mobile): https://media.lvly.design/library/botpress-com/mobile-full.jpg?v=a8b56fa3
- Clip preview (mp4): https://media.lvly.design/library/botpress-com/video-lawnj5.preview.mp4?v=38afd498

Botpress sells an enterprise AI-support platform on a page that looks nothing like enterprise software: a warm stone ground (`#f1f0ea`), a huge tight-tracked Aspekta headline in near-black, and a single soft-grain gradient shape — butter yellow melting into lilac — drifting behind the hero copy like a piece of tissue paper. Everything else is quiet. Buttons are small and matter-of-fact (a 38px near-black pill-corner "Get a demo" beside a white "Try for free"), the logo row is monochrome, and the product is shown not as dashboards but as chat bubbles and approval cards floating over photographs of koi ponds and windows. The yellow returns exactly where it is wanted — the active segment of a tab pill, the customer's message bubble, a human-handoff name tag — so a single hue carries the whole brand without ever becoming a block of color. It reads as a calm, well-read company rather than a vendor.

## Steal-worthy details

- One grainy gradient polygon (yellow → violet, with visible noise) behind the hero, clipped to a soft irregular shape; it gives the page its whole personality while the type stays black on stone.
- Warm off-white ground `#f1f0ea` instead of white, with cards a half-step lighter (`#edeae6`-ish) — tonal layering, no borders.
- Display type at ~75px/700 with −1.5px tracking and a tight 1.1 line-height; body at 17px/1.45. Aspekta throughout, no second family.
- Undersized CTAs for a site this scale: 38px tall, 13.6px label, 6.4px radius, near-black `#050404` fill with `#f8f7f4` text — the restraint reads as confidence.
- Segmented control (B2B SaaS · Ecommerce · Fintech) as a pill whose selected segment is the brand yellow — the accent used as *state*, not as decoration.
- Feature blocks are large rounded cards (≈24px radius) split 40/60: eyebrow `STEP 2` in small caps, a 40px two-line headline, muted body — and on the right a full-bleed photograph (koi, water, windows) with a product mini-card floating on it, complete with a named cursor tag.
- Trust line under the CTAs as two check-marked micro-items (`SOC 2 compliant`, `No credit card required`) in muted gray, 13px.
- Persistent dark language selector bottom-left and a black chat FAB bottom-right — the only two dark elements outside the CTAs, anchoring the corners.

## Style recipe

Set the page on a warm stone ground `#f1f0ea`; never pure white. Use one neutral family for type: near-black `#0d0c0b` for headings and body, `#514d41` for secondary copy, `#8f8a8b` for captions. Choose a single grotesk with a tall x-height (Aspekta, or Inter Tight as a stand-in) and use it everywhere. Display headlines at 72–76px, weight 700, letter-spacing −2%, line-height 1.1, centered in the hero and left-aligned in sections; section headlines 40px/600; body 17px/1.45 at weight 400; eyebrows 13px uppercase with +4% tracking.

Give the whole page exactly one accent: butter yellow `#f4d97b` (deepen to `#c5ae66` for text on it). Spend it on state and on small objects — the selected segment of a tab, a highlighted chat bubble, a name tag, a stripe in an illustration — never on buttons or backgrounds. Behind the hero, place one large irregular polygon filled with a yellow-to-violet gradient (`#f4d97b` → `#e9c9f0`), overlaid with a fine monochrome noise at 20–30% and softened at the edges; let headline text sit directly on top of it.

Buttons are deliberately small: 38px tall, 13.6px label, weight 400–500, radius 6px, 13px horizontal padding. Primary is solid near-black `#050404` with `#f8f7f4` text and a trailing arrow; secondary is white with a hairline `#e6e3dc` border. Put a muted check-list of trust facts directly under the CTA pair.

Build sections as large rounded cards (radius 24px) filled `#edeae6` on the stone ground — depth by tone, not by shadow or stroke. Inside, use a 40/60 split: text on the left with eyebrow → headline → 2–3 line body, and on the right a full-bleed photograph of something calm and natural (water, glass, plants) with a small white product card (radius 12px, subtle shadow, 14px UI type) floating over it, optionally with a colored cursor label to imply a person. Keep logos monochrome at ~60% opacity in a single row. Anchor the corners with two dark utilities: a language selector bottom-left and a circular chat button bottom-right. Radii scale: 4/6/8/12/24px, plus full pills for segmented controls.