타이포그래피

H1 (타이틀)

font-family: Pretendard, 굵기: 800

Display Title

H2 (섹션 제목)

font-family: Pretendard, 굵기: 800

Section Title

Body (본문)

font-family: Pretendard, 굵기: 400

이 페이지의 모든 본문 텍스트는 프리텐다드 폰트로 작성되었습니다.

컬러 팔레트 (Color Palette)

Background

var(--bg-color)

Component

var(--card-bg)

Primary Text

var(--text-primary)

Secondary Text

var(--text-secondary)

Primary Accent

var(--point-blue)

Success

var(--point-green)

Error / Danger

var(--point-red)

Warning

var(--point-yellow)

버튼

마우스를 올리면 그림자가, 클릭하면 빠른 반응 효과가 적용됩니다.

카드

새로운 소식

카드 타이틀 영역

클릭하면 상세 내용을 담은 모달창이 나타납니다.

이벤트

포인트 컬러 활용

카드 자체에 포인트 컬러를 적용하여 주목도를 높입니다.

폼 (Forms)

이메일 주소

비밀번호 (에러 상태)

비밀번호가 너무 짧습니다.

토글 스위치

체크박스

라디오

알림 (Alerts)

성공! 데이터가 안전하게 저장되었습니다.

에러! 필수 입력값을 확인해주세요.

탭 (Tabs)

프로필 정보

사용자의 프로필 정보가 여기에 표시됩니다.

네오 브루탈리즘 UI 키트

타이포그래피

Display Title

Section Title

컬러 팔레트 (Color Palette)

버튼

카드

카드 타이틀 영역

포인트 컬러 활용

폼 (Forms)

알림 (Alerts)

탭 (Tabs)

프로필 정보

계정 설정

알림 목록

타이포그래피

Display Title

Section Title

컬러 팔레트 (Color Palette)

버튼

카드

카드 타이틀 영역

포인트 컬러 활용

폼 (Forms)

알림 (Alerts)

탭 (Tabs)

프로필 정보

계정 설정

알림 목록

모달 타이틀

관련 글