minaChoi/o2o-negosium-original
1
0
Fork 0
Code Pull Requests Activity

style(front): 디자인 토큰 정비 (채팅 타이포 + 브랜드 채도 인하)

Browse Source 
- 타이포그래피 스케일 추가 (headline/title/body/reject 등) — 채팅에서 사용
- 채팅 영역 스크롤바 스타일(.chat-scroll) 추가
- 브랜드 스케일 채도 추가 인하, surface(콘텐츠 면) 톤 조정

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
민헌 2026-06-17 14:37:48 +09:00
parent 4d1c6f97c0
commit 54b44c0877
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
front/src/index.css
View File

@ -9,9 +9,9 @@
--radius: 0.625rem; /* 10px 기준 */
/* 브랜드 */
--brand-500: #4e81cd;
--brand-600: #124a9e; /* = --primary */
--brand-700: #0d3673;
--brand-500: #5a83c1;
--brand-600: #254d8b; /* = --primary */
--brand-700: #1b3965;
/* Neutral */
--neutral-90: #151515;
@ -34,7 +34,7 @@
/* 시맨틱 */
--background: var(--neutral-00);
--foreground: var(--neutral-90);
--surface: #eceff5; /* 브랜드 틴트 쿨 그레이 (콘텐츠 면) */
--surface: #eef0f4; /* 중립 라이트 그레이 (콘텐츠 면, 블루기 최소) */
--card: var(--neutral-00);
--card-foreground: var(--neutral-90);
@ -136,6 +136,29 @@
}
}
/* 타이포그래피 스케일 (headline / title / body / reject) */
@layer components {
.headline-3 { font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.48px; }
.headline-4 { font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: -0.4px; }
.title-1 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; }
.title-2 { font-size: 18px; font-weight: 600; letter-spacing: -0.36px; }
.title-3 { font-size: 16px; font-weight: 600; letter-spacing: -0.32px; }
.title-5 { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; }
.title-6 { font-size: 13px; font-weight: 600; letter-spacing: -0.26px; }
.body-1 { font-size: 20px; font-weight: 400; line-height: 30px; letter-spacing: -0.4px; }
.body-3 { font-size: 16px; font-weight: 400; letter-spacing: -0.32px; }
.body-5 { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; }
.body-1-read-r { font-size: 20px; font-weight: 400; line-height: 150%; letter-spacing: -0.4px; }
.body-1-read-b { font-size: 20px; font-weight: 700; line-height: 150%; letter-spacing: -0.4px; }
.caption-1 { font-size: 13px; font-weight: 400; letter-spacing: -0.26px; }
/* 메뉴 섹션 제목 (MD안내/협상절차/이용방법) */
.menu-title { font-size: 20px; font-weight: 700; line-height: 25px; letter-spacing: -0.4px; }
/* 재견적/재협상 폼 */
.reject { font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: -0.4px; color: var(--neutral-90); }
.reject-2 { font-size: 18px; font-weight: 700; line-height: 150%; letter-spacing: -0.4px; color: var(--neutral-90); }
.reject-gray { font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: -0.4px; color: var(--neutral-60); }
}
/* 스크롤바 (webkit) */
::-webkit-scrollbar {
width: 6px;
@ -148,3 +171,11 @@
::-webkit-scrollbar-thumb:hover {
background-color: var(--muted-foreground);
}
/* 채팅 영역 스크롤바 (배경과 구분되게 진하게) */
.chat-scroll::-webkit-scrollbar-thumb {
background-color: var(--neutral-40);
}
.chat-scroll::-webkit-scrollbar-thumb:hover {
background-color: var(--neutral-60);
}