A collection of 204 CSS design systems, 45 interactive stories, 62 tech guides, 50 browser games, a chiptune music studio, 45 creative tools, a Kids' Corner with toddler-friendly games and activities, and a daily AI newspaper — all built with vanilla HTML, CSS, and JavaScript. No frameworks. No build step. Just open a file in your browser.
Each style guide is a self-contained HTML file showcasing a complete CSS design system: color palette, typography, spacing, buttons, forms, cards, alerts, and more. Every design is unique — from cherry blossoms to brutalism, dark academia to solarpunk.
Every guide defines its full design system in CSS variables (:root {}), making it easy to extract and reuse.
Educational narratives that pair style guide aesthetics with historical content. Each story has 10-15 scenes with branching choices, keyboard navigation, and real historical facts woven into the progression. Some include audio narration.
Styled developer cheat-sheets for tools like Git, Docker, Python, Rust, and more. Each guide has sticky navigation, 8-12 sections, and code examples — all wrapped in a curated visual design.
Standalone arcade and strategy games — Asteroids, Checkers, casino games, roguelikes, and more. Pure JavaScript physics and game logic with shared audio and theme engines.
A FamiTracker-inspired chiptune sequencer with 78+ songs, a virtual cathedral organ, and 75+ canvas-rendered music videos with beat-synced animations.
Interactive editors including a stick figure animation studio (with IK solver and GIF export), an HTML presentation viewer/editor, a drawing studio (with layers, blend modes, and pressure sensitivity), CSS grid playground, color blindness simulator, font pairing tool, ASCII art editor, and more.
Interactive system architecture diagrams for open source projects and tech platforms.
A PWA-enabled section designed for 2-4 year olds on iPad. Carnival-fairground themed hub with big picture-based navigation. Includes Bubble Pop, Finger Paint, and Fairy Makeover Defense (tap monsters to beautify them with sparkles and rainbow wings). Works fullscreen with iPad Guided Access to keep kids in the app.
A newspaper-themed daily AI news publication with self-contained broadsheet editions.
Every style guide in this repo is a ready-made design system that AI tools can read directly. To apply any style to your own project, just tell Claude (or any LLM):
"Look at https://github.com/GGPrompts/ggprompts/blob/main/styles/cherry-blossom.html and apply that design system to my project"
That's it. The AI will read the CSS variables, typography, color palette, and component patterns — then apply them to whatever you're building.
Browse the live site to find a style you like, then point your AI at the raw file.
Every style has a unique aesthetic. Some are paired with tech guides and stories that use their design system. 77 paired / 127 available for new content.
| Style | Tech Guide | Story |
|---|---|---|
| aboriginal-dot-art | ||
| afrofuturism | ||
| air-traffic-control | Networking Fundamentals | |
| anatomical-illustration | ||
| apothecary | ||
| aquarium | ||
| architectural | PostgreSQL & MySQL, Software Architecture | |
| arctic | ||
| art-deco | Linux Distributions | The Jazz Age |
| art-nouveau | Belle Epoque | |
| ascii-art | ||
| astronomical | ||
| atlas-console | Monitoring & Observability | |
| aurora-borealis | Elixir | |
| barbiecore | ||
| baroque | ||
| batik | ||
| bauhaus | The Last Semester | |
| bento-grid | ||
| blackletter-fraktur | ||
| blueprint | Kubernetes | |
| brutalist-concrete-plant | ||
| brutalist-typography | ||
| brutalist-web | systemd | The Concrete Dream |
| bubbles | ||
| byzantine | Active Directory & IAM | |
| carnival-fairground | ||
| casino-vegas | ||
| cassette-futurism | htmx | |
| cassette-liner-notes | ||
| celtic | Go | |
| chalkboard | ||
| cherry-blossom | ||
| chindogu | ||
| chinese-porcelain | Cloud Platforms | |
| circuit-board | Vim / Neovim | |
| civic | Security & Compliance | |
| claymorphism | ||
| clockwork-horologist | Makefiles | |
| coastal-cottage | ||
| codex-terminal-2031 | ||
| coffee | Java | The Bean |
| coffee-shop | ||
| color-field | ||
| comic-book | ||
| concrete-brutalist | ||
| constructivism | Terraform | |
| copper-verdigris | Rust | Liberty |
| coral-reef | ||
| cork-board | ||
| corporate-memphis | ||
| cosmic | The Golden Record | |
| cottagecore | ||
| cozy-game-ui | ||
| crime-scene | ||
| cubism | ||
| cyberpunk | Docker | The Network |
| dadaism | ||
| dark-academia | The Forbidden Library | |
| dark-folio | Claude Code | |
| dark-mode-material | Google Cloud Platform | |
| darkroom | The Decisive Moment | |
| data-bento | ||
| data-visualization | DuckDB | |
| day-of-the-dead | ||
| de-stijl | HTML & CSS, Programming Languages | |
| deep-sea-bioluminescence | GraphQL | |
| denim | The Rivet | |
| desert-sahara | ||
| dieselpunk | Termux | |
| dos-bios | curl & wget | |
| editorial | ||
| egyptian-pharaonic | ||
| embroidery | ||
| etch-a-sketch | ||
| ethiopian-geez | ||
| fauvism | ||
| federal-night | Rationalization & Decommissioning | |
| film-grain | FFmpeg | The First Reel |
| fire-and-heat | Redis | |
| flow-diagram | ||
| frutiger-aero | VS Code | |
| futurism | CI/CD Pipelines | |
| gaming-esports | ||
| geological-mineral | ||
| glassmorphism | GitHub Copilot CLI | The Glassblower's Legacy |
| glitch-art | Godot Engine | |
| goblincore | ||
| gothic | ||
| gothic-cathedral | ||
| gradient-mesh | ||
| graffiti | ||
| grunge-typography | ||
| holographic | OpenAI Codex CLI | The Spectrum |
| honeycomb | MCP | |
| impressionism | ||
| indian-rangoli | ||
| industrial | nginx | |
| infrared-thermal | Hyprland AI Workstation | OpenClaw |
| japanese-zen | The Way | |
| jrpg-menu | ||
| kaleidoscope | ||
| kente-cloth | ||
| kinetic-flux | jq | |
| knolling | API Design & REST | |
| korean-hanok | ||
| leather-wood | ||
| letterpress | Git | The Press |
| library-card-catalog | Emacs | |
| light-academia | ||
| liminal-space | ||
| linocut | ||
| low-poly | ||
| mac-os-classic | ||
| macrame | ||
| mad-scientist-lab | ||
| manga | ||
| manuscript-illumination | ||
| marble-gold | Engineering Excellence | |
| maximalism | ||
| mayan-aztec | ||
| memphis | npm / yarn / pnpm | |
| microscopy | ||
| midcentury | The Space Race | |
| minimalism | ||
| mono-developer | ||
| moroccan | The Geometer's Garden | |
| mozarts-study | ||
| mughal | ||
| mushroom-mycelium | ||
| nautical-maritime-flags | ||
| neo-void | ||
| neon-brutal | The Strip | |
| neubrutalism | ||
| neumorphism | AI CLI Developer Setup | |
| newspaper | Security Fundamentals | |
| noir | SSH | The Morrison Case |
| nordic | The Long Winter | |
| notion-style | ||
| ocean-maritime | ||
| op-art | Regular Expressions | |
| origami | ||
| ottoman-iznik | ||
| outrun | GitHub Actions | |
| paleontology-fossil | ||
| paper-craft | ||
| parchment | The Scribe's Tale | |
| persian-miniature | ||
| pixel-art | Player One | |
| plain-chaos | ||
| pointillism | ||
| polaroid | ||
| polynesian-tapa | ||
| pop-art | The Meme Museum | |
| pre-raphaelite | ||
| pressed-flowers | ||
| psychedelic | The Summer of Love | |
| qr-code | ||
| rainbow-road | ||
| regencycore | ||
| retro-futurism | Bash Scripting | |
| retro-terminal | tmux | The Machine |
| risograph | The Zine | |
| rococo | ||
| roman-mosaic | ||
| rts-hud | Terminal Emulators | The Ladder |
| russian-propaganda | ||
| scandi-cozy | ||
| seasonal-scroll | ||
| silent-film | ||
| sketch | AI Context Management | The First Line |
| slavic-folk-art | ||
| solarpunk | Ansible | |
| soviet-space-program | ||
| stained-glass | PKI & Certificates | |
| steampunk | Zig, Makefiles | |
| streamline-moderne | The Express | |
| suprematism | ||
| surrealism | ||
| sushi-bar | ||
| swiss | ||
| swiss-international | Python & pip | |
| synthwave | Termux | |
| talavera | ||
| terminal-2031 | ||
| terracotta-adobe | ||
| terrazzo-atelier | ||
| thai-temple | ||
| tibetan-buddhist | ||
| topographic-map | ||
| tropical | ||
| ukiyo-e | Ruby & Rails | |
| vaporwave | TypeScript / JavaScript | The Plaza |
| verdant-grove | The Wood Wide Web | |
| vienna-secession | Operational Excellence | |
| viking-norse | ||
| vintage-signage | ||
| visual-novel | ||
| volcanic | ||
| watercolor | The Pigment Trail | |
| wes-anderson | ||
| windows31 | PowerShell | |
| wireframe | ||
| witchcore | ||
| y2k | ||
| zine-punk |
/
├── styles/ # 204 CSS design system showcases
├── stories/ # 45 interactive educational stories
├── techguides/ # 66 styled developer reference docs
├── games/ # 50 browser games
├── music/ # Chiptune studio, sequencer, visualizer
├── tools/ # 45 creative tools and editors
├── kids/ # Kids' Corner — toddler games & activities (PWA)
├── architecture/ # 33 interactive architecture maps
├── news/ # The AI Dispatch — daily AI news
└── index.html # Main navigation
- HTML, CSS, JavaScript — that's it
- Google Fonts — the only external dependency
- GitHub Pages — deployed with zero configuration
- No frameworks. No bundlers. No npm. Every file works by opening it in a browser.
This project is open source. All code is available for reference, learning, and reuse.