--- id: ringle name: Ringle display_name_kr: 링글 country: KR category: education homepage: "https://www.ringleplus.com" primary_color: "#3c2bac" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=ringleplus.com&sz=128" verified: "2026-06-11" added: "2026-06-11" omd: "0.1" tokens: source: live-extract extracted: "2026-06-11" note: "primary = live CTA indigo (#3c2bac, '링글 시작하기' / '무료체험'); deeper indigos (#2b1e90, #4130a4, #201852, #120b60) anchor dark hero bands. Headings near-black indigo #140f33; muted nav/sub text #80839e. Single body font Pretendard Variable; display in Pretendard JP ExtraBold. Flat, shadowless on inspected nodes." colors: primary: "#3c2bac" primary-deep: "#2b1e90" indigo: "#4130a4" indigo-darker: "#201852" indigo-darkest: "#120b60" indigo-title: "#1c1374" ink: "#140f33" body: "#3e426a" slate: "#5a5e7f" muted: "#80839e" tint: "#eeebfa" tint-mid: "#cbc5f0" lilac: "#a89ee6" canvas: "#ffffff" surface: "#f8f8fb" gold: "#ffd391" promo-blue: "#2259e5" teens-blue: "#4495ff" on-primary: "#ffffff" typography: family: { display: "Pretendard JP ExtraBold", body: "Pretendard Variable" } display-hero: { size: 52, weight: 800, lineHeight: 1.30, use: "Hero headline, Pretendard JP ExtraBold" } section: { size: 40, weight: 800, lineHeight: 1.30, use: "Product/section headlines, ExtraBold" } feature: { size: 32, weight: 800, lineHeight: 1.31, use: "Feature headline, ExtraBold" } eyebrow: { size: 22, weight: 700, lineHeight: 1.40, use: "Section label, Pretendard JP Bold" } lead: { size: 20, weight: 500, lineHeight: 1.40, use: "Hero sub / lead text, Pretendard JP Medium" } body: { size: 14, weight: 400, lineHeight: 1.57, use: "Body + nav, Pretendard Variable" } nav: { size: 14, weight: 500, lineHeight: 1.57, use: "Top nav items, Pretendard JP Medium" } spacing: { xs: 4, sm: 8, md: 10, base: 16, lg: 24, xl: 40, xxl: 60 } rounded: { xs: 4, sm: 5, md: 8, lg: 12, xl: 24, full: 40 } shadow: none: "none" components: button-primary: { type: button, bg: "#3c2bac", fg: "#ffffff", radius: "8px", height: "61px", font: "18px / 400 Pretendard", use: "Primary CTA — 링글 시작하기" } button-nav: { type: button, bg: "#3c2bac", fg: "#ffffff", radius: "5px", padding: "10px 16px", height: "42px", use: "Header 무료체험 CTA" } button-on-dark: { type: button, bg: "#120b60", fg: "#ffffff", radius: "8px", height: "60px", use: "더 알아보기 link on dark indigo band" } button-teens: { type: button, bg: "#4495ff", fg: "#ffffff", radius: "8px", height: "60px", use: "링글 틴즈 더 알아보기 CTA" } nav-link: { type: tab, fg: "#80839e", font: "14px / 500 Pretendard JP Medium", active: "text #3c2bac", use: "Top nav item, indigo on active/hover" } card-tint: { type: card, bg: "#eeebfa", fg: "#140f33", radius: "12px", use: "Soft lilac-tint content card" } card-promo: { type: card, bg: "#2259e5", fg: "#ffffff", radius: "24px", padding: "60px", use: "Promotion banner card, gold accent #ffd391" } badge-gold: { type: badge, bg: "#2259e5", fg: "#ffd391", radius: "4px", font: "16px / 700 Pretendard JP Bold", use: "Promo accent label (gold on promo blue)" } footer-link: { type: listItem, fg: "#80839e", font: "14px / 400 Pretendard Variable", use: "Footer / nav link" } components_harvested: true --- # 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 | Role | Font | Size | Weight | Line Height | Notes | |------|------|------|--------|-------------|-------| | Display Hero | Pretendard JP ExtraBold | 52px (3.25rem) | 800 | ~1.30 | Homepage hero, color `#140f33` | | Section Headline | Pretendard JP ExtraBold | 40px (2.50rem) | 800 | ~1.30 | Product hub headlines | | Feature Headline | Pretendard JP ExtraBold | 32px (2.00rem) | 800 | ~1.31 | In-section feature heads | | Eyebrow / Label | Pretendard JP Bold | 22px (1.38rem) | 700 | ~1.40 | Product name label (e.g. "링글 AI 스피킹") | | Lead / Sub | Pretendard JP Medium | 20px (1.25rem) | 500 | ~1.40 | Hero sub-line, color `#80839e` | | Nav | Pretendard JP Medium | 14px (0.88rem) | 500 | ~1.57 | Top nav items | | Body | Pretendard Variable | 14px (0.88rem) | 400 | ~1.57 | Standard reading text | ### 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 | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, inline text, hero, nav, CTAs (inspected `box-shadow: none`) | | Tint (Level 1) | Lilac `#eeebfa` / surface `#f8f8fb` background shift | Card/section separation without elevation | | Band (Level 2) | Dark indigo (`#201852`, `#120b60`) full-bleed band | Product feature sections with reversed white type | **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 | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Single column, hero headline compresses, product bands stack | | Tablet | 640-1024px | Moderate padding, 2-up case-study cards | | Desktop | 1024-1440px | Full layout, centered hero, full-bleed alternating bands | ### 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). | Context | Tone | |---|---| | Hero headlines | Declarative, outcome-framed. "영어는 실전처럼." Confident, not hype. | | Product labels | Plain and structural. "링글 1:1 화상영어", "링글 AI 스피킹", "링글 기업 영어 솔루션". | | CTAs | Direct, low-pressure. "링글 시작하기", "무료체험", "더 알아보기". | | Feature descriptions | Benefit-first, career-framed. Ties English skill to professional outcomes. | | Trust copy | Concrete and proof-led. "200+개 이상의 기업이 링글과 함께 하고 있습니다". | **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 | State | Treatment | |---|---| | **Empty (no lessons booked)** | White canvas. Single Ink Indigo (`#140f33`) line at body size explaining nothing is scheduled, with one indigo `#3c2bac` CTA to book. No clutter. | | **Empty (no saved material)** | Muted (`#80839e`) single line: nothing saved yet, plus a path back to the material library. Calm and honest. | | **Loading (tutor list / schedule)** | Skeleton rows on lilac tint `#eeebfa` at final card dimensions, 12px radius. Flat pulse — no shadow shimmer, consistent with the shadowless system. | | **Loading (AI speaking compute)** | Inline progress within the tool surface; previous content stays visible. | | **Error (booking failed)** | Inline message in Ink Indigo with a plain-language explanation and a retry. States the next step, never a bare "오류가 발생했습니다". | | **Error (form validation)** | Field-level message below the input describing what's valid, not just "필수". | | **Success (lesson booked)** | Brief inline confirmation in calm tone; next-step detail linked immediately below. No celebratory emoji. | | **Skeleton** | `#eeebfa` blocks at final dimensions, 12px radius, flat pulse. | | **Disabled** | Muted (`#80839e`) text on reduced-opacity surface; indigo actions fade rather than turn grey to preserve brand read. | ## 15. Motion & Easing **Durations**: | Token | Value | Use | |---|---|---| | `motion-fast` | 120ms | Hover, button press, focus | | `motion-standard` | 220ms | Card/section reveal, sheet, dropdown | | `motion-slow` | 340ms | Page-level transitions, hero/band reveal | **Easings**: | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, bands, sheets | | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals | | `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions | **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. --- Source: https://oh-my-design.kr/design-systems/ringle · Raw twin of references/ringle/DESIGN.md Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills