Discover indiepa.ge design foundations
Learn how indiepa.ge uses colors and fonts to enhance user experience and design coherence.
Last update: 06/28/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
#ffffff
200
200
#ffffff
300
300
#ffe0f2
400
400
#ffaddc
500
500
#ff7ac6
600
600
#ff47af
700
700
#ff1499
800
800
#e0007f
900
900
#ad0062
950
950
#7a0045
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
#a1a5ba
100
100
#8489a4
200
200
#686e8d
300
300
#52576f
400
400
#3d4052
500
500
#272935
600
600
#111217
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
#a1a5ba
100
100
#8489a4
200
200
#686e8d
300
300
#52576f
400
400
#3d4052
500
500
#272935
600
600
#111217
700
700
#000000
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
#a1a5ba
100
100
#8489a4
200
200
#686e8d
300
300
#52576f
400
400
#3d4052
500
500
#272935
600
600
#111217
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
#c4c7d4
100
100
#a7abbe
200
200
#8a8fa8
300
300
#6c7393
400
400
#575c75
500
500
#414558
600
600
#2b2e3b
700
700
#16171d
800
800
#000000
900
900
#000000
950
950
#000000
