/* ============================================================= * Toss Design System (TDS) — Mobile * Color + type tokens for Apps-in-Toss mini-apps. * Values reconstructed from the official TDS Mobile UI Kit * (TDS_Mobile_for_Apps_in_Toss_(2602-3-2).fig). * * Toss runs Toss Product Sans in production; the Figma file * uses SF Pro as a public fallback because Toss Product Sans * is not publicly distributable. We substitute with * **Pretendard** — the de-facto open Korean grotesque used * across Korean tech and the closest open match to Toss Product * Sans in metrics, hinting, and Hangul shaping. * ============================================================= */ @font-face { font-family: "Toss Product Sans"; src: local("Toss Product Sans"), local("TossProductSans"); font-weight: 400 700; font-display: swap; } /* Pretendard — variable webfont via jsDelivr CDN. */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ----------------------------------------------------------- * BRAND — the one true Toss blue. * Used for primary CTAs, highlights, links, focus rings. * --------------------------------------------------------- */ --tds-brand-blue: #3182F6; /* rgb(49,130,246) */ --tds-brand-blue-pressed: #1B64DA; --tds-brand-blue-weak: rgba(49,130,246,0.16); /* secondary fill */ --tds-brand-blue-50: #E8F2FE; /* ----------------------------------------------------------- * GREY SCALE — the neutral system. * Naming follows Toss's internal 100→900 plus alpha tokens. * --------------------------------------------------------- */ --tds-grey-50: #F9FAFB; --tds-grey-100: #F2F4F6; /* rgb(242,244,246) — surface alt */ --tds-grey-200: #E5E8EB; /* rgb(229,232,235) — divider strong */ --tds-grey-300: #D1D6DB; --tds-grey-400: #B0B8C1; /* rgb(176,184,193) — icon-disabled / chevron */ --tds-grey-500: #8B95A1; /* rgb(139,149,161) — secondary icon */ --tds-grey-600: #6B7684; --tds-grey-700: #4E5968; /* rgb(78,89,104) — secondary text */ --tds-grey-800: #333D4B; --tds-grey-900: #191F28; /* rgb(25,31,40) — primary text */ /* Alpha greys — used over surfaces / over photos */ --tds-adaptive-grey-50: rgba(7,25,76,0.05); /* button-secondary fill */ --tds-adaptive-grey-100: rgba(0,23,51,0.02); /* nav bg, very soft */ --tds-adaptive-grey-200: rgba(0,27,55,0.10); /* hairline divider */ --tds-adaptive-grey-500: rgba(3,24,50,0.46); /* icon over photo */ --tds-adaptive-grey-700: rgba(0,19,43,0.58); /* secondary text / muted */ --tds-adaptive-grey-900: #00132B; /* near-true-black */ /* ----------------------------------------------------------- * SEMANTIC — status / intent colors. * Source: Figma button color variants + Toast/Result frames. * --------------------------------------------------------- */ --tds-success: #00B843; /* rgb(0,184,67) derived from rgb(0,123,51) family */ --tds-success-strong: #007B33; /* rgb(0,123,51) */ --tds-warning: #FF9000; /* rgb(255,144,0) */ --tds-warning-soft: #FFC84D; /* rgb(255,200,77) — toss yellow accents */ --tds-danger: #F04452; /* rgb(240,68,82) destructive */ --tds-danger-weak: rgba(240,68,82,0.16); /* ----------------------------------------------------------- * SEMANTIC ROLES — alias tokens (use these in product code). * --------------------------------------------------------- */ --tds-bg: #FFFFFF; --tds-bg-alt: var(--tds-grey-100); --tds-bg-elevated: #FFFFFF; --tds-bg-inverse: var(--tds-grey-900); --tds-surface-overlay: rgba(0,19,43,0.58); /* modal scrim */ --tds-border: var(--tds-grey-200); --tds-border-strong: var(--tds-grey-300); --tds-hairline: var(--tds-adaptive-grey-200); --tds-fg-primary: var(--tds-grey-900); /* body, titles */ --tds-fg-secondary: var(--tds-grey-700); /* captions, meta */ --tds-fg-tertiary: var(--tds-grey-500); /* placeholder, disabled-ish */ --tds-fg-quaternary: var(--tds-grey-400); /* icon trailing, chevron */ --tds-fg-on-brand: #FFFFFF; --tds-fg-brand: var(--tds-brand-blue); --tds-fg-danger: var(--tds-danger); /* ----------------------------------------------------------- * 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 Variable", "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); }