Design System Inspiration of Class101 (클래스101)

1. Visual Theme & Atmosphere

Class101 is an online learning marketplace and subscription service. Its public CLASS101+ material describes a subscription that lets members use a range of existing Class101 content, while the official creator centre presents classes and products across hobbies, work skills, and side projects. The captured Korean home is a white, typographic storefront: black and near-black text dominate, with a small #FF5D00 orange accent appearing in home-title text. Its live web interface uses Pretendard Variable and compact, neutral controls rather than a captured public design-system token set. The current record deliberately separates that product surface from the terms and privacy pages, whose legal-document chrome is evidence for those pages only.

Primary tasks

• Subscribe as a member and use the range of existing classes the subscription covers
• Find classes and products across hobbies, work skills, and side projects
• Publish a class or product as a creator starting a creator journey

2. Color Palette & Roles

Class101 does not publish a public token specification in the sources reviewed. These are raw computed values from the supplied capture, not a reconstructed palette.

• Orange accent (#FF5D00): observed on home::[data-testid="title"] text on the product home (3 medium-confidence occurrences). It is retained as the catalog primary color, but the capture does not establish a general CTA role.
• Canvas (#FFFFFF): observed body background across product home and both official documents (3 high-confidence occurrences).
• Foreground (#0C0C0C): high-confidence text on the product home and legal documents (498 occurrences); a #000000 foreground is also widely observed in both domains.
• Muted text (#373737): observed text / border value (12 high-confidence occurrences); one home title sample resolves to rgba(55, 55, 55, 0.8).

No success, error, warning, CTA-background, hover, or shadow color is promoted: the supplied evidence does not establish those roles.

3. Typography Rules

Evidence classes

• Live product and document use — confirmed. Pretendard Variable is the computed family on the captured home and official legal-document pages. It has 753 captured uses across body, controls, headings, list items, tabs, and text, and a matching loaded FontFace set with 92 jsDelivr source URLs. This is the only family promoted to tokens.typography.family.sans.
• Declared-only fallbacks — not promoted. The computed stack also names Pretendard JP Variable, Pretendard JP, Pretendard, system-ui, platform UI fonts, Roboto, Noto Sans KR, and Malgun Gothic. The collector did not report a loaded match for these individual fallback faces, so they remain fallback declarations rather than UI-family claims.
• Official distributed font asset and license. Pretendard’s official project documents its variable dynamic subset under the family name "Pretendard Variable"; it is distributed under the SIL Open Font License. That source confirms the font asset and licence boundary, not a separate Class101-owned font.

Observed type scale

4. Component Stylings

Only the following components have selector and surface provenance. The bundle holds no pointer-state frame (::state-*) on any surface, so hover, focus and pressed are not asserted; disabled, error, dialog, toast and input variants were not observed. The one declared state is the legal-document tab's aria-selected="true" variant. Corrected 2026-09-30: the July text gave interactionCount: 0 as the reason; that count covers expansions, not pointer states. It also excluded the selected tab, which the bundle records on both legal pages.

Home navigation button

Default — product home

• Background: transparent
• Border: none
• Radius: 8px
• Label: not sampled. The root computes #000000, 16px / 400 (line height normal), the page's inherited colour and type, and no child label was captured, so no label style is declared.
• Use: Home control at home::[data-omd-capture="6"]; 108px × 38px observed; eleven instances
• Corrected 2026-09-30: the July text listed the root's #000000 and 16px / 400 as the text style.

Home outlined button

Default — product home

• Background: transparent
• Border: 1px rgba(255, 255, 255, 0.298)
• Radius: 12px
• Padding: 14px 13px
• Label: not sampled. The root computes #000000, 16px / 400, the inherited colour and type, and no child label was captured, so no label style is declared.
• Use: Home button at home::[data-omd-capture="28"] and "86"; 240px × 50px observed ("95" has the same outline at 121px wide)
• Corrected 2026-09-30: the July text listed the root's #000000 and 16px / 400 as the text style.

Home tab wrapper

Unselected — product home

• Background: transparent
• Border: none
• Radius: 0px
• Label: not sampled. The tab's colour and type (#000000, 16px / 400 / 16px, tracking normal) equal the inherited body text, so it is a container and no label style is declared.
• Use: div[role="tab"] at home::[data-omd-capture="7"]; aria-selected="false", 97px × 44px observed. All ten home tabs record aria-selected="false", so no selected style is declared.
• Corrected 2026-09-30: the July text listed the container's #000000 and 16px / 400 as the text style.

Legal-document tab

Observed — official documentation chrome

• Background: transparent
• Label: rgba(55, 55, 55, 0.8), 18px / 700 / 22px, tracking -0.288px (the child h3[data-testid="title"])
• Border: bottom 1px transparent (rgba(0, 0, 0, 0)); the other sides are 0px
• Radius: 0px
• Padding: 12px 0px 10px
• Selected: the tab with aria-selected="true" (giftcard capture 2, privacy capture 1) computes a 1px #0C0C0C bottom border and a #0C0C0C label. Both legal pages agree.
• Corrected 2026-09-30: the July text gave this tab a black bottom border and #000000 16px / 400 text. On unselected tabs the 1px bottom border is transparent and the black sits on 0px sides; the #000000 and 16px / 400 are the root's inherited values, and the visible label is its child.
• Use: button[role="tab"] at surface-2::[data-omd-capture="0"]; 61px × 45px observed. This is document chrome, not evidence for product navigation.

Legal-document list item

Default — privacy document

• Background: transparent
• Text: #0C0C0C
• Border: none
• Padding: 0px 0px 0px 24px
• Font: 16px / 400 / Pretendard Variable
• Use: surface-3::li; 28px line height and 4px bottom margin observed

The components below were transcribed on 2026-09-30 from the same 2026-07-12 bundle; nothing was re-measured. None has a state frame.

Tinted compact button

• Background: rgba(0, 0, 0, 0.03)
• Radius: 8px; padding 10px; height 38px
• Label: not sampled; the root computes the inherited #000000 / 16px / 400.
• Use: header link (home::[data-omd-capture="5"], 62px wide) and footer button (home::[data-omd-capture="96"], 74px wide).

Home content card

• Size: 240px × 147px
• Title: #FFFFFF, 18px / 700 / 22px, tracking -0.288px (the child h3[data-testid="title"], 208px wide)
• Use: 52 cards on the home page; evidence home::[data-omd-capture="30"]. The anchor computes no fill and 0px radius, and its image was not captured, so no fill or radius is declared.

Home showcase list button

• Size: 300px × 134px
• Title: 20px / 700 / 26px, tracking -0.36px (the child h3[data-testid="title"], 260px wide). One of the four titles computes #0C0C0C and the other three rgba(55, 55, 55, 0.8). No aria-selected is recorded and nothing else in the capture names the active one, so no selected style is declared.
• Use: four buttons on the home page; evidence home::[data-omd-capture="82"] to "85".

Header category button

• Size: 87px × 22px
• Label: rgba(55, 55, 55, 0.8), 18px / 500 / 22px, tracking -0.288px (the child h3[data-testid="title"], matched by top offset and text length)
• Use: home header; evidence home::[data-omd-capture="2"].

Header accent link

• Size: 179px × 26px
• Label: #FF5D00, 20px / 700 / 26px, tracking -0.36px (the child h3[data-testid="title"], two characters); this is one of the three orange title samples in §2.
• Use: home header; evidence home::[data-omd-capture="1"].

Home list row button

• Size: 600px × 62px
• Label: not sampled; the root computes the inherited #000000 / 16px / 400.
• Use: five stacked rows on the home page; evidence home::[data-omd-capture="88"].

Verified: 2026-07-13 Tier 1 sources: https://class101.net/ko?viewMode=svod (captured product home); https://class101.net/ko/docs/terms/giftcard?viewMode=svod and https://class101.net/ko/docs/terms/privacy?viewMode=svod (captured official-document chrome); https://class101.net/ko/pages/subscription-year2; https://creator.class101.net/; https://github.com/orioncactus/pretendard Tier 2 sources: https://getdesign.md/class101 (attempted; unavailable to built-in web fetch and no indexed record returned); https://styles.refero.design/?q=class101 (attempted; unavailable to built-in web fetch and no indexed record returned) Conflicts unresolved: none

Legacy black #202020 CTA, its hover, semantic palette, shadows, cards, inputs, snackbar, dialog, responsive rules, states, and motion were not supported by the supplied 2026-07-12 capture and were removed rather than promoted. Tier 2 was unavailable and supplied no contrary claim.

5. Layout Principles

The supplied product-home capture is desktop 1440×900 and records a white body extending 6,121px vertically. It contains 16px controls/tabs and a 40px display heading. It does not establish a grid, max width, carousel behavior, card ratio, mobile layout, or sticky behavior; those remain unresolved.

6. Depth & Elevation

The representative captured controls and list items have box-shadow: none. No elevation scale is promoted; unobserved hover and overlay states are omitted.

7. Do's and Don'ts

Do

• Reuse the confirmed Pretendard Variable family when reproducing the captured web surface.
• Keep product-home evidence distinct from legal-document chrome.
• Treat #FF5D00 as an observed orange title accent, not as evidence for an all-purpose action color.

Don't

• Don't restore the legacy black CTA, orange CTA, semantic state colors, or hover shadows without new surface evidence.
• Don't treat declared system-font fallbacks as loaded Class101 font assets.
• Don't infer hover, focus or pressed variants from this capture: it holds no pointer-state frame. The legal-document tab's selected state is the one recorded variant.

8. Responsive Behavior

No responsive transition was captured. The only recorded viewport is desktop 1440×900; mobile, tablet, touch, safe-area, and media behavior are unresolved.

9. Agent Prompt Guide

Verified prompt fragments

• "Use Pretendard Variable; the captured home resolves it through a loaded FontFaceSet match."
• "Create a neutral home navigation button: transparent background, no border, 8px radius, 38px observed height; its label style was not sampled (corrected 2026-09-30: the July fragment gave it #000000 16px / 400 text, the root's inherited values)."
• "Create the observed home outlined button only when its context warrants it: transparent background, 1px rgba(255,255,255,0.298) border, 12px radius, 14px 13px padding, 50px observed height; its label style was not sampled (corrected 2026-09-30: the July fragment gave it #000000 text)."

Do not request unverified cards, inputs, toasts, modal sheets, hover states, responsive behavior, or semantic colors as though they were observed Class101 specifications.

10. Voice & Tone

The reviewed official material supports a creator-facing invitation to begin: the creator centre says "여러분이 사랑하는 일로 더 나은 세상을 만들어 보세요" and presents the English line "Live the way you love." It also addresses creators in a warm polite Korean register. That is insufficient to prescribe a universal consumer-product voice, error style, or system-message rules.

11. Brand Narrative

Class101’s official creator centre frames the service as a place where people can begin a creator journey and publish classes or products spanning hobbies, work skills, and side projects. It also says that completed classes can be translated to meet class members globally. The official CLASS101+ page describes the consumer offering as a subscription that provides access to varied existing Class101 classes. Together, these first-party surfaces establish a two-sided learning marketplace: an audience discovers and subscribes to learning content, while creators receive onboarding and publishing support.

The reviewed sources do not establish founding history, named founders, rebrand chronology, or a comprehensive corporate manifesto. Those claims are omitted rather than reconstructed from secondary reporting.

12. Principles

1. Creator participation is a first-party stated focus. The creator centre invites people to begin their creator journey with Class101. UI implication: creator-centre language belongs to creator acquisition, not automatically to learner checkout or account flows.

2. The catalogue spans multiple learning and product categories. The creator centre names hobby, job, and side-project categories. UI implication: category navigation may be evidenced separately from generic marketing claims; this capture only confirms neutral 16px home controls.

3. CLASS101+ is a subscription offering. The official subscription page describes access to a range of existing Class101 content. UI implication: subscription-specific benefits or purchase states require their own observed surface evidence.

13. Personas

No first-party user-research or persona material was found in the reviewed sources. Do not substitute fictional learners or creators for evidence.

14. States

Empty, loading, success, error, disabled, skeleton, and validation states were not observed in the supplied capture, and the bundle holds no hover, pressed or focus frame. The one recorded state is the legal-document tab's aria-selected="true" variant: a 1px #0C0C0C bottom border and a #0C0C0C label, against a transparent border and a rgba(55, 55, 55, 0.8) label on unselected tabs, on both legal pages (§4). No other state token or copy should be inferred from the default-state components.

15. Motion & Easing

The supplied evidence contains no transition, animation, easing, or reduced-motion observations. Do not promote durations or curves.