Air Design System v2.0
A comprehensive design system for creating beautiful, consistent user interfaces for inspire me social network with a focus on inspiration and creativity.
Design Tokens
Colors, typography, spacing, and shadows that form the visual foundation of the system.
Components
Reusable UI elements with consistent styling and behavior patterns.
Patterns
Common interface solutions and interaction patterns for specific use cases.
Splash screen typically features the app logo or a key brand element prominently centered.
Header / Top Bar
Header often includes navigation (menu icon), app title/logo, and action icons (e.g., notifications, search).
Navigation Bar (Bottom)
Bottom navigation provides quick access to primary app sections. Uses icons and labels. Active state is highlighted (e.g., primary color).
Variations
Compact Style
Guidelines
When to Use
- For primary navigation in mobile apps
- When you have 3-5 main sections that need equal prominence
- When users need quick access to key areas from anywhere in the app
Best Practices
- Keep the height between 48-56px (including safe area)
- Use clear, recognizable icons with short labels
- Highlight the current section with the primary color
- Consider adding a floating action button for key actions
- Ensure the bar is always visible and accessible
User Profile Section
User Name
@username
Short user bio or description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
125
Posts
1.2K
Followers
340
Following
User profile includes avatar, name, username, bio, stats, and action buttons like "Edit Profile".
Variations
Minimal Profile
User Name
@username
Profile with Badges
User Name
@username
Guidelines
When to Use
- On user profile pages
- When displaying user information in comments or posts
- In leaderboards or user directories
- For account management screens
Best Practices
- Use circular avatars for user photos
- Display the username prominently
- Include relevant stats or metrics when appropriate
- Provide clear action buttons (Follow, Message, etc.)
- Consider adding verification badges for official accounts
Post Card
Author Name
2 hours ago
Inspiring Post Title
This is a short description or snippet of the post content. It gives a glimpse of what the post is about. #inspiration #design
Post cards typically display user avatar, name, timestamp, post image/content, title, description, and engagement actions (like, comment, share).
Menu Items (e.g., in a Drawer)
Menu items often consist of an icon and text label, used for navigation or actions within a settings menu or drawer.
Form Input Fields
Form inputs include labels, placeholder text, and often icons. Focus states should be clear. Textareas for longer input. Buttons for submission.
Button Types
Primary Button
Secondary Button
Outlined Button
Text Button
Button with Icon
Various button styles for different levels of emphasis and actions. Margins for buttons are typically 8px-16px (space-sm to space-md).
Variations
Button Sizes
Extra Small
Small
Medium
Checkboxes & Radio Buttons
Checkboxes
Standard Checkboxes
Checkbox Group
Select your interests:
Radio Buttons
Standard Radio Buttons
Radio Button Group
Select your preferred contact method:
Guidelines
When to Use
- Checkboxes: When users can select multiple options from a list
- Radio buttons: When users must select exactly one option from a list
- For settings, preferences, and form selections
- When you need clear visual feedback for selected states
Best Practices
- Use clear, concise labels positioned to the right of the control
- Group related options together with proper spacing between groups
- Maintain consistent sizing and alignment
- Provide adequate touch targets (minimum 48x48px)
- Use the primary brand color for selected states
Illustrations
Nothing here yet!
Looks like you haven't created any posts. Why not start now?
Illustrations can be used for empty states, onboarding, or feature explanations. They should align with the app's visual style. Spacing around illustrations should be generous, often 24px-32px (space-lg to space-xl).
Search Bar
Search bar with recent searches and popular tags suggestions. Includes clear button and search icon.
Tabs
Content for the selected tab would appear here.
Tab navigation for switching between different content views. Active tab is highlighted with primary color.
Cards Grid
Card Title
Short description of the card content.
Card Title
Short description of the card content.
Card Title
Short description of the card content.
Responsive grid of cards with hover effects. Each card contains an image, title, description, and metadata.
Floating Action Button
Floating action button for primary actions. Typically positioned in the bottom right corner of the screen.
Progress Indicators
Linear Progress
45% complete
Circular Progress
Loading Spinner
Button with Loading Spinner
Button with Brand Loading Spinner
Various progress indicators including linear progress bar, circular progress, and loading spinner.
Dropdown Menu
Dropdown menu that appears when clicking the button. Can contain various actions and dividers.
Tooltip
This is a tooltip message that provides additional
information.
Tooltip that appears on hover to provide additional context or information about an element.
Accordion
To change your password, go to Settings > Account > Password. You'll need to enter your current password and then your new password twice to confirm.
Accordion for displaying collapsible content sections. Each item can be expanded to reveal more information.
Toast Demo
Click the button above to trigger a toast notification.
Modal Demo
Click the button above to trigger a modal dialog.
Rating Component
Click to rate
Interactive star rating for user feedback and reviews.
Range Slider
Interactive range sliders with value indicators. Can be used for filters or settings.
Chip/Tag Component
Chips/tags for filtering content or displaying categories. Can be removable or selectable.
Switch/Toggle Component
Toggle switches for settings and preferences. Shows current state and allows toggling.
Brand Identity
Color Palette
#E53E3E
#2D3748
#A0AEC0
#EDF2F7
Typography
H1 Heading - Public Sans Bold 36px
H2 Heading - Public Sans Bold 30px
H3 Heading - Public Sans Bold 24px
H4 Heading - Public Sans Bold 20px
Body Large - Public Sans Regular 18px
Body Medium - Public Sans Regular 16px
Body Small - Public Sans Regular 14px
Caption - Public Sans Regular 12px
Spacing & Margins
Standard spacing units (based on a 4px or 8px grid):
- XS (4px): `p-1`, `m-1`, `space-x-1`, `space-y-1`
- SM (8px): `p-2`, `m-2`, `space-x-2`, `space-y-2`
- MD (16px): `p-4`, `m-4`, `space-x-4`, `space-y-4`
- LG (24px): `p-6`, `m-6`, `space-x-6`, `space-y-6`
- XL (32px): `p-8`, `m-8`, `space-x-8`, `space-y-8`
Default content padding for sections/cards: 16px (p-4) or 24px (p-6).
Margins between elements: Typically 8px, 16px, or 24px.
Breakpoints (Tailwind Standard)
- `sm`: min-width: 640px
- `md`: min-width: 768px
- `lg`: min-width: 1024px
- `xl`: min-width: 1280px
- `2xl`: min-width: 1536px
For mobile-first iOS design, primary styles apply to the smallest screens. Use `sm:` and above for larger screen adjustments if necessary (e.g., for iPad layouts if this design system were to be extended).
Iconography
Using Material Icons. Standard size: 24px. Smaller icons (e.g., in-line text): 16px-20px. Larger icons (e.e., empty states): 48px+.