Market360 · Design System

UIKit

The Pharma 360 design system — tokens & components. Every swatch, scale and primitive below is pulled live from the same code that drives the /dols surface.

01

Color

Dark is the approved baseline — deep navy canvas, one cyan/teal primary family, a small categorical accent set. Light is its counterpart, same roles with darkened accents. Rule in both: at most four dominant accents per screen; one accent owns one entity (card / KPI). Flip the switch above — every swatch below repaints live.

Surfaces & background
Background#0A0B16--v2-bgPage canvas (de-blued navy)
Panel#10111B--v2-panelBase panel surface
Panel 2#161824--v2-panel-2Avatars, menus, raised fills
Panel 3#0D0E17--v2-panel-3Recessed panel
Raise#1A1C28--v2-raiseHover / elevated tiles
Inset#0B0C14--v2-insetSunken wells
Primary — cyan / teal
Teal#2DD4BF--v2-tealPrimary action · Mid Tier · active states
Teal bright#34E7CE--v2-teal-brightBrighter teal accent
Cyan#22D3EE--v2-cyanGradient partner · TikTok glyph
Categorical accents
Violet#A78BFA--v2-violetTertiary · Type tags · gradient end
Magenta#F25CB0--v2-magentaNotifications · AI suggest · hot metrics
Magenta soft#F472B6--v2-magenta-softSofter magenta tint
Orange#FB923C--v2-orangeMicro tier · warm accent · warnings
Amber#F5B544--v2-amberRising tier · mid-range engagement
Rose#FB7185--v2-roseDown deltas · low engagement
Blue#60A5FA--v2-blueElite tier (cool end of ramp)
Green#4ADE80--v2-greenType / Group meta chips
Text & lines
Text#EAEEF8--v2-textPrimary text
Text dim#93A0BC--v2-text-dimSecondary text · idle icons
Text mute#8993AD--v2-text-muteLabels (AA 5.5:1 on bg)
Text faint#7C869D--v2-text-faintTallies / hints (AA 4.6:1)
Linergba(150,170,210,.10)--v2-lineDefault 1px divider
Line strongrgba(160,180,220,.18)--v2-line-strongEmphasised border / hover
02

Spacing

Strict 8-px grid: 2 / 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 56 / 64. 12 is the one allowed half-step. 20 / 28 / 36 / 44 are banned.

2px
4px
8px
12px · half-step
16px
24px
32px
40px
48px
56px
64px
20px · banned
28px · banned
36px · banned
44px · banned
03

Type

One typeface — Inter — across the whole product; hierarchy comes from weight and size, not pairing. Round sizes only, floor 11px. Numbers carry tabular-nums.

36px · 700H1 / hero — DOL name, hero title
Digital opinion leaders, decoded
28px · 700Big numbers — KPI value, total audience
Digital opinion leaders, decoded
22px · 700Medium numbers · card name
Digital opinion leaders, decoded
17px · 600Sub-heading — section & block titles
Digital opinion leaders, decoded
14px · 400Body — bio, names, row values, buttons
Digital opinion leaders, decoded
12px · 400Secondary — handle, captions, deltas, counts
Digital opinion leaders, decoded
11px · 600Caps — eyebrows, KPI labels, tags
Digital opinion leaders, decoded
Weights in use
Aa
Regular · 400
Aa
Medium · 500
Aa
Semibold · 600
Aa
Bold · 700
04

Radius & Motion

Radii scale from 6px (chips) to fully round (pills, avatars). Motion is restrained: one standard easing, short durations, hover never brighter than active.

Radius
xs6px
sm9px
md13px
lg18px
xl22px
pillfull
Motion — easings & durations
Standard easecubic-bezier(0.16, 1, 0.3, 1)--v2-ease — every hover, accordion, layout transition
Hover / color200ms · easeicon-buttons, nav items, chips, opt rows
Card lift / layout300–350ms · var(--ease)card transform+border+shadow, filter-body grid-rows, hero fold
Drawer slide320ms · var(--ease)≤1024 filter drawer translateX + backdrop fade
AI-FAB pop550ms · cubic-bezier(0.2, 0.8, 0.2, 1)assistant tile entrance (the “chuk”)
AI-FAB stroke-draw5.2s linear · 0.6s delay · bothlooping ring/dot draw — delay+both kills first-cycle load jank
05

Components

The real primitives from components/v2, rendered with live mock data. Interaction states (hover / selected / active) are frozen statically so the whole set is visible at once.

Tag / chipThree roles — tier (size-ramp + graduated star), specialty (neutral sphere), type+group (green meta key/value). Pill, uppercase-ish, 11px.
Tier ramp — color + star graduate with audience size
MicroRisingMid TierMacroElite
Specialty (neutral) · Type + Group (meta)
Bariatric SurgeonEndocrinologistTypePublicGroupA
KPI tileAccent-outlined stat tile: icon + delta up top, big tabular numeral pinned to the bottom, dual corner glows.
+12
234
Total DOLs
+0.42%
3.84%
Avg Engagement
Filter chipChannel selector chip in the filter sidebar. Pill with leading glyph; default → hover → active (teal tint + glow).
Default · Active (.on)
Icon buttonProject standard — 40×40 button + 20px Tabler glyph, inline-flex centred. Idle / hover (white/8 band) / with notification dot.
Idle
Hover
Dot
Channel selectorRow of social tabs (icon-button standard). Active tab gets the channel-color underline + glow; click to switch (live).
Toolbar buttonsFilters toggle (with active-count badge), result count, and the split-menu sort (label opens key menu; trailing button flips direction).
234Influencers
Social iconsTabler brand glyphs, monochrome via currentColor. Channel brand colors live in channelMeta for active/underline accents.
Facebook
Instagram
X
LinkedIn
YouTube
TikTok
Threads
SparklineInline area+line+endpoint micro-chart for metric trends. Color-tinted gradient fill; stable gradient id seed (SSR-safe).
Track (bar in a lane)A full-width lane with a filled portion. The lane is what makes a column of bars readable — without it you can compare two values but not see how large either one is. 8px in rank rows, 16px where the fill prints its own value (11px type is the floor). Both come from the same mixin, so the DOL rank lists, the NPS aspect map and this catalogue cannot drift apart.
#diabetes67
#glp154
#weightloss37
16px, valued38%
Loader / spinner (active state)Looping 3-arc spinner (dots-pinwheel) — the active / loading indicator.
AI assistantThe bottom-right assistant button — dots orbit, then morph into the sparkles icon.
Empty stateNo-results panel — dashed frame, glyph mark, title + helper line, clear-filters CTA.

No influencers match

Try loosening a filter or clearing your search to widen the result set.

Cards — influencerThe main object — avatar+ring, identity, tier/specialty/meta tags, bio, live channel tabs, 4-metric strip with sparklines + deltas. Default and frozen-hover (lift + tier border + glow).
Leila Karimi

Leila Karimi

@leila.weighed · Abu Dhabi, UAE
ElitePatient AdvocateTypePublicGroupA

Bariatric patient advocate and community builder. Documents the surgical journey and rallies a highly engaged support network.

Followers
921K
Posts
1.8K
4%
Comments
74.3K
3%
Engagement
8.4%
Default
Akshay Jain

Akshay Jain

@drakshayjain · Surrey, BC, Canada
Mid TierEndocrinologistTypePublicGroupA

Triple board-certified endocrinologist. Covers GLP-1 therapeutics, metabolic medicine, and patient-friendly diabetes education.

Followers
42.8K
Posts
720
5%
Comments
2.8K
4%
Engagement
4.76%
Hover (frozen)
Cards — productThe image-first card of the Products board: pack photo on a white 4:3 plate, brand micro-label, name, retailer reference, price with its movement, and the Mentions · Retailers · Variants plate — the influencer card's plate, cell for cell.
Monge

Monge Natural Superpremium All Breeds Adult Hypoallergenic with Salmon and Tuna

SKU 9001233 · 12 kg
€41.995.6%
Arcaplanet · 30 days
Market range over 30 days: the shaded area is the cheapest to the dearest single pack across retailers each day; the gold line is your own price inside it.
Mentions
14
Retailers
4
Variants
4
Default
Royal Canin

Royal Canin Medium Adult

SKU 9001887 · 15 kg
€86.906.6%
Arcaplanet · 30 days
Market range over 30 days: the shaded area is the cheapest to the dearest single pack across retailers each day; the gold line is your own price inside it.
Mentions
38
Retailers
4
Variants
3
Hover (frozen)
Multipack ExplorerRetailers down, multipack variants across, one price per intersection. Gold is the client and the only role colour; a discount rides the price as a superscript; an empty cell with history says when the variant was last on the shelf. Includes the 30-day variants-over-time chart.

Which multipacks of this product exist at which retailer, and at what price per pack, on the selected day.

Retailer×1single×33 packs×55 packs×1818 packs
ArcaplanetYou€41.99€40.314%€39.895%
Bauzaar€40.74€39.932%€39.523%
Bitiba€42.49last avail 30 days ago
Amazon.it€37.907%

4 unique variants across 4 retailers — ×1 · ×3 · ×5 · ×18. Same number as the card.

Multipack variants over time

One column per day over the last 30, 10 AUG to 08 SEP — every multipack on the shelf that day, stacked by retailer. Hover a column for the breakdown and the unique count across the market.

  • Arcaplanet
  • Bauzaar
  • Bitiba
  • Amazon.it

Modelled series for this preview — the pipeline scrapes three times a day; a real series will replace it.

Period barThe full-width strip between a product hero and its modules — every figure below it is a one-day snapshot of a shelf that changes daily, and this is what picks the day. Today · Yesterday · a date field.

Snapshot of the shelf on this date

KPI heroPage-top summary band — eyebrow + gradient headline + four KPI tiles, with a −/+ minimise toggle. Full live composite.
Digital Opinion Leaders

The pulse of pharma voices,
decoded in real time.

+12
234
Total DOLs
+0.42%
3.84%
Avg Engagement
+1.8M
12.4M
Reach (30d)
+3
18
Active Campaigns
ToolbarFilters button + result count + search (live) + split-menu sort. The complete control strip from the DOLs page.
234Influencers
Sidebar sectionFilter panel — collapsible sections, checkbox option rows with live tallies, count badges, channel chip grid. Live (toggle options).