기본 요소

홈 화면을 그리면서 실제로 굳어진 값만 모았습니다. 여기 없는 크기·색은 새로 만든 것이니, 필요하면 여기에 먼저 추가하고 화면에 씁니다.

글자 Pretendard · 400 / 500 / 600 / 700 네 굵기만
히어로 제목 2.125rem · 34px · 700 누구의 전적이 궁금하세요?
아트보드 제목 1.75rem · 28px · 700 브랜드 컬러
섹션 제목 1.125rem · 18px · 700 게임 랭킹
본문 · 목록 제목 0.9375rem · 15px · 400 9월 정기점검 안내
강조 본문 0.9375rem · 15px · 600 달빛조각사
보조 설명 0.875rem · 14px · 400 닉네임만 알려주시면 정리해 드릴게요
날짜 · 부가 수치 0.8125rem · 13px · 400 09.02 · 1,204명
표 머리 · 라벨 0.75rem · 12px · 500 순위 · 닉네임 · 등락
「신규」 표기 0.6875rem · 11px · 700 신규

숫자는 자리가 흔들리지 않도록 tabular-nums 를 켭니다. 자간은 제목이 클수록 좁힙니다(-0.045em ~ -0.015em). 로고는 글꼴이 아니라 그린 도형입니다.

치수 반복해서 쓰는 값
라운드 — 알약(탭·버튼·칩) 999px
라운드 — 큰 카드 · 배너 24 / 20 / 18px
라운드 — 보통 카드 · 상태 블록 16 / 14px
라운드 — 작은 타일 · 썸네일 12 / 10 / 8px
표 행 높이 — 데스크톱 46px
표 행 높이 — 모바일 52px
표 머리 높이 32 ~ 34px
섹션 사이 — 데스크톱 40px
섹션 사이 — 모바일 32px
그리드 좌우 여백 — 1440 / 768 / 390 40 / 24 / 20px
누를 수 있는 것의 최소 크기(모바일) 44px
본문 최소 크기 12px
색 이 밖의 색은 쓰지 않습니다
브랜드
면 #FF6A00
면 누름 #D95A00
글자 #C24A00
글자 hover #A03C00
글자
본문 #14161A
보조 #5B6169
흐린 보조 #7A828C
가장 흐린 #9BA1A9
비활성 #C9CDD3
선
진한 선 #E4E8ED
보통 선 #EDEFF2
옅은 행 구분 #F3F5F7
면
기본 #FFFFFF
한 겹 아래 #FAFBFC
카드·탭 #F5F6F8
버튼 바탕 #F2F4F7
자리표시 #EDEFF2
의미
상승 #12805C
하락 #C4453D

브랜드 색은 면이냐 글자냐에 따라 값이 갈립니다 — 면에는 #FF6A00 에 흰 글자, 흰 바탕 위 글자에는 #C24A00. 상승·하락은 의미가 정해진 색이라 다른 뜻으로 쓰지 않습니다.

컴포넌트 화면마다 같은 모양으로 씁니다
탭 — 필터를 고를 때
통합시즌클랜
세그먼트 — 갈래를 고를 때
계급랭크전클랜

층위가 다르므로 모양도 다릅니다. 알약 탭을 두 줄로 쌓지 않습니다.

버튼
글자 링크
더 보기 전적 자세히 보기

한 화면에 주 버튼(오렌지)은 하나입니다. 「더 보기」는 브랜드 색을 쓰지 않습니다.

표 한 줄
#유저등락
1 달빛조각사 2
2 칼든햄스터 –
9월 정기점검 안내신규
09.02

등락은 ▲n / ▼n / – 셋뿐입니다. 「신규」는 배경 없는 글자입니다.