Tokens
A design token is a named, versioned decision — a color, a spacing value, a type size — stored once and referenced everywhere it's used. Change the token, and every consumer updates together: this site's own CSS, a Figma file, a line of AI-generated code.
The primitive tier below holds the raw values — colors, type sizes,
spacing steps. The theme tier maps those primitives to semantic roles
(interactive-primary, surface-elevated, and so on) that components
and pages actually consume. Nothing here is illustrative — every value shown is read directly
from this repository's own token bundle, the same source this site's own CSS consumes.
What this enables beyond this site:
- One source of truth across design tools and code. See Get Started — Designing for the import path.
- AI code generators can query tokens, components, and research directly through this
site's
/mcpendpoint at decode time, so generated UI matches your brand without re-deciding the same questions every session. - A customer-owned, self-hosted vault — fork the whole graph into your own Git history, signed by your own key. Download everything below as a portable bundle.
curl -O https://design.pointsav.com/bundles/tokens/tokens.full.jsonPoint the free Tokens Studio plugin at the same URL to sync this release's values directly into your Figma file — no export/import step, no manual re-entry.
How the registry works
One registry, every surface
Every token on this page — its tier, its value — is read from the same
tokens.full.json registry that answers the machine API and backs this site's
own CSS. There is no separate CMS layer for tokens to drift out of sync with: the count in
this page's stat strip and the swatches below come from the same source.
The same registry file backs the MCP endpoint documented under
Developing — an agent asking for the current value of
theme.semantic.interactive-primary gets exactly what's below. On a self-hosted
instance, that answer is served from your own infrastructure and never leaves it; consuming
the tokens as files requires no instance at all.
Reference primitive
The raw palette. A hex value, a rem number, a duration, a breakpoint — no meaning attached to where or why it's used.
primitive.color.primary-60: #234ed8
System theme
Attaches intent. Says what a value means, so the reference token behind it can change — or swap for dark mode — without touching anything that consumes the meaning.
theme.semantic.interactive-primary: {color.primary-60}
Primitive
Border
border.corner-1
0.125rem
2px — chip, badge
border.corner-2
0.25rem
4px — button, input default
border.corner-3
0.5rem
8px — surface, dialog
border.stroke-1
1px
Default border
border.stroke-2
2px
Focus ring, error state
Color
Read the full color guidance →
color.black
#000000
21.00:1 vs white
color.caution-10
#fff5e1
1.08:1 vs white
color.caution-30
#f5cd7a
1.51:1 vs white
color.caution-50
#d49b1f
2.47:1 vs white
color.caution-60
#a87514
4.02:1 vs white
color.caution-70
#7a520a
6.91:1 vs white
color.critical-10
#fceaea
1.16:1 vs white
color.critical-30
#f0a3a3
2.01:1 vs white
color.critical-50
#d24747
4.44:1 vs white
color.critical-60
#a52323
7.33:1 vs white
color.critical-70
#7d1414
10.59:1 vs white
color.neutral-10
#f5f6f8
1.08:1 vs white
color.neutral-100
#0e0f12
19.17:1 vs white
color.neutral-20
#e6e8ec
1.23:1 vs white
color.neutral-30
#cdd1d8
1.53:1 vs white
color.neutral-40
#aab0bb
2.18:1 vs white
color.neutral-50
#878d99
3.33:1 vs white
color.neutral-60
#666c78
5.27:1 vs white
color.neutral-70
#4a4f59
8.22:1 vs white
color.neutral-80
#33373e
11.95:1 vs white
color.neutral-90
#1f2125
16.12:1 vs white
color.orgchart.blue
#164679
9.61:1 vs white
Investment-unit border
color.orgchart.blue-bg
#E8EFF7
1.16:1 vs white
Investment-unit surface
color.orgchart.green
#54924E
3.75:1 vs white
Holding-entity border
color.orgchart.green-bg
#EEF6EC
1.10:1 vs white
Holding-entity surface
color.orgchart.grey
#9CA3AF
2.54:1 vs white
Admin entity / titleco border
color.orgchart.grey-bg
#E6E7E8
1.24:1 vs white
Admin entity surface
color.orgchart.grey-dark
#374151
10.31:1 vs white
Strong border variant
color.orgchart.grey-light-bg
#F7F9FA
1.06:1 vs white
Dashed placeholder / service provider surface
color.orgchart.magenta
#9F1853
7.69:1 vs white
Legacy entity A border -- predecessor structure prior to reorganization
color.orgchart.magenta-bg
#FFD6E8
1.31:1 vs white
Legacy entity A surface
color.orgchart.orange
#F15F22
3.28:1 vs white
Principal entity (named individual / equity partner) border
color.orgchart.orange-bg
#FDE8DD
1.18:1 vs white
Principal entity surface
color.orgchart.purple
#7C468C
6.75:1 vs white
Intermediary (broker-dealer / asset manager) border
color.orgchart.purple-bg
#EEE6F1
1.22:1 vs white
Intermediary surface
color.orgchart.teal
#005D5D
7.71:1 vs white
Legacy entity B border -- predecessor asset-holding structure prior to reorganization
color.orgchart.teal-bg
#9EF0F0
1.30:1 vs white
Legacy entity B surface
color.orgchart.yellow
#EAB308
1.92:1 vs white
Fund vehicle / LP / limited partnership border -- dashed pill
color.orgchart.yellow-bg
#FFFDE7
1.03:1 vs white
Fund vehicle surface
color.positive-10
#e8f6ed
1.11:1 vs white
color.positive-30
#9fdaae
1.60:1 vs white
color.positive-50
#3fa55c
3.11:1 vs white
color.positive-60
#26823f
4.83:1 vs white
color.positive-70
#16602b
7.66:1 vs white
color.primary-10
#eef3ff
1.11:1 vs white
color.primary-20
#d3deff
1.34:1 vs white
color.primary-30
#a6bcff
1.87:1 vs white
color.primary-40
#7392ff
2.88:1 vs white
color.primary-50
#3f6cf2
4.53:1 vs white
color.primary-60
#234ed8
6.66:1 vs white
color.primary-70
#173ab1
9.22:1 vs white
color.primary-80
#0c2785
12.77:1 vs white
color.primary-90
#04165a
16.57:1 vs white
color.white
#ffffff
1.00:1 vs white
Duration
duration.speed-1
70ms
Imperceptible — color hover
duration.speed-2
120ms
Quick — button press, focus ring fade
duration.speed-3
200ms
Snappy — tab switch
duration.speed-4
320ms
Smooth — toast appearance, drawer slide
duration.speed-5
480ms
Considered — modal entrance
duration.speed-6
720ms
Deliberate — hero animation
Focus
focus.ring
{"color":"{color.primary-60}","offset":"2px","style":"solid","width":"{border.stroke-2}"}
WCAG 2.2 AAA-conformant focus ring; 3:1 contrast against any tenant background
Motion
Read the full motion guidance →
motion.ease-display
[0.4,0.14,0.3,1.0]
Expressive interaction — toasts, modals, hero
motion.ease-enter
[0.0,0.0,0.4,1.0]
motion.ease-exit
[0.2,0.0,1.0,1.0]
motion.ease-utility
[0.2,0,0.4,1.0]
Productive interaction — buttons, inputs, tabs
Size
Read the full spacing guidance →
size.space-1
0.125rem
2px @ 16px base — hairline gutter
size.space-10
4rem
64px @ 16px base — major section
size.space-11
5rem
80px @ 16px base
size.space-12
6rem
96px @ 16px base
size.space-13
10rem
160px @ 16px base — hero spacing
size.space-2
0.25rem
4px @ 16px base
size.space-3
0.5rem
8px @ 16px base — paragraph rhythm floor
size.space-4
0.75rem
12px @ 16px base
size.space-5
1rem
16px @ 16px base — body grid unit
size.space-6
1.5rem
24px @ 16px base
size.space-7
2rem
32px @ 16px base — section gutter
size.space-8
2.5rem
40px @ 16px base
size.space-9
3rem
48px @ 16px base
Typography
Read the full typography guidance →
typography.display-1
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.25rem","fontWeight":500,"letterSpacing":"-0.01em","lineHeight":1.4}
20/28 — sub-heading
typography.display-2
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.5rem","fontWeight":500,"letterSpacing":"-0.01em","lineHeight":1.34}
24/32 — section heading
typography.display-3
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"2rem","fontWeight":400,"letterSpacing":"-0.015em","lineHeight":1.25}
32/40 — page title
typography.display-4
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"2.625rem","fontWeight":300,"letterSpacing":"-0.02em","lineHeight":1.2}
42/50 — hero / landing
typography.utility-1
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"0.75rem","fontWeight":400,"letterSpacing":"0.16px","lineHeight":1.34}
12/16 — caption, label, table cell
typography.utility-2
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"0.875rem","fontWeight":400,"letterSpacing":"0.16px","lineHeight":1.43}
14/20 — secondary body, helper text
typography.utility-3
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1rem","fontWeight":400,"letterSpacing":"0px","lineHeight":1.5}
16/24 — body floor
typography.utility-4
{"fontFamily":"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1rem","fontWeight":600,"letterSpacing":"0px","lineHeight":1.5}
16/24 — UI heading, button label, table heading
typography.wiki-body
{"fontFamily":"'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.0625rem","fontWeight":400,"letterSpacing":"0px","lineHeight":1.6}
17/27 — wiki article body (IBM Plex Sans, 106.25% base, 1.6 leading, 65ch measure)
typography.wiki-code
{"fontFamily":"'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace","fontSize":"0.9375rem","fontWeight":400,"letterSpacing":"0px","lineHeight":1.6}
15/24 — wiki inline and block code (IBM Plex Mono)
typography.wiki-h1
{"fontFamily":"'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"2.25rem","fontWeight":600,"letterSpacing":"-0.015em","lineHeight":1.22}
36/44 — wiki article h1; 2.25rem per editorial research pass 2026-05-06
typography.wiki-h2
{"fontFamily":"'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.75rem","fontWeight":600,"letterSpacing":"-0.01em","lineHeight":1.28}
28/36 — wiki section heading; 1.75rem per editorial research pass 2026-05-06
typography.wiki-h3
{"fontFamily":"'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.375rem","fontWeight":600,"letterSpacing":"0px","lineHeight":1.36}
22/30 — wiki subsection heading; 1.375rem per editorial research pass 2026-05-06
typography.wiki-h4
{"fontFamily":"'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","fontSize":"1.125rem","fontWeight":600,"letterSpacing":"0px","lineHeight":1.44}
18/26 — wiki heading level 4; 1.125rem per editorial research pass 2026-05-06
Viewport
viewport.compact
799px
≤ 799px — single-column mobile layout; sidebar collapses to drawer
viewport.medium
1151px
800px – 1151px — two-column layout; TOC inline with content
viewport.wide
1152px
≥ 1152px — three-column layout; sidebar + content + TOC
Theme
Accessibility
accessibility.contrast-floor-focus-ring
3
Minimum contrast ratio, focus ring against its surface
accessibility.contrast-floor-text
7
Minimum contrast ratio, body text against its surface
accessibility.min-touch-target
44px
Minimum interactive touch-target size
accessibility.motion-respect
prefers-reduced-motion honored at all interaction layers
Motion-reduction conformance statement
accessibility.wcag-target
2.2 AAA
WCAG conformance target for this design system
Dark
dark.border-interactive
#7392ff
2.88:1 vs white
primary-40 — input border, interactive element outline on dark bg
dark.border-strong
#878d99
3.33:1 vs white
neutral-50 — strong borders, table rules
dark.border-subtle
#4a4f59
8.22:1 vs white
neutral-70 — hairline borders on dark surface
dark.focus-ring
#7392ff
2.88:1 vs white
primary-40 — focus ring; 5.59:1 vs surface-base (AA non-text; corrected 2026-07-15, was mislabeled 3.1:1)
dark.ink-disabled
#4a4f59
8.22:1 vs white
neutral-70 — disabled text on dark surface
dark.ink-on-inverse
#0e0f12
19.17:1 vs white
neutral-100 — text on light chip within dark page
dark.ink-primary
#f5f6f8
1.08:1 vs white
neutral-10 — primary text on dark surface; 14.5:1 vs surface-base
dark.ink-secondary
#aab0bb
2.18:1 vs white
neutral-40 — secondary text; 6.2:1 vs surface-base (AA)
dark.interactive-ghost-hover
rgba(255,255,255,0.08)
semi-transparent white — ghost button hover on dark
dark.interactive-ghost-pressed
rgba(255,255,255,0.12)
semi-transparent white — ghost button press on dark
dark.interactive-primary
#234ed8
6.66:1 vs white
primary-60 — button fill; 6.66:1 with white text (fixed 2026-07-15: was primary-50 at a hair's-width 4.53:1 pass with a wrong 4.8:1 description; moved to match light theme's own resting value for a real safety margin)
dark.interactive-primary-hover
#173ab1
9.22:1 vs white
primary-70 — hover state on dark; 9.22:1 with white text (fixed 2026-07-15: was primary-40, a real AA failure at 2.88:1 — dark mode was lightening on hover instead of darkening, the opposite of light theme's own pattern)
dark.interactive-primary-pressed
#0c2785
12.77:1 vs white
primary-80 — pressed state on dark; 12.77:1 with white text (added 2026-07-15: this token had no entry anywhere in this governed source at all — only a hand-added, non-compliant value in the generated CSS at 1.87:1, a severe real AA failure)
dark.support-caution
#f5cd7a
1.51:1 vs white
caution-30 — warning text on dark background
dark.support-caution-bg
#3d2e0a
13.18:1 vs white
dark caution tint — warning banner fill on dark page
dark.support-critical
#f0a3a3
2.01:1 vs white
critical-30 — error text on dark background (AA)
dark.support-critical-bg
#3d1515
15.95:1 vs white
dark critical tint — error banner fill on dark page
dark.support-positive
#9fdaae
1.60:1 vs white
positive-30 — success text on dark background
dark.surface-base
#1f2125
16.12:1 vs white
neutral-90 — wiki page background in dark mode
dark.surface-code
#151618
18.11:1 vs white
near-black — code block background; darker than page to create depth
dark.surface-elevated
#33373e
11.95:1 vs white
neutral-80 — card, panel, sidebar surface in dark mode
dark.surface-inverse
#f5f6f8
1.08:1 vs white
neutral-10 — inverted surface (light chip on dark page)
dark.surface-subtle
#2a2d33
13.80:1 vs white
between neutral-80 and neutral-90 — subtle dividers, table rows
dark.wiki-code-comment
#878d99
3.33:1 vs white
neutral-50 — syntax highlight comment on dark code block
dark.wiki-code-keyword
#f5cd7a
1.51:1 vs white
caution-30 — syntax highlight keyword on dark code block
dark.wiki-code-string
#9fdaae
1.60:1 vs white
positive-30 — syntax highlight string literal on dark code block
dark.wiki-link
#a6bcff
1.87:1 vs white
primary-30 — wiki hyperlink on dark page; 8.64:1 vs surface-base, 6.41:1 vs surface-elevated (AA on both; corrected 2026-07-17 — the prior primary-40 value only verified against surface-base and failed at 4.15:1 against surface-elevated, the card/panel/sidebar surface this token is also used against in dark mode)
dark.wiki-redlink
#f0a3a3
2.01:1 vs white
critical-30 — wiki red (missing) link on dark page
Semantic
semantic.border-interactive
{color.primary-60}
semantic.border-strong
{color.neutral-50}
neutral-50 — 3.33:1 vs surface-base (AA non-text, WCAG 1.4.11). Was neutral-40 (2.18:1, real failure — corrected 2026-07-17; used as the resting-state border on select/input-text/checkbox and the off-state track fill on switch, all real required control boundaries, not decorative). Matches the dark theme's own border-strong, which already used this same neutral-50 step.
semantic.border-subtle
{color.neutral-20}
semantic.focus-ring
{color.primary-60}
semantic.ink-disabled
{color.neutral-50}
semantic.ink-on-caution
{color.neutral-100}
semantic.ink-on-critical
{color.white}
semantic.ink-on-interactive
{color.white}
semantic.ink-on-positive
{color.white}
semantic.ink-placeholder
{color.neutral-60}
neutral-60 — 5.27:1 vs surface-base (AA). Was neutral-50 (3.33:1, real AA failure — corrected 2026-07-17); shares no value with ink-disabled since disabled text is WCAG-exempt (1.4.3) but placeholder text is not.
semantic.ink-primary
{color.neutral-100}
semantic.ink-secondary
{color.neutral-70}
semantic.interactive-critical
{color.critical-60}
semantic.interactive-critical-hover
{color.critical-70}
semantic.interactive-critical-pressed
{color.critical-70}
semantic.interactive-ghost
transparent
semantic.interactive-ghost-hover
{color.neutral-10}
semantic.interactive-ghost-pressed
{color.neutral-20}
semantic.interactive-primary
{color.primary-60}
semantic.interactive-primary-disabled
{color.neutral-20}
semantic.interactive-primary-hover
{color.primary-70}
semantic.interactive-primary-pressed
{color.primary-80}
semantic.interactive-secondary
{color.neutral-80}
semantic.interactive-secondary-hover
{color.neutral-90}
semantic.interactive-secondary-pressed
{color.neutral-100}
semantic.orgchart.admin-entity.border
{color.orgchart.grey}
semantic.orgchart.admin-entity.surface
{color.orgchart.grey-bg}
semantic.orgchart.broker-dealer.border
{color.orgchart.purple}
semantic.orgchart.broker-dealer.surface
{color.orgchart.purple-bg}
semantic.orgchart.corporate-holding.border
{color.orgchart.green}
semantic.orgchart.corporate-holding.surface
{color.orgchart.green-bg}
semantic.orgchart.equity-partner.border
{color.orgchart.orange}
semantic.orgchart.equity-partner.surface
{color.orgchart.orange-bg}
semantic.orgchart.fund-vehicle.border
{color.orgchart.yellow}
semantic.orgchart.fund-vehicle.surface
{color.orgchart.yellow-bg}
semantic.orgchart.investment-vehicle.border
{color.orgchart.blue}
semantic.orgchart.investment-vehicle.surface
{color.orgchart.blue-bg}
semantic.orgchart.legacy-asset.border
{color.orgchart.teal}
semantic.orgchart.legacy-asset.surface
{color.orgchart.teal-bg}
semantic.orgchart.legacy-corporate.border
{color.orgchart.magenta}
semantic.orgchart.legacy-corporate.surface
{color.orgchart.magenta-bg}
semantic.support-caution
{color.caution-70}
semantic.support-caution-bg
{color.caution-10}
semantic.support-critical
{color.critical-60}
semantic.support-critical-bg
{color.critical-10}
semantic.support-info
{color.primary-60}
semantic.support-info-bg
{color.primary-10}
semantic.support-positive
{color.positive-70}
semantic.support-positive-bg
{color.positive-10}
semantic.surface-base
{color.white}
semantic.surface-elevated
{color.white}
semantic.surface-inverse
{color.neutral-100}
semantic.surface-subtle
{color.neutral-10}
Paper
Primitive
primitive.color.financial-gutter
#aaaaaa
2.32:1 vs white
Financial-report-layout line-number gutter (dashboard theme only, JS-injected, absent from print)
primitive.color.financial-hairline
#cccccc
1.61:1 vs white
Financial-report-layout h2 hairline
primitive.color.financial-primary
#111111
18.88:1 vs white
Financial-report-layout (proforma dashboard) primary ink
primitive.color.financial-row-banner-bg
#e3edf7
1.18:1 vs white
Financial-report-layout dashboard section-banner fill
primitive.color.financial-row-banner-ink
#1a2a44
14.40:1 vs white
Financial-report-layout dashboard section-banner navy text — the only colored text in the family
primitive.color.financial-row-subtotal-bg
#f5f7fa
1.07:1 vs white
Financial-report-layout dashboard subtotal-row fill
primitive.color.financial-row-subtotal-rule
#aaaaaa
2.32:1 vs white
primitive.color.financial-row-total-bg
#eef2f7
1.12:1 vs white
Financial-report-layout dashboard total-row fill
primitive.color.financial-row-total-rule
#888888
3.54:1 vs white
primitive.color.financial-secondary
#555555
7.46:1 vs white
Financial-report-layout secondary text / notes
primitive.color.ink
#000000
21.00:1 vs white
text-primary — shared by legal agreements and financial-statement-yearend (pure black, no tints, audited-statement look)
primitive.color.ink-attribution
#333333
12.63:1 vs white
Legal signature-attribution / drafting-notes text
primitive.color.ink-secondary
#444444
9.74:1 vs white
Legal hint/progress guidance text
primitive.color.pdf-nav-grey-dark
#4d4d4d
8.45:1 vs white
Interactive PDF-binder — subtitle, footer instruction
primitive.color.pdf-nav-grey-label
#737373
4.74:1 vs white
Interactive PDF-binder — draft/version label
primitive.color.pdf-nav-grey-light
#f5f5f5
1.09:1 vs white
Interactive PDF-binder — active-entry highlight fill (same value as legal/financial surface-tint)
primitive.color.pdf-nav-navy
#002e63
13.37:1 vs white
Interactive PDF-binder — inactive TOC entry text, HOME button fill
primitive.color.pdf-nav-on-navy
#ffffff
1.00:1 vs white
Interactive PDF-binder — HOME button label
primitive.color.placeholder-mark
#ffff00
1.07:1 vs white
Legal TBD-highlight mark; pair with mso-highlight:yellow in recipe CSS for Word compatibility
primitive.color.regulatory-red-herring
#c00000
6.48:1 vs white
BCSC/OSC preliminary-prospectus red-herring notice color — NOT brand-derived, a statutory filing convention. Kept brand-neutral deliberately: this design system ships to other tenants.
primitive.color.surface-tint
#f5f5f5
1.09:1 vs white
Legal table-header/form-note tint; same value reused by financial-statement header-bg
primitive.font.pdf-nav
["Helvetica","Arial","sans-serif"]
Interactive PDF-binder — Helvetica core-14 PDF fonts (no embedding required)
primitive.font.proforma-sans
["system-ui","sans-serif"]
Financial-report-layout dashboard theme
primitive.font.sans-fill
["Verdana","Tahoma","DejaVu Sans","sans-serif"]
Subscription-agreement tier-2 fill zones (accessible completion register)
primitive.font.serif-legal
["Times New Roman","Liberation Serif","Times","serif"]
Subscription-agreement and prospectus body/heading text (byte-identical stack)
primitive.font.serif-tinos
["Tinos","Times New Roman","Liberation Serif","Times","serif"]
Agency-suite — Tinos webfont-first
primitive.font.statement-serif
["Georgia","Times New Roman","serif"]
PROVISIONAL — financial-report-layout's classic statement theme; not yet pinned by the not-yet-implemented proforma engine work (wcp.finance.* bundle)
primitive.font.statutory-sans
["Calibri","Carlito","Liberation Sans","Arial","sans-serif"]
Financial-statement-yearend — Calibri source-theme font
primitive.page.content-width-portrait
468pt
612pt - 2x72pt(1in) margins; running-header rule width on 1in-margin portrait pages
primitive.page.footer-distance
0.32in
Statutory financial-statement @page footer distance
primitive.page.header-distance
0.5in
Statutory financial-statement @page header distance
primitive.page.margin-bind-block
1.5cm
Financial-report-layout (landscape) top/bottom and non-bind side
primitive.page.margin-bind-inline
2cm
Financial-report-layout (landscape) wider bind/punch edge
primitive.page.margin-bind-left
0.9in
Subscription-agreement left margin (binding-wide side)
primitive.page.margin-bind-right
0.7in
Subscription-agreement right margin (binding-narrow side)
primitive.page.margin-cover-top
0.375in
Prospectus cover page reduced top margin
primitive.page.margin-narrow
0.625in
Prospectus left/right
primitive.page.margin-standard
0.75in
Shared top/bottom — subscription-agreement and prospectus
primitive.page.margin-wide
1in
Agency-suite uniform margin; also the statutory financial-statement margin (all four sides)
primitive.page.size-letter-height
11in
US Letter height (portrait); financial-report-layout's landscape orientation swaps width/height in its own @page rule
primitive.page.size-letter-width
8.5in
US Letter width — shared by every Paper CSS-print document
primitive.pdf-nav.home-corner-radius
4pt
primitive.pdf-nav.home-height
20pt
primitive.pdf-nav.home-width
64pt
primitive.pdf-nav.margin-left
72pt
primitive.pdf-nav.margin-right
540pt
primitive.pdf-nav.page-height
792pt
primitive.pdf-nav.page-width
612pt
primitive.pdf-nav.rule-stroke
1.5pt
primitive.pdf-nav.toc-entry-first-y
565pt
primitive.pdf-nav.toc-entry-height
46pt
primitive.pdf-nav.toc-entry-step
65pt
centre-to-centre
primitive.pdf-nav.toc-entry-width
530pt
primitive.pdf-nav.toc-num-x
64pt
primitive.pdf-nav.toc-title-x
82pt
primitive.rule.accent
3pt
Agency-suite form-note left accent bar
primitive.rule.accounting-total
2pt
Prospectus data-table total-row double rule
primitive.rule.emphasis
1.5pt
Warning box, cover-rule, summary-page border (legal); source financial total rule before the yearend bundle's double-rule upgrade
primitive.rule.hairline
0.5pt
Key-terms table, running-header border, data-table header bottom, financial subtotal top rule (statutory)
primitive.rule.light
0.75pt
Fill lines/table enclosure (legal); subtotal top rule (financial-report-layout statement theme)
primitive.rule.standard
1pt
Form cells, signature line, dividers, hr; financial grand-total top rule
primitive.rule.total-double
3pt
Financial-statement-yearend grand-total bottom rule, rendered border-style:double (upgraded from the source docx's single 1.5pt per the bundle's own deliberate refinement)
primitive.table.cell-pad-x
4pt
primitive.table.cell-pad-y
2pt
primitive.table.indent-1
16pt
primitive.table.indent-2
28pt
primitive.table.num-min-width
105px
Statutory value-column min-width (the one px value in an otherwise pt-based domain — matches the source docx)
primitive.type.financial-running-header.currency
{"fontFamily":"{paper.primitive.font.statutory-sans}","fontSize":"9pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.0}
Set font-style:italic in recipe CSS — typography composite has no italic-style field in this repo's convention
primitive.type.financial-running-header.entity
{"fontFamily":"{paper.primitive.font.statutory-sans}","fontSize":"12pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.0}
primitive.type.financial-running-header.statement
{"fontFamily":"{paper.primitive.font.statutory-sans}","fontSize":"11pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.0}
primitive.type.financial-title.entity
{"fontFamily":"{paper.primitive.font.statutory-sans}","fontSize":"16pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.2}
primitive.type.financial-title.report-heading
{"fontFamily":"{paper.primitive.font.statutory-sans}","fontSize":"10pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.2}
primitive.type.financial-title.subtitle
{"fontFamily":"{paper.primitive.font.statutory-sans}","fontSize":"14pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.2}
primitive.type.legal-agency.body
{"fontFamily":"{paper.primitive.font.serif-tinos}","fontSize":"11.5pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.5}
primitive.type.legal-agency.h1
{"fontFamily":"{paper.primitive.font.serif-tinos}","fontSize":"18pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.2}
primitive.type.legal-prospectus.body
{"fontFamily":"{paper.primitive.font.serif-legal}","fontSize":"10pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.35}
primitive.type.legal-prospectus.h1
{"fontFamily":"{paper.primitive.font.serif-legal}","fontSize":"12pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.2}
primitive.type.legal-prospectus.running-header
{"fontFamily":"{paper.primitive.font.serif-legal}","fontSize":"8.5pt","fontWeight":400,"letterSpacing":"0.5pt","lineHeight":1.2}
primitive.type.legal-subscription.body
{"fontFamily":"{paper.primitive.font.serif-legal}","fontSize":"9.5pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.28}
primitive.type.legal-subscription.fill-label
{"fontFamily":"{paper.primitive.font.sans-fill}","fontSize":"10pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.35}
primitive.type.legal-subscription.h1
{"fontFamily":"{paper.primitive.font.serif-legal}","fontSize":"14pt","fontWeight":700,"letterSpacing":"0.5pt","lineHeight":1.2}
primitive.type.pdf-nav.binder-title
{"fontFamily":"{paper.primitive.font.pdf-nav}","fontSize":"16pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.0}
primitive.type.pdf-nav.draft-label
{"fontFamily":"{paper.primitive.font.pdf-nav}","fontSize":"9pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.0}
primitive.type.pdf-nav.footer
{"fontFamily":"{paper.primitive.font.pdf-nav}","fontSize":"9pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.0}
Rendered italic (Helvetica-Oblique) in the PDF generator
primitive.type.pdf-nav.home-label
{"fontFamily":"{paper.primitive.font.pdf-nav}","fontSize":"8pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.0}
primitive.type.pdf-nav.subtitle
{"fontFamily":"{paper.primitive.font.pdf-nav}","fontSize":"10pt","fontWeight":400,"letterSpacing":"0","lineHeight":1.0}
primitive.type.pdf-nav.toc-entry
{"fontFamily":"{paper.primitive.font.pdf-nav}","fontSize":"11pt","fontWeight":700,"letterSpacing":"0","lineHeight":1.0}
Semantic
semantic.agency-suite.body-type
{paper.primitive.type.legal-agency.body}
semantic.agency-suite.form-note-accent
{paper.primitive.rule.accent}
semantic.agency-suite.heading-type
{paper.primitive.type.legal-agency.h1}
semantic.agency-suite.page-margin
{paper.primitive.page.margin-wide}
semantic.agency-suite.rule-signature
{paper.primitive.rule.standard}
semantic.financial-report-layout.column-label-width
25%
Wide multi-period table; up to 11 data columns
semantic.financial-report-layout.hairline-rule
{paper.primitive.rule.hairline}
semantic.financial-report-layout.ink-gutter
{paper.primitive.color.financial-gutter}
Dashboard theme only — absent in print/statement theme
semantic.financial-report-layout.ink-hairline
{paper.primitive.color.financial-hairline}
semantic.financial-report-layout.ink-primary
{paper.primitive.color.financial-primary}
semantic.financial-report-layout.ink-secondary
{paper.primitive.color.financial-secondary}
semantic.financial-report-layout.page-margin-block
{paper.primitive.page.margin-bind-block}
semantic.financial-report-layout.page-margin-inline
{paper.primitive.page.margin-bind-inline}
semantic.financial-report-layout.row-banner-bg
{paper.primitive.color.financial-row-banner-bg}
semantic.financial-report-layout.row-banner-ink
{paper.primitive.color.financial-row-banner-ink}
semantic.financial-report-layout.row-subtotal-bg
{paper.primitive.color.financial-row-subtotal-bg}
semantic.financial-report-layout.row-subtotal-rule
{paper.primitive.color.financial-row-subtotal-rule}
semantic.financial-report-layout.row-total-bg
{paper.primitive.color.financial-row-total-bg}
semantic.financial-report-layout.row-total-rule
{paper.primitive.color.financial-row-total-rule}
semantic.financial-report-layout.subtotal-rule-statement-theme
{paper.primitive.rule.light}
semantic.financial-report-layout.total-rule-bottom-statement-theme
{paper.primitive.rule.total-double}
semantic.financial-report-layout.total-rule-statement-theme
{paper.primitive.rule.standard}
semantic.financial-statement-yearend.cell-pad-x
{paper.primitive.table.cell-pad-x}
semantic.financial-statement-yearend.cell-pad-y
{paper.primitive.table.cell-pad-y}
semantic.financial-statement-yearend.column-label-width
55%
3-column statement layout (label + 2 equal value columns)
semantic.financial-statement-yearend.column-value-width
22.5%
semantic.financial-statement-yearend.footer-distance
{paper.primitive.page.footer-distance}
semantic.financial-statement-yearend.grand-total-rule-bottom
{paper.primitive.rule.total-double}
semantic.financial-statement-yearend.grand-total-rule-top
{paper.primitive.rule.standard}
semantic.financial-statement-yearend.header-distance
{paper.primitive.page.header-distance}
semantic.financial-statement-yearend.header-row-rule
{paper.primitive.rule.hairline}
semantic.financial-statement-yearend.indent-1
{paper.primitive.table.indent-1}
semantic.financial-statement-yearend.indent-2
{paper.primitive.table.indent-2}
semantic.financial-statement-yearend.ink
{paper.primitive.color.ink}
semantic.financial-statement-yearend.num-min-width
{paper.primitive.table.num-min-width}
semantic.financial-statement-yearend.page-margin
{paper.primitive.page.margin-wide}
semantic.financial-statement-yearend.running-header-currency-type
{paper.primitive.type.financial-running-header.currency}
semantic.financial-statement-yearend.running-header-entity-type
{paper.primitive.type.financial-running-header.entity}
semantic.financial-statement-yearend.running-header-rule-width
{paper.primitive.page.content-width-portrait}
semantic.financial-statement-yearend.running-header-statement-type
{paper.primitive.type.financial-running-header.statement}
semantic.financial-statement-yearend.signature-rule
{paper.primitive.rule.hairline}
semantic.financial-statement-yearend.subtotal-rule
{paper.primitive.rule.hairline}
semantic.financial-statement-yearend.title-entity-type
{paper.primitive.type.financial-title.entity}
semantic.financial-statement-yearend.title-report-heading-type
{paper.primitive.type.financial-title.report-heading}
semantic.financial-statement-yearend.title-subtitle-type
{paper.primitive.type.financial-title.subtitle}
semantic.legal-agreement.body-type
{paper.primitive.type.legal-subscription.body}
semantic.legal-agreement.fill-label-type
{paper.primitive.type.legal-subscription.fill-label}
semantic.legal-agreement.heading-type
{paper.primitive.type.legal-subscription.h1}
semantic.legal-agreement.ink
{paper.primitive.color.ink}
semantic.legal-agreement.page-margin-bottom
{paper.primitive.page.margin-standard}
semantic.legal-agreement.page-margin-left
{paper.primitive.page.margin-bind-left}
semantic.legal-agreement.page-margin-right
{paper.primitive.page.margin-bind-right}
semantic.legal-agreement.page-margin-top
{paper.primitive.page.margin-standard}
semantic.legal-agreement.placeholder-mark
{paper.primitive.color.placeholder-mark}
semantic.legal-agreement.rule-fill-line
{paper.primitive.rule.light}
semantic.legal-agreement.rule-form-cell
{paper.primitive.rule.standard}
semantic.legal-agreement.rule-warning-box
{paper.primitive.rule.emphasis}
semantic.paper-legal.legal-base.body-font-family
{paper.primitive.font.serif-tinos}
semantic.paper-legal.legal-base.rule-hairline
{paper.primitive.rule.hairline}
semantic.paper-legal.legal-base.rule-signature
{paper.primitive.rule.standard}
semantic.pdf-binder.binder-title-type
{paper.primitive.type.pdf-nav.binder-title}
semantic.pdf-binder.header-ink
{paper.primitive.color.ink}
semantic.pdf-binder.home-button-fill
{paper.primitive.color.pdf-nav-navy}
semantic.pdf-binder.home-button-label
{paper.primitive.color.pdf-nav-on-navy}
semantic.pdf-binder.home-label-type
{paper.primitive.type.pdf-nav.home-label}
semantic.pdf-binder.supporting-ink
{paper.primitive.color.pdf-nav-grey-dark}
semantic.pdf-binder.toc-entry-active
{paper.primitive.color.ink}
semantic.pdf-binder.toc-entry-highlight
{paper.primitive.color.pdf-nav-grey-light}
semantic.pdf-binder.toc-entry-inactive
{paper.primitive.color.pdf-nav-navy}
semantic.pdf-binder.version-label-ink
{paper.primitive.color.pdf-nav-grey-label}
semantic.prospectus.body-type
{paper.primitive.type.legal-prospectus.body}
semantic.prospectus.cover-margin-top
{paper.primitive.page.margin-cover-top}
semantic.prospectus.heading-type
{paper.primitive.type.legal-prospectus.h1}
semantic.prospectus.page-margin-inline
{paper.primitive.page.margin-narrow}
semantic.prospectus.page-margin-top
{paper.primitive.page.margin-standard}
semantic.prospectus.red-herring-ink
{paper.primitive.color.regulatory-red-herring}
semantic.prospectus.running-header-border
{paper.primitive.rule.hairline}
semantic.prospectus.running-header-type
{paper.primitive.type.legal-prospectus.running-header}
semantic.prospectus.summary-page-border
{paper.primitive.rule.emphasis}
semantic.prospectus.total-row-rule
{paper.primitive.rule.accounting-total}
Writing
Primitive
primitive.casing.heading
sentence-case-keyword-first
primitive.casing.leading-article
forbidden
No title, heading, or slug begins with the/a/an
primitive.casing.slug
lowercase-kebab
primitive.casing.title
sentence-case-keyword-first
Capitalize the first word plus proper nouns/acronyms/code identifiers only
primitive.loop.standard
draft-improves-draft
Each revision pass sets up a clearly better next pass; revise one altitude per pass, top-down
primitive.rhythm.heading-density-words
130
Roughly one heading per 120-140 body words
primitive.rhythm.lead-words-max
400
primitive.rhythm.lead-words-min
100
primitive.rhythm.paragraph-line-max
7
Past this a paragraph usually carries two ideas
primitive.rhythm.paragraph-line-min
3
primitive.rhythm.sentence-avg-words
18
House target sentence length — 15-20 word band
primitive.rhythm.sentence-fact-of-record-max
25
Ceiling for a definition/compliance/legal claim sentence — a target, not a hard gate
primitive.voice.concrete-word
prefer-concrete-over-abstract
use>utilize; end>terminate; explain>elucidate; named-number>vague-quantifier
primitive.voice.credibility
mechanism-number-verifiable-claim
Never borrow a named institution for prestige
primitive.voice.default
active
Name the actor and the consequence
primitive.voice.forward-looking
planned|intended|may|target
Not-yet-true capabilities wear their status visibly — the BCSC disclosure posture
Semantic
semantic.disclaimer.contact-block
{role}, {entity}, {address}, {email}, {phone}
semantic.disclaimer.privacy-posture
This interface operates on a {telemetry_scope} architecture.
semantic.disclaimer.securities-forward-looking
{corporate_entity} operates {technology_subsidiary} as {entity_relationship}. This material contains forward-looking statements under {act_citations}. Material risks include {specific_risks}. {corporate_entity} disclaims any obligation to update except as required by law.
semantic.disclaimer.trademark-footer
{marks} are trademarks of {owner_entity}, used in {jurisdictions}. This notice asserts continuous use in commerce regardless of ™/® omission elsewhere. All other trademarks are the property of their respective owners.
semantic.page-title.content-page
{pageTitle} — {siteDisplayName}
semantic.page-title.homepage
{siteDisplayName}
semantic.page-title.separator
—
em dash, one space each side
semantic.profile.corporate
reference
semantic.profile.documentation
reference+how-to
semantic.profile.projects
reference
semantic.register.communications
institutional
semantic.register.how-to
operational-imperative
semantic.register.journal
academic
semantic.register.legal
plain-language-binding
semantic.register.reference
neutral-factual-clause
semantic.register.specialist
prescriptive-normative
Ibm Carbon Org Chart
Warm Gray
warm-gray.20
#E5E0DB
1.31:1 vs white
IBM Carbon Warm Gray 20 — background fill for token-warm-gray nodes
warm-gray.70
#565151
7.80:1 vs white
IBM Carbon Warm Gray 70 — border colour for token-warm-gray nodes
Org Chart Extended
Token Warm Gray
token-warm-gray.background
{ibm-carbon-org-chart.warm-gray.20}
Warm Gray tinted node background — use for holding companies and passive holding entities above the main management layer
token-warm-gray.border
{ibm-carbon-org-chart.warm-gray.70}
Warm Gray tinted node border
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.