Design System Inspiration of Return Zero

1. Visual Theme & Atmosphere

Return Zero (리턴제로) is a Korean speech-AI company, and its design system reads like the product it sells: precise, engineered, and stripped of decoration. The homepage opens on a pure white canvas (#ffffff) with a deliberately near-monochrome palette — text and interactive chrome live almost entirely in a charcoal ink (#222222) over white, with pure black (#000000) carrying default body copy. There is no "brand purple," no gradient hero, no soft-shadow card stack. The restraint is the brand: a voice-AI lab that wants to look like research-grade infrastructure rather than a consumer app, where the only thing that draws the eye is the one charcoal button that says "do this."

The single typeface across every surface is Pretendard, the de-facto Korean product font, used at weight 400 for body (16px / line-height 24px) and weight 600 for section headings (40px) and button labels. The most distinctive typographic move is the giant lightweight metric: stat figures render at a colossal 124px in weight 300, white on charcoal dark bands ("35", "48", "2.5배", "3배"), pairing the heft of the number with an airy, almost whispered weight — the same anti-bold confidence the data itself is meant to project. Headings stay at a controlled 40px / 600 with normal tracking; the developer site (developers.rtzr.ai) drops its hero H1 to 36px / 600 white-on-dark.

Where color appears, it is surgical and per-product, never spread. A bright mint (#98ffac) lights up 60px highlight figures on dark sections; a corporate brand blue (#2e67fe) tints the product feature titles on the main site (Callabo, Vito); a brighter STT blue (#3a89ff) is the accent of the developer console — its active demo tab and the pill-shaped "녹음시작" record button; and a highlight yellow (#ffde30) flags the recommended plan on the pricing page. The neutral ladder runs charcoal #222222 → slate #444444 → muted #999999 → faint #bbbbbb, separated by a single hairline (#eeeeee) and the faint surface tint (#fafafa). Depth is communicated by zero shadows — box-shadow: none holds across hero, nav, headings, cards, and chips on every surface inspected. Geometry is tight and sharp: 4px radius on buttons, inputs, and cards; pills (30px / 60px) reserved for the developer console's account and record controls.

Key Characteristics:

• Near-monochrome by intent — charcoal ink (#222222) is the single "action" color on white (#ffffff)
• Pure black (#000000) for default body text; charcoal #222222 for CTAs, nav, and headings
• Pretendard as the sole typeface, weights 300 / 400 / 500 / 600
• Signature giant metric: 124px weight-300 figures, white on dark bands
• Surgical per-product accents — mint #98ffac, brand blue #2e67fe, STT blue #3a89ff, highlight yellow #ffde30
• Shadowless system — separation by hairline #eeeeee and surface tint #fafafa, never elevation
• Sharp 4px radius for marketing chrome; 30px / 60px pills only on the developer console
• Cool neutral ladder: #444444 → #999999 → #bbbbbb

2. Color Palette & Roles

Primary / Action

• Charcoal Ink (#222222): The system's single action color — primary button background, heading text, nav labels. Used on every surface (home, pricing, developers) as the "do this" signal.
• Pure Black (#000000): Default body-text color, maximum-contrast reading copy.
• Pure White (#ffffff): Page canvas, text on charcoal/dark, secondary-button background.

Accents (per-product, surgical)

• Mint (#98ffac): Bright neon-mint for 60px highlight figures on dark sections — the headline metric accent.
• Brand Blue (#2e67fe): Corporate product feature titles on the main site (Callabo, Vito section heads).
• STT Blue (#3a89ff): Developer-console accent — active demo tab text and the pill-shaped "녹음시작" record button.
• Highlight Yellow (#ffde30): Recommended-plan / emphasis flag on the pricing page.

Neutral Ladder & Surface

• Slate (#444444): Secondary text and darker borders.
• Muted Grey (#999999): Tertiary text, inactive tab labels, captions.
• Faint Grey (#bbbbbb): Default input borders, lowest-emphasis lines.
• Hairline (#eeeeee): Card outlines, dividers — the primary separation device in a shadowless system.
• Surface (#fafafa): Faint off-white tint for alternating section bands.

3. Typography Rules

Font Family

• Sans (sole): Pretendard — used for every headline, body, nav, and button label. Weight range 300 (giant metrics) through 600 (headings / button labels).

Hierarchy

Principles

• One font, many weights: Pretendard does every job; hierarchy comes from size and weight (300 ↔ 600), never from swapping families.
• Lightweight giant metrics: The defining choice — 124px stat figures at weight 300. The number is huge but the stroke is thin, signalling confident data without shouting.
• 600 is the heading ceiling: Headings and primary button labels top out at weight 600; the system never goes to 700/800 except on a single developer-console active tab (700).
• Normal tracking: Unlike pill-heavy fintech peers, Return Zero keeps letter-spacing at normal across display and body — the precision reads as restraint, not compression.

4. Component Stylings

Buttons

Primary (Filled Charcoal)

• Background: #222222
• Text: #ffffff
• Radius: 4px
• Padding: 24px 40px
• Height: 69px
• Font: 18px Pretendard weight 600
• Use: Primary CTA — "리턴제로 STT 알아보기", "맞춤 요금제 문의", "서비스 도입문의"

Primary Compact

• Background: #222222
• Text: #ffffff
• Radius: 4px
• Padding: 10px
• Height: 42px
• Font: 14px Pretendard weight 600
• Use: Header / inline CTA — "문의하기", "더 알아보기", "읽어보기"

Secondary (White)

• Background: #ffffff
• Text: #222222
• Radius: 4px
• Padding: 24px 40px
• Font: 18px Pretendard weight 600
• Use: Paired secondary CTA — "바로 체험하기", "상담신청", "무료로 체험하기"

Ghost (Outline on Dark)

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Radius: 4px
• Padding: 24px 40px
• Font: 18px Pretendard weight 600
• Use: Outline CTA on dark hero — "정확도 비교", "사용문의" (developer hero uses rgba(255,255,255,0.5) border)

Account Pill (Developer Console)

• Background: transparent
• Text: #ffffff
• Border: 1px solid #eeeeee
• Radius: 30px
• Padding: 9px 24px
• Height: 34px
• Font: 12px Pretendard weight 500
• Use: developers.rtzr.ai account actions — "회원가입", "로그인"

Record (STT Accent Pill)

• Background: #3a89ff
• Text: #ffffff
• Radius: 60px
• Padding: 20px 40px
• Height: 58px
• Font: 18px Pretendard weight 400
• Use: STT live-demo record action — "녹음시작"

Inputs

Large Field / Select

• Background: #ffffff
• Text: #222222
• Border: 1px solid #bbbbbb
• Radius: 4px
• Height: 74px
• Focus: border darkens to #666666
• Use: Large demo input / dropdown on the homepage STT demo

Cards & Containers

White Feature Card

• Background: #ffffff
• Border: 1px solid #eeeeee
• Radius: 4px
• Shadow: none
• Use: Service / feature card with hairline outline (shadowless)

Dark Stat Band

• Background: #222222
• Text: #ffffff
• Radius: 4px
• Use: Metric band — 124px weight-300 figure in white, with mint #98ffac highlight accent

Badges

Plan Highlight

• Background: #ffde30
• Text: #222222
• Radius: 4px
• Font: 13px Pretendard weight 600
• Use: Recommended-plan / emphasis flag on the pricing page

Tabs

Demo Mode Tabs

• Active: text #3a89ff weight 700
• Inactive: text #999999 weight 500
• Use: STT live-demo mode switch — "실시간 녹음" / "파일 업로드" / "샘플파일"

Navigation

• Background: #ffffff
• Text: #222222
• Font: 16px Pretendard weight 500
• Active: #222222 weight 600
• Use: Top nav — "COMPANY", "RTZR STT", "CALLABO", "VITO", "Pricing", "Developers"

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.rtzr.ai, https://developers.rtzr.ai/, https://blog.rtzr.ai Tier 2 sources: getdesign.md/returnzero — not listed (404); styles.refero.design — no confirmed Return Zero match (generic search fallback only) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~8px, with a tight 4px / 10px rhythm for compact chrome
• Scale: 4px, 8px, 10px, 16px, 24px, 40px, 64px
• Notable: large CTAs use a generous 24px 40px padding (69px height), while header buttons compress to a flat 10px

Grid & Container

• Centered single-column hero with the charcoal CTA as the anchor
• Service overview as a row of white feature cards with hairline #eeeeee outlines
• Dark stat bands (#222222) break the white flow with 124px white metrics
• Pricing as side-by-side plan columns with one yellow-highlighted recommended plan

Whitespace Philosophy

• Restraint over density: airy vertical rhythm; the page never crowds, letting the single charcoal action breathe.
• Flat segmentation: sections separate by surface tint (#fafafa) and hairlines (#eeeeee), or by full charcoal/dark bands — never by shadow.
• Color as punctuation: accent color appears only at decision points (record button, recommended plan, headline metric), so the eye always knows where to go.

Border Radius Scale

• Sharp (4px): buttons, inputs, cards — the workhorse on marketing surfaces
• Pill Small (30px): developer-console account pills
• Pill (60px): developer-console record button
• Full (9999px): occasional round controls

6. Depth & Elevation

Shadow Philosophy: Return Zero is a fully shadowless system. Live inspection found box-shadow: none across the hero, nav, headings, feature cards, and demo controls on the homepage, the developer console, and the pricing page. Separation is achieved through flat devices: a single hairline (#eeeeee), a faint surface tint (#fafafa), and full-contrast inversion to charcoal (#222222) or black (#000000) dark bands. When the system needs to elevate attention it reaches for color (mint #98ffac, STT blue #3a89ff) or contrast inversion, never a drop shadow — keeping the UI feeling fast, engineered, and screen-native.

7. Do's and Don'ts

Do

• Keep charcoal ink (#222222) as the single action color — every primary CTA, nav, and heading
• Use pure black (#000000) for body text, charcoal #222222 for interactive chrome
• Use Pretendard for everything; build hierarchy with weight (300 ↔ 600), not family swaps
• Render headline metrics huge and light — 124px weight 300, white on a dark band
• Separate sections with the #eeeeee hairline and #fafafa tint, or full charcoal inversion — never shadows
• Reserve accent color for the single decision point (record button #3a89ff, recommended plan #ffde30, metric highlight #98ffac)
• Keep 4px radius on marketing buttons, inputs, and cards
• Pair a charcoal primary with a white secondary CTA side by side

Don't

• Add drop shadows for elevation — the system is flat and shadowless
• Introduce a second always-on brand color — accents are surgical and per-product
• Use pill geometry on marketing chrome — pills belong to the developer console only
• Set headings heavier than weight 600 (700 only on a single active demo tab)
• Compress letter-spacing — Return Zero tracks at normal across display and body
• Spread the mint, blues, or yellow across many elements — color marks decisions, not decoration
• Use a font other than Pretendard
• Replace the dark stat band with a light card — the contrast inversion is the emphasis

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTAs at 69px height with 24px 40px padding — large, unmistakable targets
• Compact header CTA at 42px height
• Developer record pill at 58px height, 60px radius
• Account pills at 34px height

Collapsing Strategy

• Hero: large CTA pair stacks vertically on mobile
• Feature cards: multi-column → stacked single column
• Stat bands: 124px figures reduce but keep weight 300 and white-on-dark treatment
• Pricing: side-by-side plan columns stack, highlighted plan stays flagged with #ffde30

Image Behavior

• Product screenshots and illustrations carry no shadow at any size, consistent with the flat system
• Cards maintain 4px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary action / CTA: Charcoal Ink (#222222)
• Body text: Pure Black (#000000)
• Background: Pure White (#ffffff)
• Metric highlight: Mint (#98ffac)
• Corporate product title: Brand Blue (#2e67fe)
• Developer accent / record: STT Blue (#3a89ff)
• Plan highlight: Highlight Yellow (#ffde30)
• Secondary text: Slate (#444444)
• Muted / inactive: Muted Grey (#999999)
• Input border: Faint Grey (#bbbbbb)
• Hairline: #eeeeee
• Surface tint: #fafafa

Example Component Prompts

• "Create a hero on white background. Pretendard. A charcoal primary CTA (#222222 bg, white text, 4px radius, 24px 40px padding, 18px weight 600 — 'STT 알아보기') beside a white secondary CTA (#ffffff bg, #222222 text, 4px radius — '바로 체험하기'). No shadows."
• "Design a dark stat band: #222222 background, a 124px weight-300 white figure ('35'), with a 60px mint #98ffac highlight figure beside it. Shadowless."
• "Build a white feature card: #ffffff background, 1px solid #eeeeee border, 4px radius, no shadow. Title 40px Pretendard weight 600 #222222. Body 16px weight 400 line-height 1.5 #000000."
• "Create a developer demo: tab row with active '실시간 녹음' in #3a89ff weight 700, inactive '파일 업로드' in #999999 weight 500, and a #3a89ff pill record button (60px radius, 20px 40px padding, white text — '녹음시작')."

Iteration Guide

1. Charcoal #222222 is the only action color — don't add a second always-on hue
2. Pretendard everywhere; hierarchy via weight 300 ↔ 600
3. No shadows — separate with #eeeeee hairline, #fafafa tint, or charcoal inversion
4. Headline metrics: 124px weight 300, white on dark
5. 4px radius on marketing chrome; pills only on the developer console
6. Accent (#98ffac / #3a89ff / #ffde30) marks one decision point at a time
7. Body text is #000000; secondary text #444444; muted #999999

---

10. Voice & Tone

Return Zero's voice is plain, technical, and quietly confident — the register of an engineering team that lets accuracy numbers do the persuading. Korean copy is direct and functional ("AI 음성인식의 새로운 기준" / "A new standard for AI speech recognition"; "무엇이 다른가요?" / "What's different?"), framing the product as infrastructure rather than novelty. CTAs are low-pressure imperatives ("문의하기", "바로 체험하기", "더 알아보기") and the developer surface speaks peer-to-peer to builders ("RTZR STT로 애플리케이션을 제작해 보세요" / "Build applications with RTZR STT").

Voice samples (verbatim from live surfaces):

• "AI 음성인식의 새로운 기준" — homepage section heading (standard-setting). (verified live 2026-06-26)
• "한 눈에 보는 리턴제로의 AI 서비스" — homepage service-overview heading. (verified live 2026-06-26)
• "RTZR STT로 애플리케이션을 제작해 보세요." — developers.rtzr.ai hero H1. (verified live 2026-06-26)
• Page title: "리턴제로 - 차세대 음성 AI의 미래" (verified live 2026-06-26)

Forbidden register: hype superlatives, exclamation-heavy marketing, undefined buzzwords, fear-based urgency. The brand persuades with measured numbers and plain capability statements.

11. Brand Narrative

Return Zero (리턴제로) was founded in 2018 by three KAIST classmates and former early Kakao members — 이참솔 (Lee Chamsol, CEO), 정주영 (Jung Jooyoung, CTO), and development lead 이현종 (Lee Hyunjong) — with a thesis that voice is the last great untapped data modality. The founding premise: every phone call, every meeting, every spoken interaction is information that simply evaporates because it is never turned into structured, searchable text. "Return Zero" frames the mission as returning that lost value from zero.

The company's flagship consumer product, VITO (비토), turns phone calls into text so users can read and search conversations like messages — it grew past 1 million users, generating a voice corpus the company describes as roughly 150,000 hours / 15 million hours of speech data, among the largest Korean-language datasets in the country. That data feeds proprietary engines (the "Sommers" far-field whisper-capture engine and the "Moses" speaker-separation engine). The technology productized into RTZR STT, a speech-to-text API offered in both cloud and on-premise (설치형) form via developers.rtzr.ai, launched as VITO Speech with a developer beta in June 2022, and CALLABO (콜라보), an enterprise AI meeting assistant that records and summarizes Google Meet / Zoom calls.

What the design refuses, and what it embraces, mirror the company's engineering posture: no decorative gradients, no shadow-stacked consumer-app chrome, no second vanity brand color — instead a near-monochrome charcoal-on-white system where the only flourish is a giant, lightweight accuracy number and a single surgical accent at each decision point. It is the visual language of a research lab that wants its data and its precision, not its packaging, to be the argument.

12. Principles

1. Precision over decoration. A speech-AI company is judged on accuracy; the UI mirrors that with a stripped, exact, shadowless system. UI implication: keep chrome minimal — charcoal on white, 4px radius, no ornament.
2. One action, one color. Charcoal #222222 means "do this." UI implication: reserve the charcoal fill for the primary CTA; let secondary actions go white.
3. Let the number speak. Metrics are the persuasion. UI implication: render the key figure huge (124px) and light (weight 300) on a dark band so it dominates the section.
4. Color marks decisions, not surfaces. Accents (#98ffac, #3a89ff, #ffde30) are surgical. UI implication: introduce an accent only at a single decision point — the record button, the recommended plan, the headline stat.
5. Flat and fast. Screen-native clarity beats decorative depth. UI implication: no shadows; separate with hairline #eeeeee, #fafafa tint, or charcoal inversion.
6. One voice, one font. Pretendard at every size. UI implication: build hierarchy with weight and scale, never with a second family.

13. Personas

Personas below are fictional archetypes informed by publicly observable Return Zero user segments (developers integrating STT, enterprise teams adopting meeting AI, consumer VITO users), not individual people.

김도현, 30, 서울. A backend engineer integrating speech-to-text into a call-center product. Lives in developers.rtzr.ai, cares about streaming-vs-file accuracy and on-premise options. Chose RTZR STT because the developer console let him test "실시간 녹음" in the browser before writing a line of code.

박지은, 38, 판교. An operations lead at a mid-size SaaS company evaluating CALLABO to auto-summarize remote meetings. Values that the product looks like infrastructure, not a toy — the restrained, shadowless interface signals reliability to her stakeholders.

이서윤, 27, 부산. A heavy VITO user who reads and searches her calls like text messages. Trusts the brand's plain, number-driven tone; appreciates that nothing on the page is trying to upsell her.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, consistent with the flat, engineered aesthetic. Demo tabs and buttons respond to press with a subtle opacity/scale shift; stat bands and feature cards fade-in from below at motion-standard / ease-enter. No bounce or spring — a speech-AI infrastructure product signals steadiness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product (including the live STT demo) remains fully functional.