improvement(settings): align design-system text-scale tokens across settings pages

[waleedlatif1]

Summary

• Replace literal pixel text-size classes (text-[11px]–text-[18px]) with the named Tailwind scale tokens (text-caption, text-small, text-sm, text-base, text-md, text-lg) — verified pixel-identical against tailwind.config.ts's font-size scale, so nothing visually changes
• Started with the Inbox (Sim Mailer) settings page, then swept every other settings page and shared component with the same violation: member-list, api-keys, mcp, billing (+ credit-usage-section, credit-usage-view), credential-sets, workflow-mcp-servers, mothership, admin, byok (key manager + provider-keys modal), copilot, custom-tools, settings-resource-row, and the ee/ access-control (+ group-detail), data-retention, whitelabeling, and shared setting-row components
• Swapped hand-rolled toggle-row <span> pairs for the emcn Label component (matches the toggle-row convention in admin.tsx/general.tsx), wired with proper htmlFor/id pairing
• Standardized on text-sm + --text-body for row title/value text and text-caption + --text-muted for row subtitle/description text — the tokenized equivalent of the dominant pre-existing literal-pixel pairing used for this exact row shape (member-list.tsx's ROW_EMAIL_CLASSES/ROW_STATUS_CLASSES being the clearest precedent)
• Documented the convention in .claude/rules/sim-settings-pages.md (new "Text-scale tokens" section + audit checklist item) and the add-settings-page skill's Mode B audit steps, so new settings pages default to it
• No structural, handler, or behavior changes anywhere — entitlement gates keep their own chrome per existing convention

Type of Change

• Improvement (styling/design-system alignment, no behavior change)

Testing

• tsc --noEmit and biome check clean on every touched file
• Full repo-wide grep (text-\[1[0-8]px\] under settings/ and ee/) confirms zero literal pixel text sizes remain
• Diffed every change against the original — confirmed each swap is pixel-identical (verified sizes against tailwind.config.ts) or a direct component substitution with matching default styles

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Jul 6, 2026 7:58pm

[cursor]

PR Summary

Low Risk
Class-name and markup-only styling alignment across settings UI; no handlers, data flow, or business logic changes.

Overview
Replaces literal text-[Npx] classes across workspace settings and related ee/ UI with named Tailwind font-size tokens (text-caption, text-small, text-sm, text-xs, text-md, text-lg) so typography matches tailwind.config.ts without intended visual change.

Two-line list rows now consistently use text-sm + --text-body for the primary line and text-caption + --text-muted for subtitles (API keys, billing, MCP, inbox tasks, access control, data retention, shared settings-resource-row, etc.). Inbox enable swaps hand-rolled toggle labels for emcn Label with htmlFor/id on the Switch.

Docs and audit: .claude/rules/sim-settings-pages.md adds a "Text-scale tokens" section and a checklist item; add-settings-page skill adds a grep step and rules for pixel-only migrations.

^{Reviewed by Cursor Bugbot for commit 0d398e1. Configure here.}

[greptile-apps]

Greptile Summary

This PR aligns settings-page typography with named design-system text tokens. The main changes are:

• Literal pixel text-size classes replaced across settings and enterprise settings UI.
• Toggle-row copy moved toward the shared Label and Switch pattern.
• Settings-page guidance updated with the text-token convention and audit steps.

Confidence Score: 5/5

This looks safe to merge.

• No blocking issues found in the changed code.

Important Files Changed

Filename	Overview
.claude/rules/sim-settings-pages.md	Adds settings-page guidance for named text-scale tokens and toggle-row label usage.
.claude/skills/add-settings-page/SKILL.md	Adds audit steps for literal text-size cleanup and exact token replacements.
apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx	Replaces inbox settings row text-size literals with named text tokens.
apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx	Updates shared settings resource row typography to named text tokens.
apps/sim/ee/components/setting-row.tsx	Updates enterprise setting row label and description typography to named text tokens.

_{Reviews (2): Last reviewed commit: "improvement(settings): extend design-sys..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 0d398e1. Configure here.}