Design Guide
Brand Site 디자인 시스템 · Pretendard · 1920px Desktop · v2.0 · 2026.06
브랜드 아이덴티티
로고
• 로고마크 + 워드마크 조합
• 최소 사용 크기: 28px
• 여백: 로고 높이의 1/2 이상
• 배경색에 따라 흰색/레드 전환
브랜드 키 컬러
Brand Red#ED1B23rgb(237,27,35)
Dark BG#0E0E10rgb(14,14,16)
Purple (Basic)#7954C6rgb(121,84,198)
Blue (Info)#1B8BECrgb(27,139,236)
Green (Success)#22C55Ergb(34,197,94)
색상 시스템
Brand / Primary
50
#fef2f2
#fef2f2
100
#fecaca
#fecaca
200
#fca5a5
#fca5a5
300
#f87171
#f87171
400
#ef4444
#ef4444
500 ★
#ED1B23
#ED1B23
600
#b91c1c
#b91c1c
700
#7f1d1d
#7f1d1d
텍스트 컬러 (Figma 토큰)
--text-222222#222 · 제목/강조
--text-333333#333 · 본문 강조
--text-424242#424 · 본문
--text-606060#606 · 보조
--text-a0a0a0#a0a · 비활성
--text-b0b0b0#b0b · 플레이스홀더
배경 컬러
White#fff · 카드, 폼
Page BG#f6f6f8 · 페이지
--bagic-f9f9f9#f9f9f9 · 서브BG
--bagic-f5f5f5#f5f5f5 · 인풋BG
Dark#0e0e10 · GNB/다크
Black#000 · 푸터
Error Beige#F1E7D4 · 에러/점검 BGrgb(241,231,212)
상태 컬러
Success · 사용중#22C55E
Error · 결제실패#ED1B23
Info · 결제성공#1B8BEC
Warning · 유예#E67E22
Neutral · 비활성#555555
플랜 뱃지 컬러
FREE
#ED7C1BBASIC월간
#7954C6GROWTH
#1B8BECADVANCED
#333333타이포그래피
기본 폰트 패밀리
Pretendard가나다Thin 100
가나다Light 300
가나다Regular 400 ★
가나다Medium 500 ★
가나다SemiBold 600 ★
가나다Bold 700 ★
가나다ExtraBold 800 ★
가나다Black 900
★ = 주로 사용. 가장 빈번: Regular(11683), Medium(5497), Bold(2240), SemiBold(1648)
타입 스케일
역할
미리보기
크기
굵기
자간
Hero H1
크리에이터
60–84px
800
-0.05em
섹션 H2
핵심 서비스
44–58px
700–800
-0.04em
서브 H2
페이지 제목
28–36px
700
-0.04em
카드 H3
카드 섹션 제목
20–24px
700
-0.03em
본문 Large
AI튜터로 학습자의 만족도 Up
17–18px
400–500
-0.02em
본문 Default
서비스 이용 내역을 확인하세요.
14–15px
400
-0.02em
캡션 / 레이블
접수일: 2026.04.01 | 처리 완료
12–13px
400–500
-0.01em
마이크로 / 뱃지
FREE · NEW · 답변완료
10–11px
600–700
0em
자간(Letter Spacing) 가이드
쏠쏠 LMS
-0.05emHero 대형 제목
쏠쏠 LMS
-0.04em섹션 제목 H2
쏠쏠 LMS
-0.02em본문 / 인터페이스
쏠쏠 LMS
0em뱃지 / 태그
간격 & 그리드
간격 스케일
4px
최소 간격 · 뱃지 패딩8px
아이콘-텍스트 간격 · 소형 갭12px
버튼 내부 패딩 · 칩 간격16px
인풋 패딩 · 리스트 아이템 간격20px
카드 내 항목 간격24px
섹션 내부 gap · 카드 패딩32px
카드 패딩 · 모달 내부 간격40px
그리드 gap · 섹션 내 대형 갭60px
페이지 상하 패딩 · 섹션 간격80px
섹션 상하 여백261px
페이지 좌우 여백 (1920px 기준)레이아웃 그리드
1920px 데스크탑
페이지 너비1920px (고정)
좌우 여백261px
콘텐츠 영역261px ~ 1659px
유효 너비1398px
2컬럼 (솔루션)
좌측 텍스트261px ~ 737px
우측 카드737px ~ 1659px
카드 폭446px × 2col
카드 gap30px
가격 카드 (4컬럼)
카드 폭327px
카드 간격30px
추천 카드 상단-28px (돌출)
추천 카드 높이+56px (강조)
Border Radius
4px
버튼소형
버튼소형
6px
테이블셀
테이블셀
8px
버튼/인풋
버튼/인풋
10px
소형카드
소형카드
12px
정보박스
정보박스
14px
리스트행
리스트행
16px
모달/카드
모달/카드
20px
대형카드
대형카드
9999px
Pill/뱃지
Pill/뱃지
컴포넌트
버튼
Primary
Primary Pill
Secondary / Outline / Ghost
아이콘 포함
뱃지 & 상태 태그
상태 뱃지 (Pill)
사용중결제 실패결제성공서비스중지결제유예NEW추천
카테고리 뱃지
공지사항업데이트서비스 점검답변 대기답변 완료
필수/선택 표시
필수선택*
폼 요소
인풋 (Input)
오류 메시지 표시
사용 가능한 도메인입니다.
특수 인풋
.solsol.com
카드 스타일
기본 카드
border+shadow
border+shadow
레드 카드
솔루션 강조
솔루션 강조
추천 카드
inset 2px + glow
inset 2px + glow
다크 카드
dark bg
dark bg
선택 요소
토글 스위치
활성 (ON)
비활성 (OFF)
체크박스 & 라디오
GNB (Global Navigation Bar)
다크 GNB (브랜드 사이트 전용)
서비스주요 기능가격운영가이드
한국어문의하기로그인
무료로 시작하기
라이트 GNB (서브 페이지)
서비스주요 기능가격운영가이드
한국어문의하기로그인
무료로 시작하기
높이60px (로그인 후: 64px)
로고 좌측 여백261px (라이트), 80px (다크)
현재 메뉴 표시text-[#ED1B23] (레드)
아이콘 시스템
SVG 인라인 아이콘 사용. stroke-width: 1.3~1.8. 색상은 currentColor로 상속. 주요 크기: 14px / 16px / 18px / 20px / 24px / 28px / 36px
네비게이션 / 일반
dropdown
→ arrow
← back
check
close ×
plus
kebab ⋮
인터페이스 / 기능
user
card
mail
lock
calendar
chart
chat
YouTube
아이콘 크기 & 컨테이너
32px box
40px box
48px box
56px circle
64px rounded
레이아웃 패턴
풀 페이지 (브랜드 랜딩)
페이지 너비1920px 고정
GNB 높이105px (기존) / 60px (신규)
히어로 높이820–960px
섹션 최소 높이480–1300px
푸터 높이457px
인증 페이지
배경색#f5f5f5
로고 상단 여백80px
카드 너비480–560px
카드 패딩48–60px
카드 border-radius16–20px
마이페이지 (사이드바 레이아웃)
배경색#f7f7f9
좌우 패딩261px
사이드바 너비220px
사이드바-콘텐츠 gap40px
활성 메뉴text-[#ED1B23] + bg-[#fff5f5]
콘텐츠 페이지 (공지/약관)
최대 콘텐츠 너비860–1140px
배치 방식mx-auto + px-[40px]
상단 여백60px
하단 여백100px
본문 줄높이1.8
에러/점검 페이지 패턴
베이지 타입 — 시스템에러 · 404 · 네트워크
배경색#F1E7D4
캐릭터 left1094px
캐릭터 top180px
캐릭터 크기401 × 600px
그라데이션 블렌드하단 110px · transparent → #F1E7D4
그레이 타입 — 긴급점검 · 정기점검
배경색#f0f0f0
점검 박스 폭960px
점검 박스 radius20px
캐릭터 파일error-char-*.png
그라데이션 블렌드하단 110px · transparent → #f0f0f0
페이지 인덱스
총 43개 페이지 · 클릭하면 해당 페이지로 이동합니다.
전체 목록 보기
마이 사이트 · 가격5개
인증 (BR01-03xx)6개
사이트 만들기 · 결제 (BR01-04xx / 06xx)6개
공지소식 · 문의 (BR01-05xx / 07xx)6개
마이페이지 (BR01-08xx / 09xx / 10xx)5개
약관 · 정책 (BR01-11xx)5개