Add a real spacing scale: internal <= external, not habit - #30
Merged
Conversation
Replaces the thin "8px base grid" note with a proper spacing system,
grounded in real research rather than invented numbers: Tailwind's
default 4px base unit, the Material/Apple 8pt grid convention, and
the "internal padding <= external gap" Gestalt proximity rule (the
actual mechanism behind cramped-feeling cards and imbalanced sections
in the Flexion screenshots that prompted this).
- references/style-tokens.md: new Spacing scale section — a
space-1..space-24 token table, the internal<=external rule with a
worked pricing-card example, card-padding minimums by type
(compact/content/showcase), section-level padding guidance, and the
existing radius scale kept in place.
- references/style-lock-format.md: Density & spacing section expanded
to record the actual tokens chosen per role, not just a base unit.
- SKILL.md: sixth non-negotiable added to Step 4 ("Spacing follows
the scale, not habit"), citing the internal<=external rule and the
space-6/24px content-card floor.
- references/anti-slop-checklist.md: new checklist item enforcing the
rule as a specific, checkable failure rather than a vague "needs
more space" feeling.
Built on top of #25 (App shell section) since the new spacing content
cross-references it — merged that first and rebased this branch on
top so the references resolve to real content instead of a section
that didn't exist yet.
Also swept the remaining stray "preset" mentions found in
style-tokens.md, style-lock-format.md, anti-slop-checklist.md,
SKILL.md, the PR template, and site/README.md — leftover from
earlier cleanup passes that only touched README/CONTRIBUTING/site
HTML and missed these.
Closes #26
Co-Authored-By: Claude Sonnet 5 <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
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.
What this changes
Replaces the thin "8px base grid" note with a proper spacing system, grounded in real research: Tailwind's default 4px base unit, the Material/Apple 8pt grid convention, and the internal padding <= external gap Gestalt proximity rule — the actual mechanism behind the cramped pricing cards and imbalanced sections in the real screenshots that prompted #26.
references/style-tokens.md— new## Spacing scalesection: aspace-1..space-24token table, the internal<=external rule with a worked pricing-card example, card-padding minimums by type (compact/content/showcase), section-level padding guidance, and the existing radius scale kept in place.references/style-lock-format.md—## Density & spacingexpanded to record the actual chosen tokens per role, not just a base unit.SKILL.md— sixth non-negotiable added to Step 4: "Spacing follows the scale, not habit," citing the rule and thespace-6/24px content-card floor.references/anti-slop-checklist.md— new checklist item making the rule a specific, checkable failure ("card padding larger than the gap around it") instead of a vague "needs more space" feeling.Built on top of #25 (App shell section) since this content cross-references it — merged that first and rebased this branch so the references resolve to real content, not a section that didn't exist yet.
Also swept 7 stray "preset" mentions found while re-reading these files — leftovers from earlier cleanup passes that only touched README/CONTRIBUTING/site HTML and missed
style-tokens.md,style-lock-format.md,anti-slop-checklist.md,SKILL.md, the PR template, andsite/README.md.Closes #26
Test plan
grep -rn "preset"across*.md/*.htmlreturns nothing🤖 Generated with Claude Code