botpress.com

Botpress | The enterprise-grade AI agent platform for customer supportsaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #EDEAE6

ground#edeae6·83.16%accent#f4d97b·6.55%#b9b1af·1.81%#514d41·1.29%#c5ae66·1.27%#0d0c0b·1.23%#8f8a8b·0.99%#f3dcb0·0.96%

Sized by coverage · click to copy.

Typography1 family · 4 styles · Aspekta

The AI-native customer support platform.

Aspekta · 75/82 · 700 · -1.49534px

Takes real action on refunds, account updates, and multi-step workflows. Never h

Aspekta · 19/27 · 400 · normal

AI handles the ticket

Aspekta · 36/45 · 500 · normal

Body

An AI agent company that built a helpdesk. Not the other way around.

Aspekta · 17/25 · 400 · normal

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

ButtonsGet a demo2 styles

Get a demoPlatform

primary · fill #050404 · label #f8f7f4 · radius 6.4px · border 1px · padding 0px 12.8px · height 38px · type 13.6px / 400

secondary · fill — · label #050404 · radius 8px · border 0px · padding 12.8px 8px · height 50px · type 12.8px / 400

Shape5 radii · 17 uses

8px7 uses · 41%

80px4 uses · 24%

6.4px2 uses · 12%

11.2px2 uses · 12%

4px2 uses · 12%

AnalysisBotpress 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 s…

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.

Style recipeSet the page on a warm stone ground `#f1f0ea`; never pure white.

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.

Details8 worth noting

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

1Grainy gradient polygon
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.
2Warm stone ground
Warm off-white ground #f1f0ea instead of white, with cards a half-step lighter (#edeae6-ish) — tonal layering, no borders.
3Tight display type
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.
4Undersized CTA buttons
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.
5Yellow as selected state
Segmented control (B2B SaaS · Ecommerce · Fintech) as a pill whose selected segment is the brand yellow — the accent used as *state*, not as decoration.
6Split feature cards with photos
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.
7Check-marked trust line
Trust line under the CTAs as two check-marked micro-items (SOC 2 compliant, No credit card required) in muted gray, 13px.
8Dark corner utilities
Persistent dark language selector bottom-left and a black chat FAB bottom-right — the only two dark elements outside the CTAs, anchoring the corners.