Design System Inspiration of LikeLion

1. Visual Theme & Atmosphere

LikeLion (멋쟁이사자처럼) is a Korean programming-education brand whose public home surface currently groups course discovery, K-Digital Training bootcamps, AI education, and business education. Its official history page traces the brand to 2013 and the “HACK YOUR LIFE!” idea of turning an individual’s idea into something they can make; its current business page frames learning around practical problems, mentoring, and shared experience. The supplied desktop homepage translates that welcoming, action-oriented positioning into a restrained field of #222222 copy and #e5e5e5 hairlines, with #ff6000 concentrated in the search/attention treatment and #fcf4ee warming a large promotional tile. The public design-system URL is retained as official documentation, but this collector run reached its Storybook documentation chrome rather than component stories; it is not used to fill in a generic component library.

The reference deliberately keeps the two domains distinct. Homepage measurements describe a public course-marketing/catalog surface. Documentation chrome establishes only that the public documentation route exists; its controls, colors, and loaded font observation do not authorize product or marketing component tokens.

Key Characteristics:

• Orange #ff6000 is an observed attention/search color on the captured homepage, not a universal semantic palette.
• Homepage foreground is #222222, with #a3a3a3 and #737373 as observed lower-emphasis text.
• An observed warm #fcf4ee promo tile supplies the strongest surfaced color block.
• The verified geometry is local: a 16px promo tile and a 9999px navigation-account pill.
• The observed marketing computed face is unresolved; a loaded Pretendard observation on documentation chrome is not promoted to a homepage UI-family token.

2. Color Palette & Roles

Observed homepage roles

• Attention / search (#ff6000): observed as the course-search input foreground at home::[data-omd-capture="7"].
• Primary foreground (#222222): repeated homepage text color, including the warm promo tile.
• Muted text (#a3a3a3): repeated lower-emphasis homepage text.
• Secondary muted text (#737373): observed on the homepage search-input border sample and other low-emphasis text.
• Hairline (#e5e5e5): repeated homepage border color in the collector output.
• Warm promo surface (#fcf4ee): home::[data-omd-capture="13"] background.
• Account-pill border (#d4d4d4): observed on the navigation account control.

Boundary

The supplied homepage evidence does not establish a filled orange CTA, orange hover color, semantic success/error palette, a neutral scale, or a general canvas token. Documentation-chrome values such as #6b7583, #4e5967, #f3f4f6, and #e5e7ea are not marketed as LikeLion product tokens here.

3. Typography Rules

Evidence classes

• Live product/marketing computed use — unresolved: the homepage computes Pretendard Variable on 193 visible captured elements. The collector found no matching loaded FontFaceSet record or source URL for that exact family, so it is not a tokens.typography.family token.
• Documentation-chrome computed use — loaded: the Storybook documentation route computes pretendard / Pretendard on 34 visible elements; it has loaded FontFaceSet corroboration and 22 source URLs, including LikeLion-hosted static Pretendard files and the Pretendard CDN. This verifies the documentation-chrome observation only, not course-product use.
• Declared-only: Gotham, HeirofLight, Noto Sans Mono, Nunito Sans, and slick have declared font-face assets with zero visible captured use. They are not family tokens or specimens.
• Official font and licence context: the upstream Pretendard project publishes its files under SIL Open Font License 1.1. That licence describes Pretendard’s upstream distribution; it does not establish that the declared Gotham, HeirofLight, or Noto Sans Mono files are reusable assets. Pretendard licence
• System fallback: the homepage’s fallback list is a fallback list, not evidence for a substitute branded family.

Measured homepage hierarchy

Do not substitute a system font and call it Pretendard. The exact marketing computed family remains unresolved until matching FontFaceSet/source evidence is captured on that surface.

4. Component Stylings

All component observations below are scoped to the supplied home desktop capture. The bundle records one documentation form-error interaction and no homepage interaction flow; focus/pressed rows on the course search are pseudo-state samples, not a general product-state contract. Documentation-chrome controls are excluded.

Promotional tile

Warm promotional tile — observed default

• Background: #fcf4ee
• Text: #222222
• Radius: 16px
• Padding: 40px
• Font: 16px / 400 / unresolved computed stack
• States: Default observed only
• Use: home::[data-omd-capture="13"]; clickable warm promotional tile, 310px rendered height.

Navigation account control

Login / sign-up pill — observed default

• Text: #222222
• Border: 1px solid #d4d4d4
• Radius: 9999px
• Padding: 10px 16px
• Font: 16px / 400 / unresolved computed stack
• States: Default observed only
• Use: home::[data-omd-capture="6"]; 로그인/회원가입 control, 43px rendered height. The collector’s component classification is low confidence, so no further variant is inferred.

Course search

Course-search input — captured pseudo-state samples

• Text: #ff6000
• Font: 20px / 600 / unresolved computed stack
• Focus: border-color #2563eb in the captured pseudo-state sample while border width remains 0px
• Pressed: captured pseudo-state sample only
• Use: home::[data-omd-capture="7"]; course-search input. No result list, validation, disabled, or complete focus-flow state is specified.

No ActionButton, TextField, chip, tab, tag, toast, dialog, card, or responsive variant is specified: the supplied design-system route is documentation chrome rather than a component-story capture, and the homepage does not provide selector-backed observations for those variants.

---

Verified: 2026-07-13 Tier 1 sources: https://likelion.net/; https://designsystem.likelion.net/?path=/docs/intro-introduction--docs; https://k-digital.likelion.net/364c521d-31d4-425e-a281-7d056ce3f8a6; https://likelion.net/b2b Tier 2 sources: https://getdesign.md/likelion (attempted; no usable LikeLion record extracted); https://styles.refero.design/?q=likelion (attempted; no usable LikeLion record extracted) Conflicts unresolved: none

5. Layout Principles

The supplied home surface is a 1440×900 desktop capture. Its reliable layout observations are local: the course-search input rendered 731px wide, the promo tile rendered 310px high with 40px padding, and the account pill rendered 43px high. No public mobile viewport, course-grid rule, carousel behavior, sticky header behavior, or breakpoint was captured, so none is specified.

6. Depth & Elevation

Representative homepage and documentation-chrome samples report box-shadow: none. The observed promo tile is distinguished by #fcf4ee, type, and a 16px radius rather than an elevation value. No global shadow scale or overlay treatment is established.

7. Do's and Don'ts

Do

• Keep the observed homepage scope separate from documentation chrome and official narrative sources.
• Use #ff6000 only for the observed attention/search treatment unless another component has its own selector-backed evidence.
• Preserve the warm promo tile’s #fcf4ee, 16px radius, and 40px padding only in its captured homepage context.
• Treat Pretendard Variable on the homepage as unresolved until exact loaded-face/source corroboration exists.

Don't

• Do not turn the public Storybook’s documentation controls into LikeLion product components.
• Do not recreate historical ActionButton, chip, tab, tag, toast, dialog, hover, disabled, or error variants without current selector and state provenance.
• Do not label Gotham, HeirofLight, Noto Sans Mono, Nunito Sans, or slick as a live UI family.
• Do not derive a semantic palette, breakpoint, or motion system from this two-surface desktop bundle.

8. Responsive Behavior

No mobile viewport or responsive transition was captured. Touch-target, grid, menu-collapse, carousel-scroll, and breakpoint rules require a public responsive observation before they can be specified.

9. Agent Prompt Guide

Verified prompt boundary

“Recreate only the observed LikeLion desktop homepage elements: #222222 foreground with #e5e5e5 hairlines, an #ff6000 course-search input at 20px/600, a warm #fcf4ee promotional tile with 16px radius and 40px padding, and the outlined login pill. Do not add an orange CTA, Storybook component set, mobile layout, semantic states, or a Pretendard substitution.”

10. Voice & Tone

LikeLion’s official materials are practical, encouraging, and learning-oriented. The history page’s “HACK YOUR LIFE!” framing pairs self-directed making with programming education; the current business page describes learning through repeated problem solving, experience sharing, and a shift from AI as a tool to AI as a collaborator. These are brand and educational-context sources, not homepage microcopy rules.

Source-grounded samples.

• “HACK YOUR LIFE!” — official history-page slogan.
• “문제 해결 반복 및 경험 공유” — official business-education process label.
• “AI = 동료” — official business-education process label.

11. Brand Narrative

LikeLion’s official history page describes an online/offline programming-education brand that began in 2013 around the value of realizing one’s own idea. It presents “HACK YOUR LIFE!” as the through-line, then describes a move into a commercial corporation and additional education initiatives. The current public home surface shows the present offer as a mix of courses, bootcamps, AI education, and business education; the business surface describes AX learning as problem-led, mentored, and collaborative. Official history · Business education

The orange-and-warm-neutral homepage is a separately observed public course-marketing expression of that educational role. It should not be read as proof of a single interface across the learner product, business program, or documentation site.

12. Principles

1. Make ideas buildable. The official history frames programming as a means to realize an individual idea. UI implication: describe a learning path in concrete terms; do not manufacture product features or outcomes.
2. Start from practical problems. The business surface says its AI learning begins with members’ work problems. UI implication: lead educational copy with the task or problem being addressed.
3. Learn through repetition and sharing. The published process names repeated problem solving and experience sharing. UI implication: where learning progress is evidenced, make the next activity and shared context legible.
4. Keep domains honest. Homepage, business education, and documentation serve different contexts. UI implication: do not carry a token or component from one domain into another without direct evidence.

13. Personas

The first-party sources in this pass establish learner and organisation-facing education contexts, but do not supply enough persona research to support invented demographic archetypes.

• Individual learners: public course and bootcamp visitors. [FILL IN: task, constraints, and needs from user-provided research]
• Organisation learning teams: business/AX education decision-makers and participants. [FILL IN: task, constraints, and needs from user-provided research]
• Documentation readers: public Storybook/documentation visitors. [FILL IN: task and component-story evidence]

14. States

No course-product empty, loading, success, disabled, or error state was captured. The only recorded interaction is a form-error sample on documentation chrome, which is not promoted to the course surface.

15. Motion & Easing

No motion, transition, or user-flow state was supplied for the homepage. [FILL IN: selector-backed public motion evidence required]