CARE4-RARE — DESIGN & STYLE GUIDE
Vascular Anomalies Compendium & Classification Handout Series | Version 1.5 | 2026.06 | Color palette confirmed | Do not modify without formal revision
This guide defines the visual language, typographic rules, color system, and structural conventions for all Care4-Rare published documents. It is written so that any designer, developer, or AI assistant can reproduce or extend documents faithfully from a verbal or written brief.
1 — DOCUMENT IDENTITY
| Project name | Care4-Rare Vascular Anomalies Compendium & Classification Handout Series |
| Publisher | Care4-Rare Project |
| Primary audience | Patients, parents, families; secondarily, clinicians new to vascular anomaly classification |
| Tone | Authoritative, accessible, calm. Clinical precision without clinical coldness. |
| Production method | HTML source → PDF via WeasyPrint. HTML is the master file; PDF is the rendered deliverable. WordPress Custom HTML block for web. |
2 — PAGE SETUP
| Page size | US Letter — 8.5 × 11 inches | Handouts: landscape, 11 × 8.5 inches |
| Margins | Top/Bottom: 0.70 in | Left/Right: 0.65 in | Handouts: 0.50 in all sides |
| Body max-width (HTML) | max-width: 960px; margin: 0 auto; padding: 32px 40px; |
| Print color | print-color-adjust: exact |
| Handout format | 3 content pages + 1 references/glossary page. Landscape. Designed for side-by-side wall posting. |
| File naming | [ISSVA-Alpha-ID]—01.html (WP embed) | —02.html (standalone) | —03.pdf |
3 — TYPOGRAPHY
BODY TEXT — LABELS & DESCRIPTIONS
Georgia serif — body text sample
| Font family | Georgia, serif |
| Base size | 13–14px (≈10–10.5pt) |
| Line height | 1.4–1.55 |
| Color | #1a1a1a |
| Italic / key terms | Same font, italic, bold for key terms |
| Footnotes | Italic, 11px, #666 |
HEADER TEXT — BANDS & SUB-BANDS
Arial bold — header sample
| Font family | Arial, sans-serif |
| Domain header | 14px bold |
| Sub-band L1 | 13px bold |
| Sub-band L2 | 12.5px bold |
| Handout section | 13px bold uppercase, letter-spacing: 1px |
| Note | Contrasts with serif body — signals navigation |
CATALOG ID TEXT
[SVM—SF—CM—PW—IS]
| Font family | "Courier New", monospace |
| Size in entry rows | 12px |
| Size in bands | 10–11px |
| Color on light bg | #2e6e7e (teal) |
| Color on dark band | #ffffff (white) |
| Alignment | Right-justified; white-space: nowrap |
4 — COLOR SYSTEM · PALETTE B2 · CONFIRMED CANONICAL
4.1 — DOMAIN HEADER BANDS (full-width, white text) — ALL THREE SHARE ONE COLOR
BAND
#0f1f2e
Near-black navy — unified Level 1 anchor
Used for: NVT · SVM · PUV — all top-level domain headers
4.2 — SUB-DOMAIN LEVEL 1 BANDS (white text) — CLASSIFICATION GROUP COLORS
#5e3a72
Plum-purple · Slow-Flow [SVM—SF]
Cornerstone / capstone of the malformation spectrum
#7a4a5e
Dusty rose-plum · Capillary [SVM—SF—CM]
Port wine stains · the visible entry point
#4a6e3a
Sage-olive · Lymphatic [SVM—SF—LM]
Lymphatic malformations · swelling · drainage
#2e4e7a
Slate-blue · Venous [SVM—SF—VM]
Venous malformations · slow-flow venous
#5e3a72
Plum-purple · Combined [SVM—SF—CO]
KTS · CLOVES · PROS · Proteus · combined
#6e2030
Oxblood burgundy · Fast-Flow [SVM—FF]
AVM · AVF · Parkes Weber · high-flow
#5a7088
Grey-blue neutral · Named Vessels [SVM—NV]
Structural · not flow-classified · developmental
#5a4a2e
Warm ochre-brown · NVT Benign [NVT—BE]
Hemangiomas · proliferative · involute
#6e4a1e
Amber-brown · NVT Borderline [NVT—BO]
Hemangioendothelioma · Kaposi · indeterminate
#8b0000
Blood red · NVT Malignant [NVT—MA]
Reserved for Malignant only — do not repurpose
4.3 — LEVEL 2 LIGHT TINT PAIRS — GROUP HEADER BANDS (dark text on light tint)
Capillary · .bg-cap / .bg-sub2-cap
Tint: #f5edf0 | Text: #4a2a38 · soft rose-blush
Lymphatic · .bg-lym / .bg-sub2-lym
Tint: #edf5e8 | Text: #2a3e1a · soft sage
Venous · .bg-ven / .bg-sub2-ven
Tint: #e8eef8 | Text: #1a2e4a · soft slate-blue
Combined · .bg-comb / .bg-sub2-comb
Tint: #f2ecf8 | Text: #3a1e4a · soft plum
Fast-Flow · .bg-ff / .bg-sub2-ff
Tint: #f5e8ea | Text: #4a1020 · soft warm blush
4.4 — DESCRIPTION BOX TINTS (italic domain descriptions, immediately below domain header)
NVT · #e8eef5 · border #0f1f2e
SVM · #eaf2e8 · border #0f1f2e
PUV · #f0eaf5 · border #0f1f2e
4.5 — NAVIGATION DIAMOND SYMBOL
◈
Symbol: ◈ (U+25C8 — WHITE DIAMOND CONTAINING BLACK SMALL DIAMOND)
On light background: #2e6e7e teal
On dark band: #ffffff white
Size: 10px in compendium rows; larger in handout navigation
Placement: Between Alpha ID and Hamburg code: [SVM—SF—CM—PW—IS] ◈ [VE—EX—LI]
Note: Style Guide v1.5 page 4 shows ◆ (U+25C6) — superseded. Live symbol is ◈ (U+25C8) as confirmed in compendium v31 and all classification cards.
4.6 — FUNCTIONAL COLORS — HANDOUT CARDS · UI ELEMENTS
#1B4F72
Deep navy · Card header band — Side One
Sections 1–4: What you see / feel / what else / look-alikes
#1A5276
Deeper navy · Card header band — Side Two
Sections 5–10: Biology / confirmation / treatment / life / prognosis / research
#2E86C1
Mid-blue · Card section header bars (Side One accent)
sectionHeader() color in handout cards
#FDEBD0 / #784212
Amber · Section 4 — look-alike warning box
Background #FDEBD0 · border-left + text #784212
#D5D8DC
Cool grey · License plate / catalog footer band
ISSVA · Hamburg · ICD-10 · copyright · bottom of card only
#2C3E50
Dark slate · Body text — all prose content in handout cards
Standard reading text throughout classification cards
5 — STRUCTURAL HIERARCHY — COMPENDIUM LEVELS
Level 1 — Domain Header Band
Full-width · Arial 14px bold · white text
Level 2 — Sub-domain Band
Arial 13px bold · white text
Level 3 — Group Header (light tint)
dark hue text · indent 28px
Level 4 — Entry Row (indent 1)
Georgia 13px · teal ID right · indent 42px
Level 5 — Entry Row (indent 2)
Georgia 13px · color #2a4a6a · indent 70px
Level 5 — Entry Row (indent 3)
Georgia 12.5px · color #3a5a7a · indent 98px
6 — CATALOG ID SYSTEM
| Entry format | Label [Alpha ID] ◈ [Hamburg ID] |
| Alpha ID separator | Em dash ( — ) between segments · no spaces |
| Bracket style | Square brackets [ ] around both IDs at all levels |
| White-space | white-space: nowrap — IDs never wrap mid-code |
Alpha ID construction logic:
Domain: NVT | SVM | PUV
SVM sub-domain: FF | SF | NV
SF vessel: CM | LM | VM | CO
Grouping: IS | MU | SY | CO
Named entity: PW | SWS | KT | etc.
SVM—SF—CM—PW—SY—SWS
= SVM › SF › Capillary › Port Wine › Syndromic › Sturge-Weber
7 — HANDOUT CARD STRUCTURE — 10-SECTION ARC
SIDE ONE — WHO YOU ARE
1 — What you see
2 — What you feel
3 — What else may be present
4 — What this probably is not
SIDE TWO — WHAT'S UNDERNEATH & WHAT COMES NEXT
5 — What's happening below the skin
6 — How this gets confirmed
7 — What may help
8 — Life with this
9 — Where this goes
10 — What's coming
Page 3: References (left column) + Key Terms plain-language glossary (right column) ·
Page 4 (reserved): Addenda, info cards, additional content as needed ·
License plate: Bottom of page 3 only — [ISSVA Alpha ID] ◈ [Hamburg ID] · ICD-10 · genetic driver · Care4-Rare copyright
Consistency rules — every handout must: (1) display full catalog ID at top · (2) include parent domain color band matching compendium · (3) use same font stack and color system · (4) include Care4-Rare attribution footer · (5) reference parent compendium entry by ID · (6) carry medical disclaimer
Never: mix fonts · introduce colors outside the system · omit ◈ from IDs · use tables for layout (use flex rows)
8 — CHANGE REQUEST VOCABULARY — USE THESE TERMS PRECISELY
"Domain header band" — full-width dark band at start of each major block (NVT, SVM, PUV)
"Sub-domain band" / "Level 2 band" — second-tier colored band (Benign, Fast-Flow, Capillary etc.) white text
"Group header" / "Level 3 band" — light-tint band with dark text (Isolated, Port Wine CM, Syndromic etc.)
"Entry row" — single catalog line: label left, IDs right, on white/near-white background
"Description box" — tinted italic paragraph immediately below a domain header band
"Alpha ID" — the letter-code portion: [SVM—SF—CM—PW]
"Hamburg ID" — the cross-reference code: [VE—EX—LI]
"Navigation diamond" / "◈" — U+25C8 · sits between Alpha ID and Hamburg ID · clickable hotlink
"Indent level" — nesting depth: Level 4 = first indent (42px); Level 5 = second (70px) or third (98px)
"License plate" — the grey footer band at bottom of page 3 carrying both catalog IDs, ICD-10, copyright
"Side One" / "Side Two" — the two content halves of a classification card (sections 1–4 vs 5–10)
"Look-alike warning box" — Section 4 amber box: #FDEBD0 bg, #784212 border/text
Care4-Rare Style Guide · Palette B2 · Version 1.5 · 2026.06 · Confirmed canonical
© 2026 Care4-Rare Project · For personal reference and patient advocacy use only · Diagnosis is the realm of qualified medical professionals