Next
Back
똑똑한 개발자는 라이트모드와 다크모드 두가지 모드의 컬러시스템을 사용하고 있습니다.
기본적으로 컬러 별 1:1 대응을 따르며, 예외적으로 각 모드에서 지정되는 컬러 요소를 System Color로 구분합니다.
각 컴포넌트는 시스템 모드 정책에 따라, 대응되는 컬러로 적용됩니다.
똑똑한 개발자는 Primary(#4575F5) 색상을 브랜드 컬러 메인으로 사용합니다.
컨텐츠의 위계 구조에 따라 Secondary, Tertiary 컬러를 부가적으로 사용할 수 있습니다.
똑똑한 개발자 디자인 시스템의 브랜드 컬러는 서비스에 맞게 색상 변경이 가능하며, 각 색상은 Brand Sub Color와 대응되어 아이콘, 컴포넌트 등의 요소에 사용됩니다.
브랜드 요소에 부가적으로 사용되는 컬러입니다.
똑똑한 개발자는 Orange 컬러를 포인트 컬러로 사용합니다.
포인트 컬러는 컨텐츠 및 아이콘, 컴포넌트 등에 활용됩니다.
적용되는 서비스에 따라 포인트 컬러는 변경 가능하며, 디자인시스템 상에서 아예 생략되거나 Primary Sub , Gradient Point1 색상과 동일하게 사용될 수 있습니다.
인포메이션 요소를 나타냅니다.
똑똑한 개발자의 경우, 브랜드 컬러와 동일하게 Success 에 Primary 색상을 사용하고 있지만,
브랜드나 서비스 정책에 따라 Success 에 Point 또는 다른 색상 요소를 적용해 활용할 수 있습니다.
기본적으로 Gradient 0 을 주요 UI에 활용하며, Primary - Primary Sub 컬러를 사용합니다.
방향은 수직이 기본으로, 때에 따라 아이콘, 배경 등의 요소에 대각선 방향이 지정됩니다.
부가적으로 Gradient point 컬러를 단계별로 지정해, Primary 와 함께 Gradient 1,2 등을 생성할 수 있습니다.
그라디언트 컬러 역시 라이트모드와 다크모드 에 대응하는 색상이 일괄 적용됩니다.
회색조로 사용되는 색상을 정의합니다.
Black 과 White 를 포함해 Gray0 부터 Gray5 까지 총 8단계로 구성됩니다.
각각의 색상은 모드에 따라 1:1로 대응합니다.
라이트모드에선 명도가 높은 그레이스케일 단계가 주로 사용되며, 다크모드 에서는 대응하는 어두운 명도의 컬러들이 주로 활용됩니다.
1:1로 대응되지 않고, 라이트모드와 다크모드에 따라 별도로 지정되는 System Color 를 정의합니다.
백그라운드 컬러는 White - Black 의 1:1 대응이 아닌, 지정된 단계의 컬러를 사용합니다.
각 모드에서 Primary Background, Secondary Background, Tertiary Background 의 세가지 색상을 적절히 활용합니다.
기본적으로 Primary Background 를 우선으로 사용하며, 컨텐츠에 포함되는 Sub-Background의 경우 Secondary Background 를 사용합니다.
부가적으로 가장 아래에 적용되는 배경요소의 경우에는 Tertiary Background 색상을 활용합니다.
각 모드에서 모달 컬러를 지정해 사용합니다. Pop-up Modal , Center Modal , Bottom Modal , Scroll Modal 을 포함한 모든 경우에 적용됩니다.
컨텐츠 구조에 따라 일부 페이지 영역을 투명도가 있는 어두운 색상으로 가려야 할 때 사용합니다.
주로 Modal 등과 함께 사용되며, 똑똑한 개발자에서는 20% , 50% 두 가지 단계에 따른 Dim Color 를 활용하고 있습니다.
라이트모드와 다크모드 에서 모두 동일하게 Black(#1A1A1A) 색상을 사용하며, 단계는 상황에 맞게 적절히 적용합니다.
기본적으로 50% Dim Color를 활용하며, Bottom Sheet, Dropdown option tap 같은 컴포넌트의 경우 20% Dim Color를 사용하기도 합니다.
텍스트에는 Black, Gray4, Brand Color, White 색상이 활용됩니다.
컨텐츠 위계 구조에 따라 Black , Gray4 색상을 순차적으로 사용하며, Regular 타입을 기본으로 적용합니다.
중요한 정보를 표기하는 경우 Primary 컬러와 같은 Brand Color 및 Bold 타입의 텍스트 정책을 사용할 수 있습니다.
Color Component 내부에는 항상 ****고정된 Fixed Text Color 를 적용합니다.
Fixed Text Color 를 제외한 모든 텍스트 컬러는 라이트모드와 다크모드 에 따라 1:1 대응됩니다.
보다 상세한 텍스트 정책은 Typography 탭에서 소개합니다.
버튼 내부에 사용되는 텍스트의 경우, Bold 타입을 기본으로 합니다.
컬러 또는 비활성화 색상으로 채워진 Full Button의 경우, 텍스트 컬러는 Fixed Text Color White 색상을 기본으로 사용합니다.
라이트모드와 다크모드 에 관계없이 컬러 버튼에 적용된 텍스트 또한 Fixed Text Color White 색상을 유지해 적용합니다.
상세한 내용은 아래의 [Color Component Text] 를 참고해주세요.
비활성화 상태의 텍스트는 Gray 3 색상을 사용합니다.
정보를 입력 받는 Input Field 안의 텍스트 또한 Gray 3 을 사용합니다.
입력 오류 및 안내 관련 텍스트, 또는 중요 고시 사항이 있을 경우에는 Warning 컬러로 텍스트 정보를 표기합니다.
Sub Text 또는 입력안내와 같은 '정보표시' 목적의 텍스트는 Gray4, 이외의 활성화 상태에서는 모두 Black 컬러를 사용합니다.
모든 텍스트 컬러는 1:1 대응이 기본이지만, 컬러 컴포넌트 내부에 쓰인 Text Color 의 경우 라이트모드와 다크모드에 관계없이 동일한 텍스트 색상을 유지하며 적용합니다.