[💄 Style] Font, Color, Breakpoint style

[shimseohyun]

🛠 Issue

Font, Color, Breakpoint custom style 관련 공지사항입니다

Font

피그마 확인시 font마다 설정된 스타일을 확인하실 수 있습니다.
해당 태그의 경우는 Headline 3 스타일로, H3을 className으로 지정해주시면됩니다.
<p className="H3">Seminar</p>

각 스타일별 클래스 이름

- Headline3 -> H3
- Headline4 -> H4
- Headline5 -> H5
- Headline6 -> H6

- Subhead1 -> Sb1
- Subhead2 -> Sb2

- Body1 -> B1
- Body2 -> B2

- BUTTON -> Btn
- Caption -> Cap
- OVERLINE -> Ove

다들 해당하는 폰트로 다시 적용 부탁드립니다!

---

Color

white 제외 custom 컬러로 사용해주시면 됩니다!

      colors: {
        mono_50: '#F7F8FA',
        mono_100: '#EAEBED',
        mono_200: '#CACDD2',
        mono_300: '#91A3AE',
        mono_400: '#9FA4A8',
        mono_500: '#73787E',
        mono_600: '#474C52',
        mono_700: '#3E4348',
        mono_800: '#27282C',
        mono_900: '#1C1D1F',
        mono_black: '#000000',
      },

<p className="text-mono_50"> grey50의 글씨 </p>

---

BreakPoint

     screens: {
        desktop: '961px',
        tablet: '521px',
      },

데스크탑 뷰
desktop:클래스 명

테블릿 뷰
tablet:클래스 명

모바일 뷰

기본

<section className="grid desktop:grid-cols-4 tablet:grid-cols-2 grid-cols-1 gap-x-8 gap-y-8">

-> 데스크탑 그리드 4, 테블릿 그리드 2, 모바일 그리드 1의 예시

---

다들 확인해주세요!

[seochan99]

우와앙 쳌

[puretension]

확인했습니다~!

[bianbbc87]

확인했습니다!

[naarang]

확인했습니다!!

[bunju20]

확인했습니다!