diff --git a/frontend/src/ui/NotebookCover.jsx b/frontend/src/ui/NotebookCover.jsx
index 567e37a..d3abe59 100644
--- a/frontend/src/ui/NotebookCover.jsx
+++ b/frontend/src/ui/NotebookCover.jsx
@@ -1,5 +1,105 @@
import { useState } from "react";
-import { coverBackground, coverStyle } from "./constants.jsx";
+import { coverBackground, coverEmblem, coverStyle } from "./constants.jsx";
+
+/**
+ * The mark in the middle of a cover.
+ *
+ * Every notebook used to wear the same pair of rings, whatever cover was
+ * chosen — which is most of why a shelf of them looked alike. It belongs to the
+ * design now, and the designs whose pattern already fills the face wear nothing.
+ *
+ * Drawn with borders rather than with an image, so it takes the cover's own
+ * accent colour and stays sharp at any size.
+ */
+function Emblem({ kind, accent }) {
+ if (kind === "none") return null;
+
+ const box = {
+ position: "absolute",
+ top: 28,
+ left: "50%",
+ transform: "translateX(-50%)",
+ width: 50,
+ height: 50,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ };
+ const line = `${accent}55`;
+ const faint = `${accent}33`;
+
+ if (kind === "ring") {
+ return (
+
+
+
+ );
+ }
+ if (kind === "square") {
+ return (
+
+
+
+ );
+ }
+ if (kind === "diamond") {
+ return (
+
+
+
+ );
+ }
+ if (kind === "dot") {
+ return (
+
+
+
+ );
+ }
+ if (kind === "cross") {
+ return (
+
+
+
+
+ );
+ }
+ if (kind === "arc") {
+ return (
+
+
+
+ );
+ }
+ if (kind === "bars") {
+ return (
+
+ {[18, 30, 22].map((h, i) => (
+
+ ))}
+
+ );
+ }
+ return null;
+}
/* ═══════ NOTEBOOK COVER ═══════ */
export function NotebookCover({
@@ -19,6 +119,7 @@ export function NotebookCover({
// colour, the face from both.
const cover = coverStyle(notebook.cover, notebook.coverPattern);
const face = coverBackground(notebook.cover, notebook.coverPattern);
+ const emblem = coverEmblem(notebook.cover, notebook.coverPattern);
const [hovered, setHovered] = useState(false);
return (