Let a notebook's design be its own

Two things were drawn on every cover regardless of what was chosen, and
between them they are most of why a shelf of notebooks looked alike.

A 45-degree stripe texture was baked into the cover at 1.5% white. It was
meant to be imperceptible; on the darker gradients it bands visibly, and
since covers gained patterns of their own it was a second pattern
fighting the first. Removed.

And the same pair of rings sat in the middle of every one. The mark
belongs to the design now — a ring, a square, a diamond, a dot, a cross,
an arc, three bars — and the designs whose pattern already fills the face
wear nothing at all. Drawn with borders rather than an image, so each
takes its cover's own accent and stays sharp at any size.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/ui/constants.jsx

@@ -65,57 +65,67 @@ export const DEFAULT_FOLDERS = [
  * two crossed diagonals meant as a chevron came out as noisy plaid at that size.
  */
 export const PATTERNS = [
-  { id: "plain", label: "Plain", layers: "" },
+  { emblem: "ring", id: "plain", label: "Plain", layers: "" },
   {
     id: "ruled",
+    emblem: "none",
     label: "Ruled",
     layers: "repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 17px)",
   },
   {
     id: "grid",
+    emblem: "square",
     label: "Grid",
     layers:
       "repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 20px), repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 20px)",
   },
   {
     id: "pinstripe",
+    emblem: "diamond",
     label: "Pinstripe",
     layers: "repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 6px,transparent 6px 14px)",
   },
   {
     id: "bands",
+    emblem: "none",
     label: "Bands",
     layers: "repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 13px,transparent 13px 26px)",
   },
   {
     id: "dots",
+    emblem: "dot",
     label: "Dots",
     layers: "radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.5px) 0 0/13px 13px",
   },
   {
     id: "hatch",
+    emblem: "cross",
     label: "Cross-hatch",
     layers:
       "repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 11px), repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 11px)",
   },
   {
     id: "linen",
+    emblem: "arc",
     label: "Linen",
     layers:
       "repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px)",
   },
   {
     id: "ledger",
+    emblem: "bars",
     label: "Ledger",
     layers: "repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 26px)",
   },
   {
     id: "glow",
+    emblem: "none",
     label: "Corner light",
     layers: "radial-gradient(120% 85% at 18% 0%,rgba(255,255,255,.20),transparent 62%)",
   },
   {
     id: "foot",
+    emblem: "square",
     label: "Foot band",
     layers: "linear-gradient(0deg,rgba(0,0,0,.34) 0 22%,transparent 22%)",
   },
@@ -149,5 +159,16 @@ export function coverBackground(cover, pattern) {
   return layers ? `${layers}, ${base.bg}` : base.bg;
 }
 
+/**
+ * The mark in the middle of a cover.
+ *
+ * It used to be the same pair of rings on every notebook, whatever cover was
+ * chosen — which, with the same title frame and the same three dots, is why a
+ * shelf of them all looked alike. It belongs to the design now: some wear a
+ * ring, some a diamond, and the ones whose pattern already fills the face wear
+ * nothing at all.
+ */
+export const coverEmblem = (cover, pattern) => PATTERNS[coverParts(cover, pattern).pattern]?.emblem || "none";
+
 /** The rest of a cover's colours — the spine, and the accent used beside it. */
 export const coverStyle = (cover, pattern) => COVERS[coverParts(cover, pattern).cover];