# KullGames Design System The design language of **KullGames** — a Pacific-Northwest voxel (Minecraft) community — and **KullOS**, its companion "Knowledge Workstation" desktop OS. Gold + indigo sampled from the hand-lettered KULL wordmark, land-and-sky tones sampled from the community's own photographs, pixel type for personality, and blocky/voxel components with a hard amber edge. > Consumers link **one file**: [`styles.css`](./styles.css) (tokens + fonts + base utilities). React components load from the compiled `_ds_bundle.js` under `window.KullGamesDesignSystem_c5fadf`. --- ## Company & product context **KullGames** (play.kull.games, kullgames.com) is a homegrown PNW voxel-game community — "wheat, evergreens, and good people building together since 2014." It runs Minecraft survival / creative / minigame servers, a forum, and a Discord. The brand is **real-photo-led**: every photograph is the community's own (Seattle skyline, Palouse wheat, Cascades, glaciers, campfires), shot across Washington and beyond. Two distinct product surfaces share this system: 1. **KullGames Showcase** — the public marketing site. Full-bleed photography, the pixel wordmark, gold/indigo voxel UI, server cards, forum previews, a copy-IP connect bar. *(This is the canonical brand artifact.)* 2. **KullOS** — a web-hosted "Knowledge Workstation" desktop OS concept: ~160 working apps across 15 categories (Office, Creative, Media, Develop, Science, Garden, Kitchen, Wild, etc.), a desktop shell (top bar, dock, spotlight, Activities overview), and shared engines. The HTML is the **design intent** for a C#/GPU canvas engine. It uses the same palette + fonts via its `kw.css` window-chrome system (titlebar / menubar / toolbar / sidebar / statusbar). A separate, earlier **light "yellow v1"** line (Fredoka + Open Sans, `#FFC81F` yellow) survives in the **Scrapbook tool** (a mobile photo-scrapbook app, see `tools/scrapbook-tool/`) and the old root `styles.css` of the source. This system standardizes on the **refined gold + indigo + Silkscreen direction**, not the yellow v1. ### Sources (for anyone with access) - **Codebase:** mounted local folder `kds/` — `kds/1.0/` (KullOS 1.0 + Showcase), `kds/1.0/apps/_base/kw.css` (OS design system), `kds/1.0/kull.theme.css` (Showcase theme — the basis for these tokens), `kds/scrapbook-tool/` (yellow-v1 mobile app), `kds/uploads/` (the full photo library at every size). - **Key files studied:** `KullGames Showcase.html`, `apps/desktop/index.html`, `apps/_base/apps.js` (the 160-app manifest + emoji icon set), `Project Overview.html`, `README.md`, `DESIGN-REVIEW.html`. - No Figma was provided; recreations are built from the source HTML/CSS, which is the source of truth. --- ## Content fundamentals — how KullGames writes **Voice:** warm, grounded, plain-spoken, a little proud of the place. It talks about *land* ("built south of the city", "walk into the wheat", "wheat country") and *community* ("good people", "griefer-free since day one"). Never corporate, never hypey. - **Person:** addresses the player as **you** ("Pick a world and jump in", "Fire up Minecraft, point it at the address below"). Refers to the community as **we / our** ("our map is hand-terraformed", "come build with us"). - **Casing:** Sentence case for headings and body. **The pixel font is the only all-caps voice** — eyebrows, button labels, the wordmark, stat numbers, kickers (`LIVE SERVERS`, `PLAY NOW`, `JAVA IP`). Never set long copy in all-caps. - **Tone words:** homegrown, hand-terraformed, golden-hour, storm-sky, evergreen, heartland, friendly, moderated. - **Headlines** are short and declarative: "Pick a world and jump in", "Built on a real place", "See you out there". One idea each. - **Body** is conversational and concrete, ~1–3 sentences. Names real things (Smith Tower, Elliott Bay, the Palouse, capture-the-wheat). - **Stats** are specific and a little understated: "218 players online", "Building since 2014", "12k × 12k custom overworld". - **Emoji:** **not** used in marketing copy. In **KullOS** emoji ARE the app-icon system (see Iconography) — that's a product convention, not a copy convention. - **KullOS voice** is quietly clever and teacherly: app taglines read "like Excel", "Everything is a book", and the teaching loop is "grow it → identify it → understand it → cook it". **Examples (real):** - Hero tag: "A homegrown voxel world built on the fields and forests of the Pacific Northwest. Golden wheat, evergreen ridgelines, and a skyline on the horizon — come build with us." - Server blurb: "Claim a plot in the wheat country, raise a town, and trade at the weekend markets. Grief-protected, economy-driven, seasons on." - CTA: "Fire up Minecraft, point it at the address below, and walk into the wheat." --- ## Visual foundations **Palette.** Two brand anchors — **wheat-gold** (`#f5c542`, with amber `#f0a811` / deep amber `#d98a06` for edges and accent text) and **indigo ink** (`#201233`, the wordmark color, used for text and dark surfaces). Around them, a naturalistic PNW spread sampled from the photos: wheat, forest, meadow, hill, moss (land); sky, sky-deep, cloud, storm, sun-cloud, water (sky). Neutrals are **cool, clear-sky whites** (`#f6fafc` page, `#ffffff` cards) with cool slate text (`#56676f`). Functional: live-green `#4f9d4f`, danger `#d8553f`, info, Discord blurple. Use brand/semantic tokens; reach for land/sky tones for illustration and accents, not large fields. **Type.** Three voices. **Silkscreen** (pixel) is the brand display face — wordmark, eyebrows, buttons, stat numbers, kickers; always tracked (`.04em`), all-caps. **Space Grotesk** (sans) carries headings (tightened `-.01em`) and all body. **Space Mono** is for data: IPs, coordinates, stats, code, statusbars. All three are open-source Google Fonts (loaded via `tokens/fonts.css`). **Geometry.** Deliberately **blocky / voxel**: small radii (`4–9px`; `14px` only on floating windows; pills reserved for status). Spacing on a 4px scale, sections at 90px rhythm, content max-width 1180px. **Backgrounds.** Two modes: (1) **full-bleed photography** with an indigo scrim — the hero, world bands, CTA strips, gallery; (2) **clean cool-white paper** for content sections and product UI. A faint indigo dot-grid (masked) can sit behind light heroes. No purple gradients, no synthetic mesh backgrounds. **Imagery vibe.** Real amateur photography, warm at golden hour / cool under storm skies, anchored to the **horizon line** (landscapes crop to `object-position: center 62%`). Always *cover + crop*, never stretch. An indigo gradient scrim keeps light/pixel text legible against bright PNW skies. A gold "soft-light" wash warms mixed shots to brand; use sparingly (heroes & dividers only). **Shadows.** Layered: a soft ambient drop **plus a hard 1-step offset** (`0 1px 0` / `0 3px 0`) that gives the "block" feel. The signature affordance is the **hard amber bottom edge** on gold buttons (`0 4px 0 var(--kg-amber-deep)`). **Borders & frames.** Hairlines are cool (`#d8e3e9`). The **voxel pixel frame** is a chunky 3px indigo border with a hard `6px 6px 0` amber drop — used on framed photos. **Cards.** Raised white, `9px` radius, cool hairline border, soft+hard shadow; **lift `translateY(-4px)`** with a stronger shadow on hover. Photo cards zoom the image `scale(1.05)` on hover. **Animation.** Quick and physical, never floaty. Hovers ~`.15s`; the **button press** is the star — `translateY(3px)` while the amber edge collapses to `1px` (`.08s`). Photos zoom over `.4s`. Live dots **pulse** (expanding ring). Easing `cubic-bezier(.2,.7,.3,1)`. Respect `prefers-reduced-motion`. **Hover / press states.** Hover: gold brightens (`brightness(1.04)`), links draw a gold underline left→right, card borders tint gold, nav links raise opacity `.78→1`. Press: the voxel translate-down + edge-collapse; ghost buttons translate `2px`. **Transparency & blur.** Reserved for chrome over photos/desktop: the sticky navbar and KullOS top bar use `~85%` paper/indigo with `blur(10–14px)`; chips over photos use `color-mix(... 82%, transparent)` + `blur(4px)`. Content surfaces stay opaque. --- ## Iconography - **KullGames marketing** uses **Font Awesome** (Free 6.x, via CDN) for UI glyphs — `fa-hammer`, `fa-copy`, `fa-brands fa-discord`, etc. Stroke/solid mixed, indigo or muted, small. The component cards load `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css`. - **KullOS uses emoji as its app-icon system.** Every one of the ~160 apps declares a single emoji `icon` in `apps/_base/apps.js` (🌻 Easy Mode, 📊 Spreadsheet, 🧊 3D Viewer, 🎹 Piano, 🗄 Database, 🛰 API Explorer …). Emoji also tile the dock, launcher, and Activities. This is intentional and brand-correct *inside the OS* — reuse the same glyph for the same app. - **The brand mark** is the hand-lettered pixel **KULL** wordmark over an AI-generated golden landscape (`assets/brand/kull-logo.png`, `logo.png`, `kull-square.png`). In small UI it reduces to a gold rounded-square "K" tile with the 2px-indigo / 3px-amber edge. - **Unicode** arrows/symbols appear in pixel link affordances ("Explore →"). - **Don't** hand-draw bespoke SVG icon sets, and don't introduce a second icon font. Use Font Awesome (web) or the emoji set (OS). --- ## What's in here (index / manifest) **Root** - `styles.css` — the single entry point (only `@import`s). Link this. - `base.css` — reset + base elements + brand utilities (`.btn`, `.pill`, `.kg-chip`, `.card`, the full `.kg-media` photo system, `.eyebrow`, `.wrap`, `.section`). - `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `geometry.css`. - `readme.md` (this file) · `SKILL.md` (Agent-Skill front-matter). **Components** (`components///` — `.jsx` + `.d.ts` + `.prompt.md` + a `@dsCard` HTML). Mount from `window.KullGamesDesignSystem_c5fadf`. - `actions/Button` — pixel CTA (primary / ghost / discord; md/lg). - `actions/IpBar` — copy-IP server connect bar. - `feedback/StatusPill` — online / offline / version presence badges. - `data/ServerCard` — live game-mode card. - `data/PostCard` — forum / news thread preview. - `media/MediaFrame` — the branded photo system (scrim / wash / voxel frame / focus / caption). - `layout/Navbar` — sticky marketing navigation. - `os/WindowShell` (+ `ToolButton`) — KullOS desktop-app window chrome. **UI kits** (`ui_kits//`) - `showcase/` — the KullGames marketing site recreation. - `kullos/` — the KullOS desktop shell recreation. **Guidelines** (`guidelines/*.card.html`) — foundation specimen cards for the Design System tab (Colors, Type, Spacing, Brand). **Reference** - `reference/kitchen-sink.html` — a branded, w3schools-style showcase of every common HTML element + CSS/JS pattern, themed in KullGames. **Assets** (`assets/`) - `brand/` — `kull-logo.png`, `logo.png`, `kull-square.png`, `cover.jpg`, `wallpaper.jpg`. - `photos//.jpg` — the full library: **39 PNW scenes × 10 size tiers** (`heroes`, `wide`, `banners`, `cards`, `portraits`, `squares`, `thumbs`, `avatars`, `px128`, `px64`). De-duplicated to clean names. **Tools** (`tools/scrapbook-tool/`) — the full Scrapbook mobile app (versions `1.0`, `2.0`, `app`, `archive`, + Overview). The yellow-v1 line; preserved as source, not the active brand. > **Photo rights:** all photography is © KullGames, all rights reserved — not for redistribution or model training. The wordmark lettering is by the KullGames artist; its background was AI-generated (c. 2023). Minecraft is a trademark of Mojang/Microsoft; KullGames is not affiliated.