Discover aithor.io design foundations
Learn how aithor.io 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 !@#$%^&*()
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
#fbf3da
300
300
#f5e3ad
400
400
#f0d47f
500
500
#ebc452
600
600
#e5b524
700
700
#c09516
800
800
#927211
900
900
#644e0c
950
950
#372b06
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
#f1edfc
200
200
#cec2f5
300
300
#ac96ee
400
400
#896ae7
500
500
#663ee0
600
600
#4b21ca
700
700
#3b1a9e
800
800
#2a1372
900
900
#1a0b46
950
950
#0a041a
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
#ffffff
400
400
#ffffff
500
500
#ffffff
600
600
#e6e6e6
700
700
#cccccc
800
800
#b3b3b3
900
900
#999999
950
950
#808080
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
#f1edfc
200
200
#cec2f5
300
300
#ac96ee
400
400
#896ae7
500
500
#663ee0
600
600
#4b21ca
700
700
#3b1a9e
800
800
#2a1372
900
900
#1a0b46
950
950
#0a041a
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
#e5e0f5
100
100
#c4b9e9
200
200
#a392dd
300
300
#826cd0
400
400
#6145c4
500
500
#4c33a3
600
600
#3a277c
700
700
#281b55
800
800
#160f2f
900
900
#040208
950
950
#000000
