---
name: clinicalscribe-taste
description: Anti-slop frontend skill for ClinicalScribe Medical ASR Benchmark. Premium clinical instrument design with ECG phosphor accents, hairline borders, and orchestrated entrance animations.
---

# ClinicalScribe Taste Skill

Anti-slop frontend skill for the ClinicalScribe Medical ASR Benchmark platform.

---

## Design Read

**"Reading this as:** B2B medical/scientific benchmark platform for Vietnamese Medical ASR evaluation, with a light "precision instrument" language — paper-white surfaces, ink text, deep violet accents, hairline borders, and IBM Plex Mono numerals. The aesthetic should feel like a premium lab report / modern dev-tool dashboard (Linear/Stripe register) — precise, data-dense, trustworthy.

---

## Dial Settings

Based on the design read:

- **`DESIGN_VARIANCE: 5`** — Scientific/professional environment, moderate asymmetry is acceptable
- **`MOTION_INTENSITY: 6`** — Orchestrated entrance animations, micro-interactions for interactivity
- **`VISUAL_DENSITY: 7`** — Data-dense benchmark platform, information-rich layouts

---

## Design System Foundation

### Typography

- **Display:** `Instrument Serif` — Editorial headings with medical gravitas
- **Body:** `Be Vietnam Pro` — UI text with Vietnamese language support
- **Mono:** `IBM Plex Mono` — Data/numerals with tabular figures

**Upgrades applied:**
- Reduce all-caps subheaders where possible
- Ensure italic descender clearance with `leading-[1.1]` minimum
- Tighten letter-spacing on large headers

### Color Calibration

ClinicalScribe already has excellent color discipline (theme flipped to
LIGHT 2026-06-11 at user request — "light theme, tech savvy, professional";
palette built in OKLCH, all small-text pairings ≥ 4.5:1):

| Token | Value | Purpose |
|-------|-------|---------|
| `--bg` | `#f9f9fb` | Cool paper-white background |
| `--surface` | `#ffffff` | Card surfaces |
| `--surface-2` | `#eeeef2` | Recessed panels / code blocks |
| `--text` | `#24242f` | Ink text |
| `--accent` | `#654abb` | Deep violet — oklch(0.50 0.17 290) |
| `--warn` | `#a15e00` | Caution states |
| `--crit` | `#c53637` | Critical/error states |

**No green anywhere** — the user rejected phosphor green, desaturated teal,
and soft blue; the accent is user-picked violet. Don't drift it back toward
the green–blue band. The theme is LIGHT — don't reintroduce dark surfaces.

**Preserve:** Single accent color (deep violet), hairline borders, soft
low-alpha shadows (rgba(20,20,45,…) ≤ 0.10). All tints derive from tokens
via `color-mix` — never hardcode accent rgba values.
**Enhance:** Add subtle grain texture, improve hover spotlight effects.

---

## Enhancement Priorities

### 1. Grain & Texture (High Impact)

Add subtle noise overlay for depth:

```css
/* Subtle film grain for tactile quality */
.grain-overlay::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
```

### 2. Spotlight Border Cards

Interactive cards that illuminate under cursor:

```css
.spotlight-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(52, 245, 197, 0.15),
    transparent 40%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spotlight-card:hover::before {
  opacity: 1;
}
```

### 3. Tactile Button States

```css
.tactile-button:active {
  transform: scale(0.98) translateY(1px);
  transition: transform 0.1s ease;
}

.tactile-button:hover {
  background-color: var(--surface-2);
}
```

### 4. Spring Physics for Animations

Replace linear easing with spring curves:

```css
.spring-in {
  animation: spring-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes spring-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
```

### 5. Stagger Refinements

```css
/* Improved stagger with spring feel */
.stagger-spring > * {
  animation: stagger-spring 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes stagger-spring {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

---

## Layout Discipline

### Preserved Elements
- Graph-paper micro-grid background (unique, on-brand)
- Scanline overlay effect
- Hairline borders (signature element)
- Editorial hero with Instrument Serif
- ECG phosphor accents (used sparingly)

### Enhancements
- Increase section breathing room
- Better vertical rhythm with `gap-y-12` or `gap-y-16`
- Asymmetric hero layout with offset stats
- Refined table row hover states

---

## Component Upgrades

### Card Component
- Add spotlight border on hover
- Subtle inner glow effect
- Refined border-radius (keep `rounded-sm`)

### Badge Component
- Add subtle shimmer on accent badges
- Refine spacing and typography
- Consistent hover states

### Leaderboard Table
- Improve row hover transitions
- Add spotlight row highlighting
- Better column breathing room
- Refine sort indicator animations

---

## Accessibility Requirements

- Honor `prefers-reduced-motion` for all animations
- Maintain WCAG AA contrast ratios
- Keep focus-visible outlines
- Screen reader support for all interactive elements

---

## Pre-Flight Checklist

- [ ] All animations respect `prefers-reduced-motion`
- [ ] Spotlight effects work on interactive cards
- [ ] Grain texture is subtle (3-5% opacity max)
- [ ] No broken interactions
- [ ] Typography hierarchy is clear
- [ ] Light theme is consistent throughout (no stray dark surfaces)