[Specs — do not cascade yet] Component set: section header, canonical card, buttons, motifs - #235
Draft
jackhenderson12 wants to merge 5 commits into
Draft
[Specs — do not cascade yet] Component set: section header, canonical card, buttons, motifs#235jackhenderson12 wants to merge 5 commits into
jackhenderson12 wants to merge 5 commits into
Conversation
Additive, low-risk foundation for the refinement work — no surface repaint here (the bg-golden-fizz → white change lands in its own PR). - global.css: set color-scheme:light and a white <body> background so pages that don't paint their own surface no longer fall through to the browser's dark canvas (which rendered black body text invisible in OS dark mode — Updates, articles, Search, Wiki). Set on low-specificity selectors so utilities (bg-black, bg-golden-fizz, a page's bodyBg) still override — intentionally dark/yellow bands are unaffected. - tailwind.config.js: lock the brand palette to black/white/golden-fizz; remove single-use off-brand light-gold/light-black; quarantine gray/red (kept only for the CWNYC vote-bar data-viz) under a "restricted, non- brand" comment so they're not used on brand surfaces. - popup.njk / about: swap the two light-gold / light-black usages to brand golden-fizz / black. - link.css: de-gray .see-more-link (brand black at reduced opacity). - tailwind.config.js: add documented section/block/element spacing-rhythm tokens for consistent gaps between structural blocks. - README: document the palette, contrast rule, surface default, type roles (one Messer weight → hierarchy by size), and the spacing scale. npm run build passes. Dark-mode fix verified in-browser (Updates renders white; 404's bodyBg yellow still wins). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the rationale to the README palette note so a future pass doesn't "tidy up" the restricted colors and break the Community Week NYC vote bars: there the colors carry meaning (data encoding), not decoration, so they're exempt from the brand-surface three-token rule. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
PR #3 of the refinement sequence — the reusable component set everything downstream inherits. Built as macros + a noindex /styleguide page that renders them on real brand fonts and tokens (review pixels, not prose). NOT applied to any existing template yet — the cascade is gated on the card pattern being signed off. - section-header.njk: the shared "eyebrow + title + rule + See all →" motif, so every listing/section opens with one rhythm. - content-card.njk: the ONE canonical card, promoted from the (good) Updates card. Fixes the old min-height hack — flex h-full + mt-auto pins meta to the bottom so it aligns across a row at any title length, with no forced empty gaps. Supports an optional description (Projects / Proposals variant). - button.njk: primary (pill + sliding arrow, == existing action-button) and secondary (uppercase text + thick underline). - components.css: motif utilities where the brand YELLOW lives — mark-highlight, underline-yellow, icon-circle, number-circle; outlined motifs auto-flip on .is-on-dark bands. - styleguide/index.njk: live reference page (noindex, excluded from collections, not nav-linked), incl. a black-section "moment" demo showing the white/black/yellow discipline. Builds on the foundations branch (#234). npm run build passes; verified desktop + mobile. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Fold the open card questions into side-by-side renders so they're judged on real fonts/tokens rather than prose: - A/B #1 title weight as full 8-card grids (regular vs bold) — the tiled effect is the decision; bold vibrates at grid scale, regular stays calm. - A/B #2 rule placement (top hairline over tag vs bottom rule under meta) for rollout-consistency. - "Resolved" block records the locked calls: tag/meta opacity 60% (#666 on white = 5.74:1, passes WCAG AA); eyebrow optional (standard- on-every-section would recreate audit finding #2's stacked-label noise). A/B overrides are styleguide-scoped (.ab-bold / .ab-bottom-rule) so the canonical content-card macro stays the single source of truth. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
PR #3 of the refinement sequence — review the pixels, please don't merge into the cascade yet. This is the reusable component set that every downstream PR (#5 homepage, #6 templates) inherits, so per our plan it gets eyes before anything adopts it. If the card/section-header spec is even slightly off, the mistake compounds across the sequence.
Stacked on the foundations branch (#234) — base is set to
design/foundations-tokensso this diff shows only the component files. Nothing here is applied to any existing template.How to review
Build the site and open
/styleguide/(noindex, not nav-linked) — it renders every component on real brand fonts and tokens, including the mixed-length card grid and the black-section moment. (I've shared rendered desktop + mobile screenshots with Jack directly in review.)What's proposed
section-header.njk) — the sharedeyebrow + title + rule + See all →motif. One rhythm for every listing/section.content-card.njk) — promoted from the (good) Updates card. Key fix: the old card forced amin-heighton the title, which left big empty gaps under short titles. New card isflex h-fullwith the meta pinned viamt-auto, so meta bottom-aligns across a row at any title length, no padding hacks. Optionaldescriptionfor the Projects/Proposals variant.button.njk) —primary(pill + sliding arrow, identical to the existingaction-button, so adoption is a rename) andsecondary(uppercase text + thick underline).components.css) — where the brand yellow lives:mark-highlight,underline-yellow,icon-circle,number-circle. Outlined motifs auto-flip to white inside.is-on-darkbands.Specific things I'd value a call on (pixels)
size-2(editorial/AI-Now restraint, matches today's Updates). Bolder (Suisse Bold) reads more "confident" but heavier across a 4-up grid. Which do you want as canonical?Once the card is signed off, the rest of the sequence (chrome → repaint → homepage → templates) adopts it and moves faster.
Constraints
11ty + Nunjucks + Tailwind only. No content/routes/redirects/i18n/Fathom/newsletter changes.
npm run buildpasses. Verified desktop + mobile.🤖 Generated with Claude Code