/* NiceWeb Design System — Colors & Type * Built on the Wanted Design System foundations (CC BY 4.0). * Product: 나이스웹 — 월 3만원으로 빠르게 나만의 홈페이지를 만들어주는 서비스 */ /* Pretendard (KR) — primary face for Korean-first product. * Loaded from the official CDN so it works offline via local woff2 in fonts/ * once the file is dropped in. */ @font-face { font-family: "Pretendard"; src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations"), url("./fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-display: swap; font-style: normal; } /* Pretendard JP fallback (retained for JP locale). */ @font-face { font-family: "Pretendard JP"; src: url("./fonts/PretendardJPVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-display: swap; font-style: normal; } /* Fallback via CDN (Pretendard — nearest GoogleFonts analogue: 'Noto Sans KR'; * we include Pretendard directly because it is the canonical face of this system.) */ :root { /* ── Atomic palette (Wanted Cool-Neutral + accents) ── */ --color-common-0: rgb(0, 0, 0); --color-common-100: rgb(255, 255, 255); --color-cool-neutral-10: rgb(20, 25, 30); --color-cool-neutral-15: rgb(27, 28, 30); --color-cool-neutral-20: rgb(23, 23, 25); --color-cool-neutral-22: rgb(46, 47, 51); --color-cool-neutral-25: rgb(55, 56, 60); --color-cool-neutral-35: rgb(70, 72, 77); --color-cool-neutral-50: rgb(112, 115, 124); --color-cool-neutral-70: rgb(152, 155, 162); --color-cool-neutral-75: rgb(174, 176, 182); --color-cool-neutral-85: rgb(194, 196, 200); --color-cool-neutral-90: rgb(219, 220, 223); --color-cool-neutral-94: rgb(234, 235, 238); --color-cool-neutral-96: rgb(240, 241, 243); --color-cool-neutral-97: rgb(244, 244, 245); --color-cool-neutral-98: rgb(247, 247, 248); --color-cool-neutral-99: rgb(251, 251, 252); --color-blue-40: rgb(0, 94, 235); --color-blue-45: rgb(0, 102, 255); --color-blue-50: rgb(51, 133, 255); --color-blue-60: rgb(99, 164, 255); --color-blue-95: rgb(234, 242, 254); --color-violet-45: rgb(151, 71, 255); --color-purple-40: rgb(101, 65, 242); --color-purple-95: rgb(240, 236, 254); --color-green-40: rgb(0, 152, 84); --color-green-50: rgb(0, 191, 64); --color-red-40: rgb(227, 34, 34); --color-red-50: rgb(255, 66, 66); --color-cyan-40: rgb(0, 152, 178); --color-orange-39: rgb(220, 90, 0); --color-red-orange-48: rgb(246, 72, 0); /* ── Semantic — Label ── */ --label-normal: rgba(46, 47, 51, 0.88); /* cool-22 / 88 */ --label-strong: rgb(0, 0, 0); --label-neutral: rgba(55, 56, 60, 0.61); /* cool-25 / 61 */ --label-alternative: rgba(55, 56, 60, 0.28); /* cool-25 / 28 */ --label-assistive: rgba(55, 56, 60, 0.16); /* cool-25 / 16 */ --label-disable: rgba(55, 56, 60, 0.16); --label-inverse: rgb(255, 255, 255); /* ── Semantic — Background ── */ --background-normal: rgb(255, 255, 255); --background-alternative: rgb(247, 247, 248); --background-elevated-normal: rgb(255, 255, 255); --background-elevated-alternative: rgb(251, 251, 252); --background-dimmer: rgba(0, 0, 0, 0.56); /* ── Semantic — Line ── */ --line-normal: rgba(112, 115, 124, 0.22); --line-neutral: rgba(112, 115, 124, 0.16); --line-alternative: rgba(112, 115, 124, 0.08); --line-strong: rgba(112, 115, 124, 0.61); /* ── Semantic — Primary (brand) ── */ --primary-normal: rgb(0, 102, 255); --primary-strong: rgb(0, 94, 235); --primary-heavy: rgb(0, 82, 204); --primary-inverse: rgb(99, 164, 255); /* ── Status ── */ --status-positive: rgb(0, 191, 64); --status-cautionary: rgb(220, 90, 0); --status-negative: rgb(255, 66, 66); /* ── Interaction ── */ --interaction-inactive: rgb(152, 155, 162); --interaction-disable: rgb(244, 244, 245); /* ── Fill (component) ── */ --fill-normal: rgba(112, 115, 124, 0.08); --fill-neutral: rgba(112, 115, 124, 0.16); --fill-alternative: rgb(247, 247, 248); /* ── Accent (brand-expressive surfaces) ── */ --accent-blue: rgb(0, 102, 255); --accent-blue-bg: rgb(234, 242, 254); --accent-violet: rgb(151, 71, 255); --accent-violet-bg: rgb(240, 236, 254); /* ── Radii ── */ --radius-2: 2px; --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px; --radius-24: 24px; --radius-32: 32px; --radius-circle: 9999px; /* ── Spacing (4-pt system) ── */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-128: 128px; /* ── Shadow — Normal (neutral, reserved) ── */ --shadow-normal-xs: 0 1px 2px -1px rgba(23,23,23,0.10); --shadow-normal-sm: 0 4px 6px -1px rgba(23,23,23,0.06), 0 2px 4px -2px rgba(23,23,23,0.06); --shadow-normal-md: 0 10px 15px -3px rgba(23,23,23,0.07), 0 4px 6px -2px rgba(0,0,0,0.07); --shadow-normal-lg: 0 16px 24px -6px rgba(23,23,23,0.08), 0 6px 10px -4px rgba(23,23,23,0.08); --shadow-normal-xl: 0 24px 38px -10px rgba(23,23,23,0.12), 0 10px 15px -5px rgba(23,23,23,0.10); /* ── Shadow — Emphasize (floating overlays, context menus) ── */ --shadow-emphasize-xs: 0 2px 4px -1px rgba(23,23,23,0.12); --shadow-emphasize-sm: 0 6px 10px -2px rgba(23,23,23,0.10), 0 3px 6px -2px rgba(23,23,23,0.08); --shadow-emphasize-md: 0 14px 24px -6px rgba(23,23,23,0.14), 0 6px 10px -3px rgba(23,23,23,0.10); --shadow-emphasize-lg: 0 24px 40px -8px rgba(23,23,23,0.16), 0 10px 16px -6px rgba(23,23,23,0.12); --shadow-emphasize-xl: 0 40px 60px -12px rgba(23,23,23,0.22), 0 16px 24px -8px rgba(23,23,23,0.14); /* ── Aliases for convenience (match common JSX references) ── */ --blue-background: var(--accent-blue-bg); --green-background: rgba(0, 191, 64, 0.10); --red-background: rgba(255, 66, 66, 0.10); --orange-background: rgba(220, 90, 0, 0.10); --purple-background: var(--accent-violet-bg); --cool-neutral-10: var(--color-cool-neutral-10); --cool-neutral-20: var(--color-cool-neutral-20); --cool-neutral-22: var(--color-cool-neutral-22); --cool-neutral-25: var(--color-cool-neutral-25); --cool-neutral-35: var(--color-cool-neutral-35); --cool-neutral-50: var(--color-cool-neutral-50); --cool-neutral-70: var(--color-cool-neutral-70); --cool-neutral-85: var(--color-cool-neutral-85); --cool-neutral-90: var(--color-cool-neutral-90); --cool-neutral-94: var(--color-cool-neutral-94); --cool-neutral-96: var(--color-cool-neutral-96); --cool-neutral-97: var(--color-cool-neutral-97); --cool-neutral-98: var(--color-cool-neutral-98); --cool-neutral-99: var(--color-cool-neutral-99); /* ── Type tokens ── */ --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; } /* ───────────────────────── Typography scale (Wanted, 18 levels) */ .t-display-1 { font: 700 56px/1.286 var(--font-sans); letter-spacing: -0.0319em; } .t-display-2 { font: 700 40px/1.3 var(--font-sans); letter-spacing: -0.0282em; } .t-display-3 { font: 700 36px/1.334 var(--font-sans); letter-spacing: -0.027em; } .t-title-1 { font: 700 32px/1.375 var(--font-sans); letter-spacing: -0.0253em; } .t-title-2 { font: 700 28px/1.358 var(--font-sans); letter-spacing: -0.0236em; } .t-title-3 { font: 700 24px/1.334 var(--font-sans); letter-spacing: -0.023em; } .t-heading-1 { font: 600 22px/1.364 var(--font-sans); letter-spacing: -0.0194em; } .t-heading-2 { font: 600 20px/1.4 var(--font-sans); letter-spacing: -0.012em; } .t-headline-1 { font: 600 18px/1.445 var(--font-sans); letter-spacing: -0.002em; } .t-headline-2 { font: 600 17px/1.412 var(--font-sans); letter-spacing: 0em; } .t-body-1 { font: 500 16px/1.5 var(--font-sans); letter-spacing: 0.0057em; } .t-body-1-reading { font: 500 16px/1.625 var(--font-sans); letter-spacing: 0.0057em; } .t-body-2 { font: 500 15px/1.467 var(--font-sans); letter-spacing: 0.0096em; } .t-body-2-reading { font: 500 15px/1.6 var(--font-sans); letter-spacing: 0.0096em; } .t-label-1 { font: 500 14px/1.429 var(--font-sans); letter-spacing: 0.0145em; } .t-label-1-reading { font: 500 14px/1.571 var(--font-sans); letter-spacing: 0.0145em; } .t-label-2 { font: 600 13px/1.385 var(--font-sans); letter-spacing: 0.0194em; } .t-caption-1 { font: 500 12px/1.334 var(--font-sans); letter-spacing: 0.0252em; } .t-caption-2 { font: 500 11px/1.273 var(--font-sans); letter-spacing: 0.0311em; } /* Semantic element mapping (used when not classed) */ html, body { font-family: var(--font-sans); color: var(--label-normal); } body { font-size: 16px; line-height: 1.5; background: var(--background-normal); } h1 { font: 700 40px/1.3 var(--font-sans); letter-spacing: -0.0282em; color: var(--label-strong); } h2 { font: 700 32px/1.375 var(--font-sans); letter-spacing: -0.0253em; color: var(--label-strong); } h3 { font: 700 24px/1.334 var(--font-sans); letter-spacing: -0.023em; color: var(--label-strong); } h4 { font: 600 20px/1.4 var(--font-sans); letter-spacing: -0.012em; color: var(--label-strong); } h5 { font: 600 17px/1.412 var(--font-sans); color: var(--label-strong); } p { font: 500 16px/1.625 var(--font-sans); letter-spacing: 0.0057em; color: var(--label-normal); } small { font: 500 12px/1.334 var(--font-sans); letter-spacing: 0.0252em; color: var(--label-neutral); } code, pre { font-family: var(--font-mono); font-size: 0.94em; }