styleguide.css

:root { 
  --dove-gray: #707070;
  --eerie-black: #191919;
  --emerald: #45cc68;
  --indigo: #5958d2;
  --shark: #24262b;
  --white: #ffffff;
 
  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 18px;
  --font-size-xxl: 19px;
  --font-size-xxxl: 20px;
  --font-size-xxxxl: 22px;
 
  --font-family-noto_sans: "Noto Sans", Helvetica;
  --font-family-pingfangtc-medium: "PingFangTC-Medium", Helvetica;
  --font-family-pingfangtc-semibold: "PingFangTC-Semibold", Helvetica;
  --font-family-pingfangtc-thin: "PingFangTC-Thin", Helvetica;
}
.pingfangtc-semi-bold-white-14px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.pingfangtc-semi-bold-white-18px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-semibold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
}

.pingfangtc-medium-white-19px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pingfangtc-medium-white-14px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.pingfangtc-medium-white-20px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-medium);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
}

.pingfangtc-medium-white-18px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-medium);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.pingfangtc-semi-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-semibold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
}

.pingfangtc-semi-bold-white-20px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-semibold);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 600;
}

.notosans-semi-bold-white-22px {
  color: var(--white);
  font-family: var(--font-family-noto_sans);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 600;
}

.pingfangtc-medium-white-24px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-medium);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
}

.pingfangtc-semi-bold-white-30px {
  color: var(--white);
  font-family: var(--font-family-pingfangtc-semibold);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
}

.border-1px-dove-gray {
  border: 1px solid var(--dove-gray);
}