Contour

Live preview ->

Contour is a complete website system for technical SaaS and operational technology teams that need to explain complex products with precision. Condensed industrial typography, monospaced interface copy, fixed topographic linework, rectangular controls, monochrome photography, and a controlled signal color create a credible technical identity without the usual startup gradients.

The demo is written for a field-intelligence platform, but the same structure works for infrastructure software, geospatial products, industrial technology, cybersecurity, observability, developer platforms, and technology studios that need both a product story and a convincing customer portfolio.

Property	Value
Tier	Pro ($59 regular)
Category	SaaS / Technology / Portfolio
Display font	Barlow Condensed
Label font	JetBrains Mono Variable
Palette	Mineral white, near-black, editable signal
Motion	GSAP, Lenis, and Astro page transitions
Configuration	Shared site content lives in `src/config/site.ts`

Included routes

/ - ten-section homepage with hero, overview, signal marquee, platform, deployments, metrics, pricing, testimonials, FAQ, and contact
/platform/ - platform architecture, product visual, system layers, security, and CTA
/work/[slug]/ - six generated deployment case studies
/blog/ and /blog/[slug]/ - field journal index and three generated Markdown articles
/contact/ - configurable platform inquiry
/privacy/, /terms/, and /404.html
Generated sitemap and robots output

The production build generates 16 static pages.

What makes Contour different

The visual language feels engineered - industrial display type, mono labels, topographic linework, hard-edged controls, and signal-color details create a distinct technology identity.
The platform story has a complete route - the architecture page moves from a product visual through connect, resolve, operate, and remember layers into critical-operations controls.
Customer proof is built as a portfolio - six configured deployments alternate between narrow and wide cards and open into complete case-study pages.
Motion follows the operating metaphor - scroll-linked hero movement, fixed topo surfaces, continuous signal bands, reveals, parallax, and grayscale-to-color media share one rhythm.
The signal color can be previewed live - one permanent theme.accent value drives the brand while an optional six-color visitor switcher demonstrates alternatives across routes.
Shared content has one source of truth - identity, images, platform copy, deployments, pricing, forms, labels, legal content, metadata, accessibility text, and SEO live in src/config/site.ts.
Long-form writing stays comfortable - field-journal articles use Astro Content Collections and Markdown while their surrounding interface remains configurable from site.ts.

Contour-specific setup

Change the identity and signal color

Start in src/config/site.ts. The identity block controls the name, legal name, URL, language, favicon, wordmark, status, and metadata defaults.

The permanent signal color lives in:

theme: {
  accent: "#d6df24",
  accentText: "#1e211f",
}

The optional floating preview palette is configured in previewAccentSwitcher. Edit its colors or set enabled: false to remove it.

Edit the homepage and platform

The main homepage configuration blocks are:

hero
overview
signalBand
platform
workShowcase
metrics
pricing
testimonials
faq
contact

The dedicated product route is controlled by platformPage, including the opening copy, product visual, architecture layers, security items, and CTA.

Add or edit deployments

Deployment pages are generated from siteConfig.workShowcase.projects. Every entry supports:

slug, URL, title, category, and year
cover image and editable alt text
summary and multiple story paragraphs
modules, outcome, and a highlighted metric
gallery images with individual alt text

Adding a configured project generates its /work/[slug]/ route during the next build.

Add journal articles

Journal posts live in src/content/journal/. Each Markdown file defines its title, description, date, category, reading time, cover image, alt text, and article body.

The journal index, route base, date locale, back label, next-article label, and surrounding interface copy remain in siteConfig.journal.

Connect the contact form

Contour starts in safe demo mode and sends no data. Change siteConfig.contact.form.provider to one of:

formspree
formsubmit
netlify
custom
demo

The same block controls the endpoint, method, fields, placeholders, required states, submission label, and response messages.

Motion and accessibility

Contour uses Lenis for smooth scrolling and GSAP for the hero, viewport reveals, and image movement. CSS handles continuous marquees, fixed topographic surfaces, image hover states, signal transitions, and button interactions. prefers-reduced-motion receives native scrolling and stable layouts, while semantic navigation, keyboard controls, editable alt text, skip navigation, sitemap output, and responsive typography remain intact.