brand design guide · trade bitcoin and ethereum faster, easier, and safer through coinone. we...

GlobalBrand DesignGuide

Ver 1.5

for Screen

본 문서에 포함된 모든 이미지의 저작권은 (주)코인원에 있습니다.

Logo

Primary Lock-up(Horizontal)

Alt(with tagline)

Alt(with tagline)

Secondary Lock-up(Vertical)

가로형 조합을 사용하는 것을 기본 원칙으로 하며, 가로형을 쓰기에 부적절한 지면이나 설치 조건일 경우에 한하여세로형 조합을 사용할 수 있습니다. 태그라인이 포함된 조합은 브랜드 슬로건을 드러내야할 때 선택적으로 사용 가능하나 태그라인의 가독성을 해치지 않는 범위에서 사이즈를 조정할 수 있습니다.

Coinone Signature

Global Brand Guide v 1.5

클리어 스페이스는 코인원 로고의 시각적 개별성을 얻기 위해 필요한 최소한의 여백으로,붉은 색으로 표시한 프레임 안으로 다른 개체가 침범하지 않게 합니다.

Clear Space

Logo


코인원의 계열사 로고는 각각의 이름을 코인원로고 우하단에 작게 표기하는 시스템을 따릅니다.

Sub Brand Logo

Logo

TransferTransfera


Primary Lock-up서비스 강조형

거래소 웹페이지 헤더에 노출되는 서비스명 또한 코인원 심볼과 결합된 형태를 취합니다.서비스명이 코인원 브랜드명보다 두 배 크게 표기된 ‘서비스 강조형’을 기본으로 사용하지만필요에 따라 브랜드강조형과 간소화형등을 혼용할 수 있습니다.

Service Logo

Logo

Secondary Lock-up브랜드 강조형

Alternative Lock-up가로형 / 간소화형


Service Logo

Logo

서비스 강조형 브랜드 강조형 가로형 간소화형

거래소 웹페이지 헤더에 노출되는 서비스명 또한 코인원 심볼과 결합된 형태를 취합니다.서비스명이 코인원 브랜드명보다 두 배 크게 표기된 ‘서비스 강조형’을 기본으로 사용하지만필요에 따라 브랜드강조형과 간소화형등을 혼용할 수 있습니다.


Color

Primary Color Palette

* 상기의 브랜드 컬러는 UI 컬러 규정과 일치하지 않을 수 있습니다. UI 디자인을 위한 규정은 별도의 UI 가이드를 참고하세요.

Primary Color Palette는 메인컬러, 서브컬러, 포인트컬러로 구성되어있으며,코인원의 시각적 아이덴티티를 대표합니다.

#006BD6Main Color

#0090FFPoint Color

#EEEFF0Gray 1

#CFD0D3Gray 2

#8D9299Gray 3

#616670Gray 4

#194386Sub Color 1

#062554Sub Color 2

Coinone Blue Gray


Secondary Color Palettes

Color

Blue계열 뿐만 아니라 Purple과 Green을 계열(Shades)의 팔레트를 Secondary Color로 사용할 수 있습니다.주로 코인원의 서브브랜드와 관련된 디자인이나 특수한 목적의 서브페이지 제작에 활용됩니다.


#8766FFMain Color

#5B43D1Sub Color 1

#DB93F9Point Color

#372A7FSub Color 2

#029191Main Color

#1D5C66Sub Color 1

#00C6BCPoint Color

#09373ASub Color 2

Coinone Purple Coinone Green


Color Contrast


WCAG 2.0 (Web Contents Accessibility Guidelines)를 준수한배경색과 내용색의 컬러 콘트라스트 가이드입니다.

Coinone Blue Gray Coinone Purple Coinone Green

Color


Color

#0090FF

R 0G 114B 255

H 206S 100B 100

R 0G 107B 214

H 208S 100B 83

R 25G 67B 134

H 216S 81B 52

R 6G 37B 84

H 216S 92B 32

#006BD6

#194386

#062554

R 143G 174B 204

H 208S 29B 80

R 97G 122B 153

H 213S 36B 60

R 74G 93B 124

H 216S 40B 48

R 52G 67B 86

H 213S 39B 33

#8FAECC

#617A99

#4A5D7C

#344356

#00BAAC

R 0G 186B 172

H 175S 100B 72

R 2G 145B 145

H 179S 98 B 56

R 29G 91B 102

H 187S 71B 40

R 9G 55B 58

H 183S 84B 22

#029191

#1D5C66

#09373A

#E696FF

R 223G 153B 255

H 280S 40B 100

R 135G 102B 255

H 252S 60B 100

R 91G 67B 209

H 249S 67B 81

R 55G 42B 127

H 248S 66B 49

#8766FF

#5B43D1

#372A7F

Hue, Saturation &Brightness색조, 채도, 명도 차이를 주어보다 다양한 유형의 브랜드 이미지를제작할 수 있습니다.

Saturated Desaturated

BrightDark

R 155G 184B 204

H 203S 23B 80

R 107G 136B 153

H 201S 29B 60

R 94G 113B 127

H 204S 25B 49

R 67G 81B 89

H 214S 24B 34

#9BB8CC

#6B8899

#5E717F

#455359

R 184G 189B 204

H 224S 9B 80

R 112G 124B 153

H 221S 26B 60

R 89 G 96B 127

H 228S 29B 49

R 63G 69B 91

H 225S 30B 35

#B8BDCC

#707C99

#59607F

#3F455B



Gradient

Solid + Gradient

기본 컬러팔레트에서 유래한 세 가지 톤의 그라디언트를 디자인에 적용할 수 있습니다. 위에서 아래 방향으로점차 밝은 색으로 변화하며 넓은 면적을 채울 때에솔리드 컬러와 함께 매칭합니다.

Color

0090FF006BD6

1943860090FF

062554194386

1

0090FF 006BD6 194386

Solid

Gradient

1 2 2 3 1 3

2

3


유사한 명도의 단색과 그래디언트를매칭하여 넓은 면적을 채울 수 있으며1:1 비율로 가로 분할된 레이아웃을구성할 수 있습니다.


Coinone Logo with Background Color

Color

Logo Color Contrast

흰색 로고는 아래 지정된 네 가지 배경색과 함께 사용할 수 있습니다.

색상대비를 위하여 명도 32%이하의 배경색에서만컬러 심볼을 사용하며, 회색 글자로 된 로고는 명도 90%이하의 배경색에서 사용할 수 없습니다.

#0090FF #006BD6 #062554


Typography

Font : Noto Sans헤드라인과 본문 모두에 Noto Sans를사용합니다. 타이포그라피 위계에 따라 Bold, Regular, Light를 혼용할 수 있습니다.

The Future of Finance금융의 미래를 앞당기다



Noto Bold

Noto Regular

Noto Light

* 본 규정은 UI가이드와 일치하지 않습니다.


1. HeadlineSize 100% Weight Bold

2. Sub Headline

Size 50%Weight Regular or Bold

3. BodySize 25~30%Weight Light or Regular

The Future of FinanceTrade Bitcoin and Ethereumfaster, easier, and safer through Coinone.

We provide several virtual currency services. Coinone strives to be the most user friendly exchange.Coione tries to lower the entry barrierto the cryptocurrency trading.

* 본 규정은 UI가이드와 일치하지 않습니다.

최소 여백 최소 여백 크기는 대문자 높이의 약 1.5배 입니다.

1.5

Paragraph Style명확한 타이포그래피 위계를 위해 헤드라인을 기준으로 단락별 포인트를 다르게 지정합니다.

1.5

헤드라인 이후의 최소 공백 간격은헤드라인의 캡하이트(대문자높이)와 동일합니다.

이후공백

Typography


Typography & Layout

1:1

Cover Type B Page

HeadlineGoesHereSubhead Goes Heredd-mm-yyyy

Cover Type A

HeadlineGoesHere

Subhead Goes Here Lorem ipsum dolor sit amet, consectetur adipi-scing elit, sed do eiusmod tempor incididunt ut labore etin voluptate velit esse cillum dolore eu

fugiat nulla pariatur.

3

텍스트는 왼쪽정렬을 기본으로 하며 코인원로고는 좌상단에 배치합니다.1:1 비율의 레이아웃으로 모바일에 최적화된 이미지 컨텐츠를 만들 수 있습니다.


Typography & Layout

3:4


HeadlineGoesHere

Subhead Goes Here

HeadlineGoesHereSubhead Goes Here

Subhead

HeadlineGoes Here

HeadlineGoes Here

SubheadGoesHere

텍스트는 왼쪽정렬을 기본으로 하며 코인원로고는 좌상단에 배치합니다.

Lorem ipsum dolor sit amet, consecte

Lorem ipsum dolor sit amet,

Typography & Layout

16:9

HeadlineGoesHere

HeadlineGoes Here


텍스트는 왼쪽정렬을 기본으로 하며 코인원로고는 좌상단에 배치합니다.


Typography & Layout

Logo Placement in Layout컨텐츠의 흐름에 따라 로고의 위치를 정합니다.

프로차트가이드

Trade Bitcoin and Ethereumfaster, easier, and saferthrough Coinone

Learn More

New YearBlockchainMeet up

* 본 규정은 UI가이드와 일치하지 않습니다.* For inspiration only


Typography & Layout

Application

brand design guide · trade bitcoin and ethereum faster, easier, and safer through coinone. we...

Documents