ots: theme-color palette + square corners

Two design rules I'd been violating, now corrected and documented:

1. Bitcoin orange (--primary = #FF9900) is the only accent. The
   diagram boxes had decorative purple ('Your file') and yellow
   ('Calendar') borders I invented. Replaced with the theme's
   semantic vars:
   - 'Your file': neutral default (#2d3250)
   - 'Calendar': neutral default, tinted by health -> var(--success) /
     var(--warning) / var(--danger)
   - 'Bitcoin': var(--primary) (Bitcoin orange, intentional)
   Health pill colours, calendar pill border colours, ready-row
   borders, etc. all switched from invented hexes (#5cb874, #198754,
   #d77a7a, #6e3a3a, etc.) to var(--success/warning/danger).

2. No rounded corners. Stripped border-radius from every OTS card,
   dropzone, diagram box, calendar pill, queue row, and match-zone.
   Kept border-radius: 50% for the round health dot.

Documented both as hard rules in frontend/.claude/CLAUDE.md so future
edits don't drift toward upstream's rounded styling, plus a note to
use cat21-mint as the canonical reference for ordpool typography +
spacing + colour usage.

Author: hans-crypto

frontend/.claude/CLAUDE.md

@@ -69,6 +69,42 @@ npm run lint:fix        # ESLint with auto-fix
 npm run prettier        # Prettier formatting
 ```
 
+### Visual Identity (the differentiators from upstream)
+
+Ordpool's design has a few rules that look like style choices but are
+**brand differentiators**. Don't accidentally drift toward upstream
+mempool.space styling.
+
+1. **Bitcoin orange (`$bitcoin: #FF9900`) is the only accent colour.**
+   Aliased as `--primary`, `--info`, `--orange`, `--tertiary` in the
+   theme. Use `var(--primary)` for any accent. Don't invent decorative
+   tints (purple, teal, yellow, etc.) — if you need to differentiate UI
+   states, reach for the theme's semantic vars: `var(--success)` (green),
+   `var(--warning)` (yellow), `var(--danger)` (red). They're already in
+   the colour vocabulary the user knows.
+
+2. **No rounded corners.** Upstream mempool uses `border-radius` on
+   cards, buttons, dropzones, badges. Ordpool deliberately ships
+   square. Avoid `border-radius: <Npx>` in custom SCSS for ordpool
+   components. (`border-radius: 50%` for circular avatars / dots is
+   fine.) If a Bootstrap class adds rounding, override it.
+
+3. **Card / panel backgrounds**: `#181b2d` for the card itself,
+   `#11132a` for sunken/dropzone insets, `#1d1f31` for the page
+   background (`var(--bg)`). Borders default to `#2d3250`.
+
+4. **Typography**: default `<p>` body size matches `cat21-mint`. Avoid
+   the Bootstrap `.lead` class for OTS-style explanatory text — it
+   reads too large in our layout. Use `.smaller-text` (14px) only for
+   genuine asides / metadata, not body copy.
+
+5. **Icons**: FontAwesome solid (`['fas', '<name>']`), single colour
+   (white over the dark theme). Don't mix in emoji icons.
+
+When you're unsure, check `cat21-mint`'s component for the canonical
+ordpool look — it's the reference page for typography + spacing +
+colour usage.
+
 ### Code Marking Convention (for merge-friendly changes)
 
 This is a fork of mempool.space. To keep changes isolated and merges manageable, ordpool-specific code follows a three-tier marking system:

frontend/src/app/components/_ordpool/ots-diagram/ots-diagram.component.scss

@@ -5,7 +5,6 @@
 .ots-diagram {
   background-color: #11132a;
   border: 1px solid #2d3250;
-  border-radius: 8px;
   padding: 24px 16px;
 }
 
@@ -19,7 +18,6 @@
 .ots-diagram-box {
   text-align: center;
   padding: 16px 12px;
-  border-radius: 8px;
   border: 2px solid #2d3250;
   background-color: #181b2d;
   cursor: help;
@@ -45,16 +43,17 @@
     line-height: 1.3;
   }
 
-  // Phase tinting -- mirrors the queue states (queued/ready/anchored).
-  &.ots-diagram-you      { border-color: #4a5085; }
-  &.ots-diagram-calendar { border-color: #d6a85a; }
-  &.ots-diagram-bitcoin  { border-color: #f7931a; }
-
-  // Calendar liveness override: the health colour wins over the default
-  // calendar tint. Reflects the freshest calendar's last on-chain publish.
-  &.ots-diagram-calendar.health-fresh { border-color: #5cb874; }
-  &.ots-diagram-calendar.health-aging { border-color: #d6a85a; }   // same as default; "slow but not broken"
-  &.ots-diagram-calendar.health-stale { border-color: #d77a7a; }
+  // Bitcoin orange on the Bitcoin box -- single intentional accent that
+  // carries meaning (this is literally what Bitcoin's brand colour is).
+  // 'Your file' and 'Calendar' stay neutral until the calendar gets a
+  // health tint applied below.
+  &.ots-diagram-bitcoin { border-color: var(--primary); }
+
+  // Calendar liveness uses Bootstrap semantic colours so we inherit the
+  // site's existing colour vocabulary rather than inventing new hexes.
+  &.ots-diagram-calendar.health-fresh { border-color: var(--success); }
+  &.ots-diagram-calendar.health-aging { border-color: var(--warning); }
+  &.ots-diagram-calendar.health-stale { border-color: var(--danger);  }
 }
 
 .ots-diagram-health {
@@ -74,9 +73,9 @@
     display: inline-block;
   }
 
-  .ots-diagram-calendar.health-fresh & .ots-health-dot { background-color: #5cb874; }
-  .ots-diagram-calendar.health-aging & .ots-health-dot { background-color: #d6a85a; }
-  .ots-diagram-calendar.health-stale & .ots-health-dot { background-color: #d77a7a; }
+  .ots-diagram-calendar.health-fresh & .ots-health-dot { background-color: var(--success); }
+  .ots-diagram-calendar.health-aging & .ots-health-dot { background-color: var(--warning); }
+  .ots-diagram-calendar.health-stale & .ots-health-dot { background-color: var(--danger);  }
 }
 
 .ots-diagram-arrow {
@@ -95,7 +94,7 @@
   .ots-diagram-arrow-line {
     font-size: 1.4rem;
     line-height: 1;
-    color: #4a5085;
+    color: #2d3250;
   }
 }
 

frontend/src/app/components/_ordpool/ots-stamp-verify/ots-pending-queue.component.scss

@@ -6,23 +6,25 @@
   .ots-stamp-row {
     background-color: #181b2d;
     border: 1px solid #2d3250;
-    border-radius: 8px;
     padding: 16px 18px;
     margin-bottom: 12px;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 
     &.is-ready {
-      border-color: #198754;
+      border-color: var(--success);
     }
 
     &.is-undownloaded {
-      border-color: #f7931a;
-      box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.15);
+      border-color: var(--primary);
+      // Pulsing orange halo to draw the eye toward the download button.
+      // Hard-coded RGBA because Bootstrap's primary var doesn't compose
+      // into rgba() across browsers without color-mix support.
+      box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15);
       animation: ots-pulse 2s ease-in-out infinite;
     }
 
     &.is-failed {
-      border-color: #4a5085;
+      border-color: #2d3250;
       opacity: 0.85;
     }
   }
@@ -46,17 +48,16 @@
     color: #9aa0c0;
     background-color: #11132a;
     border: 1px solid #2d3250;
-    border-radius: 6px;
     padding: 4px 10px;
 
     &.is-published {
-      color: #5cb874;
-      border-color: #198754;
+      color: var(--success);
+      border-color: var(--success);
     }
 
     &.is-error {
-      color: #d77a7a;
-      border-color: #6e3a3a;
+      color: var(--danger);
+      border-color: var(--danger);
     }
 
     strong {

frontend/src/app/components/_ordpool/ots-stamp-verify/ots-stamp.component.scss

@@ -11,8 +11,7 @@
     align-items: center;
     justify-content: center;
     min-height: 140px;
-    border: 2px dashed #4a5085;
-    border-radius: 8px;
+    border: 2px dashed #2d3250;
     cursor: pointer;
     background-color: #11132a;
     transition: border-color 0.15s ease, background-color 0.15s ease;
@@ -22,7 +21,7 @@
 
     &:hover,
     &.dragging {
-      border-color: var(--bs-primary, #f7931a);
+      border-color: var(--primary);
       background-color: #1a1d36;
     }
 

frontend/src/app/components/_ordpool/ots-stamp-verify/ots-verify.component.scss

@@ -11,8 +11,7 @@
     align-items: center;
     justify-content: center;
     min-height: 140px;
-    border: 2px dashed #4a5085;
-    border-radius: 8px;
+    border: 2px dashed #2d3250;
     cursor: pointer;
     background-color: #11132a;
     transition: border-color 0.15s ease, background-color 0.15s ease;
@@ -22,7 +21,7 @@
 
     &:hover,
     &.dragging {
-      border-color: var(--bs-primary, #f7931a);
+      border-color: var(--primary);
       background-color: #1a1d36;
     }
 
@@ -43,8 +42,7 @@
       align-items: center;
       justify-content: center;
       min-height: 80px;
-      border: 1.5px dashed #4a5085;
-      border-radius: 6px;
+      border: 1.5px dashed #2d3250;
       cursor: pointer;
       background-color: #11132a;
       padding: 12px;
@@ -53,7 +51,7 @@
       color: #9aa0c0;
       transition: border-color 0.15s ease, background-color 0.15s ease;
 
-      &:hover { border-color: var(--bs-primary, #f7931a); background-color: #1a1d36; }
+      &:hover { border-color: var(--primary); background-color: #1a1d36; }
       .dropzone-input { display: none; }
       strong { color: #fff; }
     }