17.Global set Up & typography(feat. Ellie)

less than 1 minute read

/* Global */

:root {
  /* Color */

  --color-white: #ffffff;

  --color-light-white: #eeeeee;

  --color-dark-white: #bdbdbd;

  --color-pink: #fe918d;

  --color-dark-pink: #ff6863;

  --color-dark-grey: #4d4d4d;

  --color-grey: #616161;

  --color-light-grey: #7c7979;

  --color-blue: #73aace;

  --color-yellow: #fff7d1;

  --color-orange: #feb546;

  --color-black: #000000;

  /* Font size */

  --font-large: 48px;

  --font-medium: 28px;

  --font-regular: 18px;

  --font-small: 16px;

  --font-micro: 14px;

  /* Font weight */

  --weight-bold: 700;

  --weight-semi-bold: 600;

  --weight-regular: 400;
}

/* Typography */

h1 {
  font-size: var(--font-large);

  font-weight: var(--weight-bold);

  color: var(--color-black);

  margin: 16px 0px;
}

h2 {
  font-size: var(--font-medium);

  font-weight: var(--weight-semi-bold);

  color: var(--color-black);

  margin: 8px 0;
}

h3 {
  font-size: var(--font-regular);

  font-weight: var(--weight-regular);

  color: var(--color-black);

  margin: 8px 0;
}

p {
  font-size: var(--font-regular);

  font-weight: var(--weight-regular);

  color: var(--color-black);

  margin: 4px 0;
}

Tags:

Categories:

Updated:

Leave a comment