MyAI chevron_right Lab chevron_right Design Systems

Design Systems

UI/UX components, icon sets, color palettes, and design patterns. A comprehensive design system built with Material Design 3 principles and psychology-driven user experience.

Icon Sets

Organized icon libraries for different use cases

palette Icons 1 - Colorful
balance
download
alternate_email
explore
add_circle
check_circle
filter_b_and_w Icons 2 - Monochrome
apps
cloud_upload
refresh
dark_mode
border_style Icons 3 - Outlined
home
favorite
star
notifications
share Social Icons
facebook
mail
chat
public

Metro Color Palette

Material Design 3 color system with metro-inspired swatches

palette
Lime
#99B433
eco
Green
#00A300
park
Emerald
#1E7145
waves
Teal
#00ABA9
water_drop
Cyan
#1BA1E2
brightness_5
Cobalt
#0050EF
auto_awesome
Indigo
#6A00FF
lens
Violet
#AA00FF
favorite
Pink
#F472D0
local_florist
Magenta
#D80073
whatshot
Crimson
#A20025
error
Red
#E51400
wb_sunny
Orange
#FA6800
star
Amber
#F0A30A
lightbulb
Yellow
#E3C800
coffee
Brown
#825A2C

UI Components

Reusable interface elements and patterns

Buttons
Input Fields
Cards
Card Title
Card content with description text
Chips / Tags
Design
UI/UX
Psychology

Typography

Text styles and hierarchy

Display Large
The quick brown fox
Headline Large
The quick brown fox jumps over
Title Large
The quick brown fox jumps over the lazy dog
Body Large
The quick brown fox jumps over the lazy dog. This is a sample of body text that shows how paragraphs look in the design system.
Label Large
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG