Gamezone Design System

Design Guidelines

Accessibility Guidelines

  • Ensure all interactive elements are focusable and navigable via keyboard.
  • Provide sufficient color contrast (at least 4.5:1 for normal text).
  • Use ARIA attributes to enhance screen reader support.
  • Include alt text for all images.
  • Avoid using color alone to convey information.

For carousels, ensure keyboard navigation is supported and use ARIA live regions to announce slide changes.

Responsive Design Guidelines

  • Use flexible layouts with CSS grid or flexbox.
  • Employ media queries to adjust styles for different screen sizes.
  • Use relative units (e.g., %, vw, vh) for widths and heights.
  • Ensure text is legible on small screens by adjusting font sizes.
  • Hide or rearrange elements as necessary for smaller screens.

Internationalization Guidelines

  • Provide translations for all text content.
  • Avoid hardcoding text; use placeholders or variables instead.
  • Be mindful of cultural differences in colors, icons, and imagery.

Color Guidelines

Use the following color palette consistently:

Primary: #1A1A1A
Secondary: #4A4A4A
Accent: #FFD700
Light Gray: #F5F5F5
Medium Gray: #E0E0E0
Dark Gray: #BDBDBD

Use brand-primary for backgrounds, brand-accent for highlights and CTAs, and grays for neutral elements.

Typography Guidelines

  • Use 'Roboto Mono' for body text and 'Roboto Mono' for headings.
  • Font weights: 400 (regular), 500 (medium), 700 (bold).
  • Font sizes: 12px (small), 14px (body), 16px (large), 24px (headings).

Spacing Guidelines

  • Use multiples of 4px for small spacings (e.g., 4px, 8px, 12px, 16px).
  • Use multiples of 8px for larger spacings (e.g., 24px, 32px, 48px).

New UI Elements

Tooltips

This is a tooltip
help_outline Help information

Progress Indicators

Downloading... 65%
Profile Completion 30%

Loading States

Tabs

This is the content for the Products tab. Other tabs would show different content when selected.

Toggle Switches

Dark Mode
Notifications

Badges & Status Indicators

New In Stock Sale Live Limited

Dropdown Menus

Breadcrumbs

Home chevron_right Shop chevron_right T-Shirts

Alert Messages

check_circle

Order successful!

Your order #12345 has been confirmed.

warning

Warning

Your cart will expire in 15 minutes.

error

Error

Payment failed. Please try again.

Rating System

star star star star star 4.0 (128 reviews)
5 stars
70%
4 stars
20%
3 stars
7%

Checkout Stepper

1
Cart
2
Shipping
3
Payment
4
Review

Image Carousel

Toast Notification

Range Slider

$10 $100
Min: $10 Max: $100

Avatar Stack

User 1 User 2 User 3
+12

Pricing Cards

Basic

For casual gamers

$9.99 /month
  • check 5% discount on all items
  • check Early access to sales
  • close Exclusive items
POPULAR

Pro Gamer

For dedicated players

$19.99 /month
  • check 15% discount on all items
  • check 48-hour early access
  • check Exclusive items

Elite

For hardcore collectors

$29.99 /month
  • check 25% discount on all items
  • check 72-hour early access
  • check Limited edition items

Stats Cards

Total Sales

$24,580

trending_up +12.5% from last month

New Customers

1,254

trending_up +8.3% from last month

Conversion Rate

3.2%

trending_down -0.5% from last month

Avg. Order Value

$45.67

trending_up +2.1% from last month

Order Timeline

Order Placed Today, 10:30 AM

Your order #12345 has been received.

Order Processed Today, 11:45 AM

We're preparing your items for shipment.

Shipped Estimated: Tomorrow

Your order will be on its way soon.

Empty State

shopping_bag

Your cart is empty

Start adding some awesome products to your cart!

Filter Chips

T-Shirts
Hoodies
Accessories
$25 - $50
In Stock

Split Button

Modal Dialog

Pagination

...

Accordion