# lobehub.com

Source: https://lobehub.com/
Captured: 2026-09-20
Tags: saas, landing, light, both, minimal, bento, playful, confident, calm, technical, optimistic
Colors: #f8f4fb, #d0ced4, #aeaab1, #2c2c2d, #706c72, #504f53, #928d95, #151415
Type (h1): Geist · 28px/44px · 500 — "Y o u r C h i e f A g e n t O p e r a t o r"
Type (h2): Geist · 14px/19.6px · 500 — "Operate"
Type (h3): Geist · 20px/32px · 400 — "Trusted by teams worldwide"
Type (body): Geist · 20px/30px · 400 — "LobeHub organizes your agents into 7×24 operation. It hires, schedules, reports "
Type (button): Geist · 13px/13px · 500 — "Get started"
Button: "Get started" — fill #222222, text #f8f8f8, radius 999px, border 1px, padding 0px 14px, height 32px, type 13px/500
Radii: 8px (27), 12px (27), 999px (6), 6px (2), 56px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/lobehub-com/hero.webp?v=919188e2
- Page crop (mid-1): https://media.lvly.design/library/lobehub-com/mid-1.webp?v=d02bf579
- Page crop (mid-2): https://media.lvly.design/library/lobehub-com/mid-2.webp?v=35940081
- Hero (mobile): https://media.lvly.design/library/lobehub-com/mobile-hero.webp?v=58685062
- Full page (desktop): https://media.lvly.design/library/lobehub-com/full.jpg?v=bf7ae3b9
- Full page (mobile): https://media.lvly.design/library/lobehub-com/mobile-full.jpg?v=fdd5de8b
- Clip preview (mp4): https://media.lvly.design/library/lobehub-com/video-sdhuby.preview.mp4?v=6fa5cf8a

An almost colorless product page that spends its entire color budget in two places: a pastel lavender-to-pink wash bleeding out of the top corners, and one small tinted capsule per section. Everything else is Geist on a #f8f8f8 ground — white cards, hairline borders, 8/12px radii, a single #222222 pill for the primary action. The hero is unusually confident for how little it does: a heavy oblique headline set tight at -1.92px tracking on one line, two lines of 20px/30px body, a black pill beside a chromeless ghost button, and then the product itself, a full app window inset from both margins and deliberately cut off by the fold so the page reads as a window onto software rather than a brochure about it. Below it the page is a long run of bento blocks — each introduced by a pastel eyebrow pill and a short heading, each pairing a text column against a live-looking UI screenshot mounted on a colored gradient plate that is the only saturated thing in its block. The restraint is what makes it work: because the neutral is so flat and the type so uniform, a 6px strip of yellow or a lilac capsule carries as much weight as a full-bleed color section would elsewhere.

## Steal-worthy details

- Header with no header — no bar fill, no border, no blur plate; the logo, four nav items, a stat pill and the CTA simply float centered on the gradient, so the hero wash runs uninterrupted to the top edge
- GitHub stars as a nav item — an 82.7K count in a tinted 999px capsule sits inline between the links and the CTA, turning social proof into navigation chrome instead of a logo wall
- Oblique display headline — the hero line is the only italic on the page, 700 weight with -1.92px (≈ -0.04em) tracking, sized to fill one line edge to edge; the body under it is 20px/30px at 400 with normal tracking, so the contrast is weight, slant and tracking rather than size alone
- Pastel corner wash on a flat ground — lavender bleeding from the top-left, pink from the top-right, both resolved into #f8f8f8 within roughly 500px; the entire rest of the page is neutral, which is what lets this read as brand rather than decoration
- Product shot cut by the fold — the app window is inset ~145px from each margin with a 12px radius and a hairline border, and the viewport crops it mid-screenshot so it continues below the scroll line instead of being framed and finished
- Section eyebrow as a tinted capsule — every block opens with a small pill (Operate, Create, Collaborate, Evolve) in its own pastel tint, above a 40px+ heading; the pill color is the block's identity and nothing else in the block repeats it
- Colored plate under the screenshot — inside each bento hero card the UI sits on a gradient panel whose exposed left strip (yellow, purple, blue by section) is a few pixels wide, giving the white card one saturated edge instead of a saturated surface
- Testimonial mosaic that clips at the edges — three dense rows of quote cards run wider than the container and fade out at both ends, with no arrows and no dots; the overflow itself is the signal that there are more

## Style recipe

Build on a flat near-white ground (#f8f8f8) with pure white cards (#ffffff) and 1px hairline borders at roughly 8% ink. Use one geometric-grotesk family for everything — Geist, Inter or similar — and let weight carry the hierarchy: display 700 at -0.04em tracking and, for the single hero line only, an oblique/italic cut; section headings 600–700 at -0.02em; body 20px/30px at 400 with normal tracking; labels and buttons 13–14px at 500. Ink is a soft black (#222222) with secondary text at ~55% and tertiary at ~40% of it; never use a saturated text color.

Color enters in exactly two ways. First, one pastel gradient wash bleeding out of the top corners of the page — two hues, lavender and pink at 15–20% saturation, resolved to the page ground within about 500px — repeated once at the closing CTA card and nowhere else. Second, per-section pastel tints: give each major block a 999px eyebrow capsule in its own hue at ~12% opacity with the hue's dark text on it, and echo that hue as a narrow exposed gradient strip along one edge of the block's screenshot plate. No block gets a colored background, and no two blocks share a hue.

Radii are a three-step scale: 8px for inputs, chips and small tiles, 12px for cards and screenshot frames, 999px for buttons and eyebrows, plus one oversized 56px radius reserved for the full-width closing CTA card. Buttons are pills at 32px height with 14px horizontal padding: primary is a solid #222222 with #f8f8f8 text, secondary is transparent with only a hairline border and an optional trailing icon — always pair them side by side, never stack two solids. Shadows are near-absent; separation comes from the white-on-#f8f8f8 step and the hairline, with at most a 1px inner highlight on the app screenshots.

Rhythm: full-width sections at a 1150–1200px container with roughly 120px of vertical air between them, and inside each one a bento grid that alternates a text column against a UI screenshot — a 1:2 split for the section's lead card, then a row of two or three equal cards beneath it. Let every screenshot be a real, densely populated interface rather than an abstract illustration, and crop at least one of them at the container edge or the fold so it reads as continuing. Motion is minimal: 150–200ms fades and 2–4px lifts on card hover, a slow horizontal drift on the logo and testimonial rows, and nothing that moves on load except the hero's own entrance. The two moves that make it recognizable are the single oblique headline on an otherwise upright page, and color appearing only as a corner wash plus one capsule-and-strip pair per section.