링글 DESIGN.md

Design System Inspiration of Ringle

Overview

Visual Theme & Atmosphere

Ringle (링글) is a Korean English-tutoring company that sells 1:1 video lessons with tutors from top English-speaking universities ("명문대 튜터와의 1:1 화상영어"), plus AI 스피킹, an AI speaking test, a corporate English programme and 링글 틴즈 for teenagers. The company behind it, (주)링글잉글리시에듀케이션서비스, is run by its two co-founders and chief executives, 이성파 and 이승훈. Its own team page says 이승훈 started Ringle during his Stanford MBA after six years at BCG, and that the company keeps its head office on 테헤란로 in Seoul with a branch in San Mateo, near Stanford. It states its mission as "누구나 영어의 장벽을 넘어 더 큰 기회를 잡을 수 있는 세상", and its Global BD page says more than 30% of revenue comes from outside Korea. The product pitch is career English, not casual chat: "꿈꾸던 영어실력과 커리어를 만드는 일하는 사람을 위한 영어, 링글".

The marketing surface now lives on two Framer pages: /ko/1on1, where ringleplus.com lands, and /ko/student/landing/home. They set bold Korean headlines in Pretendard JP Bold with very tight tracking (50px at -2.25px on the hero) over white, in black #000000 and #0d0d0d, and put every primary action in one electric violet, #3e00d9. Deeper violets #1d0788 and #120968 fill the secondary actions inside product bands, and the accented half of a headline switches to #3e00d9. Running copy is quiet grey Pretendard JP Medium, #6e737c at 14px. The company page (/ko/company) comes from a different build: Ringle's Next.js web template, set in Pretendard Variable, whose header still carries the earlier indigo #3c2bac. The June 2026 record put #3c2bac on the same 61px 링글 시작하기 button that now computes #3e00d9. Between those dates the marketing CTA moved to a brighter violet, while the app template kept the older one.

Promotions are loud and time-boxed. At capture a black #0d0d0d countdown bar, a #5442fb pill and a red #e80023 banner card with #ffe999 type ran the "9회말 역전 이벤트" sale, up to 59% off. Everything else is flat. The one shadow observed is a faint rgba(20, 15, 51, 0.05) glow under the header.

Key Characteristics:

• One electric violet #3e00d9 for every 링글 시작하기 and for accented headline words; deeper #1d0788 and #120968 for secondary product actions
• Pretendard JP Bold 700 headlines with very tight tracking: -2.25px at 50px, -1.92px at 48px, -1.6px at 40px, -0.96px at 32px
• Grey Pretendard JP Medium copy (#6e737c, #242730, #4f545c) under black #000000 headings
• 8px corners on primary actions, 16px on the promotion pill, 24px on the banner card, 4px on chips
• A second template on /ko/company: Pretendard Variable, indigo #3c2bac header button, 5px corners, hairline #e4e7f4
• Time-boxed campaign chrome in #0d0d0d, #5442fb, #e80023 and #ffe999
• Flat surfaces; the header's rgba(20, 15, 51, 0.05) glow is the only shadow

Primary tasks

• Book a 1:1 video lesson with a tutor and talk for twenty to forty minutes
• Save discussion material from the library to use in a lesson
• Practice speaking with the AI app on your own schedule
• Roll out English lessons to employees and measure how their speaking improves

Brand Narrative

(주)링글잉글리시에듀케이션서비스 is led by its co-founders 이성파 and 이승훈, both listed as 대표이사. On the co-founder page, 이승훈 says he started Ringle during his Stanford MBA after six years at BCG, and 이성파 says he studied engineering and business and wants to build services that make learning easier and more efficient. The company says Ringle exists for the growth of its customers, its tutors and its team.

The team page states the mission: "링글은 누구나 영어의 장벽을 넘어 더 큰 기회를 잡을 수 있는 세상을 만듭니다". Its stated aim is to become the world's No.1 edu-tech company through differentiated tutors, content and technology. It describes a small core team based in Korea and the US: head office on 테헤란로 in Seoul, a branch at a WeWork in San Mateo between Stanford and San Francisco, and remote members in Sydney, Seattle and Pennsylvania. Culture notes include no titles such as 대표님 or 팀장님, only names with 님, and the principle that "모든 아이디어는 평등하다". The Global BD page reports more than 30% of revenue from outside Korea. The site footer lists 링글 1:1 화상영어, 링글 AI 스피킹, 링글 AI 스피킹 테스트, 링글 기업 영어 솔루션 and 링글 틴즈, and cites six consecutive years (2020–2025) as a 한국소비자 평가 최고의 브랜드. The B2B page cites 2000+ native tutors from leading English-speaking universities, more than 75% of them with work experience.

In design terms, Ringle presents itself as serious and ambitious rather than playful: big bold headlines, one decisive violet for the next step, grey copy that stays out of the way.

Principles

1. Real practice over rote prep. UI implication: lead with conversation and outcomes ("영어는 실전처럼"); show lesson length, tutor and correction concretely.
2. One action, one colour. UI implication: #3e00d9 means "start"; secondary actions step down to deeper violets.
3. Headlines carry the page. UI implication: large Pretendard JP Bold with tight tracking; copy in quiet Medium grey.
4. Flat, not decorated. UI implication: separate with bands and colour, not shadows.
5. Campaigns are temporary. UI implication: promotion colours live in removable chrome (top bar, pill, banner card).

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 for interviews at global tech companies. Wants real speaking practice with a sharp tutor, not vocabulary drills.

박지은, 36, 경기. A working parent who fits 20-minute lessons between work and home, and uses AI 스피킹 for low-pressure practice.

이상우, 44, 기업 HR. An L&D manager rolling out Ringle's corporate programme, who wants assessment and attendance management.

Colors

Every token below was read on 2026-09-30 from /ko/1on1, /ko/student/landing/home and /ko/company by the deterministic collector, and label colours and states by the fixed keyboard probe. Tokens describe Ringle's public web pages; the lesson app behind the login was not opened.

Primary

• Ringle Violet (#3e00d9): The fill of 링글 시작하기, the primary action, which is 200 × 61 in the hero of both Framer pages and repeats at 320 × 61 three more times down /ko/1on1. The same violet fills two of the "더 알아보기" actions on /ko/student/landing/home and colours the accented half of feature headlines. It is the primary because it is the colour of the one action the homepage asks for, in every place it asks. The older #3c2bac survives only in the /ko/company header, a different template.
• On Primary (#ffffff): The 18px/700 label inside 링글 시작하기 and the label of the promotion pill.

Secondary violets

• Deep Violet (#1d0788): 320 × 57 actions inside the product bands of /ko/1on1 and a 200 × 60 action on the landing page.
• Navy (#120968): A 200 × 60 action on the landing page, dark 48px headlines on /ko/1on1 and 16px bold link text.
• App Violet (#3c2bac): The fill of 무료 체험하기 and the outline and label of 로그인 in the /ko/company header.
• Lilac (#aa9dff): The second line of white headlines on dark bands. #7665f7 plays the same role once.
• Sky (#1170ff): One 200 × 60 action with a nine-character label in the product list of /ko/student/landing/home. The collector did not record the label.

Campaign (time-boxed)

• Promo Violet (#5442fb): The 660 × 80 "9회말 역전 이벤트 특가 확인하기" pill.
• Promo Red (#e80023): The 1180 × 170 promotion banner card.
• Promo Yellow (#ffe999): The 32px heading on that card.
• Ink Soft (#0d0d0d): The 44px countdown bar across the top. The same near-black also sets navigation labels and many headings.

Text

• Ink (#000000): Hero and section headlines.
• Body (#242730): Review and story copy at 17px.
• Slate (#4f545c): Card descriptions at 16px SemiBold.
• Muted (#6e737c): Running copy at 14px and review metadata at 10px. This is the most frequent text colour on the Framer pages.
• Faint (#9ea3ab): The quietest copy and metadata.
• App Slate (#3e426a): Navigation labels on /ko/company.
• App Muted (#80839e): Footer lists on /ko/company.

Neutral & Surface

• White (#ffffff): The page, the header, chips and round controls.
• Hairline (#e4e7f4): The 1px border of the white tiles on /ko/company, and its default border colour.
• Nav Hover (#fbfbff): The row tint behind a /ko/company navigation item on hover and press.

Brand assets, not tokens

• The Ringle logo was not measured; no logo colour is claimed. Framer links report the browser's default link colours (#0000ee, and #ff0000 while pressed) on elements whose visible text is a child. Those are not brand colours.

Typography

Font Family

• Live surface use: Pretendard JP Medium (282 observed uses), Pretendard JP Bold (204) and Pretendard JP SemiBold (42), all loaded / high, on the two Framer pages. They are uploaded to Framer as custom fonts and served from framerusercontent.com/assets/ (for example gTPCJvFiJP72BBM1FJNS8i0ZKM.woff2 for Bold and ZSHRGvJTyXobYS1wVqLXesolkY.woff2 for Medium). Pretendard Variable (78 uses, loaded / high) sets /ko/company, served from cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6. Source Serif 4 is loaded and computed on 3 elements of the Framer pages.
• Official distributed font assets: Pretendard is Kil Hyung-jin's open-source family (orioncactus/pretendard). Its LICENSE, opened on 2026-09-30, reserves the font name 'Pretendard', lists works including M PLUS 1 among the included sources, and states the SIL Open Font License 1.1. The identification of Ringle's files rests on the declared family names; the files' name tables were not inspected.
• Official product use: no Ringle page opened this session names its typefaces, so no statement of official product use is made.
• Declared only (no visible use): Pretendard JP ExtraBold has an @font-face rule on the Framer pages (NTnDzxbPhY5dHz1DNJIl5Jgf9o0.woff2), but no captured element computes it. Framer also declares Archivo, Archivo Narrow, Barlow Semi Condensed, Charis SIL, Inter, Noto Sans KR and others with 0 uses. /ko/company declares the Feather icon font.
• Unresolved: one element computes CUSTOM;Pretendard Medium. Framer's wrapper elements compute the browser default sans-serif at 12px; the text inside them is set in the Pretendard JP faces above.

Hierarchy

Principles

• Bold, tracked tight: every Framer headline is weight 700, with tracking at about -4.5% of the size at 48–50px and -3% at 32px.
• Medium for reading: copy runs in Pretendard JP Medium or SemiBold, never Regular, in cool greys.
• Two templates: the Framer marketing pages use the Pretendard JP faces; the Next.js company page uses Pretendard Variable at 400 and 500 with untracked text.

Layout

Spacing System

• Observed paddings: 16px 24px on band buttons, 14px 16px on the promotion pill, 60px 0 60px 80px on the banner card, 10px 16px on chips, 8px 16px on /ko/company header buttons, 4px 6px on its navigation rows, 12px in its tiles.
• The Framer primary button computes 0 padding; its size comes from the layout (200 × 61 or 320 × 61).

Grid & Container

• Content sits in an 1180px column at the 1440px viewport, the width of the section headlines and the banner card.
• /ko/1on1 is a long page (about 26,700px) of alternating white and dark bands; the landing page stacks product blocks, each with a heading and a 200 × 60 action.

Whitespace Philosophy

• Headlines carry the page; large bold type with generous space between bands, and grey copy kept short beside it.

Border Radius Scale

• 4px: chips and /ko/company navigation rows
• 5px: /ko/company header buttons
• 7px: /ko/company tiles
• 8px: primary and product actions, story cards
• 16px: promotion pill
• 24px: promotion banner card
• 40px and 100px: round controls

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. Framer marks its breakpoint variants with ssr-variant hidden-… classes, so the pages switch layouts, but no breakpoint width was measured.

Touch Targets

• Promotion pill: 80px tall
• Start button: 61px
• Product buttons: 60px
• Band buttons: 57px
• /ko/company tiles: 48px
• Chips: 42px
• /ko/company header buttons and round controls: 40px
• Framer navigation links: 30px

Collapsing Strategy

• Not captured; only the desktop layout was measured.

Image Behavior

• Story cards are image-filled at 8px corners, without borders or shadows.

Elevation & Depth

Depth is colour, not shadow. Apart from the header's faint glow, every recorded element computes box-shadow: none.

Motion & Easing

Every probed control computes transition: all 0s: 링글 시작하기, the promotion pill, the Framer navigation, and the header buttons and navigation of /ko/company. Their state changes are therefore instant. Framer animation on scroll or in carousels was not measured; treat it as unspecified.

Components

Buttons

Start button (primary)

• Background: #3e00d9
• Text: #ffffff
• Radius: 8px
• Height: 61px
• Font: 18px 700 Pretendard JP Bold
• States: focus shows the browser's default ring; hover and pressed were covered by a Channel Talk modal and are unmeasured
• Use: 링글 시작하기, 200 × 61 in the hero of both Framer pages and 320 × 61 three more times on /ko/1on1

Band button

• Background: #1d0788
• Radius: 8px
• Padding: 16px 24px
• Height: 57px
• Use: Actions inside the product bands of /ko/1on1

Product button

• Background: #120968
• Radius: 8px
• Height: 60px
• Use: The 200 × 60 actions in the landing page's product list; siblings fill #3e00d9, #1d0788 and #1170ff

Promotion pill

• Background: #5442fb
• Text: #ffffff
• Radius: 16px
• Padding: 14px 16px
• Height: 80px
• Font: 20px 700 Pretendard JP Bold
• Use: 9회말 역전 이벤트 특가 확인하기, 660 × 80, time-boxed

App trial button

• Background: #3c2bac
• Text: #ffffff
• Radius: 5px
• Padding: 8px 16px
• Height: 40px
• Font: 14px 500 Pretendard Variable
• States: no hover, pressed or focus change within the probe's scope
• Use: 무료 체험하기 in the /ko/company header

App login button

• Background: #ffffff
• Text: #3c2bac
• Border: 1px solid #3c2bac
• Radius: 5px
• Padding: 8px 16px
• Height: 40px
• Font: 14px 500 Pretendard Variable
• Use: 로그인 in the /ko/company header

Tile button

• Background: #ffffff
• Border: 1px solid #e4e7f4
• Radius: 7px
• Padding: 12px
• Height: 48px
• Use: Four 112 × 48 tiles near the foot of /ko/company

Filter chip

• Background: #ffffff
• Radius: 4px
• Padding: 10px 16px
• Height: 42px
• Use: Four 112 × 42 chips on /ko/student/landing/home

Carousel arrow

• Background: rgba(0, 0, 0, 0.2)
• Radius: 40px
• Size: 40 × 40
• Use: Hero carousel of /ko/student/landing/home

Round button

• Background: #ffffff
• Radius: 100px
• Size: 40 × 40
• Use: Round control after the chip row on the landing page

Navigation

Site header

• Background: #ffffff
• Shadow: 0px 4px 30px rgba(20, 15, 51, 0.05)
• Use: The header container of /ko/1on1

Nav link (Framer)

• Text: #0d0d0d
• Font: 14px 500 Pretendard JP Medium
• Height: 30px
• States: focus shows the browser's default ring; hover and pressed unmeasured
• Use: 튜터, 교재, 학습 체계, AI, 후기, 가격, 기업 교육

Nav item (/ko/company)

• Text: #3e426a
• Radius: 4px
• Padding: 4px 6px
• Font: 14px 500 Pretendard Variable
• Hover: row background #fbfbff
• Use: Header navigation of the company page

Cards & Banners

Promotion banner

• Background: #e80023
• Radius: 24px
• Padding: 60px 0px 60px 80px
• Size: 1180 × 170
• Use: Campaign card with a #ffe999 heading, time-boxed

Top bar

• Background: #0d0d0d
• Size: 1440 × 44
• Use: Countdown bar across the top of both Framer pages, time-boxed

Story card

• Radius: 8px
• Size: 333 × 331
• Use: Image-filled story cards on /ko/1on1

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out ringleplus.com pages plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://www.ringleplus.com/ko/1on1 ; https://www.ringleplus.com/ko/student/landing/home ; https://www.ringleplus.com/ko/company ; https://www.ringleplus.com/ko/company/1 Tier 2 sources: getdesign.md/ringle (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=ringle (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

Error, empty, loading and success states were not captured and are not described.

Do's and Don'ts

Do

• Fill the primary action with #3e00d9 and a white 18px bold label
• Use #1d0788 or #120968 for secondary actions inside product bands
• Set headlines in Pretendard JP Bold 700 with tight negative tracking
• Keep reading copy in Pretendard JP Medium greys (#6e737c, #242730)
• Keep campaign colours (#e80023, #5442fb, #ffe999) inside time-boxed promotion chrome
• Use 8px corners on actions and 24px on large banners

Don't

• Use #3c2bac for marketing actions; it belongs to the /ko/company template
• Add drop shadows to cards or buttons
• Set headlines in ExtraBold; the declared 800 face is not used on these pages
• Treat browser link colours (#0000ee, #ff0000) as brand colours
• Let campaign red or yellow leak into permanent navigation

Voice & Tone

Ringle speaks to working adults who want English that holds up in real work. It sounds confident and outcome-driven, and it doesn't chase gimmicks. The hero line "영어는 실전처럼" (English, like the real thing) sets the register, and the copy ties English to careers ("일하는 사람을 위한 영어").

Voice samples (verbatim from pages opened on 2026-09-30):

• "영어는 실전처럼 · 명문대 튜터와의 1:1 맞춤 화상영어" (/ko/1on1 hero)
• "꿈꾸던 영어실력과 커리어를 만드는 일하는 사람을 위한 영어, 링글" (/ko/1on1 hero subline)
• "20분부터 40분까지, 내게 딱 맞는 수업으로 시작하세요." (/ko/1on1)
• "실전 비즈니스를 위한 영어교육부터 평가까지 한 번에" (/ko/b2b)

Forbidden register: gamified hype, fear-based pressure, undefined jargon.

Agent Prompt Guide

Quick Color Reference

• Primary action: Ringle Violet (#3e00d9), label #ffffff
• Secondary actions: #1d0788, #120968
• Headlines: #000000 or #0d0d0d; accented words #3e00d9; on dark bands #ffffff with #aa9dff
• Copy: #242730, #4f545c, #6e737c, #9ea3ab
• Campaign: #0d0d0d bar, #5442fb pill, #e80023 card, #ffe999 heading
• /ko/company template: #3c2bac button, #3e426a navigation, #80839e footer, #e4e7f4 hairline

Example Component Prompts

• "Create a hero on white: headline 50px Pretendard JP Bold, line height 62.5px, tracking -2.25px, colour #000000. Below it a 200 × 61 button, background #3e00d9, radius 8px, label 18px bold #ffffff: '링글 시작하기'."
• "Build a product block: 40px Pretendard JP Bold heading (tracking -1.6px), 16px SemiBold #4f545c description, and a 200 × 60 action with background #120968 and 8px radius."
• "Add a campaign banner: 1180 × 170 card, background #e80023, radius 24px, padding 60px 0 60px 80px, heading 32px bold #ffe999."

Iteration Guide

1. #3e00d9 is the one primary action colour on the marketing pages
2. Headlines are Pretendard JP Bold 700 with tight tracking; copy is Medium grey
3. Actions have 8px corners; large banners 24px
4. No shadows except the header's faint glow
5. Campaign colours are temporary; the violet is not

---