Mobile App Theme Builder
Configure design tokens on the left — watch a live iPhone 16 or Pixel 9 preview update on the right. Export CSS Variables, React Native StyleSheet, or JSON in one click.
What's Inside
Everything you need to design your app theme
Real Device Frames
Preview your app inside pixel-accurate iPhone 16 (Dynamic Island) and Google Pixel 9 frames — switch instantly.
Full Color System
Primary, secondary, background, surface, text, border, error, and success — all live-synced to the preview.
20 Google Fonts
Search and preview Inter, Poppins, Plus Jakarta Sans, Space Grotesk, and 16 more — loaded instantly via Google Fonts.
Export-Ready Tokens
One click generates CSS Custom Properties, a React Native StyleSheet, or a structured JSON token file.
Full Design System
Brand, colors, typography, spacing, shape, components, navigation, mode, and effects — 7 sections, 30+ controls.
Dark Mode Builder
Toggle dark mode in the settings and both the builder UI and the phone preview switch simultaneously.
7 Setting Sections
Every token your app needs
Each section is a collapsible accordion in the left panel. Open only what you need, close the rest.
Brand
Colors
Typography
Spacing & Shape
Components
Mode
Effects
Simple Workflow
From idea to export in minutes
Configure Your Brand
Set your app name, primary and secondary colors, fonts, spacing, and navigation style using the live left panel.
Preview on Real Devices
Watch every change reflect instantly on an iPhone 16 or Pixel 9 mockup. Switch frames or go frameless.
Export Your Tokens
Hit Export Theme and copy your tokens as CSS Variables, React Native StyleSheet, or a JSON token file.
Export Options
Your tokens, your format
CSS Variables
Drop into any web project. All tokens as --custom-properties, ready for Tailwind, styled-components, or vanilla CSS.
:root {
--color-primary: #6366F1;
--font-heading: 'Plus Jakarta Sans';
--border-radius-card: 12px;
}React Native
A full StyleSheet.create() object with your theme object and pre-built card, button, and container styles.
export const theme = {
colors: { primary: '#6366F1' },
spacing: { sm: 8, md: 12 },
}JSON Tokens
Structured token file compatible with Style Dictionary, Figma Tokens, and design system pipelines.
{
"brand": { "primary": "#6366F1" },
"typography": { "fontHeading": "Plus Jakarta Sans" }
}Ready to build your app theme?
Open the builder, configure your design tokens, and export in seconds.
No account. No credit card. Just open and build.