Brand Guide

Full lockups — light backgrounds only

On dark — mark plus a white HTML wordmark in Cinzel

Indiana Jewelers

Association

The wordmark baked into the full logos is near-black — never place it on dark. Pair ija-mark.png with a white Cinzel wordmark instead.

Clear space

inner guide = x (monogram height)

Define x as the height of the IJA monogram. Keep clear space of at least x on every side of the logo — the inner guide above. Never crowd it with text, photography, or other marks, and never let it sit closer to a page edge than that same margin.

Minimum size & small use

Horizontal · min 28 px tall

Mark · min 24 px tall

Favicon · 16 px (favicon.svg)

Below these sizes the wordmark loses legibility. For favicons, app icons, and any use under roughly 24 px, drop the wordmark and use the standalone mark — or favicon.svg at 16 px.

Correct & incorrect use

Do

• — Use full lockups on cream or white only.
• — Use the mark plus a Cinzel wordmark on dark.
• — Preserve the clear space on all sides.
• — Scale proportionally from the supplied files.

Don't

Never place the full wordmark logo on dark, recolor the mark, stretch or skew it, or add shadows, outlines, or other effects.

Azure — brand blue

Ink — deep blue-black

Cream — warm ivory

Brand gradient

background-image: linear-gradient(
  155deg,
  var(--color-azure-400), /* #42aaca */
  var(--color-azure-700)  /* #2c5e91 */
);

Application & proportion

Cream is the dominant ground, ink carries text and the rare dark section, and azure stays an accent. Keep the proportions roughly in that order so the palette reads calm and editorial rather than saturated.

Contrast & accessibility

Body text must clear WCAG AA (4.5 : 1) at minimum. Pair azure accents with the safe grounds above: use azure-700 for accent text on light and azure-300 on dark. Avoid mid-azures (400–600) as small text on cream — they fall short of AA.

Type scale

Each row renders at its true size. Cinzel sets Display, Title, and Subtitle; Hanken Grotesk sets Lead, Body, and Caption.

Weights & sourcing

Both families are open-source and load from Google Fonts in Layout.astro at the weights above. Cinzel is the web-licensable stand-in for the logo's FS Rome wordmark. Each carries a fallback stack — Cinzel to ui-serif, Georgia, serif, Hanken Grotesk to ui-sans-serif, system-ui, sans-serif.

The pairing: Cinzel's inscriptional capitals echo the logo's engraved heritage, while Hanken Grotesk keeps the reading experience modern, neutral, and quietly confident.

Buttons

The primary (gradient) button carries the single most important action on a view; the outline button handles secondary actions and warms from an ink hairline to azure on hover. Both expose a keyboard focus-visible ring.

Status badges