Refactor showcase SVGs to industrial enterprise visuals#68
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the project's showcase visual assets, including the architecture, dashboard, and social previews, transitioning them to a light enterprise-themed design that emphasizes a cloud-first validation narrative. The review feedback highlights several opportunities for improvement regarding design consistency and maintainability. Specifically, the reviewer noted visual inconsistencies in flow line connections, the presence of unused CSS classes, and discrepancies in typography and color tokens across the different SVG files.
| <text x="1050" y="790" class="small muted">Local execution may assist development, but it is marked degraded and never overrides cloud evidence.</text> | ||
| <text x="1050" y="815" class="mono small ink">authority = github_actions · fallback = status_only</text> | ||
| </g> | ||
| <path class="flow" d="M340 251 H410"/><path class="flow" d="M650 251 H720"/><path class="flow" d="M960 251 H1030"/> |
There was a problem hiding this comment.
The horizontal flow lines in Lane 1 have a 10px gap before the target boxes (e.g., H410 vs box at x=420), whereas flow lines in other lanes connect directly to the borders. This visual inconsistency should be resolved to ensure a uniform look across the diagram.
<path class="flow" d="M340 251 H420"/><path class="flow" d="M650 251 H730"/><path class="flow" d="M960 251 H1040"/>
| .bg{fill:#f5f7fa}.panel{fill:#ffffff;stroke:#d8dee8;stroke-width:1.2}.panel-soft{fill:#fbfcfe;stroke:#d8dee8;stroke-width:1.2} | ||
| .ink{fill:#17202e}.muted{fill:#647084}.subtle{fill:#8a94a6}.line{stroke:#d8dee8;stroke-width:1}.rule{stroke:#e8ecf2;stroke-width:1} | ||
| .green{fill:#17803d}.green-bg{fill:#e8f5ee}.amber{fill:#a86408}.amber-bg{fill:#fff5df}.red{fill:#b42318}.red-bg{fill:#feeceb}.blue{fill:#235ee8}.blue-bg{fill:#edf3ff} | ||
| .chip{font-size:13px;font-weight:750;letter-spacing:.3px}.h1{font-size:34px;font-weight:850}.h2{font-size:17px;font-weight:800}.small{font-size:13px}.micro{font-size:11px;letter-spacing:.45px}.mono12{font-size:12px}.mono13{font-size:13px} |
There was a problem hiding this comment.
Several CSS classes (.panel-soft, .red, .red-bg, and .chip) are defined in the <style> block but are not utilized in the SVG structure. Removing these unused styles will improve maintainability and reduce the asset's footprint.
.bg{fill:#f5f7fa}.panel{fill:#ffffff;stroke:#d8dee8;stroke-width:1.2}\n .ink{fill:#17202e}.muted{fill:#647084}.subtle{fill:#8a94a6}.line{stroke:#d8dee8;stroke-width:1}.rule{stroke:#e8ecf2;stroke-width:1}\n .green{fill:#17803d}.green-bg{fill:#e8f5ee}.amber{fill:#a86408}.amber-bg{fill:#fff5df}.blue{fill:#235ee8}.blue-bg{fill:#edf3ff}\n .h1{font-size:34px;font-weight:850}.h2{font-size:17px;font-weight:800}.small{font-size:13px}.micro{font-size:11px;letter-spacing:.45px}.mono12{font-size:12px}.mono13{font-size:13px}
| <marker id="arrow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 z" fill="#4d5b70"/></marker> | ||
| <style> | ||
| .sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.mono{font-family:"SFMono-Regular","JetBrains Mono",Consolas,monospace} | ||
| .bg{fill:#f6f7f9}.ink{fill:#17202e}.muted{fill:#657287}.subtle{fill:#8d97a8}.lane{fill:#ffffff;stroke:#d8dee8;stroke-width:1.2}.lane-head{fill:#eef2f7}.box{fill:#fbfcfe;stroke:#cfd7e3;stroke-width:1.2}.authority{fill:#eef7f0;stroke:#9ed3af}.artifact{fill:#eef3ff;stroke:#adc3fb}.warn{fill:#fff6e5;stroke:#e5bd72}.consumer{fill:#f4f1ff;stroke:#c7bdf4}.flow{fill:none;stroke:#4d5b70;stroke-width:2.4;marker-end:url(#arrow)}.thin{stroke:#e5e9f0;stroke-width:1}.h1{font-size:36px;font-weight:850}.h2{font-size:16px;font-weight:850}.small{font-size:13px}.micro{font-size:11px;font-weight:850;letter-spacing:.5px} |
There was a problem hiding this comment.
Typography tokens for .h1, .h2, and .micro are inconsistent with those in dashboard-preview.svg. For instance, .h1 is 36px here but 34px in the dashboard preview. Standardizing these across all showcase assets is recommended for a cohesive design system.
| .muted{fill:#9eb0c7}.body{fill:#d8e3f2}.bright{fill:#f7fbff}.cyan{fill:#85edff}.stroke{stroke:#5f83ae;stroke-opacity:.62} | ||
| .node{fill:#0e1728;stroke:#5c87b7;stroke-opacity:.78}.card{fill:#080f1d;stroke:#6188b6;stroke-opacity:.72} | ||
| .sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.mono{font-family:"SFMono-Regular","JetBrains Mono",Consolas,monospace} | ||
| .bg{fill:#f5f7fa}.ink{fill:#101723}.muted{fill:#5f6b7d}.panel{fill:#ffffff;stroke:#d9dfe9;stroke-width:1.2}.rule{stroke:#e7ebf1;stroke-width:1}.green{fill:#17803d}.green-bg{fill:#e8f5ee}.blue{fill:#245fe8}.blue-bg{fill:#edf3ff}.amber{fill:#9a6400}.amber-bg{fill:#fff4dc} |
There was a problem hiding this comment.
The color tokens for .amber, .amber-bg, and .ink differ from those used in the other SVG assets (e.g., .ink is #101723 here vs #17202e elsewhere). These should be synchronized to maintain brand consistency across all preview surfaces.
1 participant
Motivation
Description
showcase/assets/dashboard-preview.svginto a white/enterprise operations console with a workflow timeline, CI authority status, deterministic run metadata, artifact validation states, replay trace summary, compression comparison table, and forensic audit indicators.showcase/assets/architecture-preview.svginto a lane-based enterprise architecture diagram with structured source / cloud authority / published evidence / consumers lanes, clearer flow arrows, and no floating AI nodes or heavy gradients.showcase/assets/social-preview.svgto an OpenGraph-optimized social preview with bold typography, a single central validation card, minimal decoration, and clearer copy about deterministic cloud runs.Testing
python3 -c "import xml.etree.ElementTree as ET; [ET.parse(p) for p in ['showcase/assets/dashboard-preview.svg','showcase/assets/architecture-preview.svg','showcase/assets/social-preview.svg']]; print('SVG XML valid')", which printedSVG XML validand thus succeeded.Codex Task