Created
July 31, 2026 07:29
-
-
Save lassebenni/767981cfdcbfdbd25c4acbb09d3a10d2 to your computer and use it in GitHub Desktop.
Visual: Week 14 HYF palette - environments one template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Visual: One template, many environments</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 24px; | |
| background: #faf5d9; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| font-family: "Lato", "Helvetica Neue", Arial, sans-serif; | |
| } | |
| svg { max-width: 760px; width: 100%; height: auto; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 760 440" xmlns="http://www.w3.org/2000/svg" font-family="Lato, Helvetica Neue, Arial, sans-serif"> | |
| <rect x="2" y="2" width="756" height="436" rx="16" fill="#ffffff" stroke="#e6dfb8" stroke-width="2"/> | |
| <text x="380" y="40" text-anchor="middle" fill="#b12900" font-size="22" font-weight="700">One template, three environments</text> | |
| <text x="380" y="64" text-anchor="middle" fill="#595959" font-size="14">Same Bicep file; only the parameter changes at deploy time</text> | |
| <rect x="240" y="88" width="280" height="78" rx="10" fill="#f3edc6" stroke="#b12900" stroke-width="2"/> | |
| <text x="380" y="118" text-anchor="middle" fill="#b12900" font-size="15" font-weight="700">main.bicep</text> | |
| <text x="380" y="140" text-anchor="middle" fill="#000000" font-size="13">param environment = ?</text> | |
| <text x="380" y="158" text-anchor="middle" fill="#595959" font-size="12">storage · container · …</text> | |
| <line x1="380" y1="166" x2="380" y2="176" stroke="#595959" stroke-width="2"/> | |
| <rect x="56" y="178" width="148" height="28" rx="6" fill="#e3f2fd" stroke="#1565c0"/> | |
| <text x="130" y="197" text-anchor="middle" fill="#1565c0" font-size="12" font-weight="700">environment=dev</text> | |
| <rect x="288" y="178" width="184" height="28" rx="6" fill="#e8f5e9" stroke="#2e7d32"/> | |
| <text x="380" y="197" text-anchor="middle" fill="#2e7d32" font-size="12" font-weight="700">environment=staging</text> | |
| <rect x="540" y="178" width="164" height="28" rx="6" fill="#fff3e0" stroke="#e65100"/> | |
| <text x="622" y="197" text-anchor="middle" fill="#e65100" font-size="12" font-weight="700">environment=prod</text> | |
| <line x1="130" y1="206" x2="130" y2="222" stroke="#1565c0" stroke-width="2"/> | |
| <line x1="380" y1="206" x2="380" y2="222" stroke="#2e7d32" stroke-width="2"/> | |
| <line x1="622" y1="206" x2="622" y2="222" stroke="#e65100" stroke-width="2"/> | |
| <line x1="130" y1="222" x2="622" y2="222" stroke="#e6dfb8" stroke-width="2"/> | |
| <line x1="130" y1="222" x2="130" y2="242" stroke="#1565c0" stroke-width="2"/> | |
| <line x1="380" y1="222" x2="380" y2="242" stroke="#2e7d32" stroke-width="2"/> | |
| <line x1="622" y1="222" x2="622" y2="242" stroke="#e65100" stroke-width="2"/> | |
| <polygon points="124,242 136,242 130,252" fill="#1565c0"/> | |
| <polygon points="374,242 386,242 380,252" fill="#2e7d32"/> | |
| <polygon points="616,242 628,242 622,252" fill="#e65100"/> | |
| <rect x="40" y="258" width="180" height="120" rx="10" fill="#e3f2fd" stroke="#1565c0" stroke-width="2"/> | |
| <text x="130" y="290" text-anchor="middle" fill="#1565c0" font-size="15" font-weight="700">dev</text> | |
| <text x="130" y="316" text-anchor="middle" fill="#000000" font-size="13">smaller SKU</text> | |
| <text x="130" y="336" text-anchor="middle" fill="#000000" font-size="13">same shape</text> | |
| <text x="130" y="360" text-anchor="middle" fill="#595959" font-size="12">cheap to experiment</text> | |
| <rect x="290" y="258" width="180" height="120" rx="10" fill="#e8f5e9" stroke="#2e7d32" stroke-width="2"/> | |
| <text x="380" y="290" text-anchor="middle" fill="#2e7d32" font-size="15" font-weight="700">staging</text> | |
| <text x="380" y="316" text-anchor="middle" fill="#000000" font-size="13">prod-like size</text> | |
| <text x="380" y="336" text-anchor="middle" fill="#000000" font-size="13">same shape</text> | |
| <text x="380" y="360" text-anchor="middle" fill="#595959" font-size="12">pre-release check</text> | |
| <rect x="540" y="258" width="180" height="120" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2"/> | |
| <text x="630" y="290" text-anchor="middle" fill="#e65100" font-size="15" font-weight="700">prod</text> | |
| <text x="630" y="316" text-anchor="middle" fill="#000000" font-size="13">larger SKU</text> | |
| <text x="630" y="336" text-anchor="middle" fill="#000000" font-size="13">same shape</text> | |
| <text x="630" y="360" text-anchor="middle" fill="#595959" font-size="12">customer traffic</text> | |
| <rect x="40" y="396" width="680" height="28" rx="8" fill="#f3edc6" stroke="#e6dfb8"/> | |
| <text x="380" y="415" text-anchor="middle" fill="#000000" font-size="13">Reproducibility is a parameter change, not three hand-built stacks</text> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment