Design System Inspiration of Return Zero
1. Visual Theme & Atmosphere
Return Zero (리턴제로) describes itself as a practical-AI startup: "We bring practical AI to the world — 리턴제로는 실용주의 AI 스타트업입니다. 최신 AI 기술을 실험실에서 세상으로 가져옵니다." Its company page gives 2018 as the founding year and counts more than 15 million hours of speech converted to text (about 1,712 years) and more than a million service users. It was started by former Kakao people — co-CEO 이참솔, who earlier co-founded 로티플 (acquired by Kakao), and co-CEO and CTO 정주영, previously on the KakaoTalk PC and messaging teams — and it sells speech recognition three ways: the RTZR STT API for businesses (with a public developer portal and demo), and two products, CALLABO and VITO, which the company page presents under the lines "No.1 AI 회의록" and "눈으로 보는 통화". Its blog is titled "기업을 위한 음성 AI", and the home page's customer stories link there, such as an AICC project with Shinhan Bank.
The marketing site (rtzr.ai) looks like infrastructure, not a consumer app. Within everything captured it is monochrome: white grounds, charcoal #222222 for navigation, headlines and every filled action, pure #000000 as the document's default text. The home hero sets its headline in Pretendard Light — 42px at weight 300 — above one charcoal action, 리턴제로 STT 알아보기. Every action is a 4px-cornered rectangle: charcoal with white labels on light grounds, white with charcoal labels on dark grounds, and a white outline over photography. None of the buttons animates — they compute transition: all 0s and show no hover change of their own. The only hover feedback on the home page is the white card around a button darkening its #eeeeee border to #cccccc.
Colour arrives only in the developer portal (developers.rtzr.ai), where the STT demo uses a clear blue #3a89ff: the pill-shaped 녹음시작 record button (hover #3174d9) and the underline and label of the selected demo tab. Secondary demo copy sits in #555555, unselected tabs in #999999.
Key Characteristics:
- Monochrome marketing:
#222222 fills every primary action and colours navigation and headlines; #000000 is the default text
- Pretendard throughout, from a 300-weight 42px hero to 700-weight plan names
- 4px corners on every marketing action; pills (20px, 30px, 60px) appear only on the developer portal
- White
#ffffff actions with charcoal labels on dark bands; white outlines over hero photography
- No button animation (
all 0s); hover feedback is a card border shifting #eeeeee → #cccccc
- Developer-portal accent
#3a89ff for the record action and the selected demo tab
- No captured element carries a shadow
Primary tasks
- Learn what RTZR STT does and contact sales (문의하기, 서비스 도입문의)
- Try speech recognition in the browser demo before writing code
- Switch the demo between live recording, an uploaded file and a sample
- Compare cloud and on-premise plans and ask for a custom plan
2. Color Palette & Roles
Primary
- Charcoal (
#222222): The primary. rtzr.ai is monochrome within the captured scope, so the primary is the measured primary action fill: 문의하기 in the header of all three marketing pages, 리턴제로 STT 알아보기 in the home hero, 더 알아보기 and 읽어보기 in the home cards, 서비스 도입문의 on /stt and 맞춤 요금제 문의 on /pricing all fill #222222 with a white label. The same charcoal colours the navigation and the hero headline (ink).
- On Primary / White (
#ffffff): Labels on charcoal; the fill of white actions (바로 체험, 상담신청, the plan-card buttons) and of the home cards.
Neutrals
- Text (
#000000): The document's default text colour.
- Hairline (
#eeeeee): The 1px border of the home cards and of the developer-portal account pills; Hairline Hover (#cccccc) is the card border while the pointer is over its button.
- Slate (
#555555): Heading and copy inside the developer-portal demo; the resting colour of the account pills once the portal header turns solid.
- Muted (
#999999): Unselected demo tabs and footer copy on the developer portal.
Developer portal accent (developers.rtzr.ai only)
- Accent (
#3a89ff): Fill of the 녹음시작 record button; label and 2px underline of the selected demo tab. Accent Hover (#3174d9) is the record button on hover and press.
Not observed
- The mint, brand blue and highlight yellow in the earlier record did not appear on any captured page and are not tokens.
3. Typography Rules
Font Family
- Sans:
Pretendard — every captured element on rtzr.ai and developers.rtzr.ai.
- Live surface use: loaded, 114 observed uses (body, buttons, headings, list items, the demo notice), served from jsDelivr (
cdn.jsdelivr.net/gh/orioncactus/pretendard/…/web/static/…).
- Official distributed asset: Pretendard's own repository (orioncactus/pretendard); its LICENSE file was opened and names Kil Hyung-jin (2021) and Adobe (2014–2021) as copyright holders. The licence clause itself is not quoted here.
- Official product use: no Return Zero page opened this session names its typeface; not claimed beyond the live use.
- Declared only:
swiper-icons (carousel icon font, 0 uses).
Hierarchy
| Role | Font | Size | Weight | Line Height | Notes |
|---|
| Display | Pretendard | 42px | 300 | 1.29 (54px) | Home hero, #222222 |
| Dev Hero | Pretendard | 36px | 600 | 1.33 (48px) | developers.rtzr.ai hero, white, -1.5px |
| Plan Title | Pretendard | 32px | 700 | normal | /pricing plan-card row headings, white |
| Plan Lead | Pretendard | 20px | 600 | 1.6 (32px) | /pricing hero subline, white |
| Button Large | Pretendard | 18px | 600 | normal | Large action labels |
| Nav | Pretendard | 16px | 500 | normal | COMPANY, RTZR STT, CALLABO, VITO |
| Menu | Pretendard | 16px | 600 | normal | News, Career, Blog, CI, 공고, Pricing, Developers |
| Body | Pretendard | 16px | 400 | 1.5 (24px) | Document default, #000000 |
| Demo Title | Pretendard | 18px | 700 | 1.17 (21px) | Demo heading, #555555 |
| Button | Pretendard | 14px | 600 | 1.4 (19.6px) | 문의하기, 더 알아보기 |
| Demo Body | Pretendard | 14px | 400 | 1.57 (21.98px) | Demo copy, #555555, -0.5px |
| Pill | Pretendard | 12px | 500 | 1.17 (14px) | 회원가입 / 로그인 |
Principles
- One family, weight for hierarchy. Pretendard from 300 to 700; the lightest weight is reserved for the largest headline.
- Light hero, firm actions. The 42px hero is weight 300 while every action label is 600.
- Normal tracking on marketing. Only the developer-portal hero (-1.5px) and demo copy (-0.5px) tighten.
4. Component Stylings
Buttons
Header Action (Primary)
#222222 fill, #ffffff label, 4px radius, 10px padding, 98 × 42, 14px / 600- Hover, pressed, focus: no change (probe);
transition: all 0s
- Use: 문의하기 on every rtzr.ai page
Primary Action (Large)
#222222 fill, #ffffff label, 4px radius, 24px 40px padding, 69px tall, 18px / 600- Hover, pressed, focus: no change (probe)
- Use: 리턴제로 STT 알아보기, 서비스 도입문의, 맞춤 요금제 문의
Card Button
#222222 fill, 4px radius, 10px padding, 98 × 42, 14px / 600- The button does not change; its white card's border goes
#eeeeee → #cccccc on hover and press (probe)
- Use: 더 알아보기, 읽어보기
Secondary Action (White)
#ffffff fill, #222222 label, 4px radius, 24px 40px padding, 69px tall, 18px / 600- Hover, pressed, focus: no change on 바로 체험 and 상담신청; the plan-card buttons' hover and pressed were unmeasured
- Use: on dark grounds — the /stt hero, the
#222222 band and plan cards on /pricing
Outline Action
- Transparent,
#ffffff label, 1px solid #ffffff, 4px radius, 24px 40px padding, 164 × 71
- Hover, pressed, focus: no change;
transition: opacity 0.5s ease
- Use: 요금제 보기, 정확도 비교 over the /stt hero
Record Button (developers.rtzr.ai)
#3a89ff fill, white label, 60px radius, 20px 40px padding, 167 × 58- Hover and pressed:
#3174d9 (probe); focus: no change
- Use: 녹음시작 in the STT demo
Account Pill (developers.rtzr.ai)
- Transparent, white label, 1px solid
#eeeeee, 30px radius, 9px 24px padding, 34px tall, 12px / 500
- Hover and pressed: faint dark tint, label and border
#222222 (read with the header solid, where the pill rests at #555555)
- Use: 회원가입, 로그인
Portal Hero Actions (developers.rtzr.ai)
- 사용문의: transparent, white label, 1px half-white border, 4px radius, 22px 40px padding, 144 × 67
- 무료로 체험하기:
#ffffff fill, #222222 label, same geometry
- Hover, pressed, focus: no change (probe)
Tabs
Demo Mode Tabs (developers.rtzr.ai)
- Unselected
#999999, 16px / 500; selected #3a89ff, 700, with a 2px #3a89ff underline
- Hover, pressed, focus: no change on 파일 업로드 (probe)
- Use: 실시간 녹음 / 파일 업로드 / 샘플파일
Cards
Feature Card
#ffffff with 1px solid #eeeeee; border #cccccc while its button is hovered- Use: product and customer-story cards in the home carousels
Verified: 2026-09-30 (deterministic collector capture of rtzr.ai home, /stt and /pricing and developers.rtzr.ai, logged out, plus fixed keyboard-probe state reads on all four pages and first-party context)
Tier 1 sources: https://www.rtzr.ai/ ; https://www.rtzr.ai/stt ; https://www.rtzr.ai/pricing ; https://www.rtzr.ai/company ; https://developers.rtzr.ai/ ; https://blog.rtzr.ai/
Tier 2 sources: getdesign.md/returnzero (HTTP 200, "0 design.md files") and styles.refero.design/?q=returnzero (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used
Conflicts unresolved: none
5. Layout Principles
Spacing System
- Compact actions: 10px padding all round
- Large actions: 24px 40px on rtzr.ai; 22px 40px on the portal hero; 20px 40px on the record button
- Account pills: 9px 24px; portal navigation pills: 7px 10px
Grid & Container
- A fixed white header across rtzr.ai with navigation groups and menu columns (News, Career, Blog, CI, 공고 / Pricing, Developers)
- Hero bands with a single headline and an action group, followed by horizontal card carousels on home
- /pricing: a dark hero, a row of plan cards, a charcoal consultation band
Whitespace Philosophy
- Restraint. A light headline and one charcoal action carry the hero; colour is withheld from marketing entirely.
- Carousels for breadth. Products and customer stories scroll horizontally in white bordered cards.
Border Radius Scale
- 4px — every rtzr.ai action and the portal hero actions
- 20px — portal navigation pills
- 30px — portal account pills
- 60px — record button
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Flat | box-shadow: none | Every captured element |
| Hairline | 1px #eeeeee → #cccccc | Home cards (hover), account pills |
| Ground change | #222222 bands and dark heroes | Consultation band, /pricing and portal heroes |
Shadow Philosophy: none of the recorded elements computes a shadow. Separation comes from hairlines and from switching the ground between white and charcoal.
7. Do's and Don'ts
Do
- Fill primary actions with
#222222 and white labels at 4px corners
- Flip to
#ffffff actions with #222222 labels on dark grounds
- Use Pretendard only; weight 300 for the large hero, 600 for actions
- Keep
#3a89ff to the developer-portal demo (record action, selected tab)
- Give cards a
#eeeeee hairline that darkens to #cccccc
Don't
- Introduce accent colours into marketing pages; none was observed
- Round marketing actions into pills
- Add shadows or button hover animations the site does not have
- Carry the portal blue into rtzr.ai marketing
8. Responsive Behavior
Breakpoints
Only the 1440px desktop layout was captured; breakpoints were not measured and are not specified here.
Touch Targets
- Large actions 67–71px tall; compact actions 42px; record button 58px; account pills 34px
Collapsing Strategy
Not captured.
Image Behavior
Hero photography sits behind white text and outline actions on /stt and the developer portal; nothing else about image behaviour was measured.
9. Agent Prompt Guide
Quick Color Reference
- Primary action / nav / headline:
#222222, label #ffffff
- Default text:
#000000
- Card hairline:
#eeeeee (hover #cccccc)
- Portal demo:
#3a89ff (hover #3174d9), copy #555555, unselected #999999
Example Component Prompts
- "Hero on white: a 42px Pretendard Light (300) headline in #222222 on a 54px line, then one #222222 button with a white 18px/600 label, 4px radius, 24px 40px padding, 69px tall. No shadow, no hover animation."
- "Dark band with a white action: #ffffff fill, #222222 18px/600 label, 4px radius, 24px 40px padding."
- "STT demo record button: #3a89ff fill, white label, 60px radius, 20px 40px padding, hover #3174d9; tabs in #999999 16px/500 with the selected one #3a89ff, 700, 2px underline."
Iteration Guide
- Charcoal
#222222 is the action colour; marketing stays monochrome
- Pretendard only; light hero, semibold actions
- 4px corners on marketing, pills only in the portal
- No shadows, no button transitions
- Blue belongs to the developer demo
10. Voice & Tone
Return Zero writes like an engineering company talking to businesses: short, factual, and number-led.
| Context | Tone |
|---|
| Company | Mission in one line — "We bring practical AI to the world" — then proof in numbers (창업연도 2018, 1,500만 시간+, 100만명+) |
| Actions | Direct verbs: 문의하기, 바로 체험, 요금제 보기, 정확도 비교, 서비스 도입문의 |
| Pricing | Deployment-first choices: 클라우드 도입 문의, 설치형 도입 문의, 맞춤 요금제 문의 |
| Developer portal | Try-first: 무료로 체험하기, 녹음시작 |
Voice samples (verbatim, opened 2026-09-30):
- "리턴제로는 실용주의 AI 스타트업 입니다" — rtzr.ai/company
- "최신 AI 기술을 실험실에서 세상으로 가져옵니다" — rtzr.ai/company
- "기업을 위한 음성 AI - 리턴제로 blog" — blog.rtzr.ai title
- "음성인식 API (STT API) - RTZR STT" — developers.rtzr.ai title
Forbidden register: hype without numbers, playful consumer tone on business pages, colour-driven urgency.
11. Brand Narrative
Return Zero's company page frames its purpose as bringing research-grade AI out of the lab: "최신 AI 기술을 실험실에서 세상으로 가져옵니다. AI가 바꾸는 미래를 앞당깁니다." Founded in 2018, it reports 15 million-plus hours of speech transcribed and a million-plus users across its services. Its leadership comes from Kakao and 로티플: co-CEO 이참솔 (Kakao AD, co-founder of 로티플, acquired by Kakao), co-CEO and CTO 정주영 (KakaoTalk PC and messaging teams, 로티플 CTO) and CPO 이현종 (KakaoTalk and Kakao taxi teams). The business spans the RTZR STT API, sold through rtzr.ai with cloud and on-premise plans and opened to developers through a free browser demo, and two products, CALLABO and VITO. Customer stories on the home page — finance among them — link to the company blog.
(The reading that ties the monochrome site to this engineering-first positioning is editorial interpretation, not a Return Zero statement.)
12. Principles
- Practical over flashy. The company calls itself a practical-AI startup. UI implication: monochrome actions, no decorative colour or motion.
- Numbers carry the claim. The company page leads with hours transcribed and users served. UI implication: let figures and plain headlines do the persuading.
- Try before you talk. The developer portal puts a working demo on its front page. UI implication: keep the record action obvious — the one coloured control.
- One family. Pretendard everywhere. UI implication: hierarchy by size and weight only.
13. Personas
Fictional archetypes informed by Return Zero's public audiences (enterprise buyers, developers, product users), not real people.
김도윤, 41, 서울. Contact-centre lead at a financial company evaluating speech recognition for an AICC rollout; reads customer stories, compares cloud and on-premise plans, then asks for a consultation.
박서연, 29, 판교. Backend developer who opens the developer portal, records a sentence in the demo and switches to file upload before signing up.
이준호, 35, 서울. Team manager looking for an AI meeting-notes product; arrives through the product navigation and wants a plain answer about price and accuracy.
14. States
Only these states were observed; nothing else is specified here.
| State | Observation |
|---|
| No change | 문의하기, 리턴제로 STT 알아보기, 서비스 도입문의, 맞춤 요금제 문의, 바로 체험, 상담신청, 요금제 보기, 정확도 비교, 사용문의, 무료로 체험하기 and the 파일 업로드 tab show no hover, pressed or focus change (probe). |
| Card hover | The white card around 더 알아보기 / 읽어보기: border #eeeeee → #cccccc. |
| Record hover / pressed | #3a89ff → #3174d9. |
| Account pill hover / pressed | Faint dark tint; label and border to #222222. |
| Selected | Demo tab 실시간 녹음: #3a89ff, weight 700, 2px underline. |
| Unmeasured | Hover and pressed on the /pricing plan-card buttons (바로 무료 체험, 클라우드 도입 문의). |
No authored focus style was observed on any probed control. Error, empty, loading and success states were not captured.
15. Motion & Easing
Every probed filled button computes transition: all 0s — state changes, where they exist, are instant. The /stt outline pair (요금제 보기, 정확도 비교) computes transition: opacity 0.5s ease. Carousel and scroll motion were not measured; treat them as unspecified and honour prefers-reduced-motion in any build.
