비주얼 아이덴티티 mble 블 허브

1) 브랜드 본질과 원칙

이미지: 기술, 정직하고 신뢰할 수 있으며 데이터 중심적이며 책임이 있습니

톤: 예약되고 유능한; "도박" 과장없이.
원칙: 가독성> 장식, 기본 가용성, 제품 간의 일관성.

2) 로고: 구조 및 사용

2. 1 개의 옵션

메인 (가로): 기호 + 단어 Gamble Hub.
컴팩트 (기호): favicon/아바타 용.
수직: 좁은 지역의 경우.

2. 2 구조 및 보안 영역

8px 그리드. 가드 영역 = 주변 주변 수도 G의 높이.
최소 크기: 너비 18mm; 화면-120 px.
팔레트 외부에서 비율을 변경하고, 왜곡하고, 효과/그라디언트를 추가 할 수 없습니다.

2. 3 배경

밝은 배경에서-색상 로고.
복잡한/사진-플레이트 8-12 px 라운드의 흑백 (흰색/검정).
어둠 속에서-거꾸로.

3) 컬러 시스템 (토큰)

3. 1 기본 팔레트

기본/인디고 600: '# 2F6BFF'

기본 다크/인디고 700: '# 1E54F0'

성공/녹색 600: '# 2EAE60'

경고/주황색 600: '# FF9F1A'

중요/빨간색 600: '# E53935'

FG 기본: '# 11131A'

FG 음소거: '# 656D76'

BG베이스: '# FFFFFF'

BG 미묘한: '# F7F8FA'

BG 역전: '# 0E1116'

3. 그라디언트 2 개 (선택 사항)

브랜드 그라디언트: '선형 그라디언트 (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' -사용 복용.

3. 3 대조 및 상태

기본 버튼: 배경 '# 2F6BFF', 흰색 텍스트, 호버 '# 1E54F0', 40% 알파 비활성화.
텍스트 대비 5:1 (AA). 반전의 경우 - 3:1 이상입니다.

4) 타이포그래피

제목: Inter/SF Pro/시스템, 지방 함량 600-700.
텍스트: 인터 14-16 px, 라인 높이 1. 5.
코드/모노: JetBrains Mono 또는 시스템 모노.
계층: H1 32/40, H2 24/32, H3 20/28, Body 16/24, 캡션 12/16.
인터페이스에 장식 글꼴을 사용하지 마십시오.

5) 그리드, 들여 쓰기 및 반경

격자: 8px; 최대 너비 1120-1280 px의 컨테이너.
카드: 내부 들여 쓰기 16-24 px, 카드 간-16 px.
라디오: 8/12/16 px; 8 px 버튼의 경우 기본 12 px.
체크리스트: '0 1px 2px rgba (0,0,0, .08)' (sm), '0 4px 12px rgba (0,0,0, .10)' (md).

6) 도해 법과 삽화

아이콘 그리드 24 × 24, 라인 1. 75-2px, 라운드가 일치합니다.
시맨틱은 기본이고 색상은 보조입니다 (상태에 따라 색상 변경).
삽화: 평평하고 "캐주얼 한" 기호 (칩/카드-중립 정보 자료 및 중간 정도의 비 인센티브 상황에서만).

7) 이미지와 사진

주제: 기술, 데이터, 보안, 팀.
잭팟/색종이 진부한 피하십시오.
사진 위에는 텍스트 대비를위한 그라디언트/다크 플레이트가 있습니다 (어두운 부분에서 최소 60% 불투명도).

8) 어둡고 가벼운 테마

어두운: 배경 '# 0E1116', 텍스트 '# E6E8EB', 경계 '# 2A2F37'.
액센트는 대비를 유지합니다 (1 차 밝게 8-12%).
그래픽: 배경이 배경보다 2 단계 가볍고 그리드가 흐려지고 캡션이 대조됩니다.

9) 가용성 (A11y)

AA/AAA 대비; 초점 스타일을 제거 할 수 없습니다.
로고의 텍스트 대안 및 중요한 이미지.
최소 클릭 크기는 40-48 px입니다.

존중 '감소 운동 선호' -애니메이션 감소/비활성화

10) 톤 및 마이크로 카피 라이팅

전문 용어가없는 짧고 정확합니다.
오류는 사용자에게 무엇을해야하는지 설명합니다.
단위 및 형식: 사용자 로케일, 인터페이스-입력시 ISO, 코드가있는 통화 (EUR, USD) 날짜.
식료품 메시지에 "도박" 은유를 사용하지 마십시오.

11) 토큰 예 (JSON 및 CSS)

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12) 구성 요소 및 상태 (UI 예)

기본 버튼: 기본 -600 배경, 텍스트 # FFF, 호버 기본-700, 비활성화 된 40% 알파.
배지: 읽을 수있는 텍스트와 아이콘으로 성공/경고/비판.
카드: BG Base 배경, sm shadow, md 반경, 16 px 헤더, 16-24 px 본체.

13) 애니메이션과 모션

전환 120-200 ms, '용이성' 곡선.
애니메이션 - '변환 '/' 불투명도' 만.
중요한 상태의 경우-애니메이션이없는 경우 (산만하지 마십시오).

14) 소셜 미디어, 프리젠 테이션, 이메일

아바타/아이콘: 1 차 -600 다이, 들여 쓰기 12-16 px에 부호.
슬라이드: 밝은/어두운 배경, 8px 그리드, H1 40-48, 내용 18-24.
이메일: 맵 템플릿 600-720 px 너비, 시스템 글꼴/인터, 버튼 44 px 높이 이상, 어두운 테마가 고려됩니다.

15) 인쇄, 머치 및 외관

CMYK 색상 프로파일, Pantone 등가물은 인쇄소에 동의합니다.
로고와 반지름의 최소 크기를 유지하십시오.
종이-무광택, "비명을 지르는" 광택을 피하십시오. 엠보싱이 마크에 허용됩니다.

16) 법적 마크업 및 책임있는 플레이

필요한 경우 ®/™ 표시가있는 로고 (urd. 국가).
면책 조항 및 연령 제한 - 레이아웃의 하위 영역에서; 가독성 AA.

과도한 행동을 장려하는 콘텐츠에는 신원을 사용하지 마십

17) 현지화 및 RTL

로고 기호/단어는 번역되지 않습니다.
텍스트 블록 - 리소스; RTL 지원 (화살표/아이콘 미러링).
레이아웃은 독일어/터키어/아랍어로 줄 길이를 고려하십시오.

18) 하지 마십시오

• 대비, 가드 영역, 글꼴 계층 구조, 8px 그리드를 유지하십시오.
• 사진/비디오의 가시성을 확인하십시 다이를 사용하십시오.
• "랜덤" 색상이없는 토큰을 따르십시오.

• 로고를 늘리거나 깎고 "아름다움을 위해" 그림자/뇌졸중을 적용하십시오.
• "도박" 이미지를 제품의 배경으로 사용하십시오.
• 비표준 글꼴을 혼합하거나 대비를 끊거나 초점을 제거하십시오.

19) 자산, 명명 및 버전

명명: 'gh-logo-hz-color. svg ',' gh-logo-vt-mono-white. svg ',' gh-icon-24-arment. svg '.
"/브랜드/로고/", "/브랜드/아이콘/24/', '브랜드/템플릿/',' 브랜드/글꼴/'.
형식: 로고/아이콘 용 SVG; 화면에 대한 PNG/WebP; 인쇄용 PDF.

Versioning: 토큰/아이콘 팩 용 SemVer; '추가/변경/사용 취소/제거' 가있는 변경 로그

진실의 출처: → 웹/iOS/Android 용 토큰 저장소 구축.

20) 품질 관리 및 프로세스

PR의 브랜드 검토: 토큰 및 대비 확인.
논란의 여지가있는 배경 이미지의 A/B (가독성/변환).
라이터: 토큰 외부의 색상을 금지하고 이미지의 alt-tex를 확인합니다.
분기 별 감사: 팔레트/타이포그래피/아이콘 팩 일관성.

21) 템플릿

기조 연설/슬라이드: 제목, 섹션, 내용, "데이터/차트", 최종.
소셜 미디어: 1:1 아바타, 16:9 배너, 9:16 이야기.
이메일: 인사말, CTA, 알림, 다이제스트.

착륙: 영웅 블록, 3 특전, 쇼케이스, CTA, 지하실

22) 신청 점검표

• 로고: 올바른 옵션, 보안 영역, 대비, 크기.
• 색상: 토큰 만; AA 대비.
• 글꼴: 계층 구조, 한 줄씩, 대상 크기.
• 아이콘: 격자 24 × 24, 균일 한 선 두께.
• 이미지: 유효한 테마, 상단의 텍스트 가독성.
• 어두운/가벼운 테마: 검증 된 인공물은 없습니다.
• Localization/RTL: 라인이 레이아웃을 "파괴" 하지 않습니다.
• 법률/책임 게임 마크 업이 있습니다.

23) 구현 계획 (3 회 반복)

• 로고, 팔레트, 타이포그래피, 기본 토큰, 아이콘 세트 24 × 24 (메인 40-60 pcs) , 프리젠 테이션 템플릿 및 전자 메일.

• 어두운 테마, 토큰의 UI 구성 요소 (버튼, 카드, 테이블), 그래프 가이드, 소셜 미디어 팩, 방문 페이지.

• 확장 된 아이콘 팩, 삽화, 인쇄 된 레이아웃, 토큰 용 린터/CI, 일반 브랜드 감사.

24) 미니 -FAQ

특별한 조치를 위해 로고를 다시 칠할 수 있습니까?
승인 된 계절 테마에서만 대비/보안 영역을 위반하지 않습니다.

토큰이나 레이아웃은 무엇입니까?

토큰. 레이아웃은 시스템 색상/들여 쓰기/타이포그래피 변수를 사용해야합

논쟁의 여지가있는 경우에 어떻게 행동

ID 저장소에서 RFC를 열고 예제를 첨부하고 브랜드 검토를 수행하십시오.

합계

mble 블 허브 아이덴티티는 "사진 세트" 가 아니라 로고, 팔레트, 타이포그래피, 아이콘 팩, 토큰 및 품질 관리 프로세스와 같은 시스템입니다. 대비, 가용성 및 일관성 규칙을 따르고 토큰 및 템플릿을 사용하십시오. 브랜드는 모든 제품 및 채널에서 인식 가능하고 현대적이며 통합됩니다.