Android Talk Design System
An Android-themed, AI-ready slide design system for tech talks — built so any AI tool can make on-brand slides from it. White canvases, Android green and lime accents, blue/green highlight words, dark Kotlin code panels, 27 slide components.
Created from the slides of my last 4 conference talks — see them on SlideShare:
| Talk | Event |
|---|
| Build Your Pocket Brain: Tiny On-Device LLMs via MediaPipe on Android | DevFest Dubai · Mobile Developers Week |
| Beyond the Grid: Crafting a Custom Android Launcher from Scratch | DevFest Mumbai |
| Compiler Magic & Stability: Optimising Compose Recomposition | FOSSASIA Summit 2026 |
| Supercharging Android Apps with On-Device AI: Gemini Nano | droidcon Uganda 2025 |
Components
Every component is a standalone 1920×1080 slide in components/. Click a preview to open its source.
Slides
Full-slide layouts for the moments of a talk.
Labels
Headers and small labels.
Content
Layouts for explaining things.
Use it with an AI tool
Give the tool DESIGN.md (attach it, paste it, or point it at this repo), then ask for your talk:
Using the attached DESIGN.md, create a 20-slide HTML deck for my talk "Building Offline-First Apps with Kotlin Multiplatform". Use the TopicTag header style, include one StatementSlide per section, two demos, KeyTakeaways and the ClosingSlide. Output one HTML file that links tokens/tokens.css and css/slides.css.
| Tool | How |
|---|
| Claude, ChatGPT, Gemini (chat) | Attach DESIGN.md (plus a component file or two from components/ for best fidelity) and describe your talk. |
| Claude Code, Codex, Cursor, Copilot, other coding agents | Clone or fork the repo and ask in it. AGENTS.md / CLAUDE.md point the agent at DESIGN.md and tell it where to write decks. |
| v0, Lovable, Bolt and other site builders | Paste DESIGN.md and ask for an HTML slide deck. |
| PowerPoint / Google Slides / Keynote / Figma | Ask the AI to apply DESIGN.md to a 1920×1080 (16:9) file; the spec includes the mapping. Or set it up by hand from the tokens. |
Tools that read llms.txt | llms.txt lists the files to read. |
What's inside
DESIGN.md The spec: rules, tokens, type scale, layouts, all 27 components, checklist
AGENTS.md, CLAUDE.md Instructions for coding agents
llms.txt Index for LLM tools
tokens/tokens.json Design tokens (colour, type, spacing, radius)
tokens/tokens.css The same tokens as CSS custom properties + .t-* type classes
css/slides.css Slide primitives (dr-slide, dr-tag, dr-bullets, dr-code, dr-badge …)
components/*.html 27 standalone 1920×1080 slide components
examples/deck.html A 10-slide example deck with navigation
index.html Showcase website (deployed to GitHub Pages)
.github/workflows/ Builds the site on every PR, deploys it when main changes
docs/ README banner and component preview images
Make it yours
- Fork this repo.
- Change colours, fonts or sizes in
tokens/tokens.json and tokens/tokens.css (keep them in sync), and update the tables in DESIGN.md to match.
- Replace the placeholder name, role and links in
TitleSlide, SpeakerIntro, ResourcesSlide and ClosingSlide.
- Turn on GitHub Pages (Settings → Pages → deploy from the
main branch, root) to get a public gallery link.
Fonts, images and trademarks
- Fonts load from Google Fonts: Google Sans Flex and Source Code Pro, both under the SIL Open Font License. Nothing is bundled.
- This repo ships no images. Bring your own photos, screenshots and renders. Product and event logos belong to their owners. If you use the Android robot, credit it: "The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."
- The palette is inspired by Google's brand colours. This project is not affiliated with or endorsed by Google.
Contributing
main is protected: every change goes through a pull request.
- Create a branch from
main with a descriptive name, e.g. feature/agenda-progress-bar or fix/table-row-contrast.
- Keep
tokens/tokens.json, tokens/tokens.css and the tables in DESIGN.md in sync, and refresh the matching image in docs/preview/ when a component changes.
- Open a PR into
main. The Showcase site workflow builds the site and checks that every linked file exists.
- When the PR is merged, the same workflow deploys the site to GitHub Pages automatically.
License
- Code (CSS, HTML, JSON): MIT
- Documentation (
DESIGN.md, README.md): CC BY 4.0 — please credit "Android Talk Design System by Dinoy Raj".
Contributions welcome: open an issue or PR with new components that follow DESIGN.md.
