50 lines
2.0 KiB
Markdown
Executable File
50 lines
2.0 KiB
Markdown
Executable File
# ⚠️ STRUCTURAL DIAGRAM IRON LAWS
|
|
|
|
These rules apply to Playwright+CSS structural diagrams (flowcharts, mind maps, radial grids, org charts). They are enforced by the template files. Violating any = task failure.
|
|
|
|
## 1. ZERO OVERLAP
|
|
No element may overlap another:
|
|
- Arrows/connectors must not cross over text boxes
|
|
- Connectors must not pass through node bodies
|
|
- Text boxes / nodes must not overlap each other
|
|
- Labels must not obscure any graphic element
|
|
|
|
**Post-generation**: verify every element has clear separation. If overlap exists, fix before delivery — enlarge canvas, increase spacing, or reduce content.
|
|
|
|
## 2. LAYOUT MUST HAVE HIERARCHY
|
|
Forbidden: all nodes same size, same level, mechanically tiled in a flat grid.
|
|
|
|
Required:
|
|
- Primary nodes visually larger/bolder than secondary nodes
|
|
- Annotation nodes clearly subordinate (smaller, muted color)
|
|
- Spacing between groups > spacing within groups
|
|
- Clear reading path (top→bottom, left→right, or center→outward)
|
|
|
|
**Squint test**: if every box looks identical, the layout has failed.
|
|
|
|
## 3. NODE BACKGROUND COLORS
|
|
|
|
**🚫 Forbidden as background (too saturated for large fills):**
|
|
|
|
| Color | Forbidden Hex |
|
|
|-------|--------------|
|
|
| Pure blue | `#3B82F6`, `#2563EB`, `#1D4ED8` |
|
|
| Pure green | `#10B981`, `#059669`, `#22C55E` |
|
|
| Pure red | `#EF4444`, `#DC2626`, `#F87171` |
|
|
| Pure purple | `#8B5CF6`, `#7C3AED`, `#A855F7` |
|
|
| Pure amber | `#F59E0B`, `#D97706`, `#FB923C` |
|
|
| Any color: R/G/B > 0xCC and saturation > 50% | — |
|
|
|
|
**✅ Allowed as background:**
|
|
|
|
| Color | Hex | Usage |
|
|
|-------|-----|-------|
|
|
| Ice blue | `#EFF6FF`, `#DBEAFE` | Normal step nodes |
|
|
| Mint green | `#F0FDF4`, `#D1FAE5` | Success/pass nodes |
|
|
| Light amber | `#FFF7ED`, `#FEF3C7` | Decision/warning nodes |
|
|
| Lavender | `#F5F3FF`, `#EDE9FE` | End/terminal nodes |
|
|
| Light gray | `#F8FAFC`, `#F1F5F9` | Group containers |
|
|
| White | `#FFFFFF` | Default canvas |
|
|
|
|
**Rule: Saturated colors go on BORDERS (2px) and TEXT only. Backgrounds stay pale.**
|