Apps By Hands Design System
A comprehensive design system matching our iOS app for consistent web experiences.
Colors
Primary Colors
Primary Main
#ff6b6b
Primary Light
#ff8e8e
Primary Dark
#e55a5a
Secondary Colors
Secondary Main
#4ecdc4
Secondary Light
#7dd3d0
Secondary Dark
#3bb5ac
Status Colors
Success
#10b981
Warning
#f59e0b
Error
#ef4444
Typography
Heading 1
5xl / Extrabold
Heading 2
4xl / Bold
Heading 3
3xl / Semibold
Heading 4
2xl / Medium
Body Large
lg / Normal
Body Regular
base / Normal
Body Small
sm / Normal
Buttons
Variants
Sizes
States
Cards
Basic Card
This is a basic card with header and body content.
Card with Body Only
Sometimes you just need the body content without a header.
Card with Footer
This card includes a footer section.
Form Elements
Input Fields
Badges
Primary
Secondary
Success
Warning
Error
Alerts
This is a success alert with important information.
This is a warning alert that requires attention.
This is an error alert indicating something went wrong.
This is an info alert with general information.
Spacing Scale
XS: 4px
SM: 8px
MD: 16px
LG: 24px
XL: 32px
2XL: 48px
3XL: 64px
Usage Examples
Project Card Example
Mobile App Development
iOS & Android native app
$15,000
Estimated cost
In Progress
High Priority