One string carries the identity.
Rationale, tokens, sitemap, component inventory, placeholder tokens, and the list of things this design was tempted to say but could not verify.
The SPN, drawn as what it is.
Every page header reads as an SPN: SpnManager/providers:26. The product name is the service class, the page is the host, and the port slot carries the one number that matters on that page (26 providers, 74 commands, 13/15 scenarios) or nothing. The 404 page is HTTP/host:404.
The three parts get three fixed colours everywhere they appear: class in the accent, host in ink, port in muted ink. Readers learn the anatomy from the header before they reach the inspector.
Rejected: the three-party handshake as a diagram system (needs many drawings to stay honest, and becomes decoration fast); the ticket-versus-fallback motif as identity (it is the right vocabulary for verdicts, so it is used there and only there); any network mesh, shield, or padlock.
The second colour, a warm orange, is reserved for NTLM, fallback, warnings, and placeholder tokens. It never decorates. Grey hatching is reserved for Unreached.
- sans
- Source Sans 3 → Segoe UI, Helvetica, Arial
- mono
- Fira Code → ui-monospace, Cascadia Code, Consolas
- body
- 17 / 1.55
- lede
- 21 / 1.45, ink2
- h3
- 21 / 1.3 / 600
- h2
- 32 / 1.15 / 600
- h1
- 52 (44 on documents, 54 home) / 1.08 / 600
- mono UI
- 12.5 and 13 for labels, 14 in code blocks
- display mono
- 36 to 48 for the SPN mark and numbers
- space scale
- 4 · 8 · 12 · 16 · 24 · 28 · 40 · 56 · 72 · 88
- measure
- 62ch body, 58ch lede, 22ch h1
- radius
- 3px controls, 4px containers
- rules
- 1px --line; 2px accent underline for active nav and the SPN mark
- container
- 1100px marketing, 1240px catalog and reference, 760px articles
- motion
- none ambient. Reserved for a ticket flow on the demo page when a recording exists.
Seven items in the bar, one persistent incident exit, and a footer that lists everything.
Primary nav: Problem, How it works, Providers, Audit, Proof, Docs, Pricing. The incident reader gets a distinct orange link, "Kerberos broken now?", on every page; it goes to the decision tree, which links the inspector. Everything else is reachable from the footer, which is the full sitemap.
The ~100 generated wiki pages live under Docs at reference/. They never appear in the primary nav or the footer individually: the reference index owns them with search and grouped sidebar, each provider page in the catalog links to its own wiki page, and the header on every wiki page reads SpnManager/reference:74 so the reader knows the size of the space they are in.
| component | where | notes |
|---|---|---|
| Site header | every page | SPN-shaped crumb, 7 nav items, incident link, theme toggle (system / light / dark, persisted) |
| Footer | every page | five-column sitemap, version and availability line |
| Hero | every page | eyebrow, h1, lede; optional buttons |
| SPN anatomy mark | home, inspector, design | three segments with rules and labels; wraps on narrow widths |
| Inline SPN | prose, code, glossary | class / host : port colouring |
| Code block | throughout | label bar, mono 14, command / comment / warning colours; real |
| Verdict chip | proof, how, demo, coverage | PASS · INCONCLUSIVE · FAIL · UNREACHED · CLEAN · FINDINGS, always as words |
| Coverage bar | home, coverage | three dispositions; hatched = unreached |
| Proof table | home, how, proof, demo | before / after / oracle 2 / verdict |
| Step list | how, quickstart, demo, buy | mono numeral gutter |
| Card grid | throughout | auto-fit, 1px border, no shadow |
| Definition list | install, audit, trust, legal | mono terms, prose definitions |
| Placeholder token | pricing, legal, install… | orange mono chip; every one is listed below |
| Static note | tools, pricing | dashed border; states what is illustrative or degraded |
| Filter buttons | providers | platform · far side · capability; all rows shown without JS |
| Inspector | inspector | input, anatomy, notes list, provider mapping; static anatomy below |
| Decision tree | decision-tree | path, question card, leaf card; full tree in text below |
| Wiki shell | reference, wiki-template | sidebar with search and grouped commands, article, on-page nav, voice tabs |
| Legal shell | privacy, terms, cookies, data… | numbered sections with side nav and counsel note |
| Error page | 404, 500 | HTTP/host:code as the mark |
147 tokens. Every one must be resolved or removed before publication.
| token | pages |
|---|---|
{{A11Y_KNOWN_GAPS}} | accessibility |
{{ACCESSIBILITY_EMAIL}} | accessibility |
{{AD_MODULE_REQUIREMENT}} | install |
{{ANALYTICS_POLICY}} | cookies, privacy |
{{AUDIT_CHANGES}} | release-notes-template |
{{AWS_CONTRACT_DIMENSIONS}} | buy |
{{AWS_LISTING_URL}} | buy, license |
{{AZURE_LISTING_URL}} | buy, license |
{{AZURE_PLAN_NAMES}} | buy |
{{BILLING_PERIOD}} | pricing |
{{BOUNTY_POLICY}} | disclosure |
{{BREAKING_CHANGES}} | release-notes-template |
{{BREAKING_COUNT}} | release-notes-template |
{{BUSINESS_HOURS}} | contact |
{{CHANGELOG_0_4_0}} | changelog |
{{CHANGELOG_PREVIOUS}} | changelog |
{{COMPANY_LOCATION}} | about |
{{COOKIE_CONSENT_MECHANISM}} | cookies |
{{COUNT_EXPORT}} | reference |
{{COUNT_GET}} | reference |
{{COUNT_INVOKE}} | reference |
{{COUNT_NEW}} | reference |
{{COUNT_START}} | reference |
{{COUNT_TEST}} | reference |
{{DATA_RIGHTS_TEXT}} | privacy |
{{DATA_TRANSFER_TEXT}} | data-handling |
{{DEMO_RECORDING_URL}} | demo |
{{DIRECT_SALES_POLICY}} | pricing |
{{DISCLOSURE_ACK_TARGET}} | disclosure |
{{DISCLOSURE_FIX_TARGET}} | disclosure |
{{DISCLOSURE_UPDATE_CADENCE}} | disclosure |
{{DISTRIBUTION_CHANNEL}} | install, quickstart |
{{DOTNET_REQUIREMENT}} | install |
{{EVAL_DURATION}} | license, pricing |
{{EVAL_HOWTO}} | license, pricing |
{{EVAL_PRODUCTION_POLICY}} | license |
{{EVAL_SCOPE}} | license, pricing |
{{EVAL_SUPPORT_POLICY}} | license, support |
{{EVAL_TERMS}} | pricing, terms |
{{EVIDENCE_PACK_URL}} | proof |
{{FONT_HOST}} | cookies |
{{FOUNDING_YEAR}} | about |
{{FREE_TIER_POLICY}} | pricing |
{{FULFILLMENT_URL}} | buy |
{{GENERAL_EMAIL}} | contact |
{{GOVERNING_LAW}} | terms |
{{ISSUE_TRACKER_URL}} | support |
{{JURISDICTION}} | trust |
{{KNOWN_GAPS}} | release-notes-template |
{{LAST_UPDATED}} | accessibility, cookies, data-handling, disclosure, privacy, terms |
{{LICENSE_ACTIVATION_FLOW}} | buy, install |
{{LICENSE_CHECK_BEHAVIOUR}} | privacy, trust |
{{MARKETPLACE_SHARED_FIELDS}} | data-handling, privacy |
{{NEW_PROVIDER_COUNT}} | release-notes-template |
{{NEW_REFUSALS}} | release-notes-template |
{{OSS_COMPONENT_1}} | license |
{{OSS_COMPONENT_2}} | license |
{{OSS_COMPONENT_N}} | license |
{{OSS_LICENSE_1}} | license |
{{OSS_LICENSE_2}} | license |
{{OSS_LICENSE_N}} | license |
{{OSS_USE_1}} | license |
{{OSS_USE_2}} | license |
{{OSS_USE_N}} | license |
{{OS_MATRIX}} | install |
{{POSTAL_ADDRESS}} | contact |
{{POST_1_DATE}} | blog |
{{POST_1_READ_TIME}} | blog |
{{POST_1_SUMMARY}} | blog |
{{POST_1_TITLE}} | blog |
{{POST_2_DATE}} | blog |
{{POST_2_READ_TIME}} | blog |
{{POST_2_SUMMARY}} | blog |
{{POST_2_TITLE}} | blog |
{{POST_3_DATE}} | blog |
{{POST_3_READ_TIME}} | blog |
{{POST_3_SUMMARY}} | blog |
{{POST_3_TITLE}} | blog |
{{POST_AUTHOR}} | blog-article-template |
{{POST_DATE}} | blog-article-template |
{{POST_READ_TIME}} | blog-article-template |
{{POST_STANDFIRST}} | blog-article-template |
{{POST_TAGS}} | blog-article-template |
{{POST_TITLE}} | blog-article-template |
{{PREVIOUS_VERSION}} | changelog |
{{PRICE_TIER_1}} | pricing |
{{PRICE_TIER_2}} | pricing |
{{PRICE_TIER_3}} | pricing |
{{PRICING_UNIT}} | pricing |
{{PRIVACY_CONTACT}} | privacy |
{{PRIVACY_SCOPE}} | privacy |
{{PRIVATE_OFFER_POLICY}} | pricing |
{{PROOF_MATRIX}} | release-notes-template |
{{PROVIDER_CHANGES}} | release-notes-template |
{{RELEASE_DATE}} | release-notes-template |
{{RELEASE_DATE_0_1_0}} | changelog |
{{RELEASE_DATE_0_4_0}} | changelog |
{{RELEASE_DATE_PREVIOUS}} | changelog |
{{RELEASE_TITLE}} | release-notes-template |
{{RESPONSE_TIME_TARGET}} | contact |
{{SAFE_HARBOUR_TEXT}} | disclosure |
{{SALES_EMAIL}} | buy, contact |
{{SAMPLE_DATE}} | audit |
{{SAMPLE_N}} | coverage |
{{SBOM_URL}} | trust |
{{SECURITY_EMAIL}} | contact, disclosure, trust |
{{SECURITY_PGP_FINGERPRINT}} | disclosure |
{{SEGMENTATION_AXIS}} | pricing |
{{SIGNING_KEY_FINGERPRINT}} | trust |
{{SITE_HOST}} | 404, 500 |
{{SOURCE_LICENSE_STATEMENT}} | license |
{{STATUS_AWS_MARKETPLACE_LISTING}} | status |
{{STATUS_AZURE_MARKETPLACE_LISTING}} | status |
{{STATUS_DOCUMENTATION_AND_WIKI}} | status |
{{STATUS_DOWNLOAD_AND_SIGNING_ENDPOINT}} | status |
{{STATUS_LICENCE_ENTITLEMENT_CHECK}} | status |
{{STATUS_SOURCE}} | status |
{{STATUS_SUBSCRIBE_URL}} | status |
{{STATUS_THIS_WEBSITE}} | status |
{{SUBPROCESSOR_NOTICE_POLICY}} | data-handling |
{{SUBPROCESSOR_TABLE}} | data-handling |
{{SUPPORT_EMAIL}} | 500, contact, support |
{{SUPPORT_RETENTION}} | data-handling, privacy |
{{SUPPORT_SLA_FIRST_RESPONSE}} | support |
{{SUPPORT_SYSTEM}} | data-handling |
{{TEAM_DESCRIPTION}} | about |
{{TELEMETRY_POLICY}} | privacy, trust |
{{TERMS_CHANGE_POLICY}} | terms |
{{TERMS_WEBSITE_USE}} | terms |
{{TEST_COUNTS}} | release-notes-template |
{{TIER_1_NAME}} | pricing |
{{TIER_1_SCOPE}} | pricing |
{{TIER_2_DIFFERENTIATOR}} | pricing |
{{TIER_2_NAME}} | pricing |
{{TIER_2_SCOPE}} | pricing |
{{TIER_2_SUPPORT_SLA}} | pricing |
{{TIER_3_DIFFERENTIATOR}} | pricing |
{{TIER_3_NAME}} | pricing |
{{TIER_3_SCOPE}} | pricing |
{{TIER_3_SUPPORT_SLA}} | pricing |
{{VERIFY_STEPS}} | trust |
{{VERSION}} | release-notes-template |
{{WARRANTY_LIABILITY_TEXT}} | terms |
{{WCAG_CONFORMANCE_STATUS}} | accessibility |
{{WEB_HOST}} | data-handling |
{{WEB_LOG_RETENTION}} | data-handling, privacy |
{{WIKI_BUILD_ID}} | wiki-template |
Every page is a single self-contained document with inline styles and a shared header, footer, and theme logic. Light and dark are CSS variables; the theme toggle stores one localStorage key and falls back to the system preference. All interactive tools render a static equivalent in the same page.
The wiki template is a shell: the generation pipeline supplies command pages with their own voice tabs, and the shell supplies the search, grouping, chrome, and code treatment.