name: medpost-design
version: alpha
description: >
  MedPost is an online-pharmacy interface styled as a clinical paper ledger.
  A clean white surface (#FFFFFF) is divided by hairline rules into a deep
  teal-navy ink (#0E3A4A) and a single mint "voltage" (#34D399), with a coral
  alert color (#FF6B5E) reserved for past-due and action-required states. The
  signature move is the prescription-pad split hero — a navy brand panel beside
  a white Rx order slip whose dashed and hairline divisions, mono labels, and
  tabular-number fields read like a real fill ticket. Type pairs Hanken Grotesk
  (UI / display) with Space Mono (labels, numbers, meta). Geometry is restrained:
  consistent 10px rounded corners on cards and buttons, full pills for status
  dots, and edge-to-edge borders rather than shadows.
colors:
  # Brand / Voltage
  mint: '#34D399'        # primary accent: CTAs, logo tile, links, "ready" status, highlights
  mint-hover: '#2bbd87'  # hover for mint buttons
  # Ink / Surface
  ink: '#0E3A4A'         # teal-navy: body text, brand panel bg, sidebar bg, footer bg, borders
  surface: '#FFFFFF'     # page + card surface, on-ink text
  # Semantic
  coral: '#FF6B5E'       # alert / past-due / expired states, renewal CTA
  coral-hover: '#e85a4e' # hover for coral "Renew Now" button
  # Hairlines / Tint (alpha over ink or white)
  ink-15: 'rgba(14,58,74,0.15)'  # field grid hairlines (border-[#0E3A4A]/15)
  ink-20: 'rgba(14,58,74,0.20)'  # row separators, image borders
  ink-40: 'rgba(14,58,74,0.40)'  # dashed slip divider
  ink-50: 'rgba(14,58,74,0.50)'  # mono labels, meta text
  ink-60: 'rgba(14,58,74,0.60)'  # secondary body copy
  white-15: 'rgba(255,255,255,0.15)'  # hairlines on navy panels, tracking rail
  white-50: 'rgba(255,255,255,0.50)'  # muted text on navy
  white-70: 'rgba(255,255,255,0.70)'  # body copy on navy; ripple fill
typography:
  display:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: clamp(36px, 5vw, 48px)   # hero h1 (text-4xl lg:text-5xl)
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.01em             # tracking-tight
  heading:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 24px                     # section/panel h2 (text-2xl–text-3xl)
    fontWeight: 800
    letterSpacing: -0.01em
  body:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 10px                     # field labels, eyebrows
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.15em              # tracking-[0.15em]–[0.25em]
    textTransform: uppercase
  numeric:
    fontFamily: "'Space Mono', monospace"
    fontSize: 20px                     # big tabular field values (QTY/MG/FREQ)
    fontWeight: 700
  signature:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 24px                     # prescriber signature (italic)
    fontWeight: 400
rounded:
  sm: 8px      # small mono "Request Renewal" button, alert button
  md: 10px     # cards, primary buttons, logo tile, image thumbs, tracking box
  full: 9999px # status dots, ripple, ping pulse
spacing:                  # 4px base; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px            # px-12 horizontal gutter
components:
  logo-tile:
    backgroundColor: '{colors.mint}'
    textColor: '{colors.ink}'
    rounded: '{rounded.md}'
    padding: '40px square (w-10 h-10)'
    # ti-plus icon, sits in navy brand panel
  primary-button:
    backgroundColor: '{colors.mint}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '16px 28px (px-7 py-4)'
    # "Place Order" / "Refill"; hover -> {colors.mint-hover}; mono uppercase label, ripple on click
  ghost-button:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '10px 20px (px-5 py-2.5)'
    # "Manage"; 1px ink border; hover inverts to ink bg / white text
  alert-button:
    backgroundColor: 'transparent'
    textColor: '{colors.coral}'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '6px 12px (px-3 py-1.5)'
    # "Request Renewal"; 1px coral border; hover fills coral / white text
  renew-button:
    backgroundColor: '{colors.coral}'
    textColor: '{colors.surface}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '10px 20px (px-5 py-2.5)'
    # "Renew Now"; hover -> {colors.coral-hover}
  rx-field:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.label}'  # label; value is body/numeric
    rounded: '0'
    padding: '16px 32–48px (py-4 px-8/12)'
    # transparent input inside a hairline grid cell; focus-within -> 1px mint outline
  alert-card:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.surface}'
    rounded: '{rounded.md}'
    padding: '12px 16px'
    # 1px coral border; coral header bar with ti-alert-triangle-filled
  rx-row:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.ink}'
    rounded: '0'
    padding: '20px 32–48px (py-5)'
    # 48px image thumb, name + mono dosage, pills-left, refill date, action button
  status-pill-row:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '0'
    padding: '12px 32–48px (py-3)'
    # group header: full dot (mint/ink/coral) + uppercase status + tnum count
  tracking-node:
    backgroundColor: '{colors.mint}'   # done; pending uses {colors.ink} + white/30 ring
    rounded: '{rounded.full}'
    padding: '24px dot (w-6 h-6)'
    # ring-2 ink, inset top highlight shadow, connected by white/15 vertical rail
motion:
  rx-pad-intro: 'GSAP on load: from autoAlpha 0, xPercent 20, 0.7s power3.out, origin right center'
  rx-row-reveal: 'Motion One inView: rows opacity 0->1 + y 16->0, stagger 0.07s, easeOut 0.5s'
  ripple: 'anime.js on button click: white ripple scale 0->4, opacity 0.5->0, 600ms ease out(3)'
  ping: 'Tailwind animate-ping mint pulse behind footer "pharmacist on call" dot'
  button-hover: 'CSS color/bg transition on buttons and footer links'
  smooth-scroll: 'Lenis smoothWheel page-wide inertial scrolling'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline (with a few -filled variants)
  sizes: { sm: 16px, md: 18px, lg: 20px }
  color: '{colors.mint}'  # also ink (logo), white/coral contextually

MedPost

medpost-design · alpha

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

Overview

MedPost is an online pharmacy dressed as a clinical paper ledger. The surface is pure white (#FFFFFF) divided everywhere by 1px hairline rules in a deep teal-navy ink (#0E3A4A) — the same color that fills the brand panel, the live sidebar, and the footer. A single mint "voltage" (#34D399) carries every positive action: the plus-mark logo tile, the "Place Order" and "Refill" buttons, links, and the "Ready for Refill" status dot. A coral (#FF6B5E) is held in reserve strictly for tension — the "Action Required" alert card, the "Past Due" group, and the "Renew Now" button. The signature move is the prescription-pad split hero: a 40/60 grid puts a navy brand column beside a white Rx order slip whose dashed top rule, hairline field grid, mono uppercase labels (Space Mono), tabular-number values, and italic prescriber signature read like a genuine fill ticket. Below, a "Medicine Cabinet" ledger lists scripts in status-grouped rows next to a sticky navy live-tracking timeline. Type pairs Hanken Grotesk for UI and display with Space Mono for labels, numbers, and meta. Geometry is deliberately quiet — a consistent 10px corner radius on cards and buttons, full pills only for status dots, and edge-to-edge borders standing in for shadows.

Colors

Brand / Voltage. mint #34D399 is the one accent — used for the logo tile fill, primary CTAs ("Place Order", "Refill"), inline highlights in the hero headline and stats, links/hover states, and the "Ready for Refill" status dot and tracking nodes. mint-hover #2bbd87 is its button hover.

Ink / Surface. ink #0E3A4A is the everything-color: default body text on white, plus the solid fill of the navy brand panel, the sticky sidebar, and the footer (where it carries white text). surface #FFFFFF is the page and card surface and the text color on ink.

Semantic. coral #FF6B5E is reserved for problems and the one urgent action — the "Action Required" alert card border/header, the expired-prescription date, the "Past Due" group dot and label, and the "Renew Now" button (hover coral-hover #e85a4e).

Hairlines / Tint. Borders and muted text are alpha tints of the two base colors rather than separate greys. Over white: ink-15 for the Rx field grid, ink-20 for row separators and image borders, ink-40 for the dashed slip divider, ink-50 for mono labels, ink-60 for secondary copy. Over navy: white-15 for hairlines and the tracking rail, white-50 for muted meta, white-70 for body copy (and the ripple fill).

Typography

Two Google Fonts, both real @imports. Hanken Grotesk (400–800) is the UI and display face — extrabold (800) for the hero and section headings, used italic for the prescriber signature. Space Mono (400/700) is the clinical voice: all field labels, eyebrows, numeric values, dates, IDs, and footer license codes, almost always uppercase with wide tracking and tabular-nums (.tnum). No bespoke faces; both are open-source.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(36→48px)	800	1.05	-0.01em	Hero h1
heading	24px (2xl–3xl)	800	tight	-0.01em	Section / panel headings
body	16px	400	1.6	—	Paragraph copy
label	10px	400	1.4	0.15–0.25em	Mono labels, eyebrows (uppercase)
numeric	20px	700	—	—	QTY/MG/FREQ tabular values
signature	24px	400	—	—	Italic prescriber signature

Layout

Base unit is 4px on the Tailwind scale; the dominant horizontal gutter is px-8 (32px) rising to px-12 (48px) at lg. The page is full-bleed and section-divided by hairlines rather than wrapped in a centered max-width. The hero is a grid-cols-[40%_60%] split (navy brand column / white Rx slip) filling min-h-screen. Section 02, the "Medicine Cabinet", is a flex row: a fluid ledger column of status-grouped rows beside a fixed 340px sticky navy sidebar (sticky top-0 self-start min-h-screen, lg-only). Internally the Rx slip is a nested set of CSS grids (grid-cols-2, grid-cols-4) of field cells separated by hairline borders. Whitespace is tight and tabular — content sits in ruled cells, not on floating cards.

Elevation & Depth

Essentially flat. Depth comes from borders, not shadows: 1px ink/coral/white hairlines partition every region, and edge-to-edge border-b rules separate sections. The only real shadows are the tiny inset top-highlight on the tracking nodes (shadow-[inset_0_1px_0_rgba(255,255,255,0.6)]) and the ring-2 halos around them. No box-shadow cards, no glass/backdrop-blur, no glows beyond the animated animate-ping pulse behind the footer "on call" dot.

Shapes

A tight radius story. Cards, primary/ghost/renew buttons, the logo tile, image thumbnails, and the tracking box all share rounded-[10px] (md). The small mono "Request Renewal" button uses rounded-[8px] (sm). Field cells and ledger rows are square (radius 0) — they're table cells, not cards. Full pills (rounded-full) appear only as small geometry: status dots, the live ping, and the click ripple.

Components

• logo-tile — mint fill, ink ti-plus icon, 10px radius, 40px square, in the navy brand panel.
• primary-button ("Place Order" / "Refill") — mint fill, ink text, mono uppercase label, 10px radius, px-7 py-4; hover mint-hover; emits a white ripple on click.
• ghost-button ("Manage") — white fill, ink text + 1px ink border, mono label, 10px radius, px-5 py-2.5; hover inverts to ink fill / white text.
• alert-button ("Request Renewal →") — transparent, coral text + 1px coral border, mono label, 8px radius, px-3 py-1.5; hover fills coral / white text.
• renew-button ("Renew Now") — coral fill, white text, mono label, 10px radius, px-5 py-2.5; hover coral-hover.
• rx-field — transparent input in a hairline grid cell; mono uppercase label above the value; focus-within shows a 1px mint outline.
• alert-card — ink body, 1px coral border, coral header bar with ti-alert-triangle-filled and "ACTION REQUIRED", 10px radius.
• rx-row — white row with a 48px rounded image thumb, bold drug name + mono dosage line, pills-left and refill-date columns, and a trailing action button; 1px ink/20 separators.
• status-pill-row — group header: a full status dot (mint / ink / coral), uppercase mono label, and right-aligned tnum item count.
• tracking-node — 24px full-circle node, mint when done / ink with white/30 ring when pending, ring-2 ink halo and inset highlight, joined by a white-15 vertical rail.

Motion

• rx-pad-intro — GSAP on load: the Rx slip animates from autoAlpha 0, xPercent 20, 0.7s power3.out, origin right center (slides in from the right).
• rx-row-reveal — Motion One inView: ledger rows fade opacity 0→1 and rise y 16→0, staggered 0.07s, easeOut, 0.5s, triggered ~5% before the list enters.
• ripple — anime.js on button click: a white circle scales 0→4 and fades 0.5→0 over 600ms with out(3) easing, then removes itself.
• ping — Tailwind animate-ping mint pulse behind the footer "Pharmacist on call" status dot.
• button-hover — CSS color/background transitions on buttons and footer links.
• smooth-scroll — Lenis smoothWheel provides page-wide inertial scrolling.

Iconography

Tabler Icons via webfont (ti classes), outline style with a few -filled variants (ti-alert-triangle-filled). Sizes run small: text-base (~16px), text-lg (~18–20px). Default tint is mint (ti-plus logo, ti-truck-delivery, ti-phone, ti-circle-check on the green CTA shows ink); coral and white appear contextually. Icons are functional UI marks, not decorative illustration.

Do's and Don'ts

• Do keep mint as the single positive voltage and reserve coral strictly for alerts, past-due, and renewal.
• Do divide regions with 1px ink/white hairlines and dashed/edge-to-edge rules — the "ledger" feel depends on borders, not shadows.
• Do set all labels, numbers, dates, and IDs in Space Mono, uppercase, with tabular-nums.
• Do keep the 10px card/button radius and reserve full pills for dots and ripples.
• Don't introduce drop shadows, glass, or gradients — the system is flat and ruled.
• Don't round the field cells or ledger rows; they are table cells (radius 0).
• Don't add new accent hues or use coral for anything non-urgent.
• Don't swap the mono labels to the sans face — the clinical voice lives in Space Mono.

Known Gaps

• Hero/heading sizes come from Tailwind class steps (text-4xl lg:text-5xl, text-2xl/text-3xl); the display token is expressed as an equivalent clamp(36px,5vw,48px) rather than an authored CSS clamp.
• Line-heights/tracking for body and headings are Tailwind defaults (leading-relaxed, tracking-tight) approximated to numeric values.
• Icon sizes are inferred from Tailwind text-* font sizes (Tabler is a webfont sized by font-size), not explicit pixel values.