Skip to content

COLOR_GUIDE.md

Latest commit

 

History

History
73 lines (52 loc) · 3.2 KB

COLOR_GUIDE.md

File metadata and controls

73 lines (52 loc) · 3.2 KB

Gemini App Style - Color Guide

이 문서는 애플리케이션의 UI에 일관성을 부여하기 위한 컬러 가이드를 정의합니다. 모든 색상과 타이포그래피는 Gemini 앱의 시각적 스타일에 기반합니다.

  • 기본 폰트: Product Sans

1. Core Palette (핵심 색상 팔레트)

앱의 전체적인 톤앤매너를 구성하는 기본 색상 시스템입니다. Material 3의 역할(Role)을 기준으로 합니다.

역할 (Role) 색상 코드 설명
Primary #4285F4 에러 메시지 등 사용자의 주의를 끄는 강조 텍스트에 사용됩니다.
Background #F8F9FD 앱의 전체 배경색입니다. 순수한 흰색이 아닌 푸른빛이 도는 밝은 회색입니다.
Surface #FFFFFF 카드(Card)와 같이 배경 위에 표시되는 UI 요소의 표면 색상입니다.
SurfaceVariant #F0F4F9 코드 블록처럼, 일반 표면과 시각적 구분이 필요한 영역의 배경색입니다.
Outline #C4C7C5 카드 등의 기본 외곽선 색상입니다.

2. Typography Colors (텍스트 색상)

텍스트의 위계와 목적에 따라 다른 색상을 사용합니다.

텍스트 종류 색상 코드 설명
제목 (Title) #000000 CrashActivity의 제목과 같이 가장 높은 위계의 텍스트에 사용됩니다.
기본 (Body) #1F1F1F 일반적인 본문 텍스트의 기본 색상입니다.
보조 (Secondary) #42474E 설명, 시간 등 부가 정보나 덜 중요한 텍스트에 사용됩니다.
강조 (Accent) #4285F4 Primary 색상과 동일하며, 오류 메시지 등 강조가 필요할 때 사용됩니다.

3. Component Colors (컴포넌트별 색상)

각 UI 컴포넌트는 다음과 같은 색상 규칙을 따릅니다.

App Bars / Toolbars (상단 앱 바)

  • 배경: #F8F9FD (Background 색상 사용)
  • 제목 텍스트: 화면에 따라 다름
    • MainActivity: #1F1F1F (기본 텍스트 색상)
    • CrashActivity: #000000 (더 높은 강조를 위해 순수 검은색 사용)

Cards (카드)

  • 배경: #FFFFFF (Surface 색상 사용)
  • 테두리: #C4C7C5 (Outline 색상 사용)
  • 코드 블록 배경: #F0F4F9 (SurfaceVariant 색상 사용)

Buttons (버튼)

버튼은 역할과 중요도에 따라 세 가지 스타일로 나뉩니다.

1. 메인 액션 버튼 (예: '닫기')

가장 중요한 동작을 수행하는 버튼입니다.

  • 배경: #CDE5FF
  • 텍스트: #484848

2. 보조 액션 버튼 (예: '공유')

메인 버튼과 함께 사용되며, 덜 중요한 동작을 수행합니다.

  • 배경: #FFFFFF
  • 테두리: #EBEBEB
  • 텍스트: #484848

3. 카드 내 액션 버튼 (예: 'Trigger Crash')

카드 내부에 위치하며, 해당 카드에만 영향을 미치는 동작을 수행합니다.

  • 타입: TextButton (배경, 테두리 없음)
  • 텍스트: #4285F4 (Primary 색상 사용)

Dividers (구분선)

  • 아이템 구분선: #C4C7C5 (Outline 색상 사용)
  • 섹션 구분선: #F0F0F0 (아이템 구분선보다 연한 회색)