00 Everything KoPoster ships with

A tour of the theme — and exactly how to configure each piece. This page lives in your copy of the theme, so the docs are always where your code is.

The poster canvas — a grid with named positions

KoPoster's home page is a full-viewport typographic poster. A CSS grid with four columns and four rows holds info blocks at precise positions: top-left, mid-left, mid-right, bottom-left. On mobile, blocks stack in document order.

Setup & config

Blocks live in src/content/blocks.json. Each block has an area field that places it on the grid at desktop (md+). The order field controls mobile stacking.

src/content/blocks.json

{ "id": "office", "label": "Office", "lines": ["Zurich, Switzerland", "mailto:hello@studio.com"], "area": "ml", "order": 2 }

Area tokens: tl top-left,tr top-right,ml mid-left,mr mid-right,bl bottom-left,br bottom-right. Lines beginning withmailto: orhttps:// render as links automatically.

Fast — measured, not promised

Every KoPoster release is audited with Lighthouse before it ships. These are the real numbers from v1.0.0; they ship with the theme so you can re-run them yourself.

Mobile

100

Performance

Accessibility

100

Best practices

100

SEO

Desktop

100

Performance

Accessibility

100

Best practices

100

SEO

mobile: FCP 1.2 s · LCP 1.4 s · TBT 0 ms · CLS 0 — Lighthouse 13.4.0, median of 3 runs, 2026-06-10

Setup & config

Why it's fast: one Google Fonts family withfont-display: optional never blocks paint, and there is a single small JS file for the GSAP interaction. Verify it yourself:

terminal

npm run build && npm run preview npx lighthouse http://localhost:4321 --view

Giant wordmark — the poster face

The studio name occupies the bottom-right of the canvas at a size that overflows the safe zone. A custom CSS token --text-poster drives the clamp — edit one line to scale it up or down.

Setup & config

src/styles/global.css

@theme { --text-poster: clamp(4rem, 14vw, 12rem); }

The wordmark uses data-wordmark for the GSAP interaction hook. Position and size are insrc/pages/index.astro.

The GSAP touch — letterSpacing follows the pointer

As the pointer moves across the viewport, the wordmark's letter-spacing eases between tight and open. Pointer-only — inert on touch and with prefers-reduced-motion.

Setup & config

Lives in src/scripts/wordmark-stretch.ts. The range (-0.04em → 0em) is editable at the top of that file. Remove the call insrc/scripts/motion.ts to disable it entirely.

src/scripts/wordmark-stretch.ts

// Range: -0.04em (left) → 0em (right) const spacing = -0.04 + t * 0.04

Archivo — one font for body and poster

The demo uses Archivo at weights 400 and 600: a grotesk that works at caption size and at 12rem. Self-hosted at build time via Astro's font pipeline. display: optional keeps it off the LCP path.

Setup & config

theme.config.ts

heading: { provider: 'google', family: 'Archivo', weights: [400, 600], display: 'optional' } body:    { provider: 'google', family: 'Archivo', weights: [400, 600], display: 'optional' }

Switch to any other Google, Adobe, or local font by changingfamily. A system stack is{ provider: "system", stack: "sans-serif" } — zero bytes.

Every setting in one file

Colors, fonts, studio name, meta tags and navigation live in theme.config.ts — typed, validated, and impossible to typo silently.

Setup & config

theme.config.ts

logo: { type: 'text', value: 'Studio Halde' }, colors: { accent1: '#0b0b0a', /* monochrome-first */ }, nav: { links: [{ label: 'Info', href: '/info' }] }

Invalid values fail the build with a readable error pointing at the exact field.

Light, dark and system color schemes are built in: the grey ramp inverts automatically in dark mode, colors.dark overrides any accent, and the toggle in the nav cycles auto → light → dark (persisted, no flash on load). Set dark: false to ship light-only.

Info page — markdown prose

The /info page renders a markdown file from the pages collection. About text, services list, and clients list — all in one file, no database.

Setup & config

src/content/pages/info.md

--- title: Info description: About the studio. --- Studio paragraph. ## Services - Interior architecture - Lighting concept ## Clients Name — City

SEO without a plugin

Canonical URLs, Open Graph and Twitter cards, sitemap, robots.txt — fed by your config and per-page frontmatter.

Setup & config

any page

<PageLayout title="Page title" description="…" ogImage="/og-custom.png">

Demo content — keep it or strip it

The theme arrives as Studio Halde's site so every page has something to show. One command makes it yours.

Setup & config

terminal

npm run fresh

Stubs out blocks.json to a 2-block skeleton and resets info.md. Structure, config and styles stay.

Updates that respect your changes

Theme updates arrive as git pulls. Your config, content, styles and overrides live in safe zones updates never touch.

Setup & config

update-safe

theme.config.ts src/styles/custom.css src/content/ src/components/overrides/ public/

Don't edit src/_core/ — copy a component intosrc/components/overrides/ and change its import instead. Updating:

terminal

git fetch upstream && git merge upstream/main && npm install