Discover farogastrobar.com design foundations
Learn how farogastrobar.com uses colors and fonts to enhance user experience and design coherence.
Last update: 07/03/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
#cfbfb5
100
100
#bba596
200
200
#a68a77
300
300
#8e705d
400
400
#6f5849
500
500
#504034
600
600
#312720
700
700
#130f0c
800
800
#000000
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
#cfbfb5
100
100
#bba596
200
200
#a68a77
300
300
#8e705d
400
400
#6f5849
500
500
#504034
600
600
#312720
700
700
#130f0c
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
#fff5d1
100
100
#ffea9e
200
200
#ffdf6b
300
300
#ffd438
400
400
#ffc905
500
500
#d1a400
600
600
#9e7c00
700
700
#6b5400
800
800
#382c00
900
900
#050400
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
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#f5f3ef
600
600
#e2dccf
700
700
#cfc5af
800
800
#bcad8f
900
900
#a99670
950
950
#8f7c56
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
#ffffff
100
100
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#f5f3ef
600
600
#e2dccf
700
700
#cfc5af
800
800
#bcad8f
900
900
#a99670
950
950
#8f7c56
