네온/악센트 스타일 mble 블 허브

1) 개념과 원칙

Neon/Accent는 주 표면이 신중하게 유지되는 시각적 언어이며 (어두운 우선) 사용자의주의는 악센트 윤곽, 글로우, 상태 조명 및 마이크로 신호와 같은 짧은 네온 플래시로 이루어집니다. 목적: 과부하없이 빠른 동작 감지 (CTA, 초점, 알림) 및 높은 가독성.

1. 악센트-복용. 90/10: 화면 영역의 최대 10% 가 "조명" 을 가질 수 있습니다.

2. 시맨틱은 브랜드보다 중요합니다. 네온은 "밝기" 뿐만 아니라 의미를 강조하는 방법입니다.

3. 대비는 기본입니다. 발광 객체는 텍스트의 가독성을 감소시키지 않습니다 (AA 최소).

4. 리듬 및 일시 정지. 애니메이션은 짧고 예측 가능하며 일시 정지와 명확한 물리학이 있습니다.

5. 성능 및 가용성. 약한 장치에는 흐림/그림자가 없습니다. 모든 효과는 HC 모드에서 테스트됩니다.

2) 색상과 빛: 팔레트와 역할

2. 1 어두운 우선

'bg/base' -가벼운 노이즈/그레인이있는 깊은 흑연 (그라디언트의 "줄무늬" 감소).
'bg/highed' -카드와 모델에 약간 더 가볍습니다.
'fg/primary' - 거의 흰색이지만 깨끗하지 않습니다 (# FFF → L λ0. 눈부심을 줄이기 위해 OKLCH에서 90).

2. 2 악센트 네온 (OKLCH, 랜드 마크)

사이버 블루: 'oklch (0. 74 0. 16,250) '가 주요 브랜드 악센트입니다.
전기 자주색: 'oklch (0. 70 0. 17 310) '- 시퀀스 또는 게임 이벤트의 경우 2 차.
독성 라임: 'oklch (0. 82 0. 14,140) '는 드문 하이라이트입니다 (잭팟, 승리).
산호 경보: 'oklch (0. 72 0. 14 30) '- 경고/오류 (제한 된 "네온").

2. 3 대조 쌍

텍스트/아이콘을 배경으로 표시합니다. 5:1 (정상), 3:1 (큰/지방).
네온 채우기 텍스트: 이하 4입니다. 5:1. 높은 'C' 에서 낮은 'C _ 텍스트' 는 0입니다. 01–0. 03.

개요/표시기 아이콘: 환경 3:1

3) 가독성에 해를 끼치 지 않는 글로우 효과

3. 빛의 1 가지 형태

외부 글로우: 1-2 블러 링, 스케일에 따라 반경 8-24 px.
네온 뇌졸중: 얇은 선 1-2 px 높은 밝기 + 부드러운 외부 그림자.
삽입 글로우: 초점을 맞춘 인푸트를위한 내부 "조명".

3. 제한자 2 개

강렬한 빛의 위에 작은 텍스트를 놓지 마십시오.
글로우는 상태를 대체하지 않습니다. 모양/아이콘/밑줄을 보완합니다.
넓은 영역 (배너/헤더) 에서 글로우 불투명도를 20-35% 로 줄입니다.

3. 3 테마에 적응

빛 테마에서 네온은 반경이 약하고 짧습니다. 그렇지 않으면 "산" 효과가 있습니다.
대비가 높으면 표시등이 꺼지고 명확한 개요/프레임이 남아 있습니다.

4) 타이포그래피 및 계층 구조

기본 내용 크기: 16-18 px; 클리어 스케일 헤더 (예: 12 포인트 스케일).
스타일: 초경량 피하기; 일반/중간 최소.
선 간격 1. 45–1. 6.
텍스트의 강조점은 색상이 아니라 스케일/무게/아이콘에 있습니다. 색상-추가로만.

5) 격자, 리듬, 배경

열: 12 (데스크톱), 6 (태블릿), 4 (모바일).
수평 모듈 8 px; 섹션에 따라 세로 - 8/12/16 px.
배경 구배: 주요 CTA 영역에서 방사형 약한 "할로".
촉각 잡음 (입자) L = λ0. 02 - "플라스틱" 이없는 깊이를 위해.

6) 구성 요소 (패턴)

6. 1 단추

기본: 'brandNeon' + '을 기본으로 작성하십시오. 5:1, 호버링시 반경 12-16 px.
이차: 네온 윤곽 (1-2 px) 과 호버링시 부드러운 외부 광선으로 투명합니다.
3 차: 텍스트, 빛이 없음, 밑줄/아이콘 만.

• 호버: -λL 배경 (0. 02–0. 04) + 빛의 빛.
• 활성: 어두운 채우기, 제거 또는 감소 된 글로우.
• 초점: 색상뿐만 아니라 대비 링 2-3 px (흐림 없음).

6. 입력 필드 2 개

기본값: 중성 1px 얇은 프레임.
초점: 네온 스트로크 + 필드 내부의 약한 삽입 글로우; 대비 자리 표시자 감소 (3:1 이상).

오류/성공: 시맨틱 컬러 개요 + 아이콘; 최소한의 빛을 발합니다

6. 탭 3 개/탐색

활성 탭 표시기-네온 라인 2 px + 소프트 블러 8 px.
호버 - 커서 아래의 조명 (그림자 확산 4-6 px).

6. 4 개의 카드/배너

토너먼트 카드: 전체 프레임이 빛나지 않도록 모서리의 프레임 네온 (짧은 "모서리").
배너-네온 배경이 내용을 "먹지" 않도록 텍스트 아래에 어두운 마스크 (40-60% 오버레이).

7) 마이크로 상호 작용 및 애니메이션

지진: 120-200 ms (호버), 180-240 ms (포커스/액티브), 240-320 ms (독/모달).
곡선: '입방체 (0. 2, 0. 0, 0. 2, 1) '는 "물질" 감각을위한 것입니다.
네온 펄스: 호버 당 하나의 사이클, 끝없는 깜박임 없음.
시스템 이벤트 (승리/달성): 약화와 함께 300-500ms의 짧은 버스트.

8) 가용성 및 고 대비 모드

모든 의미는 모양, 아이콘, 텍스트 레이블, 밑줄과 같은 색상과 빛없이 사용할 수 있습니다.
'선호 대비', '강제 색상' 에 대한 지원; 켜면-글로우를 끄고 프레임을 강화하고 채우고 대비를 확인하십시오.
색맹의 경우: 붉은 녹색 쌍을 유일한 신호로 피하십시오. 그림과 텍스트를 사용하십시오.

9) 성능

큰 흐림과 필터로 상자 그림자를 최소화하십시오: 여러 요소에서 흐림 ().
의사 요소 그림자 및 레이어 작곡기 (변환/불투명도) 를 선호합니다.
모바일에서 - 애니메이션의 "가벼운" 사전 설정; 낮은 FPS에서 강렬한 빛을 비활성화합니다.
네온 그라디언트-큰 크기의 래스터 자산 (WebP/AVIF) 으로 렌더링합니다.

10) 색상 및 스타일 토큰 (예)

json
{
"color": {
"dark": {
"bg": { "base": "oklch(0. 16 0. 01 260)", "elevated": "oklch(0. 22 0. 01 260)" },
"fg": { "primary": "oklch(0. 90 0. 02 260)", "secondary": "oklch(0. 78 0. 02 260)" },
"neon": {
"brand":  { "500": "oklch(0. 74 0. 16 250)" },
"purple": { "500": "oklch(0. 70 0. 17 310)" },
"lime":  { "500": "oklch(0. 82 0. 14 140)" },
"coral":  { "500": "oklch(0. 72 0. 14 30)" }
}
}
},
"elevation": {
"glow": {
"sm": { "blur": 8, "spread": 2, "alpha": 0. 35 },
"md": { "blur": 12, "spread": 4, "alpha": 0. 30 },
"lg": { "blur": 20, "spread": 6, "alpha": 0. 25 }
}
}
}

CSS 사전 설정 (조각)

css
:root[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--fg-primary: oklch(0. 90 0. 02 260);
--neon-brand: oklch(0. 74 0. 16 250);
--glow-md: 0 0 12px rgba(0, 180, 255, 0. 30), 0 0 4px rgba(0, 180, 255, 0. 45);
}

.button--primary {
color: var(--on-primary);
background: var(--neon-brand);
box-shadow: none;
}
.button--primary:hover {
box-shadow: var(--glow-md);
transform: translateZ (0) ;/compositing/
}
:root[data-high-contrast].button--primary:hover {
box-shadow: none; outline: 2px solid var(--fg-primary);
}

11) 데이터 시각화

직렬 그래프: 메인 행은 중립이며 강조 표시된 행은 두께가 증가하고 모양 마커가있는 네온입니다.
포인트/열: 배경으로 3:1 이상; 서명 - 이하 4입니다. 5:1.
선택한 시리즈의 조명은 일정한 깜박임없이 부드러운 외부 글로우 (sm) 입니다.

12) 콘텐츠 블록 및 프로모션

프로모션 배경 네온에 대한 텍스트-항상 대조적으로 판/오버레이 (40-60%) 에 있습니다.
"글리치 "/스캔 라인-드문 악센트로만 페이지 당 2-3 섹션을 넘지 않습니다.

13) 아이콘과 삽화

아이콘-활성 상태에 대한 네온 스트로크가있는 선형/듀오톤.
삽화 - 최소한의 채움으로 "윤곽을 따라 네온"; 텍스트 주위에 작은 빛을 피하십시오.

14) 마케팅 대 제품

마케팅 배너는 더 높은 'C' 크롬 및 복잡한 글로우를 사용할 수 있습니다.
제품 (형태, 테이블, 균형) 에서 'C' 감소, 짧은 글로우 효과 및 엄격한 대비.

15) iGaming에 대한 텍스트 규칙

중요한 알림 (18 +, 한계, KYC/AML, 위험) -대조적으로 AAA, 빛이 없습니다.
계수 표/리더 보드에서 색상뿐만 아니라 화살표/아이콘 및 지방 함량으로 성장/하강을 나타냅니다.

16) 현지화 및 적응

키릴 자모/라틴어: 동일한 핀 및 문자 간격 메트릭.
2 줄 CTA-텍스트의 글로우를 비활성화하고 스트로크/배경에 두십시오.
RTL-방향 효과 만 반영합니다 (모서리/하이라이트).

17) 검토 점검표 (디자인/개발)

대조

• 텍스트 5:1; 큰 이하 3:1; 시스템 알림-AAA.

글로우

• 글로우는 텍스트와 겹치지 않습니다. 사전 설정 내의 반경 및 알파.

상태

• 호버/액티브/포커스는 색상/빛뿐만 아니라 모양으로 구별 할 수 있습니다.

성능

• 여러 번의 흐림없이; 모바일 용 "가벼운" 사전 설정이 있습니다.

가용성

• 대비 모드가 정확합니다 (글로우 오프, 프레임 켜짐).

시맨틱

• 네온은 "아름다움" 이 아니라 의미 (행동/초점/상태) 를 반영합니다.

18) 반 패턴

넓은 영역의 단단한 네온 채우기 → 눈 피로.
일정한 플리커/리플 → 자극 및 접근성 문제.
밑면이없는 밝은 빛에 대한 텍스트.
유일한 신호는 색상/글로우 (모양/아이콘/밑줄 없음) 입니다.
한 화면에서 일관되지 않은 글로우 강도 (시각적 "죽").

19) A/B 및 메트릭

CTR CTA 버튼 및 입력 오류에 대한 글로우 강도 (알파/반경) 를 테스트하십시오.

네온 초점을 입력 한 후 동작 시간 추적 및 오류 발생

UX는 시각적 안락함 (특히 긴 세션) 에 대한 설문 조사를 실시합니다.

20) 설계 시스템의 문서

"Neon/Accent" 페이지: 팔레트 (제품/마케팅), 글로우 토큰, 구성 요소 예, 마이크로 상호 작용의 비디오 데모.
"대조 행렬": 'fg × bg' 및 'on-' 에 대한 실제 계수.
프론트렌드에 대한 사전 설정된 클래스 및 스 니펫 세트.

간략한 요약

Gamble Hub의 Neon/Accent-포인트, 시맨틱, 생산적. 빛은 시선을 대비와 위안을 방해하지 않으면 서 행동하도록 지시합니 엔진 - 토큰 (OKLCH), "가벼운" 글로우 사전 설정, 엄격한 상태, 높은 대비 효과 비활성화. 이것은 브랜드의 밝은 특성을 제공하지만 편리하고 빠른 제품으로 남아 있습니다.