@appearhere/bloom/styleguide/typography.css

Appear Here's pattern library and styleguide

.markdown * {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown * + * {
  margin-top: var(--size-lg-i);
}

.markdown * + h2,
* + .h2 {
  margin-top: var(--size-lg-iii);
}

.markdown h1 {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-iv);
  line-height: var(--lineheight-large-iv);
  letter-spacing: var(--letter-spacing-large-iv);
  font-weight: var(--fontweight-demi);
  color: currentColor;
}

.markdown h2 {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-iii);
  line-height: var(--lineheight-large-iii);
  letter-spacing: var(--letter-spacing-large-iii);
  font-weight: var(--fontweight-demi);
  color: currentColor;
}

.markdown h3 {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-ii);
  line-height: var(--lineheight-large-ii);
  letter-spacing: var(--letter-spacing-large-ii);
  font-weight: var(--fontweight-demi);
  color: currentColor;
}

.markdown ul,
.markdown ol {
  list-style-position: outside;
  padding-left: 0;
}

.markdown p,
.markdown li {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-regular);
  line-height: var(--lineheight-regular);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--fontweight-regular);
  color: currentColor;
}

.markdown li + li {
  margin-top: var(--size-sm-iii);
}

.markdown p:first-of-type {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-i);
  line-height: var(--lineheight-large-i);
  letter-spacing: var(--letter-spacing-large-i);
  font-weight: var(--fontweight-demi);
  color: currentColor;
}

.markdown a {
  color: var(--color-primary);
  text-decoration: underline;
}

.markdown a:hover {
  color: var(--color-primary--light);
}