스파르타클럽 팀스파르타 dashboard system Dark adaptation · brightened action states
LEARNER DASHBOARD

완주를 밀어주는 학습 대시보드

다크 모드는 near-black surface를 유지하되 red CTA와 blue link를 밝게 보정한다. 정보 구조는 light와 같고, card·row·topbar는 여전히 border 중심으로 깊이를 만든다.

이어서 학습 컴포넌트 보기 토큰 확인
01

Colors

Base swatches keep exact design.md OKLCH values
brand-red
oklch(0.613 0.214 19)
brand-red-dark
oklch(0.525 0.197 21)
brand-red-soft
oklch(0.944 0.029 7)
interaction-blue
oklch(0.429 0.297 264)
interaction-blue-soft
oklch(0.958 0.020 280)
teal-strong
oklch(0.378 0.066 224)
white
oklch(1.000 0.000 0)
gray-50
oklch(0.979 0.003 265)
gray-100
oklch(0.954 0.005 258)
gray-200
oklch(0.910 0.007 269)
gray-300
oklch(0.829 0.009 265)
gray-400
oklch(0.729 0.013 271)
gray-500
oklch(0.569 0.011 267)
gray-600
oklch(0.420 0.012 267)
gray-700
oklch(0.298 0.011 271)
gray-800
oklch(0.210 0.008 275)
gray-900
oklch(0.164 0.011 268)
gray-950
oklch(0.164 0.007 271)
black
oklch(0.000 0.000 0)
success
oklch(0.627 0.170 149)
warning
oklch(0.769 0.165 70)
focus-ring
oklch(0.429 0.297 264 / 0.32)
modal-backdrop
oklch(0.000 0.000 0 / 0.48)
badge-blue-bg
oklch(0.932 0.034 286)
badge-teal-bg
oklch(0.941 0.021 208)
badge-green-bg
oklch(0.962 0.043 157)
02

Typography & Foundations

Pretendard dense dashboard rhythm

Type scale

display44/700누구나 큰일 낼 수 있어
h132/700오늘도 완주해요
h222/700학습 현황
body14/400강의, 과제, 라이브 세션을 한 화면에서 스캔한다.

Spacing, radius, elevation

space-1 4px
space-6 15px
space-7 32px
6
16
50 pill
sm
md
lg
03

Dashboard Shell

Sidebar, topbar, course rows, progress
홈 / 내 학습 / ChatGPT 활용법
강의, 튜터, 트랙 검색

오늘의 학습

지민님, 오늘도 큰일 내 봐요

이번 주 3개 강의 마감이 남았다. 다음 행동을 바로 시작한다.

누적 학습 시간128h이번 주 +6h
완료한 강의12/18평균보다 +3강
이번 주 출석5일연속 학습 유지
과제 제출률94%상위 12%
수강 중인 강의
HOTAI 입문
오늘 배워 내일 써먹는 ChatGPT 활용법
다음: 3주차 · 프롬프트 체이닝
78%
오늘까지
국비지원
데이터 분석가 취업 포트폴리오 만들기
다음: 2주차 · SQL 윈도우 함수
34%
3일 남음

다음 라이브 세션

AI 포트폴리오 코칭 라이브

오늘 19:30 · 현직 PM 코치와 함께 과제 방향을 점검한다.

참여하기
04

Components

Buttons, cards, forms, select, checkbox, lesson player

Buttons and badges

HOTNEW국비지원완료

Form inputs

로그인 ID로 사용된다
8자 이상 입력한다
AI 활용 부트캠프
HOT국비지원

오늘 배워 내일 써먹는 ChatGPT 활용법

취준생, 직장인에게 필요한 ChatGPT 활용법만 모았다.

평점 4.8 · 12,430명무료
내일배움캠프
NEW모집중

AI 시대 취업 캠프 · 데이터분석 트랙

직무별 AI 포트폴리오부터 인턴십까지 연결한다.

6월 2일 개강국비지원
스킬업
실무

UXUI 포트폴리오 리뉴얼 클래스

프로젝트 구조와 화면 설득력을 함께 다듬는다.

평점 4.6 · 2,451명₩168,000
1
1주차 · 오리엔테이션
6/6 완료
2
2주차 · 프롬프트 엔지니어링
5/8 완료
3
3주차 · 자동화 프로젝트
0/7 완료