팀스파르타

---
name: 팀스파르타
slug: teamsparta
category: etc
logo: /logos/teamsparta-favicon.png
last_updated: "2026-05-13"
sources:
  - https://api.anthropic.com/v1/design/h/wZ6KVUwvbzeAUM4Ji6lLjQ
  - https://spartaclub.kr/
  - https://nbcamp.spartaclub.kr/
  - https://b2b.spartaclub.kr/
  - https://career.spartaclub.kr/
related_services: []
lang: ko
---

# 팀스파르타 (스파르타클럽) — design.md

> 팀스파르타가 운영하는 스파르타클럽 학습 생태계의 인증 대시보드 디자인 시스템이다. 본 문서는 Claude Design handoff bundle의 `스파르타클럽 Design System` README, `colors_and_type.css`, preview cards, dashboard UI kit, chat transcript를 1차 출처로 합성했다 [src:1]. 공개 공식 사이트와 내일배움캠프, 기업교육, 커리어 surface는 서비스 범위와 브랜드 맥락 확인용 보조 출처로 사용했다 [src:2][src:3][src:4][src:5].

## Brand & Style

스파르타클럽은 팀스파르타의 통합 소비자 브랜드로, 내일배움캠프, AI 입문/실무 강의, 재직자 캠프, 기업교육을 한 학습 여정 안에 묶는다 [src:1]. 디자인 시스템의 기준 surface는 마케팅 페이지가 아니라 수강생과 운영자가 쓰는 인증 대시보드이며, catalog → enrollment → learning dashboard → community → career로 이어지는 흐름을 전제로 한다 [src:1].

브랜드 무드는 **warm, encouraging, confident, implementation-focused**다 [src:1]. “누구나 큰일 낼 수 있어”, “완주”, “찐한 관리”처럼 학습 지속과 실행을 밀어주는 어휘가 반복되지만, 장식적 과장보다 사용자가 지금 무엇을 해야 하는지 보여주는 동사 중심 문장이 우선한다 [src:1]. Product copy는 `해요/합니다` 존댓말을 쓰고, 버튼은 `학습 시작`, `수강신청`, `무료 체험`, `알림 신청`처럼 4~8자 동사 라벨을 선호한다 [src:1]. 본 catalog 문서는 제품 표면 카피와 달리 평서체로 기술한다.

시각 언어의 핵심은 **가벼운 학습 대시보드 + 강한 Sparta red CTA + link/info blue 분리**다 [src:1]. 번들 README는 제공 토큰의 electric blue와 실제 라이브 브랜드의 red wordmark/CTA 사이에 의미 충돌이 있음을 명시하고, blue는 링크·정보·focus, red는 identity·primary CTA·celebration에 배정한다 [src:1]. 따라서 한 컴포넌트 안에서 red와 blue를 동시에 primary 상태로 섞지 않고, 표면의 목적에 따라 한 축만 선택해야 한다 [src:1].

## Colors

원본 토큰은 `colors_and_type.css`에 정의되어 있으며, 본 문서는 catalog 규약에 따라 OKLCH로 변환해 표기한다 [src:1]. Blue는 interaction/info, red는 brand/CTA, teal은 informational active surface, cool gray는 dashboard structure를 담당한다 [src:1].

### Brand & interaction

```yaml
brand-red:       oklch(0.613 0.214 19)   # identity, primary CTA, progress highlight
brand-red-dark:  oklch(0.525 0.197 21)   # primary CTA hover/pressed
brand-red-soft:  oklch(0.944 0.029 7)    # red badge and subtle alert surface
interaction-blue: oklch(0.429 0.297 264) # links, info, focus ring source
interaction-blue-soft: oklch(0.958 0.020 280)
teal-strong:     oklch(0.378 0.066 224)  # active sidebar, live session, data cards
```

### Neutral scale

```yaml
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)
```

### Semantic status

```yaml
success: oklch(0.627 0.170 149)
warning: oklch(0.769 0.165 70)
danger:  oklch(0.613 0.214 19)
info:    oklch(0.429 0.297 264)
```

### Semantic alias

```yaml
bg-canvas-light:   white
bg-subtle-light:   gray-50
bg-surface-light:  white
bg-canvas-dark:    gray-900
bg-surface-dark:   gray-950
fg-primary-light:  gray-900
fg-secondary-light: gray-500
fg-inverse:        white
border-default:    gray-200
border-muted:      gray-100
focus-ring:        oklch(0.429 0.297 264 / 0.32)
modal-backdrop:    oklch(0.000 0.000 0 / 0.48)
```

### Supporting badge surfaces

```yaml
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)
badge-red-bg:   brand-red-soft
```

## Typography

Primary typeface is **Pretendard Variable** with Korean system fallbacks [src:1]. The handoff explicitly confirms Pretendard as the intended font and keeps the CDN import in the token file; production may self-host the same family without changing metrics [src:1].

```yaml
font-family-sans: >
  "Pretendard Variable", Pretendard, "Pretendard Bold Placeholder",
  -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic",
  "Apple SD Gothic Neo", sans-serif
font-family-mono: >
  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
```

The dashboard scale is dense and Korean SaaS-oriented: small labels and rows use 12~14px, dashboard headings use 22~32px, and display moments stop at 44px [src:1]. Headings and CTAs lean on 700 weight; body copy stays 400~500 and uses relaxed line-height for Korean readability [src:1].

```yaml
xs:      { size: 10, line-height: 1.20, weight: 700, tracking: 0.08em }
sm:      { size: 12, line-height: 1.40, weight: 500, tracking: 0.01em }
md:      { size: 13, line-height: 1.50, weight: 400 }
lg:      { size: 14, line-height: 1.55, weight: 400 }
xl:      { size: 15, line-height: 1.55, weight: 500 }
body-lg: { size: 16, line-height: 1.55, weight: 500 }
h3:      { size: 18, line-height: 1.35, weight: 700 }
h2:      { size: 22, line-height: 1.30, weight: 700, tracking: -0.01em }
h1:      { size: 32, line-height: 1.375, weight: 700, tracking: -0.015em }
display: { size: 44, line-height: 1.20, weight: 700, tracking: -0.02em }
```

숫자와 진행률은 dashboard scan 대상이므로 `font-variant-numeric: tabular-nums`를 적용한다. 학습 시간, 완료 강의 수, 출석일, 과제 제출률 같은 metric card는 숫자를 22px/700 이상으로 두고 label은 11~12px uppercase-style overline으로 낮춘다 [src:1].

## Spacing

Spacing은 8-step scale을 사용한다 [src:1]. `15px`까지는 컴포넌트 내부 밀도, `32px`부터는 section/gutter 단위로 쓰며, README는 중간에 20px/24px 단계를 임의로 만들지 말라고 명시한다 [src:1].

```yaml
space-1: 4px
space-2: 6px
space-3: 8px
space-4: 10px
space-5: 12px
space-6: 15px
space-7: 32px
space-8: 40px
```

Dashboard layout은 240px fixed sidebar, 56px sticky topbar, desktop content gutter 32px, mobile gutter 15px를 기준으로 한다 [src:1]. Card 내부 stack은 10~12px이 표준이고, card grid 간격은 14~16px의 조밀한 리듬을 사용한다 [src:1].

## Rounded

Radius는 세 단계로 제한한다 [src:1].

```yaml
radius-xs: 6px   # inputs, tooltips, checkbox, compact chips
radius-sm: 16px  # cards, modals, media tiles, video player
radius-md: 50px  # pills, avatars, tags, primary CTAs, progress bars
```

팀스파르타 표면의 signature는 50px pill CTA다 [src:1]. 일반 카드와 media tile은 16px로 부드럽게 묶고, input과 focusable control은 6px를 써서 대시보드 밀도를 유지한다 [src:1].

## Elevation & Depth

시스템은 flat-first다 [src:1]. 기본 card, sidebar, topbar, list row는 shadow 없이 `1px` border로 구조를 만들고, elevation은 dropdown, toast, modal 같은 floating surface에만 쓴다 [src:1].

```yaml
shadow-sm: >
  0 1px 2px oklch(0.164 0.011 268 / 0.06),
  0 1px 1px oklch(0.164 0.011 268 / 0.04)
shadow-md: >
  0 4px 10px oklch(0.164 0.011 268 / 0.08),
  0 1px 3px oklch(0.164 0.011 268 / 0.06)
shadow-lg: >
  0 12px 28px oklch(0.164 0.011 268 / 0.14),
  0 4px 10px oklch(0.164 0.011 268 / 0.08)
```

Hover elevation은 clickable media card에만 제한적으로 허용한다 [src:1]. Primary CTA는 hover 때 shadow를 키우기보다 red를 어둡게 하고, active/press는 `scale(0.98)`과 shadow 제거로 반응한다 [src:1].

## Shapes

Shape language는 **rounded dashboard geometry**다. 사각형 컨테이너는 16px card radius를 반복하고, 행동·상태·진행 요소는 pill 또는 capsule로 처리한다 [src:1]. Sidebar active item은 rectangular pill에 가깝고, avatar·badge·progress fill은 모두 50px radius로 통일된다 [src:1].

브랜드 그래픽은 marketing surface에서는 사람 중심 이미지와 product screenshot mockup을 쓰지만, dashboard chrome 안에서는 평면 카드와 선형 iconography가 우선한다 [src:1]. 아이콘은 custom font가 아니라 Lucide/Heroicons 계열의 1.5px outline을 기준으로 하며, filled icon과 outline icon을 같은 surface에서 섞지 않는다 [src:1].

## Components

### Button primary

Primary button은 Sparta red 배경, white foreground, 50px radius, 700 weight를 사용한다 [src:1]. 주요 CTA는 `수강신청`, `무료 체험 시작`, `이어서 학습`, `참여하기`처럼 동사 중심으로 작성한다 [src:1].

```tsx
<Button variant="primary" size="md">이어서 학습</Button>
```

```yaml
button-primary-bg: brand-red
button-primary-hover-bg: brand-red-dark
button-primary-fg: white
button-primary-radius: radius-md
button-primary-focus: focus-ring
```

### Button secondary and ghost

Secondary는 white surface와 gray-200 border로 구조를 만들고, hover에서는 gray-50으로만 살짝 떠오른다 [src:1]. Ghost는 background 없이 interaction blue text를 사용하며 로그인, 보조 이동, link-like action에 쓴다 [src:1].

```yaml
button-secondary-bg: white
button-secondary-border: gray-200
button-secondary-hover-bg: gray-50
button-ghost-fg: interaction-blue
button-ghost-hover-bg: interaction-blue-soft
```

### Sidebar

Sidebar는 240px fixed width, full-height sticky, white surface, gray-100 border-right를 사용한다 [src:1]. Active nav item은 teal-strong fill과 white text로 처리해 red CTA와 경쟁하지 않는다 [src:1].

```tsx
<Sidebar active="catalog" onNav={setScreen} />
```

### Topbar and search

Topbar는 56px sticky header이며 shadow 없이 하단 border만 사용한다 [src:1]. Search box는 gray-50 pill field이고, width는 desktop에서 280px를 기준으로 한다 [src:1].

```yaml
topbar-height: 56px
search-radius: radius-md
search-bg: gray-50
```

### Card

Card는 white surface, gray-100/200 border, 16px radius, 20px padding이 기본이다 [src:1]. Course card는 media thumbnail, badge row, title/description, metadata footer로 구성되며, 사용자의 iteration 결과 metadata footer는 하단에 고정하고 card 높이는 row 안에서 일관되게 유지한다 [src:1].

```yaml
card-bg: white
card-border: gray-100
card-radius: radius-sm
card-padding: 20px
card-gap: 10px
card-footer-pin: true
```

### Pill and badge

Pill은 50px radius, 11px/700 label, 3px 10px padding을 쓴다 [src:1]. Red badge는 hot/new/primary emphasis, teal은 국비지원/취업 보장 같은 정보성 상태, green은 completion/success, blue는 new/info에 배정한다 [src:1].

```yaml
pill-red:   { bg: brand-red-soft, fg: brand-red-dark }
pill-blue:  { bg: badge-blue-bg, fg: interaction-blue }
pill-teal:  { bg: badge-teal-bg, fg: teal-strong }
pill-green: { bg: badge-green-bg, fg: success }
```

### Form input

Input은 6px radius, 14px text, 10px 12px padding, gray-200 border를 사용한다 [src:1]. Focus-visible은 border 색만 바꾸지 않고 interaction blue ring을 외곽에 둔다 [src:1]. Error는 red border와 red helper text를 쓰며 input background를 red로 칠하지 않는다 [src:1].

```yaml
input-radius: radius-xs
input-border: gray-200
input-focus-ring: oklch(0.429 0.297 264 / 0.18)
input-error-border: danger
```

### Select

Select는 native chevron을 숨기고 오른쪽 36px padding 안에 custom chevron을 둔다 [src:1]. 텍스트 시작점은 input과 같은 12px left padding에 맞추며, chevron이 텍스트 baseline을 밀지 않도록 한다 [src:1].

### Checkbox

Checkbox는 label과 input을 semantic하게 연결하고, label 전체가 클릭 영역이 되도록 한다 [src:1]. Checked state는 red fill과 white check glyph를 사용하고, focus-visible은 blue ring을 유지한다 [src:1].

### Course row and progress

Course row는 52px thumbnail, badge/track, single-line title, next lesson, right-aligned progress percentage로 구성한다 [src:1]. Progress track은 gray-100, fill은 brand-red 또는 success green을 사용하며 radius-md로 capsule 처리한다 [src:1].

### Lesson player

Lesson player는 16:9 dark video frame, 16px radius, red radial emphasis, large 50px play button, bottom progress bar를 사용한다 [src:1]. Curriculum accordion은 active week를 gray-50 surface로 열고, 완료 상태는 success green, 현재 상태는 brand-red로 구분한다 [src:1].

## Do's and Don'ts

### Do

- Use Sparta red for identity, primary CTA, progress highlight, and celebration state [src:1].
- Use interaction blue for links, info, focus rings, and ghost actions, not for primary brand identity [src:1].
- Keep dashboard surfaces flat with 1px borders and restrained shadows [src:1].
- Use Pretendard Variable and dense 12~14px dashboard text for lists, metadata, and controls [src:1].
- Keep card height consistent in rows and pin metadata to the lower edge when cards are comparable items [src:1].
- Use semantic label/input linkage for checkboxes and clear right padding for select chevrons [src:1].
- Write Korean product copy in warm, concrete, verb-forward `해요/합니다` style [src:1].

### Don't

- Do not mix red and blue as competing primary states inside one component [src:1].
- Do not invent 20px or 24px spacing tokens between the documented 15px and 32px steps [src:1].
- Do not apply heavy shadows to default cards, rows, sidebar, or topbar [src:1].
- Do not use emoji as dashboard chrome icons; use outline icons instead [src:1].
- Do not rely on border color alone for focus state [src:1].
- Do not use red backgrounds for input errors; keep error feedback in border/helper text [src:1].

## Responsive Behavior

| Breakpoint | Key Changes |
|---|---|
| Desktop | 240px sidebar, 56px topbar, 32px content gutter, 12-column grid, card gutter 24px where density allows [src:1]. |
| Compact desktop/tablet | Keep sidebar if workspace permits; reduce card grid to 2 columns and use 15px compact gutters [src:1]. |
| Mobile | Collapse sidebar into top navigation or drawer, use 15px content gutter, keep touch targets at least 36~40px high [src:1]. |

Cards and course rows must preserve scan order: thumbnail → badge/track → title → progress/price metadata. On narrow screens, metadata can wrap below the title, but it should remain visually grouped and not detach from the card footer.

## Known Gaps

- No original Figma file or production codebase was included in the handoff bundle [src:1].
- The blue-vs-red token semantics are documented as a caveat and should be confirmed by the team before production adoption [src:1].
- The dashboard default theme is not confirmed; the bundle authored light mode as default while keeping dark-mode tokens available [src:1].
- No custom icon library was included; Lucide/Heroicons-style outline icons are the documented fallback [src:1].

## References

- [src:1] Claude Design handoff bundle: https://api.anthropic.com/v1/design/h/wZ6KVUwvbzeAUM4Ji6lLjQ
- [src:2] 스파르타클럽: https://spartaclub.kr/
- [src:3] 내일배움캠프: https://nbcamp.spartaclub.kr/
- [src:4] 팀스파르타 기업교육: https://b2b.spartaclub.kr/
- [src:5] 팀스파르타 커리어: https://career.spartaclub.kr/