Design System Inspiration of Inflearn

1. Visual Theme & Atmosphere

Inflearn (인프런) is the design language of a Korean lifelong-learning marketplace that wants to feel like a friendly bookshop, not a corporate LMS. Where Coursera leans on muted academic blues and Udemy crowds the screen with discount stickers, Inflearn opens onto a clean white canvas with a single saturated mint-green (#00C471) doing all the interactive work — search submit, primary CTAs, active pagination, "free starter" tags. The green is specifically Korean fintech-adjacent mint (kin to Toss/Banksalad/Naver Pay families, but pulled brighter and more yellow-leaning than any of them), signalling "trustworthy, modern Korean web" without inheriting either Naver's dated green-tab idiom or KakaoTalk's yellow warmth.

The page furniture is unmistakably Mantine-built: 162 --mantine-color-* CSS variables are exposed at runtime, plus the full --mantine-radius-{xs,sm,md,lg,xl} and --mantine-spacing-* scale. Inflearn has effectively adopted Mantine's theme primitives wholesale and overridden them with a brand green. This means the radius vocabulary is mostly 8px (md) for cards, inputs, and pagination — neither aggressive flat-2px (Banksalad's data-tool register) nor consumer-app plump-16px (Toss). Two exceptions tell the story: navigation pills round to 32px (extra-soft, "browse-don't-task" feel) and the search-submit and tag chips go full-pill at 999px — the green circle search button is the one decisive, on-brand moment in a deliberately calm GNB.

Typography is Pretendard-first with no custom display face. Headings (H1 34px / 700, H2 20px / 700) sit in Mantine-dark #212529, body text in #495057, muted metadata in #868E96 — Inflearn does not use pure #000 anywhere on type. The visual silhouette is intentionally close to "modern Korean SaaS landing" (Pretendard + clean white + one branded green) — recognizable to anyone who has used Toss, Wanted, or Banksalad — because Inflearn's audience overlaps heavily with those products and the brand wants instant credibility, not novelty.

Key Characteristics:

• Pretendard-first system font stack (no bundled web-font; OS fallback handles Korean coverage)
• Signature mint-green #00C471 for all primary action; brighter and more yellow than Toss/Banksalad mints
• Mantine theme primitives exposed live (--mantine-radius-md = 0.5rem, --mantine-color-*)
• Two radius families: cards/inputs at 8px, nav pills at 32px, decisive CTAs full-pill 999px
• Sticky white GNB at 65px — no shadow, no border — the green search button is the only visual accent
• Course tiles are borderless transparent cards (article.mantine-Card-root, radius 8px, ~230×310px) — thumbnail does the visual work
• Pagination uses solid-green active page on white surroundings — the same green as the CTA, no second accent hue
• No theatrical shadow / no gradient — Inflearn is "calm catalog, friendly green"

2. Color Palette & Roles

Primary

• Inflearn Green (#00C471): Primary brand color. Search submit, primary CTA, active pagination page, "starter / free" course tag fills, link accents.
• Inflearn Green Pressed (#00A760): Pressed / focused / visited state. Observed as the high-frequency near-shade on the home palette histogram (450 instances) — likely the :hover / :active token paired with the primary.

Text

• Heading (#212529): Mantine dark-9 equivalent. H1/H2/H3, course tile titles.
• Body (#495057): Default reading text and nav link colour.
• Muted / Caption (#868E96): Metadata, instructor sublabels, view counts.
• On-Green (#FFFFFF): Text colour on every green surface (search submit, primary CTA, active pagination).

Surface

• Page (#FFFFFF): Default canvas.
• Surface Neutral (#F8F9FA): GNB pill button rest state, soft section dividers, secondary chip fills.
• Border / Divider Inferred (#DEE2E6): Mantine gray-3 — implied separator hue (not directly captured but consistent with the Mantine system that Inflearn theme-extends).

Semantic (Mantine-inherited)

• Error Red (#FA5252): Form validation errors, destructive confirmation. (Mantine red-6.)
• Info Blue (#228BE6): Inline informational accent, link-type chips. (Mantine blue-6.)
• Warning Yellow (#FCC419): Caution / pending states. (Mantine yellow-5.)
• Teal Tag (#1098AD): Category / lecture-type tag accent (mantine cyan-7). Appears with notable frequency on course cards.

Inflearn does not maintain a separate brand semantic palette — it inherits Mantine's red / blue / yellow / cyan scales and overrides only the green scale with the Inflearn primary. Designers picking from Inflearn should treat the Mantine palette as the de-facto extended system.

3. Typography Rules

Font Family

• Primary: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
• Mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace (carried from Mantine default — surfaces inside code-snippet course previews and dev-tools-style screenshots)
• No custom display face. Headings use the same Pretendard stack; differentiation comes from weight and size only.
• No bundled web-font on /. Korean glyphs render through the OS fallback chain.

Hierarchy

Rules

• Pretendard everywhere. No serif, no rounded display face. Discipline is part of the calm-catalog feel.
• 700 = heading. 600 = nav and labelled button. 400 = body, icon-only button, input. There is no 500 — the weight scale is intentionally binary-ish.
• Numerals (course price, ratings) inherit body weight 400 — Inflearn does not embolden prices the way fintech does. The decision to enrol should feel low-pressure.
• Korean punctuation: full-width quotes 「」 / 『』 are avoided in UI; straight quotes only.

4. Component Stylings

Buttons

Primary CTA — Pill Search Submit

• Background: #00C471
• Text: #FFFFFF
• Border: 1px solid transparent
• Radius: 999px
• Padding: 0 (icon-only)
• Height: 42px
• Width: 42px
• Font: 16px / 400 / Pretendard
• Shadow: none
• Use: The signature green circle search-submit button in the GNB — the single most-recognisable component on the site.

Primary CTA — Filled Label (Inferred)

• Background: #00C471
• Text: #FFFFFF
• Border: none
• Radius: 8px
• Padding: 0 16px (icon-button observed); 0 24px for labelled
• Height: 42px
• Font: 16px / 600 / Pretendard
• Hover: background #00A760
• Use: "수강신청", "결제하기", primary actions inside course detail / cart.

Nav Pill — Resting (Neutral)

• Background: #F8F9FA
• Text: #495057
• Border: 1px solid transparent
• Radius: 32px
• Padding: 0 22px (labelled) / 0 (icon-only 42×42)
• Height: 42px
• Font: 16px / 600 / Pretendard
• Use: "로그인", "service-menu" icon, "카테고리" pill — every GNB action that is not the green search submit.

Nav Pill — Active (Selected)

• Background: rgba(0, 196, 113, 0.1) (inferred Mantine green tint)
• Text: #00C471
• Border: 1px solid transparent
• Radius: 32px
• Padding: 0 12px
• Height: 42px
• Font: 16px / 600 / Pretendard
• Use: Active top-level nav section ("지식공유" when on /knowledge etc.).

Ghost / Text Link Button

• Background: transparent
• Text: #495057
• Border: 1px solid transparent
• Radius: 32px
• Padding: 0 12px
• Font: 16px / 600 / Pretendard
• Hover: background #F8F9FA
• Use: Inline secondary GNB items ("지식공유"), category-row navigation.

Pagination — Default

• Background: #FFFFFF
• Text: #212529
• Border: 1px solid #DEE2E6 (Mantine gray-3, inferred)
• Radius: 8px
• Padding: 0 12px
• Height: 38px
• Font: 14px / 400 / Pretendard
• Use: Page number buttons on /courses listing.

Pagination — Active

• Background: #00C471
• Text: #FFFFFF
• Border: none
• Radius: 8px
• Padding: 0 12px
• Height: 38px
• Font: 14px / 400 / Pretendard
• Use: Currently selected page in the /courses pagination cluster.

Disabled (Inferred from Mantine default)

• Background: #F1F3F5
• Text: #ADB5BD
• Border: none
• Radius: 8px
• Padding: 12px 24px
• Font: 16px / 600 / Pretendard
• Use: Form-incomplete state on enrol / payment flows.

Inputs & Forms

Text Input — Default (Search)

• Background: #FFFFFF
• Text: #212529
• Placeholder: #868E96 (inferred)
• Border: 1px solid #DEE2E6 (inferred — captured border was 0px none on the inner input element; outer wrapper carries the border per Mantine pattern)
• Radius: 8px
• Padding: 0 12px
• Height: 36px
• Font: 16px / 400 / Pretendard
• Use: GNB search field — paired with the green pill submit on its right.

Text Input — Focus (Inferred)

• Background: #FFFFFF
• Border: 1px solid #00C471
• Use: All form fields on focus.

Cards & Containers

Course Tile (Default)

• Background: transparent
• Border: none
• Radius: 8px
• Padding: 0 (thumbnail is the visual container; metadata sits below in flow)
• Width × Height: ~230 × 310px (home) / ~230 × 325px (/courses)
• Shadow: none
• Use: The dominant content unit. A article.mantine-Card-root wrapper with a thumbnail image (radius 8px), title in #212529 700, instructor in #868E96, price in #212529 400, optional green starter / red discount tags.

Course Tile — Featured / Highlighted (Inferred)

• Background: #FFFFFF
• Border: 1px solid #DEE2E6 (Mantine gray-3)
• Radius: 8px
• Padding: 16px
• Shadow: 0 1px 3px rgba(0, 0, 0, 0.05) (Mantine --mantine-shadow-xs equivalent)
• Use: "추천" / promoted course slot on home rails.

Tag — Free / Starter

• Background: rgba(0, 196, 113, 0.12)
• Text: #00C471
• Radius: 999px
• Padding: 2px 10px
• Font: 12px / 600 / Pretendard
• Use: "무료" / starter-course indicator on course tiles.

Tag — Category (Cyan-Teal)

• Background: rgba(16, 152, 173, 0.1)
• Text: #1098AD
• Radius: 999px
• Padding: 2px 10px
• Font: 12px / 600 / Pretendard
• Use: Category / lecture-type tags on tiles.

Navigation

Global Nav (GNB)

• Background: #FFFFFF
• Text: #495057 (default) / #212529 (heading & emphasized)
• Border-bottom: none
• Shadow: none
• Position: sticky
• Height: 65px
• Layout: [logo] · [primary nav pills] · [search input + green pill submit] · [right-side icon pills + 로그인]
• Use: The single GNB pattern; persists across home, courses, detail.

Footer (Inferred)

• Background: #F8F9FA (Mantine gray-0)
• Text: #495057 / #868E96 for secondary lines
• Padding: 48px 0 (block) — Mantine spacing-xl × 2
• Use: Standard 4-column link list + company-info row.

---

Verified: 2026-05-14 Tier 1 sources:

• https://www.inflearn.com/ — live CDP inspect (browser-harness :9222) → assets/_reference/.live-inspect-proof.json (12 raw_samples + 162 --mantine-* CSS vars + h1/h2 typography sample)
• https://www.inflearn.com/courses — second-surface live CDP inspect → assets/_reference/.live-inspect-proof-courses.json (8 raw_samples + pagination active-state observed #00C471)
• https://tech.inflab.com/20260305-new-header/ — Inflearn engineering blog post "MFE 환경에서 공통 헤더(GNB) 개편하기" confirming GNB rebuild as shared MFE component

Tier 2 sources:

• https://getdesign.md/inflearn — empty (verified 2026-05-14: "No designs found for 'inflearn'")
• https://styles.refero.design/?q=inflearn — empty (verified 2026-05-14: no result cards returned)

Conflicts unresolved: none

Inferred-but-not-live-captured tokens (flagged for follow-up UPDATE on a course-detail / cart / payment surface): Primary CTA labelled fill (only icon-pill captured), focus state on inputs, disabled state, tag chip exact alpha values, footer exact spacing.

5. Layout & Spacing

Inflearn inherits Mantine's spacing scale verbatim:

Course rails on the home page use a 6-column horizontal grid (~230px tile × 6 = 1380px content width) with 24px gap between tiles. The GNB content sits inside a max-w-1200 container with 16px left/right padding on viewport widths < 1280px. Vertical rhythm between content blocks is 48px–64px — Mantine xl × 2 to xl × 2.5.

Density is catalog-tight, not Toss-airy — Inflearn assumes a returning user scanning for the next course, so it packs more tiles per fold than a marketing-first SaaS landing would. This is the major visual difference between Inflearn and (for example) Wanted: same Pretendard font, same Mantine-like radius vocabulary, but Inflearn shows you ~24 tiles above the fold; Wanted shows ~6.

6. Iconography & Imagery

• Icon set: Custom SVG line icons (24×24 viewbox, 1.5px stroke) for the GNB and inline actions. Stroke colour follows text-context (#495057 default, #00C471 when paired with active green surface).
• Course thumbnail style: 16:9 photographic or illustrative — wide stylistic range because covers are author-submitted. Inflearn standardizes the radius (8px) and aspect ratio, not the art direction.
• Hero illustrations: When used, soft flat-vector with a single mint-green accent so they read as "Inflearn-coloured" without dominating.
• Photography: Sparse on product surfaces; reserved for instructor profile portraits in course detail.

7. Motion

Inflearn motion is minimal-functional:

• Nav pill hover: background fade 200ms ease.
• Card hover: thumbnail scale 1.0 → 1.02, 200ms ease-out, paired with a subtle elevation increase (shadow xs → sm).
• Page transitions: no client-side animated transitions — full SSR navigation on link click; the perceived motion budget is spent on the in-place hover affordances.
• Loading: Mantine Loader (rotating dot ring) in #00C471.

Mantine's default transition timing function is --mantine-transition-timing-function: ease — Inflearn does not override it.

8. States

• Hover: nav pill bg #F8F9FA → #E9ECEF (inferred); card thumbnail scale 1.02; CTA bg #00C471 → #00A760.
• Focus: 2px outline #00C471 at 2px offset on keyboard focus; input border swaps to #00C471.
• Active / Pressed: CTA bg #00A760; pagination active page solid #00C471 on white.
• Disabled: Mantine default — #F1F3F5 background, #ADB5BD text, cursor: not-allowed.
• Loading: Mantine Loader in primary green; CTA can swap label for inline spinner.
• Empty: Centered illustration + headline (아직 수강 중인 강의가 없어요) + secondary outlined CTA (강의 둘러보기).
• Error: Inline #FA5252 14px text below the offending field; field border swaps to #FA5252.
• Success: One-line confirmation in #00C471 14px, no toast theatre.
• Skeleton: #F1F3F5 block, shimmer 1.5s linear (Mantine Skeleton default).

9. Accessibility & Internationalization

• Korean is the primary language. English surfaces exist for /en/ mirror but are translations, not parity. Date formats follow Korean conventions (2026년 5월 14일).
• Pretendard is a Korean-display-first font — supports the full Hangul block plus extended Latin; English text reads naturally without a separate Latin font.
• Color contrast: Heading #212529 on #FFFFFF = 16.0:1 (AAA). Body #495057 on #FFFFFF = 8.6:1 (AAA). Primary green #00C471 on #FFFFFF = 2.45:1 — fails AA for body text; Inflearn correctly uses it only on white-on-green CTAs (where contrast is 4.4:1, passes AA), as accent fills, and for >18pt heading-scale text. Designers should not use #00C471 for body-text links without a darker variant — use #00A760 (3.5:1, still borderline AA for body) and prefer underline + bold.
• Keyboard nav: Mantine focusRing="auto" — visible 2px green ring on Tab navigation.
• Screen reader: GNB icon-only buttons carry aria-label (search-menu, service-menu observed). Course tiles use semantic <article>.

16. Do's and Don'ts

Do

• Use the single mint-green #00C471 for all primary action — search submit, primary CTA, active pagination, free/starter tag fills — and swap to #00A760 only for hover/pressed states
• Set type in the Pretendard-first stack with a binary-ish weight scale: 700 for headings (H1 34px, H2 20px), 600 for nav and labelled buttons, 400 for body and prices — there is no 500
• Apply the two-family radius vocabulary: 8px for cards, inputs, and pagination; 32px for nav pills; and full-pill 999px only for the green search submit and tag chips
• Render the GNB as a sticky 65px white bar with no shadow and no border, letting the green circular search button be the only visual accent
• Keep course tiles borderless and transparent (~230x310px, 8px thumbnail radius) so the thumbnail does the visual work, with title in #212529, instructor in #868E96, and price in #212529 weight 400
• Inherit the Mantine semantic palette for non-brand needs — red #FA5252 for errors, blue #228BE6 for info, cyan-teal #1098AD for category tags — and reach for it instead of inventing new hues

Don't

• Introduce a second brand accent hue for a sub-product — tint the existing #00C471 (e.g. rgba(0,196,113,0.1)) or fall back to the Mantine red/blue/yellow/cyan scales instead
• Use #00C471 for body-text links or small text — it scores only 2.45:1 on white and fails AA, so reserve it for white-on-green CTAs and >18pt headings
• Embolden prices in red or add strikethrough discount callouts outside intentional sale rails — keep price in body weight 400 as a fact, not a flag
• Add campaign drama like rotating banner carousels, parallax, or auto-advancing home rails — show ~24 calm catalog tiles above the fold and make card thumbnail scale (1.0 to 1.02) the only ambient motion
• Use pressure or hype microcopy such as 지금 바로!, 놓치지 마세요, 최저가, 최고의 강의, Oops!, or 오류가 발생했습니다 — write agency-on-the-learner copy in casual-polite ~해요 instead
• Call instructors 강사 or 교수 or pit them against each other with ranking labels — use the brand term 지식공유자님 and neutral counts like 수강생 12,400명

---

10. Voice & Tone

Inflearn speaks like the friendly senior who shows you their bookshelf, not the strict instructor. The tagline "라이프타임 커리어 플랫폼" (lifetime career platform) is the single most load-bearing piece of voice on the site — every microcopy decision reinforces "learning is something you keep doing" rather than "finish this course and pass". Where Coursera says "Earn a verified certificate" and Udemy says "30-Day Money-Back Guarantee", Inflearn says "부담없이 시작하기" (start without pressure) — the verb framing is always agency-on-the-learner, not pressure-from-the-platform.

Korean is the dominant register; English appears only for technical course titles (where the technology has an English name — "React", "Spring", "Kubernetes") and for the /en mirror. The voice avoids the formal ~합니다 ending in product surfaces (it survives in legal / refund / receipt screens) and uses the casual-polite ~해요 everywhere users are choosing what to learn.

Forbidden phrases (illustrative — not from a published Inflearn guide; derived from observed restraint on / and /courses): 오류가 발생했습니다, 놓치지 마세요, Oops!, 지금 바로!, 최저가, exclamation marks on routine CTAs, emoji on price or enrolment surfaces, superlatives on course recommendations (최고의 강의, 이번 주 1등). Where ranking matters, Inflearn uses neutral counts (수강생 12,400명) instead of editorialized rank labels.

11. Brand Narrative

Inflearn was founded in 2015 by Lee Hyung-joo (이형주) under the parent company Inflab (인프랩), headquartered in Seoul. The founding observation was specifically Korean: that working developers, designers, and PMs were learning more from short-form online courses than from university or formal certification, but the existing Korean e-learning market was dominated by exam-prep cram services (수능, 공무원) that treated adult professional learners as if they were teenagers preparing for the SAT.

Inflearn's bet was that the same people who built the Korean IT industry — engineers, designers, marketers — would also teach it, if given a low-friction marketplace and a respectful split of the revenue. The platform brand name itself is Information + Learn, and Inflab's tagline frames the company as a "lifetime career platform" rather than an LMS or a course store — the design language reflects that framing: a calm catalog you return to, not a campaign-driven sales surface.

By 2026, Inflearn lists tens of thousands of courses across IT, design, business, language, and lifestyle, and has expanded into roadmap-style course bundles, live mentoring, and a Q&A community. The visual evolution from the early-2010s blue-and-white directory layout to the current Mantine-built mint-green catalog is itself documented on the Inflab engineering blog (tech.inflab.com), where the team has written publicly about the design and infrastructure of the redesign — including, in 2026-03, a post on rebuilding the shared GNB header across the company's micro-frontend architecture.

12. Principles

1. Friendly, not formal. Casual-polite ~해요 is the default Korean ending. UI implication: avoid ~하시기 바랍니다 in product surfaces; reserve ~합니다 for legal screens.

2. Catalog density over campaign drama. Returning users dominate the audience; the home page is a place to scan, not to be sold to. UI implication: show ~24 course tiles above the fold; reserve hero space for one calm headline, not a rotating banner carousel.

3. One green, used decisively. A single brand colour for every interaction. UI implication: never introduce a secondary brand colour for a sub-product; tint the existing green or fall back to the Mantine semantic palette (red/blue/yellow/cyan).

4. The instructor is 지식공유자님. Knowledge-sharer, not lecturer. UI implication: avoid hierarchy language (강사 / 교수) and avoid star/rating language that pits instructors against each other on the same screen.

5. Price is a fact, not a flag. Course prices appear in body weight 400, not bold red, not strikethrough-with-discount-callout (except on intentional sale rails). UI implication: a course tile is a content card first, a commerce card second.

13. Personas

(Personas inferred from observable surface targeting on /, /courses, tech.inflab.com; not from a published Inflearn persona doc.)

• The Switching IC. 28–35, working in a Korean tech / non-tech company, considering a role pivot (e.g., backend engineer thinking about ML, marketer thinking about product). Comes to Inflearn evenings and weekends; values roadmap-style course bundles; reads instructor credentials carefully.

• The Senior Upskilling. 35–45, mid-to-senior IC or first-line manager, topping up a specific gap (Kubernetes, React Server Components, FP&A). Buys 1–2 courses per quarter; impatient with marketing fluff; wants the table-of-contents on screen before deciding.

• The Student-to-Industry. 21–26, university or bootcamp student, building the portfolio for first-job applications. Uses the free starter (무료) courses heavily; price-sensitive; the green free-tag is the most-clicked element on the home page for this persona.

• The Adjacent-Function Curious. 28–40, designer learning a bit of code, PM learning analytics, engineer learning design. Browses outside their core category; sensitive to course difficulty signalling; relies on instructor rating and student count more than course title.

14. States Catalog

15. Motion & Easing

Motion rules:

• No carousel auto-advance on home rails (a deliberate departure from Korean commerce convention; Inflearn's audience is reading instructor names, not glancing at banners).
• No parallax. No scroll-triggered hero animation on the marketing surfaces.
• Card hover is the only ambient motion — every other animation requires explicit user input.
• Respect prefers-reduced-motion: reduce — fall back to instant transitions, keep colour fades only.