zernio.com

Zernio - Marketing Infrastructure for Agentssaved 4h ago · captured 4h ago

Nine details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #F1EFEA

ground#f1efea·69.16%#e73b13·9.49%#f97c25·6.11%#fccfa0·3.73%#fcaf65·2.88%#d0cfcc·1.49%#ef9c8a·1.39%#fb9946·1.23%

Sized by coverage · click to copy.

Typography2 families · 5 styles · GeistSans, Menlo

Marketing infrastructure for agents

GeistSans · 60/66 · 600 · -1.8px

Marketing infrastructure

GeistSans · 14/20 · 500 · normal

One integration for every channel. Official APIs only

GeistSans · 24/32 · 600 · -0.48px

Body

Give your product or agent a way to reach customers anywhere. Skip months of pla

GeistSans · 16/24 · 400 · normal

Small

POST /v1/posts

Menlo · 9/16 · 700 · 0.45px

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

ButtonsStart for free1 style

Start for free

primary · fill #eb3514 · label #ffffff · radius 12px · border 0px · padding 12px 16px · height 44px · type 16px / 500

Shape5 radii · 99 uses

9999px35 uses · 35%

12px29 uses · 29%

8px12 uses · 12%

25px12 uses · 12%

20px11 uses · 11%

AnalysisA developer-infrastructure landing page that swaps the usual cold dev-tool palette for warmth.

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.

Style recipeDesign a warm, light-first developer-product page with one hot accent.

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.

Details9 worth noting

zernio.com — the captured page — Landing, 1440 × 900 · captured Oct 31, 2026

1Blurred stepped-bar gradient hero
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
2Live counter eyebrow pill
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
3Signup-skipping secondary CTA
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"
4Integration logo stack with overflow
"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
5Brand-color announcement bar
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
6Dotted-grid partner badge strip
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
7Dark code band with tabs
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
8Tinted chip card labels
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
9Full-height ruled container frame
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