Aa
#05030FVoid
주 배경. 캐릭터와 빛을 위한 어두운 무대.
--voidANIVATAR / 웹 시각 체계
브랜드 가이드.
지능에 개성이 더해집니다.
색상, 글자, 빛, 그리고 이를 하나의 언어로 연결하는 원칙.
01 / ANIVATAR
지능. 뚜렷한 개성.
Anivatar는 기술에 얼굴, 목소리, 실행 능력을 더합니다. 경험의 중심에는 언제나 사람이 있습니다.
핵심 원칙
의도적인
대비.
사람과 기계. 어둠과 스펙트럼의 빛. 웅장한 타이포그래피와 차분하고 읽기 쉬운 설명. 각 화면에는 시선을 이끄는 하나의 중심적인 시각 요소가 있습니다.
생동감
함께 존재하며 반응합니다.
대담함
규모와 표현에서 대담합니다.
지성
정확하고 목적이 분명합니다.
인간적인 친근함
사람에게 가까이 다가갑니다.
뜻밖의 전환
리듬의 변화로 놀라움을 줍니다.
02 / ANIVATAR
색상마다 역할이 있습니다.
웹사이트의 기본 팔레트입니다. 각 색상 견본은 색과 HEX 값, 용도를 보여 줍니다. 선명한 포인트 색상은 중요한 요소로 시선을 이끕니다.
Aa
#0B0824Deep Space
패널, 갤러리, 보조 배경 영역.
--deep-spaceAa
#F7F5FFGhost
어두운 배경의 주요 텍스트.
--ghostAa
#C9C5D6Mist
설명, 캡션, 보조 텍스트.
--mistAa
#7226FFElectric Violet
브랜드의 정체성과 에너지, 빛을 활용한 강조.
--violetAa
#F042FFHyper Magenta
표현, 목소리, 시각적 절정.
--magentaAa
#87F5F5Plasma Cyan
주요 동작, 활성 상태, 키보드 포커스.
--cyanAa
#C8FF2EAcid Lime
강조된 연락 버튼과 행동을 유도하는 포인트.
웹사이트의 강조색과 배경색
Electric Blue
#225CFF제목의 그라데이션과 장면의 빛.
Laser Blue
#00CFFF로고의 VATAR 강조와 빛을 활용한 세부 요소.
Ultraviolet
#3A00FF색상 스펙트럼의 보조 포인트.
Signal Blue
#245BFF기술 모듈과 데이터 흐름.
밝은 무대
#FBFDFF브랜드 선언을 위한 대비감 있는 배경.
오류
#FF4F68오류를 나타내는 색상. 항상 설명 메시지와 함께 사용합니다.
브랜드 가이드라인의 보조 팔레트: Night Indigo #160078, Soft Photon #F4F3F8, Ink #0B0913 및 Solar Orange #FF5A36. 이 색상들은 이후의 장면과 자료에 사용합니다. 위에는 현재 웹사이트의 기본 색상을 제시했습니다.
65%배경
25%이미지와 중립적인 영역
10%강조색
03 / ANIVATAR
세 가지 서체. 하나의 목소리.
웹사이트에서 사용하는 서체는 Space Grotesk, Manrope, Oxanium입니다. 각 서체의 역할은 일정하며, 크기는 화면 너비에 맞춰 조정됩니다.
01 / 제목용 서체
Space Grotesk
제목, 큰 숫자, 로고. 짧은 문구, 강한 규모감, 촘촘한 리듬. 주요 굵기는 600입니다.
눈을 맞추는
AI.
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
02 / 본문과 UI
Manrope
문단, 양식, 버튼. 본문 굵기: 400–500. 강조와 동작 요소: 600–700. 여유로운 행간과 가독성.
기술은 대화에서 시작됩니다.
우리는 듣고, 답하고, 행동을 돕는 디지털 캐릭터를 만듭니다. 폴란드어 글꼴 테스트 문구: Zażółć gęślą jaźń.
Aa Bb 0123456789 · Ą Ć Ę Ł Ń Ó Ś Ź Ż
03 / 기술적 강조 서체
Oxanium
번호, 작은 라벨, 상태 표시, 주 탐색 메뉴. 영문 대문자, 넓은 자간, 굵기 500–600.
목소리 / 사람 / AI
시스템 01—08
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
크기는 유동적으로 조정됩니다. 큰 문구가 화면을 이끌고, 문단은 편안한 너비와 약 1.6의 행간을 유지합니다. 모바일에서는 폴란드어의 발음 구별 기호가 온전히 보이도록 제목의 행간을 넓힙니다. 그라데이션은 문구의 한 부분만 강조합니다.
04 / ANIVATAR
브랜드의 서명.
Anivatar의 원본 로고는 사람의 옆모습과 유려한 스펙트럼 형태를 결합합니다. 배경에 따라 밝은 버전 또는 어두운 버전을 사용합니다.
지켜야 할 사항
한 줄 배치, 원래 비율, 명확한 배경, 로고 주변의 여백을 유지합니다. 머리글과 바닥글에서 동일한 표기를 사용합니다.
피해야 할 사항
로고를 늘이거나 서체를 바꾸는 일, 임의의 색상과 추가 효과를 적용하는 일, 캐릭터의 얼굴이나 복잡한 이미지 위에 로고를 배치하는 일을 피합니다.
05 / ANIVATAR
빛이 개성을 드러냅니다.
그라데이션은 캐릭터, 후광, 제목의 짧은 부분에서 광원처럼 작용합니다. 긴 텍스트는 단색을 유지합니다.
Signature Spectrum
브랜드 정체성을 나타내는 주요 그라데이션.
115° · #7226FF → #F042FF (44%) → #87F5F5웹 제목의 색상 스펙트럼
하위 페이지 제목에 사용하는 버전.
90° · #225CFF → #F042FF → #87F5F5
사람에게 가까이.
의도가 담긴 시선, 가까운 구도, 타이포그래피를 위한 공간. 서로 다른 두 색온도의 빛이 얼굴을 드러내고, 빛나는 윤곽이 배경과 캐릭터를 분리합니다.
사실적인 표현과 스타일화된 표현은 함께 사용할 수 있습니다. 구도, 조명, 표현 방식이 일관성을 만듭니다.
모티프: 캐릭터 주변의 빛, 음성 영역, 스캔 라인. 기하학적인 아이콘은 이해하기 쉬운 이름을 보완합니다.
06 / ANIVATAR
공간에도 의미가 있습니다.
유연한 12열 그리드, 기술적인 선, 변화하는 리듬: 큰 장면, 차분한 설명, 이어지는 강한 포인트.
010203040506070809101112
여백과 리듬
넓은 화면의 좌우 여백은 일반적으로 화면 너비의 4%이며, 24–72px 범위로 제한합니다. 모바일에서는 대개 20px입니다. 콘텐츠와 버튼은 항상 안전 영역 안에 배치합니다.
형태와 위계
단일 동작은 캡슐 형태로, 여러 옵션 중의 선택은 모서리가 각진 직사각형으로 표현합니다. 같은 원칙을 활용 분야, 갤러리, 요구사항 양식, 채팅에 적용합니다. 콘텐츠 모듈은 평면적으로 유지하며, 모바일에서는 여러 열을 읽기 쉬운 순서로 배치합니다.
07 / ANIVATAR
무엇을 할 수 있는지 분명하게.
각 동작에는 명확한 이름을 붙입니다. 색상, 윤곽선, 움직임이 의미를 강화하고, 키보드 포커스는 활성 요소를 표시합니다.
단일 동작 / 둥근 형태
옵션 선택 / 직사각형
대비와 접근성
Void 위에는 Ghost와 Mist를 사용합니다. Cyan, Magenta, Lime 위에는 어두운 텍스트를, Electric Violet 위에는 밝은 텍스트를 사용합니다. 색상이 바뀌는 경우에도 상태는 항상 단어나 아이콘으로 설명합니다.
의미 있는 움직임
버튼 반응: 180ms. 타이포그래피 등장 효과: 450–800ms. 장면 전환: 700–1400ms. 움직임은 동작과 상태 변화를 확인해 줍니다. 사용자가 움직임 줄이기를 설정하면 불필요한 애니메이션을 비활성화합니다.
08 / ANIVATAR
구체적으로 말합니다.
짧고 대담한 문장. 전문 용어 대신 동사를 사용합니다. 기술은 사람에게 무엇을 제공하는지 중심으로 설명합니다.
하나의 개성.
모든 채널에서.
Anivatar의 말투
“관객에게 응답하는 이야기.”
“명령 그 이상을 이해하는 집.”
“기술 지식이 필요한 바로 그곳에.”
소통 원칙
비전을 실제 활용과 연결합니다. 누구의 어떤 일을 돕는지 설명합니다. 근거 없는 최상급 표현, 검증되지 않은 통계, 사람을 대체하겠다는 약속은 피합니다.