Design System Inspiration of Wrtn

1. Visual Theme & Atmosphere

Wrtn (뤼튼) is Korea's most-used consumer AI super app — "500만명이 선택한 대한민국 대표 AI 서비스" (the AI service chosen by 5 million people) — and its design reads as a calm, near-monochrome canvas punctuated by a single hot accent. The product surface at wrtn.ai opens on pure white (#ffffff) with a warm soft-grey surface ladder (#f7f7f7 → #f1f1f1) and near-black ink text (#262626, never pure black). Against this restrained ground, Wrtn's brand "Inspire Red" (#f54211) — a vivid orange-red — appears only at moments of interaction: an accent dot, a highlight, a notification. This is the visual translation of Wrtn's stated BX philosophy, the "Inspiration Economy": the interface stays quiet so that the spark of inspiration (the red, the circle motif) reads as the one thing that matters.

The typographic personality is Korean-product-standard with an editorial twist. Body and UI run in Pretendard at 16px — the de-facto hangul product font — at a relaxed 1.6 line-height that gives the dense AI-chat surface room to breathe. The corporate site (wrtn.io, 뤼튼테크놀로지스) layers a second voice on top: heavy Pretendard 600–700 section titles (38px "주요 소식", 34px service names) and oversized Manrope 700 display numerals running up to 160px ("ConsumerServices") that turn the company narrative into a confident editorial spread. Display goes big and bold; functional UI stays small and quiet.

What distinguishes Wrtn is its geometry and its "Open Space" color-coding. Interactive chrome leans hard into the pill — login and signup are 36px-radius pills, tool/role chips run at 300–999px full-round, corporate CTAs at 40px. Cards are generously rounded: the home composer at 20px with a soft ambient glow (rgba(0,0,0,0.1) 0px 0px 15px), corporate news cards at 24px and flat. And each product menu carries its own pastel "Open Space" tint — open-blue (#dcf5ff), open-pink (#fee2ec), open-peach (#fff5ec) — derived from the circle-in-space brand motif, so navigation itself is color-coded by mood rather than by a single dominant hue.

Key Characteristics:

• Near-monochrome product chrome — near-black ink (#262626) on white (#ffffff), warm grey surfaces (#f7f7f7/#f1f1f1)
• Single hot accent "Inspire Red" (#f54211) reserved for interaction moments (dots, highlights) — the "spark"
• Pretendard 16px at 1.6 line-height for body/UI; bold Pretendard 600–700 + Manrope 700 for display
• Oversized Manrope display numerals (up to 160px) on the corporate editorial surface
• Pill-everything geometry — 36px header pills, 300–999px tool/role chips, 40px corporate CTA
• "Open Space" pastel color-coding — open-blue (#dcf5ff), open-pink (#fee2ec), open-peach (#fff5ec) per menu
• Soft single-glow card shadow (rgba(0,0,0,0.1) 0px 0px 15px) on the composer; flat elsewhere
• Rounded cards — 20px composer, 24px news cards

2. Color Palette & Roles

Primary

• Inspire Red (#f54211): The brand's signature color and primary accent, rgb(245, 66, 17). A vivid orange-red reserved for interaction moments — accent dots, highlights, the circle motif on hover. It is the "spark" of the Inspiration Economy, not a flood color.
• Ink (#262626): Primary product text and the solid login button, rgb(38, 38, 38). A near-black that carries warmth without the harshness of pure black.
• Pure White (#ffffff): Page background, card surfaces, text on dark/red.

Corporate Ink

• Corporate Ink (#333333): Body and heading text on the corporate site (wrtn.io), rgb(51, 51, 51) — a slightly warmer, more editorial grey-black.
• Dark Ink (#1a1a1a): Maximum-contrast service names on the corporate site, rgb(26, 26, 26).
• Chip Border Dark (#171717): The near-black 1px outline on home tool chips, rgb(23, 23, 23).

Open Space Tints

• Open Blue (#dcf5ff): Pastel menu-coding tint, rgb(220, 245, 255) — applied per main menu from the circle-in-space motif.
• Open Pink (#fee2ec): Pastel menu-coding tint, rgb(254, 226, 236).
• Open Peach (#fff5ec): Pastel menu-coding tint, rgb(255, 245, 236).

Neutral & Surface

• Surface Grey (#f7f7f7): Cool-warm grey surface for cards and segmented sections, rgb(247, 247, 247).
• Surface Alt (#f1f1f1): Secondary grey for chip backgrounds and dividers, rgb(241, 241, 241).
• Hairline (#d3d3d3): Thin borders and outlined-pill strokes, rgb(211, 211, 211).

Text Hierarchy

• Ink (#262626): Primary text, headings, strong labels.
• Muted (#656565): Secondary text and metadata, rgb(101, 101, 101).
• Muted Soft (#8a8a8a): Tertiary text, rgb(138, 138, 138).
• Faint (#c5c5c5): Disabled text, placeholder, lowest-emphasis labels, rgb(197, 197, 197).

3. Typography Rules

Font Family

• Body / UI: Pretendard (with Apple SD Gothic Neo fallback) — the document default for all product body and UI text at weight 400–500.
• Display (corporate): Manrope — used for oversized editorial display numerals/labels (e.g. 160px "ConsumerServices") on wrtn.io.
• Mono: IBMPlexMono — appears in the body font stack for code/technical fragments.

Hierarchy

Principles

• Quiet body, bold display: Pretendard 400 carries every paragraph at a roomy 1.6 line-height; weight jumps to 600–700 only for headlines. The weight contrast is the primary hierarchy signal.
• Manrope for scale moments: When the corporate narrative wants drama it switches to Manrope at extreme sizes (160px) — display typography as editorial statement, not as body.
• Relaxed hangul leading: Body sits at 16px / 1.6 — generous for hangul legibility on an information-dense AI surface.
• Two surfaces, two inks: product text is #262626, corporate text is the warmer #333333 — a deliberate tonal split between the app and the company story.

4. Component Stylings

Buttons

Login (Primary, dark pill)

• Background: #262626
• Text: #ffffff
• Radius: 36px
• Padding: 0px 20px
• Height: 36px
• Border: 1px solid #262626
• Font: 16px Pretendard weight 400
• Use: Header "로그인" — the solid dark primary action

Sign-up (Secondary, outlined pill)

• Background: #ffffff
• Text: #262626
• Radius: 36px
• Padding: 0px 20px
• Height: 36px
• Border: 1px solid #d3d3d3
• Font: 16px Pretendard weight 400
• Use: Header "무료로 회원가입" — outlined low-emphasis pill

Corporate CTA

• Background: #ffffff
• Text: #333333
• Radius: 40px
• Padding: 16px 50px
• Height: 56px
• Font: 16px Pretendard weight 600
• Use: "채용공고 보러가기" CTA over the dark careers hero on wrtn.io

Inputs & Forms

Chat Composer (textarea)

• Background: #ffffff
• Text: #262626
• Font: 16px Pretendard
• Use: Home composer textarea, placeholder "무엇이든 물어보세요" — transparent inside the composer card

Cards & Containers

Composer Card

• Background: #ffffff
• Radius: 20px
• Padding: 12px 16px
• Border: 1px solid #d3d3d3
• Shadow: rgba(0,0,0,0.1) 0px 0px 15px 0px
• Use: Home chat composer container — the one place a soft glow appears

News Card (corporate)

• Background: #f7f7f7
• Text: #333333
• Radius: 24px
• Padding: 20px 24px 24px
• Use: Corporate press/news card on wrtn.io, flat (no shadow)

Badges

Role Chip

• Background: #ffffff
• Text: #262626
• Radius: 999px
• Padding: 4px 6px 4px 8px
• Height: 32px
• Border: 1px solid #f1f1f1
• Font: 16px Pretendard weight 400
• Use: "역할" selector pill in the composer

Tool Chip

• Background: #ffffff
• Text: #262626
• Radius: 300px
• Height: 34px
• Border: 1px solid #171717
• Font: 16px Pretendard weight 400
• Use: Tool / suggestion pill on the home composer

Inspire Red Accent Dot

• Background: #f54211
• Text: #ffffff
• Radius: 12px
• Padding: 3px
• Use: Interaction accent / notification dot — the single saturated brand moment

Navigation

• Background: #ffffff
• Text: #262626 (product) / #333333 (corporate)
• Font: 16px Pretendard weight 400 (product) / 500 (corporate)
• Height: ~58px product nav
• Use: Top horizontal nav ("홈", "도구", "혜택", "저장됨" on product; "Company", "Service", "News", "Careers" on corporate)

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://wrtn.ai (product super-app surface — composer, nav, chips, Inspire Red accent, live computed style); https://wrtn.io (뤼튼테크놀로지스 corporate surface — editorial display type, news cards, careers CTA, live computed style) Tier 2 sources: getdesign.md/wrtn — "No designs found for 'wrtn'" (not covered); styles.refero.design/?q=wrtn — not listed (search returned only generic featured styles, no Wrtn entry) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~8px (4 / 8 / 12 / 16 / 20 / 24 / 50 / 64)
• Notable: corporate news cards use a 20/24/24 asymmetric padding; composer card uses a tight 12px 16px

Grid & Container

• Product: centered single-column composer ("무엇이든 물어보세요") as the anchor, with tool/role chips arranged in a horizontal pill row
• Corporate: full-bleed editorial bands — a horizontal news-card row, an oversized Manrope numeral section ("Consumer Services 01/02/03"), and a dark careers hero
• Cards group related content at 20–24px radius

Whitespace Philosophy

• Quiet over busy: the product surface is deliberately restrained so the chat composer and the Inspire Red accent are the focal points
• Editorial drama on corporate: the company site spends whitespace lavishly around 160px display numerals — scale itself is the layout device
• Pill rhythm: repeated full-round chips create a consistent horizontal cadence across tool/role entry points

Border Radius Scale

• Small (8px): inner elements, small icon buttons
• Medium (20px): composer card — the product workhorse
• Large (24px): corporate news cards
• Pill (36px / 40px): header buttons, corporate CTA
• Full (300px / 999px): tool/role chips, accent geometry

6. Depth & Elevation

Shadow Philosophy: Wrtn is a near-flat system. Live inspection found box-shadow: none across the corporate cards, nav, and most product chrome; the one deliberate exception is the home chat composer, which carries a soft ambient glow (rgba(0,0,0,0.1) 0px 0px 15px 0px) to lift the single most important input off the page. Depth otherwise comes from flat grey surfaces (#f7f7f7 / #f1f1f1), the "Open Space" pastel tints, and thin #d3d3d3 hairlines. When emphasis is needed the system reaches for the Inspire Red accent or a dark pill, never heavy elevation.

7. Do's and Don'ts

Do

• Keep the product canvas near-monochrome — #262626 ink on #ffffff, with #f7f7f7/#f1f1f1 grey surfaces
• Reserve Inspire Red (#f54211) for interaction moments — accent dots, highlights, the circle motif — never as a flood color
• Use Pretendard 16px at 1.6 line-height for body and UI text
• Use bold Pretendard (600–700) or Manrope for display/headline moments only
• Use pill geometry — 36px header buttons, 300–999px tool/role chips, 40px corporate CTA
• Color-code menus with the "Open Space" pastels (#dcf5ff / #fee2ec / #fff5ec)
• Keep cards flat — reserve the soft glow (rgba(0,0,0,0.1) 0px 0px 15px) for the composer only
• Use near-black #262626 (product) or #333333 (corporate) for text instead of pure black

Don't

• Flood the UI with Inspire Red — it is a spark, not a background
• Use heavy drop shadows for elevation — Wrtn is near-flat
• Use pure black (#000000) for body text — reserve near-black ink
• Use sharp/square corners on interactive elements — buttons and chips are pills
• Mix display fonts into body — Pretendard 400 owns reading text
• Set the product chrome in loud colors — quiet ground makes the accent legible
• Use a second saturated accent alongside Inspire Red — one spark only
• Crowd the corporate display numerals — their drama depends on whitespace

8. Responsive Behavior

Breakpoints

Touch Targets

• Header pills at 36px height, full pill for an unmistakable target
• Tool/role chips at 32–34px height with generous horizontal padding
• Corporate CTA at 56px height with 16px 50px padding — comfortably tappable

Collapsing Strategy

• Product: composer stays centered and full-width; tool/role chip row wraps or scrolls horizontally
• Corporate: 160px Manrope numerals scale down sharply; news-card row → stacked single column
• Editorial bands maintain full-width treatment, reduce internal padding

Image Behavior

• Product illustrations and the circle motif carry no shadow, consistent with the flat system
• Cards maintain 20–24px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary accent / interaction: Inspire Red (#f54211)
• Product text / dark button: Ink (#262626)
• Corporate text: Corporate Ink (#333333)
• Background: Pure White (#ffffff)
• Surface: Surface Grey (#f7f7f7), Surface Alt (#f1f1f1)
• Hairline / outline: #d3d3d3
• Open Space tints: Open Blue (#dcf5ff), Open Pink (#fee2ec), Open Peach (#fff5ec)
• Muted text: #656565; Faint / disabled: #c5c5c5

Example Component Prompts

• "Create a home chat composer: white background, 1px solid #d3d3d3 border, 20px radius, soft glow rgba(0,0,0,0.1) 0px 0px 15px. Transparent textarea inside, placeholder '무엇이든 물어보세요', 16px Pretendard, #262626 text. Below it a row of pill tool chips: white background, 1px solid #171717 border, 300px radius, 34px height."
• "Design a header: white nav. Pretendard 16px links, #262626. Right-aligned an outlined signup pill (#ffffff, 1px solid #d3d3d3, 36px radius, #262626 text) and a solid login pill (#262626 bg, white text, 36px radius)."
• "Build a corporate news card: #f7f7f7 background, 24px radius, 20px 24px 24px padding, no shadow. Title 20px Pretendard weight 600, #333333. Use Manrope 700 for any oversized section numeral."
• "Add an Inspire Red accent: #f54211 dot/badge, 12px radius, only at interaction moments. Color-code a menu surface with an Open Space tint (#dcf5ff blue, #fee2ec pink, or #fff5ec peach)."

Iteration Guide

1. Keep the product canvas quiet — #262626 on #ffffff, grey surfaces; Inspire Red (#f54211) is the only saturated hue and only at interaction
2. Pretendard 16px / 1.6 for body; jump to 600–700 (or Manrope) for display
3. Pill geometry throughout — 36px header, 300–999px chips, 40px corporate CTA, 20–24px cards
4. Near-flat — soft glow only on the composer; separate with #f7f7f7 tint, Open-Space pastels, and #d3d3d3 hairlines
5. Text is #262626 (product) / #333333 (corporate), never pure black for body
6. Use the Open-Space pastels to color-code menus, not to fill large surfaces

---

10. Voice & Tone

Wrtn's voice is encouraging, plain-spoken, and inspiration-forward — an AI "guide that helps people experience joy and inspiration" rather than a cold productivity tool. The product positions itself as everyone's everyday AI ("전세계 최신 AI를 무료로" — the world's latest AI, free), and the copy invites rather than instructs: the composer simply asks "무엇이든 물어보세요" ("Ask anything"). The corporate register adds confident scale-claims ("500만명이 선택한 대한민국 대표 AI 서비스") delivered plainly, without hype adjectives.

Voice samples (verbatim from live surfaces):

• "무엇이든 물어보세요" — product composer placeholder (open invitation). (verified live 2026-06-17, wrtn.ai)
• "500만명이 선택한 대한민국 대표 AI 서비스" — corporate product line (scale claim, stated plainly). (verified live 2026-06-17, wrtn.io)
• "AI 시대를 함께 선도할 인재를 찾습니다." — careers hero (collaborative, forward-looking). (verified live 2026-06-17, wrtn.io)

Forbidden register: fear-of-missing-out pressure, jargon-heavy AI hype, cold/technical instruction tone, exclamation-stacked marketing. The brand frames AI as familiar and joyful, not intimidating.

11. Brand Narrative

Wrtn (뤼튼) was founded in 2021 by CEO 이세영 (Lee Se-young) and a small founding team (around seven people who had worked together on academic conferences). The product began as an AI writing assistant — the name is the past participle "written" with the vowels removed — built by connecting to Naver's HyperCLOVA large Korean language model. The founding premise was to expand human creativity through technology and help people's thoughts find expression in writing (테크42 interview, StartupToday).

The product matured from a single writing tool into a full generative-AI super app — "500만명이 선택한 대한민국 대표 AI 서비스" (the AI service chosen by 5 million people) — and the parent company, 뤼튼테크놀로지스 (Wrtn Technologies), expanded into a family of products: the flagship 뤼튼 consumer app, 크랙, 캬라푸, the enterprise 뤼튼 AX, 뤼튼 Labs, and 뤼튼 Edu, with offices in Seoul (서초 BLOCK77) and Tokyo (Toranomon). The company reported 2025 revenue of 471억원, a 15× year-over-year jump (wrtn.io, live 2026-06-17).

The brand's design philosophy is the "Inspiration Economy", expressed through "The Open Space" — the circle, a fundamental geometric form, animated through three-dimensional space to convey the infinite possibilities of humans and AI creating together. On interaction, the main color Inspire Red and the circle motif are emphasized so that Wrtn feels like "a guide that helps people experience joy and inspiration" (BAT brand work, Manual Graphics). What the design refuses: the cold, technical chrome of developer-facing AI tools, and a hype-saturated palette. What it embraces: a quiet near-monochrome canvas, a single warm-red spark, humanistic colors, and the circle as a symbol of open possibility.

12. Principles

1. Inspiration is the product. The "Inspiration Economy" frames AI as a spark for human creativity, not a replacement for it. UI implication: keep the canvas quiet so the moment of inspiration — the Inspire Red accent, the circle motif — is the focal point.
2. One spark, not a flood. Inspire Red (#f54211) means "something is happening here." UI implication: reserve the saturated red for interaction moments; never fill large surfaces with it.
3. Familiar, not intimidating. AI should feel approachable to the general public. UI implication: plain Korean labels, an inviting composer ("무엇이든 물어보세요"), pill geometry, and soft pastels rather than technical chrome.
4. The circle opens space. "The Open Space" makes the circle a symbol of infinite possibility. UI implication: round geometry throughout — pills, 20–24px cards — and per-menu pastel color-coding from the circle-in-space motif.
5. Quiet UI, bold story. UI implication: product chrome stays small and monochrome; the corporate narrative goes large with Manrope display numerals. The two registers never blur.

13. Personas

Personas below are fictional archetypes informed by publicly observable Wrtn user segments (Korean students, marketers, and knowledge workers using a free consumer AI app), not individual people.

김민서, 22, 서울. A university student who uses Wrtn for essay drafts, summaries, and study help. Chose it because it's free, in Korean, and feels friendly rather than technical. Values the inviting "무엇이든 물어보세요" prompt — it never makes her feel she needs to know the "right" way to ask.

이준호, 34, 판교. A marketer who uses Wrtn's tools for copy, ideation, and content drafts. Appreciates that the interface stays out of the way — a quiet canvas with one clear action — so he can move fast without visual noise.

박지은, 41, 부산. A small-business owner exploring AI for the first time. Trusts Wrtn because it positions itself as Korea's representative AI service ("500만명이 선택한") and because the design feels calm and consumer-friendly, not like enterprise developer software.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is the one place the brand allows itself to be expressive — "The Open Space" concept lives in motion. The circle motif moves and changes form through three-dimensional space on hero sections and across pages, and on interaction the Inspire Red and the circle are emphasized to feel like a guide sparking inspiration. UI motion otherwise stays functional and quiet: pill chips respond to press with a subtle scale/opacity shift; cards fade-in from below at motion-standard / ease-enter. No harsh bounce on functional UI. Under prefers-reduced-motion: reduce, the circle motif freezes and all transitions collapse to instant; the product remains fully functional.