개인 프로젝트에서 사용할 스타일 속성 모음.
Material Design을 참고
-
Default:
주요 브랜드 색상. 앱의 핵심적인 액션이나 강조 요소에 사용.
예시:
#6200EE용도:
- 주요 버튼, 헤더, 액션 강조.
-
On-Default:
Default 색상 위에 표시되는 텍스트나 아이콘.
예시:
#FFFFFF용도:
- Primary 색상 위의 텍스트, 아이콘.
-
Container:
Primary 색상의 부드러운 변형으로 배경색으로 사용.
예시:
#BB86FC용도:
- 카드 배경, 강조 컨테이너.
-
On-Container:
Container 색상 위에 표시되는 텍스트나 아이콘.
예시:
#000000용도:
- Primary Container 위의 텍스트, 아이콘.
-
Default:
부차적인 강조 색상으로 Primary를 보완.
예시:
#03DAC6용도:
- 보조 버튼, 아이콘, 토글 스위치 등.
-
On-Default:
Default 색상 위에 표시되는 텍스트나 아이콘.
예시:
#000000용도:
- Secondary 색상 위의 텍스트, 아이콘.
-
Container:
Secondary 관련 부드러운 변형으로 배경색으로 사용.
예시:
#66FFF9용도:
- 보조 카드 배경, 섹션 컨테이너.
-
On-Container:
Container 색상 위에 표시되는 텍스트나 아이콘.
예시:
#000000용도:
- Secondary Container 위의 텍스트, 아이콘.
-
Default:
보조적인 강조 색상으로 Primary 및 Secondary와 조화를 이룸.
예시:
#018786용도:
- 추가적인 액센트, 보조적인 강조.
-
On-Default:
Default 색상 위에 표시되는 텍스트나 아이콘.
예시:
#FFFFFF용도:
- Tertiary 색상 위의 텍스트, 아이콘.
-
Container:
Tertiary 색상의 부드러운 변형으로 배경색으로 사용.
예시:
#A7FFEB용도:
- Tertiary 관련 컨테이너, 배경 강조.
-
On-Container:
Container 색상 위에 표시되는 텍스트나 아이콘.
예시:
#000000용도:
- Tertiary Container 위의 텍스트, 아이콘.
-
Default:
오류 상태를 나타내는 색상.
예시:
#B00020용도:
- 오류 메시지, 경고 아이콘.
-
On-Default:
Default 색상 위에 표시되는 텍스트나 아이콘.
예시:
#FFFFFF용도:
- Error 색상 위의 텍스트, 아이콘.
-
Container:
Error 색상의 부드러운 변형으로 배경색으로 사용.
예시:
#FFCDD2용도:
- 오류 메시지 배경, 경고 영역.
-
On-Container:
Container 색상 위에 표시되는 텍스트나 아이콘.
예시:
#B00020용도:
- Error Container 위의 텍스트, 아이콘.
-
Default:
기본 UI 배경 색상.
예시:
#FFFFFF용도:
- 카드, 시트, 모달 등 UI의 기본 배경.
-
On-Default:
Surface 위의 텍스트, 아이콘.
예시:
#000000용도:
- Surface 배경 위의 텍스트, 아이콘.
-
Container:
더 밝거나 어두운 배경으로 사용.
예시:
#F5F5F5용도:
- 보조적인 Surface 영역.
-
On-Container:
Container 색상 위에 표시되는 텍스트나 아이콘.
예시:
#212121용도:
- Surface Container 위의 텍스트, 아이콘.
-
Default:
성공 상태를 나타내는 색상.
예시:
#4CAF50용도:
- 성공 메시지, 체크 표시 등.
-
On-Default:
Default 색상 위에 표시되는 텍스트나 아이콘.
예시:
#FFFFFF용도:
- 성공 배경 위의 텍스트, 아이콘.
-
Container:
Success 색상의 부드러운 변형으로 배경색으로 사용.
예시:
#C8E6C9용도:
- 성공 컨테이너.
-
On-Container:
Container 색상 위에 표시되는 텍스트나 아이콘.
예시:
#388E3C용도:
- 성공 컨테이너 위의 텍스트, 아이콘.
-
Default:
경고 상태를 나타내는 색상.
예시:
#FFC107용도:
- 경고 메시지, 경고 아이콘 등.
-
On-Default:
Default 색상 위에 표시되는 텍스트나 아이콘.
예시:
#000000용도:
- 경고 배경 위의 텍스트, 아이콘.
-
Container:
Warning 색상의 부드러운 변형으로 배경색으로 사용.
예시:
#FFF8E1용도:
- 경고 컨테이너.
-
On-Container:
Container 색상 위에 표시되는 텍스트나 아이콘.
예시:
#FFA000용도:
- 경고 컨테이너 위의 텍스트, 아이콘.
-
Default:
외곽선 색상으로 컨테이너나 경계선을 강조.
예시:
#DADADA용도:
- Input, 버튼 등의 경계선.
-
On-Default:
Outline 위에 표시되는 텍스트나 아이콘.
예시:
#212121용도:
- 강조된 경계선 위의 텍스트.
-
Default:
전체 배경 색상.
예시:
#FAFAFA용도:
- 페이지의 기본 배경.
-
On-Default:
Background 위에 표시되는 텍스트, 아이콘.
예시:
#000000용도:
- 배경 위의 텍스트, 아이콘.