--- name: timopruesse-brand-guidelines description: "Design, build, or substantially improve pages, tools, chapters, and components for timo-pruesse.de. Use for any page that needs Timo Prüße's golden-hour / warm-dusk atmosphere, editorial photography craft, Svelte 5 / SvelteKit architecture, typography, and restrained aesthetics." --- # Design pages and tools like Timo Prüße Act as a thoughtful designer, editor, information architect, and frontend engineer for **timo-pruesse.de**. Turn the available material into an on-brand, authentic part of Timo Prüße's personal site. Shape the tone and the interface together; do not merely restyle a generic developer portfolio or assemble stock components. ## Brand and product context This is the personal site of **Timo Prüße** — a software engineer at [Mill](https://www.mill.com) in San Bruno, CA, who lives in Braunschweig, Germany, and chases golden hour with a camera ([@timo.roams](https://www.instagram.com/timo.roams/)). The site embodies a quiet, confident intersection of two crafts: 1. **Software engineering craft:** Resilient, minimal, and transparent tools (`machine_setup`, dotfiles). 2. **Photography craft:** Natural light, warm dusk, golden hour, 35mm/28mm field perspectives, and authentic EXIF metadata. The aesthetic is **warm dusk and golden hour**: amber, honey, sand, and deep umbra. It is calm, restrained, technically literate, and editorial. It feels like an open photo notebook and workshop, not a corporate resume, not a cyberpunk terminal, and not a generic SaaS product. ## Use this priority order When requirements compete, protect them in this order: 1. **Preserve truth and authenticity:** Real facts, personal identity, authentic photo metadata, and honest technical descriptions. Never invent fake stats, placeholder stock photos, or fictional achievements. 2. **Preserve host framework and conventions:** SvelteKit 3 (`@sveltejs/kit`), Svelte 5 runes (`$state`, `$derived`, `$props`), prerendering, and catalog-first architecture (`src/lib/catalog/`). 3. **Make the visitor's job and primary exits clear:** Introduce who Timo is and offer natural exits (explore photography on Instagram, inspect open-source tools on GitHub, reach out via email). 4. **Establish unmistakable brand authorship:** Warm dusk palette (`--umbra`, `--amber`, `--honey`, `--sand`, `--paper`), Outfit + Figtree + IBM Plex Mono typography, Whisper HUD, and intentional whitespace. 5. **Choose a composition specific to the material:** Avoid cookie-cutter layouts. Shape the page around the specific reader question or tool. 6. **Refine responsive craft, motion, and accessibility:** Ensure flawless mobile reflow, full keyboard navigation, WCAG AA contrast, and complete respect for `prefers-reduced-motion`. ## Reject generated-design reflexes Coding models have strong generic defaults that immediately signal AI-generated pages. Do not ship any of these recognizable anti-patterns: - **No neon or cyber glows:** No purple/cyan gradients, matrix greens, neon borders, glowing orbs, or artificial AI backdrop blobs. - **No generic centered hero + 3-card grid:** Avoid the universal "Big bold title, 2 sentences, 3 equal cards below" template. - **No cards nested inside cards:** Do not wrap sections in redundant rounded borders, glass panes inside glass panes, or nested boxes. - **No decorative pill badges or capsules:** Do not wrap ordinary metadata, status labels, or dates in rounded badge pills. Use subtle muted text (`.mono` or `--sand`) instead. - **No icon soup or arbitrary icon tiles:** Do not place random Lucide/FontAwesome icons into colorful square boxes. Only use an icon when it clarifies navigation (e.g. an arrow or external link). - **No corporate buzzwords or AI copy:** Never use inflated hype words like "elevate", "supercharge", "unleash", "streamline", "cutting-edge", "game-changer", or "seamless". Write in Timo's natural voice: direct, understated, first-person singular ("I write software at Mill..."). - **No em dash (—) overuse:** Do not insert multiple em dashes in every paragraph. Keep sentence structure natural and clean. - **No all-caps tracked overlines / marketing kickers:** Do not put tracked uppercase badges like "WELCOME TO MY CORNER OF THE WEB" or "KEY HIGHLIGHTS". - **No stock imagery or fake EXIF:** Never use Unsplash stock photos, AI-generated portraits, or fabricated aperture/shutter speeds. All imagery comes from real film/digital captures. - **No arbitrary inline hex colors:** Never introduce `#3b82f6`, `#8b5cf6`, `#10b981`, or arbitrary Tailwind colors. Use the published color tokens. - **No opacity-based LCP animations:** Never animate `opacity` on above-the-fold or LCP containers. Animations must use `transform` only (`.rise`) to maintain 100/100 Lighthouse performance. - **No motion without purpose:** No auto-scrolling marquees, simulated typing effects, particle canvases, or parallax scroll jank. ## Integrate with the caller's project Preserve the existing codebase architecture: ### Framework & Language - **SvelteKit 3** with Vite 8 and TypeScript 6. - **Svelte 5 runes:** Use `$state()`, `$derived()`, `$props()`, and `$effect()` exclusively. Never use legacy Svelte 3/4 reactive declarations (`$:`) or `export let`. - **Prerendering:** Pages should declare `export const prerender = true;` whenever static. ### Architecture & Conventions - **Catalog-first (`src/lib/catalog/`):** All structured content, tool definitions, photography frames, and route metadata live in typed modules (`site.ts`, `types.ts`, `tools.ts`, `contact.ts`). Page components (`+page.svelte`) remain thin and declarative. - **Shared Layouts:** Subpages use `SubpageShell.svelte` (with `SubpageNav.svelte` and golden-hour backdrop) to provide consistent navigation back to `/`. - **Sitemap & Discovery:** Add new public indexable routes to `site.routes` in `src/lib/catalog/site.ts`. ## Use the published CSS API and tokens Every page-authored style must use the published design tokens defined in `src/app.css`. Never declare ad-hoc color hex codes or arbitrary font families. ### Surfaces and Palette | Token | Value | Role | | :-------- | :-------------------------- | :------------------------------------------------------- | | `--umbra` | `#14110e` | Base background; deep warm black ground | | `--dusk` | `#2a2118` | Secondary surface; subtle panel background | | `--amber` | `#e8a54b` | Primary accent; chapter labels, focus rings, primary CTA | | `--honey` | `#f0c78a` | Light gold accent; hover states, highlights | | `--sand` | `#cbb8a0` | Secondary copy, metadata, subtle borders | | `--paper` | `#f6efe4` | Primary high-contrast text and foreground | | `--frame` | `rgba(246, 239, 228, 0.16)` | Borders, divider rules, subtle boundaries | | `--glass` | `rgba(20, 17, 14, 0.55)` | Transparent overlay / backdrop fill | ### Solar Phase Dynamic Backdrops On golden-hour and atmospheric surfaces, the background reflects the solar phase of the sun: - `night`: Deep night ink (`#121820` / `#0e1018`) with subtle blue moonlight glow. - `morning-blue`: Crisp twilight blue (`#141c24` / `#101820`). - `morning-golden`: Low sunrise warmth with amber edge glow (`#1c1610` / `#14110e`). - `day`: High solar daylight warm dusk (`#181410` / `#14110e`). - `evening-golden`: Deep golden hour sunset with rich amber gradient. - `evening-blue`: Twilight blue hour dusk (`#141820` / `#0a0c12`). ### Develop Lane Terminal Remapping Inside `/develop` and deep tool pages (`DevelopShell.svelte`), tokens are locally remapped to create a cooler, focused terminal atmosphere while preserving the exact same token names: - `--umbra`: `#0a1018` (deep terminal black) - `--dusk`: `#101820` (terminal panel ground) - `--amber`: `#7eb8c9` (terminal cyan accent) - `--honey`: `#b7d4de` (terminal cyan highlight) - `--sand`: `#a8b8c8` (terminal muted secondary) - `--paper`: `#e8eef4` (terminal crisp text) - `--signal`: `#4a8a6a` (terminal status green / success) ### Typography Font Stacks Fonts are loaded locally via `@fontsource` packages for zero-layout-shift and privacy: ```css --font-display: 'Outfit Variable', 'Outfit', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; ``` - **Display (`--font-display` / `.display`):** Used for main headings, hero titles, and large numbers. Features tight negative letter-spacing (`-0.035em`) and line-height `1.02`. - **Body (`--font-body`):** Used for paragraphs, explanations, and general UI copy. Clean, highly legible geometric sans. - **Mono (`--font-mono` / `.mono`):** Used for EXIF camera metadata, code, shell commands, chapter tags, and technical labels. Letter-spacing `0.1em`, uppercase, small size (`0.68rem`). ### Published UI Primitives & Classes - `.shell`: Full-bleed root container with warm radial golden-hour glow. - `.chapter`: Main content chapter container (`width: min(1080px, calc(100% - 2.5rem)); margin-inline: auto;`). - `.chapter-label`: Uppercase mono label in `--amber` preceding section titles. - `.btn`: Standard secondary button with `--frame` border and subtle hover lift. - `.btn-primary`: High-contrast filled button in `--amber` with `--umbra` text. - `.rise`: Transform-only entrance animation (never animates opacity). - `SubpageShell`: Component providing consistent header, back link, and responsive layout. - `SectionRule`: Subtle decorative divider between sections. ## Information architecture and signatures ### The Viewfinder Concept The hero and photography presentation uses a **Viewfinder** design: - Subtle hairline borders and whisper HUD metadata (`f/1.8 · 1/60 · ISO 800`). - Gives the feeling of looking through a prime lens (Leica / Fuji). - Photos use natural aspect ratios (`4/5` portrait, `1/1` square) with careful framing. ### Tools Asymmetry (RUN vs REFERENCE) When presenting software projects, respect the clear conceptual asymmetry: - **RUN (`machine_setup`):** An actionable CLI. Offers a copyable one-liner install command + GitHub repository link. - **REFERENCE (`dotfiles`):** A personal configuration. For browsing on GitHub to take inspiration — **never** offer a blind install/clone command. ### Editorial Voice - Write concisely with humility, technical clarity, and personal taste. - Avoid generic filler text or enthusiastic marketing copy. - Present evidence, links, and code commands directly. ## Work in four passes When creating or modifying pages: 1. **Frame the visitor's job:** What does someone coming to this page want to discover, read, or test? (e.g. check current golden hour times, inspect machine setup config, view gear in camera bag). 2. **Shape structure & evidence:** Outline the sections. Place the decisive content first. Keep copy short and purposeful. 3. **Apply published primitives:** Use `.chapter`, `.chapter-label`, `.btn`, `--amber`, and semantic HTML (`
`, `
`, `
`, `
`, `