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:
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
Progress Indicators
Loading States
Tabs
This is the content for the Products tab. Other tabs would show different content when selected.
Toggle Switches
Badges & Status Indicators
Alert Messages
Order successful!
Your order #12345 has been confirmed.
Warning
Your cart will expire in 15 minutes.
Error
Payment failed. Please try again.
Rating System
Checkout Stepper
Image Carousel
Toast Notification
Item added to cart
Controller T-Shirt - Size M
Range Slider
Avatar Stack
Pricing Cards
Basic
For casual gamers
- 5% discount on all items
- Early access to sales
- Exclusive items
Pro Gamer
For dedicated players
- 15% discount on all items
- 48-hour early access
- Exclusive items
Elite
For hardcore collectors
- 25% discount on all items
- 72-hour early access
- Limited edition items
Stats Cards
Total Sales
$24,580
+12.5% from last month
New Customers
1,254
+8.3% from last month
Conversion Rate
3.2%
-0.5% from last month
Avg. Order Value
$45.67
+2.1% from last month
Order Timeline
Your order #12345 has been received.
We're preparing your items for shipment.
Your order will be on its way soon.
Empty State
Your cart is empty
Start adding some awesome products to your cart!
Filter Chips
Split Button
Modal Dialog
Modal Title
This is a modal dialog. It can contain any content, such as text, forms, or images.
Pagination
Accordion
This is the content of section 1.
This is the content of section 2.