Sable

Live preview →

Sable is a complete Astro theme for software companies that need to explain a complex product without making the website feel complicated. It combines restrained enterprise styling with interactive product demonstrations, case studies, service pages, editorial content, accessible galleries, and configurable lead capture.

The theme works especially well for enterprise AI, automation platforms, operations software, internal service desks, security products, and technical B2B SaaS companies.

Property	Details
Tier	Pro — $49 regular price
Category	Enterprise AI / Operations SaaS
Runtime	Astro 7, Tailwind CSS 4, TypeScript
Motion	GSAP and Lenis
Content	Services, work, and journal collections
Configuration	Shared content and settings in `src/config/site.ts`

Included pages

Sable generates 23 static pages in the production build:

/ — product-led homepage
/platform/ — detailed platform overview
/services/ — services index
/services/[slug]/ — five service detail pages
/work/ — case-study index
/work/[slug]/ — six case-study detail pages
/journal/ — article index
/journal/[slug]/ — three Markdown articles
/studio/ — company and team page
/contact/ — configurable contact form
/privacy/ and /terms/ — legal pages
Custom 404, sitemap, robots, and SEO metadata

What makes Sable different

Product proof instead of decorative mockups

The homepage includes a mouse-responsive hero field, an interactive Sable Operator workspace, switchable scenarios, animated execution states, and a configurable workflow builder. These sections are designed to demonstrate how a product works—not merely decorate the page.

If you already have real product screenshots, the supplied interface demonstrations can be replaced with local or remote images from the central configuration.

A complete content system

Services, case studies, and journal articles are stored as Astro content collections. Adding a new entry generates the relevant detail page while preserving the theme’s layout, metadata, and navigation patterns.

Deliberate motion

Sable uses GSAP and Lenis for smooth scrolling, controlled reveals, continuous marquees, and tactile hover states. Reduced-motion preferences are respected so the experience remains usable for every visitor.

Accessible galleries

Case-study galleries include a proper lightbox with:

Keyboard navigation
Mobile swipe gestures
Image captions
Focus management
Viewport-safe previous and next controls

One source of truth

Brand identity, navigation, homepage content, product demonstrations, services, case studies, forms, footer content, legal copy, metadata, and SEO defaults are editable from src/config/site.ts.

First setup

Open src/config/site.ts first. This is where you can update:

Company name, logo, description, and contact details
Navigation and calls to action
Homepage copy and product demonstrations
Services and featured work
Customer names and use cases
Contact form provider and endpoint
Footer links and legal information
Default metadata, social sharing, and SEO settings

The theme is intentionally structured so routine customization does not require editing page components.

Services

Service entries live in:

src/content/services/

Each entry can define its own positioning, description, supporting content, visual treatment, and metadata. The collection powers both the services index and the generated detail routes.

Case studies

Case studies live in:

src/content/work/

The six included examples demonstrate different layouts and content densities. A case study can include:

Client and project information
Industry and service labels
Introductory and long-form descriptions
Metrics and outcomes
Image galleries
Captions and supporting copy
Next-project navigation

Images can use remote URLs or local files placed in public/.

Journal

Journal entries live in:

src/content/journal/

Articles are written in Markdown and automatically appear on the journal index. Each entry supports its own title, description, publish information, metadata, and body content.

Contact form

The contact page can be connected without rewriting the component. Select and configure the form provider in src/config/site.ts.

Supported approaches include:

Demo mode for local previews
Formspree
FormSubmit
Netlify Forms
A custom form endpoint

Before publishing, replace the example contact details and select the provider you intend to use.

Replacing product visuals

The interactive product sections work out of the box, but buyers are not locked into them. In src/config/site.ts, the relevant visual can be switched to an image and pointed at either:

/images/your-product-screen.webp

or a complete remote image URL.

This makes it possible to preserve the section layout and motion while showcasing a real dashboard, application screen, or product workflow.

Localization

Sable keeps shared interface labels and editable content centralized so translated strings do not have to be hunted down across page components. Localized routes and interface copy can be configured to suit the languages required by the project.

Before deployment

Replace all example identity and contact details in src/config/site.ts.
Configure the contact form provider.
Replace demo product visuals and Unsplash images where needed.
Review service, case-study, and journal content.
Update the canonical site URL and social metadata.
Run the production build and review every generated route.