name: medpanel-design
version: alpha
description: >
  A primary-care panel-management console rendered as a literal tackle box —
  three stacked trays of labeled compartments on a warm paper surface (#F4F0E4).
  The system runs on a single teal "voltage" (#2D6B72) for healthy/affirmative
  states and a coral alarm (#DE593D) for clinical risk, with everything else in
  warm grey ink (#1A1B1C / #7A8086). Engraved monospace micro-labels, hairline
  steel borders, inset/tray box-shadows, and zero-to-6px radii give it the feel
  of a precision instrument case. Type is Inter for content and Berkeley
  Mono / JetBrains Mono for every code, count, and engraved label.
colors:
  # Brand / Voltage
  teal: '#2D6B72'          # primary accent: healthy/on-target states, CTAs, links, donut, avatar fill, "in room"
  # Semantic
  coral: '#DE593D'         # alarm: critical labs, high-risk rows, overdue, gaps, flagged counts
  # Surface (warm paper, darkening per tray)
  paper: '#F4F0E4'         # page background, compartment fill, inputs, time-ribbon track
  tray-top: '#ECE7D7'      # top tray frame + edge-label + tackle-tab fill
  tray-mid: '#E7E1CE'      # middle tray frame fill
  tray-bottom: '#DDD7C2'   # bottom tray frame fill
  # Text
  ink: '#1A1B1C'           # headings, primary body text, "now" line
  steel: '#7A8086'         # muted text, engraved labels, hairlines, secondary data, divider walls
  on-teal: '#F4F0E4'       # paper text on the teal avatar
  # Hairlines
  border: '#7A8086'        # 1px compartment / tray / edge-label borders (often at 25–50% alpha for inner rules)

MedPanel

medpanel-design · alpha

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

Overview

MedPanel is a population-health and panel-management dashboard for a primary-care physician, and its single conceptual move is to render the whole interface as a physical tackle box: three trays (#ECE7D7 → #E7E1CE → #DDD7C2, progressively warmer/darker as you descend) stacked with a -mt-2 overlap and finger-tabs (.tackle-tab, 16px tall, 6px 6px 0 0 rounded) poking up from each seam. Inside the trays sit lidless compartments — paper-filled (#F4F0E4) boxes with hairline steel borders (1px #7A8086), an inset top-highlight / bottom-shadow, and a notched edge-label clipped to the top-left corner in engraved monospace. The palette is deliberately austere: one teal voltage (#2D6B72) carries everything affirmative (on-target metrics, CTAs, the composite donut, the "IN ROOM" status, the avatar), one coral (#DE593D) carries all clinical alarm (critical labs, high-risk roster rows, overdue screenings, care gaps), and the rest is warm ink (#1A1B1C) and steel grey (#7A8086). Typography splits cleanly: Inter for human-readable content, and Berkeley Mono (falling back to JetBrains Mono) with tabular-nums for every count, lab value, date, code, and the 10px / 0.18em-tracked uppercase engraved labels. Radii stay between 0 and 6px and shadows are inset/tray-style rather than floating — the result reads like a calibrated clinical instrument, not a SaaS card grid.

Colors

Brand / Voltage. teal #2D6B72 is the only accent and means "good / actionable": on-target quality bars and the outer donut ring, the .cta-btn text + border, phone-call icon buttons, the circular avatar fill, the "IN ROOM" / "10:40" status, the .quiet-dot indicator, and the pagination "next" chevron.

Semantic. coral #DE593D is the alarm channel exclusively: critical/high lab flags and their ti-alert-triangle icons, the FLAGGED 17 header count, the .alert-dot variant, the .risk-row.high left border + rgba(222,89,61,0.04) wash, the donut's inner gap ring, overdue counts and "GAP" legends, and the booked-block that represents a problem appointment.

Surface. The page and every compartment interior are paper #F4F0E4. The three tray frames step warmer/darker top-to-bottom: tray-top #ECE7D7, tray-mid #E7E1CE, tray-bottom #DDD7C2. The edge-labels and tackle-tabs reuse #ECE7D7.

Text. ink #1A1B1C is headings and primary content; steel #7A8086 is the workhorse muted color for secondary data, engraved labels, and hairlines. on-teal #F4F0E4 is the paper-colored "HO" monogram on the teal avatar.

Hairlines. All structural borders are 1px solid #7A8086. Inner rules, dividers, divide-y separators and progress-bar tracks use the same steel at reduced alpha (/15, /25, /40, /50).

Typography

Content face: the stack is 'Söhne', 'Inter', 'Helvetica Neue', Arial, sans-serif — Söhne is bespoke/commercial and not loaded, so Inter (imported from Google Fonts) is the de-facto rendered face. Mono face: 'Berkeley Mono', 'JetBrains Mono', ui-monospace, monospace — Berkeley Mono is commercial and not loaded, so JetBrains Mono (Google Fonts) is the de-facto rendered mono, with font-variant-numeric: tabular-nums applied everywhere numbers align. Substitute Inter for Söhne and JetBrains Mono for Berkeley Mono.

Token	Size	Weight	Line-height	Tracking	Usage
display	26px	600	1 (leading-none)	tight	Physician name in header
body	12.5–13px	400/500	snug/tight	normal	List rows, table cells, message previews
body-sm	11.5px	400	snug	normal	Quality labels, message body
mono-data	10–11.5px	400/500	—	normal	Counts, lab values, dates, MRN/ICD codes, statuses
mono-metric	15–20px	500	1	normal	Header stat values, donut composite score
label-engraved	10px (8.5px mini)	400	—	0.18em, uppercase	Edge-labels, console kicker, table headers

Layout

Base unit: 4px (Tailwind scale), with 3-unit (gap-3, p-3) the dominant rhythm inside trays. Full-bleed page with px-8 pt-6 pb-10 and no centered max-width — the console fills the viewport. The composition: a flex header bar (console kicker + physician name on the left, inline PANEL / ACTIVE / FLAGGED stat group on the right with hairline separators, clock + avatar far right), then the tackle-box stack. Top tray is a grid-cols-12 of three compartments (col-span-5 Urgent Labs, col-span-4 Schedule, col-span-3 Messages); middle tray is three col-span-4 compartments (Population Health, Refills/PA Inbox, Quality donut); bottom tray is one full-width Roster compartment with a search toolbar, a 7-column CSS-grid table, and pagination. Each tray overlaps the one above by -mt-2 and carries finger-tabs offset progressively rightward (left-8, left-44, left-72). Whitespace is tight and instrument-dense — every compartment is packed but gridded.

Elevation & Depth

No floating drop-shadows; depth is built from borders + inset shadows to sell the physical-case metaphor. .compartment uses inset 0 1px 0 rgba(255,255,255,0.6) (top highlight) plus inset 0 -2px 0 rgba(26,27,28,0.04) (bottom seat). The slide-out trays add .tray-shadow: 0 -1px 0 #7A8086 hairline, a soft upward 0 -8px 24px -16px rgba(26,27,28,0.35), and an inner top shade inset 0 18px 24px -22px rgba(26,27,28,0.25). Status dots get a soft ring halo (0 0 0 3px rgba(...,0.15–0.18)). Everything else is flat fills and hairlines.

Shapes

Aggressively low-radius. Trays and compartments are rounded-sm / squared with rounded-b-sm only on the slide-out trays. The only soft corner is the tackle-tab's 6px 6px 0 0. The sole full-round elements are circles: the 36px avatar (rounded-full), the 6px status dots, and the tiny 1.5px overdue bullets. Edge-labels, buttons, inputs, filter chips, and table rows are all hard-cornered rectangles — the sharpness reinforces the precision-instrument read.

Components

• Edge-label — #ECE7D7 fill, full 1px #7A8086 border, clipped to top-left corner (top:-1px;left:-1px), 5px 12px padding, 10px 0.18em uppercase mono; optionally trailed by a .quiet-dot (teal) or .alert-dot (coral).
• Compartment — #F4F0E4 fill, 1px #7A8086 border, inset highlight/seat shadow, pt-7 pb-4 px-4 (top padding clears the edge-label).
• CTA button (.cta-btn) — transparent fill, 1px #2D6B72 border, teal 10px uppercase mono text, 6px 10px padding; hover fills rgba(45,107,114,0.08) and shifts text/border to ink. Labels: "Review All →", "Open Inbox →", "Batch Approve →", "Export Panel →".
• Filter chips — 1px #7A8086/50 border, px-2.5 py-2, 10px mono; active chip uses ink text ("ALL · 1800"), rest steel ("HIGH RISK · 142").
• Search input — bordered 1px #7A8086/50 box on #F4F0E4, ti-search icon, ⌘K hint, 12.5px placeholder in steel; outline-hidden.
• Risk row — grid-cols-[1.6fr_0.7fr_…] 7-col layout, 3px left border: .high → coral + rgba(222,89,61,0.04) wash, .mute → steel text; row-hover washes rgba(45,107,114,0.05).
• Time ribbon — bordered track on #F4F0E4 with absolutely-positioned booked blocks (#7A8086/25 neutral, #2D6B72 current, #DE593D/70 problem, dashed outline for tentative) and an ink "NOW" line.
• Donut — SVG dual-ring: outer teal 78/100 composite over steel track, inner coral 22 gap ring; centered mono score.
• Progress bars — 1px-tall #7A8086/25 track, teal fill on-target / coral fill for the failing measure.
• Status dots — .quiet-dot (6px, teal, ringed) and .alert-dot (coral).

Motion

Minimal, content-reveal only. A motion@12 ESM module runs inView('.list') and animates each <li> from {opacity:0, y:8} to {opacity:1, y:0} with stagger(0.04), duration 0.45, ease: easeOut. List items start hidden (opacity:0; transform:translateY(8px)) in CSS until revealed. CTA buttons and table rows have CSS hover transitions on background/border/color. No looping animation, no page-load choreography beyond the staggered list reveals.

Iconography

Library: Tabler Icons (webfont, ti ti-*). Style: outline line icons, with filled variants used for the most severe states (ti-alert-triangle-filled for critical). Sizes: small UI scale, 14–15px (text-[14px]/text-[15px]). Color: coral for all alarm/flag icons, teal for the phone-call action buttons, steel for the search glyph. Usage is purely functional — severity markers, the call action, and search — never decorative.

Do's and Don'ts

• Do keep the dual-voltage discipline: teal = healthy/actionable, coral = clinical risk, everything else ink/steel.
• Do label every compartment with a corner edge-label in 10px 0.18em uppercase mono, and set all numbers in tabular-nums mono.
• Do preserve the warm paper surface and the top→bottom tray-darkening (#ECE7D7 → #E7E1CE → #DDD7C2).
• Do build depth from hairline borders + inset/tray shadows, not floating cards.
• Don't introduce rounded cards, gradients, or a third accent hue.
• Don't use sans-serif for numeric/coded data, or drop tabular-nums.
• Don't add drop-shadow elevation or large radii — it breaks the instrument-case metaphor.

Known Gaps

• Söhne (content) and Berkeley Mono (mono) are commercial faces named first in the stacks but not imported; the actually-loaded/rendered fallbacks are Inter and JetBrains Mono (Google Fonts), which are the recommended substitutes.
• Spacing scale is inferred from Tailwind utility usage (4px base); no explicit spacing tokens are defined in the source.
• Radius values beyond rounded-sm/rounded-full/the 6px tab are Tailwind defaults (sm ≈ 2px) rather than authored custom values.