Generated reference: edit sources under docs/helix/, then npm run site:build.

Generated from HELIX docs. Source: docs/helix/02-design/DESIGN.md. Edit the source, not this file or site/ HTML.

ddx:
  id: aibadge.design-system
  type: design-system
  links:
    - target: aibadge.product-vision
      kind: informed_by
    - target: aibadge.prd
      kind: informed_by
    - target: aibadge.design.claim-system
      kind: informs
status: draft
activity: 02-design
created: 2026-07-22

DESIGN.md — Innsigle

Per-project interface and brand system for the seal, verify surfaces, and public mark language. Complements claim schema and signing in claim-system.md. Governing product docs: vision, PRD, principles.

Design voice

Do not use in UI or mark chrome: green check "verified authentic," red "AI danger," detector percentages, "Colo · …" badges, Not By AI clone language as the only path. Chrome B4 does not mean the page is signed.

Pairing with sloptimizer: Editorial cleanup may be listed on the colophon; it must not be presented as converting model-primary work into human-authored.

Brand architecture

The badge (seal mark)

Job

1. Recognizable at small size (footer ~40–48px; social avatar-adjacent ~48–96px).
2. One family for all composition states.
3. Opens or links to colophon (and verify when signed).
4. Works as SVG/PNG without embedded C2PA (social-safe).
5. Solid stamp matrix (opaque fill + light impression)—not a transparent wireframe.

Inspiration: ancient stamp seals, medieval merchant/guild marks, pottery cartouches, hallmark countermarks (docs/sample/assets/marks/RESEARCH.md).

Anatomy

┌─────────────────────────────┐
│  [glyph]  Innsigle          │  optional wordmark at larger sizes
│           [state cue]       │  human | mixed | model (not purity)
└─────────────────────────────┘

State variants (provisional)

Geometry locked in docs/sample/assets/marks/ (craft-matrix exploration). Constraint: one family, three countermarks max for v1 states. No copied historic house marks.

Placement

Interaction states (web)

Accessibility

• State not by color alone (cue letter or pattern + text on colophon).
• Link text not "click here"; prefer "Innsigle colo" / "Verify seal".
• Contrast WCAG AA for glyph on light and dark footers (provide mono variants).

Visual hierarchy (verify and colophon pages)

• Primary: Validity + signer (if signed), or "Unsigned declaration" if not.
• Secondary: Composition state and tool list (colophon).
• Tertiary: Content fingerprint, timestamps, raw claim download.

Layout: single column, dense craft manual, not dashboard chrome.

Tokens (initial)

Color (draft)

No semantic "success = human / danger = AI" mapping.

Type

Prefer a readable grotesque + mono for digests. Final faces open.

Spacing

4px base rhythm; footer seal padded to not collide with license links.

Navigation (brand site)

Live microsite: site/ deployed by .github/workflows/pages.yml to GitHub Pages (https://documentdrivendx.github.io/innsigle/).

Design deliverables checklist

• [x] Glyph SVG (solid stamp matrix + monogram + countermarks) — docs/sample/assets/marks/
• [x] State cue variants H/M/A — human / mixed / model SVGs
• [x] Footer embed snippet — docs/sample/snippets/footer.html
• [ ] Social still template (PNG export pipeline)
• [x] Bill + verify sample page — docs/sample/index.html
• [x] Do/don't sheet — marks README

Mark exploration (2026-07-23)

Direction chosen for exploration pack: geometric double-ring stamp with a simple vertical stem (letter-I / post mark), not a figurative Nordic cosplay mark. State is a caption letter under the disk (H/M/A), not a color code.

Still open for brand polish: custom wordmark, Azgaard palette accent, PNG renders, whether state letters stay Latin H/M/A or move to inner geometry only.

Open design decisions

• [ ] Final glyph polish (stroke weights, optical balance at 16px)
• [ ] State cue: keep letters vs inner geometry only
• [ ] Wordmark custom lettering vs system font
• [ ] Accent color family under Azgaard house palette