Prev

Icons

Next

Motion

Back

Tok.D _ Design System (Beta)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f20d44ef-2ad8-46b7-bfb3-2956ac6cb718/Untitled.png

Setting - Logo

Logo

Navigation에 활용되는 로고 영역은 **215x80(px)**로 제한합니다.

1) Align

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d27fa54e-01fd-401c-b2f9-8131ef0c072a/_2021-03-15__4.17.29.png

Left

**PC** /Header, **Tab, Mobile**/Text Header , **Tab, Mobile**/Bottom Navigation - Header에서는 항상 Logo _ Left 를 적용합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fd3a2f58-30f6-46ea-92fb-26e96e2547ac/_2021-03-15__4.23.10.png

Center

**Tab, Mobile** /Icon Header 에서는 항상 Logo _ Center 를 적용합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4aba6b1f-6f4a-4db9-8298-959d1b4e1849/_2021-03-15__4.28.40.png

2) Color

제품의 로고에는 Primary 또는 White 컬러를 적용할 수 있습니다.

Background 영역이 어둡거나 색상 배경이 깔리게 되어 Header Background 를 Transparent 로 설정할 경우, White 로고를 주로 활용합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ae1ddb9-6585-4a0f-a130-fe3b7b94de30/_2021-03-15__4.32.55.png

3) Edit Guide _ Figma

  1. 보라색 점선 영역을 두번 클릭 후, 기존 로고를 삭제하세요.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a6c50db4-2e27-4952-9278-829bde4a0e0f/_2021-03-15__4.45.21.png

  1. 대치할 로고파일을 불러와 피그마 Frame 위에 올린 후,

우측 Design 탭에서 Fill - Style 버튼을 눌러 Brand Color _ Primary 를 적용하세요.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f380a43e-413f-46e7-bf81-713aca726d94/_2021-03-15__4.45.30.png

  1. 해당 로고를, 빈 보라색 점선 영역 안에 드래그 해 배치하세요.

좌측정렬, 중앙정렬 각 1개씩 배치하세요. 로고 영역은 215x80(px)로 제한합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2007761b-011c-4c8a-b213-7f751b70d1e4/_2021-03-15__4.47.21.png

  1. 위의 과정을 완료하면, Logo White 영역에도 자동으로 새로운 로고가 대치됩니다.

해당 로고를 두번 클릭한 후, 우측 Design 탭 - Selection Colors 에서 Brand color/Primary 를 Grayscale/White 로 변경해 적용하세요.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/85d06e29-dedb-4421-82f4-dd3cc128bb5f/_2021-03-15__4.47.31.png