Discover creativeplayuk.com design foundations
Learn how creativeplayuk.com uses colors and fonts to enhance user experience and design coherence.
Last update: 07/10/2024
ICONS
TYPOGRAPHIES
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()
COLORS
CALL TO ACTION
The call to action color is specifically chosen to stand out on the page. It's used on elements that require user interaction or urgent attention, such as "submit" buttons, promotional banners, or important links.
50
50
#ffffff
100
100
#fddde5
200
200
#faaebf
300
300
#f77e9a
400
400
#f44e74
500
500
#f11e4f
600
600
#ce0d3a
700
700
#9e0a2d
800
800
#6e071f
900
900
#3e0412
950
950
#0e0104
HERO
The hero color is used to draw attention to the most important content on the page. It's the main color used on content above the fold.
50
50
#dad3ce
100
100
#c4b9b1
200
200
#ae9f93
300
300
#988576
400
400
#7d6c5e
500
500
#605348
600
600
#433a32
700
700
#26211d
800
800
#090807
900
900
#000000
950
950
#000000
ACCENT
The accent color is used to highlight important elements on the page, such as headings, links, or buttons. It's a secondary color that complements the primary color scheme.
50
50
#adffdc
100
100
#7affc6
200
200
#47ffaf
300
300
#14ff99
400
400
#00e07f
500
500
#00ad62
600
600
#007a45
700
700
#004728
800
800
#00140c
900
900
#000000
950
950
#000000
BACKGROUND
The background color is the primary color used in the background of the page. It's a neutral color that provides a backdrop for the content on the page.
50
50
#ffffff
100
100
#efeceb
200
200
#d9d1ce
300
300
#c3b7b1
400
400
#ad9c94
500
500
#978178
600
600
#7c685f
700
700
#5f5049
800
800
#423833
900
900
#251f1d
950
950
#090707
SURFACE
The surface color is used to create depth and dimension on the page. It's a light color that's used on elements like cards, modals, and other surfaces that need to stand out from the background.
50
50
#9ea5ae
100
100
#828b97
200
200
#68717d
300
300
#515861
400
400
#3a3f45
500
500
#23262a
600
600
#0c0d0e
700
700
#000000
800
800
#000000
900
900
#000000
950
950
#000000
