Design System Inspiration of Codeit

1. Visual Theme & Atmosphere

Codeit (코드잇) is Korea's micro-learning-first IT education platform, and its homepage reads like a friendly, energetic consumer product rather than a dry e-learning portal. The canvas is pure white (#ffffff) broken up by soft cool-grey (#f6f6f8) and pale violet (#f8ecff) section bands, so the page feels open and modern. Text sits in a warm near-black ink (#333236) — deliberately not pure black — which keeps the long Korean copy readable and approachable. The single saturated brand color is an electric purple (#9933ff) that the system trains the eye to read as "the action": it appears on the membership chip in the nav, the hero "무료 체험 시작하기" button, and every plan CTA, and almost nowhere else.

The typographic personality is a two-font split. The hero headline "5분마다 인생이 바뀐다" runs in Pretendard ExtraBold (weight 800) at a commanding 68px with very tight -1.5px tracking — a bold, declarative promise. Everything else — section titles, card heads, navigation, and all body copy — is set in SpoqaHanSansNeo, the warm, rounded Korean sans that gives Codeit its distinctly soft, encouraging voice. Section titles land at 48px / 32px weight 700, card heads at 28px weight 700, and body settles to a comfortable 16px weight 400 at 1.5 line-height for dense hangul reading. The result is "bold where it motivates, calm where it teaches."

What distinguishes Codeit from typical fintech-minimal Korean sites is its playful use of color and shape. Beyond the core purple it reaches for a brighter violet (#8f00ff), a deep violet text accent (#760dde), lavenders (#b363fd, #c47cfd), and even a warm pink (#ff52b7) for highlight moments, plus dark immersive bands in night (#080c14) and plum (#3d1457). Geometry is generous and rounded: cards at 20–24px radius, pill chips at full radius, and CTAs in a 6–10px-to-22px range. Depth is mostly flat — the homepage is nearly shadowless — but the subscription page lifts plan cards with a soft rgba(0,0,0,0.08) 0px 2px 14px shadow and the recommended (lavender #b363fd) card with a stronger rgba(0,0,0,0.2) 0px 4px 24px. Supporting tints — violet #f3e1fd cards and pink #ffebf7 blocks — keep the palette warm and friendly.

Key Characteristics:

• Single saturated purple (#9933ff) reserved almost entirely for the primary CTA / action
• Warm near-black ink (#333236) for text instead of pure black
• Two-font split: Pretendard ExtraBold (800) for the hero, SpoqaHanSansNeo for everything else
• Tight negative tracking on display type (-1.5px at 68px, -1px at 48px)
• Rounded, friendly geometry — 20–24px cards, pill chips, 6–10px CTAs
• Mostly flat depth; soft shadows appear only on plan cards
• A wide, playful violet-to-pink accent family (#8f00ff, #760dde, #b363fd, #c47cfd, #ff52b7)
• Dark immersive bands in night (#080c14) and plum (#3d1457) for feature storytelling

2. Color Palette & Roles

Primary & Accent

• Codeit Purple (#9933ff): The single dominant brand and action color. Every primary CTA — the nav "멤버십 안내" chip, the hero "무료 체험 시작하기", plan "멤버십 시작하기" — uses this electric purple.
• Bright Violet (#8f00ff): A more saturated violet used on the subscription surface for emphasis accents and price highlights.
• Deep Violet (#760dde): A darker violet for active / pressed link text and emphasis labels on light backgrounds.
• Lavender (#b363fd): The fill of the highlighted / recommended membership card.
• Soft Lavender (#c47cfd): A lighter lavender for decorative tints, gradient stops, and secondary accents.
• Pink (#ff52b7): A warm pink accent used sparingly for playful highlights and tags.

Ink & Dark

• Ink (#333236): The signature warm near-black for all body text and most headings — never pure black.
• Night (#080c14): The darkest section background for immersive dark feature bands.
• Plum (#3d1457): A deep purple card / section background for premium dark-on-violet moments.

Surface & Neutral

• Canvas (#ffffff): The default page and card background.
• Surface (#f6f6f8): A cool, barely-there grey for segmented sections, the search field, and neutral buttons.
• Violet Surface (#f8ecff): A pale violet tint for soft branded section bands.
• Violet Tint (#f3e1fd): A slightly deeper violet tint for cards sitting on violet sections.
• Pink Surface (#ffebf7): A pale pink tint for warm highlight blocks.
• On Primary (#ffffff): Text and icons on the purple CTA.

3. Typography Rules

Font Family

• Display: Pretendard — used for the hero H1 at ExtraBold (800). High-impact, declarative.
• Text: SpoqaHanSansNeo (with Apple SD Gothic Neo, Noto Sans KR fallbacks) — the workhorse for section titles, card heads, navigation, buttons, and all body copy. Bold (700) for headings, Regular (400) for body, Medium (500) for nav and buttons.

Hierarchy

Principles

• Hero is Pretendard, the rest is Spoqa: the only place Pretendard appears is the 68px ExtraBold hero; switching back to SpoqaHanSansNeo everywhere else keeps the system warm and consistent.
• Bold display, regular body: headings are weight 700–800; body is a quiet 400. Weight contrast carries the hierarchy.
• Tracking tightens with size: -1.5px at 68px, -1px at 48px, -0.3px on mid headings; body stays at normal tracking.
• Hangul-comfortable body: 16px / 1.5 line-height gives Korean paragraphs room to breathe inside content-dense lesson layouts.

4. Component Stylings

Buttons

Primary CTA (Hero)

• Background: #9933ff
• Text: #ffffff
• Radius: 10px
• Padding: 10px 32px
• Height: 48px
• Font: 18px SpoqaHanSansNeo weight 700
• Use: Hero / page primary CTA ("무료 체험 시작하기", "멤버십 시작하기")

Membership Chip (Nav)

• Background: #9933ff
• Text: #ffffff
• Radius: 6px
• Padding: 6px 12px 5px
• Height: 32px
• Font: 13px SpoqaHanSansNeo weight 500
• Use: Compact purple chip in the top nav ("멤버십 안내")

Pill CTA

• Background: #9933ff
• Text: #ffffff
• Radius: 22px
• Padding: 8px 16px
• Height: 43px
• Font: 16px SpoqaHanSansNeo weight 500
• Use: Rounded inline CTA inside feature sections ("지원 기기")

Ghost / Outline

• Text: #333236
• Radius: 8px
• Padding: 8px 24px
• Height: 45px
• Border: 1px solid rgba(51,50,54,0.2)
• Font: 16px SpoqaHanSansNeo weight 500
• Use: Secondary outline CTA ("모든 IT 강의 보러가기", "전체 후기 보기")

Neutral (Surface)

• Background: #f6f6f8
• Text: #333236
• Radius: 8px
• Padding: 14px 0px
• Height: 55px
• Font: 16px SpoqaHanSansNeo weight 400
• Use: Full-width neutral action on grey surface ("이메일로 로그인하기")

Inputs & Forms

Course Search

• Background: #f6f6f8
• Text: #333236
• Radius: 21px
• Padding: 8px 16px
• Height: 40px
• Font: 14px SpoqaHanSansNeo
• Use: Pill-shaped search field on the explore page ("어떤 강의를 찾고 있나요?")

Cards & Containers

Membership Plan Card

• Background: #ffffff
• Radius: 24px
• Border: 2px solid rgba(51,50,54,0.1)
• Shadow: rgba(0,0,0,0.08) 0px 2px 14px
• Use: Standard plan card on the subscription page

Recommended Plan Card

• Background: #b363fd
• Text: #ffffff
• Radius: 24px
• Shadow: rgba(0,0,0,0.2) 0px 4px 24px
• Use: Featured / recommended plan, lifted and color-filled

Course Card

• Background: #ffffff
• Radius: 20px
• Border: 1px solid rgba(51,50,54,0.15)
• Use: Course card on the explore grid (flat, hairline outline)

Badges

Count Badge

• Background: #9933ff
• Text: #ffffff
• Radius: 6px
• Padding: 0px 6px
• Height: 28px
• Font: 15px SpoqaHanSansNeo weight 500
• Use: Cart / notification counter

Navigation

• Background: #ffffff
• Text: #333236
• Font: 13px SpoqaHanSansNeo weight 500
• Inactive: #333236 at ~80% opacity
• Active: solid #333236 label (explore category tabs)
• Use: Top horizontal nav ("부트캠프", "기업교육", "커뮤니티", "수강 후기") and explore category tabs

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 4 surfaces) Tier 1 sources: https://www.codeit.kr (homepage, /subscription, /explore, /signin — live computed styles); https://tech.codeit.kr (Codeit official engineering blog — brand-owned); https://about.codeit.com/ko/ (Codeit official company intro — brand-owned) Tier 2 sources: getdesign.md/codeit — directory placeholder, no Codeit-specific data; styles.refero.design — not listed (searched "codeit", no match) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
• Notable: CTA padding clusters at 8px 24px (outline) and 10px 32px (primary); card padding runs 24px 32px

Grid & Container

• Centered single-column hero anchored by the 68px Pretendard headline
• Feature sections alternate full-width white (#ffffff), cool-grey (#f6f6f8), and pale-violet (#f8ecff) bands
• Subscription page uses a 2–3 column plan-card grid with one lifted, color-filled recommended card
• Explore page uses a responsive course-card grid with a pill search field and text category tabs

Whitespace Philosophy

• Open and friendly: generous vertical rhythm between sections; the page never feels cramped despite long Korean copy.
• Color-banded segmentation: sections separate by background color (white / #f6f6f8 / #f8ecff), not by heavy borders.
• Rounded rhythm: the repeated 20–24px card radius and full-pill chips create a soft, consistent cadence.

Border Radius Scale

• Small (6px): nav chips, count badges
• Medium (8px–10px): standard buttons, neutral actions
• Base (12px): inner containers
• Large (20px): course cards
• XL (24px): membership plan cards
• Pill (22px / full): rounded CTAs, search field, carousel controls

6. Depth & Elevation

Shadow Philosophy: Codeit is mostly flat. The marketing homepage is effectively shadowless — separation comes from white / grey / violet color bands and rounded shapes. Elevation is introduced deliberately and only where hierarchy demands it: on the subscription page, standard plan cards get a soft rgba(0,0,0,0.08) 0px 2px 14px lift, and the single recommended plan — filled with lavender #b363fd — gets a stronger rgba(0,0,0,0.2) 0px 4px 24px so it visibly floats above its neighbors. Emphasis is carried by color (the purple CTA, the lavender card) far more than by shadow.

7. Do's and Don'ts

Do

• Reserve purple (#9933ff) for the primary CTA / action — keep it the single "do this" color
• Use Pretendard ExtraBold (800) for the hero headline and SpoqaHanSansNeo for everything else
• Use warm near-black ink (#333236) for text instead of pure black
• Separate sections with color bands (#ffffff, #f6f6f8, #f8ecff), not heavy borders
• Keep geometry rounded — 20–24px cards, pill chips, 6–10px CTAs
• Lift only the recommended plan card; keep the rest flat
• Apply tight negative tracking on display type (-1.5px at 68px)
• Use the lavender (#b363fd) fill to mark the featured plan

Don't

• Don't spread purple across many elements — it dilutes the single-action signal
• Don't use pure black for body text — use ink #333236
• Don't set the hero in SpoqaHanSansNeo — Pretendard owns the 68px display moment
• Don't add drop shadows to the marketing homepage — it's a flat, color-banded system
• Don't use sharp / square corners on cards or chips — everything is rounded
• Don't introduce a second saturated hue as a CTA color — purple is the action color
• Don't use positive letter-spacing on headlines — Codeit tracks tight
• Don't overload accent colors (#8f00ff, #760dde, #c47cfd, #ff52b7) onto interactive controls — they are decorative

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 48px height, full-padded for an unmistakable target
• Outline / neutral buttons at 45–55px height
• Pill search field at 40px height with 8px 16px padding
• Nav chips comfortably tappable within the header

Collapsing Strategy

• Hero: 68px Pretendard headline scales down on mobile, weight 800 maintained
• Plan-card grid: 3-up → 2-up → stacked single column
• Course grid: responsive wrap; category tabs become a horizontal scroll
• Color-banded sections maintain full-width treatment across breakpoints

Image Behavior

• Feature illustrations and course thumbnails keep their rounded (20–24px) corners at all sizes
• Dark feature bands (#080c14, #3d1457) maintain full-width treatment

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Codeit Purple (#9933ff)
• Emphasis violet: Bright Violet (#8f00ff), Deep Violet (#760dde)
• Featured card fill: Lavender (#b363fd)
• Text / headings: Ink (#333236)
• Background: Canvas (#ffffff)
• Tinted surfaces: Surface (#f6f6f8), Violet Surface (#f8ecff), Pink Surface (#ffebf7)
• Dark bands: Night (#080c14), Plum (#3d1457)
• Decorative accents: Soft Lavender (#c47cfd), Pink (#ff52b7)

Example Component Prompts

• "Create a hero on white background. Headline at 68px Pretendard weight 800, line-height 1.21, letter-spacing -1.5px, color #333236. One purple CTA: #9933ff background, #ffffff text, 10px radius, 10px 32px padding, 18px SpoqaHanSansNeo weight 700 — '무료 체험 시작하기'."
• "Design a membership plan grid: standard cards white #ffffff, 24px radius, 2px solid rgba(51,50,54,0.1) border, soft shadow rgba(0,0,0,0.08) 0px 2px 14px. The recommended card fills lavender #b363fd with white text, 24px radius, and a stronger rgba(0,0,0,0.2) 0px 4px 24px shadow so it floats."
• "Build a course explore page: pill search field #f6f6f8, 21px radius, 8px 16px padding, 14px SpoqaHanSansNeo, placeholder '어떤 강의를 찾고 있나요?'. Course cards white #ffffff, 20px radius, 1px solid rgba(51,50,54,0.15) border, no shadow. Text category tabs in #333236, active solid."
• "Create the top nav: white header, 13px SpoqaHanSansNeo weight 500 links in #333236, a purple #9933ff membership chip (6px radius, 6px 12px padding) right-aligned."

Iteration Guide

1. Purple #9933ff is the single action color — don't spread it
2. Hero is Pretendard 800; everything else is SpoqaHanSansNeo
3. Text is ink #333236, never pure black
4. Rounded geometry throughout — 20–24px cards, pill chips, 6–10px CTAs
5. Flat by default; lift only the recommended plan card
6. Negative tracking on headlines, normal on body
7. Use color bands (#f6f6f8, #f8ecff) to segment sections

---

10. Voice & Tone

Codeit's voice is warm, motivating, and plain-spoken — an encouraging coach who turns "learning to code" from an intimidating commitment into a series of small, winnable five-minute steps. The hero line "5분마다 인생이 바뀐다" ("Your life changes every 5 minutes") sets the register: aspirational but concrete, energetic without hype. Copy speaks directly to the learner ("당신을 도와줄"), frames effort as bite-sized and repeatable, and leans on micro-learning, habit, and gamified progress rather than fear of falling behind.

Voice samples (verbatim from live surfaces, verified 2026-06-26):

• "5분마다 인생이 바뀐다" — hero H1 and page title (mission-framed promise).
• "20분 이상 영상만 보는 지루한 학습은 그만" — feature heading (anti-boredom positioning).
• "전문가 20인의 노하우로 탄생한 가장 완벽한 5분" — section heading (credibility + micro-learning).
• "1초 만에 당신을 도와줄 AI GURU" — AI feature heading.
• "코드잇 멤버십 구독" — subscription page H1.

Forbidden register: fear-based "you're falling behind" urgency, undefined jargon left unexplained, hype-heavy superlatives, and any tone that makes a beginner feel judged.

11. Brand Narrative

Codeit (코드잇) is a Korean EdTech company operating an online IT-education platform centered on a distinctive idea: that meaningful learning happens in short, repeatable cycles rather than marathon video sessions. Its homepage promise — "5분마다 인생이 바뀐다" and a "5분 학습 사이클" built from short lessons, hands-on practice (실습), and quizzes — reframes coding education around micro-learning, retention, and habit rather than passive watching.

The platform spans self-paced courses (the explore catalog across 입문/데이터/웹/디자인/프로그래밍/AI/비즈니스 tracks), a membership subscription, career-track bootcamps (운영 via sprint.codeit.kr), corporate training (기업교육), and government-subsidized lifelong-education vouchers (평생교육이용권). More recently Codeit has layered AI into the product — the "AI GURU" tutor that answers learner questions instantly — alongside gamified progress systems (페이스 메이커, 레벨업 시스템, 월별 챌린지) designed to keep learners coming back.

What Codeit refuses, visible in its design: the dry, text-heavy chrome of legacy LMS portals and the fear-driven urgency of cram-style 학원 marketing. What it embraces: a friendly white-and-purple consumer aesthetic, a single trustworthy action color, bold Pretendard headlines that motivate, and warm SpoqaHanSansNeo copy that explains. The brand positions learning as approachable, habitual, and even fun — "개발도 게임처럼."

12. Principles

1. Small steps, real progress. The five-minute cycle is the product thesis. UI implication: keep units short and self-contained; make "start now" the easiest possible action with one purple CTA.
2. One action, one color. Purple (#9933ff) means "do this." UI implication: reserve the saturated purple for the primary CTA so the next step is never ambiguous.
3. Motivate, don't intimidate. Coding is framed as approachable and game-like. UI implication: warm ink text, rounded shapes, encouraging copy; no fear-based urgency.
4. Bold where it persuades, calm where it teaches. UI implication: Pretendard ExtraBold for the hero promise; quiet SpoqaHanSansNeo 400 for lesson and feature content.
5. Flat and friendly. Color and shape carry hierarchy, not heavy elevation. UI implication: segment with color bands and rounded cards; reserve shadow for the one card that must stand out.

13. Personas

Personas below are fictional archetypes informed by publicly observable Codeit user segments (Korean career-changers, university students, working professionals upskilling), not individual people.

정민재, 26, 서울. A non-CS graduate preparing for a developer career change. Likes that lessons are five minutes each, so he can study on the subway without losing the thread. Chose Codeit because the free trial let him start in one tap, with no sales call.

한소연, 31, 경기. A marketer learning data analysis to grow into a PM role. Uses the explore catalog to pick a 데이터 track and the AI GURU when she gets stuck. Values that the tone never makes her feel behind for being a beginner.

오준혁, 23, 부산. A university student using the membership subscription and monthly challenges (월별 챌린지) to stay consistent. The level-up system and pace maker keep him studying like a game rather than a chore.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is friendly but restrained — consistent with the flat, rounded aesthetic. Purple CTAs and pill chips respond to press with a subtle scale / opacity shift; course and plan cards fade-in from below at motion-standard / ease-enter. The gamified surfaces (level-up, challenges) may use a single celebratory pop on milestone completion, but routine navigation stays calm. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.