Discover munchandmull.com design foundations
Learn how munchandmull.com uses colors and fonts to enhance user experience and design coherence.
Last update: 07/08/2024
ICONS
TYPOGRAPHIES
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
#ffffff
200
200
#fef1f1
300
300
#fac2c2
400
400
#f69393
500
500
#f26464
600
600
#ed3535
700
700
#dd1313
800
800
#ae0f0f
900
900
#7f0b0b
950
950
#500707
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
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#f7f9f6
500
500
#dde4d7
600
600
#c4d0b9
700
700
#aabc9a
800
800
#90a77b
900
900
#769060
950
950
#5d714b
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
#fcfce8
400
400
#f7f6ba
500
500
#f2f18c
600
600
#edeb5e
700
700
#e8e530
800
800
#cfcb17
900
900
#a19e12
950
950
#73710d
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
#ededed
600
600
#d4d4d4
700
700
#bababa
800
800
#a1a1a1
900
900
#878787
950
950
#6e6e6e
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
#a3a3a3
100
100
#8a8a8a
200
200
#707070
300
300
#575757
400
400
#3d3d3d
500
500
#242424
600
600
#0a0a0a
700
700
#000000
800
800
#000000
900
900
#000000
950
950
#000000
