English

브랜드

선과 원, 그리고 금속에 닿는 빛.

마크의 구성 원리와 IO Patina LLC가 사용을 위해 공개하는 파일을 소개합니다.

모든 크기에서 그리드를 바탕으로 그리는 심벌과 기본 로고 조합입니다. 둘 다 벡터이며, 벡터를 찍은 이미지가 아닙니다.

구성

두 도형이 아닌 하나의 원리.

원 전체에 방사선을 그리며, 각 방사선의 각폭은 방향에 따라 달라집니다. 각폭이 간격 전체에 이르면 이웃한 방사선이 만나 고리가 채워지고, 절반으로 줄어들면 부채꼴로 갈라집니다. 따라서 초승달과 부채꼴은 같은 구조를 두 각도에서 본 것이며, 둘 사이의 전환에 이음새가 없는 이유입니다.

캡 그리드 — 고리 외경 = 100단위
측정 항목값설명
고리 외경 100 그리드 기준 — 나머지 수치는 모두 이에 대한 백분율
빈 원의 지름 61.18 참조 이미지에서 원 피팅 잔차 0.84px
빈 원의 중심 이동 왼쪽으로 2.53 빈 원의 중심은 고리와 다르며, 의도된 설계
막대 폭 12.99 위아래가 고리와 일치
막대와 고리 사이 간격 12.30 마크 내부의 여백
전체 원의 방사선 수 114 ± 3 네 반지름의 자기상관으로 측정한 간격은 3.10°–3.23°이며, 원본 해상도가 낮아 정확한 개수는 셀 수 없습니다
방사선 폭 50% 열린 부채꼴 영역에서 간격 대비 비율
채워진 호 195°–330° 실측값 — 중심은 9시 방향의 약간 아래
전체 폭 126.67 고리 바깥으로 뻗는 부채꼴 포함

크기별 시각 보정

마크가 작아질수록 방사선이 줄어듭니다.

방사선과 간격을 구분해 보려면 약 3픽셀의 호 길이가 필요합니다. 마크는 114개의 방사선을 그린 뒤 래스터 변환에서 뭉개지게 두는 대신 네 가지 형태를 사용합니다. 고리, 중심에서 벗어난 빈 원, 막대와 고리 사이의 간격은 네 형태 모두 같으며, 해당 크기에서 표현할 수 없는 세부만 생략합니다.

Display 캡 높이 90px 이상 · 방사선 114개 전체
Medium 캡 높이 40–89px · 세 번째마다 방사선 하나를 넓혀 표시 — 38개
Quiet 캡 높이 40px 미만 · 부채꼴 없이 원래 비율 유지 — 사이트 헤더
Favicon 16 및 32px 아이콘 · 부채꼴을 생략하고 막대 폭을 17.5(으)로 넓혀 정수 픽셀에 맞춤

차이를 볼 수 있도록 네 형태를 같은 크기로 표시했습니다. 실제로는 각각 설계된 크기에서 사용합니다.

색상

텍스트를 담는 여섯 가지 색.

아래의 모든 색 조합은 WCAG 2.2를 기준으로 측정합니다. 키트의 다섯 색 중 세 가지는 원래 값으로 Paper 위에서 4.5:1에 도달하지 못합니다. Stone Gray는 2.81:1, Portal Gold는 1.85:1, Mist는 1.10:1입니다. 따라서 기준을 충족하는 곳에 사용하고, 충족하지 못하는 곳에서는 같은 색상 계열에서 명도를 낮춥니다. 대체 값은 디자인 시스템에 기록되어 있습니다.

  • Deep Ink

    #0F1114

    제목, 기본 버튼, 어두운 배경

    Paper 배경에서 16.76:1

  • Paper

    #F3F1ED

    페이지 배경

    Deep Ink 배경에서 16.76:1

  • Portal Gold

    #C8B092

    어두운 표면의 강조색 전용

    Deep Ink 배경에서 9.08:1

  • Bronze

    #7C5F3E

    밝은 표면의 링크와 표시

    Paper 배경에서 5.22:1

  • Graphite

    #4A4C4E

    본문

    Paper 배경에서 7.65:1

  • Stone

    #6B6D6B

    작은 레이블 — 가장 밝은 무채색

    Paper 배경에서 4.63:1

구성 요소

마크에서 가져온 네 가지 요소.

마크는 정밀한 구조입니다. 페이지에 마크만 얹으면 스티커를 붙인 페이지처럼 보입니다. 이 네 요소는 마크의 치수를 페이지 구조에 적용하여, 정체성과 웹사이트가 로고만 공유하는 별개의 것이 되지 않게 합니다. 모든 IO Patina 사이트는 같은 요소를 사용합니다. 공용 테마 위치: theme/.

요소 01 · 막대

모든 섹션 제목을 표시합니다. 정체성에서 가장 쉽게 알아볼 수 있는 요소로, 모든 페이지에서 여러 번 부담 없이 사용합니다.

5px 선 · 레일 전체 높이 · 강조색

기준: 12.99단위의 막대

구성

두 도형이 아닌 하나의 원리.

색상

텍스트를 담는 여섯 가지 색.

요소 02 · 방사선 구분선

페이지의 주요 경계에 한 번 사용합니다. 다른 구분선은 가는 선으로 유지합니다. 형태가 있는 구분선은 유일할 때 의미를 유지합니다.

간격 6px · 채움 비율 50% · 높이 10px · 오른쪽으로 점차 옅어짐

기준: 부채꼴의 방사선 간격

요소 03 · 금속

강조가 아닌 표면입니다. 페이지마다 히어로 또는 어두운 띠 뒤에 한 번 사용하며, 읽어야 하는 본문 뒤에는 사용하지 않습니다.

막대의 색 번짐은 페이지 가장자리 13px에 · 고리의 색 번짐은 오른쪽 위에서

기준: 공개된 그라데이션

요소 04 · 중심에서 벗어난 빈 원

레이아웃은 고리의 비대칭을 따릅니다. 텍스트 열은 정보 열보다 넓고, Display 마크는 페이지 밖으로 이어집니다.

열 비율 1.35 / 1 · 마크를 오른쪽 경계 너머로 16% 확장

기준: 빈 원의 2.53단위 중심 이동

페이지당 사용 범위는 금속 표면 하나, Display 마크 하나, 어두운 띠 하나이며, 막대와 방사선 구분선은 콘텐츠의 섹션 수만큼 사용합니다. 이를 넘으면 정체성은 다시 장식이 됩니다.

서체

자체 제공하는 세 가지 서체.

세 서체 모두 이 도메인에서 부분집합 woff2 파일로 제공합니다. 사이트는 외부에 폰트를 요청하지 않으므로 콘텐츠 보안 정책에서 외부 출처를 전면 금지할 수 있습니다.

한국어 본문과 인터페이스에는 Noto Sans KR, 페이지 제목과 주요 문장에는 Noto Serif KR을 함께 사용합니다. 한국어 폰트도 이 사이트에서 직접 제공합니다.

Archivo 인터페이스, 제목, 본문

Ideas, carefully made.

가변 굵기 100–900. 섹션 제목, 내비게이션, 버튼, 이어지는 본문에 사용합니다. 워드마크 윤곽의 원본 서체이기도 합니다.

Source Serif 4 큰 제목 전용

Ideas, carefully made.

페이지 제목과 주요 문장, 30–62px. 명조체의 표현이 질감으로 바뀌는 26px 아래로는 사용하지 않습니다.

Martian Mono 레이블과 데이터

Ideas, carefully made.

작은 머리말, 정보 행, 사이트의 모든 숫자에 사용하여 측정값이 측정값답게 읽히도록 합니다.

파일

공개 로고 파일.

사이트 헤더와 같은 기하 모듈에서 생성하므로 파일과 실제 마크가 달라질 수 없습니다. 모두 벡터입니다.

마크 사용

여백 유지

모든 방향에 고리 지름의 절반 이상 여백을 둡니다. 공개 파일의 viewBox에 이미 포함되어 있으므로 파일 경계끼리 맞닿게 배치해도 됩니다.

고리를 단순한 원으로 다시 그리지 않기

부채꼴로 이어지는 초승달이 마크입니다. 일반적인 고리는 다른 로고입니다.

비율 변경, 회전, 색상 변경 금지

공개 파일을 사용하세요. 마크는 높이보다 너비가 크므로 한 축만 늘리면 원이 변형됩니다.

약 56px 아래에서는 아이콘 파일 사용

그 크기에서는 부채꼴을 구분할 수 없어 잡음처럼 보입니다. 파비콘과 앱 아이콘에는 이미 알맞은 형태가 적용되어 있습니다.

사용 허가

IO Patina 마크와 워드마크는 IO Patina LLC의 상표입니다. 위 파일은 회사를 소개하거나 링크하는 사람이 올바르게 표현할 수 있도록 공개합니다.

이 파일은 IO Patina LLC 및 그 제품을 지칭하는 데 사용할 수 있습니다. 존재하지 않는 지지, 파트너십, 소속 관계를 암시하거나 다른 조직의 자체 표장에 결합해서는 안 됩니다.

다른 용도나 이 페이지에 없는 로고 조합이 필요하면 다음 주소로 연락해 주세요: legal@iopatina.com.