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" %}
Buttons

Primary buttons

Secondary buttons

Forms elements

Multimediacollage

Description

Assam Heritage Loose Leaf Assam Heritage Loose Leaf
Black Tea
Assam heritage loose leaf

Single-origin tea with golden-tipped leaves. Malty with hints of honey..

Regular price Rs. 590.00
Sale price Rs. 590.00 Regular price Sale price

New In: Matcha Latte

Tell your brand's story through images