Design System Inspiration of Team Sparta

1. Visual Theme & Atmosphere

Team Sparta (팀스파르타) is the Seoul company behind 스파르타클럽, the online AI and IT course brand its own design team still called 스파르타코딩클럽 (Spartacodingclub) in its team introduction. Its careers site states the belief the brand is built on: "팀스파르타는 누구나 잠재력을 깨워 큰일을 낼 수 있다고 믿습니다" — it started with IT education, and says it wakes the potential of 200,000 people a year and supplies some 4,000 trained people to the job market; the same page lists selection as a 2025 예비 유니콘 (pre-unicorn) company. The current evolution is visible in the product itself: spartacodingclub.kr now redirects to spartaclub.kr, the site is titled "스파르타클럽 | AI시대, 미래를 돌파하는 힘", and the course list now centres on AI skills — ChatGPT, Claude Code, AI PPT and work automation — alongside government-funded bootcamps (내일배움캠프), camps for working people and corporate training. The footer names the operator: 팀스파르타(주), 대표자 이범규, with a 평생교육시설 (lifelong-education facility) registration, 제 661호.

The site reads like a campaign. Home opens on a 50px white Pretendard Bold headline over hero media, with the line above it in aqua #93e6f5; below sit three large, saturated course-category cards — deep red #d90b32, dark teal #0b495c and purple #8723ba — each a 16px-radius link. Section headings are 32px Pretendard Bold in near-black ink #0c0e13. The signature red #fa0030 is spent on action and emphasis: the enrolment button of the course page, the selected course tab, a full-bleed red conversion band near the foot of home, the step numerals and the Total Career Solution eyebrow. Every one of the 429 captured element records computes box-shadow: none; separation comes from colour blocks and pale grey fills.

Key Characteristics:

• Signature red #fa0030 for the primary action (수강신청하기), the selected tab, the conversion band, step numerals and eyebrows
• Pretendard throughout — Framer's named Pretendard Bold, Medium and SemiBold faces on home and the catalog, a self-hosted Pretendard on the course page — with Gmarket Sans for four statistic figures
• Near-black ink #0c0e13 for headings and dark buttons; #858793, #a4a7b0 and #41414b for supporting text
• Category colour blocks — #d90b32, #0b495c, #8723ba — on the home course cards; #0b495c also fills 기업교육 알아보기
• Compact radii for controls (4px, 6px, 8px), 16px for the category cards and a 38px pill for the enrolment button
• Flat: no shadow anywhere; grey fills #f5f6f7 and #f1f1f3 for secondary buttons

Primary tasks

• Browse the course catalog to find a class
• Check which courses are government-funded before enrolling
• Enroll in a course from its course page
• Read course reviews before you commit
• Add AI tools to your workflow after work hours
• Evaluate corporate training for your company's employees

2. Color Palette & Roles

Every token below was read on 2026-09-30 from spartaclub.kr, /catalog/scc and the course page /product/9 by the deterministic collector, with states from the fixed keyboard probe. Home and the catalog are built in Framer; the course page is a separate build on the same host with the same header links. Components are labelled with the page they came from.

Primary

• Sparta Red (#fa0030): The fill of 수강신청하기, the enrolment button of the course page (320 × 56, #ffffff label; surface-3 capture 1). It is the primary because it is the product's primary action fill; the same red marks the selected course tab (강의소개: #fa0030 label and 2px bottom border), fills the full-bleed conversion band on home, which is itself a link, and colours the red step numerals and the Total Career Solution eyebrow. The probe found no hover or pressed change on 수강신청하기.
• On Primary (#ffffff): The enrolment label, the conversion band copy and text on the category cards.

Category colours

• Category Red (#d90b32): The AI 시대 취업 캠프 card on home.
• Category Teal (#0b495c): The AI 입문 card on home and the fill of 기업교육 알아보기.
• Category Purple (#8723ba): The 직장인 스킬업 card on home.
• Headings in the numbered step section take a dark tint of the same families (#470024, #512369, #0d3440); they are prose here, not tokens.

Neutral & Surface

• Canvas (#ffffff): The home body background, catalog course cards and the 더 알아보기 chip.
• Surface (#f5f6f7): 더보기 buttons inside catalog cards.
• Surface Alt (#f1f1f3): 더 많은 질문 보기 on the course page.
• Hover Tint (#f9f9fb): The hover fill of header navigation items.
• Charcoal (#1d1e22): Dark call-to-action buttons on the catalog (발급 가이드 확인하기, 문의하기).

Text

• Ink (#0c0e13): Section headings, header navigation labels, catalog card text and the fill of 후기 자세히 보기. The course page's large h2 computes a near-identical #0d0e11.
• Slate (#41414b): Meta lines in the home review cards (and #40414b for bold copy on the course page).
• Muted (#858793): Supporting lines under home section headings; idle course tabs compute #858893.
• Faint (#a4a7b0): Footer lines, statistic labels and the top utility links (항해, 기업교육, 블로그, 고객센터).
• Coral (#ff4660): A short label at the top of each home review card.
• Hero Aqua (#93e6f5): The line above the home headline.
• On-dark Soft (#e0e1e5): Supporting lines on the dark band of home.

Not tokens

• Anchors on the Framer pages compute Chromium's default link colours (#0000ee, and #ff0000 while pressed) on the anchor element while the visible labels sit in child text elements. Those defaults are neither brand colours nor states.
• The favicon was not measured; no logo colour is claimed.

3. Typography Rules

Font Family

• Live surface use: Pretendard, in two forms. The Framer pages (home and the catalog) set text in separately named faces — Pretendard Bold (111 observed uses), Pretendard Medium (109) and Pretendard SemiBold (13) — each loaded / high; the weight lives in the face, so a Medium line can compute font-weight: 400. The course page sets Pretendard, -apple-system, … from files Team Sparta serves itself (static.spartacodingclub.kr/static/fonts/Pretendard/Pretendard-Regular.subset.woff2 and siblings; 32 uses). Gmarket Sans TTF Bold (4 uses, loaded) sets the four 48px statistic figures on home.
• Official distributed font assets: Pretendard is Kil Hyung-jin's open-source family; its LICENSE (opened 2026-09-30) reads "This Font Software is licensed under the SIL Open Font License, Version 1.1." Gmarket Sans is Gmarket's own typeface; Gmarket's font page (corp.gmarket.com/fonts) returned a page titled "G마켓 - 쇼핑을 바꾸는 쇼핑" with no licence text in its served HTML, so no licence is stated here.
• Official product use: no Team Sparta page opened this session names its typefaces; not claimed.
• Declared only (no visible use): Cafe24Ohsquare, Cafe24Surround, Dokrip, DsDigital, DungGeunMo, EBSHunminjeongeumSBA, GmarketSans, Jeju Hallasan, NanumHandWritingDaughter, Inter, Noto Sans, Pretendard Black, Pretendard ExtraBold and FontAwesome are declared by the pages with 0 observed uses.
• Not brand faces: 150 elements compute the browser default sans-serif (Framer anchors and list wrappers whose visible text is a child) and 10 course-page buttons compute Arial (the browser's default button face).

Hierarchy

Principles

• Bold is the voice: every heading from 18px to 50px is weight 700; only the hero tightens its tracking (-1px), and the eyebrow takes -0.2px.
• Weight carried by the face: on the Framer pages the named face (Bold, Medium, SemiBold) decides the visible weight, not the computed font-weight.
• One accent face: Gmarket Sans appears only on the statistic figures.

4. Component Stylings

Buttons

Enrolment button (primary)

• Background: #fa0030
• Text: #ffffff
• Radius: 38px
• Padding: 16px 20px
• Height: 56px
• Font: 15px / 700 / 22px Pretendard
• States: the probe found no hover or pressed change; focus shows only the browser's default ring
• Use: 수강신청하기 on the course page (320 × 56)

Enterprise button

• Background: #0b495c
• Text: #ffffff
• Radius: 6px
• Padding: 10px 12px
• Height: 40px
• States: no hover change; pressed changes only Chromium's default link colour; focus shows only the default ring
• Use: 기업교육 알아보기 on home

Review button

• Background: #0c0e13
• Radius: 6px
• Padding: 8px 12px
• Height: 36px
• States: hover and pressed unmeasured; focus shows only the default ring
• Use: 후기 자세히 보기 under the home review cards; the label colour was not recorded

Catalog dark button

• Background: #1d1e22
• Text: #ffffff
• Radius: 8px
• Padding: 14px 12px
• Height: 52px
• Use: 발급 가이드 확인하기 and 문의하기 on the catalog; states not measured

Grey buttons

• 더보기 in catalog cards: #f5f6f7, 8px radius, 12px 0px padding, 48px tall; states not measured
• 더 많은 질문 보기 on the course page: #f1f1f3, #000000 label, 8px radius, 48px tall, 15px / 700 Pretendard; no hover or pressed change

Learn-more chip

• Background: #ffffff
• Text: #000000
• Radius: 4px
• Padding: 8px 12px
• Height: 30px
• Use: 더 알아보기 on the course page's dark promotion panel; no hover or pressed change

Tabs & Navigation

Course tab

• Text: #858893
• Border: 2px bottom edge, transparent at rest
• Padding: 3px 0px 0px
• Height: 53px
• Font: 15px / 700 / 22px Pretendard
• Selected: #fa0030 label with a 2px #fa0030 bottom border
• States: hover and pressed unmeasured (a fixed bar covered them); focus shows only the default ring
• Use: 강의소개, 커리큘럼 and the other section tabs of the course page

Header navigation

• Text: #0c0e13
• Padding: 8px 10px
• Height: 40px
• Hover: #f9f9fb fill with a 6px radius
• Use: 전체 강의, 취업 캠프, 재직자 캠프, 커뮤니티, 수강후기 and 이벤트

Cards

Category card

• Background: #d90b32 (also #0b495c and #8723ba)
• Text: #ffffff
• Radius: 16px
• Padding: 32px 32px 48px
• Use: 373 × 460 course-category links at the top of home

Conversion band

• Background: #fa0030
• Text: #ffffff
• Padding: 80px 0px 40px
• Use: the full-bleed 1440 × 547 red band near the foot of home, one link

Catalog card

• Background: #ffffff
• Text: #0c0e13
• Radius: 8px
• Padding: 24px 18px
• Use: 371 × 399 course cards on the catalog

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of spartaclub.kr plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://spartaclub.kr/ ; https://spartaclub.kr/catalog/scc ; https://spartaclub.kr/product/9 ; https://career.spartaclub.kr/ko/home ; https://blog.career.spartaclub.kr/designer Tier 2 sources: getdesign.md/teamsparta (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=teamsparta (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

5. Layout Principles

Spacing System

• Enrolment button: 16px vertical, 20px horizontal padding at 56px height
• Small dark buttons: 8px 12px (36px) and 10px 12px (40px)
• Catalog cards: 24px 18px padding; category cards: 32px 32px 48px with a 40px gap
• Conversion band: 80px top and 40px bottom padding

Grid & Container

• Home runs a full-width hero, a row of three category cards, a numbered three-step section, statistics, review cards in a row of four, and the red band before the footer.
• The catalog lists course cards in rows of three under a monthly ranking heading.
• The course page places a tab bar (강의소개, 커리큘럼, …) and the enrolment button above long-form course content and an FAQ.

Whitespace Philosophy

• Loud blocks, quiet chrome: colour carries the sections; buttons and tabs stay small and flat.
• Flat segmentation: pale greys (#f5f6f7, #f1f1f3) and colour blocks separate content; nothing floats.

Border Radius Scale

• 0px: the default and the course tabs
• 4px: learn-more chip
• 6px: dark home buttons and hovered navigation items
• 8px: catalog cards, grey and charcoal buttons
• 16px: home category cards
• 38px: the enrolment button

6. Depth & Elevation

Shadow Philosophy: all 429 element records compute box-shadow: none. Emphasis comes from saturated fills and bold type.

7. Do's and Don'ts

Do

• Use #fa0030 for the primary action, the selected tab and the one red band
• Set headings in Pretendard at weight 700; keep supporting lines in #858793
• Use the category colours #d90b32, #0b495c and #8723ba for course categories
• Keep controls small and flat: 4px, 6px and 8px radii; a 38px pill only for enrolment
• Use Gmarket Sans only for statistic figures

Don't

• Don't add shadows; none of the 429 captured elements has one
• Don't invent hover or focus styles; the captured buttons show none of their own (the header navigation's #f9f9fb hover is the one measured exception)
• Don't render Pretendard or Gmarket Sans with another face in their place
• Don't treat Chromium's default link colours on Framer anchors as brand colours
• Don't spread the red across secondary buttons; those are ink, charcoal or grey

8. Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. The Framer stylesheet served with home declares its text presets at three ranges — 1200px and up, 820–1199px and 0–819px (for example the 32px section heading steps to 30px and then 26px); those values were read from the served CSS, not from a narrow-viewport capture.

Touch Targets

• Enrolment button: 56px
• Course tabs: 53px
• Catalog dark buttons: 52px; grey buttons: 48px
• Enterprise button and header navigation: 40px
• Review button: 36px; learn-more chip: 30px

Collapsing Strategy

• How the pages collapse was not captured.

Image Behavior

• Hero media and course imagery sit flat, without borders or shadows.

9. Agent Prompt Guide

Quick Color Reference

• Primary action, selected tab, band: #fa0030 with #ffffff
• Ink: #0c0e13; supporting text #858793, #41414b; footer #a4a7b0
• Categories: #d90b32, #0b495c, #8723ba
• Greys: #f5f6f7, #f1f1f3, hover #f9f9fb; charcoal #1d1e22

Example Component Prompts

• "Create an enrolment button: #fa0030 background, #ffffff 15px Pretendard label at weight 700 with a 22px line, 38px radius, 16px 20px padding, 56px tall, no shadow."
• "Build course section tabs: 15px Pretendard at weight 700 in #858893, 53px tall, a 2px transparent bottom border; the selected tab turns #fa0030 with a 2px #fa0030 bottom border."
• "Create a category card: #d90b32 background (or #0b495c, #8723ba), white 18px bold copy, 16px radius, 32px 32px 48px padding, 373 × 460."
• "Create a small dark button: #0c0e13 background, 6px radius, 8px 12px padding, 36px tall."

Iteration Guide

1. One red, #fa0030, for the primary action and selection
2. Pretendard 700 for every heading; Gmarket Sans only for statistics
3. Category colours for course families, never for buttons in general
4. Small radii on controls; 16px on category cards; the 38px pill is for enrolment
5. Flat everywhere

---

10. Voice & Tone

Team Sparta's voice is energetic, encouraging and plain-spoken. The positioning line "AI 시대, 미래를 돌파하는 힘" (the power to break through the future in the AI era) and the careers-site belief that anyone can wake their potential and do something big set the register: inclusive, forward-leaning, never elitist.

Voice samples (verbatim, opened 2026-09-30):

• "스파르타클럽 | AI시대, 미래를 돌파하는 힘" — spartaclub.kr page title.
• "도전하는 누구나 잠재력을 깨울 수 있도록" — the line above the home headline.
• "지금 스파르타클럽에서 / 잠재력을 깨우세요." — the red conversion band.
• "스파르타클럽 AI 강의 | 맞춤형 교육으로 AI 시대 돌파!" — catalog page title.
• "더 많은 활용법을 알고 싶다면?" — course page promotion panel.

Forbidden register: fear-based "you'll fall behind" pressure, credential gatekeeping, unexplained jargon, hype without a concrete outcome.

11. Brand Narrative

Team Sparta describes itself on its careers site as a company that believes anyone can wake their potential and do something big ("누구나 잠재력을 깨워 큰일을 낼 수 있다고 믿습니다"). It started with IT education; the same page says it now wakes the potential of 200,000 people a year and supplies some 4,000 trained people to the market, reports its 2024 operating profit and its 2025 selection as a 예비 유니콘 company, and states the aim that anyone can gain and use AI skills ("누구나 AI 역량을 갖추고 활용할 수 있도록").

The team blog's introduction of the design team — "“1명 같은 5명이 되자.” 팀스파르타 디자인팀을 소개합니다!" — describes a design team "누구나 큰일 내는 세상을 만드는 팀스파르타의" and an online part working on 스파르타코딩클럽, where government funding lets learners take courses free once they hold a 내일배움카드. It names the company's core values as 빠우성 — 빠르게, 와우하게, 진정성있게 (fast, wow, with sincerity) — says sincerity matters most to the design team, and that the team always tries to be the user's advocate ("디자인팀은 언제나 사용자의 대변인이 되려고 해요").

The product has since broadened its name and its catalog. spartacodingclub.kr redirects to spartaclub.kr; the brand on the page is 스파르타클럽; and the courses on the captured pages are AI courses — ChatGPT, Claude Code, AI PPT and automation — next to the funded 내일배움캠프, camps for working people, the 항해 programme and corporate training. The design reads the same way: loud category colour and bold Pretendard for momentum, one red for the next step, and small, flat controls around it.

12. Principles

1. Anyone can break through. The stated belief of the company. UI implication: keep entry copy plain and outcome-first; never gate the value proposition behind jargon.
2. One action, one red. UI implication: #fa0030 fills the enrolment button, marks the selected tab and paints the one conversion band; secondary actions are ink, charcoal or grey.
3. Momentum by colour, not decoration. UI implication: course families get saturated blocks (#d90b32, #0b495c, #8723ba); nothing gets a shadow.
4. Fast, wow, sincere (빠우성). The company's stated values. UI implication: flat pages, earned moments of delight and proof lines backed by numbers.
5. The design team is the user's advocate. The design team's own description. UI implication: dense catalogs stay scannable with consistent card geometry.

13. Personas

Personas below are fictional archetypes informed by publicly observable Team Sparta user segments (career-changers, working professionals up-skilling, government-funded bootcamp students, corporate training buyers), not individual people.

김도현, 27, 서울. A non-CS graduate preparing for a career change. Browses the funded 내일배움캠프 options and the AI 시대 취업 캠프 card; values copy that never assumes prior coding knowledge.

이서연, 34, 판교. A marketer adding AI tools to her work after hours through 직장인 스킬업 courses such as the ChatGPT course; likes that each course page states what she can use tomorrow.

박준호, 41, 기업 인사팀. An L&D manager evaluating 기업교육 for his company; reaches it from the teal 기업교육 알아보기 button and wants proof before committing.

14. States

Only these states were observed on the three captured pages; nothing else is specified here.

Error, empty, loading and success states were not captured and are not described.

15. Motion & Easing

The probe read the transitions the controls compute. 수강신청하기 transitions width 0.2s ease-in-out; the course tabs carry a transition of up to 300ms whose property the probe did not name; 더 많은 질문 보기, 더 알아보기, 기업교육 알아보기, 후기 자세히 보기 and the header navigation compute transition: all 0s. The Framer category cards change transform on hover, but the value and timing were not recorded. Nothing else about motion (hero media, scroll reveals) was measured; treat it as unspecified and honour prefers-reduced-motion in any build.