Xe Iaso Design System — Skill
When to use
Reach for this system when building anything that should feel like xeiaso.net — a personal technical blog with a conversational voice, warm neutrals, and a cast of sticker characters. Good fits: long-form posts, one-person portfolios, zine-style project pages, fictional-conversation explainers. Bad fits: enterprise dashboards, consumer apps, anything that wants to feel "clean, modern SaaS."
Files
README.md — full context, content fundamentals, visual foundations, iconographycolors_and_type.css — drop-in tokens + primitives; start herefonts/ — Podkova (serif, headings), Schibsted Grotesk (sans, body)assets/ — Xe orca mascot logo SVG, Graphviz diagramspreview/ — small design-system cards (type, color scales, components)
Using it
- Link
colors_and_type.css into your HTML. It registers @font-face for Podkova and Schibsted Grotesk (Iosevka Curly Iaso is only aspirational — falls back to ui-monospace).
- Use the CSS vars for colors:
--bg-hard / --bg-soft / --bg-0..4 for surfaces, --fg-0..4 for text, muted accents (--red, --blue, etc.) in light mode and their -bright siblings in dark.
- Typeset with the defaults —
<h1..h6> are already Podkova, body is Schibsted Grotesk. Add text-wrap: pretty for headings (already applied to p).
- For distinctive interactions, let links pick up the invert-on-hover magenta — don't override
a:hover.
- For characters talking, use the Conv/chat pattern shown in
preview/chat-conv.html — stacked rows sharing a --bg-soft background, 64×64 boxy avatar, name link + message.
Do
- Warm cream surfaces (
#f9f5d7) in light, warm charcoal (#1d2021) in dark.
- Serif headings (Podkova 600), sans body.
- 1px borders, soft two-step shadows, 6–12px radii.
- Tabler stroke icons (24×24, stroke-width 2, round caps) when icons are needed — usually they aren't.
- Stickers from
stickers.xeiaso.net/sticker/{char}/{mood} when showing characters speak.
- Sentence-case headings, first-person conversational voice, dry humor.
Don't
- Don't introduce blue-purple gradients, neon, or cool grays — the palette is Gruvbox warm-neutral.
- Don't add emoji decoratively; the stickers are the emotional channel.
- Don't use "left-border accent" cards — only PullQuote has the left bar, intentionally.
- Don't invent icons in SVG — use placeholders or Tabler.
- Don't override link hover behavior — the magenta invert is a signature.
- Don't pad with filler copy; this voice is spare and personal.
Content tone
Xe writes with the reader: warm, a bit confrontational, willing to be weird. Pronouns it/its (also they/them). Technical terms keep their casing (NixOS, Kubernetes, Tailscale). When in doubt, be specific and slightly funny; never generic.
Known substitutions
- Iosevka Curly Iaso mono is custom-cut and served from
files.xeiaso.net — not bundled. ui-monospace fallback is fine.
- Sticker art lives at live URLs; not copied locally.
- Hero imagery is linked from
files.xeiaso.net/hero/ in the original; use placeholders for new work and flag if real imagery is needed.
1---2name: xe-design-system-23description: Xe Iaso Design System — Skill4---56# Xe Iaso Design System — Skill78## When to use9Reach for this system when building anything that should feel like **xeiaso.net** — a personal technical blog with a conversational voice, warm neutrals, and a cast of sticker characters. Good fits: long-form posts, one-person portfolios, zine-style project pages, fictional-conversation explainers. Bad fits: enterprise dashboards, consumer apps, anything that wants to feel "clean, modern SaaS."1011## Files12- `README.md` — full context, content fundamentals, visual foundations, iconography13- `colors_and_type.css` — drop-in tokens + primitives; start here14- `fonts/` — Podkova (serif, headings), Schibsted Grotesk (sans, body)15- `assets/` — Xe orca mascot logo SVG, Graphviz diagrams16- `preview/` — small design-system cards (type, color scales, components)1718## Using it191. Link `colors_and_type.css` into your HTML. It registers `@font-face` for Podkova and Schibsted Grotesk (Iosevka Curly Iaso is only aspirational — falls back to `ui-monospace`).202. Use the CSS vars for colors: `--bg-hard / --bg-soft / --bg-0..4` for surfaces, `--fg-0..4` for text, muted accents (`--red`, `--blue`, etc.) in light mode and their `-bright` siblings in dark.213. Typeset with the defaults — `<h1..h6>` are already Podkova, body is Schibsted Grotesk. Add `text-wrap: pretty` for headings (already applied to `p`).224. For distinctive interactions, let links pick up the invert-on-hover magenta — don't override `a:hover`.235. For characters talking, use the Conv/chat pattern shown in `preview/chat-conv.html` — stacked rows sharing a `--bg-soft` background, 64×64 boxy avatar, name link + message.2425## Do26- Warm cream surfaces (`#f9f5d7`) in light, warm charcoal (`#1d2021`) in dark.27- Serif headings (Podkova 600), sans body.28- 1px borders, soft two-step shadows, 6–12px radii.29- Tabler stroke icons (24×24, stroke-width 2, round caps) when icons are needed — usually they aren't.30- Stickers from `stickers.xeiaso.net/sticker/{char}/{mood}` when showing characters speak.31- Sentence-case headings, first-person conversational voice, dry humor.3233## Don't34- Don't introduce blue-purple gradients, neon, or cool grays — the palette is Gruvbox warm-neutral.35- Don't add emoji decoratively; the stickers are the emotional channel.36- Don't use "left-border accent" cards — only PullQuote has the left bar, intentionally.37- Don't invent icons in SVG — use placeholders or Tabler.38- Don't override link hover behavior — the magenta invert is a signature.39- Don't pad with filler copy; this voice is spare and personal.4041## Content tone42Xe writes *with* the reader: warm, a bit confrontational, willing to be weird. Pronouns it/its (also they/them). Technical terms keep their casing (NixOS, Kubernetes, Tailscale). When in doubt, be specific and slightly funny; never generic.4344## Known substitutions45- Iosevka Curly Iaso mono is custom-cut and served from `files.xeiaso.net` — not bundled. `ui-monospace` fallback is fine.46- Sticker art lives at live URLs; not copied locally.47- Hero imagery is linked from `files.xeiaso.net/hero/` in the original; use placeholders for new work and flag if real imagery is needed.
xe