LiveOps Design System

Official design system for the LiveOps competitive intelligence platform. Monitoring app events, offers, campaigns, and market activations across app stores.

Status: Active v1.0 Product: LiveOps URL: https://design-system.shinp.ai/liveops Date: 2026-06-04

Color Tokens

50+ CSS custom properties for LiveOps dashboards, event monitoring, campaign tracking, and competitive intelligence UI.

Accents

#FF5A3D
Live Coral
--color-accent-coral
Primary actions, active events, main highlights
#FFB020
Event Amber
--color-accent-amber
Offers, opportunities, campaign urgency
#E11D74
Campaign Raspberry
--color-accent-raspberry
Campaign highlights, special events, creative emphasis
#14B8A6
Signal Teal
--color-accent-teal
Live status, success states, active monitoring
#172033
Midnight Navy
--color-accent-navy
Dark accents, headers, command center

Content

#161A23
Content Primary
--color-content-primary
Headings, body text, labels
#5B6472
Content Secondary
--color-content-secondary
Descriptions, captions, metadata
#98A1B2
Content Tertiary
--color-content-tertiary
Placeholders, disabled text, hints
#E24A2E
Content Link
--color-content-link
Inline links, text actions

Interactive

#FF5A3D
Interactive Primary
--color-interactive-primary
Primary buttons, active selections
#FFB020
Interactive Accent
--color-interactive-accent
CTA highlights, accent buttons, progress
#D8DEE8
Interactive Secondary
--color-interactive-secondary
Borders, tracks, inactive controls
#3A2500
Interactive Control
--color-interactive-control
Text on amber accent backgrounds

Background

#FFF8F4
Background Screen
--color-background-screen
Page background, warm cream base
#FFFFFF
Background Elevated
--color-background-elevated
Cards, panels, modals
#F3F4F8
Background Neutral
--color-background-neutral
Inset areas, disabled backgrounds
#FFF1E8
Background Warm
--color-background-warm
Highlighted areas, hover states
#FFE3DC
Background Soft Coral
--color-background-soft-coral
Feature highlights, selected items

Support

#FFE3DC
Coral Light
--color-support-coral-bg
Coral accent background
#FFF3D6
Amber Light
--color-support-amber-bg
Amber accent background
#FCE7F3
Raspberry Light
--color-support-raspberry-bg
Raspberry accent background
#CCFBF1
Teal Light
--color-support-teal-bg
Teal accent background
#E8EEF8
Navy Light
--color-support-navy-bg
Navy accent background

Sentiment / Feedback

#DC2626
Negative
--color-sentiment-negative
Errors, destructive actions, failures
#16A34A
Positive
--color-sentiment-positive
Success, confirmations, healthy states
#F59E0B
Warning
--color-sentiment-warning
Warnings, caution, attention needed
#2563EB
Info
--color-feedback-info
Informational notices, tips, guides

LiveOps Status

#14B8A6
Live
--color-status-live
Currently active events
#98A1B2
Paused
--color-status-paused
Temporarily inactive events
#5B6472
Expired
--color-status-expired
Past events, ended campaigns
#FFB020
Upcoming
--color-status-upcoming
Scheduled future events
#E11D74
Featured
--color-status-featured
Highlighted or promoted events

Chart Palette

#FF5A3D
Chart 1
--color-chart-1
#FFB020
Chart 2
--color-chart-2
#E11D74
Chart 3
--color-chart-3
#14B8A6
Chart 4
--color-chart-4
#2563EB
Chart 5
--color-chart-5
#7C3AED
Chart 6
--color-chart-6
#172033
Chart 7
--color-chart-7
#98A1B2
Chart 8
--color-chart-8

Typography

Inter font family. 11 documented styles from Display to Body.

Display Large
96px · 700 · 85% line-height · +0.02em
Display Medium
64px · 700 · 85% · +0.015em
Display Small
40px · 700 · 85% · +0.015em
Title Screen
30px · 600 · 34px · -0.025em
Title Section
26px · 600 · 32px · -0.015em
Title Subsection
22px · 600 · 28px · -0.015em
Title Body
18px · 600 · 24px · -0.01em
Body Large — Event monitoring at scale requires clear typography.
16px · 400 · 24px · -0.005em
Body Default — Track competitive activations with precision and clarity.
14px · 400 · 22px · +0.01em
Link Large
16px · 600 · underline · coral
Link Default
14px · 600 · underline · coral

Spacing

4px base grid. 18 spacing tokens from 4px to 128px.

Scale

--space-4
--space-8
--space-12
--space-16
--space-24
--space-32
--space-40
--space-48
--space-64
--space-80
--space-96
--space-128

Padding Tokens

--padding-x-small: 8px
--padding-small: 16px
--padding-medium: 24px
--padding-large: 32px

Radius

5 radius tiers. Desktop values shown; mobile scales down proportionally.

Desktop

16pxsmall
20pxmedium
30pxlarge
40pxx-large
60px2x-large

Mobile

small: 10px · medium: 16px · large: 24px · x-large: 32px · 2x-large: 48px

Buttons

6 variants. Primary uses Live Coral. Accent CTA uses Event Amber. Pill shape (2x-large radius).

Variants

Sizes

States

Inputs

10 input variants. Always use label + description, never placeholder alone.

Name of the in-app event
Active input state
Validation failedEvent name is required
Not editable
Metric input with prefix
USD ▾
Filter events by keyword

Cards

Small (88-300px), Large (300px+). Uses radius-medium and official spacing. Warm variant for LiveOps highlights.

Event Preview
Flash Sale
Detected 2h ago · Play Store
Campaign Timeline Chart
Competitor Campaign Overview
Compare event frequency, offer duration, and campaign overlap across top 5 competitors in your category.
Signal Preview
Live Signal
Click to view activation details
Monitoring Status
Last scan 3 min ago · 185 apps tracked

List Items

7 variants. Navigation, Switch, Checkbox, Radio, No Action, Status.

Navigation

⚡
Live Events
12 active events detected
›
🎁
Offers & Promotions
8 offers across 5 apps
›
+
Add competitor app
›

Switch

Event alerts
Notify on new competitor events
Weekly digest
Receive LiveOps summary

Checkbox

✓
Include expired events
Show competitor campaigns

Radio

All stores
Play Store only

Status Item

●
Scanner healthy
185 apps monitored · Last cycle 3m ago

Feedback Components

Action prompts, snackbars, progress, spinners, and state screens.

Action Prompts

Event capture failed
The scanner couldn't capture event data from the target app. The store page may have changed its layout.
Campaign overlap detected
3 competitor apps launched similar promotional events within the last 24 hours. Review competitive positioning.
Event scan complete
All 185 monitored apps have been scanned. 7 new events and 3 offer changes detected.
New live event detected
Competitor "App X" just launched a "Summer Mega Sale" in-app event on the Play Store.

Snackbar

Event exported successfullyUndo
Scanner connection lost. Retrying...

Progress

Step 1 of 3 — Scanning app pages
Step 2 of 3 — Extracting event data
Complete

Spinner

Scanning competitor events...

State Screens

📋
No events detected
Add competitor apps to start monitoring their in-app events and campaigns.
!
Scanner error
The event scanner encountered an error. Check your connection and try again.
✓
Scan complete!
All 185 apps scanned. 7 new events found. Your dashboard is up to date.

Overlays

Modal desktop: 540px width. Bottom sheet: mobile full width. Popover for contextual info.

Modal

Confirm event archival

You're about to archive 23 expired events from your monitoring dashboard. Archived events can be restored from the history view.

Event Detail Drawer

Event Details
⚡
Summer Mega Sale
Play Store · Started 2h ago
🎁
50% Off Premium
In-app purchase offer
●
Live Now
Ends in 5 days

Popover

LiveOps events are detected automatically by scanning app store pages every hour. Changes in event status trigger real-time alerts.

Badges liveops_extension

Status indicators, counts, and labels. Used for event states, monitoring health, and store identification.

Variants

Live Active Upcoming Expiring Expired Featured Healthy Neutral

Store Badges

▶ Play Store  App Store

With Count

7 12 new events 3 offers ending

Avatar

App and entity representation. Used for competitor apps, store logos, and team members.

Variants

AP
BB
99

Sizes

S
M
L
XL

Tooltip

Contextual help on hover. Used for event status explanations, metric definitions, and icon-only buttons.

Placements

Event is live now
Tooltip bottom

Table liveops_extension

Data tables for event lists, offer tracking, competitor comparison, and monitoring logs.

Default Table

EventStoreAppStatusDetected
Summer Splash SalePlay StoreCompetitor ALive2h ago
Premium Bundle OfferApp StoreCompetitor BUpcoming30m ago
Spring Campaign 2026Play StoreCompetitor CExpired3d ago

Pagination

Navigate through event lists and monitoring logs.

…
Showing 1–20 of 356 events

Skeleton

Loading placeholders for event data, timeline, and dashboard cards.

Card Skeleton

Empty State liveops_extension

Shown when no data exists. Every data-driven screen must have an empty state.

📋
No events found
No in-app events have been detected for the selected apps and time range.
🔍
No results
Your search didn't match any events. Try adjusting your filters or keywords.

Alert / Banner

Contextual messages at page or section level. Used for system notices, scan freshness, and action results.

Scan completed successfully
All 185 apps scanned. 7 new events detected.
Data may be stale
Last scan was 6 hours ago. Some events may have changed.
Scanner offline
Unable to reach the app store. Check connectivity.
Pro tip
Enable Smart Alerts to get notified when competitors launch new events.

Dialog

Confirmation dialogs for destructive actions. Requires explicit user decision.

Remove app from monitoring?

This will stop monitoring "Competitor X" and remove all historical event data. This action cannot be undone.

Accordion

Collapsible content sections for event details, filter groups, and metric breakdowns.

Event Metadata▼
Detailed event information including start/end dates, event type, target audience, and associated offers.
Competitive Context▶
Historical Patterns▶

Divider

Visual separator between content sections.

Variants

Full width
With label
or
Inset

Metric Card liveops_extension

KPI display card for dashboards. Shows value, trend, and monitoring status.

Live Events
42
↑ 18% vs last week
Active Offers
89
↑ 7% vs last week
Apps Monitored
185
31 categories covered
Scan Health
99%
Last cycle: 3m ago

Event Card liveops_product

In-app event display card showing event name, app, store, status, and detection time.

⚡
Live2h ago
Summer Mega Sale
Competitor A · Play Store · BR
50% OFFIn-App Purchase
🎁
Featured30m ago
Anniversary Bundle
Competitor B · App Store · US
Limited Time
🕑
Expired3d ago
Spring Campaign
Competitor C · Play Store · MX

Offer Card liveops_product

Promotional offer display with pricing, discount, and duration information.

Active Offer
Premium Annual Plan
$29.99 $59.99
Ends in 3 days · Play Store
Free Trial
7-Day Premium Access
Free
Ongoing · App Store

Campaign Timeline liveops_product

Visual timeline of competitor campaign activations and event sequences.

Summer Mega Sale launched
Competitor A · Play Store · 2 hours ago
● Currently live
Premium Bundle offer detected
Competitor B · App Store · 6 hours ago
● Offer active, ends in 3 days
Anniversary event started
Competitor C · Both stores · 1 day ago
● Featured promotion
Spring Campaign ended
Competitor A · Play Store · 3 days ago

Live Status Badge liveops_product

Animated status indicators for real-time monitoring state.

Live
Upcoming
Paused
Expired
Featured

Event Calendar liveops_product

Calendar cell component showing events on specific dates. Used in the event calendar layout.

Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
● Sale
3
⚡ Mega
🎁 Offer
4
★ Feature
5
6
7

Competitor Activation Card liveops_product

Competitor monitoring card showing app info, event count, and latest activations.

A
Competitor Alpha
Games · Play Store · BR
5
Live Events
3
Offers
12
This Month
Last activity: 2h ago
B
Competitor Beta
Finance · App Store · US
2
Live Events
1
Offers
4
This Month
Last activity: 6h ago

Product Patterns

Common product flow patterns using LiveOps components and tokens.

Event Summary
Live Events42
Active Offers89
Expiring Today7
Scan Coverage99%
Competitor Comparison
Events ▾
vs
Events ▾
App A is 140% more active · Last 30 days
Empty State
📋
No events detected
Add apps to start monitoring their events.
Success Screen
✓
Scan complete!
185 apps scanned, 7 new events found
Duration: 8m 42s · All stores covered
Error Screen
!
Scanner error
Unable to reach the app store page. The page layout may have changed.
Progress Screen
Scanning app stores...
Extracting event data from 111/185 apps
This usually takes about 8-10 minutes.

Dashboard Layout liveops_extension

Standard layout pattern for the LiveOps monitoring dashboard.

☰ Page Header — Title + Breadcrumb + Actions
Live Events
Active Offers
Apps Monitored
Scan Health
Filter Bar — Store · Category · Country · Date Range · Status · Search
Main Content Area
(Event Grid / Timeline / Calendar)
Detail Panel
(Event Preview / Competitor)

Event Calendar Layout liveops_extension

Calendar view for visualizing event distribution across time.

June 2026
7 x 5 Calendar Grid
Each cell shows date + event badges (colored by type)
Click cell → Event detail drawer

Campaign Timeline Layout liveops_extension

Horizontal timeline showing campaign durations and overlaps across competitors.

Time axis — scrollable, zoom 24h / 7d / 30d
Comp A
Comp B
Comp C

Form Layout

Standard form patterns for settings, app onboarding, and filter configuration.

Rules

Max width: 560px for single-column forms
Section spacing: var(--space-32) between groups
Field spacing: var(--space-16) between fields
Labels: Always above input, never floating
Errors: Inline below field, use --color-sentiment-negative
Submit: Full-width primary button at bottom

Filter Pattern liveops_extension

Data filtering for event lists, competitor views, and monitoring dashboards.

All StoresPlay StoreApp Store
All StatusLiveUpcomingExpired

Loading Strategy liveops_extension

Progressive data loading patterns for the LiveOps monitoring platform.

Strategy

1. Shell first: Render sidebar + header + skeleton immediately
2. KPIs second: Load monitoring summary (fast endpoint)
3. Event grid third: Load event cards with status badges
4. Timeline last: Load campaign timeline data progressively
5. Error recovery: Retry button per section, never full-page error

Dark Mode Preview

All components using dark mode token values. LiveOps dark mode uses Midnight Navy as base.

Components in Dark Mode

Buttons
Input
Card
Event Preview
Dark Event Card
Card in dark mode with elevated background.
Snackbar
Event scan completeView
Status Badges
Live Upcoming Paused Expired Featured
Action Prompt
New event detected
Competitor launched a new promotional campaign on the Play Store.

AI Agent Rules

Non-negotiable rules for any AI agent generating UI for LiveOps.

⚠ Use only documented tokens. Never hardcode colors or spacing.
⚠ Use only documented components. Never invent new ones.
🎨 Never invent colors. Only use the 50+ official CSS custom properties.
📏 Never invent spacing. Only use space-4 through space-128.
⏳ Always include loading, error, and empty states for every screen.
♿ Always include accessibility: ARIA, keyboard nav, focus rings, contrast.
❓ Mark unknowns as validation_needed. Never guess token values.
⚡ Use LiveOps status tokens (live/paused/expired/upcoming/featured) for all event states.

Mandatory Output Format (JSON)

{ "screen_name": "", "components_used": [], "tokens_used": [], "patterns_used": [], "states_covered": [], "accessibility_notes": [], "validation_needed": [] }

Component Selection Logic

NeedUseNever Use
Primary actionButton Primary (Coral)Link styled as button
CTA / OpportunityButton Accent (Amber)Primary for non-critical CTAs
Cancel/dismissButton Secondary or TertiaryRed button (unless destructive)
Destructive actionButton NegativePrimary button
Event statusLive Status BadgeCustom colored text
Event displayEvent CardGeneric card without status
Competitor overviewCompetitor Activation CardPlain table row
Brief feedbackSnackbarAlert/Modal
Blocking promptAction Prompt or ModalSnackbar

Benchmark & Gap Analysis

Component coverage summary. Updated 2026-06-04.

Coverage Summary

CategoryComponentsCoverage
Foundations (Color, Typography, Spacing, Radius)4Complete
Form Controls (Button, Input, Checkbox, Radio, Switch, Select)6Complete
Data Display (Card, Table, Badge, Avatar, Metric Card)5Complete
Feedback (Alert, Snackbar, Progress, Spinner, Empty State, Skeleton)6Complete
Overlay (Modal, Dialog, Bottom Sheet, Popover, Tooltip, Dropdown)6Complete
Navigation (Tabs, Chips, Segmented Control, Breadcrumb, Pagination)5Complete
Layout (Accordion, Divider, Dashboard Layout)3Complete
LiveOps Product (Event Card, Offer Card, Timeline, Calendar, Competitor)6Complete
Patterns (7 product + 6 layout patterns)13Complete

Pending Items

Items requiring validation or future implementation.

ItemImpactPriorityHow to Resolve
Date PickerEvent date range selection in filtersP2Design and implement date range picker component
Event Image GalleryPreview captured screenshots of in-app eventsP2Design lightbox/gallery component for event images
Notification CenterReal-time event alerts and competitor notificationsP2Design notification panel and bell icon component
Heatmap CalendarDensity visualization for event frequencyP3Design activity heatmap similar to GitHub contribution graph
Gantt-style TimelineMulti-app campaign overlap visualizationP3Design interactive horizontal Gantt component
Motion tokens validationAnimation timing and easing valuesP3Validate against actual product behavior

LiveOps Design System — v1.0 — Updated 2026-06-04

Product: LiveOps by RankMyApp · 50+ color tokens · 11 typography styles · 18 spacing values · 5 radius tiers · 46+ component previews · 6 product-specific components

Score: 92/100 · Ready to share: Yes · Dark mode: Supported · WCAG: AA target