/* ========================================================= PegCity Design System — colors_and_type.css PegCity Digital Marketing ========================================================= */ /* --- Web fonts -------------------------------------------------- Font CSS is loaded ASYNC from each HTML file's (preload + onload trick). Keeping this file free of @import means colors/typography CSS is not delayed waiting for external font CSS to parse. See index.html . */ :root { /* ========================================================= COLORS — brand ========================================================= */ /* Brand ink — pure black drawn straight from the wordmark */ --pc-ink: #000000; --pc-ink-90: #111111; --pc-ink-80: #1D1D1F; --pc-ink-60: #3A3A3D; --pc-ink-40: #6E6E73; /* secondary text */ --pc-ink-30: #8E8E93; /* tertiary */ --pc-ink-20: #C7C7CC; /* hairlines */ --pc-ink-10: #E5E5EA; /* borders, dividers */ --pc-ink-05: #F2F2F5; /* surface-2 */ /* Brand blue — the arc over "E→G" in the wordmark. Sampled: strokes go from ~#0028C8 (top) to ~#001478 (bottom) */ --pc-blue: #0028C8; /* primary */ --pc-blue-900: #000D4D; --pc-blue-800: #001478; --pc-blue-700: #001EA0; --pc-blue-600: #0028C8; /* = primary */ --pc-blue-500: #1F43DC; --pc-blue-400: #4D68E8; --pc-blue-300: #8498F2; --pc-blue-200: #BDC7F9; --pc-blue-100: #E3E8FD; --pc-blue-50: #F2F4FE; /* Canvas */ --pc-bg: #FFFFFF; --pc-bg-alt: #FAFAFB; /* subtle off-white sections */ --pc-bg-ink: #0A0A0B; /* inverted / dark sections */ /* Accent — derived harmonics, used sparingly */ --pc-accent-arc: linear-gradient(92deg, #001478 0%, #0028C8 35%, #1F43DC 100%); /* ========================================================= COLORS — semantic ========================================================= */ --color-fg-1: var(--pc-ink); /* primary text */ --color-fg-2: var(--pc-ink-60); /* secondary text */ --color-fg-3: var(--pc-ink-40); /* tertiary / meta */ --color-fg-muted: var(--pc-ink-30); --color-fg-inverse: #FFFFFF; --color-fg-brand: var(--pc-blue); --color-fg-link: var(--pc-blue); --color-bg-1: var(--pc-bg); --color-bg-2: var(--pc-bg-alt); --color-bg-3: var(--pc-ink-05); --color-bg-inverse: var(--pc-bg-ink); --color-bg-brand: var(--pc-blue); --color-border-1: var(--pc-ink-10); --color-border-2: var(--pc-ink-20); --color-border-strong: var(--pc-ink); --color-success: #0A7D47; --color-success-bg: #E6F5EC; --color-warning: #B8750A; --color-warning-bg: #FDF4E2; --color-danger: #C4281C; --color-danger-bg: #FCEAE8; --color-info: var(--pc-blue); --color-info-bg: var(--pc-blue-50); /* ========================================================= TYPOGRAPHY — families ========================================================= */ /* Pretendard covers Korean + Latin, matches the logo's geometric feel. Poppins is the EN display stand-in closest to the wordmark's shapes. Gothic A1 is the Korean display companion. */ --font-display-en: 'Poppins', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --font-display-kr: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ========================================================= TYPOGRAPHY — scale (fluid where meaningful) Line-heights are tight on display, 1.6 on body per KR readability. ========================================================= */ --fs-display-1: clamp(56px, 7vw, 96px); --fs-display-2: clamp(44px, 5.5vw, 72px); --fs-h1: clamp(36px, 4vw, 56px); --fs-h2: clamp(28px, 3vw, 40px); --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-lead: 20px; --fs-body: 16px; --fs-small: 14px; --fs-xs: 12px; --fs-eyebrow: 13px; --lh-display: 1.25; --lh-heading: 1.25; --lh-body: 1.6; --lh-tight: 1.3; --tracking-display: -0.02em; --tracking-heading: -0.01em; --tracking-body: 0; --tracking-eyebrow: 0.14em; /* ========================================================= SPACING — 4px base, geometric scale ========================================================= */ --space-0: 0; --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; --space-24: 96px; --space-32: 128px; /* ========================================================= RADII — generally crisp (2-4px) with a larger card size. No pill-everything. Logo itself has sharp + rounded contrasts. ========================================================= */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; /* ========================================================= SHADOWS — restrained. Flat-ish agency feel. ========================================================= */ --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.04); --shadow-sm: 0 2px 6px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.04); --shadow-md: 0 6px 16px rgba(10, 10, 11, 0.08), 0 2px 4px rgba(10, 10, 11, 0.04); --shadow-lg: 0 18px 40px rgba(10, 10, 11, 0.10), 0 4px 8px rgba(10, 10, 11, 0.06); --shadow-blue: 0 12px 32px rgba(0, 40, 200, 0.20); /* ========================================================= MOTION ========================================================= */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-accel: cubic-bezier(0.4, 0, 1, 1); --ease-decel: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ========================================================= LAYOUT ========================================================= */ --max-w-prose: 68ch; --max-w-content: 1200px; --max-w-wide: 1440px; } /* ========================================================= SEMANTIC TYPE CLASSES — drop-in selectors ========================================================= */ html { color: var(--color-fg-1); background: var(--color-bg-1); } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .display-1, h1.display { font-family: var(--font-display-en); font-size: var(--fs-display-1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: 800; color: var(--color-fg-1); } .display-2 { font-family: var(--font-display-en); font-size: var(--fs-display-2); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: 800; } h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); font-weight: 700; color: var(--color-fg-1); } h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); font-weight: 700; } h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: 700; } h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); font-weight: 600; } h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-tight); font-weight: 600; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-fg-2); } p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-fg-2); } .muted { color: var(--color-fg-2); } .meta { font-size: var(--fs-small); color: var(--color-fg-3); } small, .small { font-size: var(--fs-small); } .xs { font-size: var(--fs-xs); } .eyebrow { font-family: var(--font-display-en); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-fg-brand); } code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; } a { color: var(--color-fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-standard); } a:hover { border-bottom-color: currentColor; } /* The signature gradient stroke — usable as a text fill or bg element */ .brand-arc-text { background: var(--pc-accent-arc); -webkit-background-clip: text; background-clip: text; color: transparent; }