// 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.
| name | xe-design-system |
| description | 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. |
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."
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)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).--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.<h1..h6> are already Podkova, body is Schibsted Grotesk. Add text-wrap: pretty for headings (already applied to p).a:hover.preview/chat-conv.html — stacked rows sharing a --bg-soft background, 64×64 boxy avatar, name link + message.#f9f5d7) in light, warm charcoal (#1d2021) in dark.stickers.xeiaso.net/sticker/{char}/{mood} when showing characters speak.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.
files.xeiaso.net — not bundled. ui-monospace fallback is fine.files.xeiaso.net/hero/ in the original; use placeholders for new work and flag if real imagery is needed.Write GORM data access code using the DAO (Data Access Object) pattern. Use when creating database models, writing queries, setting up GORM, adding CRUD methods, or working with gorm.io in Go services. Also use when the user mentions "DAO", "data access", "ORM", "database models", "GORM", or is building a Go service that talks to a relational database.
Create reusable templ UI components with props, children, and composition patterns. Use when building UI components, creating component libraries, mentions 'button component', 'card component', or 'reusable templ components'.
Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'.
Integrate templ components with Go HTTP server using net/http. Use when connecting templ to web server, creating HTTP handlers, mentions 'templ server', 'HTTP routes', or 'serve templ components'.
Learn and write templ component syntax including expressions, conditionals, loops, and Go integration. Use when writing .templ files, learning templ syntax, or mentions 'templ component', 'templ expressions', or '.templ file syntax'.
Write Go code following the conventions and patterns used in the within.website/x repository, including CLI patterns, error handling, logging with slog, HTTP handlers, and testing.