Skip to main content
Back to Examples

PharmOps

Remix this template to create a similar design — same sections, layout, animations, colors, and typography.

Visit site

A dashboard for a digital pharmacy chain. Soft off-white dashboard canvas, pharmacy-green with amber and red status accents, Inter and Roboto Mono.

19
core colors
3
typefaces
38
tokens
agent.kombai.com/kombai-inspiration-library/templates/pharmops/index.html
01

Palette

green
#2F7A5A
green-dark
#225A42
green-mint
#7EE2B8
page
#F4F2EC
white
#FCFCF9
card
#FFFFFF
amber-tint
#FDF6EA
amber-tint-border
#F1E0BF
inset
#F4F2EC
bar-track
#EEF0EB
ink
#1A1F1C
ink-2
#5A655E
amber-text
#A96B14
line
#E6E7E1
amber
#E8A13A
red
#D14A4A
rail-gradient
LINEAR-GRADIENT(180DEG,#2F7A5A,#26644A)
duty-gradient
LINEAR-GRADIENT(155DEG,#2F7A5A,#1F5A3F)
shelf-rail-gradient
LINEAR-GRADIENT(180DEG,#E9E6DC,#D8D4C4)
02

Typography

displayThe quick brown fox jumps'Google Sans Display', sans-serif
20px
display-cardThe quick brown fox jumps'Google Sans Display', sans-serif
17px
display-sectionThe quick brown fox jumps'Google Sans Display', sans-serif
15px
bodyThe quick brown fox jumps'Inter', sans-serif
13px
body-smThe quick brown fox jumps'Inter', sans-serif
11px
mono-metricThe quick brown fox jumps'Roboto Mono', monospace
28px
mono-metaThe quick brown fox jumps'Roboto Mono', monospace
11px
eyebrowThe quick brown fox jumps'Inter', sans-serif
10px
03

Spacing & Shape

TokenValuePreview
xs4px
sm8px
md12px
lg16px
xl20px
xxl32px
04

Border Radius

TokenValuePreview
sm3px
md8px
lg12px
xl16px
full9999px
05

design.md

design.mdreadable by AI agents
tokens (raw)
name: pharmops-design
version: alpha
description: >
  CabinetRX is a warm, Material-Design-3 pharmacy chain-operations dashboard set
  on a soft bone surface (`#F4F2EC`) with a single deep apothecary-green voltage
  (`#2F7A5A`) carried into a gradient left rail. The signature move is the
  "shelf" metaphor: stacked sections capped by a sculpted wood-tone rail divider,
  amber/red/green status dots, and capsule watermarks. Typography pairs Google
  Sans Display for headings, Inter for body, and Roboto Mono for every metric,
  ID, and timestamp. Geometry is soft and rounded — 16px cards, full-radius pills
  and location rows — lit by layered MD3 elevation shadows and spring hover lifts.
colors:
  # Brand / Voltage
  green: '#2F7A5A'        # primary brand; rail gradient, FAB, verified pills, sparkline, progress bars
  green-dark: '#225a42'   # FAB hover, rail gradient end tones
  green-mint: '#7ee2b8'   # healthy status dots, on-duty pulse
  # Surface
  page: '#F4F2EC'         # app background (body/.page)
  white: '#FCFCF9'        # token --white (off-white); cards use pure #fff
  card: '#ffffff'         # card fills, search bar, accordion rows
  amber-tint: '#fdf6ea'   # pending-review row fill
  amber-tint-border: '#f1e0bf'  # pending-review row border
  inset: '#f4f2ec'        # kbd / segmented-control track fill
  bar-track: '#eef0eb'    # progress-bar & heatmap empty-cell track
  # Text
  ink: '#1a1f1c'          # headings & primary body text
  ink-2: '#5a655e'        # muted/secondary text, captions, meta
  amber-text: '#a96b14'   # text on amber pills/badges (LOW, PRIOR AUTH, REVIEW)
  # Hairlines
  line: '#e6e7e1'         # all 1px borders, dividers, card outlines
  # Semantic
  amber: '#E8A13A'        # warning status (low stock, prior auth)
  red: '#D14A4A'          # critical / alert / over-threshold / reorder
  # Gradient
  rail-gradient: 'linear-gradient(180deg,#2F7A5A,#26644A)'  # left navigation rail
  duty-gradient: 'linear-gradient(155deg,#2F7A5A,#1f5a3f)'  # pharmacist-on-duty card
  shelf-rail-gradient: 'linear-gradient(180deg,#e9e6dc,#d8d4c4)'  # wood-tone shelf divider
typography:
  display:
    fontFamily: "'Google Sans Display', sans-serif"
    fontSize: 20px
    fontWeight: 500
    letterSpacing: -0.01em
  display-card:
    fontFamily: "'Google Sans Display', sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.15
  display-section:
    fontFamily: "'Google Sans Display', sans-serif"
    fontSize: 15px
    fontWeight: 500
    letterSpacing: -0.01em
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 400
  body-sm:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 400
  mono-metric:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 28px
    fontWeight: 500
  mono-meta:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 11px
    fontWeight: 400
  eyebrow:
    fontFamily: "'Inter', sans-serif"
    fontSize: 10px
    fontWeight: 500
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:                  # radius scale
  sm: 3px                 # heatmap cells, kbd, swatches
  md: 8px                 # small icon tiles (rounded-lg)
  lg: 12px                # accordion rows, sidebar logo tile (rounded-xl)
  xl: 16px                # cards (.card, rounded-2xl)
  full: 9999px            # pills, location rows, dots, avatars, FAB
spacing:                  # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  xxl: 32px
components:
  fab:
    backgroundColor: '{colors.green}'
    textColor: '#ffffff'
    typography: '{typography.display-section}'
    rounded: '{rounded.full}'
    padding: '10px 20px 10px 16px'
    elevation: 'elev-3'
    # hover -> green-dark + green glow + scale 1.03; label "Log Dispense", ti-capsule icon
  card:
    backgroundColor: '{colors.card}'
    rounded: '{rounded.xl}'
    padding: '20px'
    elevation: 'elev-1'
  crit-card:
    backgroundColor: 'linear-gradient(180deg,rgba(209,74,74,.06),#fff)'
    border: '1px solid rgba(209,74,74,.18)'
    rounded: '{rounded.xl}'
    padding: '20px'
    elevation: 'elev-3'
    width: '320px'
  pill-btn:
    backgroundColor: 'tinted (e.g. rgba(209,74,74,.12)) or solid {colors.green}/{colors.red}'
    textColor: '{colors.red} | {colors.green} | {colors.amber-text} | #fff'
    typography: '{typography.body-sm}'
    rounded: '{rounded.full}'
    padding: '6px 12px'
  location-item:
    backgroundColor: 'transparent (active: {colors.green}); hover rgba(47,122,90,.08)'
    textColor: '#ffffff'
    typography: '{typography.body}'
    rounded: '{rounded.full}'
    padding: '10px 12px'
  search-bar:
    backgroundColor: '{colors.card}'
    border: '1px solid {colors.line}'
    rounded: '{rounded.full}'
    padding: '10px 16px'
    elevation: 'elev-1'
  accordion-row:
    backgroundColor: '{colors.card}'
    border: '1px solid {colors.line}'
    rounded: '{rounded.lg}'
    padding: '12px 16px'
  progress-bar:
    backgroundColor: '{colors.bar-track}'
    rounded: '{rounded.full}'
    height: '6px'
    # fill color by status: red / amber / green
motion:
  load-timeline: 'GSAP timeline, power3.out, 0.5s base; header y:-16, sidebar items x:-16 stagger .03, kpi-cards y:20 scale:.96 stagger .06, charts y:24 0.7s'
  card-hover: 'Motion spring (stiffness 400, damping 26) y:-4 lift + elevate to elev-6 shadow, cubic-bezier(0.2,0,0,1)'
  fab-hover: 'green glow shadow + scale 1.03; press scale 0.95'
  accordion: 'max-height 0->400px over .35s var(--ease); chevron rotate 180deg over .3s'
  ease: 'cubic-bezier(0.2, 0, 0, 1) — MD3 emphasized'
icons:
  library: Tabler Icons (webfont, ti ti-*)
  style: outline
  sizes: { sm: 16px, md: 18px, lg: 20px }
  color: '{colors.ink-2} for UI; semantic tints for status'
  decorative: 'inline SVG pill/lock logo; game-icons capsule SVG watermarks at opacity .05'

CabinetRX

pharmops-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

CabinetRX is a pharmacy chain-operations dashboard built on Google's Material Design 3 vocabulary but warmed into an apothecary mood. The app surface is a soft bone #F4F2EC, not white, and the single brand voltage is a deep apothecary green #2F7A5A — used as a vertical gradient down the 248px left rail (linear-gradient(180deg,#2F7A5A,#26644A)), as the FAB fill, as verified-status pills, the sparkline stroke, and progress bars. The signature conceptual move is the shelf metaphor: the dashboard is three stacked "shelves" (Critical, Operations, Inventory), each headed by a glowing status dot and closed by a sculpted wood-tone rail divider (.shelf-rail, a 6px gradient bar with inset highlight). Status is a three-color system — green healthy, amber warning, red critical — surfaced as 8px dots, tinted pill badges, and progress fills. Typography is a strict three-family split: 'Google Sans Display' for headings, 'Inter' for body, and 'Roboto Mono' for every number, ID, NDC, timestamp, and metric — the mono face is what gives the screen its clinical, instrument-panel feel. Geometry is soft (16px cards, full-radius pills and location rows) and lit by layered MD3 elevation shadows plus spring-physics hover lifts and a GSAP entry timeline.

Colors

Brand / Voltage. green #2F7A5A is the one accent, doing the most work as the rail gradient, the FAB, "VERIFIED"/"NEW" pills, the dispensing sparkline, and healthy progress bars. green-dark #225a42 is its hover/gradient-end shade. green-mint #7ee2b8 lights healthy status dots and the on-duty pulse ring.

Surface. page #F4F2EC is the warm bone app background (set on body and .page). Cards use pure #fff (the --white token #FCFCF9 exists but cards render #fff). inset #f4f2ec fills the ⌘K kbd chip and the segmented control track. bar-track #eef0eb is the empty fill of progress bars and heatmap cells. Pending-review rows use a warm amber-tint #fdf6ea with an #f1e0bf border.

Text. ink #1a1f1c is headings and primary text; ink-2 #5a655e is the ubiquitous muted gray-green for captions, meta, and icons. amber-text #a96b14 is the darkened amber used for legibility on amber pills.

Hairlines. line #e6e7e1 draws every 1px border, card outline, divider, and segmented-control separator.

Semantic. amber #E8A13A = warning (low stock, prior auth, refill-too-soon); red #D14A4A = critical (expiring scripts, count variance, cold-chain breach, reorder). Both appear as solid dots and as low-alpha tints (.06–.18) behind pills, icon tiles, and the critical card gradient.

Gradient. Three gradients: the rail linear-gradient(180deg,#2F7A5A,#26644A), the pharmacist-on-duty card linear-gradient(155deg,#2F7A5A,#1f5a3f), and the wood-tone shelf rail linear-gradient(180deg,#e9e6dc,#d8d4c4). The sparkline area uses a vertical green fade (#2F7A5A .35 → 0).

Typography

Three Google-Fonts families imported together: 'Google Sans Display' (400/500/700) for display, 'Inter' (400/500/600) for body and UI, and 'Roboto Mono' (400/500/600) for all numerics. These are all open-source/Google-hosted, so no substitution is needed.

TokenSizeWeightLine-heightTrackingUsage
display20px500—-0.01emtop-bar page title ("Today's Cabinet")
display-card17px5001.15—critical card headlines
display-section15px500—-0.01emshelf headings, FAB label
body13px400——row names, primary list text
body-sm11px400——captions, pill labels, meta
mono-metric28px500——hero metrics (countdowns, temps)
mono-meta11px400——IDs, NDC, timestamps, counts
eyebrow10px500—0.25emuppercase labels ("Locations", section eyebrows)

Note: many metric sizes scale up (34px trend total, 28px countdowns) and down (10px micro-labels) but all numerics stay in Roboto Mono. Uppercase + wide tracking (.18em–.25em) marks every eyebrow/label.

Layout

Base unit is 4px (Tailwind scale); common steps 4 / 8 / 12 / 16 / 20 / 32px. The page is a two-pane flex: a fixed 248px sticky left rail (gradient green) and a fluid main column. The main column has a sticky translucent top bar (bg-[#F4F2EC]/85 backdrop-blur, bottom hairline) holding a centered pill search bar (max-w-2xl), filter/bell buttons, and the green FAB. Below, content is the three shelves in a space-y-7 stack, each px-8. The Critical shelf is a horizontal overflow-x-auto rail of 320px cards (with a faded "peek" card); Operations and Inventory use a 12-column grid (grid-cols-12 gap-4) split 8/4 and 5/4/3 respectively. Each shelf ends with the .shelf-rail wood divider. A mono footer closes the page. Whitespace is generous and calm; density lives in the data rows, not the margins.

Elevation & Depth

A four-step MD3 shadow ladder: elev-1 (resting cards, search, buttons), elev-3 (FAB, critical cards, on-duty card), elev-6 and elev-8 (deeper, used by hover). Each is a layered two-shadow recipe (e.g. elev-3 = 0 1px 3px rgba(0,0,0,.08), 0 4px 8px 3px rgba(0,0,0,.06)). The rail logo tile and footer-card use backdrop-blur glass over the green gradient. The shelf rail carries an inset highlight (inset 0 1px 0 rgba(255,255,255,.6)) for a sculpted 3D edge. Status dots get a soft "glow ring" via a 4px low-alpha box-shadow. On hover, cards lift y:-4 and deepen to an elev-6-class shadow; the FAB blooms a green glow.

Shapes

Soft and rounded throughout. Cards are 16px (rounded-2xl); accordion rows and the logo/icon tiles are 12px (rounded-xl); small status-icon tiles are 8px (rounded-lg). Pills, the FAB, location rows, dots, and avatars are fully round (9999px) — the pill is the dominant primitive. The smallest radius, 3px, is reserved for heatmap cells, the ⌘K kbd, and legend swatches. Nothing is sharp; there are no hard 0-radius corners.

Components

  • FAB — solid green #2F7A5A, white text, full radius, elev-3, padding 10px 20px 10px 16px; ti-capsule icon + "Log Dispense"; hover green glow + scale 1.03, press scale 0.95.
  • Card — #fff, 16px radius, 20px padding, elev-1.
  • Critical card — 320px wide, red-fade gradient (rgba(209,74,74,.06)→#fff), 1px rgba(209,74,74,.18) border, elev-3; red icon tile + status pill (EXPIRING/CSOS/COLD CHAIN/DEA), mono hero metric, red action pill (Resolve/Investigate/Quarantine).
  • Pill badge / button (.pill-btn) — full radius, 6px 12px, 12px/500; either a low-alpha semantic tint with matching text, or a solid green/red fill with white text.
  • Location row — full-radius, 10px 12px; transparent default (white text on green rail), active = solid green fill, hover = rgba(47,122,90,.08); ti-map-pin + name + mono RX-code/count + status dot.
  • Search bar — #fff pill, 1px line border, elev-1, ti-search icon + input + ⌘K kbd.
  • Accordion row — #fff, 1px line, 12px radius; trigger row with mono index, status dot, name, mono time, status pill, rotating chevron; body expands to reveal a 3-column drug/dosage/prescriber grid + action pills.
  • Segmented control — inset track, full-radius pills, active pill #fff + elev-1.
  • Progress bar — 6px, bar-track ground, full radius, status-colored fill.
  • Heatmap — 12-column grid of 14px / 3px-radius cells, red-alpha intensity scale; JS-generated.
  • Sparkline — green line (2px) over a green-fade area, end-point dot + halo.

Motion

A GSAP entry timeline (power3.out, 0.5s base) cascades the load: header drops in (y:-16), sidebar items slide from left staggered .03s, KPI cards rise and scale-in (y:20, scale:.96, stagger .06), charts rise last (y:24, 0.7s). The Motion library powers interaction: cards hover-lift with a spring (stiffness 400, damping 26) and deepen shadow; the FAB blooms a green glow and scales 1.03 on hover, compresses to 0.95 on press. Accordions animate max-height (0→400px) over .35s with a chevron rotate over .3s, both on the MD3 emphasized ease cubic-bezier(0.2,0,0,1).

Iconography

Tabler Icons via webfont (ti ti-*), outline style, in UI sizes 16 / 18 / 20px, colored ink-2 by default and tinted to a semantic color inside status tiles (ti-alert-triangle-filled, ti-temperature-snow, ti-clipboard-text, ti-map-pin, ti-capsule, ti-bell, ti-search, ti-settings). Decorative art: an inline SVG padlock/cabinet logo in the rail, a large faint inline SVG on the on-duty card (opacity .20), and game-icons capsule/pill SVGs as .capsule-wm watermarks at opacity .05 behind the inventory charts.

Do's and Don'ts

  • Do keep the surface warm bone #F4F2EC and reserve #2F7A5A green as the single brand voltage.
  • Do render every number, ID, NDC, and timestamp in Roboto Mono.
  • Do close each "shelf" section with the wood-tone .shelf-rail divider and head it with a glowing status dot.
  • Do map status strictly: green = healthy, amber = warning, red = critical, using dots, tinted pills, and bar fills consistently.
  • Don't introduce pure-white page backgrounds or a second accent hue.
  • Don't square off the pills, cards, or location rows — the system is soft.
  • Don't use amber #E8A13A as pill text; switch to amber-text #a96b14 for legibility on tints.
  • Don't flatten the MD3 elevation ladder into single drop shadows.

Known Gaps

  • The --white token #FCFCF9 is defined but cards render pure #fff; both are documented.
  • The heatmap cells are generated at random in JS; only the intensity palette (#eef0eb + red alphas .12/.25/.45/.7/1.0) is fixed, not the layout.
  • Hover/press shadow values are read from the Motion JS calls, not static CSS.
  • Letter-spacing on display faces (tracking-tight) is approximated as -0.01em (Tailwind's value).