Design System
The design system I'm using to power this website and create a consistent experience for folks visiting my little corner of the web. 💛
Colors
Primary color
Primary Color
Primary Color
#075FE4
Secondary color
Secondary Color
Secondary Color
#2E81FF
Neutral colors
800
Neutral 800
#171717
700
Neutral 700
#545454
600
Neutral 600
#2a2a2a
500
Neutral 500
#545454
400
Neutral 400
#7F7F7F
300
Neutral 300
#A9A9A9
200
Neutral 200
#D4D4D4
100
Neutral 100
#FFFFFF
Color palette
400
Blue 400
#247692
300
Blue 300
#508AA8
200
Blue 200
#96B8CA
100
Blue 100
#DCE7ED
400
Green 400
#1B7A00
300
Green 300
#449B00
200
Green 200
#A1CD7F
100
Green 100
#D9EBCC
400
Red 400
#9E2B25
300
Red 300
#CA2E55
200
Red 200
#E496AA
100
Red 100
#F4D5DD
400
Horchata 400
#DACEC8
300
Horchata 300
#E1D7D3
200
Horchata 200
#E8E1DE
100
Horchata 100
#F0EBE9
400
Purple 400
#442B48
300
Purple 300
#8A7090
200
Purple 200
#AD9AB1
100
Purple 100
#D0C5D2
Typography
Special headings
Display 1
Latina Essential Heavy
Size: 8 rem / 8 rem
Line height: 8 rem / 8 rem
Line height: 8 rem / 8 rem
The quick gray fox
Display 2
Latina Essential Heavy
Size: 5 rem
Line height: 5 rem
Line height: 5 rem
The quick gray fox
Display 3
Latina Essential Heavy
Size: 3 rem
Line height: 3 rem
Line height: 3 rem
The quick gray fox
Display 4
Latina Essential Bold
Size: 2 rem
Line height: 3 rem
Line height: 3 rem
The quick gray fox jumps over the lake again today.
Display 5
Cabin Bold
Size: 1.33 rem
Line height: 2 rem
Line height: 2 rem
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Subtitle
Cabin Bold
Size: 1.25 rem
Line height: 1.25 rem
.3 rem letter spacing
Line height: 1.25 rem
.3 rem letter spacing
Latest updates
Tag
Cabin Bold
Size: 1 rem
Line height: 1 rem
.3 rem letter spacing
Line height: 1 rem
.3 rem letter spacing
Events
Body
Body Large
Cabin Regular
1.375rem/2 rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursu.
Body Default
Cabin Regular
1.125 rem/ 1.5 rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body Small
Cabin Regular
1 rem/1.25rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et.
Text single
300
Cabin Regular
Cabin Medium
Cabin Bold
1.25rem / 1.75rem
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
200
Cabin Regular
Cabin Medium
Cabin Bold
1.125rem/1.5rem
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
100
Cabin Regular
Cabin Medium
Cabin Bold
1 rem/ 1.25 rem
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Rich Text
Heading 1
Latina Essential Heavy
Size: 48px / 3 rem
Line height: 48px / 3 rem
Size: 48px / 3 rem
Line height: 48px / 3 rem
Lorem ipsum dolor sit amet consectetur
Heading 2
Latina Essential Heavy
Size: 40px / 2.5 remLine height: 40px / 2.5 rem
Size: 40px / 2.5 remLine height: 40px / 2.5 rem
Lorem ipsum dolor sit amet consectetur
Heading 3
Latina Essential Bold
Size: 32px / 2 rem
Line height: 48px / 2.5 rem
Size: 32px / 2 rem
Line height: 48px / 2.5 rem
Lorem ipsum dolor sit amet consectetur
Heading 4
Latina Essential bold
Size: 28px / 1.75 rem
Line height: 32px / 2 rem
Size: 28px / 1.75 rem
Line height: 32px / 2 rem
Lorem ipsum dolor sit amet consectetur
Heading 5
Cabin bold
Size: 24px / 1.33 rem
Line height: 28px / 1.75 rem
Size: 24px / 1.33 rem
Line height: 28px / 1.75 rem
Lorem ipsum dolor sit amet consectetur
Heading 6
Cabin bold
Size: 20px / 1.25 rem
Line height: 28px / 1.75 rem
Size: 20px / 1.25 rem
Line height: 28px / 1.75 rem
Lorem ipsum dolor sit amet consectetur
Text Bold
Cabin Bold
Lorem ipsum dolor sit amet consectetur
Text Link
Cabin Normal
Bullet List
Cabin Normal
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- Mauris aliquet faucibus iaculis dui vitae ullamco
Numbered List
Cabin Normal
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- Mauris aliquet faucibus iaculis dui vitae ullamco
Blockquote
Cabin
2rem / 2.5 rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Image & Caption
Text Uppercase
Cabin Normal
Lorem ipsum dolor sit amet consectetur
Text Strikethrough
Cabin Normal
Lorem ipsum dolor sit amet consectetur
Text Underline
Cabin Normal
Lorem ipsum dolor sit amet consectetur
Shadows
General shadows
Shadow 01
Shadow 02
Shadow 03
Shadow 04
Shadow 05
Shadow 06
Button shadows
Badges
Primary badges
Inputs
Input text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textarea
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkboxes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Avatars
Avatars circle
Icons
Icons
