Mobile App Design: Color & Typography Guide

Welcome to the foundational guide for establishing a cohesive and appealing visual language for your mobile applications. Effective use of color and typography is crucial for creating an intuitive, engaging, and branded user experience.

Color Palette

A well-defined color palette sets the mood, guides user attention, and reinforces your brand identity. We recommend a primary color, a secondary color for support, and accent colors for calls to action and key information.

#007bff

Primary

#6c757d

Secondary

#28a745

Accent

#f8f9fa

Background

#333333

Text

Color Usage Principles

Hierarchy: Use your primary color for dominant elements and calls to action.
Contrast: Ensure sufficient contrast between text and background colors for readability (WCAG AA compliance is recommended).
Meaning: Leverage color associations (e.g., red for errors, green for success) but be mindful of cultural differences.
Consistency: Apply colors consistently across all screens and components.
Accessibility: Test your color choices with users who have color vision deficiencies.

Typography

Typography is the voice of your application. Clear, legible, and appropriately styled fonts enhance user experience and convey the personality of your brand.

Typeface	Usage	Example
Inter	Headlines, Titles, Large Text	This is a Heading
Inter	Body Text, Paragraphs	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Inter	Subheadings, Captions	This is a Subheading
Inter	Buttons, Navigation Items	Action Button

Typography Best Practices

Font Choice: Select fonts that are highly readable on small screens and align with your brand's personality. Sans-serif fonts are generally preferred for digital interfaces.
Hierarchy: Use different font sizes, weights, and styles (e.g., bold, italic sparingly) to establish a clear typographic hierarchy.
Line Length: Keep line lengths between 40-60 characters for optimal readability in body text.
Line Spacing (Leading): Set line spacing to approximately 1.4-1.6 times the font size for comfortable reading.
Consistency: Define a typographic scale and stick to it throughout the application.

Example Usage (CSS Variables)


/* Define your colors and fonts in CSS variables for easy management */
:root {
    --primary-color: #007bff;
    --body-font-family: 'Inter', sans-serif;
    --heading-font-family: 'Inter', sans-serif;
    --body-font-size: 16px;
    --body-line-height: 1.6;
    --heading-font-weight: 700;
    --body-font-weight: 400;
}

/* Apply to elements */
h1, h2, h3 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    color: var(--heading-color);
}

p {
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    font-weight: var(--body-font-weight);
    color: var(--text-color);
}

.button {
    background-color: var(--primary-color);
    color: white;
    font-family: var(--body-font-family);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 5px;
}

By thoughtfully combining a well-considered color palette with clear and consistent typography, you can create mobile applications that are not only visually appealing but also highly usable and memorable.