Redesign in Prime Intellect's design language, both themes, three viewports

Eighteen agents: three design directions judged on whether a COO on a phone
actually learns what an environment is, on craft, and on landing without a
rewrite; one spec; a foundation of measured tokens; six build lanes; three
browser verifiers; a final gate pass.

The materials are Prime Intellect's, measured from their site: near-black
grounds, one green, sharp radii, mono small-caps labels, Geist and Geist Mono
self-hosted because production CSP is font-src 'self'. Two of their own greys
fail contrast on their own ground (#737373 is 4.02:1, #6E6E6E is 3.73:1 on
#0F0F0F), so --muted is lifted and the CSS comment carries the number — or
someone will 'correct' it back. Every text-on-ground pair in both themes is
tabulated in src/index.css with its measured ratio.

The two rules that resolved every conflict: data is mono, sentences are sans;
the language wins on materials, the lesson wins on legibility. Light mode is a
finished paper theme, not an inversion.

What did not change: the derived-tabs contract, the honesty markers, the
isolation lint, every gate. 419 contract checks, entry chunk at 74% of budget,
zero horizontal overflow on any route at 390/1024/1440 in either theme.

Also flips Alert Triage to status 'live' — the pipeline built it but never
promoted it, so it was badged SPEC on its own playable page and the home page
counted one environment.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019mt6sHQHEnEYrJZvoMCJSB

src/components/ui/button.tsx

@@ -5,32 +5,42 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 /**
- * shadcn "new-york" button, retuned to PIG's tokens.
+ * shadcn "new-york" button, retuned to PIG's tokens (spec §9).
  *
  * Note `accent` in tailwind.config.js is the SUBTLE hover surface, not the
  * brand — that mapping is deliberate and documented there. So the solid CTA
  * uses `bg-brand text-accent-on`, never `bg-accent`.
+ *
+ * Every variant carries a 1px border (transparent where it has no colour) so
+ * the variants line up to the pixel when they sit in one row; a borderless
+ * ghost next to a bordered outline is otherwise 2px shorter.
+ *
+ * The solid CTA's hover differs by theme on purpose. In dark the fill has a
+ * darker sibling (`brand/90`). In light the neon green has none — darkening it
+ * reads brown — so the hover flips to the subtle ground with the text green,
+ * and the accent-edge border is what keeps it reading as the same control.
  */
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-1 ease-enter disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-sans text-sm font-medium transition-colors duration-1 ease-enter focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-brand text-accent-on shadow-sm hover:bg-brand/90',
-        secondary: 'bg-surface-2 text-fg hover:bg-surface-2/70',
-        outline: 'border border-border bg-surface text-fg hover:bg-surface-2',
+        default:
+          'border-accent-edge bg-brand text-accent-on hover:bg-accent-subtle hover:text-accent-fg dark:hover:bg-brand/90 dark:hover:text-accent-on',
+        secondary: 'bg-surface-2 text-fg hover:bg-surface-3',
+        outline: 'border-border-strong bg-surface text-fg hover:bg-surface-2',
         ghost: 'text-fg hover:bg-surface-2',
-        subtle: 'bg-accent-subtle text-accent-fg hover:bg-accent-subtle/70',
-        destructive: 'bg-danger text-white shadow-sm hover:bg-danger/90',
+        subtle: 'bg-accent-subtle text-accent-fg hover:border-accent-edge',
+        destructive: 'bg-danger text-danger-on hover:bg-danger/90',
         link: 'text-accent-fg underline-offset-4 hover:underline',
       },
       size: {
         // `h-9` is 36px, which is fine for a mouse and too small for a thumb.
         // Anything a phone visitor taps gets `size="touch"` or the `.tap`
         // helper on top — see SiteHeader.
-        sm: 'h-8 rounded-md px-3 text-xs [&_svg]:size-3.5',
+        sm: 'h-8 px-3 text-[0.8125rem] [&_svg]:size-3.5',
         default: 'h-9 px-4 py-2 [&_svg]:size-4',
-        lg: 'h-11 rounded-lg px-6 [&_svg]:size-4',
+        lg: 'h-11 px-6 [&_svg]:size-4',
         touch: 'min-h-11 px-4 py-2 [&_svg]:size-4',
         icon: 'size-9 [&_svg]:size-4',
         'icon-touch': 'size-11 [&_svg]:size-[1.125rem]',