---
version: alpha
name: "Chatter"
description: "둥근 말풍선, 친근한 틸, 대화가 중심인 앱. Chatter는 사람과 메시지를 중심에 둡니다. 흰 화면, 내가 보낸 말은 틸 말풍선, 답장은 옅은 회색 말풍선, 둥근 아바타, 넉넉한 22px 모서리. 읽지 않음 배지와 입력 중 상태는 화면을 슬롯머신처럼 만들지 않고도 분명하게 보입니다."
colors:
  primary: "#0F7F81"
  on-primary: "#FFFFFF"
  secondary: "#F08A4B"
  tertiary: "#5B7BE0"
  neutral: "#56676A"
  surface: "#FFFFFF"
  on-surface: "#14201F"
typography:
  display-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 18px
  md: 20px
  lg: 22px
  xl: 26px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Chatter는 사람과 메시지를 중심에 둡니다. 흰 화면, 내가 보낸 말은 틸 말풍선, 답장은 옅은 회색 말풍선, 둥근 아바타, 넉넉한 22px 모서리. 읽지 않음 배지와 입력 중 상태는 화면을 슬롯머신처럼 만들지 않고도 분명하게 보입니다.

## Colors

- **primary (#0F7F81):** 짙은 틸. 내 메시지 말풍선, 보내기 버튼, 읽지 않음 배지에 씁니다. 다크 모드에서는 밝은 아쿠아.
- **on-primary (#FFFFFF)**
- **secondary (#F08A4B):** 살구색. 반응, 멘션, 두 번째 차트 계열에 씁니다.
- **tertiary (#5B7BE0):** 페리윙클. 링크, 공유한 파일, 세 번째 계열에 씁니다.
- **neutral (#56676A):** 회색빛 틸. 채팅 목록의 타임스탬프, 읽음 표시, 메시지 미리보기에 씁니다.
- **surface (#FFFFFF):** 흰색. 카드와 받은 말풍선은 옅은 회색빛 틸입니다.
- **on-surface (#14201F)**

## Typography

전체를 Plus Jakarta Sans로: 화면 제목(30px)과 이름은 Bold 700, 메시지는 Regular 400 16px에 줄 높이 1.5. 타임스탬프와 미리보기는 13px.

## Layout

좌우 패딩 16px의 휴대폰 화면, 이름표가 있는 탭 네 개와 읽지 않음 배지가 있는 높이 60px의 하단 탭 바. 채팅 목록은 하단에 입력창이 고정된 전체 화면 스레드로 열립니다.

## Shapes

말풍선, 카드, 입력창은 22px 모서리이며 꼬리 쪽 모서리만 더 좁게. 동그란 아바타, 모든 탭 영역은 최소 48px. 그림자는 없고 필요한 곳에 옅은 1px 테두리.

## Components

아바타, 이름, 미리보기, 시간, 읽지 않은 수가 있는 채팅 목록 행, 보낸 사람별로 묶은 메시지 말풍선, 첨부와 보내기가 있는 입력창, 반응 필, 입력 중 표시.

## Do's and Don'ts

- 같은 사람이 연속으로 보낸 메시지는 묶으세요.
- 키보드 위에 입력창이 계속 보이게 하세요.
- 내 메시지와 핵심 행동 외에는 틸을 쓰지 마세요.
- 말풍선에 그림자나 그라데이션을 넣지 마세요.