diff --git a/.gitignore b/.gitignore
index 939bab2..10ed0ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,10 @@ _site/
.jekyll-cache/
*.icloud
archive/
+
+# The full CV is deliberately not published here: the site's own position is
+# "Fullständigt CV och case-beskrivningar på begäran". The complete design
+# system, CV included, lives in the local skill at
+# ~/.claude/skills/sandstream-design/.
+design-system/assets/peter-cv-*.txt
+design-system/assets/peter-cv-*.pdf
diff --git a/design-system/CLAUDE_CODE_HANDOFF.md b/design-system/CLAUDE_CODE_HANDOFF.md
new file mode 100644
index 0000000..7f6def5
--- /dev/null
+++ b/design-system/CLAUDE_CODE_HANDOFF.md
@@ -0,0 +1,304 @@
+# Claude Code — Handoff Brief
+
+> **Goal:** Rebuild `sandstre.am` (currently a Jekyll/Bootstrap "Grayscale"
+> template) as a modern static site implementing this design system,
+> with the case studies and bio captured in the prototype.
+
+This brief is meant to be opened by Claude Code in a fresh terminal,
+pointed at this folder. Everything Claude Code needs to ship the site
+is in this project. Read this brief first, then start.
+
+---
+
+## 0 · Setup commands
+
+```bash
+# Clone the existing site — it already has the right CNAME (www.sandstre.am)
+# and a few historical demos under sub-paths. Don't start fresh; preserve git
+# history and keep the live DNS.
+git clone https://github.com/sandstream/sandstream.github.io.git
+cd sandstream.github.io
+
+# Strip the Jekyll machinery. We're staying on GitHub Pages but going
+# plain-static (no build step, no Jekyll). Move the old stuff to archive/
+# so URLs like sandstre.am/djr/ keep working.
+mkdir archive
+git mv djr ngcs ica lullabys.html archive/ 2>/dev/null || true
+git mv _includes _layouts _site _config.yml "_config copy.yml" archive/_jekyll/ 2>/dev/null || mkdir -p archive/_jekyll
+git mv css js dist node_modules package.json package-lock.json archive/_jekyll/ 2>/dev/null || true
+
+# Add an empty .nojekyll to opt out of GitHub's Jekyll build step entirely.
+# Without this, GH Pages tries to interpret our static files as Jekyll input.
+touch .nojekyll
+
+# Keep CNAME at root — it's already correct (www.sandstre.am).
+```
+
+**Stack choice — plain static HTML, no build step.**
+
+The prototype in `ui_kits/portfolio/` uses React via Babel-standalone
+in the browser. For a 1-page portfolio with a few hundred visits/month,
+**that setup is production-shippable as-is.** No build pipeline, no
+GitHub Actions, no Vercel — push to `master`, GitHub Pages serves it.
+Lighthouse will still hit ≥ 90 with the simple optimisations below.
+
+**Production file layout:**
+
+```
+sandstream.github.io/
+├── .nojekyll # opt out of Jekyll build
+├── CNAME # www.sandstre.am — keep as-is
+├── index.html # ported from ui_kits/portfolio/index.html
+├── portfolio.css
+├── colors_and_type.css # copy in from this design system
+├── App.jsx
+├── Header.jsx
+├── Hero.jsx
+├── About.jsx
+├── Cases.jsx
+├── Roles.jsx
+├── Contact.jsx
+├── FloatingPill.jsx
+├── MetaStrip.jsx
+├── sandstre/ # the phonetic-morph easter egg
+│ └── index.html
+├── assets/
+│ ├── peter-portrait.jpg
+│ ├── logo-wordmark.svg
+│ ├── logo-wordmark-light.svg
+│ └── mark-favicon.svg
+└── archive/ # old Jekyll site preserved under sub-paths
+ ├── djr/
+ ├── ngcs/
+ ├── ica/
+ ├── lullabys.html
+ └── _jekyll/ # raw source kept for history
+```
+
+**When to consider a real build step** (later, not now):
+
+- You add a blog with 5+ posts and want markdown + MDX — switch to
+ Astro on Vercel.
+- You add i18n routing and want `/en/` / `/sv/` as real paths instead
+ of a query-param toggle — switch to Astro on Vercel.
+- React-via-CDN starts noticeably slowing things (e.g. you add 10+
+ components and bundle hits ~200KB) — pre-bundle with Vite, push
+ the built `dist/` to GH Pages via Action.
+
+For the launch version: don't bother.
+
+---
+
+## 1 · Design system source of truth
+
+| You want | Read this |
+|---|---|
+| Brand narrative + tone | `README.md` (root) |
+| Color + type tokens | `colors_and_type.css` |
+| Brand voice rules | `README.md` § "Content fundamentals" |
+| Visual foundations | `README.md` § "Visual foundations" |
+| Iconography rules | `README.md` § "Iconography" |
+| Working hi-fi reference | `ui_kits/portfolio/index.html` |
+
+**Copy `colors_and_type.css` into the new project verbatim.** Every
+hex value, every spacing token, every font reference is intentional.
+Do not introduce new design tokens; if something feels missing, ask
+before adding.
+
+---
+
+## 2 · Component → file mapping
+
+Port these React components straight into the deploy target — they
+already use React-via-CDN, which ships fine to GitHub Pages (see §0).
+No framework migration needed; just clean filenames, then optionally
+pre-compile JSX → JS for perf (see §8).
+
+| Source (in this design system) | Production target |
+|---|---|
+| `ui_kits/portfolio/index.html` | `index.html` (repo root) |
+| `ui_kits/portfolio/portfolio.css` | `portfolio.css` (repo root) |
+| `colors_and_type.css` | `colors_and_type.css` (repo root) |
+| `ui_kits/portfolio/Header.jsx` | `Header.jsx` |
+| `ui_kits/portfolio/Hero.jsx` | `Hero.jsx` |
+| `ui_kits/portfolio/About.jsx` | `About.jsx` |
+| `ui_kits/portfolio/Cases.jsx` | `Cases.jsx` + extract `CASES` to JSON |
+| `ui_kits/portfolio/Roles.jsx` | `Roles.jsx` + extract `ROLES` to JSON |
+| `ui_kits/portfolio/Contact.jsx` | `Contact.jsx` + `Footer` extract |
+| `ui_kits/portfolio/FloatingPill.jsx` | `FloatingPill.jsx` |
+| `ui_kits/portfolio/MetaStrip.jsx` | `MetaStrip.jsx` (currently unused — drop or wire up) |
+| `ui_kits/portfolio/App.jsx` | `App.jsx` |
+| `explorations/sandstre-intro.html` | `sandstre/index.html` (easter egg) |
+
+Extract `CASES` and `ROLES` arrays into JSON or YAML so future Peter
+can edit content without touching JSX. The factual data inside them
+came from `assets/peter-cv-2026.txt` (kept out of this public copy - see README).
+
+---
+
+## 3 · Assets to use
+
+| File | What | Where to put it |
+|---|---|---|
+| `assets/peter-portrait.jpg` | Hero/About portrait | `public/peter.jpg` |
+| `assets/logo-wordmark.svg` | Inline wordmark, ink | `src/components/Wordmark.astro` (inline) |
+| `assets/logo-wordmark-light.svg` | Inline wordmark, bone | (same component, prop-driven) |
+| `assets/mark-favicon.svg` | Favicon + app icon | `public/favicon.svg` |
+| `assets/peter-cv-2026.txt` | Source of truth for bio facts | **Not in this public copy.** Local skill only. |
+
+---
+
+## 4 · Fonts
+
+Use Google Fonts — same three families:
+
+```html
+
+
+
+```
+
+If you self-host fonts later for performance, use `font-display: swap`
+and preload `Instrument+Serif:ital,wght@1,400` (the italic is on the
+critical path for the hero headline).
+
+---
+
+## 5 · Things to NOT redesign
+
+These are intentional and locked. Do not "improve" them without
+explicit approval:
+
+1. **One italic word per headline.** Every display headline has
+ exactly one word in ``. Never two.
+2. **The bone background.** `#F4F2EC`, not `#FFFFFF`.
+3. **The accent.** `#1E8A8A` only. No second accent colour.
+4. **Sharp cards.** `border-radius: 0` on cards. 8px is only for buttons.
+5. **Hairline borders, not shadows.** Default elevation is a 1px
+ `--border` inset hairline. The pop shadow exists for ONE element on
+ the page (the floating pill).
+6. **No emoji.** Mono symbols only: `→ · ↗ ↺`.
+7. **The mono metadata strips.** Uppercase, narrow tracking, mono.
+ They appear top of hero, bottom of hero, bottom of contact. They're
+ the brand's "tech-savvy" signal — keep them.
+
+---
+
+## 6 · Specific requirements / open questions
+
+Ship these as proper engineering, not design:
+
+- [ ] **i18n.** Swedish primary, English secondary. Use a query param
+ (`?lang=en`) or subpath (`/en/`). Headline italicisation pattern
+ works in both languages — find the right noun per locale.
+- [ ] **SEO.** Real ``, `<meta name="description">`, OG image
+ (use a 1200×630 export of the hero). Schema.org `Person` for
+ Peter on the homepage.
+- [ ] **Analytics.** Use Plausible or Fathom (privacy-friendly, no
+ cookie banner). Avoid GA.
+- [ ] **Calendly embed.** Currently a link to
+ `cal.eu/sandstream/30min` — confirm with Peter whether to
+ embed inline on the contact page or keep external.
+- [ ] **Real Bolagsverket org-nr.** Hero + Contact + Footer use
+ placeholder `559123-0000`. Get the real number.
+- [ ] **Email form.** `hello@sandstre.am` is mailto-only today. If
+ Peter wants a real form, add Resend or Plunk.
+- [ ] **OG image.** Generate a 1200×630 image: bone background, the
+ `sandstream` wordmark large, "Tjugo år av ledarskap inom tech."
+ headline. Use the same fonts.
+- [ ] **404 page.** Same rail + a mono "404 / page not found" set in
+ Instrument Serif italic. Link back home.
+
+---
+
+## 7 · Things the user didn't decide yet — ASK before assuming
+
+1. ~~**Wordmark direction.**~~ **Decided: Option B (`sandstre.am`
+ domain-hack).** The `.` and `am` are set in Stream Teal `#1E8A8A`,
+ the `am` is italic. See `assets/logo-wordmark.svg` and
+ `preview/logo-light.html`.
+2. ~~**Dark mode toggle?**~~ **Decided: ship a toggle, default LIGHT,
+ persist in localStorage.** Implemented in `Header.jsx` /
+ `portfolio.css` (the segmented pill in the rail).
+3. **Game Day DJ stack.** Listed as iOS + Firebase + WebAudio.
+ Confirm before publishing.
+4. **Ralph Inferno license + repo state.** Currently linking to
+ `github.com/sandstream/ralph-inferno`. Confirm public + ready.
+
+### 7a · Easter egg: `sandstre` route
+
+Peter's existing `index 2.html` (kept from the old repo, see § 0)
+animates through phonetic spellings of his name:
+
+```
+sandström → sandstroem → sandstream → săndstrēm → sandstre.am
+```
+
+Set this up as a hidden route at **`/sandstre`** (or trigger via
+Cmd-K from the main page). Re-implement the `fitter-happier-text`
+behaviour with modern CSS — each spelling fits the viewport width,
+crossfades to the next every ~1.6s, settles on `sandstre.am` (which
+is set in the canonical wordmark style: italic `.am` in Stream Teal),
+and fades into a "→ enter site" link back to `/`.
+
+Use the same Instrument Serif + bone background + grain overlay
+treatment as the main site so it feels like a memory of the site,
+not a separate page. Add a meta tag `<meta name="robots" content="noindex">`
+so it stays an easter egg.
+
+---
+
+## 8 · Deploy
+
+**Stay on GitHub Pages.** No new platform needed.
+
+1. Push to `master`. GitHub Pages serves it.
+2. The `.nojekyll` file (added in § 0) tells Pages to skip the Jekyll
+ build step — files are served as-is.
+3. `CNAME` is already correct (`www.sandstre.am`). Don't touch it.
+4. Verify HTTPS is on in Pages settings → custom domain.
+5. Add a redirect from `sandstream.github.io` to `www.sandstre.am`
+ (this happens automatically once CNAME is set).
+
+**Performance optimisations to apply before launch:**
+
+- Preload `Instrument Serif` italic — it's on the critical path for
+ the hero headline.
+- Inline the critical CSS (`colors_and_type.css` first declaration
+ block + portfolio hero styles) into `<head>`; load the rest async.
+- Lazy-load `assets/peter-portrait.jpg` — it's below the fold.
+- The `*.jsx` files load via Babel-standalone. Babel transpiles in the
+ browser (~150KB). To trim this:
+ - Option A: keep as-is. Total payload still under 250KB. Acceptable.
+ - Option B: pre-compile JSX → JS once with `npx esbuild *.jsx
+ --jsx=automatic --outdir=js/`. Ship `.js` and drop Babel from
+ `<head>`. ~120KB lighter. No build pipeline; just a one-time step
+ when components change. **Recommended before launch.**
+
+Keep the existing `sandstream.github.io` repo as-is. The migration is
+just a series of commits on `master`, not a new repo.
+
+---
+
+## 9 · Definition of done
+
+- [ ] All five sections render exactly as the prototype on desktop
+- [ ] Mobile (375px) gracefully collapses — rail becomes top nav,
+ headline reflows, case cards stack
+- [ ] Lighthouse: ≥ 95 Performance, ≥ 100 Accessibility, ≥ 95 SEO
+- [ ] No layout shift on font load (preload italic Instrument Serif)
+- [ ] Both languages (sv default, en secondary) ship with content
+- [ ] OG image + meta tags + favicon all set
+- [ ] Real org-nr replaces placeholder
+- [ ] Domain `sandstre.am` resolves, HTTPS, with redirect from
+ `www.sandstre.am` and the old `sandstream.github.io`
+
+---
+
+## 10 · Need clarification?
+
+If something is ambiguous, **read `README.md` first**, then ask
+Peter. Don't invent. The voice and visual rules are tight on purpose;
+guessing leads to drift.
+
+— end —
diff --git a/design-system/README.md b/design-system/README.md
new file mode 100644
index 0000000..d7689d1
--- /dev/null
+++ b/design-system/README.md
@@ -0,0 +1,348 @@
+# Sandstream Design System
+
+A 2026 visual + verbal system for **Peter Sandström / Sandstream AB** —
+Stockholm-based interim tech leader (CTO / CIO / CPO / CDO). The system
+defines a tight, editorial, computationally-literate brand for the
+portfolio site at `sandstre.am` and any adjacent decks or one-pagers.
+
+> _Interim ledning inom Tech._
+> _Strategic technology leadership for the spaces in between._
+
+---
+
+## What this public copy leaves out
+
+This repository is public and served at `sandstre.am`. Two things are
+therefore deliberately absent, and the full versions live only in the
+local Claude Code skill at `~/.claude/skills/sandstream-design/`:
+
+- **`assets/peter-cv-2026.txt`** — the full CV. The site's own position is
+ "Fullständigt CV och case-beskrivningar på begäran", so publishing it here
+ would contradict that. A `.gitignore` rule keeps it from being added by
+ accident.
+- **The phone number in `ui_kits/portfolio/Contact.jsx`** — replaced with a
+ `[PHONE]` placeholder. `sandstre.am` publishes email and a booking link,
+ not a mobile number.
+
+Everything else is here. The portrait and favicon are already served from
+the live site, so they add no new exposure.
+
+---
+
+## Sources
+
+This system was derived from materials the user supplied:
+
+- **GitHub**: `sandstream/portfolio` — _empty at the time of authoring._
+- **GitHub**: `sandstream/sandstream.github.io` (`master`) — at the time of
+ authoring (May 2026) this was a Jekyll/Bootstrap portfolio site. It has
+ since been rebuilt as the plain-static site now live at `sandstre.am`,
+ which is the result of this design system. Used for:
+ - Brand identity, name, contact details (`_config.yml`)
+ - Swedish copy and service positioning
+ (`_includes/section*.html`, `header.html`, `contact.html`)
+ - Portrait photography (`img/peter-about.jpg`, copied to
+ `assets/peter-portrait.jpg`)
+- **Brief**: "2026 insanely aesthetic and tech-savvy page."
+
+That earlier site was content-correct but visually dated (Bootstrap
+Grayscale theme, opaque black panel overlays, mixed color accents). The
+content was preserved and re-framed; the visuals were rebuilt from zero
+with a clear aesthetic position. **That rebuild has shipped** — `sandstre.am`
+now runs plain static HTML with these tokens inlined, no build step.
+
+---
+
+## Brand essence
+
+**Name.** "Sandstream" — _sand_ + _stream_. Time falling in fine grain,
+attention flowing, signal collecting. The brand mark holds this tension
+without being literal: warm grain neutrals (sand), single sharp accent
+(stream / signal), monospace timestamps (time falling).
+
+**Voice.** Bilingual Swedish/English. Calm authority. No hype, no
+emoji, no "🚀 transforming the future of." Specific over general,
+concrete over abstract. _Interim_ implies temporary and crucial — the
+voice mirrors that: precise, useful, leaves.
+
+**Positioning.** Twenty-plus years across leadership and innovation
+in tech. Interim leader for transitions, scale phases, turnarounds.
+Stockholm-based, internationally fluent.
+
+---
+
+## Index — files in this system
+
+| Path | What |
+|---|---|
+| `README.md` | This file. The narrative — read first. |
+| `SKILL.md` | Agent-compatible skill manifest. |
+| `colors_and_type.css` | Single source of truth for color + type tokens. |
+| `assets/` | Logos (SVG), portrait photography, favicon mark, Peter's full CV. |
+| `preview/` | Small HTML specimens used as cards in the Design System tab. One concept per card. |
+| `ui_kits/portfolio/` | The full 2026 portfolio site as a working hi-fi React prototype. |
+
+There are no slide templates yet — none were provided. Ask if you want
+deck templates derived from this system.
+
+---
+
+## Content fundamentals
+
+### Tone
+
+**Calm, specific, useful.** The voice is that of an experienced
+operator who has been in the room when difficult decisions were made,
+and who is comfortable not embellishing. Reads like a senior
+consultant's briefing note, not a sales page.
+
+**Bilingual by default.** Primary surfaces (sandstre.am, decks for
+Swedish prospects) lead with **Swedish**. English is the secondary
+locale for international engagements. The two are visually
+distinguished — Swedish in display serif, English in mono — when shown
+together on a page.
+
+### Casing
+
+- **Section labels** — `lowercase mono with wide tracking`, often
+ prefixed with a slash or section number, e.g.
+ `/01 — interim ledning` or `01 / services`.
+- **Display headlines** — sentence case in Instrument Serif, often
+ with one word italicised for emphasis, e.g.
+ _Tjugo år av ledarskap i_ tech.
+- **Body** — sentence case, no underlines, no bold inside paragraphs.
+- **ALL CAPS** is reserved for the wordmark and a single hero call
+ per page. Don't sprinkle.
+
+### Person & pronouns
+
+- **Third person** for Peter on marketing surfaces — "Peter has led…",
+ "His engagements typically…". This reads as a professional bio, not
+ a self-promo.
+- **Direct second person** for CTAs only — _"Boka ett möte"_,
+ _"Tell us about the transition"_.
+- Company is **"Sandstream"** (one word, capital S). Legal entity is
+ **"Sandstream AB"**, used only in footers and contractual contexts.
+
+### Emoji & decorative glyphs
+
+**No emoji.** Ever. Use mono symbols when a glyph is needed:
+`→ / · / ↗ / ◯ / ▮ / ↺`. The arrow `→` is the brand's punctuation —
+it appears in links, CTAs, lists. The middle dot `·` separates inline
+metadata. The slash `/` prefixes section numbers.
+
+### Specimens
+
+> **Headline (SV):**
+> _Tjugo år av ledarskap inom_ tech. _Stockholm-baserat, internationellt
+> uppdragsbart._
+>
+> **Headline (EN):**
+> _Two decades of technical leadership._ Stockholm-based, available
+> worldwide.
+
+> **Subhead (SV):** Strategisk översikt och praktisk teknisk insikt
+> för digital transformation, interimsuppdrag och skalresa.
+
+> **Bio sentence:** Peter har varit Managing Director, CPO, CTO, CIO
+> och CDO. Just nu mellan uppdrag.
+
+> **CTA:** Boka 30 min → · Email · LinkedIn
+
+> **Meta strip (mono):**
+> `STOCKHOLM, 59.33°N` · `AVAILABLE Q3 2026` · `v2026.05`
+
+### Things the voice never does
+
+- Hype words: "revolutionary", "game-changing", "world-class", "10×"
+- Filler verbs: "leverage", "unlock", "supercharge", "synergize"
+- Bullet salad — prose first, lists only when items are genuinely
+ parallel
+- Emoji, caps lock for emphasis, exclamation marks, em-dashes between
+ every clause
+
+---
+
+## Visual foundations
+
+### The system in one sentence
+
+> A warm-cool bone neutral page, an editorial serif headline with one
+> italicised word, a precise sans body, mono metadata strips, and one
+> stream-teal signal accent. No more colours.
+
+### Colour
+
+**Three layers, one accent.**
+
+- **Bone** (`#F4F2EC → #CFC8B5`) — warm-cool neutral page and surfaces.
+ Always slightly off-white with a faint green-grey cast; never pure
+ `#FFFFFF`. The page _feels_ like recycled paper, not bleach.
+- **Ink** (`#0E1A1A → #2C3838`) — near-black text and dark mode
+ surfaces. Slight teal cast lines up with the signal accent so dark
+ surfaces feel like the same family, not a different brand.
+- **Stream teal** (`#1E8A8A`) — the single signal accent. Used for
+ primary CTAs, marks, the wordmark dot, link hover. **One signal per
+ view.** If you find yourself reaching for a second accent colour, you
+ are wrong; restate the hierarchy first.
+- **Warm second** (`#C77B3A`) — a warm copper reserved exclusively for
+ data visualisation, charts, and one-off "heat" indicators where teal
+ alone can't differentiate categories. Never decorative.
+
+The old site's palette (`#40E0D0`, `#FF1493`, `#9400D3`) is **retired.**
+
+### Typography
+
+Three families, no more.
+
+| Role | Family | Source |
+|---|---|---|
+| Display | **Instrument Serif** | Google Fonts |
+| UI / body | **Geist** | Google Fonts |
+| Mono | **JetBrains Mono** | Google Fonts |
+
+Instrument Serif's italic is a _signature move_ — it carries one word
+per headline and nothing else. The combination gives Sandstream a
+voice that reads "editorial weekly" and "technical bulletin" at the
+same time.
+
+> _Font substitution note._ No proprietary fonts are licensed in the
+> existing brand, so the system uses freely-available Google Fonts
+> across the board. If Peter wants to commission a proprietary type
+> license (e.g. ABC Diatype, Söhne, or PP Editorial Old), the system's
+> token names map cleanly to that swap. **Ask Peter if a brand-type
+> upgrade is desired.**
+
+### Spacing
+
+A 4px base scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 /
+192). Most layouts use **only** 16, 24, 32, 64, 96. Don't fill space —
+let bone breathe.
+
+### Layout
+
+**Asymmetric editorial grids.** 12-column at the page level, but most
+content occupies an off-centre 7-col block aligned to a vertical rule.
+Metadata sits in the margin as mono captions — never centred.
+
+A **fixed vertical edge** holds the wordmark + nav on desktop. The
+content scrolls past it.
+
+### Backgrounds
+
+- Default: **flat bone neutral.** No gradients, no patterns.
+- Hero / dark sections: **flat ink** with `--grain` overlay at 50%
+ opacity. The grain is the brand's "sand."
+- Cards: hairline 1px border in `--border`, **no shadow** in light
+ mode. Cards stand on the page by typography weight, not elevation.
+- Imagery: warm, slightly desaturated. The Peter portrait is on flat
+ black — preserve that crop and treat the black background as part
+ of the composition.
+- **No bluish-purple gradients. No emoji backgrounds. No mesh
+ gradients. No glassmorphism.**
+
+### Hover, press, focus
+
+- **Link hover:** colour shifts from `--fg` to `--accent`. Underline
+ thickens from 1px to 2px. Duration 140ms, ease-out.
+- **Button hover:** background darkens to `--accent-hover`,
+ translate-y 0px (no lift). Sandstream is grounded, not bouncy.
+- **Press:** scale `0.98` for 90ms with `--ease-spring`. Subtle.
+- **Focus:** 2px outline in `--accent`, offset 3px. Never disable
+ focus rings.
+- **Cards:** on hover, the hairline border darkens from `--border` to
+ `--ink-700`. No translate, no shadow.
+
+### Borders, radii, shadows
+
+- **Default radius is zero.** Cards, sections, dividers are sharp.
+- **8px** for buttons and inputs.
+- **Full pill** only for tags, status chips, and the floating
+ schedule pill.
+- **Shadows are rare.** Most surfaces use the inset hairline
+ (`--shadow-hairline`). The pop shadow (`--shadow-pop`) is used
+ exactly once per page — on the floating "schedule a call" pill.
+
+### Motion
+
+- **Default ease:** `cubic-bezier(0.22, 1, 0.36, 1)` — confident
+ out-curve. No bounces in functional UI.
+- **Spring ease** (`0.34, 1.32, 0.64, 1`) is reserved for press
+ feedback only.
+- **Page entry:** content fades in over 420ms with a 16px upward
+ translate. Stagger headlines by 60ms.
+- **Hero numbers and time stamps** count up on first paint. This is
+ the only "animated number" pattern in the system.
+- **Reduced motion:** all entry animations collapse to a 140ms
+ opacity fade, no translate.
+
+### Transparency, blur
+
+- **No backdrop-blur** anywhere by default. Sandstream is opaque.
+- Exception: the floating bottom-right schedule pill on dark hero
+ uses 24px blur over `rgba(10,10,12,0.4)`. Once per page maximum.
+
+### Cards
+
+The card is a near-naked surface: bone fill, 1px hairline border,
+generous internal padding (`--space-6` to `--space-7`), no shadow.
+Typography does the work. Cards have a `data-tag` corner label in
+mono that names them.
+
+### Imagery treatment
+
+- **Portrait:** the Peter photo lives on its native flat black
+ background; the photo's edge is the composition. Never crop to a
+ circle. A subtle warm gradient overlay (`rgba(30,138,138,0.04)`) is
+ acceptable when integrating into bone surfaces.
+- **Generic imagery:** warm, slightly desaturated, never cool. If a
+ photo reads "cool/blue" it's wrong for this brand.
+- **No stock photography of handshakes, glass office towers, hands
+ typing on laptops, or rooftop city panoramas.** Use specific Peter
+ imagery only.
+
+---
+
+## Iconography
+
+Sandstream avoids iconography for decoration. Function calls for
+glyphs in three places, and only three:
+
+1. **Mono symbols inline** — `→ · ↗ ↺ ▮ ◯` set in JetBrains Mono.
+ These cover ~90% of icon needs.
+2. **Lucide icons via CDN** — for the handful of true UI affordances
+ (menu, close, copy, external-link, calendar). Lucide's stroke
+ weight (1.5px) and squared geometry match the system. Linked from:
+ `https://unpkg.com/lucide@latest/dist/umd/lucide.js`
+3. **The wordmark dot** — a single tangerine `·` between "sand" and
+ "stream" in the wordmark when emphasis is needed.
+
+> _Substitution note._ The existing site uses **Font Awesome 4** for a
+> couple of social/calendar icons. That entire dependency is dropped
+> in favour of Lucide via CDN. Lucide is stroked and modern; Font
+> Awesome's filled, soft 2013-era forms don't fit the 2026 voice.
+
+**Never:**
+- Emoji in any product surface.
+- Coloured icons. Icons are `currentColor` and inherit text colour.
+- Icon-only buttons without an accompanying label or aria-label.
+- Hand-drawn SVG illustrations. The brand has no illustration
+ language. Photography and typography carry visual interest.
+
+---
+
+## Quick start for designers / agents
+
+To produce a design in this system:
+
+1. Link `colors_and_type.css` and Google Fonts in the document head.
+2. Reach for **semantic tokens** (`--bg`, `--fg`, `--accent`) not raw
+ palette values.
+3. Pair a serif display headline with one italicised word, a sans
+ subhead, and a mono metadata strip. That's the brand voice.
+4. Use bone (`#F4F2EC`) or ink (`#0E1A1A`) as the page; never another
+ colour as the page.
+5. One signal accent per view. If the design feels flat, restate the
+ typographic hierarchy — do not add a second colour.
+
+See `ui_kits/portfolio/index.html` for a working reference.
diff --git a/design-system/SKILL.md b/design-system/SKILL.md
new file mode 100644
index 0000000..a2e8c48
--- /dev/null
+++ b/design-system/SKILL.md
@@ -0,0 +1,58 @@
+---
+name: sandstream-design
+description: Use this skill to generate well-branded interfaces and assets for Peter Sandström / Sandstream AB, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
+user-invocable: true
+---
+
+# Sandstream Design — Skill
+
+Read the `README.md` file within this skill first; it contains the
+brand voice, content fundamentals, visual foundations and iconography
+rules. Then explore the other files as needed:
+
+- `colors_and_type.css` — single source of truth for colour + type tokens
+- `assets/` — wordmark SVGs, favicon mark, the portrait of Peter, his CV
+- `preview/` — small specimen cards showing each token / pattern in use
+- `ui_kits/portfolio/` — the working 2026 portfolio site as a hi-fi
+ React reference (Hero, About, Cases, Roles, Contact, FloatingPill)
+
+## Use
+
+If creating visual artifacts (slides, mocks, throwaway prototypes,
+landing pages, decks), copy assets out and create static HTML files
+for the user to view. Reach for the design system's semantic tokens
+(`--bg`, `--fg`, `--accent`) and the three families (Instrument Serif
+display, Geist sans, JetBrains Mono).
+
+If working on production code, you can copy assets and read the rules
+to become an expert in designing within Sandstream.
+
+If the user invokes this skill without other guidance, ask them what
+they want to build (a new section on the portfolio site? a one-pager
+for an engagement? a deck for a prospect?), ask some clarifying
+questions, and act as an expert designer who outputs HTML artifacts
+or production code, depending on the need.
+
+## Five things this brand always does
+
+1. **One italic word per headline.** The signature move. Set a noun
+ in Instrument Serif italic; never the whole phrase.
+2. **One signal accent per view.** Stream teal `#1E8A8A`. If you want
+ a second colour, restate the typographic hierarchy instead.
+3. **Mono metadata strips.** Uppercase, narrow tracking, with a
+ coloured dot prefix for status. The brand's "tech-savvy" tell.
+4. **Sharp by default.** Cards, sections, panels have `radius: 0` and
+ a 1px hairline border — no shadow.
+5. **Bone, not white.** Pages live on `#F4F2EC`. Never pure `#FFFFFF`.
+
+## Five things this brand never does
+
+1. **No emoji.** Use mono symbols (`→ · ↗ ↺ ▮`).
+2. **No bluish-purple or mesh gradients.** Flat colour or one-direction
+ warm overlays only.
+3. **No glassmorphism.** Sandstream is opaque (one exception: the
+ floating schedule pill).
+4. **No hype words.** "leverage", "10×", "revolutionary", "unlock" are
+ banned. The voice is a senior consultant's briefing note.
+5. **No hand-drawn SVG illustrations.** Photography (Peter's portrait)
+ and typography do the visual work.
diff --git a/design-system/assets/logo-wordmark-light.svg b/design-system/assets/logo-wordmark-light.svg
new file mode 100644
index 0000000..db742fd
--- /dev/null
+++ b/design-system/assets/logo-wordmark-light.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" role="img" aria-label="sandstre.am">
+ <text x="0" y="60" font-family="Instrument Serif, serif" font-size="64" fill="#F4F2EC">sandstre</text>
+ <text x="246" y="60" font-family="Instrument Serif, serif" font-size="64" fill="#1E8A8A">.</text>
+ <text x="262" y="60" font-family="Instrument Serif, serif" font-size="64" font-style="italic" fill="#1E8A8A">am</text>
+</svg>
\ No newline at end of file
diff --git a/design-system/assets/logo-wordmark.svg b/design-system/assets/logo-wordmark.svg
new file mode 100644
index 0000000..87af4a5
--- /dev/null
+++ b/design-system/assets/logo-wordmark.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" role="img" aria-label="sandstre.am">
+ <text x="0" y="60" font-family="Instrument Serif, serif" font-size="64" fill="#0E1A1A">sandstre</text>
+ <text x="246" y="60" font-family="Instrument Serif, serif" font-size="64" fill="#1E8A8A">.</text>
+ <text x="262" y="60" font-family="Instrument Serif, serif" font-size="64" font-style="italic" fill="#1E8A8A">am</text>
+</svg>
\ No newline at end of file
diff --git a/design-system/assets/mark-favicon.svg b/design-system/assets/mark-favicon.svg
new file mode 100644
index 0000000..3a352f2
--- /dev/null
+++ b/design-system/assets/mark-favicon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" role="img" aria-label="sandstre.am">
+ <rect width="80" height="80" fill="#0E1A1A"></rect>
+ <text x="14" y="56" font-family="Instrument Serif, serif" font-size="48" fill="#F4F2EC">s</text>
+ <text x="36" y="56" font-family="Instrument Serif, serif" font-size="48" fill="#1E8A8A">.</text>
+ <text x="44" y="56" font-family="Instrument Serif, serif" font-size="48" font-style="italic" fill="#1E8A8A">a</text>
+</svg>
\ No newline at end of file
diff --git a/design-system/assets/peter-portrait.jpg b/design-system/assets/peter-portrait.jpg
new file mode 100644
index 0000000..9e597be
Binary files /dev/null and b/design-system/assets/peter-portrait.jpg differ
diff --git a/design-system/colors_and_type.css b/design-system/colors_and_type.css
new file mode 100644
index 0000000..029a579
--- /dev/null
+++ b/design-system/colors_and_type.css
@@ -0,0 +1,291 @@
+/* =============================================================
+ SANDSTREAM — colors_and_type.css
+ The foundation: color tokens, type tokens, semantic styles.
+ v1.0 — May 2026
+ ============================================================= */
+
+/* Fonts — load from Google Fonts in any consuming HTML:
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+*/
+
+:root {
+ /* -----------------------------------------------------------
+ COLOR — RAW PALETTE
+ A warm bone/sand neutral spine, a near-black ink, and ONE
+ signal accent (tangerine) pulled from the brand name's
+ warm-sand register. Restraint is the move.
+ ----------------------------------------------------------- */
+
+ /* Neutrals (warm-cool) — Palette B, slightly cooler than original */
+ --bone-50: #F4F2EC; /* page background, lightest */
+ --bone-100: #EAE7DE; /* default surface */
+ --bone-200: #DFDBCE; /* hairline backgrounds, cards on bone */
+ --bone-300: #CFC8B5; /* dividers, soft borders */
+ --bone-400: #9E9982; /* tertiary text, captions */
+ --bone-500: #5A6464; /* secondary text — cool grey-green */
+
+ /* Inks — cooler, teal-leaning warm-black */
+ --ink-900: #0E1A1A; /* deepest, full bleed dark mode */
+ --ink-800: #131F1F; /* dark surface */
+ --ink-700: #1C2828; /* dark hover/raised */
+ --ink-600: #2C3838; /* dark border */
+ --ink-500: #475252; /* dark secondary text */
+ --ink-400: #76807F; /* dark tertiary */
+ --ink-300: #A6ADAB;
+ --ink-200: #D4D8D6;
+ --ink-100: #EBEDEC;
+
+ /* Signal — Stream teal. The brand-name literal read. */
+ --signal: #1E8A8A; /* teal — primary action, marks */
+ --signal-hover: #166E6E;
+ --signal-tint: #D9EDED; /* signal background fill */
+ --signal-ink: #062626; /* signal-on-signal text */
+
+ /* Secondary signal — used sparingly for data viz / one-off heat */
+ --stream-warm: #C77B3A;
+ --stream-tint: #F5E6D5;
+
+ /* Semantic status (kept narrow on purpose) */
+ --status-ok: #2C7A4B;
+ --status-warn: #B5651D;
+ --status-err: #B23B2E;
+
+ /* -----------------------------------------------------------
+ COLOR — SEMANTIC TOKENS (light mode default)
+ Always reference these in components, not raw palette.
+ ----------------------------------------------------------- */
+ --bg: var(--bone-50);
+ --surface: var(--bone-100);
+ --surface-2: var(--bone-200);
+ --border: var(--bone-300);
+ --border-strong: var(--ink-700);
+
+ --fg: var(--ink-900);
+ --fg-2: var(--bone-500);
+ --fg-3: var(--bone-400);
+ --fg-on-dark: var(--bone-50);
+
+ --accent: var(--signal);
+ --accent-hover: var(--signal-hover);
+ --accent-tint: var(--signal-tint);
+ --accent-ink: var(--signal-ink);
+
+ /* -----------------------------------------------------------
+ TYPE — FAMILIES
+ Three families. No more.
+ Display: Instrument Serif — high contrast, gorgeous italics
+ Sans: Geist — precise, technical neo-grotesque
+ Mono: JetBrains Mono — metadata, code, version stamps
+ ----------------------------------------------------------- */
+ --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
+ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
+ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+ /* -----------------------------------------------------------
+ TYPE — RAW SCALE (fluid via clamp where appropriate)
+ ----------------------------------------------------------- */
+ --fs-xs: 11px;
+ --fs-sm: 13px;
+ --fs-base: 15px;
+ --fs-md: 17px;
+ --fs-lg: 20px;
+ --fs-xl: 28px;
+ --fs-2xl: 40px;
+ --fs-3xl: 56px;
+ --fs-4xl: 80px;
+ --fs-5xl: clamp(96px, 12vw, 168px); /* hero display */
+
+ --lh-tight: 1.02;
+ --lh-snug: 1.15;
+ --lh-normal: 1.45;
+ --lh-loose: 1.6;
+
+ --tracking-tight: -0.02em;
+ --tracking-snug: -0.01em;
+ --tracking-normal: 0;
+ --tracking-wide: 0.08em;
+ --tracking-mono: 0.02em;
+
+ /* -----------------------------------------------------------
+ SPACING — 4px base scale
+ ----------------------------------------------------------- */
+ --space-1: 4px;
+ --space-2: 8px;
+ --space-3: 12px;
+ --space-4: 16px;
+ --space-5: 24px;
+ --space-6: 32px;
+ --space-7: 48px;
+ --space-8: 64px;
+ --space-9: 96px;
+ --space-10: 128px;
+ --space-11: 192px;
+
+ /* -----------------------------------------------------------
+ RADII
+ Cards and surfaces are sharp; only inputs/pills get rounding.
+ ----------------------------------------------------------- */
+ --radius-0: 0;
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 14px;
+ --radius-pill: 999px;
+
+ /* -----------------------------------------------------------
+ SHADOWS — used SPARINGLY. Most surfaces use a 1px hairline.
+ ----------------------------------------------------------- */
+ --shadow-hairline: inset 0 0 0 1px var(--border);
+ --shadow-card: 0 1px 0 rgba(10,10,12,0.04), 0 12px 32px -16px rgba(10,10,12,0.18);
+ --shadow-pop: 0 2px 0 rgba(10,10,12,0.05), 0 24px 48px -24px rgba(10,10,12,0.28);
+
+ /* -----------------------------------------------------------
+ MOTION
+ ----------------------------------------------------------- */
+ --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+ --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
+ --dur-fast: 140ms;
+ --dur-base: 220ms;
+ --dur-slow: 420ms;
+
+ /* -----------------------------------------------------------
+ GRAIN — a subtle tactile texture overlay; used on heroes
+ and dark sections, never on body text.
+ ----------------------------------------------------------- */
+ --grain: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
+}
+
+/* =============================================================
+ DARK MODE — invert tokens; the same components work.
+ ============================================================= */
+[data-theme="dark"] {
+ --bg: var(--ink-900);
+ --surface: var(--ink-800);
+ --surface-2: var(--ink-700);
+ --border: var(--ink-600);
+ --border-strong: var(--bone-300);
+
+ --fg: var(--bone-50);
+ --fg-2: var(--ink-300);
+ --fg-3: var(--ink-400);
+ --fg-on-dark: var(--bone-50);
+}
+
+/* =============================================================
+ SEMANTIC TYPE CLASSES
+ Use these directly. Don't reach for raw scale tokens in
+ components — these encapsulate family + size + tracking.
+ ============================================================= */
+
+.t-eyebrow {
+ font-family: var(--font-mono);
+ font-size: var(--fs-xs);
+ font-weight: 400;
+ text-transform: uppercase;
+ letter-spacing: var(--tracking-wide);
+ color: var(--fg-2);
+}
+
+.t-meta {
+ font-family: var(--font-mono);
+ font-size: var(--fs-sm);
+ font-weight: 400;
+ letter-spacing: var(--tracking-mono);
+ color: var(--fg-2);
+}
+
+.t-display-xl {
+ font-family: var(--font-display);
+ font-size: var(--fs-5xl);
+ font-weight: 400;
+ line-height: var(--lh-tight);
+ letter-spacing: var(--tracking-tight);
+ color: var(--fg);
+}
+
+.t-display-lg {
+ font-family: var(--font-display);
+ font-size: var(--fs-4xl);
+ font-weight: 400;
+ line-height: var(--lh-tight);
+ letter-spacing: var(--tracking-tight);
+ color: var(--fg);
+}
+
+.t-display-md {
+ font-family: var(--font-display);
+ font-size: var(--fs-3xl);
+ font-weight: 400;
+ line-height: var(--lh-snug);
+ letter-spacing: var(--tracking-snug);
+ color: var(--fg);
+}
+
+.t-h1 {
+ font-family: var(--font-sans);
+ font-size: var(--fs-2xl);
+ font-weight: 500;
+ line-height: var(--lh-snug);
+ letter-spacing: var(--tracking-tight);
+ color: var(--fg);
+}
+
+.t-h2 {
+ font-family: var(--font-sans);
+ font-size: var(--fs-xl);
+ font-weight: 500;
+ line-height: var(--lh-snug);
+ letter-spacing: var(--tracking-snug);
+ color: var(--fg);
+}
+
+.t-h3 {
+ font-family: var(--font-sans);
+ font-size: var(--fs-lg);
+ font-weight: 500;
+ line-height: var(--lh-snug);
+ letter-spacing: var(--tracking-snug);
+ color: var(--fg);
+}
+
+.t-body {
+ font-family: var(--font-sans);
+ font-size: var(--fs-md);
+ font-weight: 400;
+ line-height: var(--lh-loose);
+ color: var(--fg);
+ text-wrap: pretty;
+}
+
+.t-body-sm {
+ font-family: var(--font-sans);
+ font-size: var(--fs-base);
+ font-weight: 400;
+ line-height: var(--lh-normal);
+ color: var(--fg);
+}
+
+.t-caption {
+ font-family: var(--font-sans);
+ font-size: var(--fs-sm);
+ font-weight: 400;
+ line-height: var(--lh-normal);
+ color: var(--fg-2);
+}
+
+.t-code {
+ font-family: var(--font-mono);
+ font-size: var(--fs-sm);
+ font-weight: 400;
+ letter-spacing: var(--tracking-mono);
+ color: var(--fg);
+ background: var(--surface-2);
+ padding: 2px 6px;
+ border-radius: var(--radius-sm);
+}
+
+/* Italic display — a SIGNATURE move. Use sparingly. */
+.t-italic {
+ font-style: italic;
+}
diff --git a/design-system/explorations/sandstre-intro.html b/design-system/explorations/sandstre-intro.html
new file mode 100644
index 0000000..d65d54c
--- /dev/null
+++ b/design-system/explorations/sandstre-intro.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>sandstre.am
+
+
+
+
+
+
+
+
+