My Website Design System

V 1.0 by @final-aerith

Colors

Blue Violet - PRIMARY

50 #f3f4fb
100 #e4e4f5
200 #cfd1ee
300 #aeb2e2
400 #878bd3
500 #6d6bc6
600 #655dbb
700 #594da8
800 #4e438a
900 #41396f
950 #2d2744

Curious Blue - SECONDARY

50 #eefbfd
100 #d5f3f8
200 #afe7f2
300 #78d5e8
400 #3ab9d6
500 #22aed1
600 #1c7e9e
700 #1d6681
800 #20546a
900 #1f475a
950 #0f2d3d

Slate - NEUTRAL

50 #f8fafc
100 #f1f5f9
200 #e2e8f0
300 #cbd5e1
400 #94a3b8
500 #64748b
600 #475569
700 #334155
800 #1e293b
900 #0f172a
950 #020617

Pomegranate - ERROR

50 #fff2f1
100 #ffe0df
200 #ffc8c5
300 #ffa19c
400 #ff6a63
500 #ff3c33
600 #f0332a
700 #c9150c
800 #a6150e
900 #891813
950 #4b0704

Typography

aA Lexend ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¡!$%&/()=?;: ¡“”@\
aA Noto Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¡!$%&/()=?;: ¡“”@\

Text-styles

text-xs: The quick brown fox jumps over the lazy dog Font Size: 0.75rem | Line Height: 1rem Font Size: 12px | Line Height: 16px text-sm: The quick brown fox jumps over the lazy dog Font Size: 0.875rem | Line Height: 1.25rem Font Size: 14px | Line Height: 20px text-base: The quick brown fox jumps over the lazy dog Font Size: 1rem | Line Height: 1.5rem Font Size: 16px | Line Height: 24px text-body - Heading 4: The quick brown fox jumps over the lazy dog Font Size: 1.125rem | Line Height: 1.75rem Font Size: 18px | Line Height: 28px text-xl: The quick brown fox jumps over the lazy dog Font Size: 1.25rem | Line Height: 1.75rem Font Size: 20px | Line Height: 28px text-2xl - Heading 3: The quick brown fox jumps over the lazy dog Font Size: 1.5rem | Line Height: 2rem Font Size: 24px | Line Height: 32px text-3xl: The quick brown fox jumps over the lazy dog Font Size: 1.875rem | Line Height: 2.25rem Font Size: 30px | Line Height: 36px text-4xl - Heading 2: The quick brown fox jumps over the lazy dog Font Size: 2.25rem | Line Height: 2.5rem Font Size: 36px | Line Height: 40px text-5xl - Heading 1: The quick brown fox jumps over the lazy dog Font Size: 3rem | Line Height: 3rem Font Size: 48px | Line Height: 48px

Elevation

.shadow-inner
.shadow-s
.shadow
.shadow-md
.shadow-lg