SVG UI Panel House Style

Contract

When you emit an SVG information panel (a list/table panel, a task checklist, a pipeline/dependency status diagram, or a rich-text report layout), every numeric constant and hex code below is fixed. Do not substitute "equivalent" values, near-shades, or system defaults — the house style is the deliverable.

Rules (the complete spec)

R1 — Canvas

• Root element is <svg viewBox="0 0 1200 H" ...>. The viewBox width is always

1200 (landscape, ~16:9). Only the height H varies with content.

• Outer content margin is 40px on all sides.

R2 — Font

• Every <text> carries, in this exact order:

font-family="'Inter','Helvetica Neue','Microsoft YaHei',sans-serif".

• Never reorder, never drop a face, never substitute Arial / Roboto / Helvetica

alone / system-ui. The 'Microsoft YaHei' fallback is what renders CJK on Windows — dropping it is a bug, not a simplification.

R3 — Status colors (exact hex, by meaning)

| Meaning | Hex | |---|---| | done / success / pass / healthy | #43A047 | | in-progress / warning / running / degraded / pending-review | #FF8F00 | | not-started / neutral / disabled / pending / todo / off | #90A4AE | | error / failed / blocked / down | #E53935 | | info / highlighted metric / KPI accent | #1565C0 |

Pick the color by the item's meaning, never by aesthetic preference. A "done" item is #43A047; a "failed" stage is #E53935; a "not started" item is #90A4AE.

R4 — Header band color (per template)

The title band at the top of each panel uses a fixed deep accent per template: | Template | Header hex | |---|---| | list-panel | #1A237E (Indigo) | | checklist-panel | #004D40 (Teal) | | pipeline-status | #311B92 (Deep Purple) | | richtext-layout | #263238 (Blue Grey) |

R5 — Shadow

• Define <filter id="cardShadow"> once inside <defs>.
• Every card/panel <rect> references it via filter="url(#cardShadow)". No card

ships without the shadow; there is exactly one filter, reused.

R6 — Row spacing

• list-panel rows stack with a +56px vertical y-offset per row.
• checklist-panel rows stack with a +60px vertical y-offset per row.
• These two numbers are different on purpose; do not unify them.

R7 — Corner radius

• Large cards/panels: rx="8".
• Small elements (chips, status boxes, inline tags): rx="4"–rx="6".
• Pill buttons: rx = half the element height (a full capsule).

R8 — Text size hierarchy

• Panel title: font-size="20" bold.
• Section/column heading: font-size="14"–16 bold.
• Body text: font-size="13".
• Annotation/footnote: font-size="11"–12.

R9 — Checklist state glyphs

Each checklist item shows a leading status box plus styled text:

• done: green (#43A047) filled box + strikethrough label.
• in-progress: amber (#FF8F00) border + light highlight behind the label.
• todo/not-started: grey (#90A4AE) empty box.
• blocked: red (#E53935) dashed border + red-tinted row background.

R10 — PNG conversion

• Rasterize with cairosvg at output_width=2400:

python3 -c "import cairosvg; cairosvg.svg2png(url='in.svg', write_to='out.png', output_width=2400)"

Worked examples (before → after)

R1 Canvas — base picks an arbitrary width.

• BEFORE: <svg viewBox="0 0 800 400">
• AFTER: <svg viewBox="0 0 1200 400">

R2 Font — base reaches for Arial.

• BEFORE: <text font-family="Arial, sans-serif">Build</text>
• AFTER: <text font-family="'Inter','Helvetica Neue','Microsoft YaHei',sans-serif">Build</text>

R3 Status color — base uses Material's default green #4CAF50.

• BEFORE: <circle cx="1120" cy="50" r="8" fill="#4CAF50"/> <!-- done -->
• AFTER: <circle cx="1120" cy="50" r="8" fill="#43A047"/> <!-- done -->

R3 Info accent — base colors a KPI the same green as "done".

• BEFORE: <rect ... fill="#43A047"/> <text>Revenue $4.2M</text>
• AFTER: <rect ... fill="#1565C0"/> <text>Revenue $4.2M</text> (KPI = info blue)

R4 Header band — base uses one neutral header everywhere.

• BEFORE (a pipeline panel): <rect x="0" y="0" width="1200" height="72" fill="#333"/>
• AFTER: <rect x="0" y="0" width="1200" height="72" fill="#311B92"/> (pipeline = Deep Purple)

R5 Shadow — base draws flat cards.

• BEFORE: <rect x="20" y="20" width="1160" height="60" fill="#fff"/>
• AFTER:

svg <defs><filter id="cardShadow"><feDropShadow dx="0" dy="2" stdDeviation="3"/></filter></defs> <rect x="20" y="20" width="1160" height="60" fill="#fff" filter="url(#cardShadow)"/>

R6 Row spacing — base eyeballs ~50px between rows.

• BEFORE (list): row1 y="120", row2 y="170" (+50).
• AFTER (list): row1 y="120", row2 y="176" (+56). Checklist would be +60.

R7 Corner radius — base leaves rects sharp.

• BEFORE: <rect ... /> (no rx)
• AFTER: <rect ... rx="8"/> for a card; rx="4" for an inline status chip.

R8 Text sizes — base uses one font size for everything.

• BEFORE: title and body both font-size="14".
• AFTER: title font-size="20" bold, body font-size="13".

R9 Checklist glyph — base just colors the text and skips the box.

• BEFORE: <text fill="#43A047">Build image</text>
• AFTER:

svg <rect x="40" y="100" width="18" height="18" rx="4" fill="#43A047"/> <text x="68" y="114" text-decoration="line-through" font-family="'Inter','Helvetica Neue','Microsoft YaHei',sans-serif">Build image</text>

R10 PNG — base downsizes for messaging.

• BEFORE: cairosvg.svg2png(url='in.svg', write_to='out.png', output_width=800)
• AFTER: cairosvg.svg2png(url='in.svg', write_to='out.png', output_width=2400)

Edge cases & exceptions

• Mixed states in one panel: color each element by its own meaning. A

checklist with done + blocked + todo items uses #43A047, #E53935, and #90A4AE in the same panel — never one color for the whole panel.

• "Pending review" vs "not started": pending-review is active waiting →

amber #FF8F00. Not-started is untouched → grey #90A4AE. They are different states, different colors.

• Tall content overflowing the default height: grow H in the viewBox; never

shrink width below 1200 to "fit" — width is locked.

• A pipeline status that is both running and at-risk: status color tracks the

execution state (running → #FF8F00); the risk goes in a separate RISK_NOTE, not by recoloring the node red.

• Metrics/KPIs are not statuses: a highlighted number uses info blue

#1565C0, not the green success color, even when the number is "good".

Do / Don't

• DON'T set viewBox width to 800/1000/anything. ALWAYS 1200.
• DON'T write font-family="Arial". ALWAYS the full 4-face stack in order.
• DON'T use #4CAF50/#F44336/#9E9E9E (Material defaults). ALWAYS the house

hex #43A047/#E53935/#90A4AE.

• DON'T color a KPI with the success green. ALWAYS info blue #1565C0 for metrics.
• DON'T draw flat cards. ALWAYS one <filter id="cardShadow"> + filter="url(#cardShadow)" on each card.
• DON'T reuse +56 for checklists. ALWAYS +56 list / +60 checklist.
• DON'T give every template the same header color. ALWAYS the per-template accent.

Common mistakes (base defaults to watch)

• Defaulting viewBox to 0 0 800 600 or the content's natural size.
• Emitting font-family="Arial, sans-serif" or "Helvetica, sans-serif".
• Reaching for Material's #4CAF50 (green) / #FFC107 (amber) / #F44336 (red)

instead of the house #43A047 / #FF8F00 / #E53935.

• Skipping the drop-shadow filter entirely (flat rects).
• Using one row pitch for both list and checklist panels.
• Coloring metric/info accents with the success green.

Quick checklist

• ] viewBox="0 0 1200 H" (width 1200)
• ] every <text> → the exact 4-face font stack
• ] status hex by meaning: #43A047 / #FF8F00 / #90A4AE / #E53935; info #1565C0
• ] header band color matches the template
• ] one <filter id="cardShadow">, applied to every card
• ] list rows +56px, checklist rows +60px
• ] rx=8 cards / rx=4–6 small / pill = half-height
• ] PNG via cairosvg output_width=2400