[LukasWallrich]

What changes for visitors

Panels, cards and disclosures that sat too close to their own text or to the box next to them now have at least 16 px of room. Visitors will notice this on:

• the "Expand to learn more" disclosures on /about/, /neurodiversity/ and other section pages;
• the phone "On this page" box;
• the citation boxes on /publications/;
• the steering committee page on phones, where the cards and team names were 10 px apart and each team's name sat as close to the team above as to its own people;
• the AI metascience programme sessions and the "Watch the recordings" links.

The differences are a few pixels per box. The cause was that each component set its own padding and gap (8, 10 or 12 px), with no shared minimum.

The shared default

tokens.css gets three spacing tokens for framed boxes (anything with its own fill or border):

--box-pad:16px;    /* least space between a box's edge and its text */
--box-pad-y:14px;  /* top and bottom of a one-line bar, such as a disclosure's summary */
--box-gap:16px;    /* least space between two boxes */

The components the audit flagged now use them. The comment in tokens.css says a component may use more space but never less, and that small controls, chips and joined groups (tabs, segmented controls) are exempt.

Before and after

Disclosures (/about/us/), 390 and 1440 px

Phone "On this page" box (/about/us/), 390 px. It shows only on phones.

Citation box (/publications/, "Cite this" open), 390 and 1440 px

Steering committee (/about/steering-committee/): the grid at 390 px, and the team name band at 1440 px, where only its padding changes

AI metascience programme session (/ai-metascience/), 390 and 1440 px

AI metascience recording links, 390 and 1440 px

How the problems were found

A scratch Playwright audit (not committed) checked about 100 pages: one of each template family plus every section page. It ran at 390 and 1440 px, and the main 24 pages also at 1024 px. A second pass opened the phone menu, the mega menu, search, the resources filter drawer and a glossary popover. The audit treats a box as framed if it has its own fill, a border on at least three sides, or a shadow. It reported:

• pairs of framed boxes less than 12 px apart, side by side or one above the other;
• framed boxes with text less than 12 px from their edge.

Every hit was checked against a screenshot.

Left alone, as deliberate or not a defect:

• Inline pills and chips inside running text.
• Rows and grids of small controls or chips (under 48 px tall) with gaps of 6 px or more, such as resource filter chips, publication pills, tag clouds, home topics and Replication Hub stage links. Their inner padding was judged against 4 px top and bottom and 8 px at the sides, not 12.
• Touching siblings of the same kind (joined groups), and the AI metascience day tabs.
• The action-card "bricks" on /submit/, /about/get-involved/ and the Replication Hub, which are 5 px apart. article.css says they are "laid edge to edge like a short wall".
• Steering committee photo cards, whose photo fills the card to its edge.
• The line-clamped glossary hub cards, the scrolling term-finder list, the contributor network's panel and canvas, fieldset legends, Leaflet map controls, the booklet viewer and the chatbot. The audit counted text cut off or scrolling inside these as being "past the edge"; none is visible in the screenshots.
• The resources search box and its two selects, 8 to 10 px apart, which read as one control group.

Not changed here, because #1137 owns the files (clusters.css, lists.css, layouts/partials/clusters/):

• On /clusters/, /clusters/cluster-1/ and /disciplines/ at 390 px, the "Navigate clusters and sub-clusters" button touches the first cluster card (0 px), and the cluster card's text sits about 11 px from its left edge.
• The /clusters/ topic tiles at 390 px are 6 to 10 px apart.
• The /newsletters/ archive cards (.nla-grid, lists.css) are 10 px apart.

/clusters/cluster-1/ and /disciplines/ were not touched: none of the changed selectors matches them.

Decisions to review

• 16 px as the minimum for both inner padding and the gap between boxes, with 14 px top and bottom for one-line bars. Most Doors cards already use 16 to 24 px, so this raises only the outliers. A value of 12 px would have met the audit's threshold but still looked tight next to the larger cards.
• Small controls are exempt. Buttons, chips and pills keep their own compact padding and gaps (6 to 8 px); the tokens are for blocks.
• Steering committee on phones: each team's name band now has an extra 16 px above it (32 px from the team before), so it groups with its own people. Desktop is unchanged apart from the band's padding.
• The AI metascience page's CSS is in its Markdown (content/ai-metascience/index.md). It is hand-written, not generated, so it was edited there to use the tokens.
• No new automated check, as agreed for this phase.

Checks

• python3 scripts/check_seo_html.py: passed
• python3 -m unittest discover -s scripts/tests: 145 tests, OK
• python3 scripts/rebrand/check_design.py: fails with the same 4 failures as rebrand-doors before this change: lines of 80 characters or more on two Arabic glossary terms (العلم_المفتوح and the digital object identifier term) at 1024 and 1440 px. Nothing new
• The scratch audit after the change: no framed box in the changed components is under 12 px, by either measure.

🤖 Generated with Claude Code

---

Summary by cubic

Adds shared spacing tokens so framed boxes—cards, panels, disclosures, and bars with their own fill or border—keep at least 16 px between their edge and text, and at least 16 px between boxes. Panels, citations, disclosures, and the phone contents box that previously used 8–12 px now meet this minimum.

The new --box-pad, --box-pad-y, and --box-gap tokens in tokens.css are the single source for this minimum. Small controls and chips are exempt, as are joined groups like tabs. Applied the tokens to disclosures, the phone contents box, publication citations, steering committee cards (desktop unchanged), and the AI metascience programme sessions and recording links. The steering committee grid on phones now adds an extra 16 px above each team name so it groups with its own people.

Decision points

• 16 px was chosen over 12 px because most Doors cards already use 16–24 px, so 12 px would still look tight next to them.
• The AI metascience page CSS lives in its Markdown content, so it was edited there directly.
• No new automated check was added for this phase.

^{Written for commit e95afb6. Summary will update on new commits.}

[github-actions]

⚠️ Image files/references in png/jpg format detected

Note that we generally rely on webp format for this webpage, so please consider converting these images to WebP format and updating references accordingly.

References to image files:

• content/ai-metascience/index.md: featured.png

[github-actions]

📝 Spell Check Results

Found 8 potential spelling issue(s) when checking 1 changed file(s):

📄 content/ai-metascience/index.md

Line	Issue
614	nIn ==> inn, min, bin, nine
614	nWe ==> new
614	nWe ==> new
614	nIn ==> inn, min, bin, nine
614	nWe ==> new
614	nWe ==> new
614	nWe ==> new
614	nWe ==> new

---

ℹ️ How to address these issues:

1. Fix the typo: If it's a genuine typo, please correct it.
2. Add to whitelist: If it's a valid word (e.g., a name, technical term), add it to .codespell-ignore.txt
3. False positive: If this is a false positive, please report it in the PR comments.

_{🤖 This check was performed by codespell}

[cubic-dev-ai]

5 issues found across 4 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="assets/css/doors/article.css">

<violation number="1" location="assets/css/doors/article.css:126">
P2: This shared body padding also reaches the compact list-item Statistics spoilers, despite their explicit small-toggle styling. Add a compact `li .spoiler-body` override so opening an entry does not gain the framed-box spacing.</violation>

<violation number="2" location="assets/css/doors/article.css:183">
P2: This selector never matches the generated team bands on phones: every title card is the first child of its own `.sc-team`. Select non-first `.sc-team` elements instead, or later team names never receive the intended extra 16px separation.</violation>
</file>

<file name="assets/css/doors/tokens.css">

<violation number="1" location="assets/css/doors/tokens.css:35">
P2: `--box-pad-y` is documented for one-line bars, but the new usages apply it to the multi-line On this page box and citation text. Use `var(--box-pad)` for those boxes so they retain the declared 16px vertical minimum.</violation>
</file>

<file name="content/ai-metascience/index.md">

<violation number="1" location="content/ai-metascience/index.md:21">
P2: The recording cards now use the shared gap but still retain 12px × 14px inner padding, below the 16px minimum for framed boxes. Change `.am-playlist` to `padding: var(--box-pad)`; these two-line cards are not small chip controls.</violation>

<violation number="2" location="content/ai-metascience/index.md:236">
P2: These framed session cards still have only 10px top and 6px bottom padding, while the solo variant has just 6px at the top. Use the shared vertical token for the session padding and its solo override so the new box-spacing contract is actually met.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic</sub>

[cubic-dev-ai]

P2: This shared body padding also reaches the compact list-item Statistics spoilers, despite their explicit small-toggle styling. Add a compact li .spoiler-body override so opening an entry does not gain the framed-box spacing.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/css/doors/article.css, line 126:

<comment>This shared body padding also reaches the compact list-item Statistics spoilers, despite their explicit small-toggle styling. Add a compact `li .spoiler-body` override so opening an entry does not gain the framed-box spacing.</comment>

<file context>
@@ -120,10 +120,10 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
+.article-layout .article-style .spoiler>summary{padding:var(--box-pad-y) var(--box-pad);font-weight:600;font-size:18px;line-height:1.35;color:var(--link);cursor:pointer}
 .article-layout .article-style .spoiler>summary:hover{color:var(--ink)}
-.article-layout .article-style .spoiler-body{padding:2px 14px 12px;font-size:18px;line-height:1.55}
+.article-layout .article-style .spoiler-body{padding:2px var(--box-pad) var(--box-pad);font-size:18px;line-height:1.55}
 .article-layout .article-style .spoiler-body>:last-child{margin-bottom:0}
 /* Disclosures hold prose, so they stay at reading width unless a PDF is open inside one. */
</file context>

[cubic-dev-ai]

P2: This selector never matches the generated team bands on phones: every title card is the first child of its own .sc-team. Select non-first .sc-team elements instead, or later team names never receive the intended extra 16px separation.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/css/doors/article.css, line 183:

<comment>This selector never matches the generated team bands on phones: every title card is the first child of its own `.sc-team`. Select non-first `.sc-team` elements instead, or later team names never receive the intended extra 16px separation.</comment>

<file context>
@@ -172,11 +172,15 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
+/* On a phone the cards and team names share one grid: the box gap between them, and a team's name further
+   from the cards of the team before it than from its own. */
+.sc-page .sc-grid{gap:var(--box-gap)}
+@media(max-width:760px){.sc-page .sc-grid .sc-title-card:not(:first-child){margin-top:var(--box-gap)}}
 @media(min-width:761px){
   .sc-page .sc-grid{gap:28px 40px}
</file context>

Suggested change

	@media(max-width:760px){.sc-page .sc-grid .sc-title-card:not(:first-child){margin-top:var(--box-gap)}}
	@media(max-width:760px){.sc-page .sc-grid .sc-team:not(:first-child)>.sc-title-card{margin-top:var(--box-gap)}}

[cubic-dev-ai]

P2: --box-pad-y is documented for one-line bars, but the new usages apply it to the multi-line On this page box and citation text. Use var(--box-pad) for those boxes so they retain the declared 16px vertical minimum.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/css/doors/tokens.css, line 35:

<comment>`--box-pad-y` is documented for one-line bars, but the new usages apply it to the multi-line On this page box and citation text. Use `var(--box-pad)` for those boxes so they retain the declared 16px vertical minimum.</comment>

<file context>
@@ -28,4 +28,10 @@
+     a box's edge and its text, and between two boxes side by side or one above the other. A component may
+     use more, never less. Small controls and chips (buttons, pills, tags) and joined groups are exempt. */
+  --box-pad:16px;
+  --box-pad-y:14px;  /* top and bottom of a one-line bar, such as a disclosure's summary */
+  --box-gap:16px;
 }
</file context>

[cubic-dev-ai]

P2: The recording cards now use the shared gap but still retain 12px × 14px inner padding, below the 16px minimum for framed boxes. Change .am-playlist to padding: var(--box-pad); these two-line cards are not small chip controls.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At content/ai-metascience/index.md, line 21:

<comment>The recording cards now use the shared gap but still retain 12px × 14px inner padding, below the 16px minimum for framed boxes. Change `.am-playlist` to `padding: var(--box-pad)`; these two-line cards are not small chip controls.</comment>

<file context>
@@ -18,7 +18,7 @@ image:
 
 <style>
-.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 6px; max-width: 620px; }
+.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-gap); margin: 18px 0 6px; max-width: 620px; }
 .article-layout .article-style .am-playlist { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--am-deep) !important; border-radius: 12px; background: var(--am-tint, #eef5f3); color: var(--am-ink); text-decoration: none !important; font-size: 15px; line-height: 1.3; }
 .article-layout .article-style .am-playlist strong { color: var(--am-deep); font-size: 17px; }
</file context>

Suggested change

	.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-gap); margin: 18px 0 6px; max-width: 620px; }
	.article-layout .article-style .am-playlist { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--am-deep) !important; border-radius: 12px; background: var(--am-tint, #eef5f3); color: var(--am-ink); text-decoration: none !important; font-size: 15px; line-height: 1.3; }
	.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-gap); margin: 18px 0 6px; max-width: 620px; }
	.article-layout .article-style .am-playlist { display: flex; flex-direction: column; gap: 2px; padding: var(--box-pad); border: 2px solid var(--am-deep) !important; border-radius: 12px; background: var(--am-tint, #eef5f3); color: var(--am-ink); text-decoration: none !important; font-size: 15px; line-height: 1.3; }

[cubic-dev-ai]

P2: These framed session cards still have only 10px top and 6px bottom padding, while the solo variant has just 6px at the top. Use the shared vertical token for the session padding and its solo override so the new box-spacing contract is actually met.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At content/ai-metascience/index.md, line 236:

<comment>These framed session cards still have only 10px top and 6px bottom padding, while the solo variant has just 6px at the top. Use the shared vertical token for the session padding and its solo override so the new box-spacing contract is actually met.</comment>

<file context>
@@ -232,14 +232,14 @@ image:
-  margin: 0 0 10px;
-  padding: 8px 12px 4px;
+  margin: 0 0 var(--box-gap);
+  padding: 10px var(--box-pad) 6px;
   border: 1px solid var(--am-rule);
   border-left: 4px solid var(--am-accent);
</file context>