Discover bluebottlecoffee.com design foundations
Learn how bluebottlecoffee.com uses colors and fonts to enhance user experience and design coherence.
Last update: 07/11/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
#ffffff
100
100
#fcfcfd
200
200
#e2e3e4
300
300
#c8cacb
400
400
#aeb1b2
500
500
#93989a
600
600
#797f81
700
700
#606566
800
800
#484b4c
900
900
#2f3132
950
950
#161718
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
#ffffff
100
100
#fcfcfd
200
200
#e2e3e4
300
300
#c8cacb
400
400
#aeb1b2
500
500
#93989a
600
600
#797f81
700
700
#606566
800
800
#484b4c
900
900
#2f3132
950
950
#161718
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
#ffffff
100
100
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#f9f6f0
600
600
#ebe0cc
700
700
#dccba7
800
800
#ceb583
900
900
#bf9f5f
950
950
#a88643
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
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#ffffff
600
600
#e6e6e6
700
700
#cccccc
800
800
#b3b3b3
900
900
#999999
950
950
#808080
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
#d4d4d4
100
100
#bababa
200
200
#a1a1a1
300
300
#878787
400
400
#6e6e6e
500
500
#545454
600
600
#3b3b3b
700
700
#212121
800
800
#080808
900
900
#000000
950
950
#000000
