/* ───────────────────────────────────────────────────────────── * TwitterScore.io · Colors & Type * Token-only stylesheet for prototypes, slides, and UI kits. * * Color palette derived directly from the Figma source (top 30 * fills + named brand colors). Type system follows Roboto for * body/UI, Poppins SemiBold for display headings, Lato for the * wordmark. * ─────────────────────────────────────────────────────────────*/ :root { /* ── Brand ─────────────────────────────────────────────── */ --ts-brand: #0544FD; /* Primary blue, the spine of the brand */ --ts-brand-deep: #0033AD; /* Pressed / deep marketing blue */ --ts-brand-bright: #1E57FD; /* Hover ring / chart strokes */ --ts-brand-soft: #5188FF; /* Soft link / mention bubble */ --ts-purple: #6150F1; /* Score-number purple on follower chips */ /* ── Foreground ─────────────────────────────────────────── */ --ts-fg-1: #101014; /* Headings, primary text */ --ts-fg-2: #303030; /* Body */ --ts-fg-3: #484848; /* Strong secondary */ --ts-fg-4: #656565; /* Secondary labels */ --ts-fg-5: #878593; /* Subtle / placeholders */ --ts-fg-6: #A9A7B2; /* Tertiary, disabled labels */ --ts-fg-7: #59657C; /* Tabular muted (table headers, gray btn) */ /* ── Background & Surfaces ─────────────────────────────── */ --ts-bg: #FFFFFF; /* Page */ --ts-bg-elev: #F2F3F6; /* Section bands, info cards (light gray) */ --ts-bg-soft: #F3F3F3; /* Hover-row, table stripes */ --ts-bg-soft-2: #F0EFF3; /* Pressed chip */ --ts-bg-ink: #101014; /* Black hero / promo strip */ --ts-bg-ink-2: #27272A; /* Card on dark hero */ --ts-bg-ink-3: #18181B; /* Pressed dark */ /* ── Border ────────────────────────────────────────────── */ --ts-border: #DDDCE5; /* Default 1px border */ --ts-border-soft: #EBEBEB; /* Hairline divider */ --ts-border-strong: #D7D7D7; /* Active input outline */ /* ── Semantic ──────────────────────────────────────────── */ --ts-success: #1AA04B; /* Save tag / followed action */ --ts-success-bg: #E7F5EB; /* Save 35% pill background */ --ts-danger: #FF0000; /* Unfollowed / negative % */ --ts-warning: #FC8908; /* Mid score / pending */ --ts-gold: #CFB66C; /* Pro / premium accent */ /* ── Score Gauge (radial 0 → 1000) ─────────────────────── */ --ts-score-low: #FF3E1F; /* 0–250 red */ --ts-score-mid-1: #FC8908; /* 250–500 orange */ --ts-score-mid-2: #F5C518; /* 500–700 yellow */ --ts-score-high-1: #B5DE2A; /* 700–850 lime */ --ts-score-high-2: #40E530; /* 850–1000 green */ /* ── Type families ─────────────────────────────────────── */ --ts-font-body: "Roboto", "Helvetica Neue", Arial, sans-serif; --ts-font-display: "Poppins", "Roboto", "Helvetica Neue", Arial, sans-serif; --ts-font-brand: "Lato", "Poppins", "Helvetica Neue", Arial, sans-serif; --ts-font-mono: "Roboto Mono", "Menlo", Consolas, monospace; /* ── Type scale (semantic) ───────────────────────────────── * Display = Poppins SemiBold | Body = Roboto Regular/Medium * Sizes lifted directly from Figma usage frequencies. */ --ts-h1-size: 40px; --ts-h1-lh: 48px; --ts-h1-weight: 600; --ts-h2-size: 32px; --ts-h2-lh: 40px; --ts-h2-weight: 600; --ts-h3-size: 28px; --ts-h3-lh: 36px; --ts-h3-weight: 600; --ts-h4-size: 22px; --ts-h4-lh: 30px; --ts-h4-weight: 600; --ts-h5-size: 18px; --ts-h5-lh: 26px; --ts-h5-weight: 600; --ts-h6-size: 16px; --ts-h6-lh: 22px; --ts-h6-weight: 600; --ts-p1-size: 16px; --ts-p1-lh: 24px; /* Paragraph 1 — main body */ --ts-p2-size: 14px; --ts-p2-lh: 20px; /* Paragraph 2 — default UI */ --ts-p3-size: 12px; --ts-p3-lh: 16px; /* Paragraph 3 — meta / chips */ --ts-p4-size: 10px; --ts-p4-lh: 14px; /* Captions / labels */ /* Score numeral (used on gauges & in tag cards) */ --ts-score-size: 32px; --ts-score-weight: 700; --ts-score-big-size: 64px; /* ── Spacing ───────────────────────────────────────────── */ --ts-space-1: 4px; --ts-space-2: 8px; --ts-space-3: 12px; --ts-space-4: 16px; --ts-space-5: 20px; --ts-space-6: 24px; --ts-space-7: 32px; --ts-space-8: 40px; --ts-space-9: 56px; --ts-space-10: 72px; --ts-space-12: 96px; /* ── Radii ─────────────────────────────────────────────── */ --ts-radius-xs: 4px; --ts-radius-sm: 8px; /* Cards, inputs */ --ts-radius-md: 12px; /* Wide cards */ --ts-radius-lg: 16px; /* Hero panels */ --ts-radius-pill: 24px; /* Buttons, chips, tags */ --ts-radius-full: 999px; /* Avatars, status dots */ /* ── Shadow ────────────────────────────────────────────── */ --ts-shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.04); --ts-shadow-md: 0 4px 12px rgba(16, 16, 20, 0.06), 0 1px 2px rgba(16, 16, 20, 0.04); --ts-shadow-lg: 0 12px 32px rgba(16, 16, 20, 0.10), 0 2px 6px rgba(16, 16, 20, 0.05); --ts-shadow-ring: 0 0 0 4px rgba(5, 68, 253, 0.18); /* focus ring */ /* ── Easing & duration ─────────────────────────────────── */ --ts-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ts-dur-1: 120ms; --ts-dur-2: 200ms; --ts-dur-3: 320ms; } /* ───── Type primitives ─────────────────────────────────── */ .ts-h1, h1.ts { font-family: var(--ts-font-display); font-weight: var(--ts-h1-weight); font-size: var(--ts-h1-size); line-height: var(--ts-h1-lh); letter-spacing: -0.4px; color: var(--ts-fg-1); } .ts-h2, h2.ts { font-family: var(--ts-font-display); font-weight: var(--ts-h2-weight); font-size: var(--ts-h2-size); line-height: var(--ts-h2-lh); letter-spacing: -0.2px; color: var(--ts-fg-1); } .ts-h3, h3.ts { font-family: var(--ts-font-display); font-weight: var(--ts-h3-weight); font-size: var(--ts-h3-size); line-height: var(--ts-h3-lh); color: var(--ts-fg-1); } .ts-h4, h4.ts { font-family: var(--ts-font-display); font-weight: var(--ts-h4-weight); font-size: var(--ts-h4-size); line-height: var(--ts-h4-lh); color: var(--ts-fg-1); } .ts-h5, h5.ts { font-family: var(--ts-font-display); font-weight: var(--ts-h5-weight); font-size: var(--ts-h5-size); line-height: var(--ts-h5-lh); color: var(--ts-fg-1); } .ts-h6, h6.ts { font-family: var(--ts-font-display); font-weight: var(--ts-h6-weight); font-size: var(--ts-h6-size); line-height: var(--ts-h6-lh); color: var(--ts-fg-1); } .ts-p1 { font: 400 var(--ts-p1-size)/var(--ts-p1-lh) var(--ts-font-body); color: var(--ts-fg-2); } .ts-p2 { font: 400 var(--ts-p2-size)/var(--ts-p2-lh) var(--ts-font-body); color: var(--ts-fg-2); } .ts-p3 { font: 400 var(--ts-p3-size)/var(--ts-p3-lh) var(--ts-font-body); color: var(--ts-fg-4); } .ts-p4 { font: 400 var(--ts-p4-size)/var(--ts-p4-lh) var(--ts-font-body); color: var(--ts-fg-5); } .ts-label-strong { font: 500 var(--ts-p2-size)/var(--ts-p2-lh) var(--ts-font-body); color: var(--ts-fg-1); } .ts-meta { font: 400 var(--ts-p3-size)/var(--ts-p3-lh) var(--ts-font-body); color: var(--ts-fg-5); } .ts-mono { font-family: var(--ts-font-mono); font-feature-settings: "tnum"; }