Vibe Web

The kit for vibe coding co-branded pages: zerion.io's design system, blocks and brand assets in one private repo, with a build skill your AI assistant follows. For partners, contractors and ambassadors who build pages with Zerion and host them on their own sites.

The Zerion website hero: the wallet app on the brand gradient, in front of the petal fan
What's inside
The same blocks zerion.io is built from, copied from the site's own source, so a co-branded page looks and feels like Zerion.
Design system
Brand colours, gradients and type tokens from the website, set up in Tailwind.
Blocks
65 base components and 37 ready sections: heroes, feature rows, pricing, FAQs, callouts and more.
Brand assets
Over 600 files: logos, network icons, app screens, illustrations and patterns.
Build skill
Instructions for Claude Code, Cursor and Copilot, plus checks that catch layout mistakes before review.
Get access
The kit is a private repo on GitHub. Your Zerion contact adds you, then you build the page and host it on your own infrastructure.
01
Request access
Send your GitHub username to your Zerion contact. Until you're added, the repo shows a 404.
02
Clone and run
Clone the repo with the command below. Its README covers install and the local preview.
03
Build the page
Agree the copy first, then ask your AI assistant to build it. It reads AGENTS.md and the build skill in the repo.
04
Review, then host it
Share the page with your Zerion contact for a review of copy, facts and visuals, then deploy it on your own infrastructure.
git clone https://github.com/zeriontech/zerion-vibe-branding.git
Open on GitHub Private repo. You need access first.
Rules
Every page built with the kit follows the website's rules. The kit's checks catch most of them.
Bring your own header
The kit's header and footer are placeholders. Replace them with your co-branded ones at the same height, and don't copy Zerion's site navigation.
Medium weight only
One weight, 500. The kit runs on a system font, because Aeonik Pro is licensed and isn't included. Never semibold or bold.
Colours from the palette
Every colour and gradient comes from the kit's palette file. Never a new hex.
One gap per page
Every section on a page sits the same distance from the next.
Nothing wider than the nav
Every block sits on the same 1280px content width as the header.
Every page links onward
A row of related pages and a callout to another Zerion product before the FAQ.