How to Extract an Android App's Design System

Because there's no CSS to inspect. On a website, every element's colour, font, spacing and transition is in a stylesheet the browser will show you. An Android app ships compiled resources and code, and much of its look is decided at run time.

• Colours live in theme attributes and colour resources, often with a separate night version, and on Android 12 and later an app using dynamic colour takes its palette from the user's wallpaper.
• Fonts may be bundled in the package, downloaded at run time, or set in code.
• Jetpack Compose, Flutter and game engines draw their own UI, so there's often no tree of named views with styles attached.
• Motion is spread across animation XML, Lottie files and code, and the only way to see the real timing is to watch the screen frame by frame.

Use the Layout Inspector. Android's docs say it "lets you inspect and debug the layout inside a running app in an emulator or physical device", and "all the layout attributes for the selected component appear in the Attributes panel".

1. 1Connect a device or start an emulator, and run the app.
2. 2Open the Layout Inspector in Android Studio. It "automatically connects to the debuggable processes running in the foreground".
3. 3Select a component in the tree to see its attributes, for Compose, View or hybrid layouts.
4. 4Export a snapshot to keep the rendering, the component tree and every component's attributes for later.

It's the most precise manual method, but it's built for apps you are developing: it connects to debuggable processes, and it shows one component at a time rather than a summary of the whole palette, type scale and motion.

Yes, its layout tree. UI Automator is Android's framework for "cross-app functional UI testing across system and installed apps", and it can dump what's on screen.

The uiautomatorviewer tool gives "a convenient visual interface to inspect the layout hierarchy and view the properties of UI components that are visible on the foreground of the device". In code, UiDevice.dumpWindowHierarchy "dumps every window's layout hierarchy" to a file "in XML format".

What you get is structure: each element's class, resource id, text, content description, and whether it's clickable. You don't get colours, font families, text styles or motion, and apps that draw their own UI may expose little. The docs warn that for components that aren't accessible to UI Automator "only limited information might be available".

Material 3 already organises an Android design into tokens: colour roles, a type scale and shape sizes. If an app is built on it, extracting its design system is mostly a matter of reading those values.

Android's Compose docs say "an M3 theme contains the following subsystems: color scheme, typography and shapes". The colour scheme is a set of roles: primary for "main components like prominent buttons, active states", secondary and tertiary for less prominent and contrasting accents, surface and background for neutrals, each with an "on" colour for content on top of it (on-primary on primary). The type scale is display, headline, title, body and label, "with large, medium, and small sizes for each", 15 styles in all. Shapes come in five sizes, from Extra Small to Extra Large.

Two things to watch. Dynamic colour, available on Android 12 and above, derives a palette from the user's wallpaper, so the colours you see on your phone may not be the app's brand colours. And View-based apps keep the same roles as theme attributes (colorPrimary, colorSurface, colorOnSurface and so on), which you only see by resolving the app's theme.

Use the Android Studio tools for apps you build, UI Automator for structure, and a dedicated extractor when you want the whole design system of an app you didn't build.

Applivery is the Android sibling of Livery. Pick an installed app and it reads the package on the phone, then optionally records a walkthrough while you use the app, and exports a Livery-format skill.

• Theme: the launch theme's colour attributes, resolved in light and night configurations (including Material roles such as colorPrimary, colorOnPrimary, colorSurface and colorOutline).
• Colour: every colour resource, light and night, with roles (background, surface, text, accent), sources and WCAG contrast.
• Type: bundled fonts (res/font, assets and Flutter's FontManifest.json), downloadable Google Fonts families and declared text sizes.
• Motion: anim, animator, interpolator and transition XML with durations and cubic control points, plus Lottie files. A walkthrough also times every screen change frame by frame and fits it to an exact cubic-bezier, and sets loading flashes aside.
• Assets and framework: every image in the package, drawable XML rendered to PNG, and the framework the app uses (Flutter, React Native, Jetpack Compose, Android Views, Unity, .NET or a web view), with the evidence.
• Screens and layouts: one frame per distinct screen and, with Applivery's optional accessibility service on, each screen's elements with positions in dp, text sizes and sampled colours. Games and 3D apps get a scene mode.

Export kit writes SKILL.md, rules.md, tokens.json, fonts.json, motion.md, layout.md, screens.md, screen layouts, keyframe strips, frames and assets. Share it or save it to Download/Applivery, then give it to Claude Code or any agent and say "apply this kit". Kits can also be sent to Figma. Everything is read on the phone and nothing is uploaded unless you share a kit or send it to Figma.

An app's icons, images, illustrations and fonts belong to its owner, and Applivery includes them in kits by default. For your own product, keep the measured style and turn off Include assets in Export, or replace them with your own.