/* * Wiggle Wiggle 디자인 토큰 * * 출처: 2026_wigglewiggle_Manual_Guide_해외(out).pdf (2026.03 Updated) * 상세: docs/design/wigglewiggle-tokens.md * * 용도: Wiggle Wiggle IP 협업 자료 제작·검수 시 참조 토큰. * 본 시스템의 라이트모드 semantic token과 별도로, * Wiggle Wiggle 워크스페이스 컨텍스트에서만 활성화되는 브랜드 테마. * * 활성화: 또는 .brand-wigglewiggle 스코프 안에서. * * ⚠️ 컬러 HEX는 PDF 컬러 칩에서 시각 추정한 값입니다. * 협업 자료 발주 전 일러스트레이터에서 정확값(CMYK/HEX) 확보 필수. */ /* 시그니처 디스플레이 폰트 — Black Han Sans (KR), Familjen Grotesk (EN italic display) */ @import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Noto+Sans+KR:wght@400;700;900&display=swap"); [data-brand="wigglewiggle"], .brand-wigglewiggle { /* ── 컬러: 배경 팔레트 (Clean & Bold) ── */ --wgwg-yellow: #ffd400; /* 시그니처 메인 배경 */ --wgwg-red: #e62121; --wgwg-pink: #ff6faa; --wgwg-magenta: #e91a87; --wgwg-light-pink: #ffc1d8; --wgwg-blue: #1e5dc8; --wgwg-sky: #00aeef; --wgwg-mint: #3fbfa0; --wgwg-green: #33b543; --wgwg-dark-green: #1f7a2c; --wgwg-purple: #7a4fcf; --wgwg-violet: #5536a8; --wgwg-lilac: #c9b6e8; --wgwg-orange: #f26b33; --wgwg-light-orange: #ff8c5a; /* ── 컬러: 텍스트 / 라벨 ── */ --wgwg-black: #111111; /* 본문·outline 전반 */ --wgwg-white: #ffffff; --wgwg-label-bg: var(--wgwg-black); --wgwg-label-text: var(--wgwg-white); --wgwg-cta-bg: var(--wgwg-red); --wgwg-cta-text: var(--wgwg-white); /* ── 타이포그래피 ── */ --wgwg-font-ko: "Noto Sans KR", system-ui, -apple-system, sans-serif; --wgwg-font-ko-display: "Black Han Sans", "Noto Sans KR", system-ui, sans-serif; /* 굵은 한국어 디스플레이 */ --wgwg-font-en-display: "Helvetica Neue", "Arial", sans-serif; /* italic bold display */ --wgwg-weight-black: 900; --wgwg-weight-bold: 700; /* ── 컴포넌트 패턴 ── */ --wgwg-radius-label: 999px; /* 라벨 박스 (둥근 알약) */ --wgwg-radius-card: 16px; --wgwg-radius-folder: 12px; --wgwg-outline-width: 3px; /* 폴더·아이콘 outline */ --wgwg-outline-color: var(--wgwg-black); /* ── 로고 그리드 ── */ --wgwg-logo-unit: 6; /* 1 UNIT = 로고 세로 / 6 (배수 단위로 사용) */ --wgwg-logo-gap-default: 2; /* 기본 2 UNITS */ --wgwg-logo-gap-tight: 1; /* 조정 시 최소 1 UNIT */ /* ── 증지 ── */ --wgwg-stamp-guide-size: 9px; /* 가이드 표기 9×9mm */ --wgwg-stamp-actual-size: 13px; /* 실제 증지 13×13mm */ /* ── on-color text pairs (WCAG AA contrast 자동 안전) ── */ --wgwg-on-yellow: var(--wgwg-black); --wgwg-on-pink: var(--wgwg-black); --wgwg-on-mint: var(--wgwg-black); --wgwg-on-sky: var(--wgwg-black); --wgwg-on-orange: var(--wgwg-black); --wgwg-on-light-pink: var(--wgwg-black); --wgwg-on-light-orange: var(--wgwg-black); --wgwg-on-lilac: var(--wgwg-black); --wgwg-on-red: var(--wgwg-white); --wgwg-on-magenta: var(--wgwg-white); --wgwg-on-blue: var(--wgwg-white); --wgwg-on-purple: var(--wgwg-white); --wgwg-on-violet: var(--wgwg-white); --wgwg-on-green: var(--wgwg-white); --wgwg-on-dark-green: var(--wgwg-white); /* ── retro·pop 시그니처 효과 ── */ --wgwg-shadow-retro: 4px 4px 0 var(--wgwg-black); --wgwg-shadow-retro-sm: 2px 2px 0 var(--wgwg-black); --wgwg-radius-button: 9999px; /* 알약 버튼 — PDF number/label 시그니처 */ --wgwg-label-padding: 0.25rem 0.75rem; --wgwg-shadow-focus: 0 0 0 3px rgba(233, 26, 135, 0.4); /* magenta alpha */ /* ── display heading font (PDF 표지·섹션 italic bold) ── */ --wgwg-font-display: "Familjen Grotesk", "Cooper Black", "Black Han Sans", system-ui, sans-serif; --wgwg-display-style: italic; /* ── BrandKit 한정 그라데이션 (collaba 라이트모드 룰의 명시적 예외) ── */ --wgwg-gradient-pop: linear-gradient(135deg, var(--wgwg-yellow) 0%, var(--wgwg-pink) 100%); --wgwg-gradient-sky: linear-gradient(135deg, var(--wgwg-sky) 0%, var(--wgwg-blue) 100%); /* ──────────────────────────────────────────────────────────────── * Phase 1: base 토큰 override * BrandKit 활성 시 button·focus·primary가 자동으로 위글위글 정체성 * functional palette(success/warning/destructive)는 base 그대로 유지 * ──────────────────────────────────────────────────────────────── */ --primary: var(--wgwg-black); --primary-hover: var(--wgwg-magenta); --cta: var(--wgwg-red); --cta-hover: #c41818; --brand-accent: var(--wgwg-magenta); --shadow-focus-ring: var(--wgwg-shadow-focus); --shadow-cta-ring: 0 0 0 3px rgba(230, 33, 33, 0.25); --shadow-btn: 0 1px 2px rgba(230, 33, 33, 0.3); --shadow-btn-hover: 0 4px 12px rgba(230, 33, 33, 0.35); /* Phase 2: surface · text 톤 — 한눈에 위글위글 식별 가능하도록 */ --surface-1: #fff4b8; /* body 배경: 위글위글 옅은 yellow */ --surface-2: #ffe97a; /* hover/secondary surface */ --surface-hover: #ffe97a; --text-primary: var(--wgwg-black); --destructive: var(--wgwg-red); /* Phase 2: nav-rail에 시그니처 노란색 — 즉시 인지 가능한 BrandKit signature */ --nav-rail-bg: var(--wgwg-yellow); --nav-rail-text: var(--wgwg-black); /* Phase 4: divider도 위글위글 검정 outline으로 통일 (회색 separator 제거) */ --border-subtle: var(--wgwg-black); } /* Phase 2: 본문 폰트 swap (body 자체에 data-brand가 붙으므로 element selector) */ body[data-brand="wigglewiggle"], body.brand-wigglewiggle { font-family: var(--wgwg-font-ko); } /* ──────────────────────────────────────────────────────────────── * Phase 3: 위글위글 시그니처 디자인 — 아메리칸 빈티지·레트로·Pop * Bold outline + Retro shadow + Pill button + Italic display heading * ──────────────────────────────────────────────────────────────── */ /* 헤딩 통일성: 본문(Noto Sans KR)의 굵은 weight로 통일 — 가독성 우선 */ [data-brand="wigglewiggle"] h1, [data-brand="wigglewiggle"] h2, [data-brand="wigglewiggle"] h3, [data-brand="wigglewiggle"] .section-title, [data-brand="wigglewiggle"] .section-title-lg, [data-brand="wigglewiggle"] .label-text { font-family: var(--wgwg-font-ko); font-weight: 900; letter-spacing: -0.01em; } /* page-title (대형 hero)에만 디스플레이 폰트 — 위글위글 시그니처 임팩트 */ [data-brand="wigglewiggle"] .page-title { font-family: var(--wgwg-font-ko-display); font-weight: 400; /* Black Han Sans 단일 weight */ font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.01em; } /* 카드: 검정 3px outline + retro 4px 그림자 */ [data-brand="wigglewiggle"] .card, [data-brand="wigglewiggle"] .header-card { border: 3px solid var(--wgwg-black); box-shadow: var(--wgwg-shadow-retro); border-radius: var(--wgwg-radius-card); } /* 버튼: 알약 모양 + 검정 outline + 작은 retro 그림자 + 굵은 글씨 */ [data-brand="wigglewiggle"] .btn { border-radius: var(--wgwg-radius-button); border: 2px solid var(--wgwg-black); box-shadow: var(--wgwg-shadow-retro-sm); font-weight: var(--wgwg-weight-bold); transition: transform 80ms ease, box-shadow 80ms ease; } [data-brand="wigglewiggle"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--wgwg-black); } [data-brand="wigglewiggle"] .btn:active { transform: translate(2px, 2px); box-shadow: none; } [data-brand="wigglewiggle"] .btn-primary { background-color: var(--wgwg-black); color: var(--wgwg-white); } [data-brand="wigglewiggle"] .btn-secondary { background-color: var(--wgwg-yellow); color: var(--wgwg-black); } [data-brand="wigglewiggle"] .btn-destructive { background-color: var(--wgwg-red); color: var(--wgwg-white); } [data-brand="wigglewiggle"] .btn-ghost { background-color: var(--wgwg-white); color: var(--wgwg-black); } /* 배지: 알약 + outline */ [data-brand="wigglewiggle"] .badge { border-radius: var(--wgwg-radius-button); border: 2px solid var(--wgwg-black); font-weight: var(--wgwg-weight-bold); padding: var(--wgwg-label-padding); } /* nav-rail: 우측 검정 3px 경계 */ [data-brand="wigglewiggle"] .nav-rail { border-right: 3px solid var(--wgwg-black); } [data-brand="wigglewiggle"] .nav-rail-item-active { background-color: var(--wgwg-black); color: var(--wgwg-white); border-radius: var(--wgwg-radius-button); font-weight: var(--wgwg-weight-bold); } /* 입력 필드: outline 강조 */ [data-brand="wigglewiggle"] .input, [data-brand="wigglewiggle"] .select, [data-brand="wigglewiggle"] .textarea { border: 2px solid var(--wgwg-black); border-radius: var(--wgwg-radius-folder); background-color: var(--wgwg-white); } /* 탭 활성 — bold underline */ [data-brand="wigglewiggle"] .tab-item-active { border-bottom: 3px solid var(--wgwg-magenta); font-weight: var(--wgwg-weight-bold); } /* nav-rail powered-by 라벨 — yellow 배경 위 가독성 회복 */ [data-brand="wigglewiggle"] .nav-rail-powered-label { color: var(--wgwg-black); opacity: 0.6; } /* 테이블 헤더 — 회색 → 위글위글 검정 굵은 글씨 */ [data-brand="wigglewiggle"] .table-header th { color: var(--wgwg-black); font-weight: var(--wgwg-weight-bold); } /* ──────────────────────────────────────────────────────────────── * Colorful: PDF 가이드의 멀티컬러 정체성 * stat-card·badge·dashboard-list-item에 5색 회전 * ──────────────────────────────────────────────────────────────── */ /* header-card: 시그니처 yellow hero */ [data-brand="wigglewiggle"] .header-card { background-color: var(--wgwg-yellow); } /* stat-card 색상 회전 (yellow → pink → sky → mint → magenta) */ [data-brand="wigglewiggle"] .stat-grid .stat-card:nth-child(5n+1) { background-color: var(--wgwg-yellow); color: var(--wgwg-on-yellow); } [data-brand="wigglewiggle"] .stat-grid .stat-card:nth-child(5n+2) { background-color: var(--wgwg-light-pink); color: var(--wgwg-on-light-pink); } [data-brand="wigglewiggle"] .stat-grid .stat-card:nth-child(5n+3) { background-color: var(--wgwg-sky); color: var(--wgwg-on-sky); } [data-brand="wigglewiggle"] .stat-grid .stat-card:nth-child(5n+4) { background-color: var(--wgwg-mint); color: var(--wgwg-on-mint); } [data-brand="wigglewiggle"] .stat-grid .stat-card:nth-child(5n+5) { background-color: var(--wgwg-magenta); color: var(--wgwg-on-magenta); } /* badge 색상 회전 — variant별 위글위글 컬러 */ [data-brand="wigglewiggle"] .badge-success { background-color: var(--wgwg-mint); color: var(--wgwg-on-mint); border-color: var(--wgwg-black); } [data-brand="wigglewiggle"] .badge-warning { background-color: var(--wgwg-orange); color: var(--wgwg-on-orange); border-color: var(--wgwg-black); } [data-brand="wigglewiggle"] .badge-danger, [data-brand="wigglewiggle"] .badge-destructive { background-color: var(--wgwg-red); color: var(--wgwg-on-red); border-color: var(--wgwg-black); } [data-brand="wigglewiggle"] .badge-info { background-color: var(--wgwg-sky); color: var(--wgwg-on-sky); border-color: var(--wgwg-black); } [data-brand="wigglewiggle"] .badge-soft, [data-brand="wigglewiggle"] .badge:not([class*=" badge-"]) { background-color: var(--wgwg-yellow); color: var(--wgwg-on-yellow); border-color: var(--wgwg-black); } /* dashboard-list-item — 호버 시 노란 강조 */ [data-brand="wigglewiggle"] .dashboard-list-item:hover { background-color: var(--wgwg-yellow); } /* 일반 .card 중 stat·dashboard·header가 아닌 것들에 옅은 색 회전 (nth-of-type 회전) */ [data-brand="wigglewiggle"] main .card:nth-of-type(3n+1):not(.stat-card):not(.header-card) { background-color: #fff; } [data-brand="wigglewiggle"] main .card:nth-of-type(3n+2):not(.stat-card):not(.header-card) { background-color: #fff8d6; /* yellow tint */ } [data-brand="wigglewiggle"] main .card:nth-of-type(3n+3):not(.stat-card):not(.header-card) { background-color: #ffe7f0; /* pink tint */ } /* 워크플로우 가이드 / hero 영역에 magenta 강조 */ [data-brand="wigglewiggle"] .workflow-guide, [data-brand="wigglewiggle"] .workflow-step-active { background-color: var(--wgwg-magenta); color: var(--wgwg-on-magenta); } /* * 사용 예 * * .brand-wigglewiggle .hero { * background: var(--wgwg-yellow); * color: var(--wgwg-black); * font-family: var(--wgwg-font-ko); * font-weight: var(--wgwg-weight-black); * } * * .brand-wigglewiggle .label { * background: var(--wgwg-label-bg); * color: var(--wgwg-label-text); * border-radius: var(--wgwg-radius-label); * } * * .brand-wigglewiggle .cta { * background: var(--wgwg-cta-bg); * color: var(--wgwg-cta-text); * border-radius: var(--wgwg-radius-label); * font-weight: var(--wgwg-weight-bold); * } */