8000 Brand: adopt the Aladdin design system (README, site, banners, social preview) by adeelahmad · Pull Request #94 · adeelahmad/aloop · GitHub
[go: up one dir, main page]
Skip to content

Brand: adopt the Aladdin design system (README, site, banners, social preview) - #94

Open
adeelahmad wants to merge 2 commits into
masterfrom
claude/readme-branding-m220ak
Open

Brand: adopt the Aladdin design system (README, site, banners, social preview)#94
adeelahmad wants to merge 2 commits into
masterfrom
claude/readme-branding-m220ak

Conversation

@adeelahmad
@adeelahmad adeelahmad commented Oct 20, 2026 •
edited
Loading
Copy link
Copy Markdown
Owner

Requested by Adeel · project thread

Before: the brand in #88 was a home-made gold-on-dark kit (an "a" whose bowl is a loop, Space Grotesk, a dark social card), with emoji all through the README. Adeel's own Aladdin design system, GitHub social preview and GitHub kit existed but were never used.

After: the repo uses Adeel's design system.

  • Colours: the Google blue, red, green and gold, each with one meaning (intent, missing proof, holding proof, the gate).
  • Wordmark: DM Sans 800 over the four-segment loop bar. The icon is the wordmark cut to its "A".
  • Social preview: Adeel's own card, rendered at 2×.
  • Link card (OG): a new card with large type that still reads in a phone feed.
  • README: no emoji.
  • Site: on the same palette.

How

  • Design system. docs/brand/design-system/ vendors its tokens, guideline cards and README, plus the two social cards as HTML (social-preview.html, og-card.html). The React components and UI kit stay in the design system. The brand-illustration card and the genie infographic are left out, because the design system asks for an original lamp motif with no borrowed visual language.

  • Generator. gen_brand.py reads the colour tokens from design-system/tokens/colors.css and writes:

    • wordmark.svg and wordmark-on-blue.svg;
    • signature.svg (the four dots);
    • icon.svg with a whole-pixel 16 px cut (icon-16.svg = favicon.svg);
    • the favicon PNGs, the app icons, and the light and on-blue README banners.

    render.mjs (Playwright) renders the two HTML cards from cached fonts. Arrows, ● ◆ ✓ and ≠ ≤ come from pinned Noto faces. The render fails if any text falls back to a system font, so the PNGs come out byte-identical on rerun. The old mark-* and lockup-* SVGs are removed.

  • Social preview changes. Adeel's card changes in five places:

    • The RED card names the real agent: red-worker, not "tester".
    • A grey "Measured" box says 8 intents, each under $1 and 15 min. These are the latest runs of each intent in docs/evidence/README.md ($0.56–$0.91, 6m45s–14m13s).
    • The feature list adds Missions (new).
    • The footer no longer splits words across lines.
    • The phase discs no longer put white numbers on core red, green or gold (3.92, 3.06 and 1.93:1). Red and green use the dark variants, and the gold disc takes ink.

  • README. Emoji are replaced by the design system's glyphs: ✓ shipped, ● in progress, → next, ◆ for the door decision. readme.test.py now fails on any emoji. The release badge is blue, and the footer names the design system.

  • Site.

    • Palette: light design-system colours by default, its terminal palette in dark mode.
    • The wordmark is in the header.
    • The lamp the ROADMAP asks for is drawn flat, with no gradient.
    • Cards are white with a hairline border and a 16 px radius. Code sits on the terminal surface.

  • Calls I made.

    • Wordmark option D, not the Aladin font: the design system records D as chosen.
    • The dark README banner is the on-blue variant, the design system's own inverse.
    • The GitHub kit is not used: it is snapback's, and its checklist was already done in README, brand kit and repo front page for aloop #88.

Evidence

  • Tests:
    • readme passes 7 checks, including the new no-emoji check. It failed first on the hourglass left on line 193.
    • site (5) and evidence (4) pass.
    • rename-compat, layout, skill-layout and aladdin-cli pass.
    • make test-hosts passes.
    • CI was green on the first push.
  • Review: an adversarial review ran over five areas: claims, generator, site and README, fidelity, and visuals. It raised 23 findings and confirmed 7 distinct ones; all are fixed in the second commit.
  • Contrast: check_palette() passes. It now covers the disc pairs and groups every pair by use. Blue on white is 4.51:1, and every *-dark text variant on white is at least 4.65:1. Two design-system tint pairs are kept exact and documented: green-dark on its tint (4.49:1) and gold-dark on its tint (4.34:1).
  • Output: every SVG and PNG regenerates byte-identically. social-preview.png is 399 KB at 2560×1280, under GitHub's 1 MB limit.

Needs the owner: upload docs/brand/social-preview.png under Settings → General → Social preview. GitHub has no API for this.

🤖 Generated with Claude Code

https://claude.ai/code/session_019o44PEkQ4qiLGMEes1QTKx

claude added 2 commits October 20, 2026 08:19
@claude
Brand: adopt the Aladdin design system (README, site, banners, social…
4c6ba45 
… preview)

The owner's Aladdin design system replaces the earlier gold "a-loop" kit:
- docs/brand/design-system/ vendors its tokens, guideline cards and the two
  social cards; gen_brand.py reads the colour tokens from it.
- Wordmark option D (DM Sans 800 over the blue-red-green-gold loop bar), its
  on-blue variant, the four-dot signature, an "A over the loop bar" icon with a
  whole-pixel 16 px cut, light and on-blue README banners, favicons, app icons.
- social-preview.png is the owner's card rendered at 2x, with the RED agent
  named red-worker, a measured-cost box from the evidence ledger, the mission
  layer in the feature list and a footer that no longer breaks words.
- og-card.png is a new large-type card that reads in a phone feed.
- README: no emoji (the design system's glyphs instead), blue release badge,
  design-system footer. Site: design-system palette (terminal palette in dark
  mode), the wordmark in the header, the lamp drawn flat without a gradient.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019o44PEkQ4qiLGMEes1QTKx
@claude
Brand review fixes: no emoji left, disc and card contrast, exact bar …
b05edd4 
…width, pinned symbol fonts

From an adversarial review of the rebrand:
- README: the last emoji (an hourglass on "next") becomes →. readme.test.py
  now fails on any Emoji_Presentation code point, so the rule holds.
- Social preview: white numbers no longer sit on core red, green or gold
  (3.92, 3.06, 1.93:1): the red and green discs take the dark variants
  (5.80, 5.10) and the gold disc takes ink (8.32). check_palette checks
  these pairs.
- Site: the light card panel is white, the design system's plain card, so
  the gold-dark SCAFFOLD title is 4.65:1 instead of 4.41:1.
- Wordmark: the loop bar now includes the trailing letter-spacing, as the
  CSS it mirrors does (0.03 em narrower).
- render.mjs: file URLs come from pathToFileURL / Path.as_uri, and the
  render fails if any text falls back to a system font. Arrows, ● ◆ ✓ and
  ≠ ≤ come from pinned Noto faces, so the PNGs are byte-identical on rerun.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019o44PEkQ4qiLGMEes1QTKx

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@adeelahmad @claude
0