Discover rippling.com design foundations
Learn how rippling.com 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 !@#$%^&*()
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
#d0aebc
100
100
#be8ea2
200
200
#ab6d87
300
300
#92546e
400
400
#714155
500
500
#512f3d
600
600
#311c25
700
700
#10090c
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
#d0aebc
100
100
#be8ea2
200
200
#ab6d87
300
300
#92546e
400
400
#714155
500
500
#512f3d
600
600
#311c25
700
700
#10090c
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
#d1adbd
100
100
#bf8da2
200
200
#ac6c88
300
300
#93536e
400
400
#724056
500
500
#522e3d
600
600
#311c25
700
700
#10090c
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
#ffffff
100
100
#ffffff
200
200
#ffffff
300
300
#ffffff
400
400
#ffffff
500
500
#f5f2ef
600
600
#e2d9cf
700
700
#cfbfaf
800
800
#bca68f
900
900
#a98c70
950
950
#8f7356
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
#fff7e6
200
200
#fee6b3
300
300
#fed681
400
400
#fdc64e
500
500
#fdb51c
600
600
#e39c02
700
700
#b17902
800
800
#7e5701
900
900
#4c3401
950
950
#191100
