Synthora — Documentation & User Manual

Comprehensive guide for installing, customizing, and deploying the Synthora SaaS HTML template.

1. Theme Overview

Synthora is an ultra-premium, high-performance HTML5/CSS3 template engineered specifically for modern SaaS companies, AI startups, operations automation platforms, and technology ventures.

Built with 100% vanilla web standards, Synthora eliminates heavy external frameworks (no Bootstrap, Tailwind build runtime, React, or jQuery). The entire bundle loads instantly, animates smoothly at 60fps, and can be edited in any code editor.

2. Features

3. Pages Included

Page File Purpose Key Components
Home index.html Primary SaaS conversion landing page Hero with canvas & 3D console, marquee, sticky story panels, capabilities accordion, impact bar chart, orbit animation, testimonials slider, pricing switcher, blog preview, footer.
Features features.html In-depth product and feature specification page Sticky scrollspy jump subnav, 5 detailed pillar sections (agents, playbooks, approvals, audit, live rollback demo), 12-item production matrix, 3-way platform comparison table.
Feature Detail feature-detail.html Deep dive into Approval Policies & Governance Interactive rule syntax builder (IF/THEN/ELSE), 3 production scenario tabs (AP Invoice, Refund, Bank Change), deterministic vs LLM breakdown, adjacent capabilities grid.
Integrations integrations.html Integrations directory & developer hub Dual marquee rows, 9-category filter sidebar, debounced search bar, 32 integration cards, permission scope tree mock, developer tabbed code block with clipboard copy, request form.
Pricing & Calculator pricing.html Dedicated pricing, tiers, and cost estimator Monthly/annual billing toggle (-20%), 3 plan tiers, interactive usage volume slider (10K–500K runs), 16-row feature comparison matrix, 8-item FAQ accordion.
Blog Publication blog.html Editorial publication and resources hub Hero featured article card, topic filter chips (All, Research, Engineering, Guides, Stories), 6+ CSS artwork post cards, newsletter box.
Article Deep Dive blog-detail.html Long-form editorial article and whitepaper Category/author header, sticky TOC sidebar, rich editorial typography, drop caps, intervention data matrix, YAML policy block with 1-click copy, author bio.
Contact & Demo contact.html Demo booking and direct inquiry page Direct channels (Sales, Security, Support), live desk status, multi-select booking form with validation, global offices (SF, London, Singapore) with timezones, FAQ.
Help Center help.html Knowledge base, guides, and playbooks Live debounced instant search, 6 knowledge categories, ready-to-deploy playbooks with YAML snippets, troubleshooting accordion, support escalation banner.
About Company about.html Company story, manifesto, and team Hero stats, Synthora Manifesto, 4 core principles cards, company milestones timeline (2024–2026), leadership & engineering grid, careers teaser.
Trust & Legal terms.html Legal terms, privacy policy, and SOC 2 security Sticky navigation sidebar, tabbed section switcher, Master Terms (Zero-Training Guarantee), Privacy Policy (GDPR/CCPA), Security Whitepaper, DPA.
Sign In / Portal login.html Authentication and portal login screen Centered auth card with ambient glow, SSO buttons (Okta SAML, Google Workspace), work email login, passwordless magic link toggle, SOC 2 / TLS badges.
Changelog changelog.html Public release history and roadmap Release cadence stats, version feed (v1.2.0, v1.1.0, v1.0.0), categorized badges (New, Improved, Fixed), detailed feature notes.
Documentation documentation.html Interactive offline user guide Sticky navigation, token reference, step-by-step customization guides, code snippets, troubleshooting.

4. Design System

Color Tokens

:root {
  --ink: #12110F;        /* Base dark background */
  --ink-2: #1B1A17;      /* Secondary dark */
  --ember: #FF5B1F;      /* Primary accent orange */
  --ember-deep: #C43D0A; /* Darker accent */
  --ember-soft: #FFB08A; /* Soft accent */
  --mint: #7FE0C9;       /* Success / verification teal */
  --warn: #F2B544;       /* Warning amber */
}

Typography

5. Folder Structure

saas company/
├── assets/
│   ├── css/
│   │   ├── ordin.css          # Included alternate base theme stylesheet
│   │   └── synthora.css       # Primary master stylesheet for all 14 pages
│   ├── images/
│   │   ├── blog-agent-latency.svg       # Latency & Speed Benchmarks glossy visual
│   │   ├── blog-confidence-scores.svg   # Human-in-the-Loop & Confidence Heatmap
│   │   ├── blog-featured-approvals.svg  # Featured 2.1M Approvals Checkpoint visual
│   │   ├── blog-parallel-freight.svg    # Parallel Freight Supply Chain Ledger visual
│   │   ├── blog-playbook-audit.svg      # Compliance & Auditor Playbook visual
│   │   ├── blog-rollback-engine.svg     # 5-System Database Rollback visual
│   │   └── blog-zero-blackbox.svg       # Transparent Glassmorphic Fintech Shield
│   └── js/
│       ├── ordin.js           # Included alternate base interactive script
│       └── synthora.js        # Primary master interactive script with 20+ modules
├── about.html                 # About Company, Manifesto, Principles & Team
├── blog.html                  # Editorial Blog & Resources Publication Hub
├── blog-detail.html           # Long-form Article & Whitepaper Deep-Dive
├── changelog.html             # Product Release History & Version Notes
├── contact.html               # Demo Booking, Inquiry Form & Global Offices
├── documentation.html         # Interactive Offline Browser Documentation Manual
├── feature-detail.html        # Approval Policies & Governance Deep-Dive
├── features.html              # Product Features & Deep Capabilities Page
├── help.html                  # Knowledge Base, Search & Playbook Library
├── index.html                 # Flagship SaaS Landing Page
├── integrations.html          # Searchable & Filterable Integrations Hub
├── login.html                 # Focused Authentication & Portal Login Card
├── pricing.html               # Dedicated Pricing, Calculator & Feature Matrix
├── terms.html                 # Trust Center, Master Terms, Privacy, SOC 2 & DPA
├── DOCUMENTATION.md           # Complete Markdown Documentation Manual
├── README.md                  # Quick Start Guide
└── CHANGELOG.md               # Version History & Release Notes

6. Getting Started

Synthora requires no build tools or dependencies. You can open and view it immediately:

  1. Direct Browser Open: Double-click index.html in your file manager to view it in any browser.
  2. Using VS Code Live Server: Right-click index.html in VS Code and choose "Open with Live Server".
  3. Using Python Server: Run python -m http.server 8000 in your terminal and open http://localhost:8000.

7. Customization Guide

Changing the Brand Logo

The logo is defined in the inline SVG sprite near the top of each HTML file (line 20):

<symbol id="logo" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="5.5" fill="currentColor"/>
  <path d="M16 4a12 12 0 1 1-10.4 6" stroke="#FF5B1F" stroke-width="2.6" fill="none" stroke-linecap="round"/>
</symbol>

To use an image file instead, update the <a class="brand"> element in the header:

<a href="index.html" class="brand">
  <img src="assets/images/logo.svg" alt="Brand" style="height:28px;"> YourBrand
</a>

Changing Colors

Open assets/css/synthora.css and modify the CSS variables in the :root and body[data-theme] blocks (lines 14–77).

8. CSS Architecture

Styles are structured into logical blocks inside assets/css/synthora.css:

9. JavaScript Modules

assets/js/synthora.js contains 17 self-contained interactive modules:

10. Responsive Design

Synthora adapts smoothly across all viewport widths:

11. Assets & Icons

The theme includes 26 inline SVG icons inside an SVG symbol sprite at the top of each page. Icons are rendered via:

<svg class="icon"><use href="#i-check"/></svg>

Available icons include: #logo, #logo-mono, #i-arrow, #i-check, #i-shield, #i-key, #i-globe, #i-lock, #i-mail, #i-refund, #i-user, #i-db, #i-search, #i-dollar, #i-branch, #i-play, #i-layers, #i-clock, #i-undo, #i-bell, #i-box, #i-eye, #i-cpu, #i-users, #i-code, #i-chart.

12. Dependencies

13. Step-by-Step Customization Examples

Adding an Integration Card

<a href="#" class="tile" data-cat="finance-erp" data-name="sage intacct finance" data-pop="1" data-new="0">
  <span class="badge badge--pop">Popular</span>
  <div class="tile__top">
    <span class="lmark" style="background:#00DC82;color:#fff">S</span>
    <div><h3>Sage Intacct</h3><span class="tile__cat">Finance & ERP</span></div>
  </div>
  <p>Cloud financial management and ledger.</p>
  <div class="tile__caps"><span>Read</span><span>Write</span></div>
</a>

14. SEO & Meta Information

Each page contains standard semantic meta tags in the <head> for description, viewport, and theme color. Add Open Graph tags (e.g. og:title, og:image) for enhanced social sharing previews.

15. Browser Support

16. Troubleshooting

Icons Missing?

Ensure the <svg><defs> sprite block at lines 18–47 in the HTML file has not been deleted.

Copy Button Not Working?

The Clipboard API is restricted on local file:// URLs by some browsers. Run the template on a local server (e.g. VS Code Live Server or Python HTTP server) or an HTTPS web host.

17. Frequently Asked Questions (FAQ)

Q: Can I use this template with WordPress or React?
A: Yes, the clean semantic HTML structure makes it easy to convert into React/Vue components or WordPress PHP templates.

Q: Does this template require a server backend?
A: No, it is a 100% static client-side template.

18. Changelog

Version 1.2.0 — Multi-Page Expansion & Marketplace Complete Suite (October 2026)

Version 1.0.0 — Initial Marketplace Release (October 2026)

19. Credits

Fonts provided by Google Fonts under SIL Open Font License / Apache 2.0. Icons and code developed specifically for Synthora.

20. License Note

Please refer to the terms of your marketplace license (Regular or Extended) for applicable usage rights and restrictions.