WICKEDWickedHost 공통 토큰
vPanel/Pterodactyl을 기준으로 Blesta까지 동일한 시각 규칙을 적용합니다.
WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
#f6f7f3#171916#ffffff#8ccb24확정된 적용 범위
2026-09-12 사용자 결정에 따라 vPanel(WICKEDVPS), Pterodactyl, store.teamwicked.me(Blesta)는 하나의 vPanel/Pterodactyl 기반 디자인을 사용합니다. Blesta만 중성색 CTA·큰 모서리·다른 UI 서체를 유지하는 별도 테마를 표준으로 삼지 않습니다.
문서의 제품 선택은 적용할 업무·코드 기반을 구분할 뿐 시각 테마를 전환하지 않습니다. TeamWicked 자체 웹사이트는 별도의 브랜드 토큰을 유지합니다.
공통 팔레트
아래는 문서·실행 예제에 적용한 확정 기준입니다. 각 운영 사이트를 이미 배포 완료했다는 뜻이 아닙니다.
| 역할 | 라이트 | 다크 |
|---|---|---|
| 배경 | #f6f7f3 | #121211 |
| 표면 | #ffffff | #1f1f1f |
| 본문 | #171916 | #fcfcfc |
| 보조 본문 | #687066 | #9a9b97 |
| 강조 | #8ccb24 | #a4e238 |
| 강조 hover | #78b719 | #b7f54d |
| 테두리 | #d7dcd2 | #3a3c39 |
| hover 표면 | #f1f3ee | #262726 |
| 위험 | #b73737 | #f08080 |
상태색과 강조 위 글자
2026-09-30부터 vPanel(--wicked-, Tailwind --color-error/--color-warning), Pterodactyl(--arct-, Design Controller 저장값), Blesta(--wh-*)가 아래 상태색을 함께 씁니다. 이전 공통값(위험 #c94848/#e45a5a, 경고 #a87710/#e7b94a, 정보 #526f91/#8ca8c8)은 대비가 부족해 Blesta가 먼저 쓰던 보정값으로 바꿨습니다. 경위와 수치는 GAP-07에 있습니다.
| 역할 | 라이트 | 다크 |
|---|---|---|
| 강조 위 글자 (accent-ink) | #142006 | #11170a |
| 경고 | #805200 | #e5b04c |
| 정보 | #285d91 | #93b8ec |
| 위험·경고·정보 채움 위 글자 | #ffffff | #11170a |
| 강한 테두리 (border-strong) | #c5cbc0 | #3a3c39 |
다크 모드의 채운 위험·경고·정보 표면은 밝은 배경이므로 짙은 글자를 씁니다. 흰 글자를 쓰면 위험 #f08080에서 2.6:1까지 떨어집니다. 링크(#416315 / #b7e56a)와 성공(#356515 / #a4e238)은 아직 Blesta에만 정의된 역할입니다.
기하와 테마
| 요소 | 세 제품 공통 기준 |
|---|---|
| UI 서체 | Pretendard Variable → Pretendard → Inter → sans-serif |
| 버튼 | 높이 40px, radius 4px; Panel 버튼 구조·상태 기준 |
| 일반 입력·표면 | radius 4px; Panel 원본의 한 줄 입력 기본 높이 42px |
| 스위치 | 트랙 48×24px/radius 4px, 손잡이 16×16px/radius 2px |
| 스위치 켜짐 | panel 표면 유지, accent 테두리와 네모 손잡이 |
| 실패·비활성 | 의미 상태는 별도 색·텍스트·접근성 계약 유지 |
Panel의 버튼·스위치 CSS를 data-family=wickedhost 아래 한 번만 연결합니다. vPanel과 Blesta 예제도 같은 DemoButton·DemoSwitch를 사용하므로 제품을 바꿔도 모양은 같습니다. 패널 고유 코드명은 스타일 출처를 뜻하며 세 제품의 프레임워크를 교체하지 않습니다.
의미 이름의 대응
운영 이행 시 기존 소비처를 보존하며 동일 역할의 값만 공통 기준에 연결합니다. 제품 간 변수 이름이 같아야 한다는 요구는 아닙니다.
| 역할 | vPanel | Pterodactyl | Blesta 이행 대상 |
|---|---|---|---|
| 배경 | --wicked-canvas | --arct-canvas | --vx-bg / --wk-site-bg |
| 표면 | --wicked-surface | --arct-panel | --vx-surface / --wk-site-card |
| 본문 | --wicked-text | --arct-text | --vx-text / --wk-site-fg |
| 강조 | --wicked-accent | --arct-accent | --vx-accent / --wk-site-lime |
토큰 사용 규칙
- TOK-01 MUST: WickedHost 세 제품의 같은 시각 역할은 이 문서의 공통 기준을 사용합니다. TeamWicked 자체 토큰을 자동 상속하지 않습니다.
- TOK-02 MUST: 동일한 HEX라고 다른 역할의 토큰을 합치지 않습니다. 브랜드 강조·상태·링크는 별도 역할입니다.
- TOK-03 MUST: 라이트·다크를 쌍으로 검토합니다. 소비하는 표면과 전경색을 함께 기록합니다.
- TOK-04 SHOULD: 원시값 → 의미 토큰 → 컴포넌트 연결을 문서화합니다. 기존 별칭은 소비처 확인 없이 삭제하지 않습니다.
- TOK-05 MUST: 색·길이·전체 shadow를 혼동하지 않습니다. Blesta --vx-focus-ring은 전체 box-shadow 값입니다.
- TOK-06 MUST: 문서 예제의 공통 기준 적용과 운영 제품 배포 완료를 구분해 기록합니다.
- TOK-07 MUST: 상태색을 글자로 쓰면 표면과 8% 틴트 배경 모두에서 4.5:1 이상이어야 합니다. 상태색을 채움으로 쓰면 짝이 되는 채움 위 글자색으로 4.5:1 이상을 맞춥니다. 값을 바꿀 때 두 사용처를 함께 계산합니다.
이전 소스 기준선과 운영 이행
기존 Blesta 로컬 소스는 #ffffff/#0a0a0a 배경, 중성색 CTA, 8px 버튼·10px 입력, Geist/Noto 계열 UI 폰트를 사용했습니다. 기존 vPanel 예제의 기본 버튼 높이는 38px였습니다. 이는 이행 전 기준선이지 현재 공통 표준의 예외가 아닙니다.
운영 테마 해석자는 vPanel html.dark, Panel data-nebula-theme-resolved, Blesta html.bg-dark로 다릅니다. 통일은 디자인 계약의 통일이며 테마 저장 설정·PHP 폼·결제 흐름·권한 코드를 문서 배포로 수정하지 않습니다. Blesta 구현 지도의 운영 이행 검증을 별도로 수행합니다.