Design System

일관된 사용자 경험을 위한 디자인 원칙과 가이드라인을 정의합니다. 효율적이고 통일성 있는 인터페이스를 구축하기 위한 약속입니다.

Color Palette

Primary Colors

#3182F6

Toss Blue

#E8F3FF

Light Blue

Grayscale

#1B1D1F

Grey 900

#191F28

Grey 800

#333D4B

Grey 700

#4E5968

Grey 600

#6B7684

Grey 500

#8B95A1

Grey 400

#B0B8C1

Grey 300

#E5E8EB

Grey 200

#F2F4F6

Grey 100

#F9FAFB

Grey 50

Semantic Colors

#EB5757

Red (Error)

#27AE60

Green (Success)

Typography

Font Family

Pretendard

Apple's system font and dynamic font system specifically designed for legibility suitable for mobile environments.

Scale

Display / B 48

AI 심리 분석 케미스트리

H1 / B 32

서로의 진심을 잇는 대화

H2 / B 24

실시간으로 분석하는 마음의 온도

H3 / B 20

오늘의 듀엣 케미는 99점입니다

Body 1 / M 18

사용자의 편의성을 최우선으로 생각합니다.

Body 2 / R 16

기본 본문 텍스트입니다. 가독성을 위해 적절한 행간과 자간을 유지합니다.

Components

Buttons

Default / Hover

Secondary

Disabled

Input Fields

Email Address

Password

Focus State

Cards & Lists

Active

생활비 통장

3명 참여중

☕️

스타벅스

12:30 PM

- 4,500원

🛒

이마트

Yesterday

- 128,000원

Iconography

Lucide React 아이콘 라이브러리를 사용합니다. 선명하고 일관된 라인 스타일을 유지하며, 24px 사이즈를 기본으로 2px 스트로크 두께를 사용합니다.

icon name

UX Writing Guide

01 해요체 사용

딱딱한 '합니다' 대신 부드러운 '해요체'를 사용하여 친근하게 다가갑니다.

Bad정산이 완료되었습니다.

Good정산이 완료됐어요.

02 능동형 문장

주체적인 행동을 강조하기 위해 피동형보다는 능동형 문장을 사용합니다.

Bad로그인이 필요합니다.

Good로그인해주세요.