AITOPIA - AI App Store Design System
A comprehensive design system inspired by Apple's iOS App Store and shadcn/ui. Built with Tailwind CSS for consistency and scalability.
Colors
iOS System Colors
Blue
#007AFF
Green
#34C759
Indigo
#5856D6
Orange
#FF9500
Pink
#FF2D55
Purple
#AF52DE
Red
#FF3B30
Teal
#5AC8FA
Yellow
#FFCC00
Semantic Colors
Primary
hsl(221 83% 53%)
Secondary
hsl(210 40% 96%)
Muted
hsl(210 40% 96%)
Border
hsl(214 32% 91%)
Typography
Using Inter font family with SF Pro Display fallback for iOS-native feel.
Large Title
34px / Bold
Title 1
28px / Bold
Title 2
22px / Bold
Title 3
20px / Semibold
Headline
17px / Semibold
Body
17px / Regular
Subheadline
15px / Regular
Caption
12px / Regular
Caption 2
11px / Regular
Cards
App List Card
Image Generator
Create stunning AI images
4.9
AI Art
Featured Card
Featured
Video Generator
Create stunning AI videos
Grid Card
Virtual Try-On
E-Commerce
Transform clothing into model shots
4.8
Inputs
Search Field
Text Input
Textarea
Badges
Tier Badges
Free
Starter
Pro
Enterprise
Status Badges
Online
Processing
Offline
Feature Badges
Popular
New
Featured
Icons
Search
Home
Grid
Heart
Plus
Close
Check
Chevron
Spacing Scale
4px
space-1
8px
space-2
12px
space-3
16px
space-4
20px
space-5
24px
space-6
32px
space-8
Animations
Hover Effects
Scale
Lift
Shadow