feat: add brand banner#20
Merged
Merged
Conversation
Bring in the Claude Design output for the engineering-handbook banner per docs/banner-spec.md from alanchester-brand. Banner concept: left panel shows "The Philosophies" with four pillars (01 Branching · 02 Release · 03 Security · 04 Testing) and a Hunter Green δ marker on Branching marked "δ · canonical" — the one finding the handbook calibrates around. Right panel shows the title, lead, content stack (Philosophies · Workflows · CI Automation · AI-Amplified), and the A·ε·C monogram. Dark ink background, brand palette, restraint clause respected — green only on the δ marker. Files added per banner-spec storage layout: - assets/banner.svg (vector source from Claude Design) - assets/banner-1200.png (1200w PNG) - assets/banner-2400.png (2400w PNG, 2x) README references the 2400 PNG. The SVG ships without inline <style> definitions for its class-based markup (eyebrow, pillar-num, headline, accent-fill, etc.) — when embedded as <img> on GitHub, classes have no associated rules so the visual would collapse. The PNG is the visual of record until the SVG is re-exported with inline styles or a stylesheet pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-Authored-By: amcheste <13696614+amcheste@users.noreply.github.com>
amcheste
reviewed
May 12, 2026
The Claude Design SVG export shipped with an empty <defs> block but the markup uses class-based selectors throughout (.eyebrow, .pillar-num, .headline, .accent-fill, etc.). Without inline styles, the classes had no rules and the SVG couldn't render standalone on GitHub. Add a <style> block inside <defs> with definitions for every class used in the document. Type families pull from the brand typography tokens (IBM Plex Sans / Mono / Serif from alanchester-brand/tokens/typography.css), so the SVG renders brand-consistent when system fallbacks substitute. Weights, sizes, tracking, and opacity values reproduce the PNG's visual treatment. Hunter Green (#1F4D3A) is scoped to .accent-fill and .delta-label only — the δ marker on Branching. Restraint clause respected. With the stylesheet in place, the SVG is now the canonical vector source and renders standalone, so the README switches its <img src> from banner-2400.png to banner.svg per banner-spec's default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-Authored-By: amcheste <13696614+amcheste@users.noreply.github.com>
amcheste
approved these changes
May 12, 2026
This was referenced May 12, 2026
Merged
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Brings in the Claude Design output for the
engineering-handbookbanner per banner-spec.md.Banner concept
Left panel: "The Philosophies" with four pillars — 01 Branching · 02 Release · 03 Security · 04 Testing — and a Hunter Green δ marker on Branching annotated δ · canonical, the one finding the handbook calibrates around.
Right panel: title, lead, content stack (Philosophies · Workflows · CI Automation · AI-Amplified), and the A·ε·C monogram.
Dark ink background, brand palette, restraint clause respected — green only on the δ marker.
Files added per banner-spec storage layout
assets/banner.svg(vector source)assets/banner-1200.png(1200w PNG)assets/banner-2400.png(2400w PNG, 2x)SVG caveat
The README references
assets/banner-2400.png, not the SVG. The SVG as exported uses class-based markup (.eyebrow,.pillar-num,.headline,.accent-fill, etc.) but ships with an empty<defs>— no inline<style>block. When embedded as<img>on GitHub, the classes have no associated rules and the visual would collapse (text would render with default browser styling, green accent would disappear).The PNG is the visual of record until the SVG is re-exported with inline styles. If you'd like, I can add a stylesheet pass to the SVG so it can be the canonical reference in the README per banner-spec's default. Small follow-up PR.