Background Color

2nd. Background Color

3rd. Background Color

H1 Heading – XL Size

H2 Heading – L Size

H3 Heading – MD Size

H4 Heading – MD Size

H5 Heading – SM Size
H6 Heading – SM Size

I’m a regular text paragraph, enjoy me…

Global Button Style

This is regular body text and here is a link

  • Strongest Text Color
  • Strong Text Color
  • Medium Text Color
  • Subtle Text Color

Subtle Background Color

Lighter Background Color

H1 Line Height Check
please make your adjustments

H2 Line Height Check
please make your adjustments

H3 Line Height Check
please make your adjustments

H4 Line Height Check
please make your adjustments

H5 Line Height Check
please make your adjustments
H6 Line Height Check
please make your adjustments

Font-size / line-height suggestions:

selector {
  font-size: var(--global-kb-font-size-xxxl);
	line-height: 1.9ex;
}

selector {
  font-size: var(--global-kb-font-size-xxl);
	line-height: 2ex;
}

selector {
  font-size: var(--global-kb-font-size-xl);
	line-height: 2.1ex;
}

selector {
  font-size: var(--global-kb-font-size-lg);
	line-height: 2.2ex;
}

selector {
  font-size: var(--global-kb-font-size-md);
	line-height: 2.3ex;
}

selector {
  font-size: var(--global-kb-font-size-sm);
	line-height: 2.4ex;
}

SM –global-kb-font-size-sm
MD –global-kb-font-size-md
LG –global-kb-font-size-lg
XL –global-kb-font-size-xl
2XL –global-kb-font-size-xxl
3XL –global-kb-font-size-xxxl

Default clamp values for t-shirt sizes:

:root {
  --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
	
  --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
	
  --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
	
  --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
	
  --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
	
  --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);
}

Content Max Width