Design System Inspiration of LikeLion

1. Visual Theme & Atmosphere

LikeLion (멋쟁이사자처럼) is Korea's largest coding-education organization — university clubs turned national bootcamp operator (K-Digital Training, 국비지원 courses, AI education, enterprise training) — and its design reads exactly like that mission: energetic, approachable, and confidently modern without being childish. The canvas is pure white (#ffffff) broken up by soft neutral surfaces (#f5f5f5, #f3f4f6) and warm cream promo cards (#fcf4ee, #fff8e4), while a single high-voltage orange (#ff6000) does all the persuading. That orange is the brand's whole personality: it is the one saturated color on an otherwise quiet, near-black-on-white page, so the eye is trained to read "orange = the next step."

What makes LikeLion unusually credible for an education brand is that it ships a real, public design system: designsystem.likelion.net is a full Storybook with a Foundation layer (Colors, Radius, Screen Grid, Space, Typography) and ~20 production components (ActionButton, TextField, Badge, Chip, Tab, Tag, Toast, Dialog, Select, DatePicker, and more). Live inspection confirms the same #ff6000 primary drives both the marketing homepage and the canonical primary-500 token, so the system is coherent from landing page to product UI. The neutral ladder is a cool blue-grey scale — #191f28 (gray-950) down through #333d4b, #8a95a0, #d1d6dc to #f9fafb — that keeps text calm and lets the orange stay loud.

Typographically the system is all-Pretendard: a bold display voice (weight 600) at large sizes for headlines that motivate, dropping to a quiet 15-16px weight 400 for body and dense UI, the de-facto Korean product font tuned for hangul legibility. Depth is deliberately flat — box-shadow is none across the hero, nav, cards, buttons, chips, and tabs; separation comes from tinted surfaces and thin #e5e5e5 / #e5e7ea / #d1d6dc hairlines rather than elevation. Geometry is friendly: a moderate 6px radius on action buttons, 8px on inputs, 12–16px on cards, and full 999px pills on chips and tabs. The overall impression is a bright, trustworthy, education-first product that feels built by engineers who care about tokens.

Key Characteristics:

• Single high-voltage orange (#ff6000) as the only saturated color — reserved for the primary action
• Pretendard everywhere: weight 600 for display/headlines, weight 400 for body and dense UI
• Cool blue-grey neutral ladder (#191f28 → #333d4b → #8a95a0 → #d1d6dc → #f9fafb)
• Warm cream promo surfaces (#fcf4ee, #fff8e4) that soften an otherwise cool palette
• Flat, near-shadowless system — hairlines (#e5e5e5, #e5e7ea, #d1d6dc) and tinted surfaces do the separating
• Friendly geometry: 6px buttons, 8px inputs, 12–16px cards, 999px pill chips and tabs
• A real public Storybook design system backing the marketing site — coherent tokens end to end
• Marketing homepage sets text at #222222; the canonical DS ladder uses #191f28 / #333d4b

2. Color Palette & Roles

Primary

• LikeLion Orange (#ff6000): Primary brand color and the single "action" color. primary-500 in the DS; drives the ActionButton, filled chips, count badges, tags, and the homepage CTA/search accent.
• Orange Hover (#cc4d00): primary-600. Darker orange for the pressed/hover state of primary buttons.
• Orange Tint (#ffdfcc): primary-100. Soft peach for subtle highlight surfaces and pressed backgrounds.
• Orange Faint (#ffefe5): primary-50. Faintest peach used as the tinted background of the outline chip variant.

Text & Ink

• Ink (#222222): Marketing homepage body and heading text (rgb 34,34,34) — the dominant text color across the landing page.
• Gray-950 (#191f28): The DS darkest neutral; canonical strong text and the dark selected-tab fill.
• Neutral-900 (#191c1f): Near-black used as the neutral/secondary button fill in the DS.
• Pure Black (#000000): TextField input text value.
• Label (#333d4b): gray-800. DS secondary text, chip/tab default label color, TextField focus border and placeholder/guide text.
• Muted (#737373): Homepage secondary/mid-grey text.
• Faint (#a3a3a3): Homepage low-emphasis / muted labels.
• Disabled (#b1b8c0): gray-400. Disabled button text.

Neutral & Surface

• Pure White (#ffffff): Page background, white cards, text on orange/dark.
• Border (#d1d6dc): gray-300. Default chip/tab outline and card border.
• Hairline (#e5e7ea): gray-200. Thin dividers and subtle borders.
• Hairline Alt (#e5e5e5): Homepage divider/border hairline.
• Surface (#f3f4f6): gray-100. Assistive/tertiary button fill and quiet section surface.
• Surface Alt (#f5f5f5): The most frequent homepage section surface.
• Surface Faint (#f9fafb): gray-50. The lightest tinted surface.
• Cream (#fcf4ee): Warm promo-card background (Business / Event tiles on the homepage).
• Cream Alt (#fff8e4): yellow-50. Warm light-cream highlight surface.

Semantic Accents (DS primitives, used sparingly)

• Yellow (#ffb700): yellow-500. Highlight / rating / attention accent (appears in homepage star/rating marks).
• Success (#0da796): green-500. Positive / success teal.
• Error (#f64c4c): red-500. Error / destructive red.

3. Typography Rules

Font Family

• Primary: Pretendard (loaded as Pretendard Variable), with the usual system-font fallback stack. It is the single family for display, headings, body, nav, and all UI labels — the design system standardizes on it.

Hierarchy

Principles

• Bold display, light body: Pretendard weight 600 carries every headline; weight 400 carries body and dense UI. The weight jump is the primary hierarchy signal.
• One family, many jobs: unlike two-font systems, LikeLion leans entirely on Pretendard and differentiates by size/weight — simpler and hangul-consistent.
• Slight negative tracking on emphasis text: subtitles and small labels sit at -0.3px; large display and body stay at normal tracking.
• 14–16px UI floor: body and UI text sit at 15–16px for comfortable hangul reading in information-dense course listings.

4. Component Stylings

Buttons

Primary (ActionButton)

• Background: #ff6000
• Text: #ffffff
• Radius: 6px
• Padding: 0px 16px
• Height: 48px
• Font: 16px / 600 / Pretendard
• Hover: #cc4d00 background
• Disabled: #f3f4f6 background, #b1b8c0 text
• Use: Primary call-to-action — the system's single dominant action

Neutral (Dark)

• Background: #191c1f
• Text: #ffffff
• Radius: 6px
• Padding: 0px 16px
• Height: 48px
• Font: 16px / 600 / Pretendard
• Use: Secondary dark / neutral action

Assistive (Tertiary)

• Background: #f3f4f6
• Text: #333d4b
• Radius: 6px
• Padding: 0px 16px
• Height: 48px
• Font: 16px / 600 / Pretendard
• Use: Low-emphasis / tertiary action

Inputs & Forms

TextField

• Background: #ffffff
• Text: #000000
• Border: 1px solid #d1d6dc
• Radius: 8px
• Padding: 0px 12px
• Height: 48px
• Font: 16px / 400 / Pretendard
• Focus: 1px solid #333d4b border
• Placeholder: #333d4b at 15px
• Use: Standard text input; TextArea shares the same box treatment

Cards & Containers

Warm Promo Card

• Background: #fcf4ee
• Text: #222222
• Radius: 16px
• Padding: 40px
• Use: Business / Event promo tiles on the homepage

White Content Card

• Background: #ffffff
• Text: #222222
• Border: 1px solid #e5e5e5
• Radius: 12px
• Use: White content card with a hairline outline (no shadow)

Badges & Tags

Count Badge

• Background: #ff6000
• Text: #ffffff
• Radius: 10px
• Padding: 0px 6.5px
• Height: 20px
• Use: Notification / count badge

Tag

• Background: #ff6000
• Text: #ffffff
• Radius: 4px
• Padding: 0px 8px
• Height: 28px
• Font: 15px / 400 / Pretendard
• Use: Category / label tag

Chips

Filled (Selected)

• Background: #ff6000
• Text: #ffffff
• Radius: 999px
• Padding: 0px 12px
• Height: 30px
• Font: 15px / 400 / Pretendard
• Use: Selected filter chip (solid)

Outline (Tinted Selected)

• Background: #ffefe5
• Text: #ff6000
• Border: 1px solid #ff6000
• Radius: 999px
• Padding: 0px 12px
• Height: 30px
• Use: Selected chip, tinted-outline variant

Default (Unselected)

• Background: #ffffff
• Text: #333d4b
• Border: 1px solid #d1d6dc
• Radius: 999px
• Padding: 0px 12px
• Height: 30px
• Use: Unselected filter chip

Tabs

Segmented Pill

• Background: #ffffff
• Text: #333d4b
• Border: 1px solid #d1d6dc
• Radius: 999px
• Padding: 0px 16px
• Height: 40px
• Font: 15px / 400 / Pretendard
• Active: #ffffff text on #191f28 fill
• Use: Segmented pill tab bar

Navigation

• Background: #ffffff
• Text: #222222
• Font: 16px / 400 / Pretendard
• Padding: 20px 16px per link
• Use: Top horizontal nav ("전체강의", "부트캠프 국비지원", "AI교육", "기업교육") with a pill-shaped login/signup button (1px solid #d4d4d4, 9999px)

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://likelion.net/ (marketing homepage, live computed style) ; https://designsystem.likelion.net/ (official LikeLion Design System Storybook — Foundation + components, live computed style) Tier 2 sources: getdesign.md/likelion — app shell only, no LikeLion data ; styles.refero.design/?q=likelion & ?q=멋쟁이사자처럼 — not listed (only generic featured cards returned) Conflicts unresolved: none (homepage #222222 text vs DS #191f28 ladder, and nav pill vs DS 6px button, are surface-scoped differences documented in .verification.md, not contradictions)

5. Layout Principles

Spacing System

• Base unit: 4px, doubling into an 8px rhythm
• Scale (DS Space tokens): 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
• Notable: promo cards use a generous 40px internal padding; nav links use 20px vertical padding for tall, tappable hit areas

Grid & Container

• Centered content column with a fixed-width top nav bar (56–65px tall links)
• Course/curriculum content laid out as horizontally scrolling card carousels beneath section H3 headings
• Full-width alternating bands: white (#ffffff) and quiet grey (#f5f5f5) segments
• Warm cream (#fcf4ee) promo tiles at 16px radius anchor the "Business" and "Event" sections

Whitespace Philosophy

• Breathing room for a busy catalog: despite a dense course inventory, sections are airy with generous vertical rhythm
• Flat segmentation: bands separate by background tint (#f5f5f5 / #f9fafb vs #ffffff) and hairlines, never by shadow
• Orange as punctuation: whitespace stays neutral so the single orange accent reads as the clear focal point

Border Radius Scale

• Extra-small (2px) / Small (4px): tags, fine inner elements
• Medium (6px): action buttons — the workhorse
• Base (8px): text inputs
• Large (12px) / X-Large (16px): content and promo cards
• Pill (999px): chips, tabs, and the nav login button

6. Depth & Elevation

Shadow Philosophy: LikeLion is a near-shadowless, flat system. Live inspection found box-shadow: none across the hero, nav, promo cards, action buttons, chips, and tabs; the only elevation-like treatment is a rgba(0,0,0,0.01) 1px ring on a white content card. Depth and grouping are communicated entirely through flat tinted surfaces (#f5f5f5, #f9fafb) and thin hairlines (#e5e5e5, #e5e7ea, #d1d6dc). When emphasis is needed the system reaches for color — the orange #ff6000 or the dark #191f28 — rather than elevation, which keeps the education UI feeling light, fast, and modern.

7. Do's and Don'ts

Do

• Use Pretendard weight 600 for display/headlines and weight 400 for body and dense UI
• Reserve orange (#ff6000) for the primary action — keep it the single "do this" color
• Use the cool grey ladder (#191f28 → #333d4b → #8a95a0 → #d1d6dc) for text and borders
• Separate sections with flat tint (#f5f5f5, #f9fafb) and hairlines (#e5e5e5, #d1d6dc), not shadows
• Use a 6px radius for action buttons, 8px for inputs, 12–16px for cards
• Use full 999px pills for chips and segmented tabs
• Warm the palette with cream promo surfaces (#fcf4ee, #fff8e4) where a section needs friendliness
• Use #cc4d00 for the pressed/hover state of primary buttons

Don't

• Spread orange across many elements — it dilutes the single-action signal
• Use drop shadows for elevation — the system is flat and hairline-based
• Set headlines in a light weight — display is always Pretendard 600 (or 700 on marketing)
• Mix in a second saturated brand hue — orange is the only loud color
• Use sharp/square corners on chips or tabs — those are full pills
• Use pure black for large body copy — use #222222 (marketing) or #191f28 (DS)
• Over-elevate cards — a 12–16px radius and a thin #e5e5e5 hairline is the pattern

8. Responsive Behavior

Breakpoints

Touch Targets

• Action buttons at 48px height — comfortably tappable
• Nav links use 20px vertical padding (63–65px tall targets)
• Chips at 30px and tabs at 40px height with generous horizontal padding
• Login/signup pill at 43px height

Collapsing Strategy

• Hero: large display headline scales down on mobile, weight 600 maintained
• Course card rows: horizontal scroll on narrow viewports
• Feature/promo bands: multi-column → stacked single column
• Tinted/white alternating sections keep full-width treatment
• Nav: horizontal links collapse to a hamburger/menu on mobile

Image Behavior

• Course thumbnails and promo illustrations carry no shadow at any size, consistent with the flat system
• Cards maintain their 12–16px radius across breakpoints
• Warm cream promo tiles keep 40px internal padding, tightening on mobile

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: LikeLion Orange (#ff6000)
• CTA Hover: Orange Dark (#cc4d00)
• Background: Pure White (#ffffff)
• Quiet surface: Surface Alt (#f5f5f5), Surface Faint (#f9fafb)
• Warm promo surface: Cream (#fcf4ee), Cream Alt (#fff8e4)
• Heading / body text: Ink (#222222) or DS Gray-950 (#191f28)
• Secondary text / borders: Label (#333d4b), Border (#d1d6dc)
• Muted / faint text: #737373, #a3a3a3, disabled #b1b8c0
• Hairline: #e5e5e5, #e5e7ea
• Semantic: yellow #ffb700, success #0da796, error #f64c4c

Example Component Prompts

• "Create a hero on white background. Headline in Pretendard 52px weight 600, line-height 1.30, color #222222. Below it, one orange primary button: #ff6000 background, white text, 6px radius, 48px height, 0 16px padding, Pretendard 16px/600 — hover #cc4d00."
• "Design a course card: white background, 1px solid #e5e5e5 border, 12px radius, no shadow. Title 17px Pretendard weight 600 letter-spacing -0.3px #222222; meta 15px weight 400 #737373."
• "Build a filter chip row: unselected chips are white with #333d4b text and a 1px solid #d1d6dc border at 999px radius, 30px height, 0 12px padding, 15px Pretendard; selected chip fills #ff6000 with white text."
• "Create a segmented pill tab bar: 40px height, 999px radius pills. Inactive: white bg, #333d4b text, 1px solid #d1d6dc. Active: #191f28 fill with white text."
• "Make a warm promo tile: #fcf4ee background, 16px radius, 40px padding, #222222 text, no shadow."

Iteration Guide

1. Pretendard everywhere — 600 for headlines, 400 for body/UI
2. Orange (#ff6000) is the single action color — don't spread it; hover is #cc4d00
3. No shadows — separate with #f5f5f5 / #f9fafb tint and #e5e5e5 / #d1d6dc hairlines
4. Radius ladder: 6px buttons, 8px inputs, 12–16px cards, 999px pills
5. Text is #222222 (marketing) or #191f28 (DS); secondary #333d4b, muted #737373
6. Warm the layout with cream (#fcf4ee, #fff8e4) where friendliness helps
7. Semantic accents (#ffb700, #0da796, #f64c4c) stay rare and functional

---

10. Voice & Tone

LikeLion's voice is encouraging, plain-spoken, and possibility-focused — the tone of a mentor who believes anyone can learn to build. The name itself (멋쟁이사자처럼, "like a stylish lion") is playful and warm, and the copy follows: it invites rather than gatekeeps, and it frames coding education as an accessible on-ramp, not an elite filter. Course and section labels are direct and benefit-first ("90% 지원받는 기초 강의", "K-디지털 트레이닝 부트캠프", "실시간 인기있는 강의"), treating the learner as a capable adult making a practical choice.

Voice samples (verbatim from live homepage):

• "90% 지원받는 기초 강의" — section heading (benefit-first, states the subsidy). (verified live 2026-07-02)
• "K-디지털 트레이닝 부트캠프" — program label (concrete, government-backed offering). (verified live 2026-07-02)
• "멋사에게 새로운 질문을 물어봐주세요." — search placeholder (friendly, invites the learner to ask). (verified live 2026-07-02)

Forbidden register: fear-based "you'll fall behind" urgency, elitist gatekeeping language, undefined tech jargon left unexplained, and hard-sell exclamation spam. The brand persuades by possibility and support, not pressure.

11. Brand Narrative

LikeLion (멋쟁이사자처럼) began in 2013 as a university coding club founded by 이두희 (Lee Doo-hee) at Seoul National University, built on a radical-for-its-time premise: non-CS-major students could learn to build real web services in a single semester. The club spread rapidly across Korean universities, becoming the country's largest student developer community, and then formalized into an education company that now runs national-scale bootcamps, government-subsidized courses (국비지원 / K-Digital Training), AI education, and enterprise training programs.

The founding conviction — that programming is a general literacy anyone can acquire, not a gate reserved for engineers — shapes both the product and the design. LikeLion positions itself as the friendly on-ramp into tech: it packages intimidating subject matter (development, AI, data) into approachable, mentor-supported programs, and it frames outcomes in terms of access and opportunity rather than credential-signaling.

What LikeLion refuses, visible in its design: the cold, exclusionary aesthetic of legacy technical education (dense syllabi, institutional navy, walls of prerequisites) and the dark-pattern urgency of hard-sell online courses. What it embraces: a bright, single-orange energy that reads as momentum and encouragement; a flat, fast, mobile-native interface; plain Korean that decodes jargon; and — notably for an education brand — a genuine, engineered design system (designsystem.likelion.net) that signals the same craft it teaches.

12. Principles

1. Accessible by default. Coding is a literacy anyone can learn. UI implication: keep language plain, keep the next step obvious with a single orange CTA, and never gate basic information behind jargon.
2. Encourage, don't pressure. Momentum beats fear. UI implication: copy invites ("자세히 보기", "물어봐주세요"); no countdown-timer dark patterns or scarcity manipulation.
3. One action, one color. Orange (#ff6000) means "do this." UI implication: reserve the saturated orange exclusively for the primary action so the path forward is never ambiguous.
4. Flat and fast. Mobile-native clarity over decorative depth. UI implication: no shadows; separate with tint and hairlines; keep pages light and quick to scan.
5. Practice the craft you teach. A public design system is proof of rigor. UI implication: build from tokens and documented components (the Storybook), so the product UI is as consistent as the curriculum promises.
6. Warmth where it counts. UI implication: soften a cool, functional palette with cream promo surfaces (#fcf4ee, #fff8e4) and a friendly, non-corporate voice.

13. Personas

Personas below are fictional archetypes informed by publicly observable LikeLion user segments (career-switchers, university students, working professionals reskilling into tech), not individual people.

김민서, 26, 서울. A non-CS-major graduate switching careers into front-end development via a government-subsidized (국비지원) bootcamp. Chose LikeLion because the program felt approachable and the support (mentoring, subsidy) was stated plainly rather than buried in fine print.

이준호, 22, 대전. A university student joining a LikeLion campus track to build his first real web service. Values the community energy and the sense that he can ship something in a semester without a formal engineering background.

박지영, 34, 경기. A marketer reskilling into AI/data through a short-form course. Appreciates that the jargon is decoded into concrete outcomes and that the interface is clean and fast on her phone during a commute.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and encouraging — consistent with the bright, flat aesthetic. Pill chips and tabs respond to press with a subtle scale/opacity shift; course cards and results fade in from below at motion-standard / ease-enter. Toasts slide/fade in at motion-standard. No heavy bounce or spring — an education product signals steady confidence, not gimmickry, though the single orange accent keeps the feel energetic. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.