UI COMPONENTS
TYPOGRAPHY
COLOR
Design
Library
Ultra Com.
Icons
Logos
Flugs
Inputs
Reting
Alerts
Buttons
Dropdowns
PIN-Inputs
Toggles
Checkboxes
Badges
+ Other Components
Button
Input name
Inpu
Help message
Badge
Input name
Help message
Label
Label
Label
Label
Label
TYPOGRAPHY
Inter
Ag
Regular / Medium / Semi bold / Bold
Font size: 90px / 6rem | Line height: 112px / 7rem | Tracking: -2%
Headline 0
Headline 0
Headline 0
Headline 0
Regular / Medium / Semi bold / Bold
Font size: 72px / 4.5rem | Line height: 86px / 5.375rem | Tracking: -2%
Headline 0.5
Headline 0.5
Headline 0.5
Headline 0.5
Regular / Medium / Semi bold / Bold
Font size: 60px / 3.75rem | Line height: 72px / 4.5rem | Tracking: -2%
Headline 1
Headline 1
Headline 1
Headline 1
Regular / Medium / Semi bold / Bold
Font size: 48px / 3rem | Line height: 60px / 3.75rem | Tracking: -2%
Headline 2
Headline 2
Headline 2
Headline 2
Regular / Medium / Semi bold / Bold
Font size: 36px / 2.25rem | Line height: 48px / 2.75rem | Tracking: -2%
Headline 3
Headline 3
Headline 3
Headline 3
Regular / Medium / Semi bold / Bold
Font size: 30px / 1.875rem | Line height: 38px / 2.375rem
Headline 4
Headline 4
Headline 4
Headline 4
Regular / Medium / Semi bold / Bold
Font size: 24px / 1.5rem | Line height: 32px / 2rem
Headline 5
Headline 5
Headline 5
Headline 5
Regular / Medium / Semi bold / Bold
Font size: 20px / 1.25rem | Line height: 30px / 1.875rem
Headline 6
Headline 6
Headline 6
Headline 6
Regular / Medium / Semi bold / Bold
Font size: 16px / 1rem | Line height: 24px / 1.5rem
Subtitle 1
Subtitle 1
Subtitle 1
Subtitle 1
Regular / Medium / Semi bold / Bold
Font size: 14px / 0.875rem | Line height: 20px / 1.25rem
Subtitle 2
Subtitle 2
Subtitle 2
Subtitle 2
Regular / Medium / Semi bold / Bold
Font size: 16px / 1rem | Line height: 24px / 1.5rem
Body 1
Body 1
Body 1
Body 1
Regular / Medium / Semi bold / Bold
Font size: 16px / 1rem | Line height: 24px / 1.5rem
Button 1
Button 1
Button 1
Button 1
Regular / Medium / Semi bold / Bold
Font size: 14px / 0.875rem | Line height: 20px / 1.25rem
Body 2
Body 2
Body 2
Body 2
Regular / Medium / Semi bold / Bold
Font size: 14px / 0.875rem | Line height: 20px / 1.25rem
Button 2
Button 2
Button 2
Button 2
Regular / Medium / Semi bold / Bold
Font size: 12px / 0.75rem | Line height: 18px / 1.125rem
Caption
Caption
Caption
Caption
COLOR PALLETS
500
#f5222d
500
#fa541c
500
#fa8c16
500
#faad14
500
#fadb14
500
#1677ff
500
#13c2c2
500
#52c41a
500
#a0d911
500
#2f54eb
500
#722ed1
500
#eb2f96
500
#8A8A8A
Button
1.2:1
Fail
Button
1.8:1
Fail
Button
5.8:1
Good
Button
8.6:1
Great
Dust Red
Muted warmth with a hint of nostalgia
50
#fff1f0
100
#ffccc7
200
#ffa39e
300
#ff7875
400
#ff4d4f
500
#f5222d
600
#cf1322
700
#a8071a
800
#820014
900
#5c0011
Volcano
Fiery and intense, like molten lava
50
#fff2e8
100
#ffd8bf
200
#ffbb96
300
#ff9c6e
400
#ff7a45
500
#fa541c
600
#d4380d
700
#ad2102
800
#871400
900
#610b00
Sunset Orange
Evoking the vibrant hues of twilight
50
#fff7e6
100
#ffe7ba
200
#ffd591
300
#ffc069
400
#ffa940
500
#fa8c16
600
#d46b08
700
#ad4e00
800
#873800
900
#612500
Calendula Gold
Luxurious and radiant like a golden flower
50
#fffbe6
100
#fff1b8
200
#ffe58f
300
#ffd666
400
#ffc53d
500
#faad14
600
#d48806
700
#ad6800
800
#874d00
900
#613400
Sunrise Yellow
A burst of energy with dawn's embrace
50
#FEFFE6
100
#FFFFB8
200
#FFFB8F
300
#fff566
400
#ffec3d
500
#fadb14
600
#d4b106
700
#ad8b00
800
#876800
900
#614700
Lime
Zesty and refreshing, like a summer breeze
50
#fcffe6
100
#f4ffb8
200
#eaff8f
300
#d3f261
400
#bae637
500
#a0d911
600
#7cb305
700
#5b8c00
800
#3f6600
900
#254000
Polar Green
Reminiscent of icy landscapes
50
#f6ffed
100
#d9f7be
200
#b7eb8f
300
#95de64
400
#73d13d
500
#52c41a
600
#389e0d
700
#237804
800
#135200
900
#092b00
Cyan
Tranquil and serene, like a clear sky
50
#e6fffb
100
#b5f5ec
200
#87e8de
300
#5cdbd3
400
#36cfc9
500
#13c2c2
600
#08979c
700
#006d75
800
#00474f
900
#002329
Daybreak Blue
Gentle and soothing as the morning light
50
#e6f4ff
100
#bae0ff
200
#91caff
300
#69b1ff
400
#4096ff
500
#1677ff
600
#0958d9
700
#003eb3
800
#002c8c
900
#001d66
Geek Blue
Smart and sophisticated :0
50
#f0f5ff
100
#d6e4ff
200
#adc6ff
300
#adc6ff
400
#597ef7
500
#2f54eb
600
#1d39c4
700
#10239e
800
#061178
900
#030852
Golden Purple
Regal and enchanting, a fusion of elegance
50
#f9f0ff
100
#efdbff
200
#d3adf7
300
#b37feb
400
#9254de
500
#722ed1
600
#531dab
700
#391085
800
#22075e
900
#120338
Magenta
Bold and vibrant, a lively burst of color
50
#fff0f6
100
#ffd6e7
200
#ffadd2
300
#ff85c0
400
#f759ab
500
#eb2f96
600
#c41d7f
700
#9e1068
800
#780650
900
#520339
Dark Night
Mysterious and deep, like a starlit sky
50
#F6F6F6
100
#E8E8E8
200
#D0D0D0
300
#B9B9B9
400
#A1A1A1
500
#8A8A8A
600
#727272
700
#5b5b5b
800
#373737
900
#141414
Default
Standard and simple colors
#FFFFFF
#000000
Ember Glow
Subdued warmth tinged with nostalgia
50
#2a1215
100
#431418
200
#58181c
300
#791a1f
400
#a61d24
500
#d32029
600
#e84749
700
#f37370
800
#f89f9a
900
#fac8c3
Inferno
Intensely fiery, akin to molten lava
50
#2b1611
100
#441d12
200
#592716
300
#7c3118
400
#aa3e19
500
#d84a1b
600
#e87040
700
#f3956a
800
#f8b692
900
#fad4bc
Twilight Blaze
Evoking vibrant hues in the darkening sky
50
#2b1d11
100
#442a11
200
#442a11
300
#7c4a15
400
#aa6215
500
#d87a16
600
#e89a3c
700
#f3b765
800
#f8cf8d
900
#fae3b7
Gilded Marigold
Luxurious and radiant, like a golden bloom
50
#2b2111
100
#443111
200
#594214
300
#7c5914
400
#aa7714
500
#d89614
600
#e8b339
700
#f3cc62
800
#f8df8b
900
#faedb5
Dusk Gold
Energy in the embrace of nightfall
50
2B2611
100
#443b11
200
#595014
300
#7c6e14
400
#aa9514
500
#d8bd14
600
#e8d639
700
#f3ea62
800
#f8f48b
900
#fafab5
Mystic Moss
Refreshing, a breeze through shadows
50
#1f2611
100
#2e3c10
200
#3e4f13
300
#536d13
400
#6f9412
500
#8bbb11
600
#a9d134
700
#c9e75d
800
#e4f88b
900
#f0fab5
Arctic Verdant
Crisp and cool, evoking icy landscapes
50
#162312
100
#1d3712
200
#274916
300
#306317
400
#3c8618
500
#49aa19
600
#6abe39
700
#8fd460
800
#b2e58b
900
#d5f2bb
Serenity Cyan
Tranquil and serene, like the midnight sky
50
#112123
100
#113536
200
#144848
300
#146262
400
#138585
500
#13a8a8
600
#33bcb7
700
#58d1c9
800
#84e2d8
900
#b2f1e8
Nightfall Blue
Gentle and soothing, reminiscent of twilight
50
#111d2c
100
#112a45
200
#15395b
300
#164c7e
400
#1765ad
500
#177ddc
600
#3c9ae8
700
#65b7f3
800
#8dcff8
900
#b7e3fa
Wise Indigo
Appealing to intellect
50
#131629
100
#161d40
200
#1c2755
300
#203175
400
#263ea0
500
#2b4acb
600
#5273E0
700
#7f9ef3
800
#a8c1f8
900
#d2e0fa
Regal Amethyst
Enchanting fusion of dark elegance
50
#1a1325
100
#24163a
200
#301c4d
300
#3e2069
400
#51258f
500
#642ab5
600
#854eca
700
#ab7ae0
800
#cda8f0
900
#ebd7fa
Crimson Enigma
Bold and vibrant, a burst of darkness
50
#291321
100
#40162f
200
#551c3b
300
#75204f
400
#a02669
500
#cb2b83
600
#e0529c
700
#f37fb7
800
#f8a8cc
900
#fad2e3
Nocturnal Sky
Mysterious and deep, like the starlit abyss
50
#2c2c2c
100
#454545
200
#5b5b5b
300
#7e7e7e
400
#adadad
500
#dcdcdc
600
#e8e8e8
700
#f3f3f3
800
#f8f8f8
900
#fafafa
Default
Standard and simple colors
#FFFFFF
#000000
Thank you!
UI COMPONENTS
Icons
Logos
Flugs
Inputs
Reting
Alerts
Buttons
Dropdowns
PIN-Inputs
Toggles
Checkboxes
Badges
+ Other Components
Drawer
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
External Link
Link Description
Link Description
Link Description
Link Description
Link Description
Link Description
Buttons
Button text
Button text
Button text
Button text
Button text
Button text
Button text
Button text
Button text
Button text
Button text
Button text
Toggle
Badge
Badge
Badge
Badge
Badge
Thank you!