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.

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.