Style guide
Typography
Heading-1 (desktop) (tag: h1, class: h1) (Sizes: 40/50/-2)
Heading-1 (mobile) (tag: h1, class: h1) (Sizes: 36/45/-2)
Heading-2 (desktop) (tag: h2, class: h2) (Sizes: 36/45/-2)
Heading-2 (mobile) (tag: h2, class: h2) (Sizes: 32/40/-2)
Heading-3 (desktop) (tag: h3, class: h3) (Sizes: 28/35/-1)
Heading-3 (mobile) (tag: h3, class: h3) (Sizes: 24/30/-1)
Heading-4 (desktop)(tag: h4, class: h4) (Sizes: 24/30/-1)
Heading-4 (mobile)(tag: h4, class: h4) (Sizes: 20/25/-1)
Heading-5 (desktop)(tag: h5, class: h5) (Sizes: 20/25/-1)
Heading-5 (mobile)(tag: h5, class: h5) (Sizes: 18/22.5/-1)
Heading-6 (desktop)(tag: h6, class: h6) (Sizes: 18/22.5/-1)
Heading-6 (mobile)(tag: h6, class: h6) (Sizes: 16/24/-1)
Card title (tag: any, class: 'card-title') (Sizes: 18/36/-1)
Body sm (tag: any, class: 'text-small') (Sizes: 14/28/0)
Body base (tag: any, class: 'text-regular') (Sizes: 16/32/0)
Body lg (tag: any, class: 'text-large') (Sizes: 18/36/0)
Body base bold (tag: any, class: 'text-bold') (Sizes: 16/32/0)
subheading (Sizes: 14/28/2)
Navigation link (tag: any, class: 'navigation-link') (Sizes: 14/28/0)Colors
- Hex: #FDFBF5
- RGBA: rgba(253, 251, 245, 1)
- Tailwind class: project-background
- Hex: #000000
- RGBA: rgba(0, 0, 0, 1)
- Tailwind class: subheading
- Hex: #000000
- RGBA: rgba(0, 0, 0, 1)
- Tailwind class: heading
- Hex: #000000
- RGBA: rgba(0, 0, 0, 1)
- Tailwind class: text-color
- Hex: #FFFFFF
- RGBA: rgba(255, 255, 255, 1)
- Tailwind class: text-secondary-color
- Hex: #161616
- RGBA: rgba(22, 22, 22, 1)
- Tailwind class: button-primary-bg
- Hex: #FFFFFF
- RGBA: rgba(255, 255, 255, 1)
- Tailwind class: button-primary-text
- Hex: #FFFFFF
- RGBA: rgba(255, 255, 255, 1)
- Tailwind class: button-secondary-bg
- Hex: #000000
- RGBA: rgba(0, 0, 0, 1)
- Tailwind class: button-secondary-text
- Hex: #000000 · 40%
- RGBA: rgba(0, 0, 0, 0.4)
- Tailwind class: shadow
- Hex: #D9D9D9
- RGBA: rgba(217, 217, 217, 1)
- Tailwind class: border-color
- Hex: #000000
- RGBA: rgba(0, 0, 0, 1)
- Tailwind class: primary-black
- Hex: #FFFFFF
- RGBA: rgba(255, 255, 255, 1)
- Tailwind class: primary-white
- Hex: #E4EDF8
- RGBA: rgba(228, 237, 248, 1)
- Tailwind class: project-blue-light
- Hex: #F5EDEE
- RGBA: rgba(245, 237, 238, 1)
- Tailwind class: project-cream
- Hex: #2C2657
- RGBA: rgba(44, 38, 87, 1)
- Tailwind class: project-blue-dark
- Hex: #E6E6E6
- RGBA: rgba(230, 230, 230, 1)
- Tailwind class: project-gray
- Hex: #F1EFE6
- RGBA: rgba(241, 239, 230, 1)
- Tailwind class: off-white-beige
- Hex: #FBFBF5
- RGBA: rgba(251, 251, 245, 1)
- Tailwind class: off-white
- Hex: #F6F2E6
- RGBA: rgba(246, 242, 230, 1)
- Tailwind class: soft-beige
- Hex: #F2F4E5
- RGBA: rgba(242, 244, 229, 1)
- Tailwind class: soft-olive
Icons
- Usage {% render "icons", icon: "icon-name" %}


