# zernio.com

Source: https://zernio.com/
Captured: 2026-10-31
Tags: saas, landing, mixed, both, minimal, corporate-clean, bento, warm, technical, confident, energetic, trustworthy
Colors: #f1efea, #e73b13, #f97c25, #fccfa0, #fcaf65, #d0cfcc, #ef9c8a, #fb9946
Type (h1): GeistSans · 60px/66px · 600 · tracking -1.8px — "Marketing infrastructure for agents"
Type (h2): GeistSans · 14px/20px · 500 — "Marketing infrastructure"
Type (h3): GeistSans · 24px/32px · 600 · tracking -0.48px — "One integration for every channel. Official APIs only"
Type (body): GeistSans · 16px/24px · 400 — "Give your product or agent a way to reach customers anywhere. Skip months of pla"
Type (small): Menlo · 9px/16px · 700 · tracking 0.45px — "POST /v1/posts"
Type (button): GeistSans · 16px/20px · 500 — "Start for free"
Button: "Start for free" — fill #eb3514, text #ffffff, radius 12px, border 0px, padding 12px 16px, height 44px, type 16px/500
Radii: 9999px (35), 12px (29), 8px (12), 25px (12), 20px (11)

## Images

- Hero (desktop): https://media.lvly.design/library/zernio-com/hero.webp?v=cd883cae
- Page crop (mid-1): https://media.lvly.design/library/zernio-com/mid-1.webp?v=a10ac108
- Page crop (mid-2): https://media.lvly.design/library/zernio-com/mid-2.webp?v=ab79e744
- Hero (mobile): https://media.lvly.design/library/zernio-com/mobile-hero.webp?v=840fb0c6
- Full page (desktop): https://media.lvly.design/library/zernio-com/full.jpg?v=973d893c
- Full page (mobile): https://media.lvly.design/library/zernio-com/mobile-full.jpg?v=62795d0d
- Clip preview (mp4): https://media.lvly.design/library/zernio-com/video-ehf0ht.preview.mp4?v=eeaadc75

A developer-infrastructure landing page that swaps the usual cold dev-tool palette for warmth. The ground is a warm putty off-white (#f1efea), the ink is a soft near-black, and one hot vermilion (#eb3514) does every job a brand color can: the announcement bar, the CTA, eyebrow labels, chip text, the wordmark. The hero carries no product shot. Instead, a blurred stepped bar chart in an orange-to-peach gradient (#e73b13 → #f97c25 → #fccfa0) rises out of the bottom edge like a heat haze, so it reads as both "growth" and atmosphere. Below the hero the page runs inside a single hairline-framed center column with dotted-grid fills and 12px-radius cards. Two thirds of the way down it flips to a near-black band for the SDK/MCP/CLI code tabs before returning to light for the testimonials and FAQ. GeistSans throughout, set tight at 600 for display, with Menlo micro-labels for the API flavor.

## Steal-worthy details

- Blurred stepped-bar hero art: vertical columns in an orange-to-cream gradient, heavily Gaussian-blurred and anchored to the bottom edge. It gives abstract data-viz warmth with no illustration or screenshot needed
- Live-number eyebrow pill above the H1 ("48,522 accounts connected this week ›"): accent text on a pale peach tint, radius 4–6px, chevron trailing. Social proof turned into the eyebrow
- Paired hero CTAs: a solid vermilion "Start for free" (12px radius, 44px tall, 500 weight) beside a white, hairline-bordered "Continue with Google" with the G logo, so the second button skips the signup step instead of just being a "Learn more"
- "Works with" row: overlapping circular agent/tool logos with a "+4" overflow chip and a copy icon after them. It works like an avatar stack, but for integrations
- Full-bleed accent announcement bar (#eb3514, white 500-weight text, rocket icon, arrow) that matches the CTA color exactly, so the brand hue gets set before the nav even renders
- Partner badges set in a 25px-radius hairline capsule over a dotted-grid field, all inside the page's ruled center column. The dot grid gives an empty band texture without color
- Dark-mode band for the code section: window-chrome traffic lights, icon tabs (API / MCP / CLI) with a 2px vermilion underline on the active tab, and a syntax block whose keys are tinted in the accent. Below it sits a row of pill-shaped language chips with the active one inverted to white
- Accent eyebrow plus tinted chip labels on cards ("Voice & Calls ›" in vermilion on peach): the same tint recipe as the hero pill, reused as card category links
- Ruled center column: 1px warm-gray (#d0cfcc) vertical rules run the full page height at the container edges, with sections divided by horizontal hairlines, so the whole page sits on a blueprint frame

## Style recipe

Design a warm, light-first developer-product page with one hot accent. Background #f1efea (warm putty, never pure white); cards #f6f5f1 or white with 1px #d0cfcc hairlines; ink #1f1f1f for headings, #4a4a48 for body. Use a single brand accent, vermilion #eb3514, for every primary CTA, link, eyebrow label and active state. Pair it with a pale peach tint (#fde3d6 or so) behind accent-colored text for pills and chips. Reserve the gradient #e73b13 → #f97c25 → #fcaf65 → #fccfa0 for one atmospheric moment: blurred, soft-edged bars or shapes bleeding off an edge, never a hard-edged illustration.

Type: GeistSans (or Geist/Inter) only. Display 60–64px, weight 600, line-height 1.08, tracking -0.03em. Section titles 24px/600, tracking -0.02em. Body 16/24 regular. Eyebrows 14px/500 in the accent, no uppercase. Use Menlo 9–11px bold, +0.05em tracking, for API/method micro-labels.

Shape: buttons 12px radius, 44px tall, 12×16 padding, weight 500. Primary is solid accent with white text. Secondary is white with a hairline border and a leading brand logo. Cards are 12–20px radius. Badges and partner strips go in 25px capsules, and logo, language and avatar chips are full pills (9999px). No drop shadows: build depth with hairlines and tonal steps only.

Layout: center the content in a ~1015px column bounded by full-height 1px vertical rules, with sections split by horizontal hairlines. Fill empty bands with a faint 1px dot grid at about 16px spacing. Lay feature grids out as bento cards with a tinted chip label, a bold 20–24px claim and a small live UI fragment. Add one inverted near-black (#0e0e0e) band for code or technical depth. Keep the same accent there, with tabs underlined 2px in vermilion and window-chrome dots. Open with a full-bleed accent announcement bar and a live-number eyebrow pill above the H1.