/* ============================================================ * Wanted Sans Design System — Colors + Type tokens * Source: Wanted Sans Design System (Community Figma) * https://wantedlab.github.io/wanted-sans (open source typeface) * ============================================================ */ /* ----- Webfont: Pretendard (Variable + Static) ----- 가독성/한국어 본문에 검증된 사실상 표준 폰트. Wanted Sans 보다 평범한 형태로 한글 본문 가독성 우수. Variable axis (weight 45-920) + static fallback 둘 다 로드. ※ 이전 Wanted Sans Variable 은 형태 특이로 가독성 이슈 — 제거. */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css"); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css"); :root { /* ============================================================ * COLOR — ATOMIC (raw scales) * Lifted from Wanted's Color/Atomic page. These are the FOUNDATION * tokens; never use them directly in product UI — use SEMANTIC. * ============================================================ */ /* Blue (Primary brand) */ --blue-50: #f0f6ff; --blue-100: #d6e6ff; --blue-200: #a3c8ff; --blue-300: #6fa9ff; --blue-400: #3b89ff; --blue-500: #0066ff; /* primary */ --blue-600: #0052cc; --blue-700: #003e99; --blue-800: #002966; --blue-900: #001533; /* Cool Neutral (the workhorse gray — Wanted's signature greenish-cool gray) */ --cool-neutral-99: #fafafa; --cool-neutral-98: #f7f7f8; --cool-neutral-96: #f1f1f5; --cool-neutral-94: #ebebef; --cool-neutral-90: #dcdce0; --cool-neutral-80: #babcc0; --cool-neutral-70: #989a9f; --cool-neutral-60: #76787d; --cool-neutral-50: #5b5d62; --cool-neutral-40: #46474c; --cool-neutral-30: #2f3033; --cool-neutral-20: #1f2024; --cool-neutral-10: #131418; --cool-neutral-05: #0a0b0e; /* Status hues */ --green-500: #00bf40; --green-600: #009a36; --green-50: #e6f9ec; --yellow-500: #ffc342; --yellow-600: #f59e0b; --yellow-50: #fff8e6; --red-500: #ff4242; --red-600: #e51c1c; --red-50: #ffeded; --violet-500: #6b4dff; --violet-50: #efebff; /* Static (for surfaces that should never shift in dark mode) */ --static-white: #ffffff; --static-black: #000000; /* Alpha tokens (Wanted uses these heavily for hover/press states) */ --alpha-neutral-08: rgba(112, 115, 124, 0.08); --alpha-neutral-16: rgba(112, 115, 124, 0.16); --alpha-neutral-22: rgba(112, 115, 124, 0.22); --alpha-neutral-61: rgba(112, 115, 124, 0.61); --alpha-primary-08: rgba(0, 102, 255, 0.08); --alpha-primary-16: rgba(0, 102, 255, 0.16); --alpha-white-90: rgba(255, 255, 255, 0.90); --alpha-white-72: rgba(255, 255, 255, 0.72); --alpha-white-40: rgba(255, 255, 255, 0.40); --alpha-black-72: rgba(0, 0, 0, 0.72); --alpha-black-40: rgba(0, 0, 0, 0.40); /* ============================================================ * COLOR — SEMANTIC (use these in product UI) * Mapped from Wanted's Color/Semantic page. * ============================================================ */ /* Surface / background */ --surface-background: #ffffff; --surface-background-alt: var(--cool-neutral-98); --surface-elevated: #ffffff; --surface-overlay: rgba(0, 0, 0, 0.56); --surface-inverse: var(--cool-neutral-10); /* Foreground / text */ --fg-primary: var(--cool-neutral-10); /* default body */ --fg-secondary: var(--cool-neutral-40); /* labels, captions */ --fg-tertiary: var(--cool-neutral-60); /* placeholder, helper */ --fg-disabled: var(--cool-neutral-80); --fg-on-primary: #ffffff; --fg-link: var(--blue-500); /* Brand */ --brand-primary: var(--blue-500); --brand-primary-hover: var(--blue-600); --brand-primary-press: var(--blue-700); --brand-primary-soft: var(--blue-50); /* Status */ --status-success: var(--green-500); --status-success-soft: var(--green-50); --status-warn: var(--yellow-500); --status-warn-soft: var(--yellow-50); --status-danger: var(--red-500); --status-danger-soft: var(--red-50); --status-info: var(--blue-500); --status-info-soft: var(--blue-50); /* Border */ --border-subtle: var(--cool-neutral-94); --border-default: var(--cool-neutral-90); --border-strong: var(--cool-neutral-80); --border-focus: var(--blue-500); /* Interaction (Wanted's "assistive" buttons + hover states) */ --interaction-assistive: var(--alpha-neutral-08); --interaction-hover: var(--alpha-neutral-08); --interaction-press: var(--alpha-neutral-16); /* ============================================================ * TYPOGRAPHY * Pretendard 가 본문 표준 (한국어 가독성 검증, 위 import 로 로드됨). * Variable axis (weight 45–920) 가능 — 어떤 weight 값이든 지원. * ============================================================ */ --font-sans: "Pretendard Variable", "Pretendard", "Pretendard JP", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Weights — Pretendard Variable 은 어떤 값(45-920)도 지원 */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* Type scale (px) — from Wanted's Typography page. * Scale name size / line-height (multiple) * ---------------------------------------------------- * Title 1 36 / 1.4 — hero / page titles * Title 2 28 / 1.4 — section headers * Title 3 22 / 1.5 — card / dialog title * Heading 1 20 / 1.5 — subsection * Heading 2 18 / 1.5 — list group * Body 1 (default) 16 / 1.5 — body copy * Body 2 15 / 1.5 — dense body * Body 3 14 / 1.5 — secondary * Caption 1 13 / 1.4 — meta * Caption 2 12 / 1.4 — micro * Label 1 (button) 16 / 1.5 — button label / link * Label 2 14 / 1.5 — chip / tag */ --t-title-1-size: 36px; --t-title-1-lh: 1.4; --t-title-2-size: 28px; --t-title-2-lh: 1.4; --t-title-3-size: 22px; --t-title-3-lh: 1.5; --t-heading-1-size: 20px; --t-heading-1-lh: 1.5; --t-heading-2-size: 18px; --t-heading-2-lh: 1.5; --t-body-1-size: 16px; --t-body-1-lh: 1.5; --t-body-2-size: 15px; --t-body-2-lh: 1.5; --t-body-3-size: 14px; --t-body-3-lh: 1.5; --t-caption-1-size: 13px; --t-caption-1-lh: 1.4; --t-caption-2-size: 12px; --t-caption-2-lh: 1.4; /* Letter spacing — Wanted uses subtle positive tracking on body for Korean readability */ --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-loose: 0.006em; /* ============================================================ * SPACING — 4px base grid * ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ============================================================ * RADIUS — Wanted leans on generous, friendly corners * ============================================================ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* default for buttons, inputs */ --radius-xl: 16px; /* cards */ --radius-2xl: 24px; --radius-pill: 999px; /* ============================================================ * ELEVATION — soft, low-alpha shadows. Wanted avoids heavy drops. * ============================================================ */ --shadow-1: 0 1px 2px rgba(20, 25, 30, 0.04), 0 0 0 1px rgba(20, 25, 30, 0.04); --shadow-2: 0 2px 6px rgba(20, 25, 30, 0.06), 0 0 0 1px rgba(20, 25, 30, 0.04); --shadow-3: 0 8px 24px rgba(20, 25, 30, 0.08), 0 0 0 1px rgba(20, 25, 30, 0.04); --shadow-4: 0 16px 48px rgba(20, 25, 30, 0.12), 0 0 0 1px rgba(20, 25, 30, 0.04); /* Motion — quick, ease-out by default */ --motion-fast: 120ms cubic-bezier(0.2, 0.8, 0.2, 1); --motion-medium: 200ms cubic-bezier(0.2, 0.8, 0.2, 1); --motion-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ============================================================ * SEMANTIC TYPE CLASSES — drop these onto elements directly. * ============================================================ */ html { font-family: var(--font-sans); color: var(--fg-primary); background: var(--surface-background); font-feature-settings: "ss03", "case", "tnum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-size: var(--t-body-1-size); line-height: var(--t-body-1-lh); margin: 0; } .t-title-1 { font-size: var(--t-title-1-size); line-height: var(--t-title-1-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } .t-title-2 { font-size: var(--t-title-2-size); line-height: var(--t-title-2-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } .t-title-3 { font-size: var(--t-title-3-size); line-height: var(--t-title-3-lh); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); } .t-heading-1 { font-size: var(--t-heading-1-size); line-height: var(--t-heading-1-lh); font-weight: var(--weight-semibold); } .t-heading-2 { font-size: var(--t-heading-2-size); line-height: var(--t-heading-2-lh); font-weight: var(--weight-semibold); } .t-body-1 { font-size: var(--t-body-1-size); line-height: var(--t-body-1-lh); font-weight: var(--weight-regular); } .t-body-2 { font-size: var(--t-body-2-size); line-height: var(--t-body-2-lh); font-weight: var(--weight-regular); } .t-body-3 { font-size: var(--t-body-3-size); line-height: var(--t-body-3-lh); font-weight: var(--weight-regular); } .t-caption-1 { font-size: var(--t-caption-1-size); line-height: var(--t-caption-1-lh); font-weight: var(--weight-regular); } .t-caption-2 { font-size: var(--t-caption-2-size); line-height: var(--t-caption-2-lh); font-weight: var(--weight-regular); color: var(--fg-tertiary); } .t-label { font-size: var(--t-body-1-size); line-height: var(--t-body-1-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-loose); } h1 { font-size: var(--t-title-1-size); line-height: var(--t-title-1-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin: 0; } h2 { font-size: var(--t-title-2-size); line-height: var(--t-title-2-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin: 0; } h3 { font-size: var(--t-title-3-size); line-height: var(--t-title-3-lh); font-weight: var(--weight-semibold); margin: 0; } h4 { font-size: var(--t-heading-1-size); line-height: var(--t-heading-1-lh); font-weight: var(--weight-semibold); margin: 0; } h5 { font-size: var(--t-heading-2-size); line-height: var(--t-heading-2-lh); font-weight: var(--weight-semibold); margin: 0; } p { margin: 0; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }