Diff Render

At every commit to The Sphinx, Design Guardrails renders the diff and reasons about it against the design system — flagging regressions, clearing intentional redesigns, and allowing platform constraints.

2

Regressions flagged

2

Changes cleared as on-system

4

Commits reviewed

Commit history

2 to review
  1. Design GuardrailsAccidental regression· 97%

    Reviewed this commit against your design system — flagged a regression.

    Two token violations: padding was changed from var(--space-md) var(--space-lg) (12px 16px) to a hardcoded '14px 16px', putting the vertical padding off the spacing scale entirely (no step equals 14px). Background was changed from var(--color-brand) (#4F46E5) to a hardcoded #3B82F6, which is not in the palette at all — it's a generic blue that doesn't match brand or brand-hover. Both changes hardcode values that must come from tokens, breaking themeability and visually shifting the button's identity color.

    Before
    Before — 01-padding-color-regression
    After
    After — 01-padding-color-regression
    What changed in this commit
    diff --git a/sample-app/components.css b/sample-app/components.css
    @@ -6,7 +6,7 @@
    -  padding: var(--space-md) var(--space-lg);
    +  padding: 14px 16px;
    @@ -18,7 +18,7 @@
     .btn--primary {
    -  background: var(--color-brand);
    +  background: #3B82F6;
    Proposed fix — back on tokens
    --- a/sample-app/components.css
    +++ b/sample-app/components.css
    @@ -6,7 +6,7 @@
       font-family: var(--font-family);
       font-size: var(--font-size-md);
       font-weight: var(--font-weight-medium);
    -  padding: 14px 16px;
    +  padding: var(--space-md) var(--space-lg); /* 12px 16px — on the spacing scale */
       border-radius: var(--radius-md);
       border: 1px solid transparent;
       line-height: 1.2;
    @@ -18,7 +18,7 @@
     
     .btn--primary {
    -  background: #3B82F6;
    +  background: var(--color-brand);
       color: var(--color-on-brand);
     }
     .btn--primary:hover {
    Reverts the hardcoded values to design tokens.

    Linked demo

    Diffender — 60-second submission