Squiggleverse/readme.md

Squiggleverse Landing Page Design Document / Spec Sheet

1. Project Summary

Project: Squiggleverse landing page
Primary goal: Present Squiggleverse as a whimsical, polished, education-through-play platform using a simple, high-performing homepage structure.

Recommended layout:

1. Logo / hero branding
2. Embedded or self-hosted promo video
3. Short explanatory text
4. Optional CTA row: “Watch Demo,” “Join Mailing List,” “Contact Us”

Core positioning text:

Squiggleverse is a modular, multi-platform, game-based “stealth” learning system that teaches grammar, usage, and style through innovative gameplay, whimsical characters, and creative narratives co-authored by the player.

The page should feel like a lightweight marketing splash page rather than a heavy SaaS homepage.

---

2. Recommended Web Stack

Framework

Use SvelteKit as the primary framework.

SvelteKit is appropriate here because the landing page can be statically rendered, very fast, SEO-friendly, and simple to deploy. SvelteKit supports prerendering/static generation and server-side rendering options per route, which is ideal for a marketing page that may later grow into a larger app or dashboard.

Suggested stack

SvelteKit
TypeScript
Vite
CSS / SCSS / PostCSS
Static adapter or platform adapter
PNPM
ESLint + Prettier

Deployment targets

Good options:

Cloudflare Pages
Netlify
Vercel
Static hosting behind nginx/Caddy
CapRover container deployment

For this page, static generation is preferred unless the site needs dynamic personalization, server-side forms, authentication, or CMS previews.

Recommended SvelteKit page config:

// src/routes/+page.ts
export const prerender = true;
export const ssr = true;

For a landing page, keep SSR/prerendering enabled so the logo, text, metadata, and canonical content are present in the initial HTML.

---

3. Page Structure

Route

/

File layout

src/
  lib/
    assets/
      squiggleverse-logo.webp
      squiggleverse-bg.webp
      squiggleverse-poster.webp
      squiggleverse-demo.mp4
    components/
      HeroLogo.svelte
      VideoCard.svelte
      IntroText.svelte
      CTAButtons.svelte
      StarBackground.svelte
  routes/
    +layout.svelte
    +layout.ts
    +page.svelte
    +page.ts
    +error.svelte
  app.html
  app.css
static/
  favicon.svg
  robots.txt
  site.webmanifest
  og-image.webp

---

4. Visual Design Direction

Overall style

The landing page should use:

Whimsical
Space-themed
Purple/violet palette
Soft glow effects
Rounded cards
Centered single-column layout
Large readable text
Minimal navigation

Layout wireframe

┌─────────────────────────────────────┐
│                                     │
│              Logo                   │
│                                     │
│        ┌───────────────────┐        │
│        │                   │        │
│        │      Video        │        │
│        │                   │        │
│        └───────────────────┘        │
│                                     │
│        Short description text       │
│                                     │
│      [ Watch Demo ] [ Contact ]     │
│                                     │
└─────────────────────────────────────┘

Responsive behavior

Desktop

Max content width: 960–1100px
Logo width: 520–720px
Video width: 800–960px
Text width: 680–820px

Tablet

Content width: 90vw
Logo width: 70–80vw
Video width: 90vw
Text width: 80–90vw

Mobile

Single column
Logo width: 86vw
Video width: 92vw
Text centered or slightly left-aligned if readability suffers
Font size reduced carefully

---

5. Color System

Use a constrained purple palette.

:root {
  --color-bg-deep: #070014;
  --color-bg-space: #160030;
  --color-purple-dark: #2a0f56;
  --color-purple: #6b3fb3;
  --color-purple-light: #b58cff;
  --color-lavender: #f1e7ff;
  --color-white: #ffffff;
  --color-cyan-accent: #43d8ff;

  --glow-purple: 0 0 32px rgba(159, 95, 255, 0.45);
  --border-purple: rgba(190, 143, 255, 0.38);
}

Background

Use the provided starry background as a fullscreen visual layer.

Recommended CSS:

.page {
  min-height: 100svh;
  background:
    linear-gradient(
      to bottom,
      rgba(7, 0, 20, 0.2),
      rgba(54, 0, 95, 0.35)
    ),
    url('/assets/squiggleverse-bg.webp');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

For mobile, avoid background-attachment: fixed because it can cause jank.

@media (max-width: 768px) {
  .page {
    background-attachment: scroll;
  }
}

---

6. Typography

Primary recommendation

Use a highly readable sans-serif for body copy.

Good options:

Atkinson Hyperlegible
Nunito Sans
Inter
Lexend
Source Sans 3

For an educational product, Atkinson Hyperlegible or Lexend would fit well because they emphasize readability.

Font loading

Prefer self-hosted fonts using @font-face.

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Use font-display: swap to avoid invisible text during load.

---

7. Component Specification

HeroLogo.svelte

Purpose:

Displays the Squiggleverse logo centered at the top.

Requirements:

Use actual provided logo asset.
Do not recreate the logo in text.
Use responsive sizing.
Include alt text.
Avoid layout shift by declaring width/height or aspect ratio.

Example:

<script lang="ts">
  import logo from '$lib/assets/squiggleverse-logo.webp';
</script>

<div class="hero-logo">
  <img
    src={logo}
    alt="Squiggleverse"
    width="900"
    height="420"
    decoding="async"
  />
</div>

CSS:

.hero-logo {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

.hero-logo img {
  width: min(720px, 88vw);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(159, 95, 255, 0.45));
}

---

VideoCard.svelte

Purpose:

Displays the main Squiggleverse video or poster/video preview.

Preferred implementation:

Use native <video> for self-hosted promo video.
Use poster image.
Lazy-load if below fold, but in this layout it is likely above fold.
Avoid YouTube iframe unless necessary.

Native video gives better branding control, fewer third-party scripts, and better privacy/performance.

Example:

<script lang="ts">
  import poster from '$lib/assets/squiggleverse-poster.webp';
  import video from '$lib/assets/squiggleverse-demo.mp4';
</script>

<section class="video-card" aria-label="Squiggleverse demo video">
  <video
    controls
    preload="metadata"
    poster={poster}
    playsinline
  >
    <source src={video} type="video/mp4" />
    Your browser does not support the video tag.
  </video>
</section>

CSS:

.video-card {
  width: min(940px, 92vw);
  margin: 2rem auto 2.25rem;
  padding: clamp(0.5rem, 1.2vw, 0.9rem);
  border: 1px solid var(--border-purple);
  border-radius: 2rem;
  background:
    linear-gradient(
      180deg,
      rgba(28, 10, 72, 0.72),
      rgba(12, 4, 38, 0.78)
    );
  box-shadow:
    var(--glow-purple),
    inset 0 0 40px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
}

.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.45rem;
  background: #090019;
}

Video asset requirements

Format: MP4/H.264 baseline or high profile
Optional: WebM VP9/AV1 for modern browsers
Poster: WebP or AVIF
Resolution: 1280×720 minimum
Max video size target: 3–8 MB for landing page
Audio: compressed AAC, normalized
Captions: WebVTT file if voiceover exists

Add captions if there is spoken content:

<track
  kind="captions"
  src="/captions/squiggleverse-demo.vtt"
  srclang="en"
  label="English"
/>

---

IntroText.svelte

Purpose:

Displays the main product positioning copy.

Requirements:

Exact text preserved.
Readable line length.
High contrast.
No image-rendered text.

Example:

<section class="intro" aria-labelledby="intro-title">
  <h1 id="intro-title" class="sr-only">About Squiggleverse</h1>

  <p>
    Squiggleverse is a modular, multi-platform, game-based “stealth” learning
    system that teaches grammar, usage, and style through innovative gameplay,
    whimsical characters, and creative narratives co-authored by the player.
  </p>
</section>

CSS:

.intro {
  width: min(820px, 88vw);
  margin: 0 auto;
  text-align: center;
}

.intro p {
  margin: 0;
  color: var(--color-lavender);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

---

Optional CTAButtons.svelte

Even if the initial page is simple, adding a CTA is useful for conversion.

Recommended CTAs:

Primary: Watch Demo
Secondary: Contact Us
Optional: Join Mailing List

Example:

<div class="cta-row">
  <a class="button button-primary" href="#demo">Watch Demo</a>
  <a class="button button-secondary" href="mailto:hello@squiggleverse.com">
    Contact Us
  </a>
</div>

---

8. Accessibility Requirements

Required

Logo must have meaningful alt text.
Video must have controls.
Video needs captions if it contains speech.
Text must not be baked into images.
All interactive elements need visible focus states.
Color contrast should meet WCAG AA.
Animations/glows should respect prefers-reduced-motion.
Page must be keyboard navigable.

Reduced motion

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

Focus styling

:focus-visible {
  outline: 3px solid var(--color-cyan-accent);
  outline-offset: 4px;
}

---

9. SEO Specification

Rendering

Use prerendered HTML for the homepage. Search engines should receive real text content, not an empty SPA shell. SvelteKit can prerender static routes into static files, which fits this use case well.

Metadata

Implement in +page.svelte:

<svelte:head>
  <title>Squiggleverse | Game-Based Grammar, Usage, and Style Learning</title>
  <meta
    name="description"
    content="Squiggleverse is a modular, multi-platform, game-based stealth learning system for grammar, usage, and style."
  />
  <link rel="canonical" href="https://squiggleverse.com/" />

  <meta property="og:type" content="website" />
  <meta property="og:title" content="Squiggleverse" />
  <meta
    property="og:description"
    content="A whimsical game-based learning system for grammar, usage, and style."
  />
  <meta property="og:image" content="https://squiggleverse.com/og-image.webp" />
  <meta property="og:url" content="https://squiggleverse.com/" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Squiggleverse" />
  <meta
    name="twitter:description"
    content="A whimsical game-based learning system for grammar, usage, and style."
  />
  <meta name="twitter:image" content="https://squiggleverse.com/og-image.webp" />
</svelte:head>

Suggested title variants

Squiggleverse | Game-Based Grammar Learning
Squiggleverse | Learn Grammar Through Play
Squiggleverse | Stealth Learning Through Whimsical Gameplay

Suggested meta description

Squiggleverse is a modular, multi-platform, game-based stealth learning system that teaches grammar, usage, and style through whimsical gameplay.

Keep meta descriptions around 140–160 characters when possible.

Heading structure

Recommended:

<h1>Squiggleverse</h1>

Because the logo is graphical, include a visually hidden H1.

<h1 class="sr-only">Squiggleverse</h1>

Use only one H1 on the page.

Structured data

Add basic WebSite and Organization JSON-LD.

<svelte:head>
  <script type="application/ld+json">
    {JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'WebSite',
      name: 'Squiggleverse',
      url: 'https://squiggleverse.com/',
      description:
        'A modular, multi-platform, game-based stealth learning system for grammar, usage, and style.'
    })}
  </script>
</svelte:head>

If a company/entity name exists, add Organization.

Robots

static/robots.txt:

User-agent: *
Allow: /

Sitemap: https://squiggleverse.com/sitemap.xml

Sitemap

For one page, the sitemap is simple:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://squiggleverse.com/</loc>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

---

10. Performance Requirements

Core Web Vitals targets

Use these targets:

LCP: ≤ 2.5s
CLS: ≤ 0.1
INP: ≤ 200ms
Total JS: ideally under 100 KB compressed for this page
Initial image payload: ideally under 500 KB before video
Video: do not autoplay large media

LCP optimization

Likely LCP candidate:

Logo image
or
intro text block
or
video poster image

Recommendations:

Use optimized WebP/AVIF.
Declare image dimensions.
Preload the logo only if it is the true LCP element.
Avoid client-only rendering for hero content.
Do not load heavy JS before first paint.

Example preload:

<svelte:head>
  <link
    rel="preload"
    as="image"
    href="/assets/squiggleverse-logo.webp"
    type="image/webp"
  />
</svelte:head>

Only preload the logo if testing confirms it improves LCP.

CLS prevention

Set width/height on images.
Use aspect-ratio for video card.
Avoid late-loading web fonts without fallback sizing.
Reserve space for video controls/poster.
Avoid injecting CTA/forms above existing content after hydration.

Video performance

Use:

preload="metadata"
poster="/assets/squiggleverse-poster.webp"
playsinline
controls

Avoid:

autoplay
preload="auto"
large uncompressed MOV files
third-party iframe on first load

If YouTube/Vimeo is required, use a “lite embed” strategy:

Show poster image first.
Load iframe only after click.

Image optimization

Generate:

logo.webp
logo.avif
background.webp
background.avif
poster.webp
poster.avif
og-image.webp

Recommended sizes:

Logo: 900–1200 px wide
Background: 1920 px wide desktop, 960 px mobile variant
Poster: 1280×720
OG image: 1200×630

Use srcset for the background or use CSS media queries.

---

11. Security Specification

Content Security Policy

SvelteKit supports CSP configuration that helps restrict where scripts, styles, images, fonts, and other resources can load from. CSP is specifically useful for reducing XSS exposure.

Example starter CSP in svelte.config.js:

const config = {
  kit: {
    csp: {
      mode: 'auto',
      directives: {
        'default-src': ['self'],
        'script-src': ['self'],
        'style-src': ['self', 'unsafe-inline'],
        'img-src': ['self', 'data:'],
        'font-src': ['self'],
        'media-src': ['self'],
        'connect-src': ['self'],
        'frame-src': ['self'],
        'object-src': ['none'],
        'base-uri': ['self'],
        'form-action': ['self'],
        'frame-ancestors': ['none']
      }
    }
  }
};

export default config;

Notes:

Avoid unsafe-inline for scripts.
Style unsafe-inline may be necessary depending on SvelteKit output and deployment mode.
If using YouTube/Vimeo, frame-src and img-src need additional domains.
If using analytics, connect-src/script-src must include that provider.

Security headers

Recommended headers:

Content-Security-Policy
Strict-Transport-Security
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy
X-Frame-Options: DENY or CSP frame-ancestors 'none'
Cross-Origin-Opener-Policy: same-origin

Example SvelteKit hook:

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  const response = await resolve(event);

  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  response.headers.set(
    'Permissions-Policy',
    'camera=(), microphone=(), geolocation=(), payment=()'
  );

  return response;
};

For fully static deployment, set these headers at the host/CDN level instead.

Forms

If adding a mailing list form:

Use server-side validation.
Add rate limiting.
Use CSRF protection where applicable.
Never expose API secrets in client-side env vars.
Use honeypot field or Turnstile/hCaptcha if spam becomes a problem.

Environment variables

Use:

.env
PRIVATE_*
PUBLIC_*

Do not put API secrets in PUBLIC_*.

---

12. Privacy Considerations

Recommended:

Avoid third-party trackers initially.
Avoid third-party video if possible.
Self-host fonts.
Self-host video.
Self-host images.
Use privacy-friendly analytics only if needed.

Good analytics options:

Plausible
Fathom
Umami self-hosted
Cloudflare Web Analytics
No analytics for MVP

If analytics are added, update:

Privacy policy
Cookie notice if cookies are used
CSP domains

---

13. SvelteKit Implementation Sketch

src/routes/+page.svelte

<script lang="ts">
  import HeroLogo from '$lib/components/HeroLogo.svelte';
  import VideoCard from '$lib/components/VideoCard.svelte';
  import IntroText from '$lib/components/IntroText.svelte';
  import CTAButtons from '$lib/components/CTAButtons.svelte';
</script>

<svelte:head>
  <title>Squiggleverse | Game-Based Grammar, Usage, and Style Learning</title>
  <meta
    name="description"
    content="Squiggleverse is a modular, multi-platform, game-based stealth learning system that teaches grammar, usage, and style through whimsical gameplay."
  />
  <link rel="canonical" href="https://squiggleverse.com/" />
</svelte:head>

<main class="landing-page">
  <h1 class="sr-only">Squiggleverse</h1>

  <section class="hero" aria-label="Squiggleverse landing page">
    <HeroLogo />
    <VideoCard />
    <IntroText />
    <CTAButtons />
  </section>
</main>

src/app.css

:root {
  color-scheme: dark;

  --color-bg-deep: #070014;
  --color-bg-space: #160030;
  --color-purple-dark: #2a0f56;
  --color-purple: #6b3fb3;
  --color-purple-light: #b58cff;
  --color-lavender: #f1e7ff;
  --color-white: #ffffff;
  --color-cyan-accent: #43d8ff;

  --glow-purple: 0 0 32px rgba(159, 95, 255, 0.45);
  --border-purple: rgba(190, 143, 255, 0.38);

  font-family:
    'Atkinson Hyperlegible',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg-deep);
  color: var(--color-white);
}

img,
video {
  max-width: 100%;
}

.landing-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at top, rgba(123, 69, 202, 0.35), transparent 45%),
    linear-gradient(to bottom, rgba(7, 0, 20, 0.4), rgba(54, 0, 95, 0.45)),
    url('/assets/squiggleverse-bg.webp');
  background-size: cover;
  background-position: center top;
}

.hero {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.5rem) 1rem clamp(3rem, 7vw, 6rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--color-cyan-accent);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .landing-page {
    background-attachment: scroll;
  }
}

---

14. Build and Tooling

Package setup

pnpm create svelte@latest squiggleverse-landing
cd squiggleverse-landing
pnpm install
pnpm dev

Recommended dependencies

pnpm add -D prettier eslint typescript svelte-check vite

Optional:

pnpm add -D @sveltejs/adapter-static

Static adapter config

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

const config = {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: undefined,
      precompress: true,
      strict: true
    })
  }
};

export default config;

Quality checks

pnpm check
pnpm lint
pnpm build
pnpm preview

---

15. Performance Budget

Recommended launch budget:

HTML: < 30 KB
CSS: < 50 KB compressed
JS: < 100 KB compressed
Logo: < 200 KB
Background: < 300 KB desktop, < 150 KB mobile
Poster: < 250 KB
Video: < 8 MB
Third-party scripts: 0 initially
Fonts: < 150 KB total

Testing tools

Lighthouse
PageSpeed Insights
WebPageTest
Chrome DevTools Performance tab
SvelteKit build output

---

16. Browser Support

Target:

Latest Chrome
Latest Firefox
Latest Safari
Latest Edge
iOS Safari
Android Chrome

Graceful degradation:

No backdrop-filter required for usability.
No autoplay dependency.
No JavaScript dependency for reading core page content.

---

17. Content Requirements

Required homepage copy

Use exact copy unless changed by brand team:

Squiggleverse is a modular, multi-platform, game-based “stealth” learning system that teaches grammar, usage, and style through innovative gameplay, whimsical characters, and creative narratives co-authored by the player.

Optional additional copy

Use only if the page needs more conversion support:

Learn by playing.
Build stories with whimsical characters.
Practice grammar, usage, and style without worksheets.
Designed for modular, multi-platform deployment.

---

18. Launch Checklist

Visual

Logo displays crisply on desktop and mobile.
Video card scales correctly.
Background does not overpower text.
Text remains readable at all breakpoints.
CTA buttons, if used, are obvious but not visually noisy.

SEO

Unique title.
Meta description.
Canonical URL.
Open Graph tags.
Twitter card tags.
Robots.txt.
Sitemap.xml.
Visible/indexable body text.
Single H1.
No accidental noindex.

Performance

Images compressed.
Video uses poster and preload=metadata.
No unnecessary JS libraries.
No large animation library.
No layout shift.
Passes Lighthouse performance target.

Accessibility

Keyboard navigable.
Visible focus styles.
Video controls available.
Captions if voiceover exists.
Color contrast passes.
Reduced-motion support.
No text-only information inside images.

Security

HTTPS enforced.
CSP configured.
Security headers configured.
No exposed secrets.
No unnecessary third-party scripts.
Forms validated server-side if present.

---

19. Recommended MVP Scope

For the first version, build:

Static SvelteKit landing page
Logo hero
Self-hosted video with poster
Main descriptive paragraph
One CTA: Contact Us or Watch Demo
SEO metadata
OG image
robots.txt
sitemap.xml
Basic security headers
Optimized image/video assets

Avoid for MVP:

CMS
Animation framework
User accounts
Heavy analytics
YouTube embed
Complex routing
Newsletter provider scripts loaded on first paint

The best implementation is a prerendered SvelteKit page with the brand assets self-hosted, minimal JavaScript, real HTML text, and a tightly optimized media pipeline.