Discover nynerdlyvisuals.com design foundations
Learn how nynerdlyvisuals.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 !@#$%^&*()
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
#f4f0ff
200
200
#d1bdff
300
300
#ad8aff
400
400
#8957ff
500
500
#6524ff
600
600
#4800f0
700
700
#3900bd
800
800
#29008a
900
900
#1a0057
950
950
#0b0024
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
#e4f7fb
100
100
#b7eaf5
200
200
#8addef
300
300
#5dcfe9
400
400
#31c2e3
500
500
#1ba6c5
600
600
#158099
700
700
#0f5b6c
800
800
#09353f
900
900
#020f12
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
#ffffff
100
100
#ccffff
200
200
#99ffff
300
300
#66ffff
400
400
#33ffff
500
500
#00ffff
600
600
#00cccc
700
700
#009999
800
800
#006666
900
900
#003333
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
#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
#bdf4ff
100
100
#8aebff
200
200
#57e3ff
300
300
#24daff
400
400
#00c8f0
500
500
#009dbd
600
600
#00738a
700
700
#004857
800
800
#001e24
900
900
#000000
950
950
#000000
