Vertex

Live preview →

Vertex is a complete website system for SaaS and startup products that want to look sharp without shouting. Crisp ink on off-white, raised solid-black buttons with an inset sheen, and a full run of live CSS UI mockups - a layered kanban app, an API-connector flow, trigger/condition/action rules, and a project dashboard - carry the whole product tour with zero image assets. It ships a real site, not just a landing page: 15 page templates including a sticky-date changelog and a card-grid blog (both Astro content collections), an early-access waitlist, customers with case studies, and an about page with a team grid. Every visible string flows from one config file.

Property	Value
Tier	Pro ($49 launch / $59 reg.)
Category	SaaS / Startup
Body font	Inter Variable
Display font	Inter Variable
Palette	Monochrome - ink on off-white
Mockups	Live CSS UI (swap-ready for screenshots)

Included pages

/ - homepage: app-mockup hero, logo cloud, solutions, features bento, benefits, process, an adaptive dashboard, integrations, customers, testimonials, pricing, FAQ, and a closing CTA (20 sections)
/features/, /pricing/, /customers/, /resources/
/about/ - mission hero, logo strip, a values split, and a team grid with socials
/contact/ - provider-switched form with channel cards
/blog/ and /blog/[slug]/ - blog index + post (content collection)
/changelog/ - sticky-date release timeline (content collection)
/waitlist/ - early-access page with a working demo submit
/sections/ - live gallery of every section
/privacy/, /terms/, /404

What makes Vertex different

A product tour, not just a hero - the page runs on live CSS interface mockups (a layered kanban app, an API-connector flow, trigger/condition/action rules, and a project dashboard), so it reads as real software from the first scroll with no image assets to manage.
A complete site out of the box - 15 page templates including a sticky-date changelog and a blog (both Astro content collections), an early-access waitlist, customers with case studies, and an about page with a team grid.
A config-driven mega-menu - multi-column hover dropdowns, promo cards, and plain-link support, all defined in site.ts. Add a dropdown or turn any item into a plain link without touching a component.
Swappable mockups - any built-in CSS mockup can be replaced with your own screenshot by setting a single image path in src/config/site.ts. Leave it empty to keep the mockup.
Edit one file, ship - every heading, link, price, menu item, color, and per-page SEO title flows from src/config/site.ts.

Localization

Vertex is i18n-ready. English stays the complete source in src/config/site.ts; every other language is an override file that only holds the translated keys, and every route has a twin under src/pages/[locale]/ that builds once a second language is registered. Links inside localized pages carry the language prefix, and <html lang> plus the hreflang alternates follow the page.

Copy src/i18n/locales/template.ts to src/i18n/locales/fr.ts, translate the keys you need (the file mirrors src/config/site.ts), then register the language in src/i18n/config.ts.

Step by step, with the checklist: Add a language.

Agent-ready

The theme ships an AGENTS.md at its root, plus a CLAUDE.md that points at it. Claude Code, Cursor, Copilot and Codex read these on open, so an agent starts with the file map, the task routing table, the design invariants worth preserving, and the traps that break this theme silently. For Vertex that means the vtx- behaviour hooks, the two blog data sources and the fixed /blog/post/ route.

How to brief an agent and what to expect: Working with AI agents.

What’s next

Configure → site.ts - identity, the mega-menu, every section, each page’s hero copy, per-page SEO, pricing, the 404 page, contact form, footer, analytics and social all flow from this one file.
Customize → Colors - the monochrome palette and Inter type live in src/styles/global.css. The @theme token block controls every color and the raised-button treatment.
Configure → Forms - set contactForm.provider (Formspree / FormSubmit / Netlify) and your form ID or email in site.ts.
Add your content - blog posts go in src/content/blog/ and changelog entries in src/content/changelog/ (Markdown).
Swap the mockups - set hero.image, adaptive.image, or a per-item image in src/config/site.ts to replace any built-in CSS mockup with a real screenshot from /public.