.root {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-greyLighter);
  border-radius: 4px;
  height: 100%;
}

.attributes {
  border-top: 1px solid var(--color-greyLighter);
  text-align: left;
  margin: 0;
  padding: var(--size-lg-i);
  list-style-type: none;
}

.attribute {
  composes: fontRegular from '../../../globals/typography.css';
  font-family: 'Fira Mono', monospace;
  color: var(--color-grey);
}

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

.attribute:first-of-type {
  font-family: var(--font-avenir);
  font-weight: var(--fontweight-demi);
  color: var(--color-black);
}

.root {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-greyLighter);
  border-radius: 4px;
}

.attributes {
  border-top: 1px solid var(--color-greyLighter);
  text-align: left;
  margin: 0;
  padding: var(--size-regular);
  list-style-type: none;
}

.attribute {
  composes: fontSmallI from '../../../globals/typography.css';
  font-family: 'Fira Mono', monospace;
  color: var(--color-grey);
}

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

.attribute:first-of-type {
  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-demi);
  color: var(--color-black);
}

Update specimen typography for better legibility at all sizes
Update specimen typography for better legibility at all sizes
