Discover bc.game design foundations
Learn how bc.game uses colors and fonts to enhance user experience and design coherence.
Last update: 07/21/2024
ICONS
TYPOGRAPHIES
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
#b0edc2
100
100
#86e4a2
200
200
#5dda82
300
300
#33d163
400
400
#27aa4e
500
500
#1d813b
600
600
#145728
700
700
#0a2e15
800
800
#010402
900
900
#000000
950
950
#000000
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
#989ea9
100
100
#7c8492
200
200
#646a78
300
300
#4d525c
400
400
#353940
500
500
#1e2024
600
600
#070708
700
700
#000000
800
800
#000000
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
#ac9ed1
100
100
#8f7bc1
200
200
#7259b1
300
300
#5a4592
400
400
#45346f
500
500
#2f244c
600
600
#1a142a
700
700
#040307
800
800
#000000
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
#989ea9
100
100
#7c8492
200
200
#646a78
300
300
#4d525c
400
400
#353940
500
500
#1e2024
600
600
#070708
700
700
#000000
800
800
#000000
900
900
#000000
950
950
#000000
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
#989ea9
100
100
#7c8492
200
200
#646a78
300
300
#4d525c
400
400
#353940
500
500
#1e2024
600
600
#070708
700
700
#000000
800
800
#000000
900
900
#000000
950
950
#000000
