---
{"id":"tokens-teamwicked","title":"TeamWicked 토큰","category":"기초","order":10,"summary":"TeamWicked 자체 웹사이트의 브랜드·색상·글꼴·CTA를 정의합니다. WickedHost 제품 토큰과 분리합니다.","status":"소스 기록 · 범위 한정","references":[]}
---

# TeamWicked 토큰

## 적용 범위

TeamWicked 자체 브랜드와 teamwicked.me 웹사이트에 적용합니다. vPanel(WICKEDVPS), Pterodactyl, store.teamwicked.me(Blesta)는 WickedHost 디자인 시스템에 속하며 이 문서의 외형을 자동 상속하지 않습니다.

## 현재 브랜드 기준

2026-09-12 확인한 메인 웹사이트의 소스·공개 화면 기준입니다. 문서 뷰어는 같은 자산을 사용하지만 기술문서 가독성을 위해 배경 dither 애니메이션은 생략합니다.

| 역할 | TeamWicked 기준 |
| --- | --- |
| 배경 | 라이트 #f4f5ef / 다크 #0a0a0a |
| 보조 표면 | 문서 라이트 #eceee6 / 다크 #171717 |
| 강조 | #a8d946 |
| 서체 | Geist + Pretendard |
| 브랜드 자산 | 기존 WICKED.svg; IBM 또는 다른 제품 로고로 대체하지 않음 |
| 주요 CTA | 검정/흰색 본체 + 라임 화살표 꼬리; 메인 WickedCta 구조 |

문서의 보조 표면은 열람 UI 값이며 모든 메인 컴포넌트의 토큰을 전수 추출했다는 의미가 아닙니다. 실제 원본 연결 범위는 버튼 페이지의 구현 코드와 출처를 확인합니다.

## 컴포넌트 사용

- [버튼](button.md): TeamWicked CTA의 실제 형태와 상태를 확인합니다.
- [색상](color.md), [타이포그래피](typography.md), [레이아웃](layout.md): 공통 행동·가독성 규칙을 자체 브랜드 값으로 적용합니다.
- [접근성](accessibility.md): 키보드·레이블·오류 안내 규칙은 WickedHost와 재사용할 수 있지만 외형까지 동일하다는 의미는 아닙니다.

## 소유권과 변경

TeamWicked 브랜드 변경은 TeamWicked 문서·예제에 한정합니다. WickedHost의 제품 토큰이나 결제·서버 관리 UI를 같은 변경으로 덮어쓰지 않습니다. 공통 규칙 수정은 두 체계의 영향을 각각 검토합니다.

## 실제 구현 근거

메인 저장소 src/app/globals.css, src/app/layout.tsx, src/components/test/wicked-cta.tsx, src/components/site-header.tsx를 기준으로 확인했습니다. 실행형 예제는 API 미연결이며 모든 운영 사용처의 합격을 뜻하지 않습니다.