스타일 가이드

우아한테크코스 LMS 디자인 시스템

색상 팔레트

🎨 색상 체계 원칙

Primary (Cyan):주요 액션 버튼, 링크, 활성 상태, 수강신청, 초대링크
Secondary (Dark):확인/저장 버튼, 네비게이션, GitHub 로그인
Semantic:상태 전달 (성공, 경고, 에러, 정보)
Neutral:텍스트, 배경, 테두리

Primary - Cyan (청록색 테마)

50

배경 (연함)

#e0f7fa

100

호버 배경

#b2ebf2

600

Primary

#00acc1

700

Primary 호버

#0097a7

800

Primary 액티브

#00838f

Secondary - Dark (다크 그레이)

100

연한 배경

#f5f5f5

300

테두리

#e0e0e0

700

Secondary

#616161

800

호버

#424242

900

확인/저장

#333333

상태 색상 (Essential Only)

50
600
700

Success (성공/완료)

완료 상태, 성공 메시지, 리뷰 완료

50
600
700

Error (에러/위험)

에러 메시지, 삭제 버튼, 회원 탈퇴

Neutral Colors

gray-50

배경

gray-100

연한 배경

gray-300

테두리

gray-500

비활성 텍스트

gray-700

본문 텍스트

gray-900

제목 텍스트

타이포그래피

Heading 1 - 4xl Bold

Heading 2 - 3xl Semibold

Heading 3 - 2xl Semibold

Heading 4 - xl Medium

Heading 5 - lg Medium

Body Text - base Regular

Small Text - sm Regular

Caption - xs Regular

버튼

Primary Buttons (Cyan 테마)

수강신청, 초대하기, 날짜선택, 주요 CTA

Secondary Buttons (Dark 테마)

확인, 저장, GitHub 로그인

Destructive Buttons (위험한 액션)

삭제, 탈퇴, 취소 등 되돌릴 수 없는 작업

Icon Buttons

폼 요소

필수 입력 항목입니다

칩과 배지

상태 칩 (일관된 색상 사용)

진행중완료대기중종료비활성

배지

기본
Secondary
Destructive
Outline

카드

기본 카드

카드 컴포넌트의 기본 스타일입니다.

강조 카드

Cyan 테두리가 있는 카드입니다.

배경색 카드

배경색이 있는 카드입니다.

아이콘

Lucide React 아이콘 라이브러리 사용

Home
User
Bell
Settings
Search
BookOpen
Message
Graduate
Success
Error
Warning
Info

알림 메시지

정보 메시지

사용자에게 중요한 정보를 전달할 때 사용합니다.

성공 메시지

작업이 성공적으로 완료되었을 때 사용합니다.

에러 메시지

오류가 발생했을 때 사용합니다.

사용 가이드라인

색상 사용 규칙

Primary - Cyan (#00acc1)

  • • 수강신청 버튼
  • • 초대링크 생성
  • • 날짜 선택기
  • • 라디오 버튼 / 체크박스
  • • 활성 탭
  • • 진행상황 표시

Secondary - Dark (#333333)

  • • 확인 버튼
  • • 저장 버튼
  • • GitHub 로그인 버튼
  • • 네비게이션 바
  • • 헤더 배경

Success (green-600)

  • • 성공 메시지
  • • 완료 상태
  • • 긍정적 피드백

Error (red-600)

  • • 에러 메시지
  • • 삭제 버튼
  • • 위험한 액션
  • • 실패 상태

간격 시스템

Tailwind CSS 간격 유틸리티 사용

p-1
0.25rem
p-2
0.5rem
p-4
1rem
p-6
1.5rem
p-8
2rem