Align the website palette with the LeanCode design system - #47
Merged
Merged
Conversation
The site's tokens drifted from the brand: the yellow was #EDFF2F instead of the CTA yellow #F0FF00, the page sat on #050505 instead of true black, and the surfaces, borders and grays carried a blue tint where the brand calls for warm-tinted neutrals. Text on yellow was near-black rather than black, and the error/success signals were off-brand too. Map every token onto the design system's values (black, #151513/#1D1D1A surfaces, a rgba(255,255,255,.12) hairline, the white/#D8D8D4/#A3A3A0 text triad, #E64239/#80C340 signals) and sweep the hardcoded literals in the hero and footer glows, pills, buttons, the terminal dots, the nav blur, theme-color, the manifest and favicon.svg. The asset renderer used the old background too, so the icons and social card are regenerated with the pinned Chrome. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013Tw8hY1dZyp7s18pUTCacv
The brand sweep touched thirteen files because the palette was spread over the :root tokens, rgba literals in gradient strings, favicon.svg, the web manifest and the test renderer. Name the design system's swatches once in palette.dart and derive the rest: the :root tokens, the alpha variants through accentAlpha and Swatch.alpha, the theme-color meta, and the two text assets, which the assets test now writes from Dart and compares byte for byte like the images. The favicon reuses Icon.ciach's paths instead of duplicating them, and the renderer rasterizes that same SVG rather than scraping the committed file. The unused --accent-2 token goes; the terminal dots take --border-2 instead of a one-off gray. The rendered images are unchanged. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013Tw8hY1dZyp7s18pUTCacv
PiotrRogulski
temporarily deployed
to
Preview
September 9, 2026 13:00 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
Member
There was a problem hiding this comment.
Can we make this an enum, or at least bundle these into some static namespace (abstract final class)?
Author
There was a problem hiding this comment.
Done in 93d3c9d — Palette is now an enum: each swatch carries its packed rgb, with color, hex and alpha() on the value, and the two hairline colors as static members (Palette.line, Palette.lineStrong). Call sites read Palette.ctaYellow.hex etc. Golden assets are byte-identical, so the output is unchanged.
🤖 Generated with Claude Code
Generated by Claude Code
Review asked for the swatches to live in one namespace rather than as loose top-level constants. Each value carries its packed rgb; the two hairline colors become static members. Call sites read Palette.x. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013Tw8hY1dZyp7s18pUTCacv
PiotrRogulski
marked this pull request as ready for review
September 9, 2026 13:48
Komoszek
approved these changes
Sep 9, 2026
7 of 9 tasks
This branch was successfully deployed
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
3 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.
Summary
Aligns the landing page's palette with the LeanCode design system (the LNCD handoff from Claude Design), then makes that palette the single source of truth.
Colors (first commit)
#EDFF2F→ the CTA yellow#F0FF00; page background#050505→ true black; surfaces#101013/#16161B→ the warm#151513/#1D1D1A; borders → thergba(255,255,255,.12)hairline (plus a.2strong variant); text → the white /#D8D8D4/#A3A3A0triad;--accent-ink→ pure black ("text on yellow is always black");--accent-soft→ the spec'srgba(240,255,0,.06)callout wash; signals →#E64239/#80C340.One source of truth (second commit)
lib/palette.dartnames the design system's swatches once (black,ctaYellow,bodyGray,surface,error, …) as a tinySwatchextension type with.hex,.colorand.alpha(a).:roottokens instyles.dart, the alpha variants in the hero/footer glows and pill/flag borders (via the existingaccentAlpha), the nav blur,theme-color, and the two text assets.favicon.svgandsite.webmanifestare now generated from Dart and guarded byassets_test.dartexactly like the PNGs (byte-for-byte compare;UPDATE_GOLDENS=1 dart testrewrites). The favicon reusesIcon.ciach's paths instead of duplicating them, and the renderer rasterizes the same SVG string rather than scraping the committed file.--accent-2token; the terminal dots use--border-2instead of a one-off gray.Changing a brand color is now a one-line edit in
palette.dartfollowed byUPDATE_GOLDENS=1 dart test.Out of scope on purpose: typography (Space Grotesk / JetBrains Mono stay) and shape (pill buttons, 14px radii) — colors only.
Test plan
dart analyze— no issuesdart format --set-exit-if-changed— cleandart test test/assets_test.dart— 8/8 pass; the six PNGs are byte-identical before and after the refactor, which is the proof it preserved every colorcode.flagborders), footer CTA glow, favicon in the tab🤖 Generated with Claude Code
https://claude.ai/code/session_013Tw8hY1dZyp7s18pUTCacv
Generated by Claude Code