TouchFlow Design System

TouchFlow Design System mockup preview
Click to expand

TouchFlow is a gesture-native, thumb-friendly design system crafted for iOS and Android general-purpose app design. It prioritizes comfortable one-handed use with generous touch targets, rounded surfaces, and spatial cues that guide natural finger movement. The clean white foundation paired with blue, coral, and mint accents creates a fresh, approachable interface. Every component is optimized for mobile viewport constraints and touch interaction patterns.

Primary#3B82F6
Secondary#F97171
Tertiary#34D399
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayFigtree · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineFigtree · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadFigtree · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeDM Sans · 17px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyDM Sans · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallDM Sans · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionDM Sans · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

OverlineDM Sans · 11px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeRoboto Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 6px

TouchFlow is a gesture-native, thumb-friendly design system crafted for iOS and Android general-purpose app design. It prioritizes comfortable one-handed use with generous touch targets, rounded surfaces, and spatial cues that guide natural finger movement. The clean white foundation paired with blue, coral, and mint accents creates a fresh, approachable interface. Every component is optimized for mobile viewport constraints and touch interaction patterns.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus

Checkbox

Unchecked

Checked

Focus

Disabled

RadioButton

Unselected

Selected

Tooltip

Default

Elevation & Depth

Subtle
Medium
Large
Overlay

Do's & Don'ts

Do

ensure all interactive elements have a minimum 44px touch target for accessibility.
place primary actions in the thumb zone (bottom third of the screen).
use haptic feedback cues for destructive actions and confirmations.
support swipe gestures on cards and list items for quick contextual actions.
respect system safe areas and notch/Dynamic Island clearance.
provide smooth spring animations (250-350ms) for all navigation transitions.

Don't

rely on hover states -- design for press/tap feedback on mobile.
use small text below 12px -- legibility on mobile screens is critical.
place critical actions behind long-press menus without a visible alternative.
use shadows heavier than Medium on resting components -- keep the interface light.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.5 KB
Downloads 0
clean light mobile-app modern saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/touchflow and implement it in my code

Don't have the MCP? Install it here