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