27 components · DESIGN.md · AI-ready

Android Talk
Design System.

An Android-themed slide system for tech talks. Hand DESIGN.md to any AI tool and get decks with clean white canvases, green and lime accents, highlight words and Kotlin code panels.

Get DESIGN.mdFork on GitHubOpen example deck
Where it comes from

Created from four conference talks

Every colour, size and pattern was measured from the slides of four talks by Dinoy Raj. See the original decks on SlideShare.

Build Your Pocket Brain: Tiny On-Device LLMs via MediaPipe on AndroidDevFest Dubai · Mobile Developers Week
Beyond the Grid: Crafting a Custom Android Launcher from ScratchDevFest Mumbai
Compiler Magic & Stability: Optimising Compose RecompositionFOSSASIA Summit 2026
Supercharging Android Apps with On-Device AI: Gemini Nanodroidcon Uganda 2025
Use with AI

One file, any AI tool, on-brand slides

01
Give it DESIGN.md

Attach or paste the spec: rules, tokens, type scale and all 27 components.

02
Describe your talk

Title, sections, demos. Pick the TopicTag or Headline style.

03
Get an HTML deck

1920×1080 slides that link the tokens and slide CSS from this repo.

04
Present or export

Arrow keys to present, or ask for PowerPoint, Google Slides or Keynote using the same spec.

// example promptUsing 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, one StatementSlide per section, two demos, KeyTakeaways and the ClosingSlide. Output one HTML file that links tokens/tokens.css and css/slides.css.
ClaudeChatGPTGeminiClaude CodeCodexCursorCopilotv0 · Lovable · Bolt
Components

27 slides, ready to copy

Each one is a standalone 1920×1080 HTML slide. Open it, copy the markup, replace the content.

Slides

AgendaSlide slideAgendaSlideTalk outline ClosingSlide slideClosingSlideThankyou + QR DemoSlide slideDemoSlideDemo section break GreenStatement slideGreenStatementSection interstitial SectionDivider slideSectionDividerNumbered chapter break SpeakerIntro slideSpeakerIntroAbout me StatementSlide slideStatementSlideQuestion over the grid TitleSlide slideTitleSlideOpening slide

Labels

ChipSet slideChipSetBadges and status chips Headline slideHeadlineSlide headline TopicTag slideTopicTagSlide label

Content

BulletList slideBulletListBullets with highlights CalloutNote slideCalloutNoteTip and note boxes CodeBlock slideCodeBlockKotlin on dark CodePair slideCodePairBefore / after code DataTable slideDataTableComparison table FeatureCards slideFeatureCardsOutlined card row FlowDiagram slideFlowDiagramNodes and connectors KeyTakeaways slideKeyTakeawaysRecap with checks NumberedSteps slideNumberedStepsDiscs and numerals PromptResponse slidePromptResponsePrompt and model output ResourcesSlide slideResourcesSlideLinks and QR ScreenshotRow slideScreenshotRowPhone screens with captions StatHighlight slideStatHighlightBig numbers Timeline slideTimelineHorizontal steps TintTiles slideTintTilesMint, blue and solid tiles VersusSplit slideVersusSplitA vs B
Foundations

Tokens, type and expressive shapes

Read live from tokens/tokens.json.

Colour

Type scale

Material 3 Expressive shapes

is-cookie9
is-cookie12
is-clover
is-sunny
is-flower
is-burst

Corner radius

Example deck

Ten slides, one file

Click inside, then use ← → to move. Open fullscreen