Design tokens (YAML front matter)

name: Codeit
colors:
  primary: '#9933ff'
  on-primary: '#ffffff'
  ink: '#333236'
  muted: '#888893'
  violet-deep: '#760dde'
  lavender: '#b363fd'
  lilac: '#c47cfd'
  violet-mid: '#a64eff'
  label-ink: '#fbf5ff'
  white: '#ffffff'
  surface: '#f6f6f8'
  hairline: '#e5e5ea'
  border: '#dddee4'
  plum: '#3d1457'
  butter: '#fff3bc'
typography:
  hero:
    fontSize: 68px
    fontWeight: 800
    lineHeight: 1.21
    letterSpacing: '-1.5px'
    use: 'Home hero headline (5분마다 인생이 바뀐다), Pretendard ExtraBold, 82px line, in #333236; the only Pretendard text on the captured pages'
  membership-title:
    fontSize: 68px
    fontWeight: 700
    lineHeight: 1.24
    letterSpacing: '-1.5px'
    use: Membership page headline (코드잇 멤버십 구독), SpoqaHanSansNeo Bold, 84px line
  section-lg:
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.29
    letterSpacing: '-1px'
    use: Large section headings on home (value, AI GURU, goal and up-selling sections), 62px line
  section:
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.38
    letterSpacing: '-0.3px'
    use: The five-minute cycle heading on home, white over its dark band, 44px line
  title:
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: '-0.3px'
    use: Feature and card headings on home, the hero subtitle above the headline, and the topic list title on /explore, 40px line
  card-title:
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.67
    letterSpacing: '-0.3px'
    use: Learner story card titles on home, 30px line
  button-lg:
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: '-0.3px'
    use: Hero 무료 체험 시작하기 label, 28px line
  button:
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.69
    letterSpacing: '-0.3px'
    use: Plan and secondary action labels (멤버십 시작하기, 모든 IT 강의 보러가기), 27px line
  feature:
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.69
    letterSpacing: '-0.3px'
    use: Feature rows in the membership comparison on /subscription, 27px line
  body:
    fontSize: 16px
    fontWeight: 400
    letterSpacing: '-0.3px'
    use: 'Document default on all three pages, SpoqaHanSansNeo in #333236; line height computes normal'
  nav:
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.67
    letterSpacing: '-0.3px'
    use: Header 모든 강의 category menu, 25px line, label at 80% ink
  label:
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.67
    letterSpacing: '-0.3px'
    use: Rounded feature labels on home, 25px line
  caption:
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.71
    letterSpacing: '-0.3px'
    use: Legend lines of the five-minute cycle chart on home, 24px line
  button-sm:
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.62
    letterSpacing: '-0.3px'
    use: Header 멤버십 안내 label, 21px line (weight 700 on /subscription)
rounded:
  sm: 6px
  md: 8px
  cta: 10px
  card: 16px
  lg: 20px
  tab: 22px
  plan: 24px
  tile: 28px
  label: 32px
  round: 9990px
spacing:
  cta-y: 10
  cta-x: 32
  button-y: 8
  button-x: 24
  tab-y: 8
  tab-x: 16
  card: 20
  plan-y: 32
  plan-x: 40
components:
  hero-cta:
    type: button
    backgroundColor: '#9933ff'
    textColor: '#ffffff'
    rounded: 10px
    padding: 10px 32px
    height: 48px
    typography: 18px / 700 / 28px SpoqaHanSansNeo, letter-spacing -0.3px
    shadow: rgba(0, 0, 0, 0.12) 0px 2px 18px 0px
    states: 'probe on home: hover and pressed change only the opacity of two pseudo-element layers (::before 1 -> 0, ::after 0 -> 1) over a 300ms transition; the layers'' colours were not recorded, so no hover colour is declared; focus (Tab #46) draws only the browser''s default ring'
    use: 무료 체험 시작하기 under the home hero at home::[data-omd-capture="45"], a 400 x 48 button inside its link
    focus: no visible change (measured 2026-10-16) on :focus-visible
  header-membership-button:
    type: button
    backgroundColor: '#9933ff'
    textColor: '#ffffff'
    rounded: 6px
    padding: 6px 12px 5px
    height: 32px
    typography: 13px / 500 / 21px SpoqaHanSansNeo (700 on /subscription)
    states: 'not declared: the bundle''s hover, pressed and focus frames read #982eff on /explore but #9933ff on /subscription, so they are not settled; the probe did not find the control on two loads'
    use: 멤버십 안내 in the header of all three pages at home::[data-omd-capture="16"], 85 x 32
  plan-cta:
    type: button
    backgroundColor: '#9933ff'
    textColor: '#ffffff'
    rounded: 8px
    padding: 8px 24px
    height: 45px
    typography: 16px / 500 / 27px SpoqaHanSansNeo
    states: 'not measured on the button itself: the probe matched the surrounding plan-card link for 멤버십 시작하기, and that card lifts 8px on hover and pressed; no hover colour is declared for the button'
    use: 멤버십 시작하기 inside the 6-month plan card on /subscription at surface-3::[data-omd-capture="24"], 352 x 45
  secondary-button:
    type: button
    backgroundColor: rgba(255, 255, 255, 0.4)
    textColor: rgba(51, 50, 54, 0.8)
    border: 1px solid rgba(51, 50, 54, 0.2)
    rounded: 8px
    padding: 8px 24px
    height: 45px
    typography: 16px / 500 / 27px SpoqaHanSansNeo
    hover: 'bg rgba(51, 50, 54, 0.05), label #333236'
    pressed: 'bg rgba(51, 50, 54, 0.05), label #333236'
    states: 'probe on home: hover and pressed settle on a 5% ink wash and full-strength ink after a 300ms transition; focus (Tab #31) draws only the browser''s default ring'
    use: 모든 IT 강의 보러가기 under the category tiles on home at home::[data-omd-capture="31"], 189 x 45
  category-dropdown:
    type: button
    textColor: rgba(51, 50, 54, 0.8)
    rounded: 8px
    padding: 4px 8px
    height: 33px
    typography: 15px / 500 / 25px SpoqaHanSansNeo
    states: 'rest only: the bundle hover and pressed frames differ from rest only between two fully transparent fills, and the control was not probed; no state value is declared'
    use: 모든 강의 category menu in the header at home::[data-omd-capture="7"], 97 x 33, transparent fill
  playground-tab:
    type: tab
    textColor: rgba(51, 50, 54, 0.6)
    rounded: 22px
    padding: 8px 16px
    height: 43px
    typography: 16px / 500 / 27px SpoqaHanSansNeo
    selected: 'bg #9933ff, fg #ffffff'
    states: 'probe on home: neither the selected nor the unselected tab changes on hover, pressed or focus (Tabs #34 and #35); transition all 0s'
    use: Playground section tabs on home (수강 환경, 지원 기기) at home::[data-omd-capture="33"], 93 x 43, on a white 30px-radius track
  icon-button:
    type: button
    backgroundColor: '#ffffff'
    rounded: 9990px
    padding: 8px
    size: 44px x 44px
    shadow: rgba(51, 50, 54, 0.15) 0px 0px 0px 1px inset
    states: 'rest only: no state frame was recorded and the control was not probed'
    use: Round previous and next buttons of the playground section on home at home::[data-omd-capture="35"]
  search-input:
    type: input
    backgroundColor: '#f6f6f8'
    border: '1px solid #dddee4'
    rounded: 20px
    padding: 8px 16px 6px 45px
    height: 40px
    typography: 14px / 400 SpoqaHanSansNeo
    states: 'rest only: no state frame was recorded and the field was not probed or focused'
    use: Search field above the topic list on /explore at surface-2::[data-omd-capture="72"], 206 x 40
  topic-card:
    type: card
    backgroundColor: '#ffffff'
    border: '1px solid #e5e5ea'
    rounded: 16px
    padding: 20px
    size: 320px x 146px
    use: Course topic cards in the curated rows of /explore (28 instances)
  case-card:
    type: card
    backgroundColor: '#ffffff'
    rounded: 16px
    size: 362px x 304px
    use: Learner story cards on home (for example 개발도 게임처럼! 구글 개발자가 됐어요) at home::[data-omd-capture="37"]
  review-card:
    type: card
    backgroundColor: '#ffffff'
    rounded: 20px
    padding: 32px
    size: 356px x 360px
    use: Learner review cards on /subscription (32 instances)
  category-card:
    type: card
    backgroundColor: '#f6f6f8'
    rounded: 28px
    size: 116px x 144px
    shadow: rgba(51, 50, 54, 0.05) 0px 0px 0px 1px inset
    use: Category tiles under the home hero (코딩 기초 and the other tracks)
  subscription-card:
    type: card
    backgroundColor: '#ffffff'
    border: 2px solid rgba(51, 50, 54, 0.1)
    rounded: 24px
    padding: 32px 40px
    size: 432px x 528px
    shadow: rgba(0, 0, 0, 0.08) 0px 2px 14px 0px
    hover: translateY(-8px)
    pressed: translateY(-8px)
    states: 'probe on /subscription: hover and pressed lift the card 8px after a 300ms transition; focus (Tab #22) draws only the browser''s default ring'
    use: 6-month plan card on /subscription
  recommended-plan-frame:
    type: card
    backgroundColor: '#b363fd'
    border: '2px solid #b363fd'
    rounded: 24px
    size: 440px x 572px
    shadow: rgba(0, 0, 0, 0.2) 0px 4px 24px 0px
    use: Lavender frame around the annual plan card on /subscription; the white card inside it keeps 24px top corners
  feature-label:
    type: badge
    backgroundColor: '#9933ff'
    textColor: '#fbf5ff'
    rounded: 32px
    padding: 0px 12px
    height: 32px
    typography: 15px / 700 / 25px SpoqaHanSansNeo
    use: 'Rounded labels on the feature cards on home; the three labels fill #c47cfd, #a64eff and #9933ff'
  upselling-card:
    type: card
    rounded: 20px
    padding: 24px 32px
    size: 400px x 406px
    use: 'Up-selling cards at the foot of home, filled #fff3bc and #3d1457, at home::[data-omd-capture="42"] and [data-omd-capture="43"]'
fonts:
  roles:
    display: Pretendard
    body: SpoqaHanSansNeo

Design System Inspiration of Codeit

Overview

Visual Theme & Atmosphere

Codeit (코드잇, legal name 주식회사 코드잇, based at 청계천로 100 in Seoul’s Jung-gu) is a Korean education company whose core product is an online IT-learning platform built on courses it produces itself. Its recruiting site states the vision as “배움의 기쁨을 세상 모두에게” (the joy of learning, for everyone) and describes a company that grew into a leading Korean edtech brand on its own content and platform, and is now repositioning itself as an AI “talent infrastructure” company that connects learning to hiring. Around the 코드잇 멤버십 learning platform, the same page lists 코드잇 스프린트 (a job-focused bootcamp), 코드잇 어센트 (AI mock interviews that link bootcamp graduates to employers), 코드잇 팀즈 (training for companies) and 케이드 (an AI interview and applicant-tracking service). It counts 700,000 learners, about 20 large corporations and 2,000 smaller companies as customers. The same page’s press list tracks recent moves: the GPT-4-based GURU AI learning assistant, a Pre-IPO round, a KOSDAQ preliminary filing and the acquisition of the HR-software company 왓타임.

On codeit.kr the brand reads as a friendly consumer product rather than a course portal. The home hero states “5분마다 인생이 바뀐다” (your life changes every five minutes) in Pretendard ExtraBold at 68px with -1.5px tracking, the only Pretendard text on the three captured pages. Everything else is SpoqaHanSansNeo, with -0.3px tracking on every text element: 48px and 28px bold headings, 16px body, and labels at 13–18px. Text is a warm near-black #333236, never pure black, and quieter labels are the same ink at 80% or 60% opacity. One saturated purple, #9933ff, marks the action on every page: the header’s 멤버십 안내, the hero’s 무료 체험 시작하기, the selected playground tab and the plan card’s 멤버십 시작하기. Around it the pages use lavender and lilac (#b363fd, #c47cfd, #a64eff) in labels and the recommended plan frame, grey #f6f6f8 tiles, and rounded geometry from 6px buttons to 28px tiles.

Key Characteristics:

One action colour: #9933ff fills the header, hero, tab and plan calls to action, with #ffffff labels
A two-face split: Pretendard ExtraBold 800 only for the home hero; SpoqaHanSansNeo for everything else, including the 68px membership headline in Bold 700
Warm ink #333236 for text and headings, stepped down by opacity (80%, 60%) rather than by extra greys
A violet family around the primary: #760dde emphasis text, #b363fd recommended-plan frame, #c47cfd and #a64eff label fills
Rounded, soft geometry: 6 / 8 / 10px buttons, 16 / 20 / 24px cards, 22px tabs, 28px tiles, 32px labels
Mostly flat, with a few soft lifts: a faint shadow under the hero call to action and the plan cards, and 1px inset rings instead of borders on tiles and round buttons

Primary tasks

Search the explore catalog for a course to take
Work through a five-minute lesson, practice, and quiz
Start the free trial in one tap, without a sales call
Ask the GURU AI learning assistant when a lesson gets confusing
Compare membership plans and pick the recommended one

Brand Narrative

Codeit (코드잇) runs its business from Seoul (주식회사 코드잇, co-CEOs 강영훈 and 이윤수, per the site footer). Its thesis is that learning sticks in short, repeatable cycles rather than long video sessions. The home page promises that “5분마다 인생이 바뀐다” and frames study as a “5분 학습 사이클” of short lessons, practice and quizzes. The recruiting site describes Codeit as a company that grew into a leading Korean edtech brand on self-produced content and its own learning platform, and uses its learning data and AI to give individuals personalised learning and give companies hiring and HR tools, “교육부터 채용까지” (from education to hiring).

The brand now spans several businesses. 코드잇 멤버십 is the self-paced platform with its own courses in programming, AI engineering and design. 코드잇 스프린트 is a job-focused bootcamp. 코드잇 어센트 offers AI mock interviews and links graduates to employers. 코드잇 팀즈 trains companies’ staff (codeit.kr/teams, “코드잇 기업교육”). 케이드 is an HR-tech service that grew from AI interviews into applicant tracking and sourcing. The press items Codeit lists on its own recruiting page include the launch of the GPT-4-based GURU AI assistant, a new premium course brand called 텐엑스, the 어센트 launch, the acquisition of 왓타임 (maker of 라운드HR), a Pre-IPO round of 9.8 billion won and a KOSDAQ preliminary filing, and third place overall in JobPlanet’s 2024 best workplaces.

The design choices follow from that consumer-learning stance. The site uses one purple for “start now”, warm ink instead of black, rounded tiles and cards, and a single bold Pretendard promise over quieter SpoqaHanSansNeo text. It reads more like an approachable app than a learning-management portal.

Principles

Small steps, real progress. The five-minute cycle is the product thesis. UI implication: keep units short and make “start now” the easiest action, with one purple call to action.
One action, one colour. #9933ff means “do this” and marks the selected tab. UI implication: secondary actions stay translucent white with ink labels.
Motivate, don’t intimidate. UI implication: warm #333236 ink, rounded shapes and encouraging copy; no fear-based urgency.
Bold where it persuades, calm where it teaches. UI implication: Pretendard ExtraBold for the one hero promise; SpoqaHanSansNeo 400–500 for lesson, catalog and plan content.
Flat and friendly. UI implication: faint inset rings and tinted tiles carry grouping; only the hero action and plan cards are lifted.

Personas

Personas below are fictional archetypes informed by publicly observable Codeit user segments (career changers, students, 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. Chose Codeit because the free trial let him start in one tap.

한소연, 31, 경기. A marketer learning data analysis to move into a PM role. Uses the explore catalog to pick a data track and asks the AI assistant when she gets stuck. Values that the tone never makes her feel behind.

오준혁, 23, 부산. A university student on the membership who uses its challenges and progress features to stay consistent. Compared the 6-month and annual plans on the subscription page before choosing.

Colors

Every token below was read on 2026-09-30 from codeit.kr, /explore and /subscription by the deterministic collector; state values come from the fixed keyboard probe. The tokens describe Codeit’s public website. The classroom behind sign-in was not captured, and none of its values is claimed.

Primary

Codeit Purple (#9933ff): The fill of every primary action on the captured pages: 멤버십 안내 in the header of all three pages (85 × 32), 무료 체험 시작하기 under the home hero (400 × 48), the selected playground tab 지원 기기, and 멤버십 시작하기 in the plan card on /subscription (352 × 45). It is the primary because it is the colour the product uses for the action it asks for (start the trial, start the membership) and for the selected state; no other colour fills an action. One of the three feature labels on home also uses it.
On Primary (#ffffff): Labels on the purple actions.

Violet family

Deep Violet (#760dde): An emphasis line in the benefit section of /subscription (18px bold text).
Lavender (#b363fd): The 2px frame and fill around the recommended annual plan on /subscription.
Lilac (#c47cfd) and Mid Violet (#a64eff): Fills of two of the three feature labels on home. Lilac is also the colour of one legend line in the five-minute cycle chart.
Label Ink (#fbf5ff): Text on the feature labels.

Neutral & Surface

White (#ffffff): The page background (the body computes #ffffff on all three pages), cards and round icon buttons.
Surface (#f6f6f8): Category tiles on home and the search field on /explore.
Hairline (#e5e5ea): The 1px border of the topic cards on /explore.
Border (#dddee4): The 1px border of the search field and the round play buttons on /explore.

Text

Ink (#333236): The document text colour on all three pages and every heading. Secondary labels use the same ink at reduced opacity (rgba(51, 50, 54, 0.8) in the header menu and secondary button, rgba(51, 50, 54, 0.6) on unselected tabs).
Muted (#888893): Legend text of the five-minute cycle chart on home and the numbered labels on /subscription.

Feature fills

Butter (#fff3bc) and Plum (#3d1457): The two up-selling cards at the foot of home, each 400 × 406 with a 20px radius. Headings on the plum card are white.

Brand assets, not tokens

The Codeit logo was not measured; no logo colour is claimed.
Codeit’s recruiting site (careers.codeit.com) declares its own violet primary variable. That site is a separate evidence domain, and none of its values is used here.

Typography

Font Family

Live surface use: SpoqaHanSansNeo (1,233 observed uses; body, headings, buttons, inputs, cards) and Pretendard (the home hero only), both loaded / high. Codeit serves both itself from codeit-static.codeit.com/font/ (for example SpoqaHanSansNeo-Regular.woff2 and Pretendard-Regular.woff2). The body computes SpoqaHanSansNeo, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif on all three pages.
Official distributed font assets: Spoqa Han Sans Neo is Spoqa’s open-source Korean typeface. Its LICENSE reads “Copyright © 2020-11-30 Spoqa (spoqa.com), with Reserved Font Name Spoqa Han Sans Neo. This Font Software is licensed under the SIL Open Font License, Version 1.1.” Pretendard is by Kil Hyung-jin (orioncactus) and is also under the SIL Open Font License 1.1. Both licence files were opened on 2026-09-30. The identification rests on the declared family names; the name tables of Codeit’s served files were not inspected.
Official product use: no Codeit page opened this session names its typefaces, so no statement of official product use is made.
Declared only (no visible use): Cafe24Danjunghae and paybooc (loaded from the noonfonts CDN), Menlo and Rec Mono Linear (code faces from codeit-static.codeit.com), and the KaTeX_* math faces. All are declared with 0 observed uses on these pages.
Unresolved: none of the observed families is unidentified.

Hierarchy

Role	Font	Size	Weight	Line Height	Tracking	Observed on
Hero	Pretendard	68px	800	82px (1.21)	-1.5px	Home hero headline
Membership Title	SpoqaHanSansNeo	68px	700	84px (1.24)	-1.5px	/subscription headline
Section Large	SpoqaHanSansNeo	48px	700	62px (1.29)	-1px	Home section headings
Section	SpoqaHanSansNeo	32px	700	44px (1.38)	-0.3px	Five-minute cycle heading
Title	SpoqaHanSansNeo	28px	700	40px (1.43)	-0.3px	Feature headings, /explore list title
Card Title	SpoqaHanSansNeo	18px	700	30px (1.67)	-0.3px	Learner story cards
Button Large	SpoqaHanSansNeo	18px	700	28px (1.56)	-0.3px	Hero call to action
Button	SpoqaHanSansNeo	16px	500	27px (1.69)	-0.3px	Plan and secondary actions
Feature	SpoqaHanSansNeo	16px	500	27px (1.69)	-0.3px	Membership comparison rows
Body	SpoqaHanSansNeo	16px	400	normal	-0.3px	Document default
Nav	SpoqaHanSansNeo	15px	500	25px (1.67)	-0.3px	Header category menu
Label	SpoqaHanSansNeo	15px	700	25px (1.67)	-0.3px	Feature labels
Caption	SpoqaHanSansNeo	14px	500	24px (1.71)	-0.3px	Chart legend on home
Button Small	SpoqaHanSansNeo	13px	500	21px (1.62)	-0.3px	Header 멤버십 안내

Principles

One display moment: Pretendard ExtraBold appears once, on the home promise; the membership headline at the same 68px size stays in SpoqaHanSansNeo Bold.
Uniform tracking: every SpoqaHanSansNeo element computes -0.3px letter-spacing; only the 48px and 68px headings tighten further (-1px, -1.5px).
Weight 500 for interface text: buttons, menus, feature rows and captions sit at 500; headings at 700; body at 400.

Layout

Spacing System

Action padding: 10px 32px (hero), 8px 24px (plan and secondary), 8px 16px (tabs), 6px 12px 5px (header), 4px 8px (menu)
Card padding: 20px (topic cards), 32px (review cards), 32px 40px (plan card), 24px 32px (up-selling cards)
Small steps of 4, 8 and 12px are the most frequent spacing values in the capture

Grid & Container

Home is a long single-column story (about 10,976px tall at 1440px wide) that alternates white sections with dark and tinted bands, such as the five-minute cycle band with its white heading
/explore is a catalog: a category rail, curated rows of 320 × 146 topic cards, then a searchable topic list
/subscription centres two plan cards side by side, the annual one inside a lavender frame, then a feature comparison and review cards

Whitespace Philosophy

Generous vertical rhythm between story sections on home; dense, evenly gapped rows in the catalog.

Border Radius Scale

6px header button · 8px plan, secondary and menu · 10px hero action · 16px topic and story cards · 20px review cards, search field and up-selling cards · 22px tabs · 24px plan cards · 28px category tiles · 32px labels · 9990px round icon buttons

Responsive Behavior

Breakpoints

Only the 1440px desktop viewport was captured, so no breakpoint values are given. Codeit’s class names carry pc-, tb- and mo- size variants (for example pc-large tb-large mo-medium on the secondary button), which shows desktop, tablet and mobile sizes exist; their values were not measured.

Touch Targets

Hero action 48px tall; plan and secondary actions 45px; tabs 43px; round icon buttons 44px; the header membership button is 32px

Collapsing Strategy

Not measured.

Image Behavior

Not measured.

Elevation & Depth

Level	Treatment	Use
Flat	none	Most elements
Ring	`rgba(51, 50, 54, 0.05–0.15) 0px 0px 0px 1px inset`	Category tiles, labels, round icon buttons, the tab track
Soft lift	`rgba(0, 0, 0, 0.08) 0px 2px 14px 0px`	Plan card, explore carousel buttons
Action glow	`rgba(0, 0, 0, 0.12) 0px 2px 18px 0px`	Hero call to action
Emphasis	`rgba(0, 0, 0, 0.2) 0px 4px 24px 0px`	Recommended plan frame

Codeit draws edges with faint inset rings more often than with borders, and keeps drop shadows for the few things that should look lifted: the hero action, the plan cards and the carousel buttons. The underline on the selected category in the /explore rail is also an inset shadow (#333236 0px -2px 0px 0px inset).

Motion & Easing

The probe read these transitions on 2026-09-30:

Element	Transition
Hero call to action, secondary button	Longest transition 300ms (pseudo-layer opacity; fill and label colour)
Plan card	Longest transition 300ms (8px lift)
Playground tabs	`all 0s` (no animation)

No easing curve was recorded, so none is given. The earlier duration and easing tables had no source and were removed.

Components

Buttons

Hero call to action (primary)

Background: #9933ff; text #ffffff
Radius: 10px; padding 10px 32px; height 48px
Font: 18px / 700 / 28px SpoqaHanSansNeo
Shadow: rgba(0, 0, 0, 0.12) 0px 2px 18px 0px
States: on hover and pressed the probe saw only two pseudo-element layers swap opacity (::before 1 → 0, ::after 0 → 1) over 300ms. Their colours were not recorded, so no hover colour is given. Focus draws only the browser’s default ring.
Use: 무료 체험 시작하기 under the home hero

Header membership button

Background: #9933ff; text #ffffff
Radius: 6px; padding 6px 12px 5px; height 32px
Font: 13px / 500 / 21px (700 on /subscription)
States: not declared. The bundle’s hover, pressed and focus frames disagree between pages, and the probe did not find the control.
Use: 멤버십 안내 in the header of every page

Plan call to action

Background: #9933ff; text #ffffff
Radius: 8px; padding 8px 24px; height 45px
Font: 16px / 500 / 27px
States: the probe matched the whole plan card around it, which lifts 8px on hover and pressed; the button’s own colour change was not read
Use: 멤버십 시작하기 inside the 6-month plan card on /subscription

Secondary button

Background: rgba(255, 255, 255, 0.4); text rgba(51, 50, 54, 0.8); border 1px rgba(51, 50, 54, 0.2)
Radius: 8px; padding 8px 24px; height 45px; font 16px / 500 / 27px
Hover and pressed: a 5% ink wash rgba(51, 50, 54, 0.05) and a full-strength #333236 label, after a 300ms transition (probe). Focus draws only the browser’s default ring.
Use: 모든 IT 강의 보러가기 on home

Round icon button

Background: #ffffff; 44 × 44; radius 9990px (fully round); padding 8px
Edge: rgba(51, 50, 54, 0.15) 0px 0px 0px 1px inset instead of a border
Use: previous and next in the playground section on home

Tabs & Navigation

Playground tabs

Unselected: transparent, text rgba(51, 50, 54, 0.6); selected: #9933ff fill, #ffffff text
Radius: 22px; padding 8px 16px; height 43px; font 16px / 500 / 27px
States: no change on hover, pressed or focus for either tab (probe; transition: all 0s)

Header category menu

Transparent; text rgba(51, 50, 54, 0.8); radius 8px; padding 4px 8px; height 33px; font 15px / 500 / 25px
Use: 모든 강의 in the header

Inputs

Explore search field

Background #f6f6f8; border 1px #dddee4; radius 20px; padding 8px 16px 6px 45px; height 40px; font 14px / 400

Cards

Topic card — #ffffff, 1px #e5e5ea border, 16px radius, 20px padding, 320 × 146; course rows on /explore.

Learner story card — #ffffff, 16px radius, 362 × 304; home.

Review card — #ffffff, 20px radius, 32px padding, 356 × 360; /subscription.

Category tile — #f6f6f8, 28px radius, 116 × 144, 1px inset ring rgba(51, 50, 54, 0.05); home.

Plan card — #ffffff, 2px rgba(51, 50, 54, 0.1) border, 24px radius, padding 32px 40px, 432 × 528, shadow rgba(0, 0, 0, 0.08) 0px 2px 14px 0px. Hover and pressed lift it 8px (translateY(-8px)) after a 300ms transition (probe).

Recommended plan frame — #b363fd fill and 2px border, 24px radius, 440 × 572, shadow rgba(0, 0, 0, 0.2) 0px 4px 24px 0px, around the annual plan card.

Up-selling cards — 20px radius, padding 24px 32px, 400 × 406, filled #fff3bc and #3d1457; foot of home.

Badges

Feature label — 32px radius, padding 0 12px, height 32px, 15px / 700 / 25px, text #fbf5ff, fills #c47cfd, #a64eff and #9933ff, 1px inset ring rgba(51, 50, 54, 0.05).

States

Component	State	Observed treatment	Evidence
Secondary button	Hover, pressed	Fill `rgba(255, 255, 255, 0.4)` → `rgba(51, 50, 54, 0.05)`; label 80% ink → `#333236`; 300ms	Probe, home
Plan card	Hover, pressed	Lifts 8px (`translateY(-8px)`); 300ms	Probe, /subscription
Hero call to action	Hover, pressed	`::before` and `::after` layers swap opacity; colours not recorded	Probe, home
Playground tab	Selected	`#9933ff` fill, `#ffffff` label	Collector, home
Playground tab	Hover, pressed, focus	No change	Probe, home
Links and buttons	Focus	Browser default ring (`outline: auto`), not a brand style	Probe, home and /subscription

Empty, loading, error and success states were not observed on the public pages and are not described.

Live state probe, 2026-10-16 (), hero-cta: focus — no visible change (measured 2026-10-16).

Do’s and Don’ts

Do

Use #9933ff with #ffffff labels for the one action each view asks for, and for the selected tab
Set interface text in SpoqaHanSansNeo with -0.3px tracking; reserve Pretendard ExtraBold for a single display line
Write text in #333236 and step it down with opacity (80%, 60%)
Use rounded shapes: 8–10px buttons, 16–24px cards, 22px tabs, 32px labels
Draw edges with 1px inset rings; lift only the hero action and plan cards

Don’t

Use pure black text or introduce new greys for hierarchy
Spread purple onto secondary actions; the secondary button is a translucent white with an ink label
Add heavy shadows to catalog cards; topic cards use a #e5e5ea hairline
Mix a second display face into section headings

Voice & Tone

Codeit’s voice is warm, motivating and plain-spoken: an encouraging coach that turns learning to code into small, repeatable steps. The hero promise “5분마다 인생이 바뀐다” sets the register, aspirational but concrete. Calls to action are low-pressure invitations to start.

Context	Tone
Hero	Aspirational, concrete: “5분마다 인생이 바뀐다”
Method	Micro-learning framed as a cycle: “5분 학습 사이클”
Stories	Playful and personal: “개발도 게임처럼! 구글 개발자가 됐어요”
Calls to action	Low-pressure: “무료 체험 시작하기”, “멤버십 시작하기”, “모든 IT 강의 보러가기”, “멤버십 안내”
Company	Mission-framed: “배움의 기쁨을 세상 모두에게” (recruiting site)

Voice samples (verbatim, checked on 2026-09-30):

“5분마다 인생이 바뀐다” — home page title and hero headline.
“5분 학습 사이클” — home.
“개발도 게임처럼! 구글 개발자가 됐어요” — learner story card on home.
“코드잇 멤버십 구독” — /subscription headline.
“배움의 기쁨을 세상 모두에게” — vision on careers.codeit.com.

Forbidden register: fear-based “you’re falling behind” urgency, unexplained jargon, hype-heavy superlatives, and any tone that makes a beginner feel judged.

Agent Prompt Guide

Quick Color Reference

Primary action: #9933ff on #ffffff labels
Text: #333236 (80% and 60% opacity for secondary labels); muted #888893
Violets: #760dde emphasis, #b363fd recommended frame, #c47cfd and #a64eff labels on #fbf5ff text
Surfaces: #ffffff page, #f6f6f8 tiles and search, #e5e5ea card hairline, #dddee4 input border

Example Component Prompts

“Hero on white: headline 68px Pretendard 800, -1.5px tracking, #333236. Below it a 400 × 48 button, #9933ff fill, #ffffff 18px/700 SpoqaHanSansNeo label, 10px radius, padding 10px 32px, shadow rgba(0, 0, 0, 0.12) 0 2px 18px.”
“Course card: #ffffff, 1px solid #e5e5ea, 16px radius, 20px padding, 320 × 146; title 16px/700 SpoqaHanSansNeo, #333236.”
“Pricing: two plan cards, #ffffff, 2px solid rgba(51, 50, 54, 0.1), 24px radius, padding 32px 40px, shadow rgba(0, 0, 0, 0.08) 0 2px 14px; wrap the recommended plan in a #b363fd frame with a 2px #b363fd border and shadow rgba(0, 0, 0, 0.2) 0 4px 24px. Plan action #9933ff, 8px radius, 45px tall. On hover, lift the card 8px.”

Iteration Guide

One purple action per view; everything else in ink
SpoqaHanSansNeo at -0.3px everywhere; Pretendard only for the hero promise
Inset rings before borders; shadows only on the hero action and plan cards
Radii from the scale: 6, 8, 10, 16, 20, 22, 24, 28, 32

Palette

At a glance

Design System · Codeit

Design System Inspiration of Codeit

Overview

Visual Theme & Atmosphere

Primary tasks

Brand Narrative

Principles

Personas

Colors

Primary

Violet family

Neutral & Surface

Text

Feature fills

Brand assets, not tokens

Typography

Font Family

Hierarchy

Principles

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

Image Behavior

Elevation & Depth

Motion & Easing

Components

Buttons

Tabs & Navigation

Inputs

Cards

Badges

States

Do’s and Don’ts

Do

Don’t

Voice & Tone

Agent Prompt Guide

Quick Color Reference

Example Component Prompts

Iteration Guide

More like Codeit

Soomgo

8percent

PUBLY (퍼블리)

Ringle

Twitch

Frip