feat(frontend): Sprint R1 — retro design system foundation

Design system inspired by Xerox Star, Smalltalk-80, and classic Mac:

- Tailwind config: retro color palette (monochrome), pixel-perfect
shadows (outset/inset bevel, hard drop shadows), bitmap font tokens
- Global CSS: IBM Plex Mono font, retro scrollbars (Win 3.1 style),
dithered background patterns, inverted selection, dotted focus rings
- 9 primitive components in src/components/retro/:
RetroWindow (title bar + status bar + close button),
RetroButton (3D bevel outset/inset), RetroMenuBar (classic Mac menu),
RetroIcon (desktop icon with label), RetroCheckbox (pixel checkbox),
RetroInput, RetroTextarea, RetroSelect (all with inset wells),
RetroBadge (monochrome status indicators)
- RetroDemo page to showcase all components (temporary, removed in R2)
- Barrel export index.ts for clean imports

No existing components modified. Build passes (tsc + vite).

https://claude.ai/code/session_01WWohTtw2CxGRawmpH1tyrY

frontend/src/App.tsx

@@ -3,12 +3,14 @@ import Admin from './pages/Admin.tsx'
 import Editor from './pages/Editor.tsx'
 import Home from './pages/Home.tsx'
 import Reader from './pages/Reader.tsx'
+import RetroDemo from './pages/RetroDemo.tsx'
 
 type View =
   | { name: 'home' }
   | { name: 'reader'; manuscriptId: string; profileId: string }
   | { name: 'admin' }
   | { name: 'editor'; pageId: string }
+  | { name: 'retro-demo' }
 
 export default function App() {
   const [view, setView] = useState<View>({ name: 'home' })
@@ -37,6 +39,10 @@ export default function App() {
     )
   }
 
+  if (view.name === 'retro-demo') {
+    return <RetroDemo onBack={() => setView({ name: 'home' })} />
+  }
+
   return (
     <Home
       onOpenManuscript={(manuscriptId, profileId) =>

frontend/src/components/retro/RetroBadge.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+
+type Variant = 'default' | 'success' | 'warning' | 'error' | 'info'
+
+interface Props {
+  children: ReactNode
+  variant?: Variant
+  className?: string
+}
+
+const variantStyles: Record<Variant, string> = {
+  default:  'bg-retro-gray text-retro-black',
+  success:  'bg-retro-black text-retro-white',
+  warning:  'bg-retro-white text-retro-black border-dashed',
+  error:    'bg-retro-white text-retro-black font-bold',
+  info:     'bg-retro-light text-retro-black',
+}
+
+export default function RetroBadge({
+  children,
+  variant = 'default',
+  className = '',
+}: Props) {
+  return (
+    <span
+      className={`
+        inline-block
+        px-2 py-[1px]
+        text-retro-xs font-retro
+        border border-retro-black
+        ${variantStyles[variant]}
+        ${className}
+      `}
+    >
+      {children}
+    </span>
+  )
+}

frontend/src/components/retro/RetroButton.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode, ButtonHTMLAttributes } from 'react'
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+  /** Render as a small compact button */
+  size?: 'sm' | 'md'
+  /** If true, renders in "pressed" state */
+  pressed?: boolean
+}
+
+export default function RetroButton({
+  children,
+  size = 'md',
+  pressed = false,
+  className = '',
+  disabled,
+  ...rest
+}: Props) {
+  const padding = size === 'sm' ? 'px-2 py-[1px]' : 'px-3 py-[3px]'
+  const fontSize = size === 'sm' ? 'text-retro-xs' : 'text-retro-sm'
+
+  return (
+    <button
+      className={`
+        ${padding} ${fontSize}
+        font-retro font-medium
+        bg-retro-gray
+        border border-retro-black
+        ${pressed
+          ? 'shadow-retro-inset'
+          : 'shadow-retro-outset active:shadow-retro-inset'
+        }
+        ${disabled
+          ? 'text-retro-darkgray cursor-not-allowed'
+          : 'text-retro-black hover:bg-retro-light cursor-pointer'
+        }
+        select-none
+        ${className}
+      `}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}

frontend/src/components/retro/RetroCheckbox.tsx

@@ -0,0 +1,48 @@
+interface Props {
+  /** Label text next to the checkbox */
+  label: string
+  /** Controlled checked state */
+  checked: boolean
+  /** Change handler */
+  onChange: (checked: boolean) => void
+  /** Disabled state */
+  disabled?: boolean
+  /** Extra CSS classes on the wrapper */
+  className?: string
+}
+
+export default function RetroCheckbox({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  className = '',
+}: Props) {
+  return (
+    <label
+      onClick={() => { if (!disabled) onChange(!checked) }}
+      className={`
+        inline-flex items-center gap-[6px]
+        text-retro-sm font-retro
+        ${disabled ? 'text-retro-darkgray cursor-not-allowed' : 'cursor-pointer'}
+        select-none
+        ${className}
+      `}
+    >
+      <span
+        className={`
+          inline-flex items-center justify-center
+          w-[13px] h-[13px]
+          border border-retro-black
+          bg-retro-white
+          shadow-retro-well
+          text-[10px] leading-none font-bold
+          shrink-0
+        `}
+      >
+        {checked && <span className="text-retro-black">x</span>}
+      </span>
+      {label}
+    </label>
+  )
+}

frontend/src/components/retro/RetroIcon.tsx

@@ -0,0 +1,63 @@
+interface Props {
+  /** Label displayed below the icon */
+  label: string
+  /** Emoji or text character used as the icon glyph */
+  glyph: string
+  /** Click handler */
+  onClick?: () => void
+  /** If true, renders in selected/highlighted state */
+  selected?: boolean
+  /** Extra CSS classes */
+  className?: string
+}
+
+export default function RetroIcon({
+  label,
+  glyph,
+  onClick,
+  selected = false,
+  className = '',
+}: Props) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex flex-col items-center gap-1
+        p-2 w-[80px]
+        cursor-pointer select-none
+        ${className}
+      `}
+      onDoubleClick={onClick}
+    >
+      {/* Icon box */}
+      <div
+        className={`
+          w-[48px] h-[48px]
+          flex items-center justify-center
+          border border-retro-black
+          text-[24px] leading-none
+          ${selected
+            ? 'bg-retro-black text-retro-white'
+            : 'bg-retro-white text-retro-black hover:bg-retro-light'
+          }
+          shadow-retro-outset
+        `}
+      >
+        {glyph}
+      </div>
+      {/* Label */}
+      <span
+        className={`
+          text-retro-xs text-center leading-tight
+          max-w-full break-words
+          ${selected
+            ? 'bg-retro-select text-retro-select-text px-1'
+            : 'text-retro-black'
+          }
+        `}
+      >
+        {label}
+      </span>
+    </button>
+  )
+}

frontend/src/components/retro/RetroInput.tsx

@@ -0,0 +1,30 @@
+import type { InputHTMLAttributes } from 'react'
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  /** Optional label rendered above the input */
+  label?: string
+}
+
+export default function RetroInput({ label, className = '', ...rest }: Props) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      {label && (
+        <label className="text-retro-xs font-retro font-medium text-retro-black">
+          {label}
+        </label>
+      )}
+      <input
+        className={`
+          px-2 py-[3px]
+          text-retro-sm font-retro
+          bg-retro-white text-retro-black
+          border border-retro-black
+          shadow-retro-well
+          placeholder:text-retro-darkgray
+          ${className}
+        `}
+        {...rest}
+      />
+    </div>
+  )
+}

frontend/src/components/retro/RetroMenuBar.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react'
+
+export interface MenuItem {
+  label: string
+  onClick?: () => void
+  disabled?: boolean
+}
+
+interface Props {
+  /** Left-aligned items (logo, menus) */
+  items?: MenuItem[]
+  /** Right-aligned content (search, status) */
+  right?: ReactNode
+  /** Extra CSS classes */
+  className?: string
+}
+
+export default function RetroMenuBar({ items = [], right, className = '' }: Props) {
+  return (
+    <div
+      className={`
+        flex items-center
+        bg-retro-gray
+        border-b-retro border-retro-black
+        shadow-retro-outset
+        px-1 py-[2px]
+        select-none shrink-0
+        ${className}
+      `}
+    >
+      {items.map((item, i) => (
+        <button
+          key={i}
+          onClick={item.onClick}
+          disabled={item.disabled}
+          className={`
+            px-3 py-[2px]
+            text-retro-sm font-retro font-medium
+            ${item.disabled
+              ? 'text-retro-darkgray cursor-not-allowed'
+              : 'text-retro-black hover:bg-retro-black hover:text-retro-white cursor-pointer'
+            }
+          `}
+        >
+          {item.label}
+        </button>
+      ))}
+      {right && (
+        <div className="ml-auto flex items-center gap-1">
+          {right}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/retro/RetroSelect.tsx

@@ -0,0 +1,38 @@
+import type { SelectHTMLAttributes } from 'react'
+
+interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
+  /** Optional label rendered above the select */
+  label?: string
+  /** Options: array of {value, label} */
+  options: { value: string; label: string }[]
+}
+
+export default function RetroSelect({ label, options, className = '', ...rest }: Props) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      {label && (
+        <label className="text-retro-xs font-retro font-medium text-retro-black">
+          {label}
+        </label>
+      )}
+      <select
+        className={`
+          px-2 py-[3px]
+          text-retro-sm font-retro
+          bg-retro-white text-retro-black
+          border border-retro-black
+          shadow-retro-well
+          cursor-pointer
+          ${className}
+        `}
+        {...rest}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

frontend/src/components/retro/RetroTextarea.tsx

@@ -0,0 +1,32 @@
+import type { TextareaHTMLAttributes } from 'react'
+
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Optional label rendered above the textarea */
+  label?: string
+}
+
+export default function RetroTextarea({ label, className = '', ...rest }: Props) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      {label && (
+        <label className="text-retro-xs font-retro font-medium text-retro-black">
+          {label}
+        </label>
+      )}
+      <textarea
+        className={`
+          px-2 py-[3px]
+          text-retro-sm font-retro
+          bg-retro-white text-retro-black
+          border border-retro-black
+          shadow-retro-well
+          placeholder:text-retro-darkgray
+          retro-scroll
+          resize-y
+          ${className}
+        `}
+        {...rest}
+      />
+    </div>
+  )
+}

frontend/src/components/retro/RetroWindow.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react'
+
+interface Props {
+  /** Window title shown in the title bar */
+  title: string
+  /** Optional status text displayed in the bottom status bar */
+  statusBar?: string
+  /** Called when the close button is clicked (omit to hide the button) */
+  onClose?: () => void
+  /** Extra CSS classes for the outer container */
+  className?: string
+  /** Content rendered inside the window body */
+  children: ReactNode
+  /** If true, window body is scrollable with retro scrollbars */
+  scrollable?: boolean
+  /** If true, the window is rendered as "active" (darker title bar) */
+  active?: boolean
+}
+
+export default function RetroWindow({
+  title,
+  statusBar,
+  onClose,
+  className = '',
+  children,
+  scrollable = false,
+  active = true,
+}: Props) {
+  return (
+    <div
+      className={`
+        flex flex-col
+        border-retro border-retro-black bg-retro-gray
+        shadow-retro
+        ${className}
+      `}
+    >
+      {/* ── Title bar ──────────────────────────────────────────── */}
+      <div
+        className={`
+          flex items-center gap-2 px-2 py-[3px]
+          select-none shrink-0
+          ${active ? 'bg-retro-black text-retro-white' : 'bg-retro-darkgray text-retro-white'}
+        `}
+      >
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="
+              w-[14px] h-[14px] flex items-center justify-center
+              border border-retro-white bg-retro-gray text-retro-black
+              text-[9px] leading-none font-bold
+              hover:bg-retro-white active:bg-retro-darkgray
+            "
+            aria-label="Fermer"
+          >
+            x
+          </button>
+        )}
+        <span className="flex-1 text-retro-xs font-bold truncate tracking-wide">
+          {title}
+        </span>
+      </div>
+
+      {/* ── Content area ───────────────────────────────────────── */}
+      <div
+        className={`
+          flex-1 bg-retro-white
+          border-t-0
+          m-[3px] mt-0
+          shadow-retro-well
+          ${scrollable ? 'overflow-auto retro-scroll' : 'overflow-hidden'}
+        `}
+      >
+        {children}
+      </div>
+
+      {/* ── Status bar (optional) ──────────────────────────────── */}
+      {statusBar !== undefined && (
+        <div
+          className="
+            px-2 py-[2px]
+            text-retro-xs text-retro-black
+            border-t border-retro-darkgray
+            bg-retro-gray
+            shadow-retro-well
+            mx-[3px] mb-[3px]
+            truncate shrink-0
+          "
+        >
+          {statusBar}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/retro/index.ts

@@ -0,0 +1,9 @@
+export { default as RetroWindow } from './RetroWindow'
+export { default as RetroButton } from './RetroButton'
+export { default as RetroMenuBar } from './RetroMenuBar'
+export { default as RetroIcon } from './RetroIcon'
+export { default as RetroCheckbox } from './RetroCheckbox'
+export { default as RetroInput } from './RetroInput'
+export { default as RetroTextarea } from './RetroTextarea'
+export { default as RetroSelect } from './RetroSelect'
+export { default as RetroBadge } from './RetroBadge'

frontend/src/index.css

@@ -1,3 +1,126 @@
+/* ── Google Font: IBM Plex Mono (must precede @tailwind) ───────────── */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* ══════════════════════════════════════════════════════════════════════
+   IIIF Studio — Retro Design System (global styles)
+   Inspired by Xerox Star, Smalltalk-80, GEOS, classic Mac
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── Base reset for retro look ─────────────────────────────────────── */
+@layer base {
+  html {
+    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    -webkit-font-smoothing: none;
+    -moz-osx-font-smoothing: unset;
+    background-color: #c0c0c0;
+    color: #000000;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+  }
+
+  /* Disable subpixel antialiasing for that crisp pixel look */
+  * {
+    text-rendering: optimizeSpeed;
+  }
+
+  /* Focus ring: dotted black outline (classic retro) */
+  *:focus-visible {
+    outline: 1px dotted #000000;
+    outline-offset: 1px;
+  }
+
+  /* Selection: classic inverted */
+  ::selection {
+    background-color: #000080;
+    color: #ffffff;
+  }
+}
+
+/* ── Retro scrollbar (Windows 3.1 style) ───────────────────────────── */
+@layer components {
+  /* Webkit-based browsers */
+  .retro-scroll::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+  }
+
+  .retro-scroll::-webkit-scrollbar-track {
+    background:
+      repeating-conic-gradient(
+        #c0c0c0 0% 25%, #dfdfdf 0% 50%
+      ) 50% / 2px 2px;
+  }
+
+  .retro-scroll::-webkit-scrollbar-thumb {
+    background-color: #c0c0c0;
+    border: 1px solid #000000;
+    box-shadow:
+      inset -1px -1px 0 #808080,
+      inset 1px 1px 0 #ffffff;
+  }
+
+  .retro-scroll::-webkit-scrollbar-button {
+    background-color: #c0c0c0;
+    border: 1px solid #000000;
+    box-shadow:
+      inset -1px -1px 0 #808080,
+      inset 1px 1px 0 #ffffff;
+    display: block;
+    height: 16px;
+    width: 16px;
+  }
+
+  .retro-scroll::-webkit-scrollbar-corner {
+    background-color: #c0c0c0;
+  }
+
+  /* Firefox */
+  .retro-scroll {
+    scrollbar-width: auto;
+    scrollbar-color: #c0c0c0 #dfdfdf;
+  }
+}
+
+/* ── Desktop dithered background ───────────────────────────────────── */
+@layer utilities {
+  .bg-retro-dither {
+    background-color: #c0c0c0;
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23a0a0a0'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23a0a0a0'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+  }
+
+  .bg-retro-dither-dark {
+    background-color: #808080;
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23606060'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23606060'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+  }
+
+  .bg-retro-dither-light {
+    background-color: #dfdfdf;
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23c8c8c8'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23c8c8c8'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+  }
+
+  /* Horizontal lines pattern */
+  .bg-retro-lines {
+    background-color: #c0c0c0;
+    background-image: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 1px,
+      #a0a0a0 1px,
+      #a0a0a0 2px
+    );
+    background-size: 100% 4px;
+  }
+}

frontend/src/pages/RetroDemo.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react'
+import {
+  RetroWindow,
+  RetroButton,
+  RetroMenuBar,
+  RetroIcon,
+  RetroCheckbox,
+  RetroInput,
+  RetroTextarea,
+  RetroSelect,
+  RetroBadge,
+} from '../components/retro'
+
+export default function RetroDemo({ onBack }: { onBack: () => void }) {
+  const [checked1, setChecked1] = useState(true)
+  const [checked2, setChecked2] = useState(false)
+  const [selectedIcon, setSelectedIcon] = useState<string | null>(null)
+  const [inputVal, setInputVal] = useState('')
+  const [textareaVal, setTextareaVal] = useState('Explicit liber primus incipit secundus...')
+  const [selectVal, setSelectVal] = useState('medieval-illuminated')
+
+  return (
+    <div className="min-h-screen bg-retro-dither">
+      {/* ── Menu Bar ─────────────────────────────────────────── */}
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio', onClick: onBack },
+          { label: 'Fichier' },
+          { label: 'Edition' },
+          { label: 'Aide' },
+          { label: 'Disabled', disabled: true },
+        ]}
+        right={
+          <span className="text-retro-xs text-retro-darkgray px-2">
+            Design System Demo
+          </span>
+        }
+      />
+
+      <div className="p-4 flex flex-col gap-4 max-w-4xl mx-auto">
+        {/* ── Section: Buttons ──────────────────────────────── */}
+        <RetroWindow title="RetroButton" statusBar="Boutons avec bevel 3D outset/inset">
+          <div className="p-3 flex flex-wrap gap-2 items-center">
+            <RetroButton>Normal</RetroButton>
+            <RetroButton size="sm">Small</RetroButton>
+            <RetroButton pressed>Pressed</RetroButton>
+            <RetroButton disabled>Disabled</RetroButton>
+            <RetroButton onClick={onBack}>Retour Accueil</RetroButton>
+          </div>
+        </RetroWindow>
+
+        {/* ── Section: Window variants ─────────────────────── */}
+        <div className="flex gap-4">
+          <RetroWindow
+            title="Fenetre active"
+            onClose={() => {}}
+            statusBar="Active window"
+            className="flex-1"
+            active
+          >
+            <div className="p-3 text-retro-sm">
+              Contenu de la fenetre avec barre de titre noire.
+              Le bouton [x] ferme la fenetre.
+            </div>
+          </RetroWindow>
+
+          <RetroWindow
+            title="Fenetre inactive"
+            onClose={() => {}}
+            statusBar="Inactive window"
+            className="flex-1"
+            active={false}
+          >
+            <div className="p-3 text-retro-sm">
+              Une fenetre non focusee a une barre de titre grise.
+            </div>
+          </RetroWindow>
+        </div>
+
+        {/* ── Section: Scrollable window ───────────────────── */}
+        <RetroWindow title="Scrollable Window" scrollable className="h-[150px]">
+          <div className="p-3 text-retro-sm">
+            {Array.from({ length: 20 }, (_, i) => (
+              <p key={i}>Ligne {i + 1} — Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            ))}
+          </div>
+        </RetroWindow>
+
+        {/* ── Section: Icons ───────────────────────────────── */}
+        <RetroWindow title="RetroIcon — Desktop Icons" statusBar="Cliquez pour selectionner">
+          <div className="p-4 flex flex-wrap gap-2 bg-retro-dither-light">
+            {[
+              { glyph: '\u{1F4DC}', label: 'Beatus' },
+              { glyph: '\u{1F4D6}', label: 'Cartulaire' },
+              { glyph: '\u{1F4C4}', label: 'Charte' },
+              { glyph: '\u{1F5BC}', label: 'Enluminures' },
+              { glyph: '\u{1F4BE}', label: 'Export' },
+              { glyph: '\u{2699}', label: 'Config' },
+            ].map((icon) => (
+              <RetroIcon
+                key={icon.label}
+                glyph={icon.glyph}
+                label={icon.label}
+                selected={selectedIcon === icon.label}
+                onClick={() => setSelectedIcon(icon.label)}
+              />
+            ))}
+          </div>
+        </RetroWindow>
+
+        {/* ── Section: Form controls ───────────────────────── */}
+        <RetroWindow title="Form Controls" statusBar="Inputs, textareas, selects, checkboxes">
+          <div className="p-3 flex flex-col gap-3">
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <RetroInput
+                  label="Identifiant du corpus"
+                  placeholder="ex: beatus-lat8878"
+                  value={inputVal}
+                  onChange={(e) => setInputVal(e.target.value)}
+                />
+              </div>
+              <div className="flex-1">
+                <RetroSelect
+                  label="Profil de corpus"
+                  value={selectVal}
+                  onChange={(e) => setSelectVal(e.target.value)}
+                  options={[
+                    { value: 'medieval-illuminated', label: 'Medieval Illuminated' },
+                    { value: 'medieval-textual', label: 'Medieval Textual' },
+                    { value: 'early-modern-print', label: 'Early Modern Print' },
+                    { value: 'modern-handwritten', label: 'Modern Handwritten' },
+                  ]}
+                />
+              </div>
+            </div>
+
+            <RetroTextarea
+              label="Transcription diplomatique"
+              value={textareaVal}
+              onChange={(e) => setTextareaVal(e.target.value)}
+              rows={4}
+            />
+
+            <div className="flex gap-4">
+              <RetroCheckbox
+                label="OCR diplomatique"
+                checked={checked1}
+                onChange={setChecked1}
+              />
+              <RetroCheckbox
+                label="Iconographie"
+                checked={checked2}
+                onChange={setChecked2}
+              />
+              <RetroCheckbox
+                label="Disabled"
+                checked={false}
+                onChange={() => {}}
+                disabled
+              />
+            </div>
+          </div>
+        </RetroWindow>
+
+        {/* ── Section: Badges ──────────────────────────────── */}
+        <RetroWindow title="RetroBadge — Status Indicators">
+          <div className="p-3 flex flex-wrap gap-2 items-center">
+            <RetroBadge>default</RetroBadge>
+            <RetroBadge variant="success">validated</RetroBadge>
+            <RetroBadge variant="warning">needs_review</RetroBadge>
+            <RetroBadge variant="error">failed</RetroBadge>
+            <RetroBadge variant="info">machine_draft</RetroBadge>
+          </div>
+        </RetroWindow>
+
+        {/* ── Section: Typography ──────────────────────────── */}
+        <RetroWindow title="Typography & Utilities">
+          <div className="p-3 flex flex-col gap-2">
+            <p className="text-retro-2xl font-bold">Heading 2XL — IIIF Studio</p>
+            <p className="text-retro-xl font-bold">Heading XL — Beatus de Saint-Sever</p>
+            <p className="text-retro-lg font-semibold">Heading LG — Folio 13r</p>
+            <p className="text-retro-base">Body base — Explicit liber primus incipit secundus</p>
+            <p className="text-retro-sm">Body SM — Metadata and labels</p>
+            <p className="text-retro-xs text-retro-darkgray">Caption XS — Timestamps and fine print</p>
+            <hr className="border-retro-darkgray" />
+            <div className="flex gap-4">
+              <div className="p-2 bg-retro-dither text-retro-xs">bg-retro-dither</div>
+              <div className="p-2 bg-retro-dither-dark text-retro-xs text-retro-white">bg-retro-dither-dark</div>
+              <div className="p-2 bg-retro-dither-light text-retro-xs">bg-retro-dither-light</div>
+              <div className="p-2 bg-retro-lines text-retro-xs">bg-retro-lines</div>
+            </div>
+          </div>
+        </RetroWindow>
+      </div>
+    </div>
+  )
+}

frontend/tailwind.config.js

@@ -2,7 +2,53 @@
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      /* ── Retro palette ─────────────────────────────────────────── */
+      colors: {
+        retro: {
+          white:    '#ffffff',
+          light:    '#dfdfdf',
+          gray:     '#c0c0c0',
+          darkgray: '#808080',
+          black:    '#000000',
+          /* Accent for selected / active items */
+          select:   '#000080',
+          'select-text': '#ffffff',
+        },
+      },
+
+      /* ── Retro fonts ───────────────────────────────────────────── */
+      fontFamily: {
+        retro:  ['"IBM Plex Mono"', '"Courier New"', 'Courier', 'monospace'],
+        mono:   ['"IBM Plex Mono"', '"Courier New"', 'Courier', 'monospace'],
+      },
+
+      /* ── Hard drop shadows (no blur) ───────────────────────────── */
+      boxShadow: {
+        'retro':       '2px 2px 0px 0px #000000',
+        'retro-lg':    '3px 3px 0px 0px #000000',
+        /* Outset bevel (button at rest) */
+        'retro-outset': 'inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff',
+        /* Inset bevel (button pressed) */
+        'retro-inset':  'inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff',
+        /* Window inner area */
+        'retro-well':   'inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf',
+      },
+
+      /* ── Spacing / sizing tokens ───────────────────────────────── */
+      borderWidth: {
+        'retro': '2px',
+      },
+
+      fontSize: {
+        'retro-xs':  ['11px', { lineHeight: '16px' }],
+        'retro-sm':  ['12px', { lineHeight: '18px' }],
+        'retro-base': ['13px', { lineHeight: '20px' }],
+        'retro-lg':  ['15px', { lineHeight: '22px' }],
+        'retro-xl':  ['18px', { lineHeight: '26px' }],
+        'retro-2xl': ['22px', { lineHeight: '30px' }],
+      },
+    },
   },
   plugins: [],
 }