/* ============================================================================ * RALLY — Design Tokens (focused set) * ---------------------------------------------------------------------------- * A trimmed, opinionated token layer distilled from the shipped Rally app * (project: spaid/) — NOT the full Base Web system. It keeps only what Rally * actually renders: light mode, the neutral ink ramp, a sparing Safety-Blue * accent, fintech semantics, and the two brand signatures (SuperCash gold, * Streak warm). * * Lineage: Rally is built on the superpe token layer, which forks Uber's Base * design language. The "--sp-" prefix is preserved so the Rally component kit * (components/) and the shipped screens keep working unchanged. * * Drop-in: + * Self-contained: @font-face points at ./fonts/ in this folder. * ========================================================================== */ /* ============================================================================ * @font-face — UberMove (proprietary; internal use only) * UberMoveText is aliased onto the same files (Uber ships no separate Text * cut) so body/label tokens resolve. UberMoveMono for amounts, UPI IDs, UTRs. * ========================================================================== */ @font-face { font-family:'UberMove'; src:url('fonts/UberMove-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap } @font-face { font-family:'UberMove'; src:url('fonts/UberMove-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap } @font-face { font-family:'UberMove'; src:url('fonts/UberMove-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap } @font-face { font-family:'UberMove'; src:url('fonts/UberMove-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap } @font-face { font-family:'UberMoveText'; src:url('fonts/UberMove-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap } @font-face { font-family:'UberMoveText'; src:url('fonts/UberMove-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap } @font-face { font-family:'UberMoveText'; src:url('fonts/UberMove-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap } @font-face { font-family:'UberMoveMono'; src:url('fonts/UberMoveMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap } @font-face { font-family:'UberMoveMono'; src:url('fonts/UberMoveMono-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap } :root { /* ========================================================================== * FONT STACKS * primary = body + labels (UberMoveText) * secondary = headings, display, amounts (UberMove) * mono = amounts, UPI IDs, UTRs, codes (UberMoveMono, tabular) * ======================================================================== */ --sp-font-primary: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; --sp-font-secondary: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; --sp-font-mono: UberMoveMono, "SF Mono", Monaco, "Cascadia Code", monospace; /* ========================================================================== * NEUTRAL RAMP — the workhorse. True black + white anchor the system. * ======================================================================== */ --sp-white:#FFFFFF; --sp-black:#000000; --sp-gray-50:#F3F3F3; /* app canvas tint */ --sp-gray-100:#E8E8E8; /* phone canvas / page bg */ --sp-gray-200:#DDDDDD; /* hairline / opaque border */ --sp-gray-300:#C6C6C6; /* disabled border */ --sp-gray-400:#A6A6A6; --sp-gray-500:#868686; /* tertiary / meta */ --sp-gray-600:#727272; --sp-gray-700:#5E5E5E; /* secondary ink (token layer)*/ --sp-gray-800:#4B4B4B; --sp-gray-900:#282828; /* near-black surfaces */ --sp-gray-950:#141414; /* ========================================================================== * SAFETY BLUE — the only chromatic accent in product chrome. Used sparingly: * links, selection, focus, a few accent CTAs. Never as a brand wash. * ======================================================================== */ --sp-blue-50:#EFF4FE; --sp-blue-100:#D6E3FB; --sp-blue-500:#276EF1; /* hero */ --sp-blue-600:#1E54B7; --sp-blue-deep:#0A2B69; /* ========================================================================== * FINTECH SEMANTICS — success (credit/received), warning (pending), * error (debit/failed), promo (rewards). Subtle bg + saturated ink pairs. * ======================================================================== */ --sp-green-50:#E6F2ED; --sp-green-500:#05944F; --sp-green-shipped:#0F7A3A; --sp-amber-50:#FFF2D9; --sp-amber-500:#B97502; --sp-red-50:#FFEFEB; --sp-red-500:#DE1135; --sp-red-600:#B8092A; --sp-red-deep:#7A0B1F; --sp-purple-50:#F3ECFA; --sp-purple-500:#7356BF; /* ========================================================================== * BRAND SIGNATURES — Rally's two proprietary accents. * SuperCash gold .... the wallet currency. Coin, balances, expiring bonus. * Streak warm ....... the pay-streak flame. Hero gradients only. * These are NOT part of Base Web — they are what makes a screen read "Rally". * ======================================================================== */ --sp-gold:#F2A516; /* SuperCash gold (primary) */ --sp-gold-hi:#FFD96B; /* highlight / gradient top */ --sp-gold-bg:#FFF6E0; /* subtle gold surface */ --sp-gold-halo:#FFE2A0; /* halo gradient end */ --sp-gold-ink:#5A3A01; /* legible text on gold */ --sp-streak-warm:#FF7A00; /* streak flame mid */ --sp-streak-hot:#E84E1B; /* streak flame base */ --sp-streak-light:#FFB061; /* streak flame top */ /* ========================================================================== * SPACING — 4px base * ======================================================================== */ --sp-0:0; --sp-100:2px; --sp-200:4px; --sp-300:6px; --sp-400:8px; --sp-500:12px; --sp-550:14px; --sp-600:16px; --sp-700:20px; --sp-800:24px; --sp-900:32px; --sp-1000:40px; --sp-1100:48px; --sp-1200:56px; --sp-1400:72px; --sp-1600:96px; /* ========================================================================== * RADII — per-component (the signature shape rule: interactive rounds, * surfaces stay square — EXCEPT Rally's soft white containers at 18–22). * ======================================================================== */ --sp-r-card:0; /* receipts, flush surfaces — square */ --sp-r-container:18px; /* Rally soft white container */ --sp-r-container-lg:22px; /* large hero container */ --sp-r-tile:16px; /* service tiles, preview tiles */ --sp-r-input:8px; /* inputs, buttons, popovers */ --sp-r-button-mini:4px; /* mini buttons */ --sp-r-pill:999px; /* tags, chips, balance pills */ --sp-r-check:2px; /* checkboxes */ --sp-r-avatar:50%; /* avatars */ --sp-r-bottom-sheet:20px; /* mobile sheet top corners */ /* ========================================================================== * ELEVATION — soft, low-opacity. Plus Rally's named purpose shadows. * ======================================================================== */ --sp-shadow-100:0 1px 2px rgba(0,0,0,.08); --sp-shadow-200:0 2px 4px rgba(0,0,0,.10); --sp-shadow-300:0 4px 8px rgba(0,0,0,.12); --sp-shadow-400:0 8px 16px rgba(0,0,0,.14); --sp-shadow-500:0 12px 24px rgba(0,0,0,.16); --sp-shadow-600:0 20px 40px rgba(0,0,0,.20); --sp-shadow-soft:0 1px 2px rgba(0,0,0,.04); /* balance chip */ --sp-shadow-card:0 4px 16px rgba(0,0,0,.06); /* floating card */ --sp-shadow-sheet:0 -8px 32px rgba(0,0,0,.15); /* bottom sheet */ --sp-shadow-nav:0 6px 24px rgba(0,0,0,.10); /* nav pill */ --sp-shadow-fab:0 8px 24px rgba(0,0,0,.25); /* FAB */ /* ========================================================================== * MOTION — smooth, no bounce. "elegant" is the Rally signature curve. * ======================================================================== */ --sp-ease-elegant:cubic-bezier(.16,.84,.44,1); /* default for app motion */ --sp-ease-decelerate:cubic-bezier(0,0,.2,1); /* entering */ --sp-ease-accelerate:cubic-bezier(.4,0,1,1); /* leaving */ --sp-ease-standard:cubic-bezier(.83,0,.17,1); /* symmetric */ --sp-dur-100:100ms; --sp-dur-200:200ms; --sp-dur-300:300ms; --sp-dur-400:400ms; --sp-dur-500:500ms; --sp-dur-sheet:350ms; /* ========================================================================== * TYPE SCALE * ======================================================================== */ --sp-display-sm-size:36px; --sp-display-sm-lh:44px; --sp-display-md-size:48px; --sp-display-md-lh:56px; --sp-display-lg-size:64px; --sp-display-lg-lh:72px; --sp-heading-xs-size:16px; --sp-heading-xs-lh:20px; --sp-heading-sm-size:20px; --sp-heading-sm-lh:24px; --sp-heading-md-size:24px; --sp-heading-md-lh:32px; --sp-heading-lg-size:28px; --sp-heading-lg-lh:36px; --sp-heading-xl-size:32px; --sp-heading-xl-lh:40px; --sp-para-sm-size:12px; --sp-para-sm-lh:16px; --sp-para-md-size:14px; --sp-para-md-lh:20px; --sp-para-lg-size:16px; --sp-para-lg-lh:24px; --sp-label-xs-size:11px; --sp-label-xs-lh:16px; --sp-label-sm-size:12px; --sp-label-sm-lh:16px; --sp-label-md-size:14px; --sp-label-md-lh:16px; --sp-label-lg-size:16px; --sp-label-lg-lh:20px; --sp-mono-sm-size:12px; --sp-mono-sm-lh:16px; --sp-mono-md-size:14px; --sp-mono-md-lh:20px; --sp-mono-lg-size:16px; --sp-mono-lg-lh:24px; } /* ============================================================================ * LIGHT THEME — the only shipped theme. * NOTE on ink: the abstract token layer defines true-black (#000) ink, but * every shipped v3/v4 Rally screen renders a *softened* ink set. We make the * shipped values canonical here, because that is what Rally actually looks * like. (#101010 ink / #5A5A58 secondary / #0F7A3A success.) * ========================================================================== */ .sp-light, :root { --sp-bg-primary:#FFFFFF; --sp-bg-secondary:#F7F7F7; --sp-bg-tertiary:#EFEFEF; --sp-bg-quiet:#F4F4F2; /* quiet inset surface */ --sp-bg-canvas:#E8E8E8; /* the phone canvas behind screens */ --sp-bg-inverted:#000000; --sp-bg-accent:#276EF1; --sp-bg-accent-subtle:#EFF4FE; --sp-bg-success:#05944F; --sp-bg-success-subtle:#E6F2ED; --sp-bg-warning:#B97502; --sp-bg-warning-subtle:#FFF2D9; --sp-bg-error:#DE1135; --sp-bg-error-subtle:#FFEFEB; --sp-bg-promo-subtle:#F3ECFA; --sp-bg-gold-subtle:#FFF6E0; --sp-content-primary:#101010; /* shipped softened ink */ --sp-content-secondary:#5A5A58; --sp-content-tertiary:#9A9A98; /* meta */ --sp-content-disabled:#C6C6C6; --sp-content-inverted-primary:#FFFFFF; --sp-content-inverted-secondary:#DDDDDD; --sp-content-accent:#276EF1; --sp-content-success:#0F7A3A; /* credit, received */ --sp-content-warning:#B97502; /* pending */ --sp-content-error:#DE1135; /* debit, failed */ --sp-content-promo:#7356BF; --sp-content-gold:#B97502; /* SuperCash value text */ --sp-border-opaque:#DDDDDD; --sp-border-hairline:#CFCFCC; --sp-border-separator:#F2F2F0; --sp-border-transparent:rgba(0,0,0,.08); --sp-border-selected:#101010; --sp-border-accent:#276EF1; --sp-border-error:#DE1135; --sp-state-hover:rgba(0,0,0,.04); --sp-state-pressed:rgba(0,0,0,.08); --sp-state-selected:rgba(39,110,241,.08); --sp-overlay:rgba(0,0,0,.5); --sp-scrim:rgba(0,0,0,.42); /* sheet backdrop */ color-scheme: light; } /* ============================================================================ * BASE RESET + TYPOGRAPHY HELPERS * ========================================================================== */ html, body { font-family: var(--sp-font-primary); color: var(--sp-content-primary); background: var(--sp-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; } .sp-display-lg { font: 700 var(--sp-display-lg-size)/var(--sp-display-lg-lh) var(--sp-font-secondary); letter-spacing: -.02em } .sp-display-md { font: 700 var(--sp-display-md-size)/var(--sp-display-md-lh) var(--sp-font-secondary); letter-spacing: -.02em } .sp-display-sm { font: 700 var(--sp-display-sm-size)/var(--sp-display-sm-lh) var(--sp-font-secondary); letter-spacing: -.01em } .sp-heading-xl { font: 700 var(--sp-heading-xl-size)/var(--sp-heading-xl-lh) var(--sp-font-secondary); letter-spacing: -.01em } .sp-heading-lg { font: 700 var(--sp-heading-lg-size)/var(--sp-heading-lg-lh) var(--sp-font-secondary); letter-spacing: -.015em } .sp-heading-md { font: 700 var(--sp-heading-md-size)/var(--sp-heading-md-lh) var(--sp-font-secondary); letter-spacing: -.015em } .sp-heading-sm { font: 700 var(--sp-heading-sm-size)/var(--sp-heading-sm-lh) var(--sp-font-secondary); letter-spacing: -.01em } .sp-heading-xs { font: 700 var(--sp-heading-xs-size)/var(--sp-heading-xs-lh) var(--sp-font-secondary); letter-spacing: -.01em } .sp-para-lg { font: 400 var(--sp-para-lg-size)/var(--sp-para-lg-lh) var(--sp-font-primary) } .sp-para-md { font: 400 var(--sp-para-md-size)/var(--sp-para-md-lh) var(--sp-font-primary) } .sp-para-sm { font: 400 var(--sp-para-sm-size)/var(--sp-para-sm-lh) var(--sp-font-primary); color: var(--sp-content-secondary) } .sp-label-lg { font: 500 var(--sp-label-lg-size)/var(--sp-label-lg-lh) var(--sp-font-primary) } .sp-label-md { font: 500 var(--sp-label-md-size)/var(--sp-label-md-lh) var(--sp-font-primary) } .sp-label-sm { font: 500 var(--sp-label-sm-size)/var(--sp-label-sm-lh) var(--sp-font-primary) } .sp-label-xs { font: 500 var(--sp-label-xs-size)/var(--sp-label-xs-lh) var(--sp-font-primary); letter-spacing: .04em; text-transform: uppercase; color: var(--sp-content-tertiary) } .sp-mono-lg { font: 500 var(--sp-mono-lg-size)/var(--sp-mono-lg-lh) var(--sp-font-mono); font-variant-numeric: tabular-nums } .sp-mono-md { font: 500 var(--sp-mono-md-size)/var(--sp-mono-md-lh) var(--sp-font-mono); font-variant-numeric: tabular-nums } .sp-mono-sm { font: 500 var(--sp-mono-sm-size)/var(--sp-mono-sm-lh) var(--sp-font-mono); font-variant-numeric: tabular-nums } /* ============================================================================ * AMOUNT TREATMENT — the signature money pattern. * Currency symbol smaller + baselined; paise de-emphasized; always tabular. * ========================================================================== */ .sp-amount { font: 700 var(--sp-display-md-size)/var(--sp-display-md-lh) var(--sp-font-secondary); letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 2px; color: var(--sp-content-primary); } .sp-amount .sym { font-size: .58em; font-weight: 500; opacity: .8; margin-right: 2px } .sp-amount .minor { font-size: .5em; font-weight: 500; opacity: .5 } .sp-amount.credit { color: var(--sp-content-success) } .sp-amount.failed { color: var(--sp-content-tertiary); text-decoration: line-through; text-decoration-color: var(--sp-content-error); text-decoration-thickness: 2px } .sp-upi { font: 500 var(--sp-mono-md-size)/var(--sp-mono-md-lh) var(--sp-font-mono); color: var(--sp-content-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } /* ============================================================================ * BUTTONS — 8px radius (mini 4); pill variant 999. Ink primary dominates. * ========================================================================== */ .sp-btn { appearance: none; font: 500 16px/20px var(--sp-font-primary); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; border-radius: var(--sp-r-input); transition: transform .08s var(--sp-ease-elegant), background-color .15s var(--sp-ease-elegant); white-space: nowrap; } .sp-btn:active { transform: scale(.98) } .sp-btn--primary { background: var(--sp-content-primary); color: var(--sp-content-inverted-primary) } .sp-btn--primary:hover { box-shadow: inset 999px 999px 0 rgba(255,255,255,.12) } .sp-btn--accent { background: var(--sp-bg-accent); color: #fff } .sp-btn--ghost { background: var(--sp-bg-secondary); color: var(--sp-content-primary) } .sp-btn--ghost:hover { box-shadow: inset 999px 999px 0 rgba(0,0,0,.04) } .sp-btn--block { width: 100%; padding: 18px 20px; font-weight: 600 } .sp-btn--pill { border-radius: var(--sp-r-pill) } .sp-btn--sm { padding: 10px 14px; font-size: 14px } .sp-btn[disabled]{ background: var(--sp-bg-tertiary); color: var(--sp-content-disabled); cursor: not-allowed; transform: none } /* ============================================================================ * INPUTS — 8px radius; focus thickens the border to 2px ink (no glow ring). * ========================================================================== */ .sp-input { width: 100%; padding: 14px 16px; border-radius: var(--sp-r-input); border: 1px solid var(--sp-border-opaque); background: var(--sp-bg-primary); color: var(--sp-content-primary); font: 400 16px/20px var(--sp-font-primary); outline: 0; box-sizing: border-box; transition: border-color .15s var(--sp-ease-elegant); } .sp-input:focus { border-color: var(--sp-content-primary); border-width: 2px; padding: 13px 15px } .sp-input::placeholder { color: var(--sp-content-tertiary) } .sp-input-label { font: 500 13px/16px var(--sp-font-primary); color: var(--sp-content-secondary); margin-bottom: 6px; display: block } .sp-input-hint { font: 400 12px/16px var(--sp-font-primary); color: var(--sp-content-tertiary); margin-top: 6px } /* ============================================================================ * CARDS, CONTAINERS & ROWS * ========================================================================== */ .sp-card { background: var(--sp-bg-primary); border: 1px solid var(--sp-border-opaque); border-radius: var(--sp-r-card) } .sp-card--float { box-shadow: var(--sp-shadow-card); border: 0; border-radius: var(--sp-r-container) } .sp-container { background: var(--sp-bg-primary); border-radius: var(--sp-r-container); box-shadow: var(--sp-shadow-soft) } .sp-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background-color .15s } .sp-row:active { background: var(--sp-state-pressed) } .sp-row-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sp-bg-secondary); display: flex; align-items: center; justify-content: center; font: 500 16px/1 var(--sp-font-secondary); color: var(--sp-content-primary); flex-shrink: 0 } .sp-row-main { flex: 1; min-width: 0 } .sp-row-title { font: 500 15px/20px var(--sp-font-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .sp-row-sub { font: 400 13px/16px var(--sp-font-primary); color: var(--sp-content-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .sp-row-amount{ font: 500 15px/20px var(--sp-font-mono); font-variant-numeric: tabular-nums; flex-shrink: 0 } /* ============================================================================ * CHIPS & TAGS — pill radius. Active chip = filled ink. * ========================================================================== */ .sp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--sp-r-pill); background: var(--sp-bg-secondary); color: var(--sp-content-primary); font: 500 13px/16px var(--sp-font-primary); cursor: pointer; transition: all .15s var(--sp-ease-elegant); border: 1px solid transparent; white-space: nowrap } .sp-chip--selected { background: var(--sp-content-primary); color: var(--sp-content-inverted-primary) } .sp-chip--outline { background: transparent; border-color: var(--sp-border-opaque) } .sp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--sp-r-pill); font: 500 11px/14px var(--sp-font-primary); letter-spacing: .02em } .sp-tag--success { background: var(--sp-bg-success-subtle); color: var(--sp-content-success) } .sp-tag--warn { background: var(--sp-bg-warning-subtle); color: var(--sp-content-warning) } .sp-tag--error { background: var(--sp-bg-error-subtle); color: var(--sp-content-error) } .sp-tag--promo { background: var(--sp-bg-promo-subtle); color: var(--sp-content-promo) } .sp-tag--accent { background: var(--sp-bg-accent-subtle); color: var(--sp-content-accent) } .sp-tag--gold { background: var(--sp-bg-gold-subtle); color: var(--sp-content-gold) } .sp-tag--neutral { background: var(--sp-bg-tertiary); color: var(--sp-content-primary) } /* ============================================================================ * DIVIDERS, SECTIONS, MOTION UTILS * ========================================================================== */ .sp-divider { height: 1px; background: var(--sp-border-opaque); width: 100% } .sp-divider--thick { height: 8px; background: var(--sp-bg-secondary) } .sp-section-label { font: 500 11px/14px var(--sp-font-primary); letter-spacing: .08em; text-transform: uppercase; color: var(--sp-content-tertiary); padding: 20px 16px 8px } @keyframes sp-fade-up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } } @keyframes sp-scale-in { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } } .sp-fade-up { animation: sp-fade-up .4s var(--sp-ease-elegant) both } .sp-scale-in { animation: sp-scale-in .3s var(--sp-ease-elegant) both } .sp-no-scrollbar { scrollbar-width: none } .sp-no-scrollbar::-webkit-scrollbar { display: none }