main-logo

Foundation

Color

디자인시스템에서 컬러는 스나이퍼팩토리를 대표하는 중요한 역할을 합니다.

색상 가이드를 준수하여 서비스에 일관성을 유지하도록 합니다.

Overview

컬러 팔레트를 적용하여 스나이퍼팩토리의 서비스 및 인터페이스에 일관성을 제공합니다.

Brand Color

스나이퍼펙토리 브랜드를 표현하는 주요 색상입니다.

메인 컬러는 Sniper Blue로 Sniper Green, Sniper Pink 색상은 보조 컬러로 사용하는 것을 권장합니다.

인쇄 등 오프라인 매체에는 CMYK값을 참고하며, 온라인 매체에는 RGB, HEX값을 참고하여 사용합니다.

Sniper Blue

HEX#358BFC

RGB53, 139, 252

CMYK74, 43, 0, 0

Sniper Green

HEX#4BD6A1

RGB75, 214, 161

CMYK62, 0, 51, 0

Sniper Pink

HEX#F3BDD6

RGB243, 189, 214

CMYK5, 36, 3, 0

Sniper Blue

스나이퍼팩토리에서 성장하여 전문성을 기르고 신뢰도를 주는 메인 컬러 블루

Sniper Green

비전공자 또는 초보자를 의미하는 그린

Sniper Pink

다양한 사람들에게 친근함을 줄 수 있는 핑크

Primary Color

Primary Color는 브랜드를 대표하는 메인 색상으로 주요 구성 요소에 사용합니다.

primary-color

Sniper Blue and variation

blue-chartblue-chart

Secondary Colors

Secondary Color은 스나이퍼팩토리의 보조 컬러입니다.

기능 또는 정보의 의미를 강조해 전달하는 목적으로 사용합니다.

secondary-color

Sniper Green and variation

green-chartgreen-chart

Sniper Pink and variation

pink-chartpink-chart

Grayscale

무채색 색상으로 Black에서 White까지 이루어지며 색상이 적용되는 UI의 특정 부분에 따라 구분하여 사용하는 컬러입니다.

Grayscale and variation

gray-chartgray-chart

State Colors

UI요소들의 상황 별 의미를 전달하는 색상으로 사용자가 상태를 식별하고, 사용자의 행동을 유도하도록 도움을 줍니다.

Error
img
Success
img
Warning
img

Red : Error

error-charterror-chart

Yellow : Warning

warning-charterror-chart

Green : Success

success-chart error-chart