Design System Inspiration of Codeit

1. 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

2. Color Palette & Roles

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.

3. Typography Rules

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 (c) 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

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.

4. Component Stylings

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).

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of codeit.kr plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://www.codeit.kr/ ; https://www.codeit.kr/explore ; https://www.codeit.kr/subscription ; https://careers.codeit.com/ ; https://www.codeit.kr/teams Tier 2 sources: getdesign.md/codeit (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=codeit (HTTP 200, not inspected beyond a name count), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

5. Layout Principles

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

6. Depth & Elevation

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).

7. 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

8. 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.

9. 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

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

---

10. 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.

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.

11. 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.

12. Principles

1. 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.
2. One action, one colour. #9933ff means "do this" and marks the selected tab. UI implication: secondary actions stay translucent white with ink labels.
3. Motivate, don't intimidate. UI implication: warm #333236 ink, rounded shapes and encouraging copy; no fear-based urgency.
4. 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.
5. Flat and friendly. UI implication: faint inset rings and tinted tiles carry grouping; only the hero action and plan cards are lifted.

13. 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.

14. States

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

15. Motion & Easing

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

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