디자인 시스템
리드체인지 홈페이지·앱에 공통으로 쓰이는 색·글씨·버튼·카드 등의 기준입니다. 새 화면을 만들 때 여기 토큰을 그대로 쓰면 통일감이 유지됩니다.
Colors · 색상
메인 포인트색은 청록(Teal) 하나. 나머지는 잉크·그레이·배경.
Typography · 글씨
폰트: Pretendard (없을 때 Apple SD Gothic Neo / 맑은 고딕).
H1 · 큰제목
변화를 이끄는 수능전문학원
H2 · 섹션제목
6가지 차별화 된 커리큘럼
H3 · 소제목
관리형 단과수업
Body · 본문
전문성과 깊이 있는 국어·영어 수능 집중형 단과수업을 정원 15명 소수정예로 진행합니다.
Small · 보조
* 입시요강은 PC용으로 제작되었습니다.
Buttons · 버튼
기본 버튼은 둥근 알약(pill) 모양.
Cards · 카드
강점·커리큘럼 카드. 마우스 올리면 살짝 떠오름.
①
수능 전문 강사
대형학원 출신 수능전문 강사진이 핵심 개념을 명확하게 설명합니다.
②
365일 수능집중
예비고1부터 N수생까지 전 클래스 수능 집중 대비반.
③
소수정예 15명
클래스당 15명 제한, 선생님이 직접 관리.
NEW
태그 칩 예시
상태·강조 표시에 사용하는 칩.
Form · 입력
상담신청 등 입력 폼 스타일 (포커스 시 청록 테두리).
Radius · Shadow · Spacing
모서리 둥글기·그림자·간격 기준.
radius-sm · 8px
radius · 14px
radius-lg · 20px
shadow · soft
spacing · 8 · 16 · 24
Motion · 모션
스크롤 시 섹션이 아래에서 위로 부드럽게 등장 (0.65s). 아래 버튼으로 미리보기.
A
페이드업 1
opacity 0→1, 위로 32px 이동.
B
페이드업 2
순차 딜레이로 차례차례.
C
페이드업 3
ease, 0.65초.