TAMAVERSE
KAWAII CYBER-POP
TAMAVERSE
KAWAII
CYBER-POP
Forms
글로우 포커스 입력 필드, 에너지 레인지 슬라이더, 토글 스위치로 구성된 인터랙티브 폼 요소.
Interactive Forms
インタラクティブ・フォーム
Feedback UI
CSS 스피너, 스켈레톤 로더, 툴팁으로 구성된 피드백 UI 요소.
Loaders & Tooltips
フィードバック・ツール
CSS Spinner
Skeleton Loader
Tamaverse Secret Data!
Tooltip
Data Display
스타일링된 테이블과 아코디언 컴포넌트로 데이터를 표현합니다.
Styled Tables
データ・テーブル
| Rank | Player | Level | Score |
|---|---|---|---|
| 1 | Mametchi | Lv.99 | 99,999 |
| 2 | Kuchipatchi | Lv.85 | 85,200 |
| 3 | Memetchi | Lv.72 | 72,100 |
| 4 | Lovelitchi | Lv.68 | 68,400 |
| ✦ Tama Arena Season 4 — Live Leaderboard ✦ | |||
Accordion
アコーディオン
Server Status
All servers operating normally in the Tama Arena. Uptime: 99.97%
Patch Notes v3.0
Includes advanced motion systems, canvas particles, 3D tilting cards, and glass-morphism surfaces.
Known Issues
Particle canvas may cause performance issues on low-end devices. Use prefers-reduced-motion to disable.
Cards
글래스모피즘 Surface 카드와 3D 틸트 카드. backdrop-filter: blur와 네온 보더로 구성됩니다.
Glass-Morphism Surface
グラスモーフィズム・サーフェス
backdrop-filter: blur(16px) + 반투명 배경 + 네온 보더
Surface Card
기본 카드. hover시 보더 색상 변경 + 상승 효과 + 글래스 리플렉션.
ONLINE
Status Card
뱃지와 아이콘을 포함한 상태 카드 패턴.
3D Tilt Cards
3Dティルト・カード
마우스 이동에 따라 perspective(1000px) 기반 3D 회전 적용
Tilt + Float
이 카드는 마우스 방향으로 기울어지고 부유합니다.
Neon Flicker
사이버펑크 사이니지 스타일링에 사용.
Section Layouts
마키 배너, 바이링구얼 섹션 헤더(EN+JP), 배경 교차 패턴으로 페이지를 구성합니다.
Marquee Banner
マーキー・バナー
♦ KAWAII CYBER-POP ♦
♦ KAWAII CYBER-POP ♦
♦ KAWAII CYBER-POP ♦
♦ KAWAII CYBER-POP ♦
skewY(-2deg) + infinite marquee animation + accent background
Background Alternation
背景交替パターン
SURFACE (Glass)
SECONDARY TINT
PRIMARY TINT
DARK BACKGROUND
Shadows & Radius
네온 글로우 쉐도우와 글래스모피즘 엘리베이션이 Kawaii Cyber-Pop의 핵심 시각 요소입니다.
Glow & Elevation Shadows
グロー＆エレベーションシャドウ
shadow-sm
Subtle
Subtle
shadow-md
Default
Default
shadow-lg
Elevated
Elevated
glow-primary
Neon Pink
Neon Pink
glow-secondary
Neon Cyan
Neon Cyan
Border Radius
ボーダー・ラディウス
sm
6px
md
12px
lg
24px
pill
9999px
blob
organic
| Element | Token |
|---|---|
| 버튼 | --rad-pill |
| 카드 / Surface | --rad-lg |
| 뱃지 | --rad-pill |
| 입력 필드 | --rad-md |
| 사이드바 | --rad-lg |
| 장식적 요소 | --rad-blob |
Badges
네온 글로우 뱃지로 카테고리 태그, 상태 표시에 사용합니다. 펄스 애니메이션 변형을 지원합니다.
Neon Glow Badges
ネオングロー・バッジ
Primary
Secondary
Success
Warning
Danger
Info
Accent
LIVE
ALERT
ONLINE
Colors
Kawaii Cyber-Pop의 컬러 팔레트는 네온 글로우 기반입니다. CSS 커스텀 프로퍼티(--tm-pink, --tm-cyan, --tm-yellow)로 정의되며, 두 가지 테마(tama-arena, monster-carnival)를 지원합니다.
Primary Neon Colors
プライマリ・ネオンカラー
핵심 네온 컬러 — Pink / Cyan / Yellow 계열
Pink 100
Pink 300
Pink 500
Pink 700
Pink 900
Cyan 100
Cyan 300
Cyan 500
Cyan 700
Cyan 900
Yellow 100
Yellow 300
Yellow 500
Yellow 700
Yellow 900
Dark & Semantic Colors
ダーク・セマンティックカラー
배경, 상태 표시에 사용하는 다크 및 시맨틱 색상
Dark 100
Dark 500
Dark 800
Dark 900
Success
Warning
Danger
Info
Theme Palettes
テーマ・パレット
tama-arena
| --color-bg | #1a0033 |
| --color-primary | #FF00FF |
| --color-secondary | #00FFFF |
| --color-accent | #FFFF00 |
| --grid-line | #00FFFF |
monster-carnival
| --color-bg | #0a0a0a |
| --color-primary | #8A2BE2 |
| --color-secondary | #39FF14 |
| --color-accent | #FF0055 |
| --grid-line | #39FF14 |
Typography
4가지 서체를 조합하여 사용합니다. Poppins(영문 헤드라인, 700–900), Nunito(영문 본문, 400–700), Yusei Magic(장난스러운/일본어), M PLUS Rounded 1c(일본어 헤드라인). clamp() 기반 유동 타입 스케일을 적용합니다.
Font Families
フォント・ファミリー
Heading — Poppins
TAMAVERSE KAWAII CYBER-POP
--font-family-heading
영문 제목, 섹션 헤더, 네비게이션
Body — Nunito
The quick brown fox jumps over the lazy dog. Nunito is a well-balanced rounded sans-serif designed for excellent readability in body text and UI elements.
--font-family-body
영문 본문, UI 라벨, 설명 텍스트
Playful/JP — Yusei Magic
カワイイ サイバーポップ ♥
--font-family-playful
일본어 섹션 부제목, 장식적 텍스트
JP Headline — M PLUS Rounded 1c
タマバース デザインシステム
'M PLUS Rounded 1c'
일본어 헤드라인, 로고 타입
Bilingual Header Pattern
バイリンガル・ヘッダーパターン
영문 + 일본어 이중 제목 구조 (Kawaii 테마의 핵심 패턴)
MOTION
モーション
BUTTONS
ボタン
Fluid Type Scale
フルイド・タイプスケール
5xlDisplay Hero
4xlSection Title
3xlHeading Large
2xlHeading Medium
xlTitle Small
mdBase Body Text — 기본 본문 텍스트
smSmall Text — 보조 텍스트
xsLABEL / BADGE / META
Spacing
4px 기반 스페이싱 스케일. CSS 커스텀 프로퍼티(--sp-1 ~ --sp-24)로 정의됩니다.
--sp-1 (4px)
--sp-2 (8px)
--sp-3 (12px)
--sp-4 (16px)
--sp-5 (20px)
--sp-6 (24px)
--sp-8 (32px)
--sp-10 (40px)
--sp-12 (48px)
--sp-16 (64px)
--sp-24 (96px)
| Context | Token | Value |
|---|---|---|
| 인라인 요소 간격 | --sp-1 ~ --sp-2 | 4-8px |
| 컴포넌트 내부 패딩 | --sp-4 ~ --sp-6 | 16-24px |
| 카드 간 간격 | --sp-6 | 24px |
| 카드 내부 패딩 | --sp-6 ~ --sp-8 | 24-32px |
| 섹션 간 간격 | --sp-16 ~ --sp-24 | 64-96px |
Design Patterns
Kawaii Cyber-Pop 테마에서 추출한 핵심 디자인 패턴 요약입니다.
Core Principles
コア・プリンシプル
| Principle | Description |
|---|---|
| Neon Glow Foundation | 네온 box-shadow + 사이버 보더로 미래적이고 몰입감 있는 느낌을 부여. |
| Glass-Morphism Surfaces | backdrop-filter: blur(16px) + 반투명 배경으로 깊이감과 계층 생성. |
| Dark-First Theming | 다크 퍼플/블랙 배경 위 네온 컬러. CSS 변수로 테마 전환 지원. |
| Micro-Interactions | 마그네틱 호버, 리플 클릭, 3D 틸트, 파티클 캔버스 등 JS 기반 인터랙션. |
| Bilingual Headers | 영문 대문자 + 일본어 서브타이틀의 이중 구조 (EN + JP). |
| Fluid Typography | clamp() 기반 유동 타입 스케일로 반응형 타이포그래피. |
| Token-Driven System | 모든 시각적 속성을 CSS 커스텀 프로퍼티로 정의하여 일관성 유지. |
| Cyberpunk Motion | neonFlicker, floatY, glitch, scalePulse 등 키프레임 애니메이션 라이브러리. |
Color Usage Rules
カラー使用ルール
| Context | Color Token |
|---|---|
| 메인 배경 | --color-bg (dark purple / black) |
| 카드 / Surface 배경 | --color-surface (반투명 + blur) |
| 주요 강조 / CTA | --color-primary (Pink / Violet) |
| 보조 강조 / 링크 | --color-secondary (Cyan / Green) |
| 포인트 / 경고 | --color-accent (Yellow / Red) |
| 본문 텍스트 | --color-text (White / Light gray) |
| 보더 / 구분선 | --color-border (반투명 네온) |
| 보조 텍스트 | --color-text-muted (60% 투명도) |
Don'ts
禁止事項
| 규칙 | 이유 |
|---|---|
| 밝은 배경(white, light gray) 사용 금지 | 다크 테마 기반 시스템. 네온 글로우 효과가 밝은 배경에서 보이지 않음. |
| 글로우 쉐도우 없이 네온 컬러만 단독 사용 금지 | 글로우 없는 네온색은 플랫해 보임. 항상 box-shadow와 함께 적용. |
| backdrop-filter 없이 반투명 배경 사용 금지 | 블러 없는 반투명 배경은 가독성을 해침. blur(16px) 이상 적용. |
| 두 테마의 토큰을 직접 혼합 사용 금지 | --color-* 변수를 통해 간접 참조할 것. 테마 전환 시 깨짐 방지. |
| 과도한 애니메이션 중첩 금지 | 성능 저하 및 접근성 문제. prefers-reduced-motion 미디어 쿼리 존중. |
Transition & Motion Spec
トランジション仕様
| Interaction | Token | Effect |
|---|---|---|
| 버튼 hover | --trans-bounce | -4px 상승 + glow 확장 + brightness(1.2) |
| 버튼 active | --trans-bounce | +4px 눌림 + glow 축소 |
| 카드 hover | --trans-bounce | -8px 상승 + border-color 전환 + glass 리플렉션 |
| 입력 focus | --trans-normal | border glow + scale(1.02) + background 변경 |
| 사이드바 링크 | --trans-bounce | active bar scaleY + padding 변경 |
| 3D 틸트 | JS direct | perspective + rotateX/Y max 15deg + scale3d(1.05) |
Token Reference
모든 디자인 토큰을 CSS 커스텀 프로퍼티로 참조할 수 있습니다.
Copy & Paste — :root tokens
CSSカスタムプロパティ
/* ── Tamaverse Kawaii Cyber-Pop Design Tokens ── */
/* :root CSS Custom Properties */
:root {
/* Colors: Neon Palette */
--tm-pink-100: #ffd6ff;
--tm-pink-300: #ff80ff;
--tm-pink-500: #FF00FF;
--tm-pink-700: #b300b3;
--tm-pink-900: #4d004d;
--tm-cyan-100: #d6ffff;
--tm-cyan-300: #80ffff;
--tm-cyan-500: #00FFFF;
--tm-cyan-700: #00b3b3;
--tm-cyan-900: #004d4d;
--tm-yellow-100: #ffffd6;
--tm-yellow-300: #ffff80;
--tm-yellow-500: #FFFF00;
--tm-yellow-700: #b3b300;
--tm-yellow-900: #4d4d00;
--tm-dark-100: #8A2BE2;
--tm-dark-500: #3a0066;
--tm-dark-800: #1a0033;
--tm-dark-900: #0d001a;
/* Semantic Colors */
--tm-success: #39FF14;
--tm-warning: #FF8C00;
--tm-danger: #FF0055;
--tm-info: #00BFFF;
/* Spacing (4px baseline) */
--sp-1: 0.25rem; --sp-2: 0.5rem;
--sp-3: 0.75rem; --sp-4: 1rem;
--sp-6: 1.5rem; --sp-8: 2rem;
--sp-10: 2.5rem; --sp-12: 3rem;
--sp-16: 4rem; --sp-24: 6rem;
/* Typography */
--font-family-heading: 'Poppins', 'M PLUS Rounded 1c', sans-serif;
--font-family-body: 'Nunito', sans-serif;
--font-family-playful: 'Yusei Magic', cursive;
/* Fluid Type Scale (clamp) */
--text-xs: clamp(0.7rem, 2vw, 0.75rem);
--text-sm: clamp(0.8rem, 2.5vw, 0.875rem);
--text-md: clamp(0.9rem, 3vw, 1rem);
--text-5xl: clamp(2rem, 10vw, 3rem);
/* Border Radius */
--rad-sm: 6px;
--rad-md: 12px;
--rad-lg: 24px;
--rad-pill: 9999px;
--rad-blob: 40% 60% 70% 30% / 40% 50% 60% 50%;
/* Shadows */
--shadow-glow-primary: 0 0 15px var(--tm-pink-500);
--shadow-glow-secondary: 0 0 15px var(--tm-cyan-500);
/* Motion Easings */
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Transitions */
--trans-fast: 100ms var(--ease-out);
--trans-normal: 300ms var(--ease-spring);
--trans-bounce: 500ms var(--ease-bounce);
}
/* ── Theme: tama-arena ── */
[data-theme="tama-arena"] {
--color-bg: #1a0033;
--color-primary: #FF00FF;
--color-secondary: #00FFFF;
--color-accent: #FFFF00;
}
/* ── Theme: monster-carnival ── */
[data-theme="monster-carnival"] {
--color-bg: #0a0a0a;
--color-primary: #8A2BE2;
--color-secondary: #39FF14;
--color-accent: #FF0055;
}