Design System Inspiration of Ringle

1. Visual Theme & Atmosphere

Ringle (링글) is Korea's premium 1:1 video-English edtech — "명문대 튜터와의 1:1 화상영어" — and its marketing surface reads like a serious, career-grade learning product rather than a playful language app. The canvas is pure white (#ffffff) with the occasional cool near-white surface (#f8f8fb), and the whole identity orbits a single confident indigo: the CTA purple #3c2bac that fills every "링글 시작하기" / "무료체험" button. That indigo deepens into a family of dark blues — #2b1e90, #4130a4, #201852, #120b60, #1c1374 — that paint the full-bleed feature bands where Ringle showcases its 1:1 화상영어, AI 스피킹, and 기업 솔루션 products in reversed-out white type. The effect is studious and trustworthy: indigo signals focus and intellect, the right register for a product that pairs learners with Ivy/top-MBA tutors.

Typography is the system's backbone and its single most distinctive trait. Display runs in Pretendard JP ExtraBold (weight 800) at large sizes — 52px on the hero, 40px on product headlines, 32px on features — in a deep near-black indigo #140f33, projecting declarative confidence ("영어는 실전처럼"). Body and UI text collapse to a single workhorse, Pretendard Variable, at a quiet 14px / weight 400, with nav and lead text stepping up to Pretendard JP Medium at 14–20px in muted slate #80839e. The hierarchy is carried almost entirely by weight and size, not color: ExtraBold black-indigo to persuade, Medium grey to inform.

What distinguishes Ringle is its restraint. There is essentially no decorative depth — inspected hero, nav, headings, and CTAs all return box-shadow: none; separation comes from flat indigo bands and soft lilac tints (#eeebfa, #cbc5f0, #a89ee6) rather than elevation. Geometry is gently rounded: 8px on primary buttons and cards, 5px on the compact nav CTA, 12px on tinted cards, and a generous 24px on promo banners. A warm gold accent (#ffd391) and a saturated promo blue (#2259e5) appear only in time-boxed promotion chrome, and a bright sky blue (#4495ff) is reserved for the 틴즈 (teens) sub-brand. The result is a calm, intellectual, mobile-first system — premium without being cold.

Key Characteristics:

• Single indigo identity — CTA purple #3c2bac deepening into #2b1e90, #4130a4, #201852, #120b60 dark bands
• Pretendard JP ExtraBold (weight 800) for all display headlines — declarative, career-grade voice
• Pretendard Variable weight 400 at 14px as the single body/UI workhorse
• Near-black indigo #140f33 for headings; muted slate #80839e for nav and sub-text
• Flat depth: no shadow on inspected nodes; lilac tints (#eeebfa, #cbc5f0, #a89ee6) and indigo bands do the separating
• Gently rounded geometry — 8px buttons/cards, 5px nav CTA, 12px tint cards, 24px promo banners
• Reserved accents: gold #ffd391 + promo blue #2259e5 for promotions; sky blue #4495ff for 틴즈
• Hierarchy by weight/size, not color — ExtraBold to persuade, Medium grey to inform

2. Color Palette & Roles

Primary

• Ringle Indigo (#3c2bac): Primary brand color and CTA background — the saturated indigo-purple that fills "링글 시작하기" and "무료체험". The single "action" color.
• Deep Indigo (#2b1e90): Brand-text indigo used for inline product names and emphasis (e.g. "링글 1:1 화상영어").
• Indigo Band (#4130a4): A mid dark-indigo seen as a recurring surface fill across feature sections.

Dark Indigo Bands

• Indigo Dark (#201852): Dark band background behind reversed-out white feature copy.
• Indigo Darkest (#120b60): Near-black indigo for "더 알아보기" links on the darkest product bands.
• Indigo Title (#1c1374): Deep indigo used on some product-landing hero headlines.

Neutral & Surface

• Pure White (#ffffff): Page background, white cards, reversed-out text on indigo bands.
• Surface (#f8f8fb): Cool near-white surface for alternating sections.
• Tint (#eeebfa): Soft lilac-tint card and section background.
• Tint Mid (#cbc5f0): A stronger lilac tint for highlighted surfaces.
• Lilac (#a89ee6): The mid lilac used for illustration fills and accent surfaces.

Text Hierarchy

• Ink Indigo (#140f33): Primary heading and strong text — near-black indigo, never pure black.
• Body Slate (#3e426a): Secondary body copy.
• Slate (#5a5e7f): Tertiary headings and labels.
• Muted (#80839e): Nav items, captions, lead/sub text, lowest-emphasis labels.

Accents (reserved)

• Gold (#ffd391): Warm gold accent text, used only inside promotion chrome.
• Promo Blue (#2259e5): Saturated blue for the time-boxed promotion bar and banner cards.
• Teens Blue (#4495ff): Bright sky blue reserved for the 링글 틴즈 (teens) sub-brand CTAs.
• On Primary (#ffffff): White text/icons on indigo and blue surfaces.

3. Typography Rules

Font Family

• Display: Pretendard JP ExtraBold (also Pretendard JP Bold, Pretendard JP Medium, Pretendard JP Regular) — all headlines, eyebrows, nav, and lead text.
• Body: Pretendard Variable (with Noto Sans KR fallback) — the document default and the single body/UI workhorse at weight 400.

Hierarchy

Principles

• Bold display, light body: ExtraBold (800) carries every headline; Pretendard Variable 400 carries every paragraph. Weight contrast is the primary hierarchy signal.
• One body font: Pretendard Variable is the single workhorse for body and UI — the system does not mix functional typefaces.
• Color stays quiet in type: headings sit in near-black indigo #140f33, sub/nav in muted #80839e; saturated indigo is reserved for interactive elements, not running text.
• Hangul-first sizing: body at 14px with ~1.57 line-height — generous for dense hangul reading.

4. Component Stylings

Buttons

Primary CTA

• Background: #3c2bac
• Text: #ffffff
• Radius: 8px
• Font: 18px Pretendard
• Height: 61px
• Use: Primary call-to-action — "링글 시작하기"

Header CTA (무료체험)

• Background: #3c2bac
• Text: #ffffff
• Radius: 5px
• Padding: 10px 16px
• Height: 42px
• Use: Compact header free-trial button

On-Dark Link

• Background: #120b60
• Text: #ffffff
• Radius: 8px
• Height: 60px
• Use: "더 알아보기" link on the darkest indigo feature bands

Teens CTA

• Background: #4495ff
• Text: #ffffff
• Radius: 8px
• Height: 60px
• Use: 링글 틴즈 sub-brand "틴즈 더 알아보기" button

Inputs

Default

• Background: #ffffff
• Border: 1px solid #cbc5f0
• Radius: 8px
• Text: 14px Pretendard Variable
• Use: Form / auth text field on white canvas

Cards & Containers

Lilac Tint Card

• Background: #eeebfa
• Text: #140f33
• Radius: 12px
• Use: Soft lilac-tinted content card on white

Promotion Banner

• Background: #2259e5
• Text: #ffffff
• Radius: 24px
• Padding: 60px
• Use: Time-boxed promotion banner card (gold #ffd391 accent label inside)

Badges

Gold Promo Label

• Background: #2259e5
• Text: #ffd391
• Radius: 4px
• Font: 16px Pretendard JP Bold
• Use: Promotion accent label — warm gold on promo blue

Navigation

• Background: #ffffff
• Text: #80839e
• Active: #3c2bac indigo text
• Font: 14px Pretendard JP Medium
• Use: Top horizontal nav ("제품소개", "고객사례", "튜터", "교재", "가격")

Footer

• Links: #80839e, 14px Pretendard Variable
• Use: Footer navigation links

---

Verified: 2026-06-11 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.ringleplus.com, https://www.ringleplus.com/ko/student/landing/home, https://www.ringleplus.com/en/student/landing/blog Tier 2 sources: none available (getdesign.md/ringle → "No designs found"; styles.refero.design ?q=ringle → no Ringle-specific style) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 10px, 16px, 24px, 40px, 60px
• Notable: promotion banner cards use a generous 60px padding for an editorial, full-bleed feel

Grid & Container

• Centered single-column hero anchored by the 52px ExtraBold headline
• Product hubs (1:1 화상영어 / AI 스피킹 / 기업 / 틴즈) stack as alternating full-width bands — white sections vs dark indigo bands (#201852, #120b60)
• Each product band pairs a 22px Bold eyebrow label, a 40px ExtraBold headline, and an indigo "더 알아보기" CTA
• Cards group related case studies and use 12px radius

Whitespace Philosophy

• Editorial breathing room: generous vertical rhythm between product bands; the page reads top-to-bottom as a sequence of self-contained product stories.
• Band segmentation: sections separate by background — white #ffffff, near-white #f8f8fb, lilac tint #eeebfa, and dark indigo bands — not by borders or shadow.
• Reserved accent rhythm: gold #ffd391 and promo blue #2259e5 appear only in promotion chrome, keeping the indigo identity dominant.

Border Radius Scale

• Extra small (4px): badges, small chips
• Small (5px): compact header CTA
• Medium (8px): primary buttons, inputs, standard cards — the workhorse
• Large (12px): tinted content cards
• Extra large (24px): promotion banner cards

6. Depth & Elevation

Shadow Philosophy: Ringle reads as a near-shadowless system on its primary surfaces. Live inspection found box-shadow: none across the hero, nav, headings, and CTAs. Depth and grouping are communicated through flat color — soft lilac tints (#eeebfa, #cbc5f0) and full-bleed dark indigo bands (#201852, #120b60) — rather than elevation. When emphasis is needed the system reaches for color (indigo #3c2bac, or a dark band), not a drop shadow.

7. Do's and Don'ts

Do

• Use indigo #3c2bac as the single primary action color for CTAs ("링글 시작하기", "무료체험")
• Use Pretendard JP ExtraBold (800) for all display headlines — it's the brand's voice
• Use Pretendard Variable weight 400 at 14px for body and dense UI text
• Use near-black indigo #140f33 for headings instead of pure black
• Separate sections with flat tints (#eeebfa, #f8f8fb) and dark indigo bands (#201852, #120b60)
• Reverse copy out to white on the dark indigo product bands
• Reserve gold #ffd391 and promo blue #2259e5 for promotion chrome only
• Use sky blue #4495ff only for the 틴즈 sub-brand

Don't

• Spread the indigo across many elements — keep #3c2bac the single action signal
• Use a drop shadow for elevation — separate with tint and bands instead
• Use pure black for headings — reserve near-black indigo #140f33
• Mix a second body typeface — Pretendard Variable is the one workhorse
• Let gold or promo blue leak outside time-boxed promotion surfaces
• Set headlines in a light weight — display is always ExtraBold (800)
• Carry color in running text — keep saturated indigo for interactive elements

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 61px height — an unmistakable tap target
• Header CTA at 42px height with 10px 16px padding
• On-dark and teens links at 60px height

Collapsing Strategy

• Hero: 52px ExtraBold headline scales down on mobile, weight 800 maintained
• Product bands: full-bleed white/indigo alternation preserved on all viewports
• Case-study cards: multi-column → stacked single column

Image Behavior

• Product/illustration imagery carries no shadow, consistent with the flat system
• Cards maintain 12px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Ringle Indigo (#3c2bac)
• Deep / brand-text indigo: (#2b1e90)
• Dark bands: (#201852, #120b60)
• Background: Pure White (#ffffff); near-white surface (#f8f8fb)
• Lilac tints: (#eeebfa, #cbc5f0, #a89ee6)
• Heading text: Ink Indigo (#140f33)
• Body text: Body Slate (#3e426a)
• Nav / muted text: Muted (#80839e)
• Promotion accents: gold (#ffd391) + promo blue (#2259e5)
• Teens sub-brand: (#4495ff)

Example Component Prompts

• "Create a hero on white. Headline at 52px Pretendard JP ExtraBold weight 800, color #140f33. Sub-line 20px Pretendard JP Medium, color #80839e. Primary CTA: #3c2bac background, white text, 8px radius, 61px tall — '링글 시작하기'."
• "Design a dark product band: #120b60 background, full width. 22px Bold white eyebrow, 40px ExtraBold white headline, and a '더 알아보기' link on #120b60 with 8px radius."
• "Build a lilac tint card: #eeebfa background, 12px radius, no shadow. Title 32px Pretendard JP ExtraBold #140f33, body 14px Pretendard Variable #3e426a."
• "Create a top nav: white background, 14px Pretendard JP Medium links in #80839e, active item indigo #3c2bac. Right-aligned '무료체험' CTA: #3c2bac, 5px radius, 10px 16px padding."

Iteration Guide

1. Pretendard JP ExtraBold (800) for every headline; Pretendard Variable 400 for every paragraph
2. Indigo #3c2bac is the single action color — don't spread it
3. No shadows — separate with lilac tint #eeebfa and dark indigo bands #201852 / #120b60
4. Gently rounded — 8px buttons/cards, 12px tint cards, 24px promo banners
5. Heading color is #140f33 indigo, never pure black
6. Reverse to white on dark bands; keep gold/promo blue inside promotion chrome only
7. Sky blue #4495ff only for the 틴즈 sub-brand

---

10. Voice & Tone

Ringle's voice is earnest, ambitious, and pragmatic — an English-learning guide aimed squarely at working adults and high achievers who want real, career-grade fluency, not casual chat practice. The hero line "영어는 실전처럼" ("English, like the real thing") sets the register: outcome-focused, confident, never gimmicky. Copy treats the learner as a serious professional building a skill that compounds into a career — "일하는 사람을 위한 영어" (English for people who work).

Voice samples (verbatim from live surfaces):

• "영어는 실전처럼. 명문대 튜터와의 1:1 맞춤 화상영어" — homepage hero. (verified live 2026-06-11)
• "꿈꾸던 영어실력과 커리어를 만드는 일하는 사람을 위한 영어, 링글" — hero sub-line. (verified live 2026-06-11)
• "200+개 이상의 기업이 링글과 함께 하고 있습니다" — B2B proof headline. (verified live 2026-06-11)

Forbidden register: casual gamified hype, fear-based "you're behind" pressure, undefined jargon, exclamation-heavy marketing.

11. Brand Narrative

Ringle (링글, 링글잉글리시에듀케이션서비스) was founded in 2015 by 이성파 (Lee Sungpah) and 이승훈 (Lee Seunghoon), two co-founders who met as classmates in the Stanford MBA program. The founding insight came directly from their own pain: despite strong credentials, they struggled to express themselves in English in a top global environment — and realized many capable Korean professionals hit the same wall. The product they built reframed English education from rote test-prep into real conversation practice with tutors from top universities, structured around current-affairs reading material and AI-assisted feedback.

Ringle's stated mission, per the founders, is "영어 장벽이 없는 세상을 만드는 것" — to build a world without the English-language barrier. The product matured into Korea's leading premium 1:1 화상영어 (video-English) platform: 20–40 minute lessons with Ivy/top-MBA tutors, a library of 200+ discussion materials, real-time Google Docs collaboration, and AI conversation analysis — later extended into AI 스피킹 (unlimited AI speaking), a 기업 (B2B corporate) solution used by 200+ companies, and the 틴즈 (teens) sub-brand.

What Ringle refuses, visible in its design: the playful, gamified chrome of casual language apps, and the intimidating test-factory aesthetic of legacy English academies. What it embraces: a calm, intellectual indigo identity; bold ExtraBold headlines that speak to ambition; and copy that ties English fluency directly to career and real-world performance. The company also notes it now earns 30%+ of revenue outside Korea, reflecting a global ambition consistent with its founding story.

12. Principles

1. Real practice over rote prep. Ringle exists to build usable fluency, not test scores. UI implication: lead with conversation/outcome framing ("영어는 실전처럼"); keep product structure (tutor, material, feedback) visible and concrete.
2. Premium and intellectual, not playful. The brand earns trust by feeling serious. UI implication: indigo #3c2bac identity, ExtraBold display type, near-black indigo #140f33 text — no gamified color or bounce.
3. One action, one color. Indigo means "do this." UI implication: reserve #3c2bac for the primary CTA so the next step is never ambiguous.
4. Calm bands over decorative depth. UI implication: no shadows; separate with lilac tints and full-bleed dark indigo bands; reverse copy to white on dark.
5. Career-first framing. English is a professional skill that compounds. UI implication: tie features to outcomes ("일하는 사람을 위한 영어", B2B proof), and address the learner as a serious professional.

13. Personas

Personas below are fictional archetypes informed by publicly observable Ringle user segments (Korean working professionals, jobseekers targeting global roles, corporate L&D buyers), not individual people.

김도현, 31, 서울. A product manager preparing to interview at global tech companies. Wants real speaking reps with a sharp tutor, not vocabulary drills. Chose Ringle because the lessons feel like the actual high-stakes conversations he's preparing for.

박지은, 36, 경기. A working parent who studies in 20-minute lessons between job and home life. Values the flexibility and the AI 스피킹 app for unlimited low-pressure practice on her own schedule.

이상우, 44, 기업 HR. An L&D manager rolling out Ringle's B2B solution to employees. Wants measurable speaking assessment, managed delivery, and a vendor that feels premium enough to put in front of executives.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and composed — consistent with the calm, intellectual aesthetic. Product bands fade-and-rise into view at motion-standard / ease-enter; CTAs respond to press with a subtle scale/opacity shift. No bounce or spring — a career-grade learning product signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.