SaaS template
The working application foundation: data, behavior, pages, modules, navigation, and permissions.
Create the visual system
Make your SaaS look unmistakably yours.
Choose the colors, surfaces, spacing, and mode that define your product. BuildWithHQ applies those decisions across the application—without turning your brand layer into a second codebase.
HarborOps
OverviewCustomersWork ordersReports
OperationsNew work order
Open work28
On schedule94%
Active crews12
Theme or template?
One defines the product. The other defines its presentation.
A SaaS template can include pages, records, workflows, modules, menus, permissions, and a starting theme. The theme is the visual layer you can adapt to your own brand or to each product you launch.
Theme
The shared design system: primary actions, backgrounds, surfaces, text, borders, spacing, corner radius, and light or dark mode.
A focused workflow
01
02
03
From brand direction to a production-ready theme.
Choose the visual direction
Set the primary color family, surface hierarchy, text contrast, spacing rhythm, and corner style that fit the product.
Preview real product states
Review forms, tables, cards, charts, dialogs, empty states, errors, focus states, and narrow screens—not only a hero mockup.
Publish a versioned theme
Release through the builder’s supported theme workflow so applications resolve a stable, reviewable set of visual decisions.
Light and dark
Two modes. Two deliberately designed systems.
Dark mode is not a color inversion. Each mode needs its own readable surface ladder, emphasis levels, interaction states, and contrast checks.
Harbor Light
Bright · operationalClean white working surfaces, a quiet page background, navy text, and a decisive blue action color.
Harbor Dark
Focused · high contrastLayered deep surfaces, brighter interactive blue, and carefully tuned text colors for sustained product use.
A small, shared vocabulary
Change the system—not every screen.
Theme tokens give registered components a common source for color, spacing, and radius. That keeps the application coherent as you add pages, reuse modules, or launch another product.
The supported contract includes primary action states, page and surface colors, primary and muted text, borders, spacing, and corner radius. Advanced visual treatments belong in reviewed components, where they can be tested and versioned.
--runtime-primary--runtime-primary-strong--runtime-primary-tint--runtime-page--runtime-surface--runtime-ink
The safe boundary
A theme changes how the product looks. It never changes who can see the data.
BuildWithHQ keeps branding separate from authority. Tenant isolation, User Types, DataRoles, locations, server-side data scope, and registered actions remain in control.
A theme can control
- Primary, strong, and tinted brand colors
- Page, surface, and raised-surface colors
- Primary and muted text
- Borders, spacing, and corner radius
- Light, dark, or system mode
A theme cannot control
- Tenant or customer selection
- Record, field, action, AI, or API permissions
- Data queries or server-side bindings
- Executable scripts or arbitrary runtime CSS
- Unregistered component behavior
Ready to publish
A professional theme survives the whole application.
Before release, review the states customers will actually encounter.
Readable everywherePrimary and muted text remain clear across page, surface, and raised-surface backgrounds.
Complete interactionsHover, focus, selected, disabled, loading, success, and error states are distinct.
Real componentsForms, tables, cards, charts, dialogs, navigation, and empty states have been reviewed.
Responsive layoutsThe visual system holds together on desktop, tablet, and phone widths.
Keyboard and motionFocus remains visible, and optional motion respects reduced-motion preferences.
Versioned releaseThe theme key and released values are recorded with the product version.
Your product. Your visual identity.
Start with the foundation. Finish with your brand.
Build and preview without a charge while your SaaS is still in development. When it goes live, choose the commercial model that fits how you use and sell it.