Mobile Design System

The Challenge

Why We Needed a Design System

DM's mobile squads were working independently without a shared component library. This led to several critical issues:

• Visual Inconsistencies: Similar components looked different across apps, confusing users and weakening brand identity
• Duplicated Effort: Teams were reinventing components instead of reusing proven solutions
• Accessibility Gaps: No standardized approach to accessibility compliance across products
• Slow Handoff: Design-to-development communication was inefficient, causing delays and misunderstandings

The Solution

The solution was to build a mobile-focused Design System whose MVP delivered design tokens and 15 core components with variants. We analyzed the app's most-used components and ran an audit of current styles, colors, and typography to create a system that fit our existing product while raising quality and delivery speed.

The Lazuli Design System delivered measurable improvements across the entire product workflow — from design consistency and developer handoff speed to team-wide adoption and cross-platform coherence.

0%

Faster Handoff — Reduced design-to-development handoff time through shared tokens, reusable components, and clear documentation.

0%

Fewer Inconsistencies — Dramatic reduction in visual inconsistencies across mobile screens by enforcing a single source of truth for all UI elements.

0%

Team Adoption — Full adoption across design and engineering within the first month — driven by intuitive structure and thorough documentation.

widgets

Component Library — 15 core components with multiple variants, sizes, and states — all token-driven and production-ready for mobile.

palette

Design Tokens — Complete token system covering colors, typography, spacing, border radius, and opacity — ensuring pixel-perfect consistency.

group

Team Workflow — Streamlined collaboration between designers and developers with shared vocabulary, clear specs, and single source of truth.

menu_book

Documentation — Comprehensive guidelines with anatomy, usage rules, states, and real-world examples for every component in the system.

"The Lazuli Design System has transformed how our teams work together. We're shipping features faster, maintaining visual consistency, and our developers love having a single source of truth for components."

— Design Team Lead, DM Bank

"Since adopting the design system, our sprint velocity increased significantly. Shared components and tokens eliminated most of the back-and-forth between design and engineering — less rework, faster releases, and a codebase that finally matches what's in Figma."

— Tech Lead, DM Bank

Design Methodology — Atomic Design

Our design system follows atomic design principles, breaking down components into atoms, molecules, organisms, templates, and pages — ensuring consistency and scalability across all products.

Atomic Design Methodology — Atoms, Molecules, Organisms, Templates, Pages

How I applied it at DM (mobile): I mapped existing UI to the atomic hierarchy, tokenized color/typography/spacing, and defined 15 core components with variants. I set clear naming conventions, component APIs, and accessibility rules, then documented usage in Figma (libraries, examples, do/don't). This reduced duplication, sped handoff and QA, and let squads assemble screens faster with consistent behavior across iOS and Android.

Design Principles

Principles are concise, guiding statements that set the intent and guardrails of a Design System. They help teams make consistent decisions, resolve trade-offs, and keep the system aligned with user needs, brand, and product strategy.

Human

Designed with people at the center, prioritizing accessibility and inclusive experiences.

Simple

Minimal, focused interfaces that reduce cognitive load and guide users intuitively.

Accessible

WCAG compliant components ensuring usability for users with diverse abilities.

Transparent

Clear documentation and open design decisions enabling team collaboration.

Color Palette

A color palette is the set of official colors in a Design System, defined as tokens for consistent use across the interface. It drives brand identity, visual hierarchy (primary, secondary, states), and accessibility (proper contrast). The result: faster decisions, fewer inconsistencies, and cohesive UI.

Primary Colors

Success

Notification

Warning

Error

Greyscale

Typography Guidelines

Typography in a design system ensures visual consistency, readability, and hierarchy across all screens. It defines font families, sizes, weights, and spacing to guide how text is presented — from headings to body copy — creating a cohesive and accessible user experience.

Typeface

Rubik

Alphabet

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Numbers & Symbols

0 1 2 3 4 5 6 7 8 9
! @ # $ % & * ( ) ? + =

Type Scale

Heading 1

34 · Bold

Heading 2

28 · Bold

Heading 3

22 · Bold

Heading 4

18 · Bold

Body 1

16 · Regular

Body 2

14 · Regular

Caption

12 · Regular

Overline

10 · Medium

Aa

Light

300

Aa

Regular

400

Aa

Medium

500

Aa

SemiBold

600

Aa

Bold

700

Design Tokens

Design tokens are the single source of truth for UI primitives—spacing, margins, borders, border-radius, shadows, and opacity—applied consistently across products. We adopted an 8-point scale for predictable spacing and rhythm, and more rounded corners to reinforce a human, approachable feel while improving tap targets on mobile. Standardized shadows and opacity levels clarify hierarchy and states, reducing ambiguity and speeding delivery.

Padding

4

8

12

16

20

24

Opacity

100%

75%

50%

25%

0%

Border Radius

0

4

8

12

16

Full

Border Width

0

1

2

4

Margin Vertical

4

8

16

24

Margin Horizontal

4

8

16

24

Design Grid

The grid system provides a consistent spatial framework for laying out components and content. It ensures alignment, proportion, and visual rhythm across all screens and breakpoints.

Mobile Grid — 4 Columns

9:41

16

Grid Specifications

Columns

4

Gutter

8px

Margin

16px

Baseline

4px

Iconography

Iconography provides a consistent visual language that aids navigation and comprehension. Each icon follows a unified style to ensure clarity and cohesion across every screen and interaction.

Notification

notifications

notifications_active

notification_add

notifications_off

mark_email_read

campaign

Payment

credit_card

account_balance_wallet

payments

receipt_long

currency_exchange

savings

Registration

person_add

how_to_reg

badge

assignment_ind

contact_mail

app_registration

Elements

search

home

settings

menu

close

arrow_forward

Security

lock

shield

verified_user

fingerprint

vpn_key

gpp_good

Google Material Icons

Outline Style

Weight 300

Rounded

Live Interactive Components

Buttons

Buttons are the core token-driven components for triggering actions. They follow the design system's color, spacing, and border-radius tokens to ensure consistency across all touch points.

Anatomy

1

Button Label

2

3

1

Icon

Optional leading or trailing icon

2

Label

Action text, verb + noun format

3

Container

Background fill + border-radius token

Types

Fill

Outline

Ghost

Button Type	Primary Function	Visual Emphasis
Fill	Primary actions, key conversions	High — solid background
Outline	Secondary actions, alternatives	Medium — border only
Ghost	Tertiary actions, navigation	Low — text only

Variants

	Fill	Outline	Ghost
Default
Hover
Small
X-Small

Cases

Default

Disabled

Loading

Info

Error

Success

Use with Icon

Right Icon

Left Icon

Outline + Icon

Ghost + Icon

Guidelines

✓ Use Fill buttons for primary actions — one per screen section maximum.
✓ Pair Fill with Outline or Ghost for secondary actions in the same context.
✓ Always provide a visible Disabled state — never hide unavailable actions.
✓ Use Loading state for async operations to indicate progress.
✓ Keep labels concise — use verb + noun format (e.g., "Add Item", "Save Changes").

Input Fields

Input fields allow users to enter and edit text. They follow the design system's spacing, border-radius, and color tokens to ensure a consistent, accessible data-entry experience across all forms and flows.

Anatomy

Label

1

3

Placeholder text

4

Helper text goes here

2

1

Label

Visible text above the input field

2

Container

The outer border + background

3

Icon

Optional leading/trailing icon

4

Placeholder

Hint text when input is empty

5

Helper

Contextual hint or validation message

Types

Text Input

Password

Textarea

Input Type	Primary Function	Visual Cue
Text	Single-line text entry, names, emails	Standard border, placeholder
Password	Masked sensitive data entry	Obscured characters
Textarea	Multi-line text, comments, descriptions	Resizable, taller container

States

	Preview	Description
Default		Idle state with gray border
Focus		Blue border + ring on focus
Filled		Input with entered value
Disabled		Gray background, no interaction

Validation Cases

Email Please enter a valid email

Error

Username Username is available

Success

Password Password is too weak

Warning

With Icons

Search

Left Icon

Email

Right Icon

Sizes

Large

Default

Small

Guidelines

✓ Always pair inputs with a visible label — never rely on placeholder text alone.
✓ Use helper text to provide context or formatting hints below the field.
✓ Show validation feedback inline — error, success, or warning — with color and icon.
✓ Use icons to clarify input purpose — search, email, password visibility toggle.
✓ Maintain minimum 44px touch target height for mobile accessibility.

Checkboxes

Checkboxes allow users to select one or more options from a set. They follow the design system's color, spacing, and border-radius tokens with clear visual feedback for every interaction state.

Anatomy

1

2

Option label

3

4

1

Container

Bordered box with rounded corners, 22px default

2

Checkmark

SVG icon visible on checked/indeterminate state

3

Label

Descriptive text for the option

4

Touch Area

Invisible tap target, 44px minimum for mobile

Types

Unchecked

Checked

Indeterminate

Type	Usage	Visual
Unchecked	Default idle state, option not selected	Empty bordered box
Checked	Option is selected and active	Filled box + checkmark icon
Indeterminate	Partial selection in grouped items	Filled box + dash icon

Status

	Unchecked	Checked	Indeterminate
Default	Label	Label	Label
Hover	Label	Label	Label
Disabled	Label	Label	Label

Validation Cases

Required field

Please select this option

Error

Accepted terms

Selection confirmed

Success

Conflicting option

Incompatible with selection

Conflict

Sizes

Small

18px

Default

22px

Large

28px

Use in Groups

Select your interests

UX Design

Product Strategy

Visual Design

Research

Vertical Group

Notifications

Select all

Email notifications

Push notifications

SMS notifications

With Select All (Indeterminate)

Guidelines

✓ Use checkboxes when users can select multiple options — use radio buttons for single selection.
✓ Always provide a visible label — the checkbox alone is not sufficient for accessibility.
✓ Use indeterminate state for "select all" when only some children are checked.
✓ Maintain minimum 44px touch target for mobile, even if the visual box is smaller.
✓ Show error validation inline with red border and helper text when required fields are empty.

Radio Buttons

Radio buttons let users select exactly one option from a set of mutually exclusive choices. They follow the design system's color, spacing, and shape tokens for clear, consistent single-selection patterns.

Anatomy

1

2

Option label

3

4

1

Outer Ring

Circular border container, 22px default

2

Inner Dot

Filled circle visible on selected state

3

Label

Descriptive text for the option

4

Touch Area

Invisible tap target, 44px minimum

Types

Unselected

Selected

State	Usage	Visual
Unselected	Default idle state, option not chosen	Empty circular ring
Selected	Active option, single choice per group	Ring + filled inner dot

Status

	Unselected	Selected
Default	Label	Label
Hover	Label	Label
Disabled	Label	Label

Validation Cases

Select one option

This field is required

Error

Selected plan

Selection confirmed

Success

Unavailable plan

Option is no longer available

Conflict

Sizes

Small

18px

Default

22px

Large

28px

Use in Groups

Select a plan

Basic — Free

Pro — $9/mo

Enterprise — $29/mo

Vertical Group

Payment method

Credit Card

Visa, Mastercard, Amex

PIX

Instant transfer

Boleto

Bank slip, 1-3 business days

Card Selection Group

Guidelines

✓ Use radio buttons for mutually exclusive choices — use checkboxes for multi-select.
✓ Always group at least 2 options — a single radio button has no use case.
✓ Pre-select a default option when possible to reduce cognitive load.
✓ For more than 5 options, consider using a dropdown or select component instead.
✓ Maintain minimum 44px touch target and clear visual hierarchy within the group.

Toggle Switches

Toggle switches let users turn a setting on or off immediately. Unlike checkboxes, toggles trigger an instant state change and are ideal for binary preferences like enabling notifications or dark mode.

Anatomy

1

2

Dark Mode

3

4

1

Track

Background pill, changes color on state

2

Thumb

Circular handle that slides left/right

3

Label

Describes the setting being toggled

4

Touch Area

Invisible tap target, 44px minimum

Status

	Off	On
Default	Label	Label
Hover	Label	Label
Disabled	Label	Label

Semantic Variants

Primary

Default brand color

Success

Active / enabled state

Destructive

Caution / danger toggle

Sizes

Small

40 × 24

Default

48 × 28

Large

56 × 32

Use in Settings

Notifications

Push Notifications

Receive alerts on your device

Email Digest

Weekly summary to your inbox

SMS Alerts

Text messages for urgent updates

Settings List

Privacy

Face ID

Biometric login

Activity Status

Show online status

Location Sharing

Share with contacts

Card Style with Icons

Guidelines

✓ Use toggles for binary on/off settings that take effect immediately — no submit button needed.
✓ Place the label to the right and the toggle to the left, or use a justified settings layout.
✓ Use color to reinforce state — blue/green for on, gray for off, red for destructive.
✓ Avoid using toggles for multi-step forms — use checkboxes with a submit action instead.
✓ Add a description beneath the label for settings that need extra context.

Tags & Chips

A Tag is a compact UI component used to classify, highlight, or filter items — e.g., statuses, categories, keywords, or selections. Designed specifically for mobile interfaces, tags help users quickly scan and understand the state or category of an element within lists, cards, and filters. They support icon + text combinations across multiple semantic color themes optimized for touch interaction.

Anatomy

favorite

2

Label

3

1

Container

Required

Pill-shaped background, min-height 26px mobile

2

Icon

Optional

Leading symbol, 16px default, 14px small

3

Text

Required

Rubik Medium, 13px tall / 11px small

Size

favorite Label Label

Tall

Height 34px · Padding 8/16 · Font 13px

favorite Label Label

Small

Height 26px · Padding 5/12 · Font 11px

Size	Height	Padding	Font	Icon	Mobile Use
Tall	34 px	8 / 16 px	13 px	16 px	Cards, headers, primary indicators
Small	26 px	5 / 12 px	11 px	14 px	Lists, tables, compact layouts

Colors

Usage mode — each color maps to a semantic meaning across the mobile interface.

Usage	Light	Semi-Light
Inactive, no action, unknown	Greyscale	Greyscale
Updates, information, links	Blue / Main	Blue / Semi
Success, recommended, offer	Success	Success
Error, block, cancellation	Error	Error
Notification, alert, info	Notification	Notification
Attention, warning, pending	Warning	Warning

Variants

All color and style combinations — with and without icon.

Grey

Primary

Success

Error

Notification

Warning

Light Fill

favorite Label favorite Label favorite Label favorite Label favorite Label favorite Label

Label Label Label Label Label Label

Semi-Light Fill

favorite Label favorite Label favorite Label favorite Label favorite Label favorite Label

Label Label Label Label Label Label

Dark Fill

favorite Label favorite Label favorite Label favorite Label favorite Label favorite Label

Label Label Label Label Label Label

Outlined

favorite Label favorite Label favorite Label favorite Label favorite Label favorite Label

Label Label Label Label Label Label

Status & Behavior

State	Light	Dark	Outlined	Behavior
Default	Label	Label	Label	Resting state, no user interaction
Hover / Press	Label	Label	Label	Subtle darken on touch feedback
Disabled	Label	Label	Label	40% opacity, no pointer events

Touch Target

Minimum 44px touch area even on Small size tags for accessibility compliance on mobile.

Non-Interactive

Tags are read-only by default. They display status or category information without user interaction.

Truncation

Labels exceeding container width are truncated with ellipsis. Max recommended: 2 words.

Wrapping

Multiple tags wrap to the next line with 8px gap. Never scroll horizontally in mobile views.

Use in Context

9:41

signal_cellular_alt wifi battery_full

arrow_back Track your agreement

Jan / 2025 Paid

R$ 1,250.00

Feb / 2025 Paid

R$ 1,250.00

Mar / 2025 Open

R$ 1,250.00

Apr / 2025 Pending

R$ 1,250.00

May / 2025 Overdue

R$ 1,250.00

Filter Bar

Filters: check UX Design check Mobile Figma + Add

Status Labels

Design System — Components Completed

Accessibility Audit In Progress

Motion Guidelines Backlog

Legacy API Deprecation Blocked

Category Tags

design_services Design code Development science Research edit_note Content bug_report Bug archive Archived

Guidelines

✓ Use semantic colors consistently — green for success, red for error, yellow for warning, blue for informational.
✓ Keep labels concise — one or two words maximum for mobile readability and scannability.
✓ Choose light fill for subtle context and dark fill when the tag needs to stand out or indicate an active state.
✓ Use icons only when they reinforce meaning — avoid decorative icons that add visual noise on small screens.
✓ Prefer Small size for mobile lists and cards; use Tall only for primary indicators in headers or hero sections.
✓ Never mix fill styles in the same context — pick one style (light, semi-light, dark, or outlined) per section.

Illustrations Library

Every illustration was hand-crafted in Figma using only vector shapes and boolean operations — no raster images, no external plugins. This ensures infinite scalability, tiny file sizes, and full editability for any screen density or brand evolution.

grid_view

87

Unique Illustrations

Covering people, objects, and scenarios across the entire app experience — onboarding, errors, empty states, and celebrations.

polyline

100%

Vector-Based

Built entirely with vector paths and boolean operations in Figma — no raster images. Infinitely scalable with crisp rendering at any resolution.

design_services

Figma

Designed & Built in Figma

Every character and object was illustrated from scratch using Figma's native vector tools — organized as reusable components with color tokens applied.