/* ============================================================= * Toss × Towncar Design System — Mobile * * A hybrid: Toss Design System's component vocabulary, type scale, * spacing, and motion + the Towncar color system swapped in for * every color token. * * Color primitives are lifted verbatim from the official Towncar * Figma file (Towncar Design System (draft).fig → /Colour-Primitive). * Semantic token names follow Towncar's `colour-semantic-*` schema. * * Production uses Toss Product Sans (proprietary). We substitute * with **Pretendard** — the de-facto open Korean grotesque, the * closest open match to Toss Product Sans in metrics, hinting, and * Hangul shaping. (Towncar also ships with Pretendard, so the type * choice is consistent across both halves of the hybrid.) * ============================================================= */ /* JetBrains Mono — CDN (no local file uploaded). @import must precede @font-face. */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"); @font-face { font-family: "Toss Product Sans"; src: local("Toss Product Sans"), local("TossProductSans"); font-weight: 400 700; font-display: swap; } /* Pretendard — self-hosted variable font (orioncactus/pretendard, OFL 1.1). Single file covers weights 100–900. Replaces the CDN webfont. */ @font-face { font-family: "Pretendard"; src: url("fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Pretendard Variable"; src: url("fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ----------------------------------------------------------- * TOWNCAR PRIMITIVES — the raw color palette. * Names match the Figma source 1:1 (`twn--`). * --------------------------------------------------------- */ /* Common */ --twn-common-black: #000000; --twn-common-white: #FFFFFF; /* Neutral (16 steps, 50 → 900) */ --twn-neutral-50: #F8F8F9; --twn-neutral-100: #F0F0F3; --twn-neutral-120: #E9E9ED; --twn-neutral-150: #DBDBE0; --twn-neutral-180: #CCCCD2; --twn-neutral-200: #B8B8BF; --twn-neutral-250: #A4A3AB; --twn-neutral-300: #939298; --twn-neutral-400: #828187; --twn-neutral-500: #6F6E74; --twn-neutral-600: #515157; --twn-neutral-700: #303033; --twn-neutral-750: #222222; --twn-neutral-800: #171719; --twn-neutral-900: #0F0F10; /* Green — PRIMARY brand hue. Green/600 is the brand. */ --twn-green-100: #F0FCF3; --twn-green-150: #E1F9E8; --twn-green-200: #D5F5DE; --twn-green-250: #C5F1D1; --twn-green-300: #ABECBD; --twn-green-400: #85E7A1; --twn-green-500: #34CC64; --twn-green-600: #0BB53B; /* ★ brand */ --twn-green-650: #0AA336; --twn-green-700: #06842B; --twn-green-750: #046F24; --twn-green-800: #02571D; --twn-green-850: #004517; --twn-green-900: #00240C; /* Blue */ --twn-blue-50: #F7FAFF; --twn-blue-100: #E9F0FF; --twn-blue-150: #DBE7FF; --twn-blue-200: #CCDEFF; --twn-blue-250: #B4CEFF; --twn-blue-300: #8CB4FF; --twn-blue-400: #679AF9; --twn-blue-500: #4886F9; --twn-blue-550: #2D73F6; --twn-blue-600: #0059FE; --twn-blue-700: #004DDD; --twn-blue-750: #003FB3; --twn-blue-800: #042666; --twn-blue-900: #001536; /* Light Blue */ --twn-lightblue-50: #FAFDFF; --twn-lightblue-100: #E9F6FF; --twn-lightblue-200: #C2E8FF; --twn-lightblue-400: #69C4FC; --twn-lightblue-500: #3AA9F9; --twn-lightblue-600: #008AED; --twn-lightblue-700: #007AD1; /* Red — status-negative */ --twn-red-50: #FFF3F3; --twn-red-100: #FFEBEB; --twn-red-150: #FFDEDE; --twn-red-200: #FFCFCF; --twn-red-300: #FF9999; --twn-red-400: #FC7A7A; --twn-red-500: #EC4337; /* ★ danger */ --twn-red-600: #E41F10; --twn-red-650: #CC1003; --twn-red-700: #AB1206; --twn-red-800: #860C03; --twn-red-900: #3B0101; /* Orange — status-warning */ --twn-orange-50: #FFF4EE; --twn-orange-100: #FFEEE4; --twn-orange-200: #FFD1B6; --twn-orange-400: #FF9E66; --twn-orange-500: #FF782A; --twn-orange-600: #FD6106; --twn-orange-700: #D74F00; /* Purple */ --twn-purple-100: #F9EDFF; --twn-purple-300: #D478FF; --twn-purple-500: #CB59FF; --twn-purple-600: #AD36E3; --twn-purple-700: #861CB8; /* Violet — secondary action */ --twn-violet-50: #FBFAFF; --twn-violet-100: #F1EDFF; --twn-violet-200: #C0B0FF; --twn-violet-400: #7D5EF7; --twn-violet-500: #6D4BF6; /* ★ secondary action */ --twn-violet-600: #6541F2; --twn-violet-700: #3A16C9; /* Pink */ --twn-pink-100: #FEECFB; --twn-pink-200: #FFB8F3; --twn-pink-500: #F553DA; --twn-pink-600: #E846CD; --twn-pink-700: #A81690; /* ----------------------------------------------------------- * SEMANTIC TOKENS — follow Towncar's `colour-semantic-*` schema. * Use these in product code (never the primitives directly). * --------------------------------------------------------- */ --colour-semantic-static-black: var(--twn-common-black); --colour-semantic-static-white: var(--twn-common-white); /* Primary / secondary action */ --colour-semantic-primary-general: var(--twn-green-600); /* #0BB53B */ --colour-semantic-primary-hover: var(--twn-green-650); --colour-semantic-primary-pressed: var(--twn-green-700); --colour-semantic-primary-weak: var(--twn-green-100); --colour-semantic-secondary-action: var(--twn-violet-500); /* #6D4BF6 */ --colour-semantic-secondary-action-weak: var(--twn-violet-100); /* Text */ --colour-semantic-text-heavy: var(--twn-common-black); --colour-semantic-text-general: var(--twn-neutral-800); /* #171719 */ --colour-semantic-text-neutral: var(--twn-neutral-600); /* #515157 */ --colour-semantic-text-alternative: var(--twn-neutral-500); /* #6F6E74 */ --colour-semantic-text-assistive: var(--twn-neutral-300); /* #939298 */ --colour-semantic-text-disable: var(--twn-neutral-200); --colour-semantic-text-on-primary: var(--twn-common-white); --colour-semantic-text-on-inverse: var(--twn-common-white); /* Background */ --colour-semantic-background-general-general: var(--twn-common-white); --colour-semantic-background-general-alternative: var(--twn-neutral-50); /* #F8F8F9 */ --colour-semantic-background-elevated-general: var(--twn-common-white); --colour-semantic-background-elevated-alternative: var(--twn-neutral-100); --colour-semantic-background-inverse: var(--twn-neutral-800); /* Line / border */ --colour-semantic-line-general: var(--twn-neutral-120); /* #E9E9ED */ --colour-semantic-line-alternative: var(--twn-neutral-150); --colour-semantic-line-heavy: var(--twn-neutral-200); --colour-semantic-line-on-bg: rgba(147,146,152,0.22); /* Status */ --colour-semantic-status-positive: var(--twn-green-500); /* #34CC64 */ --colour-semantic-status-negative: var(--twn-red-500); /* #EC4337 */ --colour-semantic-status-cautionary: var(--twn-orange-500); /* #FF782A */ --colour-semantic-status-informative: var(--twn-blue-600); /* #0059FE */ /* Interaction */ --colour-semantic-interaction-inactive: var(--twn-neutral-200); --colour-semantic-interaction-hover: rgba(0,0,0,0.04); --colour-semantic-interaction-pressed: rgba(0,0,0,0.08); /* Inverse / over-photo */ --colour-semantic-inverse-primary: rgba(255,255,255,0.94); --colour-semantic-inverse-neutral: rgba(255,255,255,0.60); --colour-semantic-overlay-scrim: rgba(0,0,0,0.55); /* ----------------------------------------------------------- * LEGACY TDS-style aliases * * The existing UI Kit was authored against `--tds-*` tokens; * we keep those names but repoint them to Towncar semantic * tokens so the components automatically adopt the new palette. * --------------------------------------------------------- */ /* Brand */ --tds-brand-blue: var(--colour-semantic-primary-general); --tds-brand-blue-pressed: var(--colour-semantic-primary-pressed); --tds-brand-blue-weak: rgba(11,181,59,0.16); /* green-600 @ 16% */ --tds-brand-blue-50: var(--twn-green-100); /* Greys — mapped onto Towncar neutrals */ --tds-grey-50: var(--twn-neutral-50); --tds-grey-100: var(--twn-neutral-100); --tds-grey-200: var(--twn-neutral-150); --tds-grey-300: var(--twn-neutral-200); --tds-grey-400: var(--twn-neutral-250); --tds-grey-500: var(--twn-neutral-400); --tds-grey-600: var(--twn-neutral-500); --tds-grey-700: var(--twn-neutral-600); --tds-grey-800: var(--twn-neutral-700); --tds-grey-900: var(--twn-neutral-800); /* Adaptive (alpha) greys — derived from neutral-800 = #171719 */ --tds-adaptive-grey-50: rgba(23,23,25,0.05); --tds-adaptive-grey-100: rgba(23,23,25,0.02); --tds-adaptive-grey-200: rgba(23,23,25,0.10); --tds-adaptive-grey-500: rgba(23,23,25,0.46); --tds-adaptive-grey-700: rgba(23,23,25,0.58); --tds-adaptive-grey-900: var(--twn-neutral-800); /* Semantic (Toss-flavored aliases → Towncar semantic tokens) */ --tds-success: var(--colour-semantic-status-positive); --tds-success-strong: var(--twn-green-700); --tds-warning: var(--colour-semantic-status-cautionary); --tds-warning-soft: var(--twn-orange-300, var(--twn-orange-400)); --tds-danger: var(--colour-semantic-status-negative); --tds-danger-weak: rgba(236,67,55,0.16); /* Role aliases used throughout the UI Kit */ --tds-bg: var(--colour-semantic-background-general-general); --tds-bg-alt: var(--colour-semantic-background-general-alternative); --tds-bg-elevated: var(--colour-semantic-background-elevated-general); --tds-bg-inverse: var(--colour-semantic-background-inverse); --tds-surface-overlay: var(--colour-semantic-overlay-scrim); --tds-border: var(--colour-semantic-line-general); --tds-border-strong: var(--colour-semantic-line-heavy); --tds-hairline: var(--tds-adaptive-grey-200); --tds-fg-primary: var(--colour-semantic-text-general); --tds-fg-secondary: var(--colour-semantic-text-neutral); --tds-fg-tertiary: var(--colour-semantic-text-alternative); --tds-fg-quaternary: var(--colour-semantic-text-assistive); --tds-fg-on-brand: var(--colour-semantic-text-on-primary); --tds-fg-brand: var(--colour-semantic-primary-general); --tds-fg-danger: var(--colour-semantic-status-negative); /* ----------------------------------------------------------- * TYPOGRAPHY * Production: Toss Product Sans. Fallback: Inter. * TDS does NOT publish a numeric type scale token table; * the sizes below are extracted directly from the .fig file * (Top, Button, List-Row, Toast, etc). * --------------------------------------------------------- */ --tds-font-sans: "Toss Product Sans", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif; --tds-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Display — only used in marketing / Cover (Figma scale 140/70). */ --tds-display-1-size: 56px; --tds-display-1-line: 1.10; --tds-display-1-weight: 700; --tds-display-1-tracking: -0.022em; /* Headings — used in screen headers (Top) + ListHeader */ --tds-h1-size: 28px; /* Top — Large Title */ --tds-h1-line: 1.30; --tds-h1-weight: 700; --tds-h1-tracking: -0.020em; --tds-h2-size: 22px; /* ListHeader — XL */ --tds-h2-line: 1.30; --tds-h2-weight: 700; --tds-h2-tracking: -0.018em; --tds-h3-size: 20px; /* Section title */ --tds-h3-line: 1.35; --tds-h3-weight: 700; --tds-h3-tracking: -0.016em; /* Body — the workhorses. */ --tds-body-1-size: 17px; /* default body / list row */ --tds-body-1-line: 1.45; --tds-body-1-weight: 400; --tds-body-1-tracking: -0.010em; --tds-body-2-size: 15px; /* secondary body, denser lists */ --tds-body-2-line: 1.45; --tds-body-2-weight: 400; --tds-body-2-tracking: -0.008em; /* Buttons — use Bold/Semibold. Sizes from Figma button XL/L/M/S. */ --tds-button-xl-size: 17px; --tds-button-l-size: 17px; --tds-button-m-size: 15px; --tds-button-s-size: 13px; --tds-button-weight: 700; /* Caption / footnote / meta */ --tds-caption-1-size: 13px; --tds-caption-1-line: 1.40; --tds-caption-1-weight: 500; --tds-caption-2-size: 12px; --tds-caption-2-line: 1.40; --tds-caption-2-weight: 500; --tds-overline-size: 11px; --tds-overline-line: 1.40; --tds-overline-weight: 500; --tds-overline-tracking: 0.02em; /* ----------------------------------------------------------- * SPACING / SIZING * TDS Mobile uses 4px increments. Most padding is 20/24/16. * --------------------------------------------------------- */ --tds-space-1: 4px; --tds-space-2: 8px; --tds-space-3: 12px; --tds-space-4: 16px; --tds-space-5: 20px; --tds-space-6: 24px; --tds-space-7: 32px; --tds-space-8: 40px; --tds-space-9: 48px; --tds-space-10: 56px; /* Standard mobile gutter is 20px left, 24px right pad on inner content. */ --tds-gutter: 20px; /* ----------------------------------------------------------- * RADII — TDS leans rounded but not pill-shaped except for chips. * --------------------------------------------------------- */ --tds-radius-sm: 6px; --tds-radius-md: 10px; --tds-radius-lg: 14px; /* card / sheet bottom */ --tds-radius-xl: 16px; /* button XL/L */ --tds-radius-2xl: 20px; /* large sheet */ --tds-radius-3xl: 24px; /* dialog */ --tds-radius-pill: 999px; /* chips, badges */ /* iOS-style squircle approximation — TDS uses an actual squircle mask via SVG for Asset icons. CSS fallback: 28% of size. */ --tds-squircle-ratio: 0.28; /* ----------------------------------------------------------- * ELEVATION — TDS is mostly flat; shadows used sparingly for * Toast, Bottom-Sheet, FAB-style action buttons, Tooltip. * --------------------------------------------------------- */ --tds-shadow-1: 0 1px 2px rgba(0,19,43,0.06), 0 1px 1px rgba(0,19,43,0.04); --tds-shadow-2: 0 4px 16px rgba(0,19,43,0.08), 0 1px 2px rgba(0,19,43,0.04); --tds-shadow-3: 0 12px 32px rgba(0,19,43,0.14), 0 2px 6px rgba(0,19,43,0.06); --tds-shadow-toast: 0 8px 24px rgba(0,19,43,0.20); /* Protection gradients — used above CTA bars + below Top bars to fade-out scroll content. */ --tds-grad-protect-top: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 100%); --tds-grad-protect-bottom: linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,0) 100%); /* ----------------------------------------------------------- * MOTION * Toss favors brief, mostly-linear or smooth ease-out moves. * Press: 0.96 scale, 80ms. Sheets: 320ms cubic-bezier. * --------------------------------------------------------- */ --tds-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --tds-ease-emphasized: cubic-bezier(0.20, 0.80, 0.20, 1); --tds-ease-in: cubic-bezier(0.4, 0, 1, 1); --tds-dur-instant: 80ms; --tds-dur-fast: 150ms; --tds-dur-base: 240ms; --tds-dur-slow: 320ms; } /* ============================================================= * SEMANTIC TEXT STYLES — apply via class. * Match Figma "Top Margin, Style=H1/H2/Body" naming. * ============================================================= */ .tds-display-1 { font-family: var(--tds-font-sans); font-size: var(--tds-display-1-size); line-height: var(--tds-display-1-line); font-weight: var(--tds-display-1-weight); letter-spacing: var(--tds-display-1-tracking); color: var(--tds-fg-primary); } .tds-h1 { font-family: var(--tds-font-sans); font-size: var(--tds-h1-size); line-height: var(--tds-h1-line); font-weight: var(--tds-h1-weight); letter-spacing: var(--tds-h1-tracking); color: var(--tds-fg-primary); } .tds-h2 { font-family: var(--tds-font-sans); font-size: var(--tds-h2-size); line-height: var(--tds-h2-line); font-weight: var(--tds-h2-weight); letter-spacing: var(--tds-h2-tracking); color: var(--tds-fg-primary); } .tds-h3 { font-family: var(--tds-font-sans); font-size: var(--tds-h3-size); line-height: var(--tds-h3-line); font-weight: var(--tds-h3-weight); letter-spacing: var(--tds-h3-tracking); color: var(--tds-fg-primary); } .tds-body-1 { font-family: var(--tds-font-sans); font-size: var(--tds-body-1-size); line-height: var(--tds-body-1-line); font-weight: var(--tds-body-1-weight); letter-spacing: var(--tds-body-1-tracking); color: var(--tds-fg-primary); } .tds-body-2 { font-family: var(--tds-font-sans); font-size: var(--tds-body-2-size); line-height: var(--tds-body-2-line); font-weight: var(--tds-body-2-weight); letter-spacing: var(--tds-body-2-tracking); color: var(--tds-fg-primary); } .tds-caption-1 { font-family: var(--tds-font-sans); font-size: var(--tds-caption-1-size); line-height: var(--tds-caption-1-line); font-weight: var(--tds-caption-1-weight); color: var(--tds-fg-secondary); } .tds-caption-2 { font-family: var(--tds-font-sans); font-size: var(--tds-caption-2-size); line-height: var(--tds-caption-2-line); font-weight: var(--tds-caption-2-weight); color: var(--tds-fg-secondary); } .tds-overline { font-family: var(--tds-font-sans); font-size: var(--tds-overline-size); line-height: var(--tds-overline-line); font-weight: var(--tds-overline-weight); letter-spacing: var(--tds-overline-tracking); text-transform: uppercase; color: var(--tds-fg-tertiary); } /* Sensible HTML defaults so raw markup inherits the system. */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--tds-font-sans); font-size: var(--tds-body-1-size); line-height: var(--tds-body-1-line); letter-spacing: var(--tds-body-1-tracking); color: var(--tds-fg-primary); background: var(--tds-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: 700 var(--tds-h1-size)/var(--tds-h1-line) var(--tds-font-sans); letter-spacing: var(--tds-h1-tracking); margin: 0; } h2 { font: 700 var(--tds-h2-size)/var(--tds-h2-line) var(--tds-font-sans); letter-spacing: var(--tds-h2-tracking); margin: 0; } h3 { font: 700 var(--tds-h3-size)/var(--tds-h3-line) var(--tds-font-sans); letter-spacing: var(--tds-h3-tracking); margin: 0; } p { margin: 0; } code, pre, kbd, samp { font-family: var(--tds-font-mono); } /* ============================================================= * App-level accent tokens (overridable by Tweaks at runtime). * Default = TDS-recommended brand-green selection. * ============================================================= */ :root { /* Selected/active surfaces */ --sel-bg: var(--colour-semantic-primary-general); /* #0BB53B */ --sel-fg: var(--colour-semantic-text-on-primary); /* #fff */ --sel-border: var(--colour-semantic-primary-general); /* Active tab text + underline */ --tab-active-fg: var(--colour-semantic-text-general); /* #171719 */ --tab-underline: var(--colour-semantic-primary-general); /* green */ --tab-count-fg: var(--colour-semantic-primary-general); }