# Xe Design System

> A warm, Gruvbox-rooted design system derived from xeiaso.net. Use for personal-blog, technical-educator, or character-driven content that wants serif headlines, parchment surfaces, and chat-bubble layouts. Distinctive: magenta inverted link hovers, boxy 2px-radius sticker avatars, no gradients except the SponsorCard top rule.

- **Type:** Skill
- **Install:** `agentstack add skill-xe-skills-xe-design-system`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Xe](https://agentstack.voostack.com/s/xe)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Xe](https://github.com/Xe)
- **Source:** https://github.com/Xe/skills/tree/main/skills/xe-design-system

## Install

```sh
agentstack add skill-xe-skills-xe-design-system
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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, iconography
- `colors_and_type.css` — drop-in tokens + primitives; start here
- `fonts/` — Podkova (serif, headings), Schibsted Grotesk (sans, body)
- `assets/` — Xe orca mascot logo SVG, Graphviz diagrams
- `preview/` — small design-system cards (type, color scales, components)

## Using it
1. 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`).
2. 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.
3. Typeset with the defaults — `` are already Podkova, body is Schibsted Grotesk. Add `text-wrap: pretty` for headings (already applied to `p`).
4. For distinctive interactions, let links pick up the invert-on-hover magenta — don't override `a:hover`.
5. 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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Xe](https://github.com/Xe)
- **Source:** [Xe/skills](https://github.com/Xe/skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-xe-skills-xe-design-system
- Seller: https://agentstack.voostack.com/s/xe
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.