폰트 : MinSans

사용 : MinSans-Bold, MinSans-Medium, MinSans-Regular, MinSans-Light

클래스 내 적용이름 : MinB, Min1, Min2, Min3 (순서대로!)

폰트 크기 - 컨피그 참조 : https://nekocalc.com/px-to-rem-converter 이걸로 px-rem변환해서 표기

Title : size 1~6

Subtitle : size 1~2

Text : size 1~7

컬러는 아직 추가 안함

예시

				<Title size="1" >타이틀1</Title>
        <Title size="2" >타이틀1</Title>
        <Title size="3" >타이틀1</Title>
        <Title size="4" >타이틀1</Title>
        <Title size="5" >타이틀1</Title>
        <Title size="6" >타이틀1</Title>
        <Subtitle size="1" >서브타이틀1
</Subtitle>
        <Subtitle size="2" >서브타이틀1
</Subtitle>
        <Text size="1" >타이틀1</Text>
        <Text size="2" >타이틀1</Text>
        <Text size="3" >타이틀1</Text>
        <Text size="4" >타이틀1</Text>
        <Text size="5" >타이틀1</Text>
        <Text size="6" >타이틀1</Text>
        <Text size="7" >타이틀1</Text>

color

커스텀 파레트 제작

dgray: {
          100: '#F7FAFC',
          200: '#EDF1F6',
          300: '#CCD5E0',
          400: '#A1ADC0',
          500: '#727F96',
          600: '#1B202C',

          900: '#1ABC9C', //얘는 그린
        },
        dred: {
          100: '#FEEAED',
          200: '#F9A9B5',
          300: '#FF526D',
          400: '#DB4A60',
          500: '#B94153',

        },
        dpurple: {
          100: '#EDDFFF',
          200: '#9262F7',
          300: '#752BD9',
          400: '#5619A9',
        },

실제 사용 예

그린!

<div className="w-40 flex flex-row">
        <div className="bg-dgray-100 w-5 p-5">a</div>
        <div className="bg-dgray-200 w-5 p-5">a</div>
        <div className="bg-dgray-300 w-5 p-5">a</div>
        <div className="bg-dgray-400 w-5 p-5">a</div>
        <div className="bg-dgray-500 w-5 p-5">a</div>
        <div className="bg-dgray-600 w-5 p-5">a</div>
        <div className="bg-white w-5 p-5">a</div>
        <div className="bg-dgray-900 w-5 p-5">a</div>        
        </div>

레드랑 퍼플!

div className="w-40 flex flex-row">
        <div className="bg-dred-100 w-5 p-5">a</div>
        <div className="bg-dred-200 w-5 p-5">a</div>
        <div className="bg-dred-300 w-5 p-5">a</div>
        <div className="bg-dred-400 w-5 p-5">a</div>
        <div className="bg-dred-500 w-5 p-5">a</div>
        <div className="bg-white w-5 p-5">a</div>
        <div className="bg-dpurple-100 w-5 p-5">a</div>
        <div className="bg-dpurple-200 w-5 p-5">a</div>
        <div className="bg-dpurple-300 w-5 p-5">a</div>
        <div className="bg-dpurple-400 w-5 p-5">a</div>
        </div>