Pharma 360 · 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.

Influencer cardThe 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)
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).