Wrtn (뤼튼)

흰 캔버스 위 Inspire Red 한 점, 원 모티프로 여는 모두의 AI 채팅

한국AI소비자따뜻한modern-minimal고딕comfortableroundflat라이트다크한글 지원출시 2023개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Wrtn (뤼튼)
한 줄 정체성: 여러 최신 AI 모델과 글쓰기·요약·캐릭터 대화 도구를 무료로 한곳에 모은 한국형 AI 슈퍼앱
공식 디자인 철학: 브랜드 컨셉 「Inspire Economy」, 미션 「사람들에게 AGI 를 더 가까이」, 슬로건 「Your First ____」(기본형 「Your First Agent」). 가능성의 공간을 여는 원(The Open Space) 모티프를 로고·모션·UI 전반에 쓴다 (BAT 케이스 스터디)
시그니처 요소 1개: 무채색(#090909~#FFFFFF) 캔버스 위에 Inspire Red(#F54211) 를 전송 버튼·강조 텍스트·로고 원에만 한 점 찍는 절제된 포인트

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근한, 활기찬, 실용적인
무드 설명: 화면 대부분은 순백과 먹색 회색 단계로 비워 두고, 따뜻한 붉은 주황 하나로 "지금 누를 곳"을 알려 준다. 채팅창 아래 「유튜브 요약」「자기소개서」 같은 생활형 도구 칩이 늘어서 있어 전문가용 AI 보다는 누구나 바로 쓰는 생활 도구 느낌이 강하다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 대화 말풍선과 도구 칩이 14~15px 본문으로 여유 있게 쌓이는 채팅 중심 화면
모서리 성향: Round (12~16px) — 입력창·말풍선·카드는 12~20px, 도구 칩과 아이콘 버튼은 완전 원형
평면성: Flat — 면 구분은 회색 단계(#F8F8F8·#F2F2F2)와 1px 선으로 하고, 그림자는 입력창·팝오버에만 옅게

Color System

컬러 시스템 (CSS 변수)

> 실측: wrtn.ai 웹 앱 CSS 의 :root / [data-theme=dark] 토큰(2026-09-18 수집). --brand-primary: 13 92% 51% = #F54211, --brand_primary: #D33717. 표기 없는 단계는 (추정) 보간.

:root {
  /* Primary - Inspire Red 9단계 */
  --color-primary-50:  #FFF5EC;  /* 실측 background_tint — 강조 행 배경 */
  --color-primary-100: #FFDFDB;  /* 실측 brand_base — 선택 칩 배경 */
  --color-primary-200: #FABAB9;  /* 실측 brand_secondary */
  --color-primary-300: #F58F7A;  /* (추정) */
  --color-primary-400: #F7683F;  /* (추정) hover 밝힘 */
  --color-primary-500: #F54211;  /* 기본 — 실측 surface_tint / text_tint */
  --color-primary-600: #D33717;  /* 실측 brand_primary — pressed, 흰 글자 대비용 */
  --color-primary-700: #A82A11;  /* (추정) */
  --color-primary-800: #7E2412;  /* 실측 brand_tertiary(dark) */
  --color-primary-900: #4E160B;  /* 실측 brand_base(dark) */

  /* Secondary - Pairing Teal (실측 pairing_primary_tint) */
  --color-secondary-500: #20A894;  /* 완료·보상·짝 강조 */

  /* Neutral - 실측 surface/text 단계 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F8F8F8;   /* surface_secondary */
  --color-neutral-100:  #F2F2F2;   /* surface_button */
  --color-neutral-200:  #E9E9E9;   /* outline_primary */
  --color-neutral-300:  #DFDFDF;   /* outline_secondary */
  --color-neutral-400:  #C9C9C9;   /* placeholder·disabled */
  --color-neutral-500:  #888888;   /* text_tertiary */
  --color-neutral-600:  #545454;   /* text_secondary */
  --color-neutral-700:  #313131;
  --color-neutral-800:  #171717;
  --color-neutral-900:  #090909;   /* text_primary — 순검정 대신 먹색 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #D7FAF6;   /* 실측 pairing_base_tint */
  --color-success-fg: #16806F;   /* (추정) teal 을 본문 대비로 어둡게 */
  --color-warning-bg: #FFFAE3;   /* 실측 warning_base */
  --color-warning-fg: #8A6B00;   /* (추정) 실측 #B38C00 을 대비 보정 */
  --color-error-bg:   #FFEED9;   /* 실측 error_base — 브랜드 빨강과 겹치지 않게 오류는 주황 */
  --color-error-fg:   #B84F00;   /* (추정) 실측 #DE7B02 대비 보정 */
  --color-info-bg:    #D9F5FF;   /* 실측 accent_base */
  --color-info-fg:    #007EA8;   /* 실측 accent_ui */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;             /* 페이지 기본 */
  --bg-subtle:   #F8F8F8;             /* 사이드바·말풍선 */
  --bg-elevated: #FFFFFF;             /* 카드·입력창 */
  --bg-overlay:  rgba(0,0,0,0.7);     /* 실측 dim_primary — 모달 딤 */

  /* Text 위계 */
  --text-primary:    #090909;
  --text-secondary:  #545454;
  --text-tertiary:   #888888;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #C9C9C9;

  /* Border */
  --border-default: #E9E9E9;
  --border-subtle:  #F2F2F2;
  --border-strong:  #C9C9C9;
  --border-focus:   #F54211;
}

[data-theme="dark"] {
  --color-primary-50:  #261513;
  --color-primary-100: #4E160B;
  --color-primary-200: #7E2412;
  --color-primary-300: #A82A11;
  --color-primary-400: #D33717;
  --color-primary-500: #F54211;
  --color-primary-600: #F7683F;
  --color-primary-700: #F58F7A;
  --color-primary-800: #FABAB9;
  --color-primary-900: #FFDFDB;
  --color-secondary-500: #00C7A9;

  --color-neutral-0:    #090909;
  --color-neutral-50:   #171717;
  --color-neutral-100:  #212121;
  --color-neutral-200:  #313131;
  --color-neutral-300:  #494949;
  --color-neutral-400:  #6A6A6A;
  --color-neutral-500:  #A7A7A7;
  --color-neutral-600:  #C9C9C9;
  --color-neutral-700:  #DFDFDF;
  --color-neutral-800:  #F2F2F2;
  --color-neutral-900:  #FFFFFF;
  --color-neutral-1000: #FFFFFF;

  --color-success-bg: #132526;
  --color-success-fg: #00C7A9;
  --color-warning-bg: #241C00;
  --color-warning-fg: #FFC800;
  --color-error-bg:   #3F1E02;
  --color-error-fg:   #FF7700;
  --color-info-bg:    #002532;
  --color-info-fg:    #00BFFF;

  --bg-base:     #090909;
  --bg-subtle:   #171717;
  --bg-elevated: #171717;
  --bg-overlay:  rgba(0,0,0,0.7);

  --text-primary:    #FFFFFF;
  --text-secondary:  #C9C9C9;
  --text-tertiary:   #A7A7A7;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #494949;

  --border-default: #212121;
  --border-subtle:  #1A1A1A;
  --border-strong:  #494949;
  --border-focus:   #F54211;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL OFL) — 실측 웹 폰트 스택 1순위
- 영문: Pretendard 공용, 코드 블록은 IBM Plex Mono (SIL OFL)
위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 40px / 700 / 52px / -0.03em (추정)
- H1: 28px / 700 / 38px / -0.02em (추정)
- H2: 20px / 700 / 30px / -0.02em (실측 20/30)
- H3: 18px / 600 / 27px / -0.01em (실측 18/27)
- Body Large: 16px / 400 / 24px / -0.01em (실측 16/24)
- Body: 15px / 400 / 23px / -0.01em (실측 15/23 — 채팅 답변 본문)
- Body Small: 14px / 400 / 20px / 0 (실측 14/20 — UI 라벨)
- Caption: 12px / 500 / 18px / 0 (실측 12/18)

Spacing

스페이싱

Base unit: 4px (Tailwind 스케일)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 채팅 본문 max-width 768px (추정), 좌우 패딩 16px(모바일)·24px(데스크톱). 좌측 사이드바 260px (추정)

Border Radius

--radius-none: 0;
--radius-sm: 6px;    /* 실측 rounded-md — 작은 버튼·드롭다운 항목 */
--radius-md: 8px;    /* 실측 rounded-lg — 버튼·배지 */
--radius-lg: 12px;   /* 실측 rounded-xl — 카드 */
--radius-xl: 16px;   /* 실측 rounded-2xl — 입력창·말풍선 */
--radius-2xl: 20px;  /* 실측 rounded-3xl — 바텀시트·모달 */
--radius-full: 9999px; /* 도구 칩·아이콘 버튼·전송 버튼 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);    /* 칩 hover */
--shadow-md: 0 2px 10px rgba(0,0,0,0.06);   /* 채팅 입력창 */
--shadow-lg: 0 8px 24px rgba(0,0,0,0.10);   /* 드롭다운·모델 선택 팝오버 */
--shadow-xl: 0 20px 48px rgba(0,0,0,0.16);  /* 모달·바텀시트 */

Iconography

스타일: Outline 중심, 선택 상태만 Filled
Stroke 굵기: 1.75~2px (추정)
모서리 처리: Round
추천 라이브러리: Lucide (웹 앱이 shadcn/ui 계열 토큰 구조를 써서 결이 맞음). 브랜드 원 심벌은 별도 SVG

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button

.btn { height: 40px; padding: 0 16px; border-radius: var(--radius-md); font: 600 14px/20px 'Pretendard', sans-serif; border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-primary:active { background: var(--color-primary-600); }
.btn-primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }
.btn-secondary { background: var(--color-neutral-100); color: var(--text-primary); }
.btn-secondary:hover { background: var(--color-neutral-200); }
.btn-secondary:active { background: var(--color-neutral-300); }
.btn-secondary:disabled { color: var(--text-disabled); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
.btn-ghost:active { background: var(--color-neutral-100); }
.btn-danger { background: var(--color-error-bg); color: var(--color-error-fg); }
.btn-danger:hover { filter: brightness(0.97); }
.btn-send { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-full); background: var(--color-primary-500); color: #FFFFFF; }
.btn-send:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }

Input

.chat-input { min-height: 56px; padding: 12px 8px 12px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--bg-elevated); box-shadow: var(--shadow-md); font: 400 15px/23px 'Pretendard', sans-serif; color: var(--text-primary); }
.chat-input::placeholder { color: var(--text-tertiary); }
.chat-input:focus-within { border-color: var(--border-strong); }
.chat-input.is-error { border-color: var(--color-error-fg); }
.chat-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); box-shadow: none; }

Card

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px; }
.card-accent { background: var(--color-primary-50); border-color: transparent; }
.card-accent .card-title { color: var(--color-primary-600); }
.card-outlined { background: transparent; border: 1px solid var(--border-strong); }

Badge / Tag

.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font: 600 12px/18px 'Pretendard', sans-serif; }
.badge-solid { background: var(--color-primary-500); color: #FFFFFF; }
.badge-subtle { background: var(--color-primary-100); color: var(--color-primary-600); }
.badge-outline { border: 1px solid var(--border-default); color: var(--text-secondary); }
.tool-chip { height: 34px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-elevated); color: var(--text-secondary); font: 500 14px/20px 'Pretendard', sans-serif; }
.tool-chip:hover { background: var(--bg-subtle); color: var(--text-primary); }

Navigation

.sidebar { width: 260px; background: var(--bg-subtle); border-right: 1px solid var(--border-subtle); padding: 12px; }
.sidebar-item { height: 40px; padding: 0 12px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font: 500 14px/20px 'Pretendard', sans-serif; }
.sidebar-item:hover { background: var(--color-neutral-100); }
.sidebar-item.is-active { background: var(--bg-elevated); color: var(--text-primary); font-weight: 700; }

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 360ms;   /* 원 모티프 확장·히어로 모션 (추정) */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

원 모티프는 작은 점에서 공간이 열리듯 퍼지는 확장 모션으로 쓴다. 답변 스트리밍은 글자 페이드 없이 바로 쌓는다(추정).

Anti-patterns

1. Inspire Red 를 넓은 배경 면에 깔지 않는다 — 붉은 주황은 전송 버튼·강조 숫자·로고 원처럼 "한 점"에만 쓴다. 2. 오류 표시에 브랜드 빨강을 쓰지 않는다 — 오류·경고는 주황(#FFEED9 / 실측 #DE7B02) 계열로 분리해 브랜드색과 헷갈리지 않게 한다. 3. 본문 텍스트를 순검정(#000)으로 두지 않는다 — 먹색 #090909 과 #545454 회색 단계로 위계를 만든다. 4. 카드마다 그림자를 겹치지 않는다 — 면 구분은 #F8F8F8 회색 면과 1px 선으로 하고 그림자는 입력창·팝오버에만. 5. 보라색 AI 그라디언트를 쓰지 않는다 — 2023 리브랜딩 이후 뤼튼의 기호는 흔한 보라 그라디언트가 아니라 무채색 + 따뜻한 빨강이다.

Wrtn (뤼튼)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처