Mobile app style guide: what goes in one, with an example

A mobile app style guide is a short document that records how your app looks: which colors it uses and what each one is for, the fonts and text sizes, the spacing, the corner radius, the icon style and the tone of its labels. When someone designs or builds a new screen, they check the guide, and the screen comes out matching the forty that already exist.

Most apps that look inconsistent have no bad designers behind them. They have six people who each picked a slightly different gray.

Style guide or design system?

People use the two terms as if they meant the same thing. A style guide covers appearance. A mobile design system contains the style guide and adds the reusable components, the rules for when to use each, and usually the code. If you're one person or a small team shipping a first version, start with the style guide. You can grow it into a system once you catch yourself redrawing the same card for the fifth time.

What goes in a mobile app style guide

Color

List colors by the job they do. "Blue" tells a developer nothing; "primary, used for the main button and selected tab" tells them where it goes. A phone app rarely needs more than these:

Give each an exact hex value, and a dark mode value if you support it. Then check the pairs you'll actually use. Body text needs a contrast ratio of at least 4.5:1 against its background under WCAG 2.2, and muted text is the one that usually fails.

Typography

Name the typeface, then write down a scale and stop adding to it. Five or six sizes cover an entire app. The system fonts (SF Pro on iOS, Roboto on Android) cost nothing, look native, and respect the text size a person has set on their phone. If you pick a brand typeface, note the fallback too.

For each size, record the weight and line height along with the pixel number. "Title, 22, semibold, 28 line height" is a rule someone can follow. "Large text" isn't.

Spacing and shape

Pick one spacing scale, usually multiples of 4 (4, 8, 12, 16, 24, 32), and say what the common values are for: 16 for screen margins, 12 between cards, 8 between a label and its field. Then pick a corner radius. One radius for cards, a smaller one for inputs and full rounding for pills is plenty. Mixed radii are the quickest way to make a screen look assembled from three different apps.

Icons and imagery

State the icon set, the stroke weight and the sizes you use (24 in bars, 20 inline is common). Say whether icons are outlined or filled, and whether the filled version marks the selected tab. For imagery, say whether the app uses photos, illustration or neither, and how images are cropped and rounded.

Voice

Two or three lines are enough. Sentence case or title case for buttons? "Sign in" or "Log in"? Do error messages apologize? These tiny decisions get made differently by every person who touches the app unless somebody writes them down once.

An example style guide

Here's a complete guide for a made-up bill-splitting app. It fits on a page, which is the point.

Seven colors, six text sizes, one spacing scale. A new screen built from only these values will look like it belongs.

How to write yours

If the app already exists, start by collecting what's there. Screenshot every screen, lay them side by side, and count: how many grays, how many text sizes, how many button heights? The number is usually embarrassing. Pick the most common value in each group, declare it the rule, and schedule the stragglers for cleanup.

If you're starting fresh, design three screens first (home, a list and a detail screen work well) and only then write the guide from what you settled on. Writing rules before you've designed anything produces rules you'll break in a week.

Either way, keep the guide where the team already works. A text file in the repository gets read and updated. A PDF in a shared drive gets forgotten. Writing it as a DESIGN.md file has a second benefit: AI design tools can read it, so generated screens follow your rules too. Our DESIGN.md examples give you three to start from.

Using a style guide in Outclass

In Outclass, the Theme panel is the style guide in working form. It holds the project's colors by role, its fonts and its corner radius, and changing a value there updates every screen at once. You can fill it three ways: let Outclass propose a style when it designs your first screens, import a DESIGN.md, or point it at your website and have it read the colors and fonts from there.

Once the screens look right, copy them to Figma as editable layers and the values travel with them. If you'd like the wider picture of how these choices fit together, the mobile app design guide covers layout, navigation and states.