Shopease Design System

Clarity First

Prioritize clear communication through intuitive layouts, legible typography, and straightforward navigation.

Start with the User

Empathy leads every decision.

Consistency Builds Trust

Maintain visual and functional consistency across all platforms and device sizes.

Heading 1

Heading 2

Heading 3

Heading 4

Subtitle

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caption text. Praesentium officia eveniet dolor.

Usage Guidelines

• • Use Inter font family throughout the application
• • Maintain a minimum line height of 1.5 for body text
• • Never use less than 16px for body copy
• • Limit to 2 font weights per page (e.g., Regular and Semibold)
• • Left-align text for readability, center only for special cases
• • Use sentence case for all UI text except proper nouns

Standard Buttons

Icon Buttons

Button States

Button Guidelines

• • Primary buttons should be used for the most important actions on a page
• • Secondary buttons are for less prominent actions
• • Buttons should have a minimum width of 120px for touch targets
• • Maintain consistent padding: 12px vertical, 24px horizontal
• • Always include a loading state for buttons that trigger async actions
• • Disabled buttons should still meet contrast requirements (4.5:1)
• • Icon buttons should have a minimum touch target of 48x48px

Button Sizes

Input Fields

Checkboxes & Radios

Toggle Switch

Form Guidelines

• • Always pair form fields with clear, visible labels
• • Use placeholder text sparingly and only for examples
• • Group related form fields together with proper spacing
• • Provide clear error messages near the problematic field
• • Use autocomplete attributes where appropriate
• • Ensure all form controls are keyboard accessible
• • Validate forms progressively (as user types when possible)

Pagination

Breadcrumbs

Alerts

Progress Indicators

Tooltips

Ratings

Toast Notification

Show Toast

Feedback Guidelines

• • Use alerts for important messages that require user attention
• • Progress bars should show meaningful progress with percentage
• • Tooltips should be concise and appear on hover/focus
• • Rating displays should be consistent throughout the application
• • Toast notifications should auto-dismiss after 5-8 seconds
• • Error messages should be specific and suggest solutions
• • Success messages should confirm the completed action

Modal Example

Open Modal

Modal Guidelines

• • Use modals sparingly for critical actions or important information
• • Always provide a clear way to dismiss the modal (ESC key or close button)
• • Modal titles should be concise and action-oriented
• • Primary actions should be on the right, secondary on the left
• • Modals should be vertically and horizontally centered
• • Ensure modal content is accessible via keyboard navigation
• • Use overlay to focus attention on the modal content

Loading States

Empty States

State Guidelines

• • Loading states should indicate progress and reassure users
• • Skeletons should approximate the final content layout
• • Empty states should provide clear next steps
• • Use illustrations or icons to enhance empty states
• • Loading indicators should be consistent across the application
• • Consider progressive loading for complex interfaces