Concept “Hallmark”

1 · Mark and wordmark

A hallmark is a small mark struck into precious metal that says what the thing is and who vouched for it. The mark is a page held by two corner brackets whose terminals curl into quotation marks, drawn as a stamp: a dark green field with a single gold hairline inside the brackets. Green and gold carry heritage and permanence; the hairline is the only place gold appears at chrome weight, so it never competes with a status.

The mark is a single path with no text, so it survives as a favicon, a rail icon and a one-colour stamp. The wordmark is the UI face at 600 (Mutual) and 400 (Page); theme assets are rendered to PNG at build (logo.png · logo-dark.png · logo-rail.png · favicon.svg).

2 · Palette and the four states

The brand owns green and gold, which are also the natural accepted and reply-due colours. The concept resolves it three ways at once. (1) Accepted is brand green — a filled disc with a tick, the brand vouching; corroborated is the same disc with two ticks. (2) Reply due is a colour the brand never uses — a slate blue — and is always an open ring with the date beside it, so pending reads as “unfilled”, not “warning”. (3) Gold is reserved for chrome (hairlines, the mark, section numerals) and never appears on a state, and nothing in the state set is amber or yellow. Disputed is a muted mulberry; superseded is warm grey with a strike. A judge can test it on the Fact page: cover the colour and the shapes still tell the states apart.

3 · Type

Licence. Lato — Łukasz Dziedzic, SIL Open Font License 1.1. Libre Caslon Text — Pablo Impallari, SIL OFL 1.1. Self-hosted Latin-subset woff2 (400/700 + italic), no CDN call at runtime. Hashes use the system monospace stack, which needs no file.

4 · Contrast proof (WCAG 2.x, every text pair)

Computed at build from the token file below (relative-luminance formula); 4.5:1 is AA for body text. Borders and chip fills are non-text and are not held to it.

5 · theme＠1 tokens

Everything on these pages is one of these values. Style preset: portal. The status block is the one extension the product needs beyond today’s theme keys.

{
 "kind": "theme@1",
 "name": "mutualpage-hallmark",
 "stylePreset": "portal",
 "radius": "2px",
 "colors": {
  "light": {
   "bg": "#F4F1E8",
   "surface": "#FFFFFF",
   "surfaceAlt": "#EAE6DA",
   "border": "#D2CCBC",
   "text": "#1A231F",
   "textMuted": "#59655E",
   "brand": "#0F3D2E",
   "brandText": "#0F3D2E",
   "onBrand": "#F4F1E8",
   "accent": "#B08D3B",
   "accentText": "#775A1A",
   "rail": "#0F3D2E",
   "railText": "#CFE0D6",
   "railTextActive": "#FFFFFF",
   "railActiveSurface": "#1B5A45",
   "status": {
    "accepted": {
     "fg": "#0F3D2E",
     "bg": "#D9EADF"
    },
    "replyDue": {
     "fg": "#2E5B8E",
     "bg": "#DFE9F5"
    },
    "disputed": {
     "fg": "#7A4658",
     "bg": "#F1E3E8"
    },
    "superseded": {
     "fg": "#655F56",
     "bg": "#E7E4DB"
    }
   }
  },
  "dark": {
   "bg": "#0C1814",
   "surface": "#13241E",
   "surfaceAlt": "#1A3029",
   "border": "#2B463B",
   "text": "#ECE9DF",
   "textMuted": "#A7B3AB",
   "brand": "#277D5B",
   "brandText": "#9AD6B8",
   "onBrand": "#FFFFFF",
   "accent": "#D4B36A",
   "accentText": "#E0C47E",
   "rail": "#07110D",
   "railText": "#B9CCC1",
   "railTextActive": "#FFFFFF",
   "railActiveSurface": "#1F5A45",
   "status": {
    "accepted": {
     "fg": "#9AD6B8",
     "bg": "#1B4634"
    },
    "replyDue": {
     "fg": "#A3C1EA",
     "bg": "#1C3353"
    },
    "disputed": {
     "fg": "#DCAEC1",
     "bg": "#42262F"
    },
    "superseded": {
     "fg": "#ABA79D",
     "bg": "#2C2F2A"
    }
   }
  }
 },
 "fonts": {
  "ui": {
   "family": "Lato",
   "files": [
    "assets/fonts/lato-400-normal.woff2",
    "assets/fonts/lato-700-normal.woff2",
    "assets/fonts/lato-400-italic.woff2"
   ]
  },
  "document": {
   "family": "Libre Caslon Text",
   "files": [
    "assets/fonts/libre-caslon-text-400-normal.woff2",
    "assets/fonts/libre-caslon-text-700-normal.woff2",
    "assets/fonts/libre-caslon-text-400-italic.woff2"
   ]
  },
  "licence": "SIL OFL 1.1 (notice in assets/fonts/OFL-NOTICE.txt)"
 },
 "logo": "assets/logo.png",
 "logoDark": "assets/logo-dark.png",
 "logoRail": "assets/logo-rail.png",
 "favicon": "assets/favicon.svg"
}