Sovren Software.github.io

sovren-software

Sovren Software — sovren.software

Marketing site for Sovren Software, the company behind the Sovren Stack: a sovereign computing platform spanning OS, identity, and programmable finance.

Live at sovren.software

What Is the Sovren Stack?

The Sovren Stack is three products that together give individuals full-stack digital sovereignty:

Product	Layer	Status
Esver OS	Computing — declarative NixOS system	Ships Summer 2026
Visage	Identity — local face auth via PAM + ONNX	Live · v0.2.0 · MIT
MrHaven	Finance — non-custodial USDC time vault on Base L2	Live on mainnet

This website is the public face of all three products and the ecosystem manifesto.

Tech Stack

Layer	Technology
Framework	SvelteKit 2.x + `@sveltejs/adapter-static`
3D Scene	Three.js (wireframe cube, grid, particles, product monoliths)
Animation	GSAP 3.x
Font	Geist Mono Variable (self-hosted)
Build	Vite 7.x
Deploy	GitHub Actions → GitHub Pages → Cloudflare proxy
Domain	`sovren.software` (CNAME in `static/CNAME`)

Quick Start

npm install
npm run dev          # http://localhost:5173
npm run build        # static output → dist/
npm run preview      # preview production build
npm run check        # svelte-check type validation
npm run lint         # ESLint
npm run format       # Prettier
npm run generate-og  # regenerate static/og-image.png

Requirements: Node.js 20+ (see .nvmrc)

Project Structure

src/
├── app.css                          # Global design tokens + theme definitions
├── app.html                         # HTML shell with JSON-LD structured data
├── lib/
│   ├── Nav.svelte                   # Navigation with theme toggle
│   ├── ProductHero.svelte           # Reusable hero section
│   ├── Overview.svelte              # Reusable overview + spec table
│   ├── PillarList.svelte            # Reusable numbered feature list
│   ├── CtaSection.svelte            # Reusable call-to-action section
│   └── three/
│       ├── Scene.svelte             # Svelte wrapper for Three.js canvas lifecycle
│       ├── SceneManager.js          # Core 3D scene: camera, renderer, animation loop, theme colors
│       └── ProductMonoliths.svelte  # Interactive 3D product panels on home page
├── routes/
│   ├── +layout.svelte               # Global layout: Scene, Nav, footer, theme logic
│   ├── +layout.js                   # Prerender flag (static site generation)
│   ├── +page.svelte                 # Home page: hero, product grid, thesis
│   ├── +error.svelte                # 404 error page
│   ├── esver/+page.svelte       # Esver OS product page
│   ├── visage/+page.svelte          # Visage product page
│   ├── mrhaven/+page.svelte         # MrHaven product page
│   └── ecosystem/+page.svelte       # Ecosystem manifesto page
static/
├── CNAME                            # GitHub Pages custom domain
├── _headers                         # Security headers (Cloudflare Pages / reference for CF Transform Rules)
├── fonts/GeistMono-Variable.woff2   # Self-hosted font
├── favicon.ico                      # 32×32 ICO
├── favicon.svg                      # SVG favicon (wireframe cube mark)
├── favicon-32x32.png                # 32×32 PNG
├── favicon-16x16.png                # 16×16 PNG
├── apple-touch-icon.png             # 180×180 for iOS
├── icon-192.png                     # PWA icon
├── icon-512.png                     # PWA icon
├── manifest.webmanifest             # Web app manifest (PWA)
├── og-image.png                     # 1200×630 OG image (Geist Mono rendered via Satori)
├── robots.txt                       # Crawler access rules
├── sitemap.xml                      # All routes with lastmod dates
├── llms.txt                         # AI crawler context file
└── BingSiteAuth.xml                 # Bing Webmaster verification
scripts/
└── generate-og.js                   # OG image generator (Satori + Resvg, uses Geist Mono TTF)

Architecture

Theme System (Light / Dark)

The site supports light and dark modes with a cinematic toggle in the navigation.

Default: Light mode (:root / [data-theme='light'])
Toggle: Button in Nav.svelte calls toggleTheme() in +layout.svelte
Persistence: localStorage.getItem('theme') with system preference fallback via prefers-color-scheme
Mechanism: data-theme attribute on <html> drives CSS variable swaps
3D sync: SceneManager.js observes data-theme via MutationObserver and updates fog, wireframe, grid, and particle colors in real time

All colors use CSS custom properties — no hardcoded color values in components.

3D Scene (Three.js)

A full-viewport 3D background renders behind all page content:

Canvas: position: fixed, z-index: -1, pointer-events: none — sits behind all UI
Elements: Rotating wireframe cube, inner octahedron, infinite grid, volumetric dust particles
Interaction: Mouse parallax on cube rotation, scroll-linked grid drift
Theme-aware: Materials, fog color/density, and particle opacity adapt to light/dark mode
Lifecycle: Scene.svelte mounts/unmounts the canvas; SceneManager.js handles the animation loop and cleanup
Accessibility: Animations fully disabled when prefers-reduced-motion: reduce is set — checked at runtime and via CSS media query
Memory: destroy() correctly removes all event listeners using stored bound references, disposes all Three.js geometries and materials

ProductMonoliths.svelte exists as an interactive wireframe panel component but is currently unused — it was removed from the home page to reduce visual clutter.

Shared Components

Product pages (Esver, Visage, MrHaven) share four components with zero local CSS:

Component	Props	Purpose
`ProductHero.svelte`	title, category, status, tagline, size	Hero section
`Overview.svelte`	lead, specs[], stackNote, slot	Overview with spec table
`PillarList.svelte`	label, pillars[]	Numbered feature list
`CtaSection.svelte`	title, body, actions[]	Call-to-action with buttons

Design System

Centralized in src/app.css with 60+ design tokens covering:

Colors — Theme-aware via --bg, --surface, --border, --text-primary/secondary/muted/ghost
Typography — Fluid clamp() scale from --fs-hero down to --fs-label-xs
Spacing — --space-xs through --space-7xl
Layout — --max-w, --max-w-prose, --nav-h, --z-nav
Transitions — --transition-fast, --transition-slow

Rules: one typeface only, no color for emphasis (use weight/spacing), all values via tokens.

Deployment

npm run check        # must pass before pushing
npm run lint         # must pass before pushing
npm run build        # verify build passes
git push             # GitHub Actions auto-deploys from main

Output: dist/ directory (static adapter)
DNS: 4 GitHub Pages A records + www CNAME → sovren-software.github.io, proxied via Cloudflare
static/CNAME contains sovren.software — do not delete
CI runs check → lint → build in sequence before deploying

Security Headers

GitHub Pages cannot set HTTP response headers. Security is enforced at two levels:

Browser-level (active now): Content-Security-Policy, Referrer-Policy, and X-Content-Type-Options are set via <meta http-equiv> in app.html
CDN-level (manual): X-Frame-Options, HSTS, COOP, CORP, and Permissions-Policy must be configured as Cloudflare Transform Rules — see SECURITY.md for exact steps

The static/_headers file is the authoritative record of all required headers and will be auto-enforced if the site ever migrates to Cloudflare Pages.

SEO & AI Discoverability

app.html — JSON-LD structured data (Organization + WebSite schemas), favicon suite, manifest, OG/Twitter defaults
Each page — <svelte:head> with unique title, description, Open Graph meta, Twitter Card tags, and canonical URL
static/og-image.png — 1200×630 social preview image rendered with actual Geist Mono font via Satori
static/llms.txt — full product descriptions for AI crawlers (ChatGPT, Perplexity, Claude)
static/sitemap.xml — all 5 routes with <lastmod> dates
Cloudflare proxy prevents GitHub/Fastly from blocking AI crawler IPs
Bing Webmaster Tools verified

Code Quality

Linting: ESLint with eslint-plugin-svelte — run via npm run lint
Type checking: svelte-check — run via npm run check
Formatting: Prettier with prettier-plugin-svelte — run via npm run format
CI: GitHub Actions runs check → lint → build on every push to main
Dependencies: Dependabot configured for weekly npm dependency PRs

The site now routes the Esver CTA through a configurable marketing URL in src/lib/marketing.js.

Edit src/lib/marketing.js and set:

export const BREVO_SIGNUP_URL = '__SET_BREVO_SIGNUP_URL__';

to your Brevo hosted signup form URL (example format: https://xxxx.sibforms.com/serve/...).

If not set, the CTA falls back to mailto: so the button still functions.

2) Brevo dashboard setup (minimal)

Create list: MAIN_NEWSLETTER
Create a sign-up form (Marketing → Forms)
Enable double opt-in
Set destination list to MAIN_NEWSLETTER
Copy hosted form URL into src/lib/marketing.js
Create automation: trigger on contact added to MAIN_NEWSLETTER
Add one email step (delay 1–2 minutes), then activate

2.5) Phase 2 cohesive UX behavior

The Esver page now includes a native launch briefing section with an embedded Brevo form iframe.
If the signup URL is not an embeddable http(s) URL, the page automatically falls back to a direct CTA link.
The closing CTA now routes users deeper into the ecosystem (/ecosystem + /visage) to avoid duplicate signup prompts.

3) Single welcome email template (v1)

Use this as the first and only automation email for now:

Subject: Welcome to Sovren — launch briefing subscribed
Preview: You are in. We will send one launch briefing and occasional high-signal updates.

Body:

You are subscribed to the Sovren launch briefing.

What you should expect:
- One operational briefing when Esver OS goes live
- Occasional high-signal updates across the Sovren Stack (OS, identity, programmable finance)
- No spam. No feed noise. No growth-hack sequences.

Why this exists:
Sovren builds software for operators who want leverage without surrendering control.
Privacy is not a feature. Sovereignty is the baseline.

Explore the stack:
- Esver OS: https://sovren.software/esver
- Visage: https://sovren.software/visage
- MrHaven: https://sovren.software/mrhaven

— Sovren Software
https://sovren.software

4) Verification checklist

Open /esver and verify the launch briefing section renders.
Confirm iframe form loads (or fallback button appears if embed unavailable).
Submit a test email and confirm contact lands in MAIN_NEWSLETTER.
Confirm the single welcome automation email is sent.
Confirm /ecosystem and /visage links in final CTA work.

IDE Setup

VS Code + Svelte for VS Code

For AI-assisted development, see CLAUDE.md for the full design system reference, copy guidelines, and product context.

License

Exception: Visage is MIT-licensed and open source.

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing