Typography
Display 2x
Display xl
Display lg
Display md
Display sm
Display xs
Text xl
Text lg
Text md
Text sm
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph-max-width: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Colors
Neutral
Primary or Brand
Neutral Text Colors
text-gray-25
text-gray-50
text-gray-100
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600
text-gray-700
text-gray-800
text-gray-900
text-gray-950
text-gray-50
text-gray-100
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600
text-gray-700
text-gray-800
text-gray-900
text-gray-950
Primary or Brand Text Colors
text-brand-25
text-brand-50
text-brand-100
text-brand-200
text-brand-300
text-brand-400
text-brand-500
text-brand-600
text-brand-700
text-brand-800
text-brand-900
text-brand-950
text-brand-50
text-brand-100
text-brand-200
text-brand-300
text-brand-400
text-brand-500
text-brand-600
text-brand-700
text-brand-800
text-brand-900
text-brand-950
Buttons & Badges
Input Fields
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radius
radius-none
radius-xxs
radius-xs
radius-sm
radius-md
radius-lg
radius-xl
radius-2xl
radius-3xl
radius-4xl
radius-full
Box Shadow
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
Spacing
Use it for padding and margin
spacing-none
spacing-xxs
spacing-xs
spacing-sm
spacing-md
spacing-lg
spacing-xl
spacing-2xl
spacing-3xl
spacing-4xl
spacing-5xl
spacing-6xl
spacing-7xl
spacing-8xl
spacing-9xl
spacing-10xl
spacing-11xl
Content Spacing
Use it to leave horizontal space between the content
content-spacing-0
content-spacing-0.5
content-spacing-1
content-spacing-2
content-spacing-3
content-spacing-4
content-spacing-5
content-spacing-6
content-spacing-8
content-spacing-10
content-spacing-12
content-spacing-16
content-spacing-20
content-spacing-24
content-spacing-32
content-spacing-40
Flexbox
Use these classes to create responsive flexbox layouts.
Watch flexbox tutorial on YouTube: Link here
flex - to create flexbox
flex-horizontal
flex-align-start
flex-align-center
flex-align-end
flex-justify-start
flex-justify-center
flex-justify-end
flex-grow
flex-shrink
flex-dont-shrink-and-grow
flex-item-align-auto
flex-item-align-top
flex-item-align-center
flex-item-align-bottom
flex-item-align-stretch
flex-order-first
flex-order-last
col-gap-2
row-gap-2
flex-horizontal
flex-align-start
flex-align-center
flex-align-end
flex-justify-start
flex-justify-center
flex-justify-end
flex-grow
flex-shrink
flex-dont-shrink-and-grow
flex-item-align-auto
flex-item-align-top
flex-item-align-center
flex-item-align-bottom
flex-item-align-stretch
flex-order-first
flex-order-last
col-gap-2
row-gap-2
CSS Grid
Use these classes to create responsive CSS Grid based layouts.
Watch flexbox tutorial on YouTube: Link here
g-col-2
g-col-3
g-col-4
g-left-large
g-right-large
Note: You can use gap properties to leave space between the grids. Watch video to know more: link here
Width
For max-width content wrapper
width-xxs - 320px
width-xs - 384px
width-sm - 480px
width-md - 560px
width-lg - 640px
width-xl - 768px
width-2xl - 1024px
width-3xl - 1280px
width-4xl - 1440px
width-5xl - 1600px
width-6xl - 1920px