From 5aa0b4d5d483002d54f7330ce0bbfc0a67e6adba Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Fri, 27 Mar 2026 00:10:23 +0530
Subject: [PATCH] fix: emcn component library design engineering polish (#3672)

* chore: fix conflicts

* chore: fix conflicts

* chore: pause marquee

* chore: fix conflicts

* chore: fix conflicts

* chore: address review comments

* chore: fix conflicts

* chore: other bug fixes

* chore: fix conflicts

* chore: fix radius

* chore: fix review changes

* chore: fix conflicts

* chore: revert other

* chore: fix conflicts

* chore: fix review changes

* chore: fix conflicts

* chore: fix review changes

* chore: fix button state

* chore: fix button state

* chore: fix review changes

* chore: fix lint

* chore: fix conflicts

* chore: add metadata

* chore: fix things

* chore: fix overwritten states

* chore: fix warnings

* chore: fix button state

* chore: fix review changes

* chore: fix review changes

* chore: fix hover state

* chore: fix popover

* chore: fix review changes

* chore: fix review changes
---
 apps/docs/app/layout.tsx                      |   2 -
 apps/sim/app/(auth)/auth-layout-client.tsx    |   4 +-
 .../app/(auth)/components/auth-background.tsx |   2 +-
 .../app/(auth)/components/branded-button.tsx  |   4 +-
 .../(auth)/components/sso-login-button.tsx    |   2 +-
 .../(auth)/components/status-page-layout.tsx  |   8 +-
 .../app/(auth)/components/support-footer.tsx  |   4 +-
 apps/sim/app/(auth)/login/loading.tsx         |  12 +-
 apps/sim/app/(auth)/login/login-form.tsx      |  24 +-
 apps/sim/app/(auth)/oauth/consent/loading.tsx |  12 +-
 apps/sim/app/(auth)/oauth/consent/page.tsx    |  39 ++-
 .../sim/app/(auth)/reset-password/loading.tsx |   8 +-
 .../reset-password/reset-password-content.tsx |   8 +-
 .../reset-password/reset-password-form.tsx    |  13 +-
 apps/sim/app/(auth)/signup/loading.tsx        |  14 +-
 apps/sim/app/(auth)/signup/signup-form.tsx    | 220 +++++++-----
 apps/sim/app/(auth)/sso/loading.tsx           |   8 +-
 apps/sim/app/(auth)/verify/loading.tsx        |   6 +-
 apps/sim/app/(auth)/verify/verify-content.tsx |  21 +-
 .../collaboration/collaboration.tsx           |  32 +-
 .../components/access-control-panel.tsx       |   8 +-
 .../components/audit-log-preview.tsx          |   6 +-
 .../components/enterprise/enterprise.tsx      |  82 +++--
 .../features/components/features-preview.tsx  | 157 ++++-----
 .../(home)/components/features/features.tsx   |  37 +-
 .../(home)/components/footer/footer-cta.tsx   |  16 +-
 .../app/(home)/components/footer/footer.tsx   |  15 +-
 apps/sim/app/(home)/components/hero/hero.tsx  |  20 +-
 .../landing-preview-home.tsx                  |   8 +-
 .../landing-preview-panel.tsx                 |  34 +-
 .../landing-preview-sidebar.tsx               |  28 +-
 .../landing-preview-workflow.tsx              |   2 +-
 .../preview-block-node.tsx                    |  24 +-
 .../landing-preview/landing-preview.tsx       |   6 +-
 .../navbar/components/blog-dropdown.tsx       |  10 +-
 .../navbar/components/docs-dropdown.tsx       |  22 +-
 .../navbar/components/github-stars.tsx        |   2 +-
 .../app/(home)/components/navbar/navbar.tsx   |  55 +--
 .../app/(home)/components/pricing/pricing.tsx |  30 +-
 .../(home)/components/templates/templates.tsx |  46 +--
 apps/sim/app/(home)/landing.tsx               |   4 +-
 .../app/(landing)/blog/[slug]/back-link.tsx   |   2 +-
 .../sim/app/(landing)/blog/[slug]/loading.tsx |  42 +--
 apps/sim/app/(landing)/blog/[slug]/page.tsx   |  22 +-
 .../(landing)/blog/[slug]/share-button.tsx    |   2 +-
 .../(landing)/blog/authors/[id]/loading.tsx   |  12 +-
 .../app/(landing)/blog/authors/[id]/page.tsx  |  14 +-
 apps/sim/app/(landing)/blog/layout.tsx        |   2 +-
 apps/sim/app/(landing)/blog/loading.tsx       |  23 +-
 apps/sim/app/(landing)/blog/page.tsx          |  10 +-
 apps/sim/app/(landing)/blog/post-grid.tsx     |  18 +-
 apps/sim/app/(landing)/blog/tags/loading.tsx  |   4 +-
 apps/sim/app/(landing)/blog/tags/page.tsx     |   8 +-
 .../footer/components/compliance-badges.tsx   |   2 +-
 .../footer/components/social-links.tsx        |  10 +-
 .../footer/components/status-indicator.tsx    |   6 +-
 .../(landing)/components/footer/footer.tsx    |  56 +--
 .../hero/components/icon-button.tsx           |   4 +-
 .../landing-block/landing-block.tsx           |  12 +-
 .../landing-canvas/landing-block/tag.tsx      |   9 +-
 .../landing-canvas/landing-canvas.tsx         |   2 +-
 .../app/(landing)/components/hero/hero.tsx    |  12 +-
 .../components/integrations/integrations.tsx  |  10 +-
 .../components/pricing-card.tsx               |   6 +-
 .../landing-pricing/landing-pricing.tsx       |   2 +-
 .../landing-templates/landing-templates.tsx   |   4 +-
 .../app/(landing)/components/legal-layout.tsx |   8 +-
 apps/sim/app/(landing)/components/nav/nav.tsx |  22 +-
 .../components/testimonials/testimonials.tsx  |   6 +-
 .../[slug]/components/integration-faq.tsx     |  10 +-
 .../components/template-card-button.tsx       |   2 +-
 .../(landing)/integrations/[slug]/page.tsx    | 127 ++++---
 .../components/integration-card.tsx           |  14 +-
 .../components/integration-grid.tsx           |   8 +-
 .../components/request-integration-modal.tsx  |  14 +-
 .../sim/app/(landing)/integrations/layout.tsx |   2 +-
 apps/sim/app/(landing)/integrations/page.tsx  |  13 +-
 apps/sim/app/(landing)/layout.tsx             |   2 +-
 apps/sim/app/(landing)/privacy/loading.tsx    |  80 ++---
 apps/sim/app/(landing)/privacy/page.tsx       |  27 +-
 apps/sim/app/(landing)/terms/loading.tsx      |  70 ++--
 apps/sim/app/(landing)/terms/page.tsx         |  22 +-
 apps/sim/app/_styles/globals.css              | 330 ++++++++++--------
 apps/sim/app/api/chat/route.ts                |   2 +-
 .../components/changelog-content.tsx          |  16 +-
 .../changelog/components/timeline-list.tsx    |  28 +-
 apps/sim/app/changelog/layout.tsx             |   2 +-
 apps/sim/app/changelog/loading.tsx            |  32 +-
 apps/sim/app/chat/[identifier]/chat.tsx       |   2 +-
 .../chat/components/auth/email/email-auth.tsx |  16 +-
 .../auth/password/password-auth.tsx           |  92 ++---
 .../sim/app/chat/components/header/header.tsx |  10 +-
 apps/sim/app/chat/components/input/input.tsx  |   2 +-
 .../message/components/file-download.tsx      |   2 +-
 .../message/components/markdown-renderer.tsx  |   2 +-
 .../app/chat/components/message/message.tsx   |   4 +-
 .../[identifier]/components/form-field.tsx    |  16 +-
 .../[identifier]/components/password-auth.tsx |  12 +-
 .../components/powered-by-sim.tsx             |   2 +-
 .../components/thank-you-screen.tsx           |   4 +-
 apps/sim/app/form/[identifier]/form.tsx       |  16 +-
 apps/sim/app/invite/components/layout.tsx     |   2 +-
 .../sim/app/invite/components/status-card.tsx |  16 +-
 apps/sim/app/not-found.tsx                    |  24 +-
 apps/sim/app/templates/[id]/template.tsx      |  98 +++---
 .../templates/components/template-card.tsx    |  42 +--
 apps/sim/app/templates/templates.tsx          |  22 +-
 apps/sim/app/unsubscribe/unsubscribe.tsx      |  40 ++-
 .../components/conversation-list-item.tsx     |   4 +-
 .../[workspaceId]/components/error/error.tsx  |  12 +-
 .../components/inline-rename-input.tsx        |   2 +-
 .../message-actions/message-actions.tsx       |   2 +-
 .../resource-header/resource-header.tsx       |  40 +--
 .../resource-options-bar.tsx                  |  37 +-
 .../components/resource/resource.tsx          |  58 +--
 .../components/file-viewer/preview-panel.tsx  |   8 +-
 .../workspace/[workspaceId]/files/files.tsx   |   2 +-
 .../components/agent-group/agent-group.tsx    |  14 +-
 .../components/chat-content/chat-content.tsx  |  22 +-
 .../components/options/options.tsx            |   2 +-
 .../components/special-tags/special-tags.tsx  |  26 +-
 .../message-content/message-content.tsx       |  10 +-
 .../add-resource-dropdown.tsx                 |   4 +-
 .../resource-content/resource-content.tsx     |  14 +-
 .../resource-registry/resource-registry.tsx   |   2 +-
 .../resource-tabs/resource-tab-controls.ts    |   5 +-
 .../resource-tabs/resource-tabs.tsx           |   8 +-
 .../mothership-view/mothership-view.tsx       |   2 +-
 .../queued-messages/queued-messages.tsx       |  20 +-
 .../template-prompts/template-prompts.tsx     |  50 ++-
 .../_components/attached-files-list.tsx       |   4 +-
 .../user-input/_components/constants.ts       |   8 +-
 .../user-input/_components/drop-overlay.tsx   |   4 +-
 .../_components/plus-menu-dropdown.tsx        |   4 +-
 .../home/components/user-input/user-input.tsx |   8 +-
 .../user-message-content.tsx                  |   6 +-
 .../app/workspace/[workspaceId]/home/home.tsx |   8 +-
 .../components/chunk-editor/chunk-editor.tsx  |  14 +-
 .../document-tags-modal.tsx                   |  36 +-
 .../knowledge/[id]/[documentId]/document.tsx  |  20 +-
 .../[workspaceId]/knowledge/[id]/base.tsx     |  64 ++--
 .../[id]/components/action-bar/action-bar.tsx |  14 +-
 .../add-connector-modal.tsx                   |  40 +--
 .../components/connector-selector-field.tsx   |   2 +-
 .../add-documents-modal.tsx                   |  24 +-
 .../base-tags-modal/base-tags-modal.tsx       |  55 ++-
 .../connectors-section/connectors-section.tsx |  67 ++--
 .../edit-connector-modal.tsx                  |  26 +-
 .../rename-document-modal.tsx                 |  12 +-
 .../components/base-card/base-card.tsx        |  46 ++-
 .../knowledge/components/constants.ts         |   4 +-
 .../create-base-modal/create-base-modal.tsx   |  38 +-
 .../edit-knowledge-base-modal.tsx             |  16 +-
 .../knowledge-header/knowledge-header.tsx     |   4 +-
 .../components/line-chart/line-chart.tsx      |  12 +-
 .../components/status-bar/status-bar.tsx      |  12 +-
 .../workflows-list/workflows-list.tsx         |  24 +-
 .../logs/components/dashboard/dashboard.tsx   |  78 ++---
 .../execution-snapshot/execution-snapshot.tsx |  24 +-
 .../file-download/file-download.tsx           |  20 +-
 .../components/trace-spans/trace-spans.tsx    |  38 +-
 .../components/log-details/log-details.tsx    | 128 +++----
 .../logs/components/logs-list/logs-list.tsx   |  22 +-
 .../slack-channel-selector.tsx                |   6 +-
 .../workflow-selector/workflow-selector.tsx   |  12 +-
 .../notifications/notifications.tsx           | 148 ++++----
 .../logs-toolbar/components/search/search.tsx |  40 +--
 .../components/logs-toolbar/logs-toolbar.tsx  |  91 +++--
 .../app/workspace/[workspaceId]/logs/logs.tsx |  54 +--
 .../create-schedule-modal/schedule-modal.tsx  |  90 +++--
 .../scheduled-tasks/scheduled-tasks.tsx       |   2 +-
 .../settings/[section]/settings.tsx           |  12 +-
 .../components/admin/admin-skeleton.tsx       |  14 +-
 .../settings/components/admin/admin.tsx       |  58 +--
 .../components/api-keys/api-key-skeleton.tsx  |  16 +-
 .../settings/components/api-keys/api-keys.tsx |  86 +++--
 .../create-api-key-modal.tsx                  |  24 +-
 .../components/byok/byok-skeleton.tsx         |  16 +-
 .../settings/components/byok/byok.tsx         |  36 +-
 .../settings/components/copilot/copilot.tsx   |  60 ++--
 .../credential-sets-skeleton.tsx              |  24 +-
 .../credential-sets/credential-sets.tsx       | 150 ++++----
 .../credentials/credential-skeleton.tsx       |  26 +-
 .../credentials/credentials-manager.tsx       |  88 ++---
 .../custom-tools/custom-tool-skeleton.tsx     |  18 +-
 .../components/custom-tools/custom-tools.tsx  |  28 +-
 .../components/general/general-skeleton.tsx   |  24 +-
 .../settings/components/general/general.tsx   |  34 +-
 .../components/inbox/inbox-enable-toggle.tsx  |  16 +-
 .../components/inbox/inbox-settings-tab.tsx   |  76 ++--
 .../components/inbox/inbox-skeleton.tsx       |  30 +-
 .../components/inbox/inbox-task-list.tsx      |  38 +-
 .../settings/components/inbox/inbox.tsx       |  14 +-
 .../integrations/integrations-manager.tsx     | 120 +++----
 .../mcp/components/form-field/form-field.tsx  |   6 +-
 .../mcp-server-form-modal.tsx                 |  28 +-
 .../mcp-server-skeleton.tsx                   |  10 +-
 .../settings/components/mcp/mcp-skeleton.tsx  |  10 +-
 .../settings/components/mcp/mcp.tsx           | 102 +++---
 .../deleted-item-skeleton.tsx                 |   6 +-
 .../recently-deleted/recently-deleted.tsx     |  24 +-
 .../skills/components/skill-import.tsx        |  14 +-
 .../skills/components/skill-modal.tsx         |   6 +-
 .../settings/components/skills/skills.tsx     |  28 +-
 .../credit-balance/credit-balance.tsx         |  20 +-
 .../components/plan-card/plan-card.tsx        |  42 +--
 .../components/subscription/subscription.tsx  | 170 +++++----
 .../member-invitation-card.tsx                |  38 +-
 .../no-organization-view.tsx                  |  42 +--
 .../remove-member-dialog.tsx                  |  12 +-
 .../components/team-members/team-members.tsx  |  26 +-
 .../team-seats-overview.tsx                   |  44 +--
 .../components/team-seats/team-seats.tsx      |  16 +-
 .../team-management/team-management.tsx       |  60 ++--
 .../template-profile/template-profile.tsx     |  66 ++--
 .../components/usage-header/usage-header.tsx  |  31 +-
 .../components/usage-limit/usage-limit.tsx    |   8 +-
 .../workflow-mcp-servers.tsx                  | 172 +++++----
 .../[workspaceId]/settings/layout.tsx         |   2 +-
 .../components/row-modal/row-modal.tsx        |  30 +-
 .../components/table-filter/table-filter.tsx  |  24 +-
 .../[tableId]/components/table/table.tsx      |  62 ++--
 .../[workspaceId]/tables/[tableId]/error.tsx  |   2 +-
 .../templates/components/template-card.tsx    |  42 +--
 .../[workspaceId]/templates/templates.tsx     |  24 +-
 .../components/action-bar/action-bar.tsx      |   6 +-
 .../w/[workflowId]/components/chat/chat.tsx   |  53 +--
 .../output-select/output-select.tsx           |   8 +-
 .../components/command-list/command-list.tsx  |  14 +-
 .../components/cursors/cursors.tsx            |   4 +-
 .../diff-controls/diff-controls.tsx           |  10 +-
 .../w/[workflowId]/components/error/index.tsx |  16 +-
 .../components/note-block/note-block.tsx      |  20 +-
 .../notifications/notifications.tsx           |  20 +-
 .../chat-history-skeleton.tsx                 |   2 +-
 .../components/user-input/constants.ts        |   2 +-
 .../deploy-modal/components/a2a/a2a.tsx       |  62 ++--
 .../deploy-modal/components/api/api.tsx       |  30 +-
 .../deploy-modal/components/chat/chat.tsx     |  56 +--
 .../form/components/embed-code-generator.tsx  |   6 +-
 .../form/components/form-builder.tsx          |  52 ++-
 .../deploy-modal/components/form/form.tsx     |  51 ++-
 .../general/components/api-info-modal.tsx     |  30 +-
 .../components/version-description-modal.tsx  |  10 +-
 .../general/components/versions.tsx           |  54 +--
 .../components/general/general.tsx            |  18 +-
 .../deploy-modal/components/mcp/mcp.tsx       |  44 +--
 .../components/template/template.tsx          |  34 +-
 .../panel/components/deploy/deploy.tsx        |   2 +-
 .../components/field-item/field-item.tsx      |   4 +-
 .../connection-blocks/connection-blocks.tsx   |  16 +-
 .../sub-block/components/code/code.tsx        |  10 +-
 .../components/combobox/combobox.tsx          |   4 +-
 .../condition-input/condition-input.tsx       |  16 +-
 .../components/connect-credential-modal.tsx   |  16 +-
 .../components/oauth-required-modal.tsx       |  26 +-
 .../credential-selector.tsx                   |  10 +-
 .../document-tag-entry/document-tag-entry.tsx |  28 +-
 .../components/dropdown/dropdown.tsx          |   5 +-
 .../components/eval-input/eval-input.tsx      |  36 +-
 .../components/file-upload/file-upload.tsx    |   8 +-
 .../components/filter-rule-row.tsx            |  32 +-
 .../filter-builder/filter-builder.tsx         |   2 +-
 .../grouped-checkbox-list.tsx                 |   4 +-
 .../input-mapping/input-mapping.tsx           |  22 +-
 .../knowledge-base-selector.tsx               |   8 +-
 .../knowledge-tag-filters.tsx                 |  30 +-
 .../components/long-input/long-input.tsx      |   6 +-
 .../mcp-dynamic-args/mcp-dynamic-args.tsx     |   8 +-
 .../messages-input/messages-input.tsx         |  18 +-
 .../schedule-info/schedule-info.tsx           |   6 +-
 .../selector-combobox/selector-combobox.tsx   |   2 +-
 .../components/short-input/short-input.tsx    |   4 +-
 .../components/skill-input/skill-input.tsx    |  18 +-
 .../sort-builder/components/sort-rule-row.tsx |  22 +-
 .../components/sort-builder/sort-builder.tsx  |   2 +-
 .../components/starter/input-format.tsx       | 101 +++---
 .../sub-block/components/table/table.tsx      |   8 +-
 .../components/tag-dropdown/tag-dropdown.tsx  |  14 +-
 .../sub-block/components/text/text.tsx        |   2 +-
 .../components/code-editor/code-editor.tsx    |   4 +-
 .../custom-tool-modal/custom-tool-modal.tsx   |  28 +-
 .../components/tools/credential-selector.tsx  |  10 +-
 .../tool-input/components/tools/parameter.tsx |  14 +-
 .../components/tool-input/tool-input.tsx      |  36 +-
 .../variables-input/variables-input.tsx       |  28 +-
 .../editor/components/sub-block/sub-block.tsx |  14 +-
 .../subflow-editor/subflow-editor.tsx         |  18 +-
 .../panel/components/editor/editor.tsx        |  48 ++-
 .../panel/components/toolbar/toolbar.tsx      |  26 +-
 .../w/[workflowId]/components/panel/panel.tsx |  36 +-
 .../components/subflows/subflow-node.tsx      |  26 +-
 .../filter-popover/filter-popover.tsx         |   6 +-
 .../components/structured-output.tsx          |  17 +-
 .../components/output-panel/output-panel.tsx  |  18 +-
 .../components/terminal/terminal.tsx          |  44 +--
 .../[workflowId]/components/terminal/types.ts |   7 +-
 .../components/variables/variables.tsx        |  36 +-
 .../wand-prompt-bar/wand-prompt-bar.tsx       |   4 +-
 .../workflow-block/workflow-block.tsx         |  32 +-
 .../workflow-controls/workflow-controls.tsx   |  18 +-
 .../workflow-edge/workflow-edge.tsx           |   6 +-
 .../w/[workflowId]/utils/block-ring-utils.ts  |   2 +-
 .../preview-editor/preview-editor.tsx         | 140 ++++----
 .../components/block/block.tsx                |  28 +-
 .../components/subflow/subflow.tsx            |  25 +-
 .../w/components/preview/preview.tsx          |  12 +-
 .../collapsed-sidebar-menu.tsx                |  16 +-
 .../components/help-modal/help-modal.tsx      |  24 +-
 .../components/search-modal/search-modal.tsx  |  26 +-
 .../settings-sidebar/settings-sidebar.tsx     |  30 +-
 .../usage-indicator/usage-indicator.tsx       |  38 +-
 .../components/context-menu/context-menu.tsx  |  26 +-
 .../components/folder-item/folder-item.tsx    |  10 +-
 .../workflow-item/workflow-item.tsx           |  12 +-
 .../workflow-list/workflow-list.tsx           |  14 +-
 .../components/permissions-table.tsx          |  32 +-
 .../components/invite-modal/invite-modal.tsx  |  10 +-
 .../workspace-header/workspace-header.tsx     |  52 ++-
 .../w/components/sidebar/sidebar.tsx          |  64 ++--
 apps/sim/blocks/blocks/agent.ts               |   2 +-
 .../emcn/components/avatar/avatar.tsx         |  11 +-
 .../emcn/components/badge/badge.tsx           |  50 +--
 .../emcn/components/banner/banner.tsx         |   6 +-
 .../emcn/components/breadcrumb/breadcrumb.tsx |  12 +-
 .../components/button-group/button-group.tsx  |   8 +-
 .../emcn/components/button/button.tsx         |  32 +-
 .../emcn/components/checkbox/checkbox.tsx     |   3 +-
 .../components/emcn/components/code/code.css  | 175 +++++-----
 .../components/emcn/components/code/code.tsx  |  36 +-
 .../emcn/components/combobox/combobox.tsx     |  75 ++--
 .../components/date-picker/date-picker.tsx    |  44 +--
 .../dropdown-menu/dropdown-menu.tsx           |  36 +-
 .../emcn/components/expandable/expandable.tsx |  63 ++++
 apps/sim/components/emcn/components/index.ts  |   1 +
 .../emcn/components/input-otp/input-otp.tsx   |   4 +-
 .../emcn/components/input/input.tsx           |   2 +-
 .../emcn/components/label/label.tsx           |   2 +-
 .../emcn/components/modal/modal.tsx           |  27 +-
 .../emcn/components/popover/popover.tsx       |  53 +--
 .../emcn/components/s-modal/s-modal.tsx       |  48 ++-
 .../emcn/components/skeleton/skeleton.tsx     |   5 +-
 .../emcn/components/slider/slider.tsx         |   2 +-
 .../emcn/components/switch/switch.tsx         |   2 +-
 .../emcn/components/table/table.tsx           |   8 +-
 .../emcn/components/tag-input/tag-input.tsx   |  37 +-
 .../emcn/components/textarea/textarea.tsx     |   2 +-
 .../components/time-picker/time-picker.tsx    |  24 +-
 .../emcn/components/toast/toast.tsx           |  71 ++--
 .../emcn/components/tooltip/tooltip.tsx       |  10 +-
 .../components/tour-tooltip/tour-tooltip.tsx  |   2 +-
 .../emcn/icons/animate/copy.module.css        |   7 +
 .../emcn/icons/animate/download.module.css    |   6 +
 .../emcn/icons/animate/layout.module.css      |   9 +
 .../emcn/icons/animate/loader.module.css      |   6 +
 .../emcn/icons/animate/pills-ring.module.css  |   6 +
 apps/sim/components/emcn/icons/arrow-down.tsx |   1 +
 apps/sim/components/emcn/icons/arrow-left.tsx |   1 +
 .../sim/components/emcn/icons/arrow-right.tsx |   1 +
 .../components/emcn/icons/arrow-up-down.tsx   |   1 +
 apps/sim/components/emcn/icons/arrow-up.tsx   |   1 +
 apps/sim/components/emcn/icons/asterisk.tsx   |   1 +
 apps/sim/components/emcn/icons/bell.tsx       |   1 +
 apps/sim/components/emcn/icons/blimp.tsx      |   1 +
 apps/sim/components/emcn/icons/book-open.tsx  |   1 +
 .../emcn/icons/bubble-chat-close.tsx          |   1 +
 .../emcn/icons/bubble-chat-preview.tsx        |   1 +
 apps/sim/components/emcn/icons/bug.tsx        |   1 +
 apps/sim/components/emcn/icons/calendar.tsx   |   1 +
 apps/sim/components/emcn/icons/card.tsx       |   1 +
 apps/sim/components/emcn/icons/check.tsx      |   1 +
 .../components/emcn/icons/chevron-down.tsx    |   1 +
 .../components/emcn/icons/clipboard-list.tsx  |   1 +
 apps/sim/components/emcn/icons/columns2.tsx   |   1 +
 apps/sim/components/emcn/icons/columns3.tsx   |   1 +
 .../sim/components/emcn/icons/connections.tsx |   1 +
 apps/sim/components/emcn/icons/copy.tsx       |   6 +-
 apps/sim/components/emcn/icons/cursor.tsx     |   1 +
 apps/sim/components/emcn/icons/database-x.tsx |   1 +
 apps/sim/components/emcn/icons/database.tsx   |   1 +
 .../emcn/icons/document-attachment.tsx        |   1 +
 apps/sim/components/emcn/icons/download.tsx   |   6 +-
 apps/sim/components/emcn/icons/duplicate.tsx  |   1 +
 apps/sim/components/emcn/icons/expand.tsx     |   1 +
 apps/sim/components/emcn/icons/eye.tsx        |   1 +
 apps/sim/components/emcn/icons/file-x.tsx     |   1 +
 apps/sim/components/emcn/icons/file.tsx       |   1 +
 .../sim/components/emcn/icons/fingerprint.tsx |   1 +
 .../sim/components/emcn/icons/folder-code.tsx |   1 +
 .../sim/components/emcn/icons/folder-plus.tsx |   1 +
 apps/sim/components/emcn/icons/hammer.tsx     |   1 +
 apps/sim/components/emcn/icons/hand.tsx       |   1 +
 .../sim/components/emcn/icons/help-circle.tsx |   1 +
 apps/sim/components/emcn/icons/hex-simple.tsx |   1 +
 apps/sim/components/emcn/icons/home.tsx       |   1 +
 .../sim/components/emcn/icons/integration.tsx |   1 +
 apps/sim/components/emcn/icons/key-square.tsx |   1 +
 apps/sim/components/emcn/icons/key.tsx        |   1 +
 apps/sim/components/emcn/icons/layout.tsx     |  10 +-
 apps/sim/components/emcn/icons/library.tsx    |   1 +
 .../sim/components/emcn/icons/list-filter.tsx |   1 +
 apps/sim/components/emcn/icons/loader.tsx     |   6 +-
 apps/sim/components/emcn/icons/lock.tsx       |   1 +
 apps/sim/components/emcn/icons/log-in.tsx     |   1 +
 apps/sim/components/emcn/icons/log-out.tsx    |   1 +
 apps/sim/components/emcn/icons/mail.tsx       |   1 +
 .../components/emcn/icons/more-horizontal.tsx |   1 +
 apps/sim/components/emcn/icons/no-wrap.tsx    |   1 +
 apps/sim/components/emcn/icons/palette.tsx    |   1 +
 apps/sim/components/emcn/icons/panel-left.tsx |   1 +
 apps/sim/components/emcn/icons/pause.tsx      |   1 +
 apps/sim/components/emcn/icons/pencil.tsx     |   1 +
 apps/sim/components/emcn/icons/pills-ring.tsx |   6 +-
 apps/sim/components/emcn/icons/play.tsx       |   2 +
 apps/sim/components/emcn/icons/plus.tsx       |   1 +
 apps/sim/components/emcn/icons/redo.tsx       |   1 +
 apps/sim/components/emcn/icons/rocket.tsx     |   1 +
 apps/sim/components/emcn/icons/rows3.tsx      |   1 +
 apps/sim/components/emcn/icons/search.tsx     |   1 +
 apps/sim/components/emcn/icons/send.tsx       |   1 +
 apps/sim/components/emcn/icons/server.tsx     |   1 +
 apps/sim/components/emcn/icons/settings.tsx   |   1 +
 .../components/emcn/icons/shield-check.tsx    |   1 +
 apps/sim/components/emcn/icons/sim.tsx        |   1 +
 .../emcn/icons/square-arrow-up-right.tsx      |   1 +
 apps/sim/components/emcn/icons/table-x.tsx    |   1 +
 apps/sim/components/emcn/icons/table.tsx      |   1 +
 apps/sim/components/emcn/icons/tag.tsx        |   1 +
 .../components/emcn/icons/terminal-window.tsx |   1 +
 .../components/emcn/icons/trash-outline.tsx   |   1 +
 apps/sim/components/emcn/icons/trash.tsx      |   1 +
 apps/sim/components/emcn/icons/trash2.tsx     |   1 +
 .../components/emcn/icons/type-boolean.tsx    |   1 +
 apps/sim/components/emcn/icons/type-json.tsx  |   1 +
 .../sim/components/emcn/icons/type-number.tsx |   1 +
 apps/sim/components/emcn/icons/type-text.tsx  |   1 +
 apps/sim/components/emcn/icons/undo.tsx       |   1 +
 apps/sim/components/emcn/icons/unlock.tsx     |   1 +
 apps/sim/components/emcn/icons/upload.tsx     |   1 +
 apps/sim/components/emcn/icons/user-plus.tsx  |   1 +
 apps/sim/components/emcn/icons/user.tsx       |   1 +
 apps/sim/components/emcn/icons/users.tsx      |   1 +
 apps/sim/components/emcn/icons/workflow-x.tsx |   1 +
 apps/sim/components/emcn/icons/wrap.tsx       |   1 +
 apps/sim/components/emcn/icons/wrench.tsx     |   1 +
 apps/sim/components/emcn/icons/x.tsx          |   1 +
 apps/sim/components/emcn/icons/zoom-in.tsx    |   1 +
 apps/sim/components/emcn/icons/zoom-out.tsx   |   1 +
 apps/sim/components/ui/button.tsx             |  13 +-
 apps/sim/components/ui/search-highlight.tsx   |   2 +-
 apps/sim/components/ui/select.tsx             |   6 +-
 .../components/access-control.tsx             | 160 +++++----
 apps/sim/ee/sso/components/sso-auth.tsx       |   8 +-
 apps/sim/ee/sso/components/sso-form.tsx       |  24 +-
 apps/sim/ee/sso/components/sso-settings.tsx   | 170 +++++----
 apps/sim/ee/whitelabeling/inject-theme.ts     |  14 +-
 apps/sim/ee/whitelabeling/metadata.ts         |   6 +-
 apps/sim/hooks/queries/chats.ts               |   2 +-
 apps/sim/hooks/use-branded-button-class.ts    |   2 +-
 apps/sim/lib/blog/code.tsx                    |   2 +-
 apps/sim/lib/blog/faq.tsx                     |   6 +-
 apps/sim/lib/blog/mdx.tsx                     |  29 +-
 .../tool-executor/deployment-tools/deploy.ts  |   2 +-
 apps/sim/tailwind.config.ts                   |  44 ++-
 464 files changed, 5213 insertions(+), 4869 deletions(-)
 create mode 100644 apps/sim/components/emcn/components/expandable/expandable.tsx

diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 06e06b83ea..91eeb72f97 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -8,8 +8,6 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
   themeColor: [
     { media: '(prefers-color-scheme: light)', color: '#ffffff' },
     { media: '(prefers-color-scheme: dark)', color: '#0c0c0c' },
diff --git a/apps/sim/app/(auth)/auth-layout-client.tsx b/apps/sim/app/(auth)/auth-layout-client.tsx
index fe4c524eca..3aee420922 100644
--- a/apps/sim/app/(auth)/auth-layout-client.tsx
+++ b/apps/sim/app/(auth)/auth-layout-client.tsx
@@ -14,8 +14,8 @@ export default function AuthLayoutClient({ children }: { children: React.ReactNo
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
diff --git a/apps/sim/app/(auth)/components/auth-background.tsx b/apps/sim/app/(auth)/components/auth-background.tsx
index 1291c151de..dc284dbd66 100644
--- a/apps/sim/app/(auth)/components/auth-background.tsx
+++ b/apps/sim/app/(auth)/components/auth-background.tsx
@@ -9,7 +9,7 @@ type AuthBackgroundProps = {
 export default function AuthBackground({ className, children }: AuthBackgroundProps) {
   return (
     <div className={cn('fixed inset-0 overflow-hidden', className)}>
-      <div className='-z-50 pointer-events-none absolute inset-0 bg-[#1C1C1C]' />
+      <div className='-z-50 pointer-events-none absolute inset-0 bg-[var(--landing-bg)]' />
       <AuthBackgroundSVG />
       <div className='relative z-20 h-full overflow-auto'>{children}</div>
     </div>
diff --git a/apps/sim/app/(auth)/components/branded-button.tsx b/apps/sim/app/(auth)/components/branded-button.tsx
index 245cd7c9c6..dab6a6ce3a 100644
--- a/apps/sim/app/(auth)/components/branded-button.tsx
+++ b/apps/sim/app/(auth)/components/branded-button.tsx
@@ -55,9 +55,9 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         className={cn(
-          'group inline-flex h-[32px] items-center justify-center gap-[8px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          'group inline-flex h-[32px] items-center justify-center gap-2 rounded-[5px] border px-2.5 font-[430] font-season text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
           !hasCustomColor &&
-            'border-[#FFFFFF] bg-[#FFFFFF] text-black hover:border-[#E0E0E0] hover:bg-[#E0E0E0]',
+            'border-[var(--white)] bg-[var(--white)] text-black hover:border-[#E0E0E0] hover:bg-[#E0E0E0]',
           fullWidth && 'w-full',
           className
         )}
diff --git a/apps/sim/app/(auth)/components/sso-login-button.tsx b/apps/sim/app/(auth)/components/sso-login-button.tsx
index c373942bec..e8e25955ef 100644
--- a/apps/sim/app/(auth)/components/sso-login-button.tsx
+++ b/apps/sim/app/(auth)/components/sso-login-button.tsx
@@ -35,7 +35,7 @@ export function SSOLoginButton({
 
   const primaryBtnClasses = cn(
     primaryClassName || 'branded-button-gradient',
-    'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
+    'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-base text-white transition-all duration-200'
   )
 
   const outlineBtnClasses = cn('w-full rounded-[10px]')
diff --git a/apps/sim/app/(auth)/components/status-page-layout.tsx b/apps/sim/app/(auth)/components/status-page-layout.tsx
index 9d62e776e4..417c5a582d 100644
--- a/apps/sim/app/(auth)/components/status-page-layout.tsx
+++ b/apps/sim/app/(auth)/components/status-page-layout.tsx
@@ -18,18 +18,18 @@ export function StatusPageLayout({
 }: StatusPageLayoutProps) {
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+                <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
                   {title}
                 </h1>
-                <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+                <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
                   {description}
                 </p>
               </div>
diff --git a/apps/sim/app/(auth)/components/support-footer.tsx b/apps/sim/app/(auth)/components/support-footer.tsx
index 5b9dc64fba..6dad3bd6ac 100644
--- a/apps/sim/app/(auth)/components/support-footer.tsx
+++ b/apps/sim/app/(auth)/components/support-footer.tsx
@@ -11,12 +11,12 @@ export function SupportFooter({ position = 'fixed' }: SupportFooterProps) {
 
   return (
     <div
-      className={`right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed ${position}`}
+      className={`right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[var(--landing-text-muted)] text-small leading-relaxed ${position}`}
     >
       Need help?{' '}
       <a
         href={`mailto:${brandConfig.supportEmail}`}
-        className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+        className='text-[var(--landing-text-muted)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
       >
         Contact support
       </a>
diff --git a/apps/sim/app/(auth)/login/loading.tsx b/apps/sim/app/(auth)/login/loading.tsx
index e42fb32e2e..c21272e110 100644
--- a/apps/sim/app/(auth)/login/loading.tsx
+++ b/apps/sim/app/(auth)/login/loading.tsx
@@ -4,21 +4,21 @@ export default function LoginLoading() {
   return (
     <div className='flex flex-col items-center'>
       <Skeleton className='h-[38px] w-[80px] rounded-[4px]' />
-      <div className='mt-[32px] w-full space-y-[8px]'>
+      <div className='mt-8 w-full space-y-2'>
         <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
         <Skeleton className='h-[44px] w-full rounded-[10px]' />
       </div>
-      <div className='mt-[16px] w-full space-y-[8px]'>
+      <div className='mt-4 w-full space-y-2'>
         <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
         <Skeleton className='h-[44px] w-full rounded-[10px]' />
       </div>
-      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
-      <Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
-      <div className='mt-[24px] flex w-full gap-[12px]'>
+      <Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-6 h-[1px] w-full rounded-[1px]' />
+      <div className='mt-6 flex w-full gap-3'>
         <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
         <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
       </div>
-      <Skeleton className='mt-[24px] h-[14px] w-[200px] rounded-[4px]' />
+      <Skeleton className='mt-6 h-[14px] w-[200px] rounded-[4px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index 3013a4e284..c922830fd2 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -174,7 +174,7 @@ export default function LoginPage({
           callbackURL: safeCallbackUrl,
         },
         {
-          onError: (ctx) => {
+          onError: (ctx: any) => {
             logger.error('Login error:', ctx.error)
 
             if (ctx.error.code?.includes('EMAIL_NOT_VERIFIED')) {
@@ -342,10 +342,10 @@ export default function LoginPage({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+        <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Sign in
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           Enter your details
         </p>
       </div>
@@ -399,7 +399,7 @@ export default function LoginPage({
                 <button
                   type='button'
                   onClick={() => setForgotPasswordOpen(true)}
-                  className='font-medium text-[#999] text-xs transition hover:text-[#ECECEC]'
+                  className='font-medium text-[var(--landing-text-muted)] text-xs transition hover:text-[var(--landing-text)]'
                 >
                   Forgot password?
                 </button>
@@ -426,7 +426,7 @@ export default function LoginPage({
                 <button
                   type='button'
                   onClick={() => setShowPassword(!showPassword)}
-                  className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
+                  className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--landing-text-muted)] transition hover:text-[var(--landing-text)]'
                   aria-label={showPassword ? 'Hide password' : 'Show password'}
                 >
                   {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -469,10 +469,12 @@ export default function LoginPage({
       {showDivider && (
         <div className='relative my-6 font-light'>
           <div className='absolute inset-0 flex items-center'>
-            <div className='w-full border-[#2A2A2A] border-t' />
+            <div className='w-full border-[var(--landing-bg-elevated)] border-t' />
           </div>
           <div className='relative flex justify-center text-sm'>
-            <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
+            <span className='bg-[var(--landing-bg)] px-4 font-[340] text-[var(--landing-text-muted)]'>
+              Or continue with
+            </span>
           </div>
         </div>
       )}
@@ -502,20 +504,20 @@ export default function LoginPage({
           <span className='font-normal'>Don't have an account? </span>
           <Link
             href={isInviteFlow ? `/signup?invite_flow=true&callbackUrl=${callbackUrl}` : '/signup'}
-            className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+            className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
           >
             Sign up
           </Link>
         </div>
       )}
 
-      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed sm:px-8 md:px-[44px]'>
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[13px] text-[var(--landing-text-muted)] leading-relaxed sm:px-8 md:px-11'>
         By signing in, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--landing-text-muted)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -524,7 +526,7 @@ export default function LoginPage({
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--landing-text-muted)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Privacy Policy
         </Link>
diff --git a/apps/sim/app/(auth)/oauth/consent/loading.tsx b/apps/sim/app/(auth)/oauth/consent/loading.tsx
index b6c3e192ce..40e029b4d2 100644
--- a/apps/sim/app/(auth)/oauth/consent/loading.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/loading.tsx
@@ -3,16 +3,16 @@ import { Skeleton } from '@/components/emcn'
 export default function OAuthConsentLoading() {
   return (
     <div className='flex flex-col items-center'>
-      <div className='flex items-center gap-[16px]'>
+      <div className='flex items-center gap-4'>
         <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
         <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
         <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
       </div>
-      <Skeleton className='mt-[24px] h-[38px] w-[220px] rounded-[4px]' />
-      <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-[4px]' />
-      <Skeleton className='mt-[24px] h-[56px] w-full rounded-[8px]' />
-      <Skeleton className='mt-[16px] h-[120px] w-full rounded-[8px]' />
-      <div className='mt-[24px] flex w-full max-w-[410px] gap-[12px]'>
+      <Skeleton className='mt-6 h-[38px] w-[220px] rounded-[4px]' />
+      <Skeleton className='mt-2 h-[14px] w-[280px] rounded-[4px]' />
+      <Skeleton className='mt-6 h-[56px] w-full rounded-[8px]' />
+      <Skeleton className='mt-4 h-[120px] w-full rounded-[8px]' />
+      <div className='mt-6 flex w-full max-w-[410px] gap-3'>
         <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
         <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
       </div>
diff --git a/apps/sim/app/(auth)/oauth/consent/page.tsx b/apps/sim/app/(auth)/oauth/consent/page.tsx
index 0138a7dd6d..e105b24641 100644
--- a/apps/sim/app/(auth)/oauth/consent/page.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/page.tsx
@@ -127,10 +127,10 @@ export default function OAuthConsentPage() {
     return (
       <div className='flex flex-col items-center justify-center'>
         <div className='space-y-1 text-center'>
-          <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+          <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorize Application
           </h1>
-          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
             Loading application details...
           </p>
         </div>
@@ -142,10 +142,10 @@ export default function OAuthConsentPage() {
     return (
       <div className='flex flex-col items-center justify-center'>
         <div className='space-y-1 text-center'>
-          <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+          <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorization Error
           </h1>
-          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
             {error}
           </p>
         </div>
@@ -170,11 +170,11 @@ export default function OAuthConsentPage() {
             className='rounded-[10px]'
           />
         ) : (
-          <div className='flex h-12 w-12 items-center justify-center rounded-[10px] bg-[#2A2A2A] font-medium text-[#999] text-[18px]'>
+          <div className='flex h-12 w-12 items-center justify-center rounded-[10px] bg-[var(--landing-bg-elevated)] font-medium text-[var(--landing-text-muted)] text-lg'>
             {(clientName ?? '?').charAt(0).toUpperCase()}
           </div>
         )}
-        <ArrowLeftRight className='h-5 w-5 text-[#999]' />
+        <ArrowLeftRight className='h-5 w-5 text-[var(--landing-text-muted)]' />
         <Image
           src='/new/logo/colorized-bg.svg'
           alt='Sim'
@@ -185,17 +185,17 @@ export default function OAuthConsentPage() {
       </div>
 
       <div className='space-y-1 text-center'>
-        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+        <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Authorize Application
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
-          <span className='font-medium text-[#ECECEC]'>{clientName}</span> is requesting access to
-          your account
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
+          <span className='font-medium text-[var(--landing-text)]'>{clientName}</span> is requesting
+          access to your account
         </p>
       </div>
 
       {session?.user && (
-        <div className='mt-5 flex items-center gap-3 rounded-lg border border-[#2A2A2A] px-4 py-3'>
+        <div className='mt-5 flex items-center gap-3 rounded-lg border border-[var(--landing-bg-elevated)] px-4 py-3'>
           {session.user.image ? (
             <Image
               src={session.user.image}
@@ -206,20 +206,22 @@ export default function OAuthConsentPage() {
               unoptimized
             />
           ) : (
-            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-[#2A2A2A] font-medium text-[#999] text-[13px]'>
+            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-[var(--landing-bg-elevated)] font-medium text-[var(--landing-text-muted)] text-small'>
               {(session.user.name ?? session.user.email ?? '?').charAt(0).toUpperCase()}
             </div>
           )}
           <div className='min-w-0'>
             {session.user.name && (
-              <p className='truncate font-medium text-[14px]'>{session.user.name}</p>
+              <p className='truncate font-medium text-sm'>{session.user.name}</p>
             )}
-            <p className='truncate text-[#999] text-[13px]'>{session.user.email}</p>
+            <p className='truncate text-[var(--landing-text-muted)] text-small'>
+              {session.user.email}
+            </p>
           </div>
           <button
             type='button'
             onClick={handleSwitchAccount}
-            className='ml-auto text-[#999] text-[13px] underline-offset-2 transition-colors hover:text-[#ECECEC] hover:underline'
+            className='ml-auto text-[var(--landing-text-muted)] text-small underline-offset-2 transition-colors hover:text-[var(--landing-text)] hover:underline'
           >
             Switch
           </button>
@@ -229,10 +231,13 @@ export default function OAuthConsentPage() {
       {scopes.length > 0 && (
         <div className='mt-5 w-full max-w-[410px]'>
           <div className='rounded-lg border p-4'>
-            <p className='mb-3 font-medium text-[14px]'>This will allow the application to:</p>
+            <p className='mb-3 font-medium text-sm'>This will allow the application to:</p>
             <ul className='space-y-2'>
               {scopes.map((s) => (
-                <li key={s} className='flex items-start gap-2 font-normal text-[#999] text-[13px]'>
+                <li
+                  key={s}
+                  className='flex items-start gap-2 font-normal text-[var(--landing-text-muted)] text-small'
+                >
                   <span className='mt-0.5 text-green-500'>&#10003;</span>
                   <span>{SCOPE_DESCRIPTIONS[s] ?? s}</span>
                 </li>
diff --git a/apps/sim/app/(auth)/reset-password/loading.tsx b/apps/sim/app/(auth)/reset-password/loading.tsx
index cd6a25a9b4..02a11005e1 100644
--- a/apps/sim/app/(auth)/reset-password/loading.tsx
+++ b/apps/sim/app/(auth)/reset-password/loading.tsx
@@ -4,13 +4,13 @@ export default function ResetPasswordLoading() {
   return (
     <div className='flex flex-col items-center'>
       <Skeleton className='h-[38px] w-[160px] rounded-[4px]' />
-      <Skeleton className='mt-[12px] h-[14px] w-[280px] rounded-[4px]' />
-      <div className='mt-[32px] w-full space-y-[8px]'>
+      <Skeleton className='mt-3 h-[14px] w-[280px] rounded-[4px]' />
+      <div className='mt-8 w-full space-y-2'>
         <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
         <Skeleton className='h-[44px] w-full rounded-[10px]' />
       </div>
-      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
-      <Skeleton className='mt-[24px] h-[14px] w-[120px] rounded-[4px]' />
+      <Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-6 h-[14px] w-[120px] rounded-[4px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
index a48eedc5f8..8985af8dc8 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
@@ -69,10 +69,10 @@ function ResetPasswordContent() {
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+        <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Reset your password
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           Enter a new password for your account
         </p>
       </div>
@@ -87,10 +87,10 @@ function ResetPasswordContent() {
         />
       </div>
 
-      <div className='pt-6 text-center font-light text-[14px]'>
+      <div className='pt-6 text-center font-light text-sm'>
         <Link
           href='/login'
-          className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+          className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
         >
           Back to login
         </Link>
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
index 8f5ef10aaf..f159314377 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
@@ -46,7 +46,7 @@ export function RequestResetForm({
             disabled={isSubmitting}
             required
           />
-          <p className='text-[#999] text-sm'>
+          <p className='text-[var(--landing-text-muted)] text-sm'>
             We'll send a password reset link to this email address.
           </p>
         </div>
@@ -54,7 +54,10 @@ export function RequestResetForm({
         {/* Status message display */}
         {statusType && statusMessage && (
           <div
-            className={cn('text-xs', statusType === 'success' ? 'text-[#4CAF50]' : 'text-red-400')}
+            className={cn(
+              'text-xs',
+              statusType === 'success' ? 'text-[var(--success)]' : 'text-red-400'
+            )}
           >
             <p>{statusMessage}</p>
           </div>
@@ -162,7 +165,7 @@ export function SetNewPasswordForm({
             <button
               type='button'
               onClick={() => setShowPassword(!showPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
+              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--landing-text-muted)] transition hover:text-[var(--landing-text)]'
               aria-label={showPassword ? 'Hide password' : 'Show password'}
             >
               {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -190,7 +193,7 @@ export function SetNewPasswordForm({
             <button
               type='button'
               onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
+              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--landing-text-muted)] transition hover:text-[var(--landing-text)]'
               aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}
             >
               {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -208,7 +211,7 @@ export function SetNewPasswordForm({
           <div
             className={cn(
               'mt-1 space-y-1 text-xs',
-              statusType === 'success' ? 'text-[#4CAF50]' : 'text-red-400'
+              statusType === 'success' ? 'text-[var(--success)]' : 'text-red-400'
             )}
           >
             <p>{statusMessage}</p>
diff --git a/apps/sim/app/(auth)/signup/loading.tsx b/apps/sim/app/(auth)/signup/loading.tsx
index 4960851a80..21e15d9f71 100644
--- a/apps/sim/app/(auth)/signup/loading.tsx
+++ b/apps/sim/app/(auth)/signup/loading.tsx
@@ -4,25 +4,25 @@ export default function SignupLoading() {
   return (
     <div className='flex flex-col items-center'>
       <Skeleton className='h-[38px] w-[100px] rounded-[4px]' />
-      <div className='mt-[32px] w-full space-y-[8px]'>
+      <div className='mt-8 w-full space-y-2'>
         <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
         <Skeleton className='h-[44px] w-full rounded-[10px]' />
       </div>
-      <div className='mt-[16px] w-full space-y-[8px]'>
+      <div className='mt-4 w-full space-y-2'>
         <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
         <Skeleton className='h-[44px] w-full rounded-[10px]' />
       </div>
-      <div className='mt-[16px] w-full space-y-[8px]'>
+      <div className='mt-4 w-full space-y-2'>
         <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
         <Skeleton className='h-[44px] w-full rounded-[10px]' />
       </div>
-      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
-      <Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
-      <div className='mt-[24px] flex w-full gap-[12px]'>
+      <Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-6 h-[1px] w-full rounded-[1px]' />
+      <div className='mt-6 flex w-full gap-3'>
         <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
         <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
       </div>
-      <Skeleton className='mt-[24px] h-[14px] w-[220px] rounded-[4px]' />
+      <Skeleton className='mt-6 h-[14px] w-[220px] rounded-[4px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index 1054259a41..75467feade 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -363,10 +363,10 @@ function SignupFormContent({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+        <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Create an account
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           Create an account or log in
         </p>
       </div>
@@ -390,105 +390,144 @@ function SignupFormContent({
 
       {/* Email/Password Form - show unless explicitly disabled */}
       {!isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && (
-        <form onSubmit={onSubmit} className='mt-8 space-y-8'>
+        <form onSubmit={onSubmit} className='mt-8 space-y-10'>
           <div className='space-y-6'>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
                 <Label htmlFor='name'>Full name</Label>
               </div>
-              <Input
-                id='name'
-                name='name'
-                placeholder='Enter your name'
-                type='text'
-                autoCapitalize='words'
-                autoComplete='name'
-                title='Name can only contain letters, spaces, hyphens, and apostrophes'
-                value={name}
-                onChange={handleNameChange}
-                className={cn(
-                  showNameValidationError &&
-                    nameErrors.length > 0 &&
-                    'border-red-500 focus:border-red-500'
-                )}
-              />
-              {showNameValidationError && nameErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {nameErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
+              <div className='relative'>
+                <Input
+                  id='name'
+                  name='name'
+                  placeholder='Enter your name'
+                  type='text'
+                  autoCapitalize='words'
+                  autoComplete='name'
+                  title='Name can only contain letters, spaces, hyphens, and apostrophes'
+                  value={name}
+                  onChange={handleNameChange}
+                  className={cn(
+                    showNameValidationError &&
+                      nameErrors.length > 0 &&
+                      'border-red-500 focus:border-red-500'
+                  )}
+                />
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    showNameValidationError && nameErrors.length > 0
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live={showNameValidationError && nameErrors.length > 0 ? 'polite' : 'off'}
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {nameErrors.map((error, index) => (
+                        <p key={index}>{error}</p>
+                      ))}
+                    </div>
+                  </div>
                 </div>
-              )}
+              </div>
             </div>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
                 <Label htmlFor='email'>Email</Label>
               </div>
-              <Input
-                id='email'
-                name='email'
-                placeholder='Enter your email'
-                autoCapitalize='none'
-                autoComplete='email'
-                autoCorrect='off'
-                value={email}
-                onChange={handleEmailChange}
-                className={cn(
-                  (emailError || (showEmailValidationError && emailErrors.length > 0)) &&
-                    'border-red-500 focus:border-red-500'
-                )}
-              />
-              {showEmailValidationError && emailErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {emailErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
+              <div className='relative'>
+                <Input
+                  id='email'
+                  name='email'
+                  placeholder='Enter your email'
+                  autoCapitalize='none'
+                  autoComplete='email'
+                  autoCorrect='off'
+                  value={email}
+                  onChange={handleEmailChange}
+                  className={cn(
+                    (emailError || (showEmailValidationError && emailErrors.length > 0)) &&
+                      'border-red-500 focus:border-red-500'
+                  )}
+                />
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    (showEmailValidationError && emailErrors.length > 0) ||
+                      (emailError && !showEmailValidationError)
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live={
+                    (showEmailValidationError && emailErrors.length > 0) ||
+                    (emailError && !showEmailValidationError)
+                      ? 'polite'
+                      : 'off'
+                  }
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {showEmailValidationError && emailErrors.length > 0 ? (
+                        emailErrors.map((error, index) => <p key={index}>{error}</p>)
+                      ) : emailError && !showEmailValidationError ? (
+                        <p>{emailError}</p>
+                      ) : null}
+                    </div>
+                  </div>
                 </div>
-              )}
-              {emailError && !showEmailValidationError && (
-                <div className='mt-1 text-red-400 text-xs'>
-                  <p>{emailError}</p>
-                </div>
-              )}
+              </div>
             </div>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
                 <Label htmlFor='password'>Password</Label>
               </div>
               <div className='relative'>
-                <Input
-                  id='password'
-                  name='password'
-                  type={showPassword ? 'text' : 'password'}
-                  autoCapitalize='none'
-                  autoComplete='new-password'
-                  placeholder='Enter your password'
-                  autoCorrect='off'
-                  value={password}
-                  onChange={handlePasswordChange}
-                  className={cn(
-                    'pr-10',
-                    showValidationError &&
-                      passwordErrors.length > 0 &&
-                      'border-red-500 focus:border-red-500'
-                  )}
-                />
-                <button
-                  type='button'
-                  onClick={() => setShowPassword(!showPassword)}
-                  className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
-                  aria-label={showPassword ? 'Hide password' : 'Show password'}
-                >
-                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                </button>
-              </div>
-              {showValidationError && passwordErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {passwordErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
+                <div className='relative'>
+                  <Input
+                    id='password'
+                    name='password'
+                    type={showPassword ? 'text' : 'password'}
+                    autoCapitalize='none'
+                    autoComplete='new-password'
+                    placeholder='Enter your password'
+                    autoCorrect='off'
+                    value={password}
+                    onChange={handlePasswordChange}
+                    className={cn(
+                      'pr-10',
+                      showValidationError &&
+                        passwordErrors.length > 0 &&
+                        'border-red-500 focus:border-red-500'
+                    )}
+                  />
+                  <button
+                    type='button'
+                    onClick={() => setShowPassword(!showPassword)}
+                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--landing-text-muted)] transition hover:text-[var(--landing-text)]'
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
                 </div>
-              )}
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    showValidationError && passwordErrors.length > 0
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live={showValidationError && passwordErrors.length > 0 ? 'polite' : 'off'}
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {passwordErrors.map((error, index) => (
+                        <p key={index}>{error}</p>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -514,6 +553,7 @@ function SignupFormContent({
             disabled={isLoading}
             loading={isLoading}
             loadingText='Creating account'
+            className='!mt-6'
           >
             Create account
           </BrandedButton>
@@ -532,10 +572,12 @@ function SignupFormContent({
       })() && (
         <div className='relative my-6 font-light'>
           <div className='absolute inset-0 flex items-center'>
-            <div className='w-full border-[#2A2A2A] border-t' />
+            <div className='w-full border-[var(--landing-bg-elevated)] border-t' />
           </div>
           <div className='relative flex justify-center text-sm'>
-            <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
+            <span className='bg-[var(--landing-bg)] px-4 font-[340] text-[var(--landing-text-muted)]'>
+              Or continue with
+            </span>
           </div>
         </div>
       )}
@@ -570,23 +612,23 @@ function SignupFormContent({
         </div>
       )}
 
-      <div className='pt-6 text-center font-light text-[14px]'>
+      <div className='pt-6 text-center font-light text-sm'>
         <span className='font-normal'>Already have an account? </span>
         <Link
           href={isInviteFlow ? `/login?invite_flow=true&callbackUrl=${redirectUrl}` : '/login'}
-          className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+          className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
         >
           Sign in
         </Link>
       </div>
 
-      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed sm:px-8 md:px-[44px]'>
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[var(--landing-text-muted)] text-small leading-relaxed sm:px-8 md:px-11'>
         By creating an account, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--landing-text-muted)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -595,7 +637,7 @@ function SignupFormContent({
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--landing-text-muted)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Privacy Policy
         </Link>
diff --git a/apps/sim/app/(auth)/sso/loading.tsx b/apps/sim/app/(auth)/sso/loading.tsx
index 11acf1bec7..76209c2f50 100644
--- a/apps/sim/app/(auth)/sso/loading.tsx
+++ b/apps/sim/app/(auth)/sso/loading.tsx
@@ -4,13 +4,13 @@ export default function SSOLoading() {
   return (
     <div className='flex flex-col items-center'>
       <Skeleton className='h-[38px] w-[120px] rounded-[4px]' />
-      <Skeleton className='mt-[12px] h-[14px] w-[260px] rounded-[4px]' />
-      <div className='mt-[32px] w-full space-y-[8px]'>
+      <Skeleton className='mt-3 h-[14px] w-[260px] rounded-[4px]' />
+      <div className='mt-8 w-full space-y-2'>
         <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
         <Skeleton className='h-[44px] w-full rounded-[10px]' />
       </div>
-      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
-      <Skeleton className='mt-[24px] h-[14px] w-[120px] rounded-[4px]' />
+      <Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-6 h-[14px] w-[120px] rounded-[4px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/(auth)/verify/loading.tsx b/apps/sim/app/(auth)/verify/loading.tsx
index b41b5784f5..7460e3295a 100644
--- a/apps/sim/app/(auth)/verify/loading.tsx
+++ b/apps/sim/app/(auth)/verify/loading.tsx
@@ -4,9 +4,9 @@ export default function VerifyLoading() {
   return (
     <div className='flex flex-col items-center'>
       <Skeleton className='h-[38px] w-[180px] rounded-[4px]' />
-      <Skeleton className='mt-[12px] h-[14px] w-[300px] rounded-[4px]' />
-      <Skeleton className='mt-[4px] h-[14px] w-[240px] rounded-[4px]' />
-      <Skeleton className='mt-[32px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-3 h-[14px] w-[300px] rounded-[4px]' />
+      <Skeleton className='mt-1 h-[14px] w-[240px] rounded-[4px]' />
+      <Skeleton className='mt-8 h-[44px] w-full rounded-[10px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/(auth)/verify/verify-content.tsx b/apps/sim/app/(auth)/verify/verify-content.tsx
index 392811ff2e..cf613ba3e3 100644
--- a/apps/sim/app/(auth)/verify/verify-content.tsx
+++ b/apps/sim/app/(auth)/verify/verify-content.tsx
@@ -59,10 +59,10 @@ function VerificationForm({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+        <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           {isVerified ? 'Email Verified!' : 'Verify Your Email'}
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           {isVerified
             ? 'Your email has been verified. Redirecting to dashboard...'
             : !isEmailVerificationEnabled
@@ -78,7 +78,7 @@ function VerificationForm({
       {!isVerified && isEmailVerificationEnabled && (
         <div className='mt-8 space-y-8'>
           <div className='space-y-6'>
-            <p className='text-center text-[#999] text-sm'>
+            <p className='text-center text-[var(--landing-text-muted)] text-sm'>
               Enter the 6-digit code to verify your account.
               {hasEmailService ? " If you don't see it in your inbox, check your spam folder." : ''}
             </p>
@@ -122,15 +122,16 @@ function VerificationForm({
 
           {hasEmailService && (
             <div className='text-center'>
-              <p className='text-[#999] text-sm'>
+              <p className='text-[var(--landing-text-muted)] text-sm'>
                 Didn't receive a code?{' '}
                 {countdown > 0 ? (
                   <span>
-                    Resend in <span className='font-medium text-[#ECECEC]'>{countdown}s</span>
+                    Resend in{' '}
+                    <span className='font-medium text-[var(--landing-text)]'>{countdown}s</span>
                   </span>
                 ) : (
                   <button
-                    className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+                    className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
                     onClick={handleResend}
                     disabled={isLoading || isResendDisabled}
                   >
@@ -141,7 +142,7 @@ function VerificationForm({
             </div>
           )}
 
-          <div className='text-center font-light text-[14px]'>
+          <div className='text-center font-light text-sm'>
             <button
               onClick={() => {
                 if (typeof window !== 'undefined') {
@@ -151,7 +152,7 @@ function VerificationForm({
                 }
                 router.push('/signup')
               }}
-              className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+              className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
             >
               Back to signup
             </button>
@@ -166,8 +167,8 @@ function VerificationFormFallback() {
   return (
     <div className='text-center'>
       <div className='animate-pulse'>
-        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[#2A2A2A]' />
-        <div className='mx-auto h-4 w-64 rounded bg-[#2A2A2A]' />
+        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[var(--surface-4)]' />
+        <div className='mx-auto h-4 w-64 rounded bg-[var(--surface-4)]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/(home)/components/collaboration/collaboration.tsx b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
index e9e760a852..302bcc0590 100644
--- a/apps/sim/app/(home)/components/collaboration/collaboration.tsx
+++ b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
@@ -25,7 +25,7 @@ function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
       }}
     >
       {Array.from({ length: cols * rows }, (_, i) => (
-        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[#2A2A2A]' />
+        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[var(--landing-bg-elevated)]' />
       ))}
     </div>
   )
@@ -89,7 +89,7 @@ function VikhyathCursor() {
         <div className='absolute top-0 left-[56.02px]'>
           <CursorArrow fill='#2ABBF8' />
         </div>
-        <div className='-left-[4px] absolute top-[18px] flex items-center rounded bg-[#2ABBF8] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+        <div className='-left-[4px] absolute top-4.5 flex items-center rounded bg-[#2ABBF8] px-[5px] py-[3px] font-[420] font-season text-[var(--landing-text-dark)] text-sm leading-[100%] tracking-[-0.02em]'>
           Vikhyath
         </div>
       </div>
@@ -113,7 +113,7 @@ function AlexaCursor() {
         <div className='absolute top-0 left-0'>
           <CursorArrow fill='#FFCC02' />
         </div>
-        <div className='absolute top-[16px] left-[23px] flex items-center rounded bg-[#FFCC02] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+        <div className='absolute top-4 left-[23px] flex items-center rounded bg-[#FFCC02] px-[5px] py-[3px] font-[420] font-season text-[var(--landing-text-dark)] text-sm leading-[100%] tracking-[-0.02em]'>
           Alexa
         </div>
       </div>
@@ -143,7 +143,7 @@ function YouCursor({ x, y, visible }: YouCursorProps) {
       <svg width='23.15' height='21.1' viewBox='0 0 17.5 16.4' fill='none'>
         <path d={CURSOR_ARROW_MIRRORED_PATH} fill='#33C482' />
       </svg>
-      <div className='absolute top-[16px] left-[23px] flex items-center rounded bg-[#33C482] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+      <div className='absolute top-4 left-[23px] flex items-center rounded bg-[var(--brand-accent)] px-[5px] py-[3px] font-[420] font-season text-[var(--landing-text-dark)] text-sm leading-[100%] tracking-[-0.02em]'>
         You
       </div>
     </div>
@@ -212,7 +212,7 @@ export default function Collaboration() {
       ref={sectionRef}
       id='collaboration'
       aria-labelledby='collaboration-heading'
-      className='bg-[#1C1C1C]'
+      className='bg-[var(--landing-bg)]'
       style={{ cursor: isHovering ? 'none' : 'auto' }}
       onMouseMove={handleMouseMove}
       onMouseEnter={handleMouseEnter}
@@ -222,7 +222,7 @@ export default function Collaboration() {
       <style dangerouslySetInnerHTML={{ __html: CURSOR_KEYFRAMES }} />
 
       <DotGrid
-        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[var(--landing-bg-elevated)] border-y bg-[var(--landing-bg)] p-1.5'
         cols={120}
         rows={1}
         gap={6}
@@ -230,33 +230,33 @@ export default function Collaboration() {
 
       <div className='relative overflow-hidden'>
         <div className='grid grid-cols-1 md:grid-cols-[auto_1fr]'>
-          <div className='flex flex-col items-start gap-3 px-4 pt-[60px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px] md:pt-[100px]'>
+          <div className='flex flex-col items-start gap-3 px-4 pt-[60px] pb-8 sm:gap-4 sm:px-8 md:gap-5 md:px-20 md:pt-[100px]'>
             <Badge
               variant='blue'
               size='md'
               dot
-              className='bg-[#33C482]/10 font-season text-[#33C482] uppercase tracking-[0.02em]'
+              className='bg-[color-mix(in_srgb,var(--brand-accent)_10%,transparent)] font-season text-[var(--brand-accent)] uppercase tracking-[0.02em]'
             >
               Teams
             </Badge>
 
             <h2
               id='collaboration-heading'
-              className='font-[430] font-season text-[32px] text-white leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+              className='text-balance font-[430] font-season text-[32px] text-white leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
             >
               Realtime
               <br />
               collaboration
             </h2>
 
-            <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] md:text-[18px]'>
+            <p className='font-[430] font-season text-[#F6F6F0]/50 text-base leading-[150%] tracking-[0.02em] md:text-lg'>
               Grab your team. Build agents together <br className='hidden md:block' />
               in real-time inside your workspace.
             </p>
 
             <Link
               href='/signup'
-              className='group/cta mt-[12px] inline-flex h-[32px] cursor-none items-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+              className='group/cta mt-3 inline-flex h-[32px] cursor-none items-center gap-1.5 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-black text-sm transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
             >
               Build together
               <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -306,16 +306,16 @@ export default function Collaboration() {
           href='/blog/multiplayer'
           target='_blank'
           rel='noopener noreferrer'
-          className='relative mx-4 mb-6 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:mx-8 md:absolute md:bottom-10 md:left-[80px] md:z-20 md:mx-0 md:mb-0'
+          className='relative mx-4 mb-6 flex cursor-none items-center gap-3.5 rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] px-3 py-2.5 transition-colors hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-card)] sm:mx-8 md:absolute md:bottom-10 md:left-20 md:z-20 md:mx-0 md:mb-0'
         >
           <div className='relative h-7 w-11 shrink-0'>
             <Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
           </div>
-          <div className='flex flex-col gap-[2px]'>
-            <span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
+          <div className='flex flex-col gap-0.5'>
+            <span className='font-[430] font-season text-[#F6F6F0]/50 text-caption uppercase leading-[100%] tracking-[0.08em]'>
               Blog
             </span>
-            <span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
+            <span className='font-[430] font-season text-[#F6F6F0] text-sm leading-[125%] tracking-[0.02em]'>
               How we built realtime collaboration
             </span>
           </div>
@@ -323,7 +323,7 @@ export default function Collaboration() {
       </div>
 
       <DotGrid
-        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[var(--landing-bg-elevated)] border-y bg-[var(--landing-bg)] p-1.5'
         cols={120}
         rows={1}
         gap={6}
diff --git a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
index 26d648540a..652b2b98ed 100644
--- a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
+++ b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
@@ -100,14 +100,14 @@ export function AccessControlPanel() {
               <span className='font-[430] font-season text-[#F6F6F6]/30 text-[10px] uppercase leading-none tracking-[0.08em]'>
                 {category.label}
               </span>
-              <div className='mt-[8px] grid grid-cols-2 gap-x-4 gap-y-[8px]'>
+              <div className='mt-2 grid grid-cols-2 gap-x-4 gap-y-2'>
                 {category.features.map((feature, featIdx) => {
                   const enabled = accessState[feature.key]
 
                   return (
                     <motion.div
                       key={feature.key}
-                      className='flex cursor-pointer items-center gap-[8px] rounded-[4px] py-[2px]'
+                      className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
                       initial={{ opacity: 0, x: -6 }}
                       animate={isInView ? { opacity: 1, x: 0 } : {}}
                       transition={{
@@ -143,7 +143,7 @@ export function AccessControlPanel() {
             <span className='font-[430] font-season text-[#F6F6F6]/30 text-[10px] uppercase leading-none tracking-[0.08em]'>
               {category.label}
             </span>
-            <div className='mt-[8px] grid grid-cols-2 gap-x-4 gap-y-[8px]'>
+            <div className='mt-2 grid grid-cols-2 gap-x-4 gap-y-2'>
               {category.features.map((feature, featIdx) => {
                 const enabled = accessState[feature.key]
                 const currentIndex =
@@ -155,7 +155,7 @@ export function AccessControlPanel() {
                 return (
                   <motion.div
                     key={feature.key}
-                    className='flex cursor-pointer items-center gap-[8px] rounded-[4px] py-[2px]'
+                    className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
                     initial={{ opacity: 0, x: -6 }}
                     animate={isInView ? { opacity: 1, x: 0 } : {}}
                     transition={{
diff --git a/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx b/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx
index bbf703426e..53c938af1f 100644
--- a/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx
+++ b/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx
@@ -125,7 +125,7 @@ function AuditRow({ entry, index }: AuditRowProps) {
   const timeAgo = formatTimeAgo(entry.insertedAt)
 
   return (
-    <div className='group relative overflow-hidden border-[#2A2A2A] border-b bg-[#1C1C1C] transition-colors duration-150 last:border-b-0 hover:bg-[#212121]'>
+    <div className='group relative overflow-hidden border-[var(--landing-border)] border-b bg-[var(--landing-bg)] transition-colors duration-150 last:border-b-0 hover:bg-[#212121]'>
       {/* Left accent bar -- brightness encodes recency */}
       <div
         aria-hidden='true'
@@ -209,8 +209,8 @@ export function AuditLogPreview() {
             transition={{
               layout: {
                 type: 'spring',
-                stiffness: 380,
-                damping: 38,
+                stiffness: 350,
+                damping: 50,
                 mass: 0.8,
               },
               y: { duration: 0.32, ease: [0.25, 0.46, 0.45, 0.94] },
diff --git a/apps/sim/app/(home)/components/enterprise/enterprise.tsx b/apps/sim/app/(home)/components/enterprise/enterprise.tsx
index 6df178ba26..52da8845d4 100644
--- a/apps/sim/app/(home)/components/enterprise/enterprise.tsx
+++ b/apps/sim/app/(home)/components/enterprise/enterprise.tsx
@@ -22,13 +22,27 @@ import { DemoRequestModal } from '@/app/(home)/components/demo-request/demo-requ
 import { AccessControlPanel } from '@/app/(home)/components/enterprise/components/access-control-panel'
 import { AuditLogPreview } from '@/app/(home)/components/enterprise/components/audit-log-preview'
 
-const MARQUEE_KEYFRAMES = `
-  @keyframes marquee {
+const ENTERPRISE_FEATURE_MARQUEE_STYLES = `
+  @keyframes enterprise-feature-marquee {
     0% { transform: translateX(0); }
     100% { transform: translateX(-25%); }
   }
+  .enterprise-feature-marquee-track {
+    animation: enterprise-feature-marquee 30s linear infinite;
+  }
+  .enterprise-feature-marquee:hover .enterprise-feature-marquee-track {
+    animation-play-state: paused;
+  }
+  .enterprise-feature-marquee-tag {
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
   @media (prefers-reduced-motion: reduce) {
-    @keyframes marquee { 0%, 100% { transform: none; } }
+    .enterprise-feature-marquee-track {
+      animation: none;
+    }
+    .enterprise-feature-marquee-tag {
+      transition: none;
+    }
   }
 `
 
@@ -51,13 +65,13 @@ const FEATURE_TAGS = [
 
 function TrustStrip() {
   return (
-    <div className='mx-6 mt-4 grid grid-cols-1 overflow-hidden rounded-[8px] border border-[#2A2A2A] sm:grid-cols-3 md:mx-8'>
+    <div className='mx-6 mt-4 grid grid-cols-1 overflow-hidden rounded-lg border border-[var(--landing-bg-elevated)] sm:grid-cols-3 md:mx-8'>
       {/* SOC 2 + HIPAA combined */}
       <Link
         href='https://app.vanta.com/sim.ai/trust/v35ia0jil4l7dteqjgaktn'
         target='_blank'
         rel='noopener noreferrer'
-        className='group flex items-center gap-3 border-[#2A2A2A] border-b px-4 py-[14px] transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
+        className='group flex items-center gap-3 border-[var(--landing-bg-elevated)] border-b px-4 py-3.5 transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
       >
         <Image
           src='/footer/soc2.png'
@@ -68,10 +82,10 @@ function TrustStrip() {
           unoptimized
         />
         <div className='flex flex-col gap-[3px]'>
-          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+          <strong className='font-[430] font-season text-small text-white leading-none'>
             SOC 2 & HIPAA
           </strong>
-          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em] transition-colors group-hover:text-[#F6F6F6]/55'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
             Type II · PHI protected →
           </span>
         </div>
@@ -82,31 +96,31 @@ function TrustStrip() {
         href='https://github.com/simstudioai/sim'
         target='_blank'
         rel='noopener noreferrer'
-        className='group flex items-center gap-3 border-[#2A2A2A] border-b px-4 py-[14px] transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
+        className='group flex items-center gap-3 border-[var(--landing-bg-elevated)] border-b px-4 py-3.5 transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
       >
         <div className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[#FFCC02]/10'>
           <GithubIcon width={11} height={11} className='text-[#FFCC02]/75' />
         </div>
         <div className='flex flex-col gap-[3px]'>
-          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+          <strong className='font-[430] font-season text-small text-white leading-none'>
             Open Source
           </strong>
-          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em] transition-colors group-hover:text-[#F6F6F6]/55'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
             View on GitHub →
           </span>
         </div>
       </Link>
 
       {/* SSO */}
-      <div className='flex items-center gap-3 px-4 py-[14px]'>
+      <div className='flex items-center gap-3 px-4 py-3.5'>
         <div className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[#2ABBF8]/10'>
           <Lock className='h-[14px] w-[14px] text-[#2ABBF8]/75' />
         </div>
         <div className='flex flex-col gap-[3px]'>
-          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+          <strong className='font-[430] font-season text-small text-white leading-none'>
             SSO & SCIM
           </strong>
-          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em]'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em]'>
             Okta, Azure AD, Google
           </span>
         </div>
@@ -117,9 +131,13 @@ function TrustStrip() {
 
 export default function Enterprise() {
   return (
-    <section id='enterprise' aria-labelledby='enterprise-heading' className='bg-[#F6F6F6]'>
-      <div className='px-4 pt-[60px] pb-[40px] sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
-        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
+    <section
+      id='enterprise'
+      aria-labelledby='enterprise-heading'
+      className='bg-[var(--landing-bg-section)]'
+    >
+      <div className='px-4 pt-[60px] pb-10 sm:px-8 sm:pt-20 sm:pb-0 md:px-20 md:pt-[100px]'>
+        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-5'>
           <Badge
             variant='blue'
             size='md'
@@ -131,7 +149,7 @@ export default function Enterprise() {
 
           <h2
             id='enterprise-heading'
-            className='max-w-[600px] font-[430] font-season text-[#1C1C1C] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+            className='max-w-[600px] text-balance font-[430] font-season text-[32px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
           >
             Enterprise features for
             <br />
@@ -139,10 +157,10 @@ export default function Enterprise() {
           </h2>
         </div>
 
-        <div className='mt-8 overflow-hidden rounded-[12px] bg-[#1C1C1C] sm:mt-10 md:mt-12'>
-          <div className='grid grid-cols-1 border-[#2A2A2A] border-b lg:grid-cols-[1fr_420px]'>
+        <div className='mt-8 overflow-hidden rounded-[12px] bg-[var(--landing-bg)] sm:mt-10 md:mt-12'>
+          <div className='grid grid-cols-1 border-[var(--landing-border)] border-b lg:grid-cols-[1fr_420px]'>
             {/* Audit Trail */}
-            <div className='border-[#2A2A2A] lg:border-r'>
+            <div className='border-[var(--landing-border)] lg:border-r'>
               <div className='px-6 pt-6 md:px-8 md:pt-8'>
                 <h3 className='font-[430] font-season text-[16px] text-white leading-[120%] tracking-[-0.01em]'>
                   Audit Trail
@@ -156,12 +174,12 @@ export default function Enterprise() {
             </div>
 
             {/* Access Control */}
-            <div className='border-[#2A2A2A] border-t lg:border-t-0'>
+            <div className='border-[var(--landing-border)] border-t lg:border-t-0'>
               <div className='px-6 pt-6 md:px-8 md:pt-8'>
                 <h3 className='font-[430] font-season text-[16px] text-white leading-[120%] tracking-[-0.01em]'>
                   Access Control
                 </h3>
-                <p className='mt-[6px] font-[430] font-season text-[#F6F6F6]/50 text-[14px] leading-[150%] tracking-[0.02em]'>
+                <p className='mt-1.5 font-[430] font-season text-[#F6F6F6]/50 text-[14px] leading-[150%] tracking-[0.02em]'>
                   Restrict providers, surfaces, and tools per group.
                 </p>
               </div>
@@ -173,27 +191,27 @@ export default function Enterprise() {
 
           <TrustStrip />
 
-          {/* Scrolling feature ticker */}
-          <div className='relative mt-6 overflow-hidden border-[#2A2A2A] border-t'>
-            <style dangerouslySetInnerHTML={{ __html: MARQUEE_KEYFRAMES }} />
+          {/* Scrolling feature ticker — keyframe loop; pause on hover. Tags use transitions for hover. */}
+          <div className='enterprise-feature-marquee relative mt-6 overflow-hidden border-[var(--landing-bg-elevated)] border-t'>
+            <style dangerouslySetInnerHTML={{ __html: ENTERPRISE_FEATURE_MARQUEE_STYLES }} />
             {/* Fade edges */}
             <div
               aria-hidden='true'
               className='pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-24'
-              style={{ background: 'linear-gradient(to right, #1C1C1C, transparent)' }}
+              style={{ background: 'linear-gradient(to right, var(--landing-bg), transparent)' }}
             />
             <div
               aria-hidden='true'
               className='pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-24'
-              style={{ background: 'linear-gradient(to left, #1C1C1C, transparent)' }}
+              style={{ background: 'linear-gradient(to left, var(--landing-bg), transparent)' }}
             />
             {/* Duplicate tags for seamless loop */}
-            <div className='flex w-max' style={{ animation: 'marquee 30s linear infinite' }}>
+            <div className='enterprise-feature-marquee-track flex w-max'>
               {[...FEATURE_TAGS, ...FEATURE_TAGS, ...FEATURE_TAGS, ...FEATURE_TAGS].map(
                 (tag, i) => (
                   <span
                     key={i}
-                    className='whitespace-nowrap border-[#2A2A2A] border-r px-5 py-4 font-[430] font-season text-[#F6F6F6]/40 text-[13px] leading-none tracking-[0.02em]'
+                    className='enterprise-feature-marquee-tag whitespace-nowrap border-[var(--landing-bg-elevated)] border-r px-5 py-4 font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)] text-small leading-none tracking-[0.02em] hover:bg-white/[0.04] hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'
                   >
                     {tag}
                   </span>
@@ -202,14 +220,14 @@ export default function Enterprise() {
             </div>
           </div>
 
-          <div className='flex items-center justify-between border-[#2A2A2A] border-t px-6 py-5 md:px-8 md:py-6'>
-            <p className='font-[430] font-season text-[#F6F6F6]/40 text-[15px] leading-[150%] tracking-[0.02em]'>
+          <div className='flex items-center justify-between border-[var(--landing-bg-elevated)] border-t px-6 py-5 md:px-8 md:py-6'>
+            <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)] text-base leading-[150%] tracking-[0.02em]'>
               Ready for growth?
             </p>
             <DemoRequestModal>
               <button
                 type='button'
-                className='group/cta inline-flex h-[32px] cursor-pointer items-center gap-[6px] rounded-[5px] border border-white bg-white px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                className='group/cta inline-flex h-[32px] cursor-pointer items-center gap-1.5 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
               >
                 Book a demo
                 <span className='relative h-[10px] w-[10px] shrink-0'>
diff --git a/apps/sim/app/(home)/components/features/components/features-preview.tsx b/apps/sim/app/(home)/components/features/components/features-preview.tsx
index fd05ed0857..a6dd9d43fe 100644
--- a/apps/sim/app/(home)/components/features/components/features-preview.tsx
+++ b/apps/sim/app/(home)/components/features/components/features-preview.tsx
@@ -304,7 +304,7 @@ function WorkspacePreview({ activeTab, isActive }: { activeTab: number; isActive
 
 function MockUserInput({ text }: { text: string }) {
   return (
-    <div className='flex w-[380px] items-center gap-[6px] rounded-[16px] border border-[#E0E0E0] bg-white px-[10px] py-[8px] shadow-[0_2px_8px_rgba(0,0,0,0.06)]'>
+    <div className='flex w-[380px] items-center gap-1.5 rounded-[16px] border border-[#E0E0E0] bg-white px-2.5 py-2 shadow-[0_2px_8px_rgba(0,0,0,0.06)]'>
       <div className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-full border border-[#E8E8E8]'>
         <svg width='12' height='12' viewBox='0 0 12 12' fill='none'>
           <path d='M6 2.5v7M2.5 6h7' stroke='#999' strokeWidth='1.5' strokeLinecap='round' />
@@ -364,7 +364,7 @@ function MiniCardHeader({
   color?: string
 }) {
   return (
-    <div className='flex items-center gap-[4px] border-[#F0F0F0] border-b px-[8px] py-[5px]'>
+    <div className='flex items-center gap-1 border-[#F0F0F0] border-b px-2 py-1.5'>
       <MiniCardIcon variant={variant} color={color} />
       <span className='truncate font-medium text-[#888] text-[7px] leading-none'>{label}</span>
     </div>
@@ -419,7 +419,7 @@ function MiniCardBody({ variant, color }: { variant: CardVariant; color?: string
 
 function PromptCardBody() {
   return (
-    <div className='px-[8px] py-[6px]'>
+    <div className='px-2 py-1.5'>
       <p className='break-words text-[#AAAAAA] text-[6.5px] leading-[10px]'>{TYPING_PROMPT}</p>
     </div>
   )
@@ -427,7 +427,7 @@ function PromptCardBody() {
 
 function FileCardBody() {
   return (
-    <div className='flex flex-col gap-[3px] px-[8px] py-[6px]'>
+    <div className='flex flex-col gap-[3px] px-2 py-1.5'>
       <div className='h-[2px] w-[78%] rounded-full bg-[#E8E8E8]' />
       <div className='h-[2px] w-[92%] rounded-full bg-[#E8E8E8]' />
       <div className='h-[2px] w-[62%] rounded-full bg-[#E8E8E8]' />
@@ -450,7 +450,7 @@ const TABLE_ROW_WIDTHS = [
 function TableCardBody() {
   return (
     <div className='flex flex-col'>
-      <div className='flex items-center gap-[4px] bg-[#FAFAFA] px-[6px] py-[3px]'>
+      <div className='flex items-center gap-1 bg-[#FAFAFA] px-1.5 py-[3px]'>
         <div className='h-[2px] flex-1 rounded-full bg-[#D4D4D4]' />
         <div className='h-[2px] flex-1 rounded-full bg-[#D4D4D4]' />
         <div className='h-[2px] flex-1 rounded-full bg-[#D4D4D4]' />
@@ -458,7 +458,7 @@ function TableCardBody() {
       {TABLE_ROW_WIDTHS.map((row, i) => (
         <div
           key={i}
-          className='flex items-center gap-[4px] border-[#F5F5F5] border-b px-[6px] py-[3.5px]'
+          className='flex items-center gap-1 border-[#F5F5F5] border-b px-1.5 py-[3.5px]'
         >
           <div className='h-[1.5px] rounded-full bg-[#EBEBEB]' style={{ width: `${row[0]}%` }} />
           <div className='h-[1.5px] rounded-full bg-[#EBEBEB]' style={{ width: `${row[1]}%` }} />
@@ -472,17 +472,17 @@ function TableCardBody() {
 function WorkflowCardBody({ color }: { color: string }) {
   return (
     <div className='relative h-full w-full'>
-      <div className='absolute top-[10px] left-[10px] h-[14px] w-[14px] rounded-[3px] border border-[#E0E0E0] bg-[#F8F8F8]' />
+      <div className='absolute top-2.5 left-[10px] h-[14px] w-[14px] rounded-[3px] border border-[#E0E0E0] bg-[#F8F8F8]' />
       <div className='absolute top-[16px] left-[24px] h-[1px] w-[16px] bg-[#D8D8D8]' />
       <div
-        className='absolute top-[10px] left-[40px] h-[14px] w-[14px] rounded-[3px] border-[2px]'
+        className='absolute top-2.5 left-[40px] h-[14px] w-[14px] rounded-[3px] border-[2px]'
         style={{
           backgroundColor: color,
           borderColor: `${color}60`,
           backgroundClip: 'padding-box',
         }}
       />
-      <div className='absolute top-[24px] left-[46px] h-[12px] w-[1px] bg-[#D8D8D8]' />
+      <div className='absolute top-6 left-[46px] h-[12px] w-[1px] bg-[#D8D8D8]' />
       <div className='absolute top-[36px] left-[40px] h-[14px] w-[14px] rounded-[3px] border border-[#E0E0E0] bg-[#F8F8F8]' />
       <div className='absolute top-[42px] left-[54px] h-[1px] w-[14px] bg-[#D8D8D8]' />
       <div
@@ -502,9 +502,9 @@ const KB_WIDTHS = [70, 85, 55, 80, 48] as const
 
 function KnowledgeCardBody() {
   return (
-    <div className='flex flex-col gap-[5px] px-[8px] py-[6px]'>
+    <div className='flex flex-col gap-[5px] px-2 py-1.5'>
       {KB_WIDTHS.map((w, i) => (
-        <div key={i} className='flex items-center gap-[4px]'>
+        <div key={i} className='flex items-center gap-1'>
           <div className='h-[3px] w-[3px] flex-shrink-0 rounded-full bg-[#D4D4D4]' />
           <div className='h-[1.5px] rounded-full bg-[#E8E8E8]' style={{ width: `${w}%` }} />
         </div>
@@ -524,9 +524,9 @@ const LOG_ENTRIES = [
 
 function LogsCardBody() {
   return (
-    <div className='flex flex-col gap-[3px] px-[6px] py-[4px]'>
+    <div className='flex flex-col gap-[3px] px-1.5 py-1'>
       {LOG_ENTRIES.map((entry, i) => (
-        <div key={i} className='flex items-center gap-[4px] py-[1px]'>
+        <div key={i} className='flex items-center gap-1 py-[1px]'>
           <div
             className='h-[3px] w-[3px] flex-shrink-0 rounded-full'
             style={{ backgroundColor: entry.color }}
@@ -620,8 +620,8 @@ const MD_COMPONENTS: Components = {
       {children}
     </h2>
   ),
-  ul: ({ children }) => <ul className='mb-3 list-disc pl-[24px]'>{children}</ul>,
-  ol: ({ children }) => <ol className='mb-3 list-decimal pl-[24px]'>{children}</ol>,
+  ul: ({ children }) => <ul className='mb-3 list-disc pl-6'>{children}</ul>,
+  ol: ({ children }) => <ol className='mb-3 list-decimal pl-6'>{children}</ol>,
   li: ({ children }) => (
     <li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>{children}</li>
   ),
@@ -633,8 +633,8 @@ function MockFullFiles() {
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-6'>
+        <div className='flex items-center gap-1.5'>
           <File className='h-[14px] w-[14px] text-[#999]' />
           <span className='text-[#999] text-[13px]'>Files</span>
           <span className='text-[#D4D4D4] text-[13px]'>/</span>
@@ -654,7 +654,7 @@ function MockFullFiles() {
             onChange={(e) => setSource(e.target.value)}
             spellCheck={false}
             autoCorrect='off'
-            className='h-full w-full resize-none overflow-auto whitespace-pre-wrap bg-transparent p-[24px] font-[300] font-mono text-[#1C1C1C] text-[12px] leading-[1.7] outline-none'
+            className='h-full w-full resize-none overflow-auto whitespace-pre-wrap bg-transparent p-6 font-[300] font-mono text-[#1C1C1C] text-[12px] leading-[1.7] outline-none'
           />
         </motion.div>
 
@@ -666,7 +666,7 @@ function MockFullFiles() {
           animate={{ opacity: 1 }}
           transition={{ duration: 0.4, delay: 0.5 }}
         >
-          <div className='h-full overflow-auto p-[24px]'>
+          <div className='h-full overflow-auto p-6'>
             <ReactMarkdown remarkPlugins={[remarkGfm]} components={MD_COMPONENTS}>
               {source}
             </ReactMarkdown>
@@ -686,8 +686,8 @@ const KB_STATUS_STYLES: Record<string, { bg: string; text: string; label: string
 function MockFullKnowledgeBase({ revealedRows }: { revealedRows: number }) {
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-6'>
+        <div className='flex items-center gap-1.5'>
           <Database className='h-[14px] w-[14px] text-[#999]' />
           <span className='text-[#999] text-[13px]'>Knowledge Base</span>
           <span className='text-[#D4D4D4] text-[13px]'>/</span>
@@ -695,12 +695,12 @@ function MockFullKnowledgeBase({ revealedRows }: { revealedRows: number }) {
         </div>
       </div>
 
-      <div className='flex h-[36px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
-        <div className='flex items-center gap-[6px]'>
-          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+      <div className='flex h-[36px] shrink-0 items-center border-[#E5E5E5] border-b px-6'>
+        <div className='flex items-center gap-1.5'>
+          <div className='flex h-[24px] items-center gap-1 rounded-[6px] border border-[#E5E5E5] px-2 text-[#999] text-[12px]'>
             Sort
           </div>
-          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+          <div className='flex h-[24px] items-center gap-1 rounded-[6px] border border-[#E5E5E5] px-2 text-[#999] text-[12px]'>
             Filter
           </div>
         </div>
@@ -716,7 +716,7 @@ function MockFullKnowledgeBase({ revealedRows }: { revealedRows: number }) {
           </colgroup>
           <thead>
             <tr>
-              <th className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[4px] py-[7px] text-center align-middle'>
+              <th className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-1 py-[7px] text-center align-middle'>
                 <div className='flex items-center justify-center'>
                   <div className='h-[13px] w-[13px] rounded-[2px] border border-[#D4D4D4]' />
                 </div>
@@ -724,7 +724,7 @@ function MockFullKnowledgeBase({ revealedRows }: { revealedRows: number }) {
               {MOCK_KB_COLUMNS.map((col) => (
                 <th
                   key={col}
-                  className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[8px] py-[7px] text-left align-middle'
+                  className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-2 py-[7px] text-left align-middle'
                 >
                   <span className='font-base text-[#999] text-[13px]'>{col}</span>
                 </th>
@@ -742,11 +742,11 @@ function MockFullKnowledgeBase({ revealedRows }: { revealedRows: number }) {
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.2, ease: 'easeOut' }}
                 >
-                  <td className='border-[#E5E5E5] border-r border-b px-[4px] py-[7px] text-center align-middle'>
+                  <td className='border-[#E5E5E5] border-r border-b px-1 py-[7px] text-center align-middle'>
                     <span className='text-[#999] text-[11px] tabular-nums'>{i + 1}</span>
                   </td>
-                  <td className='border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle'>
-                    <span className='flex items-center gap-[8px] text-[#1C1C1C] text-[13px]'>
+                  <td className='border-[#E5E5E5] border-r border-b px-2 py-[7px] align-middle'>
+                    <span className='flex items-center gap-2 text-[#1C1C1C] text-[13px]'>
                       <DocIcon className='h-[14px] w-[14px] shrink-0' />
                       <span className='truncate'>{row[0]}</span>
                     </span>
@@ -754,14 +754,14 @@ function MockFullKnowledgeBase({ revealedRows }: { revealedRows: number }) {
                   {row.slice(1, 4).map((cell, j) => (
                     <td
                       key={j}
-                      className='border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle'
+                      className='border-[#E5E5E5] border-r border-b px-2 py-[7px] align-middle'
                     >
                       <span className='text-[#999] text-[13px]'>{cell}</span>
                     </td>
                   ))}
-                  <td className='border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle'>
+                  <td className='border-[#E5E5E5] border-r border-b px-2 py-[7px] align-middle'>
                     <span
-                      className='inline-flex items-center rounded-full px-[8px] py-[2px] font-medium text-[11px]'
+                      className='inline-flex items-center rounded-full px-2 py-0.5 font-medium text-[11px]'
                       style={{ backgroundColor: status.bg, color: status.text }}
                     >
                       {status.label}
@@ -885,8 +885,8 @@ function MockFullLogs({ revealedRows }: { revealedRows: number }) {
   return (
     <div className='relative flex h-full'>
       <div className='flex min-w-0 flex-1 flex-col'>
-        <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
-          <div className='flex items-center gap-[6px]'>
+        <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-6'>
+          <div className='flex items-center gap-1.5'>
             <Library className='h-[14px] w-[14px] text-[#999]' />
             <span className='font-medium text-[#1C1C1C] text-[13px]'>Logs</span>
           </div>
@@ -902,7 +902,7 @@ function MockFullLogs({ revealedRows }: { revealedRows: number }) {
             <thead className='shadow-[inset_0_-1px_0_#E5E5E5]'>
               <tr>
                 {['Workflow', 'Date', 'Status', 'Cost', 'Trigger', 'Duration'].map((col) => (
-                  <th key={col} className='h-10 px-[24px] py-[10px] text-left align-middle'>
+                  <th key={col} className='h-10 px-6 py-2.5 text-left align-middle'>
                     <span className='font-base text-[#999] text-[13px]'>{col}</span>
                   </th>
                 ))}
@@ -924,8 +924,8 @@ function MockFullLogs({ revealedRows }: { revealedRows: number }) {
                     )}
                     onClick={() => setSelectedRow(i)}
                   >
-                    <td className='px-[24px] py-[10px] align-middle'>
-                      <span className='flex items-center gap-[12px] font-medium text-[#1C1C1C] text-[14px]'>
+                    <td className='px-6 py-2.5 align-middle'>
+                      <span className='flex items-center gap-3 font-medium text-[#1C1C1C] text-[14px]'>
                         <div
                           className='h-[10px] w-[10px] shrink-0 rounded-[3px] border-[1.5px]'
                           style={{
@@ -937,26 +937,26 @@ function MockFullLogs({ revealedRows }: { revealedRows: number }) {
                         <span className='truncate'>{row[0]}</span>
                       </span>
                     </td>
-                    <td className='px-[24px] py-[10px] align-middle'>
+                    <td className='px-6 py-2.5 align-middle'>
                       <span className='font-medium text-[#999] text-[14px]'>{row[1]}</span>
                     </td>
-                    <td className='px-[24px] py-[10px] align-middle'>
+                    <td className='px-6 py-2.5 align-middle'>
                       <span
-                        className='inline-flex items-center rounded-full px-[8px] py-[2px] font-medium text-[11px]'
+                        className='inline-flex items-center rounded-full px-2 py-0.5 font-medium text-[11px]'
                         style={{ backgroundColor: statusStyle.bg, color: statusStyle.text }}
                       >
                         {statusStyle.label}
                       </span>
                     </td>
-                    <td className='px-[24px] py-[10px] align-middle'>
+                    <td className='px-6 py-2.5 align-middle'>
                       <span className='font-medium text-[#999] text-[14px]'>{row[3]}</span>
                     </td>
-                    <td className='px-[24px] py-[10px] align-middle'>
-                      <span className='rounded-[4px] bg-[#F5F5F5] px-[6px] py-[2px] text-[#666] text-[11px]'>
+                    <td className='px-6 py-2.5 align-middle'>
+                      <span className='rounded-[4px] bg-[#F5F5F5] px-1.5 py-0.5 text-[#666] text-[11px]'>
                         {row[4]}
                       </span>
                     </td>
-                    <td className='px-[24px] py-[10px] align-middle'>
+                    <td className='px-6 py-2.5 align-middle'>
                       <span className='font-medium text-[#999] text-[14px]'>{row[5]}</span>
                     </td>
                   </motion.tr>
@@ -1001,7 +1001,7 @@ function MockLogDetailsSidebar({ selectedRow, onPrev, onNext }: MockLogDetailsSi
   const isNextDisabled = selectedRow === MOCK_LOG_DATA.length - 1
 
   return (
-    <div className='flex h-full flex-col overflow-y-auto px-[14px] pt-[12px]'>
+    <div className='flex h-full flex-col overflow-y-auto px-3.5 pt-3'>
       <div className='flex items-center justify-between'>
         <span className='font-medium text-[#1C1C1C] text-[14px]'>Log Details</span>
         <div className='flex items-center gap-[1px]'>
@@ -1030,18 +1030,18 @@ function MockLogDetailsSidebar({ selectedRow, onPrev, onNext }: MockLogDetailsSi
         </div>
       </div>
 
-      <div className='mt-[20px] flex flex-col gap-[10px]'>
-        <div className='flex items-center gap-[16px] px-[1px]'>
-          <div className='flex w-[120px] shrink-0 flex-col gap-[8px]'>
+      <div className='mt-5 flex flex-col gap-2.5'>
+        <div className='flex items-center gap-4 px-[1px]'>
+          <div className='flex w-[120px] shrink-0 flex-col gap-2'>
             <span className='font-medium text-[#999] text-[12px]'>Timestamp</span>
-            <div className='flex items-center gap-[6px]'>
+            <div className='flex items-center gap-1.5'>
               <span className='font-medium text-[#666] text-[13px]'>{date}</span>
               <span className='font-medium text-[#666] text-[13px]'>{time}</span>
             </div>
           </div>
-          <div className='flex min-w-0 flex-1 flex-col gap-[8px]'>
+          <div className='flex min-w-0 flex-1 flex-col gap-2'>
             <span className='font-medium text-[#999] text-[12px]'>Workflow</span>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <div
                 className='h-[10px] w-[10px] shrink-0 rounded-[3px] border-[1.5px]'
                 style={{
@@ -1056,42 +1056,39 @@ function MockLogDetailsSidebar({ selectedRow, onPrev, onNext }: MockLogDetailsSi
         </div>
 
         <div className='flex flex-col'>
-          <div className='flex h-[42px] items-center justify-between border-[#E5E5E5] border-b px-[8px]'>
+          <div className='flex h-[42px] items-center justify-between border-[#E5E5E5] border-b px-2'>
             <span className='font-medium text-[#999] text-[12px]'>Level</span>
             <span
-              className='inline-flex items-center rounded-full px-[8px] py-[2px] font-medium text-[11px]'
+              className='inline-flex items-center rounded-full px-2 py-0.5 font-medium text-[11px]'
               style={{ backgroundColor: statusStyle.bg, color: statusStyle.text }}
             >
               {statusStyle.label}
             </span>
           </div>
-          <div className='flex h-[42px] items-center justify-between border-[#E5E5E5] border-b px-[8px]'>
+          <div className='flex h-[42px] items-center justify-between border-[#E5E5E5] border-b px-2'>
             <span className='font-medium text-[#999] text-[12px]'>Trigger</span>
-            <span className='rounded-[4px] bg-[#F5F5F5] px-[6px] py-[2px] text-[#666] text-[11px]'>
+            <span className='rounded-[4px] bg-[#F5F5F5] px-1.5 py-0.5 text-[#666] text-[11px]'>
               {row[4]}
             </span>
           </div>
-          <div className='flex h-[42px] items-center justify-between px-[8px]'>
+          <div className='flex h-[42px] items-center justify-between px-2'>
             <span className='font-medium text-[#999] text-[12px]'>Duration</span>
             <span className='font-medium text-[#666] text-[13px]'>{row[5]}</span>
           </div>
         </div>
 
-        <div className='flex flex-col gap-[6px] rounded-[6px] border border-[#E5E5E5] bg-[#FAFAFA] px-[10px] py-[8px]'>
+        <div className='flex flex-col gap-1.5 rounded-[6px] border border-[#E5E5E5] bg-[#FAFAFA] px-2.5 py-2'>
           <span className='font-medium text-[#999] text-[12px]'>Workflow Output</span>
-          <div className='rounded-[6px] bg-[#F0F0F0] p-[10px] font-mono text-[#555] text-[11px] leading-[1.5]'>
+          <div className='rounded-[6px] bg-[#F0F0F0] p-2.5 font-mono text-[#555] text-[11px] leading-[1.5]'>
             {detail.output}
           </div>
         </div>
 
-        <div className='flex flex-col gap-[6px] rounded-[6px] border border-[#E5E5E5] bg-[#FAFAFA] px-[10px] py-[8px]'>
+        <div className='flex flex-col gap-1.5 rounded-[6px] border border-[#E5E5E5] bg-[#FAFAFA] px-2.5 py-2'>
           <span className='font-medium text-[#999] text-[12px]'>Trace Spans</span>
-          <div className='flex flex-col gap-[6px]'>
+          <div className='flex flex-col gap-1.5'>
             {detail.spans.map((span, i) => (
-              <div
-                key={i}
-                className={cn('flex flex-col gap-[3px]', span.depth === 1 && 'ml-[12px]')}
-              >
+              <div key={i} className={cn('flex flex-col gap-[3px]', span.depth === 1 && 'ml-3')}>
                 <div className='flex items-center justify-between'>
                   <span className='font-mono text-[#555] text-[11px]'>{span.name}</span>
                   <span className='font-medium text-[#999] text-[11px]'>{span.ms}ms</span>
@@ -1116,8 +1113,8 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-6'>
+        <div className='flex items-center gap-1.5'>
           <Table className='h-[14px] w-[14px] text-[#999]' />
           <span className='text-[#999] text-[13px]'>Tables</span>
           <span className='text-[#D4D4D4] text-[13px]'>/</span>
@@ -1125,12 +1122,12 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
         </div>
       </div>
 
-      <div className='flex h-[36px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
-        <div className='flex items-center gap-[6px]'>
-          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+      <div className='flex h-[36px] shrink-0 items-center border-[#E5E5E5] border-b px-6'>
+        <div className='flex items-center gap-1.5'>
+          <div className='flex h-[24px] items-center gap-1 rounded-[6px] border border-[#E5E5E5] px-2 text-[#999] text-[12px]'>
             Sort
           </div>
-          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+          <div className='flex h-[24px] items-center gap-1 rounded-[6px] border border-[#E5E5E5] px-2 text-[#999] text-[12px]'>
             Filter
           </div>
         </div>
@@ -1146,7 +1143,7 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
           </colgroup>
           <thead>
             <tr>
-              <th className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[4px] py-[7px] text-center align-middle'>
+              <th className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-1 py-[7px] text-center align-middle'>
                 <div className='flex items-center justify-center'>
                   <div className='h-[13px] w-[13px] rounded-[2px] border border-[#D4D4D4]' />
                 </div>
@@ -1154,9 +1151,9 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
               {MOCK_TABLE_COLUMNS.map((col) => (
                 <th
                   key={col}
-                  className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[8px] py-[7px] text-left align-middle'
+                  className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-2 py-[7px] text-left align-middle'
                 >
-                  <div className='flex items-center gap-[6px]'>
+                  <div className='flex items-center gap-1.5'>
                     <ColumnTypeIcon />
                     <span className='font-medium text-[#1C1C1C] text-[13px]'>{col}</span>
                     <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[#CCC]' />
@@ -1179,7 +1176,7 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
                 >
                   <td
                     className={cn(
-                      'border-[#E5E5E5] border-r border-b px-[4px] py-[7px] text-center align-middle',
+                      'border-[#E5E5E5] border-r border-b px-1 py-[7px] text-center align-middle',
                       isSelected ? 'bg-[rgba(37,99,235,0.06)]' : 'hover:bg-[#FAFAFA]'
                     )}
                   >
@@ -1189,7 +1186,7 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
                     <td
                       key={j}
                       className={cn(
-                        'relative border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle',
+                        'relative border-[#E5E5E5] border-r border-b px-2 py-[7px] align-middle',
                         isSelected ? 'bg-[rgba(37,99,235,0.06)]' : 'hover:bg-[#FAFAFA]'
                       )}
                     >
@@ -1311,13 +1308,13 @@ function DefaultPreview() {
         return (
           <motion.div
             key={key}
-            className='absolute flex items-center justify-center rounded-xl border border-[#E5E5E5] bg-white p-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.06)]'
+            className='absolute flex items-center justify-center rounded-xl border border-[#E5E5E5] bg-white p-2.5 shadow-[0_2px_4px_0_rgba(0,0,0,0.06)]'
             initial={{ top: '50%', left: '50%', opacity: 0, scale: 0, x: '-50%', y: '-50%' }}
             animate={inView ? { top, left, opacity: 1, scale: 1, x: '-50%', y: '-50%' } : undefined}
             transition={{
               type: 'spring',
-              stiffness: 50,
-              damping: 12,
+              stiffness: 80,
+              damping: 20,
               delay: explodeDelay,
             }}
             style={{ color }}
@@ -1334,7 +1331,7 @@ function DefaultPreview() {
         animate={inView ? { opacity: 1, x: '-50%', y: '-50%' } : undefined}
         transition={{ duration: 0.4, ease: 'easeOut', delay: 0 }}
       >
-        <div className='flex h-[36px] items-center gap-[8px] rounded-[8px] border border-[#E5E5E5] bg-white px-[10px] shadow-[0_2px_6px_0_rgba(0,0,0,0.08)]'>
+        <div className='flex h-[36px] items-center gap-2 rounded-[8px] border border-[#E5E5E5] bg-white px-2.5 shadow-[0_2px_6px_0_rgba(0,0,0,0.08)]'>
           <div className='flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-[5px] bg-[#1e1e1e]'>
             <svg width='11' height='11' viewBox='0 0 10 10' fill='none'>
               <path
diff --git a/apps/sim/app/(home)/components/features/features.tsx b/apps/sim/app/(home)/components/features/features.tsx
index b22cbee92d..d402803ac9 100644
--- a/apps/sim/app/(home)/components/features/features.tsx
+++ b/apps/sim/app/(home)/components/features/features.tsx
@@ -152,7 +152,7 @@ function DotGrid({
   return (
     <div
       aria-hidden='true'
-      className={`h-full shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
+      className={`h-full shrink-0 bg-[var(--landing-bg-section)] p-1.5 ${borderLeft ? 'border-[var(--divider)] border-l' : ''}`}
       style={{
         width: width ? `${width}px` : undefined,
         display: 'grid',
@@ -181,7 +181,7 @@ export default function Features() {
     <section
       id='features'
       aria-labelledby='features-heading'
-      className='relative overflow-hidden bg-[#F6F6F6]'
+      className='relative overflow-hidden bg-[var(--landing-bg-section)]'
     >
       <div aria-hidden='true' className='absolute top-0 left-0 w-full'>
         <Image
@@ -195,10 +195,7 @@ export default function Features() {
       </div>
 
       <div className='relative z-10 pt-[60px] lg:pt-[100px]'>
-        <div
-          ref={sectionRef}
-          className='flex flex-col items-start gap-[20px] px-[24px] lg:px-[80px]'
-        >
+        <div ref={sectionRef} className='flex flex-col items-start gap-5 px-6 lg:px-20'>
           <Badge
             variant='blue'
             size='md'
@@ -216,31 +213,31 @@ export default function Features() {
           </Badge>
           <h2
             id='features-heading'
-            className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[28px] leading-[110%] tracking-[-0.02em] md:text-[40px]'
+            className='max-w-[900px] text-balance font-[430] font-season text-[28px] text-[var(--landing-text-dark)] leading-[110%] tracking-[-0.02em] md:text-[40px]'
           >
             {HEADING_LETTERS.map((char, i) => (
               <ScrollLetter key={i} scrollYProgress={scrollYProgress} charIndex={i}>
                 {char}
               </ScrollLetter>
             ))}
-            <span className='text-[#1C1C1C]/40'>
+            <span className='text-[color-mix(in_srgb,var(--landing-text-dark)_40%,transparent)]'>
               Design powerful workflows, connect your data, and monitor every run — all in one
               platform.
             </span>
           </h2>
         </div>
 
-        <div className='relative mt-[40px] pb-[40px] lg:mt-[73px] lg:pb-[80px]'>
+        <div className='relative mt-10 pb-10 lg:mt-[73px] lg:pb-20'>
           <div
             aria-hidden='true'
-            className='absolute top-0 bottom-0 left-[80px] z-20 hidden w-px bg-[#E9E9E9] lg:block'
+            className='absolute top-0 bottom-0 left-[80px] z-20 hidden w-px bg-[var(--divider)] lg:block'
           />
           <div
             aria-hidden='true'
-            className='absolute top-0 right-[80px] bottom-0 z-20 hidden w-px bg-[#E9E9E9] lg:block'
+            className='absolute top-0 right-[80px] bottom-0 z-20 hidden w-px bg-[var(--divider)] lg:block'
           />
 
-          <div className='flex h-[68px] border border-[#E9E9E9] lg:overflow-hidden'>
+          <div className='flex h-[68px] border border-[var(--divider)] lg:overflow-hidden'>
             <div className='h-full shrink-0'>
               <div className='h-full lg:hidden'>
                 <DotGrid cols={3} rows={8} width={24} />
@@ -258,7 +255,7 @@ export default function Features() {
                   role='tab'
                   aria-selected={index === activeTab}
                   onClick={() => setActiveTab(index)}
-                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-[12px] font-medium font-season text-[#212121] text-[12px] uppercase lg:px-0 lg:text-[14px]${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
+                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-3 font-medium font-season text-[var(--landing-text-dark)] text-caption uppercase lg:px-0 lg:text-sm${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[var(--divider)] border-l' : ''}`}
                   style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
                 >
                   {tab.mobileLabel ? (
@@ -298,19 +295,19 @@ export default function Features() {
             </div>
           </div>
 
-          <div className='mt-[32px] flex flex-col gap-[24px] px-[24px] lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
-            <div className='flex flex-col items-start justify-between gap-[24px] pt-[20px] lg:h-[560px] lg:gap-0'>
-              <div className='flex flex-col items-start gap-[16px]'>
-                <h3 className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
+          <div className='mt-8 flex flex-col gap-6 px-6 lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
+            <div className='flex flex-col items-start justify-between gap-6 pt-5 lg:h-[560px] lg:gap-0'>
+              <div className='flex flex-col items-start gap-4'>
+                <h3 className='font-[430] font-season text-[24px] text-[var(--landing-text-dark)] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
                   {FEATURE_TABS[activeTab].title}
                 </h3>
-                <p className='font-[430] font-season text-[#1C1C1C]/50 text-[16px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
+                <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-dark)_50%,transparent)] text-md leading-[150%] tracking-[0.02em] lg:text-lg'>
                   {FEATURE_TABS[activeTab].description}
                 </p>
               </div>
               <Link
                 href='/signup'
-                className='group/cta inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
+                className='group/cta inline-flex h-[32px] items-center gap-1.5 rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-2.5 font-[430] font-season text-sm text-white transition-colors hover:border-[var(--landing-bg-elevated)] hover:bg-[var(--landing-bg-elevated)]'
               >
                 {FEATURE_TABS[activeTab].cta}
                 <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -336,7 +333,7 @@ export default function Features() {
             <FeaturesPreview activeTab={activeTab} />
           </div>
 
-          <div aria-hidden='true' className='mt-[60px] hidden h-px bg-[#E9E9E9] lg:block' />
+          <div aria-hidden='true' className='mt-[60px] hidden h-px bg-[var(--divider)] lg:block' />
         </div>
       </div>
     </section>
diff --git a/apps/sim/app/(home)/components/footer/footer-cta.tsx b/apps/sim/app/(home)/components/footer/footer-cta.tsx
index c01276e2b2..b4df353495 100644
--- a/apps/sim/app/(home)/components/footer/footer-cta.tsx
+++ b/apps/sim/app/(home)/components/footer/footer-cta.tsx
@@ -9,7 +9,7 @@ import { useAnimatedPlaceholder } from '@/app/workspace/[workspaceId]/home/hooks
 const MAX_HEIGHT = 120
 
 const CTA_BUTTON =
-  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+  'inline-flex items-center h-[32px] rounded-[5px] border px-2.5 font-[430] font-season text-sm'
 
 export function FooterCTA() {
   const landingSubmit = useLandingSubmit()
@@ -41,14 +41,14 @@ export function FooterCTA() {
   }, [])
 
   return (
-    <div className='flex flex-col items-center px-4 pt-[120px] pb-[100px] sm:px-8 md:px-[80px]'>
-      <h2 className='text-center font-[430] font-season text-[#1C1C1C] text-[28px] leading-[100%] tracking-[-0.02em] sm:text-[32px] md:text-[36px]'>
+    <div className='flex flex-col items-center px-4 pt-[120px] pb-[100px] sm:px-8 md:px-20'>
+      <h2 className='text-balance text-center font-[430] font-season text-[28px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em] sm:text-[32px] md:text-[36px]'>
         What should we get done?
       </h2>
 
       <div className='mt-8 w-full max-w-[42rem]'>
         <div
-          className='cursor-text rounded-[20px] border border-[#E5E5E5] bg-white px-[10px] py-[8px] shadow-sm'
+          className='cursor-text rounded-[20px] border border-[var(--landing-bg-skeleton)] bg-white px-2.5 py-2 shadow-sm'
           onClick={() => textareaRef.current?.focus()}
         >
           <textarea
@@ -59,7 +59,7 @@ export function FooterCTA() {
             onInput={handleInput}
             placeholder={animatedPlaceholder}
             rows={2}
-            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-[4px] py-[4px] font-body text-[#1C1C1C] text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#999] focus-visible:ring-0'
+            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-1 py-1 font-body text-[var(--landing-text-dark)] text-base leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[var(--landing-text-muted)] focus-visible:ring-0'
             style={{ caretColor: '#1C1C1C', maxHeight: `${MAX_HEIGHT}px` }}
           />
           <div className='flex items-center justify-end'>
@@ -79,18 +79,18 @@ export function FooterCTA() {
         </div>
       </div>
 
-      <div className='mt-8 flex gap-[8px]'>
+      <div className='mt-8 flex gap-2'>
         <a
           href='https://docs.sim.ai'
           target='_blank'
           rel='noopener noreferrer'
-          className={`${CTA_BUTTON} border-[#D4D4D4] text-[#1C1C1C] transition-colors hover:bg-[#E8E8E8]`}
+          className={`${CTA_BUTTON} border-[var(--landing-border-subtle)] text-[var(--landing-text-dark)] transition-colors hover:bg-[var(--landing-bg-skeleton)]`}
         >
           Docs
         </a>
         <Link
           href='/signup'
-          className={`${CTA_BUTTON} gap-[8px] border-[#1C1C1C] bg-[#1C1C1C] text-white transition-colors hover:border-[#333] hover:bg-[#333]`}
+          className={`${CTA_BUTTON} gap-2 border-[var(--landing-bg)] bg-[var(--landing-bg)] text-white transition-colors hover:border-[var(--landing-bg-elevated)] hover:bg-[var(--landing-bg-elevated)]`}
         >
           Get started
         </Link>
diff --git a/apps/sim/app/(home)/components/footer/footer.tsx b/apps/sim/app/(home)/components/footer/footer.tsx
index 120ced0bdf..35a12d31b5 100644
--- a/apps/sim/app/(home)/components/footer/footer.tsx
+++ b/apps/sim/app/(home)/components/footer/footer.tsx
@@ -2,7 +2,8 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { FooterCTA } from '@/app/(home)/components/footer/footer-cta'
 
-const LINK_CLASS = 'text-[14px] text-[#999] transition-colors hover:text-[#ECECEC]'
+const LINK_CLASS =
+  'text-sm text-[var(--landing-text-muted)] transition-colors hover:text-[var(--landing-text)]'
 
 interface FooterItem {
   label: string
@@ -81,8 +82,8 @@ const LEGAL_LINKS: FooterItem[] = [
 function FooterColumn({ title, items }: { title: string; items: FooterItem[] }) {
   return (
     <div>
-      <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>{title}</h3>
-      <div className='flex flex-col gap-[10px]'>
+      <h3 className='mb-4 font-medium text-[var(--landing-text)] text-sm'>{title}</h3>
+      <div className='flex flex-col gap-2.5'>
         {items.map(({ label, href, external }) =>
           external ? (
             <a
@@ -113,16 +114,16 @@ export default function Footer({ hideCTA }: FooterProps) {
   return (
     <footer
       role='contentinfo'
-      className={`bg-[#F6F6F6] pb-[40px] font-[430] font-season text-[14px]${hideCTA ? ' pt-[40px]' : ''}`}
+      className={`bg-[var(--landing-bg-section)] pb-10 font-[430] font-season text-sm${hideCTA ? ' pt-10' : ''}`}
     >
       {!hideCTA && <FooterCTA />}
-      <div className='px-4 sm:px-8 md:px-[80px]'>
-        <div className='relative overflow-hidden rounded-lg bg-[#1C1C1C] px-6 pt-[40px] pb-[32px] sm:px-10 sm:pt-[48px] sm:pb-[40px]'>
+      <div className='px-4 sm:px-8 md:px-20'>
+        <div className='relative overflow-hidden rounded-lg bg-[var(--landing-bg)] px-6 pt-10 pb-8 sm:px-10 sm:pt-12 sm:pb-10'>
           <nav
             aria-label='Footer navigation'
             className='relative z-[1] grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-7'
           >
-            <div className='col-span-2 flex flex-col gap-[24px] sm:col-span-1'>
+            <div className='col-span-2 flex flex-col gap-6 sm:col-span-1'>
               <Link href='/' aria-label='Sim home'>
                 <Image
                   src='/logo/sim-landing.svg'
diff --git a/apps/sim/app/(home)/components/hero/hero.tsx b/apps/sim/app/(home)/components/hero/hero.tsx
index 15ee28c832..96953d4f7d 100644
--- a/apps/sim/app/(home)/components/hero/hero.tsx
+++ b/apps/sim/app/(home)/components/hero/hero.tsx
@@ -20,13 +20,13 @@ const LandingPreview = dynamic(
     ),
   {
     ssr: false,
-    loading: () => <div className='aspect-[1116/549] w-full rounded bg-[#1b1b1b]' />,
+    loading: () => <div className='aspect-[1116/549] w-full rounded bg-[var(--landing-bg)]' />,
   }
 )
 
 /** Shared base classes for CTA link buttons — matches Deploy/Run button styling in the preview panel. */
 const CTA_BASE =
-  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+  'inline-flex items-center h-[32px] rounded-[5px] border px-2.5 font-[430] font-season text-sm'
 
 export default function Hero() {
   const blockStates = useBlockCycle()
@@ -35,7 +35,7 @@ export default function Hero() {
     <section
       id='hero'
       aria-labelledby='hero-heading'
-      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[60px] pb-[12px] lg:pt-[100px]'
+      className='relative flex flex-col items-center overflow-hidden bg-[var(--landing-bg)] pt-[60px] pb-3 lg:pt-[100px]'
     >
       <p className='sr-only'>
         Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
@@ -59,22 +59,22 @@ export default function Hero() {
         <Image src='/landing/card-right.svg' alt='' fill className='object-contain' />
       </div>
 
-      <div className='relative z-10 flex flex-col items-center gap-[12px]'>
+      <div className='relative z-10 flex flex-col items-center gap-3'>
         <h1
           id='hero-heading'
-          className='font-[430] font-season text-[36px] text-white leading-[100%] tracking-[-0.02em] sm:text-[48px] lg:text-[72px]'
+          className='text-balance font-[430] font-season text-[36px] text-white leading-[100%] tracking-[-0.02em] sm:text-[48px] lg:text-[72px]'
         >
           Build AI Agents
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[15px] leading-[125%] tracking-[0.02em] lg:text-[18px]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-base leading-[125%] tracking-[0.02em] lg:text-lg'>
           Sim is the AI Workspace for Agent Builders.
         </p>
 
-        <div className='mt-[12px] flex items-center gap-[8px]'>
+        <div className='mt-3 flex items-center gap-2'>
           <DemoRequestModal>
             <button
               type='button'
-              className={`${CTA_BASE} border-[#3d3d3d] bg-transparent text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]`}
+              className={`${CTA_BASE} border-[var(--landing-border-strong)] bg-transparent text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]`}
               aria-label='Get a demo'
             >
               Get a demo
@@ -82,7 +82,7 @@ export default function Hero() {
           </DemoRequestModal>
           <Link
             href='/signup'
-            className={`${CTA_BASE} gap-[8px] border-[#FFFFFF] bg-[#FFFFFF] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
+            className={`${CTA_BASE} gap-2 border-white bg-white text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
             aria-label='Get started with Sim'
           >
             Get started
@@ -119,7 +119,7 @@ export default function Hero() {
           <BlocksRightSideAnimated animState={blockStates.rightSide} />
         </div>
 
-        <div className='relative z-10 overflow-hidden rounded border border-[#2A2A2A]'>
+        <div className='relative z-10 overflow-hidden rounded border border-[var(--landing-bg-elevated)]'>
           <LandingPreview />
         </div>
       </div>
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
index 325e98d18e..5413f9b4d5 100644
--- a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
@@ -48,10 +48,10 @@ export const LandingPreviewHome = memo(function LandingPreviewHome() {
   }, [])
 
   return (
-    <div className='flex min-w-0 flex-1 flex-col items-center justify-center px-[24px] pb-[2vh]'>
+    <div className='flex min-w-0 flex-1 flex-col items-center justify-center px-6 pb-[2vh]'>
       <p
         role='presentation'
-        className='mb-[24px] max-w-[42rem] font-[430] font-season text-[32px] tracking-[-0.02em]'
+        className='mb-6 max-w-[42rem] font-[430] font-season text-[32px] tracking-[-0.02em]'
         style={{ color: C.TEXT_PRIMARY }}
       >
         What should we get done?
@@ -59,7 +59,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome() {
 
       <div className='w-full max-w-[32rem]'>
         <div
-          className='cursor-text rounded-[20px] border px-[10px] py-[8px]'
+          className='cursor-text rounded-[20px] border px-2.5 py-2'
           style={{ borderColor: C.BORDER, backgroundColor: C.SURFACE }}
           onClick={() => textareaRef.current?.focus()}
         >
@@ -71,7 +71,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome() {
             onInput={handleInput}
             placeholder={animatedPlaceholder}
             rows={1}
-            className='m-0 box-border min-h-[24px] w-full resize-none overflow-y-auto border-0 bg-transparent px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#787878] focus-visible:ring-0'
+            className='m-0 box-border min-h-[24px] w-full resize-none overflow-y-auto border-0 bg-transparent px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#787878] focus-visible:ring-0'
             style={{
               color: C.TEXT_PRIMARY,
               caretColor: C.TEXT_PRIMARY,
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
index 7528a5d3f7..83f4b097f3 100644
--- a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
@@ -59,10 +59,10 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
 
   return (
     <div className='flex h-full w-[280px] flex-shrink-0 flex-col bg-[#1e1e1e]'>
-      <div className='flex h-full flex-col border-[#2c2c2c] border-l pt-[14px]'>
+      <div className='flex h-full flex-col border-[#2c2c2c] border-l pt-3.5'>
         {/* Header — More + Chat | Deploy + Run */}
-        <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
-          <div className='pointer-events-none flex gap-[6px]'>
+        <div className='flex flex-shrink-0 items-center justify-between px-2'>
+          <div className='pointer-events-none flex gap-1.5'>
             <div className='flex h-[30px] w-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
               <MoreHorizontal className='h-[14px] w-[14px] text-[#e6e6e6]' />
             </div>
@@ -72,14 +72,14 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
           </div>
           <Link
             href='/signup'
-            className='flex gap-[6px]'
+            className='flex gap-1.5'
             onMouseMove={(e) => setCursorPos({ x: e.clientX, y: e.clientY })}
             onMouseLeave={() => setCursorPos(null)}
           >
-            <div className='flex h-[30px] items-center rounded-[5px] bg-[#33C482] px-[10px] transition-colors hover:bg-[#2DAC72]'>
+            <div className='flex h-[30px] items-center rounded-[5px] bg-[#33C482] px-2.5 transition-colors hover:bg-[#2DAC72]'>
               <span className='font-medium text-[#1b1b1b] text-[12px]'>Deploy</span>
             </div>
-            <div className='flex h-[30px] items-center gap-[8px] rounded-[5px] bg-[#33C482] px-[10px] transition-colors hover:bg-[#2DAC72]'>
+            <div className='flex h-[30px] items-center gap-2 rounded-[5px] bg-[#33C482] px-2.5 transition-colors hover:bg-[#2DAC72]'>
               <Play className='h-[11.5px] w-[11.5px] text-[#1b1b1b]' />
               <span className='font-medium text-[#1b1b1b] text-[12px]'>Run</span>
             </div>
@@ -101,7 +101,7 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
                   <div className='h-full w-[8px] bg-[#FA4EDF]' />
                   <div className='h-full w-[14px] bg-[#FA4EDF] opacity-60' />
                 </div>
-                <div className='flex items-center gap-[5px] bg-white px-[6px] py-[4px] font-medium text-[#1C1C1C] text-[11px]'>
+                <div className='flex items-center gap-[5px] bg-white px-1.5 py-1 font-medium text-[#1C1C1C] text-[11px]'>
                   Get started
                   <ChevronDown className='-rotate-90 h-[7px] w-[7px] text-[#1C1C1C]' />
                 </div>
@@ -111,31 +111,31 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
         </div>
 
         {/* Tabs */}
-        <div className='flex flex-shrink-0 items-center px-[8px] pt-[14px]'>
-          <div className='pointer-events-none flex gap-[4px]'>
-            <div className='flex h-[28px] items-center rounded-[6px] border border-[#3d3d3d] bg-[#363636] px-[8px] py-[5px]'>
+        <div className='flex flex-shrink-0 items-center px-2 pt-3.5'>
+          <div className='pointer-events-none flex gap-1'>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-[#3d3d3d] bg-[#363636] px-2 py-[5px]'>
               <span className='font-medium text-[#e6e6e6] text-[12.5px]'>Copilot</span>
             </div>
-            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-[8px] py-[5px]'>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-2 py-[5px]'>
               <span className='font-medium text-[#787878] text-[12.5px]'>Toolbar</span>
             </div>
-            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-[8px] py-[5px]'>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-2 py-[5px]'>
               <span className='font-medium text-[#787878] text-[12.5px]'>Editor</span>
             </div>
           </div>
         </div>
 
         {/* Tab content — copilot */}
-        <div className='flex flex-1 flex-col overflow-hidden pt-[12px]'>
+        <div className='flex flex-1 flex-col overflow-hidden pt-3'>
           <div className='flex h-full flex-col'>
             {/* Copilot header bar — matches mx-[-1px] in real copilot */}
-            <div className='pointer-events-none mx-[-1px] flex flex-shrink-0 items-center rounded-[4px] border border-[#2c2c2c] bg-[#292929] px-[12px] py-[6px]'>
+            <div className='pointer-events-none mx-[-1px] flex flex-shrink-0 items-center rounded-[4px] border border-[#2c2c2c] bg-[#292929] px-3 py-1.5'>
               <span className='truncate font-medium text-[#e6e6e6] text-[14px]'>New Chat</span>
             </div>
 
             {/* User input — matches real UserInput at p-[8px] inside copilot welcome state */}
-            <div className='px-[8px] pt-[12px] pb-[8px]'>
-              <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-[6px] py-[6px]'>
+            <div className='px-2 pt-3 pb-2'>
+              <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-1.5 py-1.5'>
                 <textarea
                   ref={textareaRef}
                   value={inputValue}
@@ -143,7 +143,7 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
                   onKeyDown={handleKeyDown}
                   placeholder='Build an AI agent...'
                   rows={2}
-                  className='mb-[6px] min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-[2px] py-1 font-base text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
+                  className='mb-1.5 min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-0.5 py-1 font-base text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
                 />
                 <div className='flex items-center justify-end'>
                   <button
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
index 39f03925e4..c4df8ecc85 100644
--- a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
@@ -57,7 +57,7 @@ function StaticNavItem({
   label: string
 }) {
   return (
-    <div className='pointer-events-none mx-[2px] flex h-[28px] items-center gap-[8px] rounded-[8px] px-[8px]'>
+    <div className='pointer-events-none mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2'>
       <Icon className='h-[14px] w-[14px] flex-shrink-0' style={{ color: C.TEXT_ICON }} />
       <span className='truncate text-[13px]' style={{ color: C.TEXT_BODY, fontWeight: 450 }}>
         {label}
@@ -82,13 +82,13 @@ export function LandingPreviewSidebar({
 
   return (
     <div
-      className='flex h-full w-[248px] flex-shrink-0 flex-col pt-[12px]'
+      className='flex h-full w-[248px] flex-shrink-0 flex-col pt-3'
       style={{ backgroundColor: C.SURFACE_1 }}
     >
       {/* Workspace Header */}
-      <div className='flex-shrink-0 px-[10px]'>
+      <div className='flex-shrink-0 px-2.5'>
         <div
-          className='pointer-events-none flex h-[32px] w-full items-center gap-[8px] rounded-[8px] border pr-[8px] pl-[5px]'
+          className='pointer-events-none flex h-[32px] w-full items-center gap-2 rounded-[8px] border pr-2 pl-[5px]'
           style={{ borderColor: C.BORDER, backgroundColor: C.SURFACE_2 }}
         >
           <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] bg-white'>
@@ -112,11 +112,11 @@ export function LandingPreviewSidebar({
       </div>
 
       {/* Top Navigation: Home (interactive), Search (static) */}
-      <div className='mt-[10px] flex flex-shrink-0 flex-col gap-[2px] px-[8px]'>
+      <div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
         <button
           type='button'
           onClick={onSelectHome}
-          className='mx-[2px] flex h-[28px] items-center gap-[8px] rounded-[8px] px-[8px] transition-colors'
+          className='mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors'
           style={{ backgroundColor: isHomeActive ? C.SURFACE_ACTIVE : 'transparent' }}
           onMouseEnter={(e) => {
             if (!isHomeActive) e.currentTarget.style.backgroundColor = C.SURFACE_ACTIVE
@@ -134,13 +134,13 @@ export function LandingPreviewSidebar({
       </div>
 
       {/* Workspace */}
-      <div className='mt-[14px] flex flex-shrink-0 flex-col'>
-        <div className='px-[16px] pb-[6px]'>
+      <div className='mt-3.5 flex flex-shrink-0 flex-col'>
+        <div className='px-4 pb-1.5'>
           <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
             Workspace
           </div>
         </div>
-        <div className='flex flex-col gap-[2px] px-[8px]'>
+        <div className='flex flex-col gap-0.5 px-2'>
           {WORKSPACE_NAV.map((item) => (
             <StaticNavItem key={item.id} icon={item.icon} label={item.label} />
           ))}
@@ -148,15 +148,15 @@ export function LandingPreviewSidebar({
       </div>
 
       {/* Scrollable Tasks + Workflows */}
-      <div className='flex flex-1 flex-col overflow-y-auto overflow-x-hidden pt-[14px]'>
+      <div className='flex flex-1 flex-col overflow-y-auto overflow-x-hidden pt-3.5'>
         {/* Workflows */}
         <div className='flex flex-col'>
-          <div className='px-[16px]'>
+          <div className='px-4'>
             <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
               Workflows
             </div>
           </div>
-          <div className='mt-[6px] flex flex-col gap-[2px] px-[8px]'>
+          <div className='mt-1.5 flex flex-col gap-0.5 px-2'>
             {workflows.map((workflow) => {
               const isActive = activeView === 'workflow' && workflow.id === activeWorkflowId
               return (
@@ -164,7 +164,7 @@ export function LandingPreviewSidebar({
                   key={workflow.id}
                   type='button'
                   onClick={() => onSelectWorkflow(workflow.id)}
-                  className='group mx-[2px] flex h-[28px] w-full items-center gap-[8px] rounded-[8px] px-[8px] transition-colors'
+                  className='group mx-0.5 flex h-[28px] w-full items-center gap-2 rounded-[8px] px-2 transition-colors'
                   style={{ backgroundColor: isActive ? C.SURFACE_ACTIVE : 'transparent' }}
                   onMouseEnter={(e) => {
                     if (!isActive) e.currentTarget.style.backgroundColor = C.SURFACE_ACTIVE
@@ -195,7 +195,7 @@ export function LandingPreviewSidebar({
       </div>
 
       {/* Footer */}
-      <div className='flex flex-shrink-0 flex-col gap-[2px] px-[8px] pt-[9px] pb-[8px]'>
+      <div className='flex flex-shrink-0 flex-col gap-0.5 px-2 pt-[9px] pb-2'>
         {FOOTER_NAV.map((item) => (
           <StaticNavItem key={item.id} icon={item.icon} label={item.label} />
         ))}
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow.tsx b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow.tsx
index ef741b3337..7cc0079a8f 100644
--- a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow.tsx
@@ -137,7 +137,7 @@ function PreviewFlow({ workflow, animate = false, fitViewOptions }: LandingPrevi
       proOptions={PRO_OPTIONS}
       fitView
       fitViewOptions={resolvedFitViewOptions}
-      className='h-full w-full bg-[#1b1b1b]'
+      className='h-full w-full bg-[var(--landing-bg)]'
     />
   )
 }
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
index 3c6a7e4703..58248fcc72 100644
--- a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
@@ -150,10 +150,10 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
         transition={{ duration: 0.45, delay, ease: EASE_OUT }}
       >
         <div className='w-[280px] select-none rounded-[8px] border border-[#3d3d3d] bg-[#232323]'>
-          <div className='border-[#3d3d3d] border-b p-[8px]'>
+          <div className='border-[#3d3d3d] border-b p-2'>
             <span className='font-medium text-[#e6e6e6] text-[16px]'>Note</span>
           </div>
-          <div className='p-[10px]'>
+          <div className='p-2.5'>
             <NoteMarkdown content={markdown} />
           </div>
         </div>
@@ -186,9 +186,9 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
 
         {/* Header */}
         <div
-          className={`flex items-center justify-between p-[8px] ${hasContent ? 'border-[#3d3d3d] border-b' : ''}`}
+          className={`flex items-center justify-between p-2 ${hasContent ? 'border-[#3d3d3d] border-b' : ''}`}
         >
-          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
+          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
             <div
               className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
               style={{ background: bgColor }}
@@ -201,17 +201,17 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
 
         {/* Sub-block rows + tools */}
         {hasContent && (
-          <div className='flex flex-col gap-[8px] p-[8px]'>
+          <div className='flex flex-col gap-2 p-2'>
             {rows.map((row) => {
               const modelEntry = row.title === 'Model' ? getModelIconEntry(row.value) : null
               const ModelIcon = modelEntry?.icon
               return (
-                <div key={row.title} className='flex items-center gap-[8px]'>
+                <div key={row.title} className='flex items-center gap-2'>
                   <span className='flex-shrink-0 font-normal text-[#b3b3b3] text-[14px] capitalize'>
                     {row.title}
                   </span>
                   {row.value && (
-                    <span className='flex min-w-0 flex-1 items-center justify-end gap-[5px] font-normal text-[#e6e6e6] text-[14px]'>
+                    <span className='flex min-w-0 flex-1 items-center justify-end gap-2 font-normal text-[#e6e6e6] text-[14px]'>
                       {ModelIcon && (
                         <ModelIcon
                           className={`inline-block flex-shrink-0 text-[#e6e6e6] ${modelEntry.size ?? 'h-[14px] w-[14px]'}`}
@@ -226,15 +226,15 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
 
             {/* Tool chips — inline with label */}
             {tools && tools.length > 0 && (
-              <div className='flex items-center gap-[8px]'>
+              <div className='flex items-center gap-2'>
                 <span className='flex-shrink-0 font-normal text-[#b3b3b3] text-[14px]'>Tools</span>
-                <div className='flex flex-1 flex-wrap items-center justify-end gap-[5px]'>
+                <div className='flex flex-1 flex-wrap items-center justify-end gap-2'>
                   {tools.map((tool) => {
                     const ToolIcon = BLOCK_ICONS[tool.type]
                     return (
                       <div
                         key={tool.type}
-                        className='flex items-center gap-[5px] rounded-[5px] border border-[#3d3d3d] bg-[#2a2a2a] px-[6px] py-[3px]'
+                        className='flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] bg-[#2a2a2a] px-2 py-1'
                       >
                         <div
                           className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
@@ -277,13 +277,13 @@ function NoteMarkdown({ content }: { content: string }) {
   const lines = content.split('\n')
 
   return (
-    <div className='flex flex-col gap-[4px]'>
+    <div className='flex flex-col gap-1'>
       {lines.map((line, i) => {
         const trimmed = line.trim()
         if (!trimmed) return <div key={i} className='h-[4px]' />
 
         if (trimmed === '---') {
-          return <hr key={i} className='my-[4px] border-[#3d3d3d] border-t' />
+          return <hr key={i} className='my-1 border-[#3d3d3d] border-t' />
         }
 
         if (trimmed.startsWith('### ')) {
diff --git a/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx b/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
index 91ef0a2a4d..646c830a73 100644
--- a/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
@@ -81,7 +81,7 @@ export function LandingPreview() {
 
   return (
     <motion.div
-      className='dark flex aspect-[1116/549] w-full overflow-hidden rounded bg-[#1e1e1e] antialiased'
+      className='dark flex aspect-[1116/549] w-full overflow-hidden rounded bg-[var(--landing-bg-surface)] antialiased'
       initial='hidden'
       animate='visible'
       variants={containerVariants}
@@ -95,8 +95,8 @@ export function LandingPreview() {
           onSelectHome={handleSelectHome}
         />
       </motion.div>
-      <div className='flex min-w-0 flex-1 flex-col py-[8px] pr-[8px] pl-[8px] lg:pl-0'>
-        <div className='flex flex-1 overflow-hidden rounded-[8px] border border-[#2c2c2c] bg-[#1b1b1b]'>
+      <div className='flex min-w-0 flex-1 flex-col py-2 pr-2 pl-2 lg:pl-0'>
+        <div className='flex flex-1 overflow-hidden rounded-[8px] border border-[#2c2c2c] bg-[var(--landing-bg)]'>
           <div
             className={
               isWorkflowView
diff --git a/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx b/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
index 82a39eda59..81db744ab6 100644
--- a/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
+++ b/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
@@ -29,7 +29,7 @@ function BlogCard({
     <Link
       href={`/blog/${slug}`}
       className={cn(
-        'group/card flex flex-col overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]',
+        'group/card flex flex-col overflow-hidden rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] transition-colors hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-elevated)]',
         className
       )}
       prefetch={false}
@@ -44,9 +44,9 @@ function BlogCard({
           unoptimized
         />
       </div>
-      <div className='flex-shrink-0 px-[10px] py-[6px]'>
+      <div className='flex-shrink-0 px-2.5 py-1.5'>
         <span
-          className='font-[430] font-season text-[#cdcdcd] leading-[140%]'
+          className='font-[430] font-season text-[var(--landing-text-body)] leading-[140%]'
           style={{ fontSize: titleSize }}
         >
           {title}
@@ -66,8 +66,8 @@ export function BlogDropdown({ posts }: BlogDropdownProps) {
   if (!featured) return null
 
   return (
-    <div className='w-[560px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
-      <div className='grid grid-cols-3 gap-[8px]'>
+    <div className='w-[560px] rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] p-4 shadow-overlay'>
+      <div className='grid grid-cols-3 gap-2'>
         <BlogCard
           slug={featured.slug}
           image={featured.ogImage}
diff --git a/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx b/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
index 520d4b10e1..0054491bf5 100644
--- a/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
+++ b/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
@@ -37,15 +37,15 @@ const RESOURCE_CARDS = [
 
 export function DocsDropdown() {
   return (
-    <div className='w-[480px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
-      <div className='grid grid-cols-2 gap-[10px]'>
+    <div className='w-[480px] rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] p-4 shadow-overlay'>
+      <div className='grid grid-cols-2 gap-2.5'>
         {PREVIEW_CARDS.map((card) => (
           <a
             key={card.title}
             href={card.href}
             target='_blank'
             rel='noopener noreferrer'
-            className='group/card overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]'
+            className='group/card overflow-hidden rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] transition-colors hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-elevated)]'
           >
             <div className='relative h-[120px] w-full overflow-hidden bg-[#141414]'>
               <Image
@@ -57,8 +57,8 @@ export function DocsDropdown() {
                 unoptimized
               />
             </div>
-            <div className='px-[10px] py-[8px]'>
-              <span className='font-[430] font-season text-[#cdcdcd] text-[13px]'>
+            <div className='px-2.5 py-2'>
+              <span className='font-[430] font-season text-[var(--landing-text-body)] text-small'>
                 {card.title}
               </span>
             </div>
@@ -66,7 +66,7 @@ export function DocsDropdown() {
         ))}
       </div>
 
-      <div className='mt-[8px] grid grid-cols-3 gap-[8px]'>
+      <div className='mt-2 grid grid-cols-3 gap-2'>
         {RESOURCE_CARDS.map((card) => {
           const Icon = card.icon
           return (
@@ -75,15 +75,15 @@ export function DocsDropdown() {
               href={card.href}
               target='_blank'
               rel='noopener noreferrer'
-              className='flex flex-col gap-[4px] rounded-[5px] border border-[#2A2A2A] px-[10px] py-[8px] transition-colors hover:border-[#3D3D3D] hover:bg-[#232323]'
+              className='flex flex-col gap-1 rounded-[5px] border border-[var(--landing-bg-elevated)] px-2.5 py-2 transition-colors hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-card)]'
             >
-              <div className='flex items-center gap-[6px]'>
-                <Icon className='h-[13px] w-[13px] flex-shrink-0 text-[#939393]' />
-                <span className='font-[430] font-season text-[#cdcdcd] text-[12px]'>
+              <div className='flex items-center gap-1.5'>
+                <Icon className='h-[13px] w-[13px] flex-shrink-0 text-[var(--landing-text-icon)]' />
+                <span className='font-[430] font-season text-[var(--landing-text-body)] text-caption'>
                   {card.title}
                 </span>
               </div>
-              <span className='font-season text-[#939393] text-[11px] leading-[130%]'>
+              <span className='font-season text-[var(--landing-text-icon)] text-xs leading-[130%]'>
                 {card.description}
               </span>
             </a>
diff --git a/apps/sim/app/(home)/components/navbar/components/github-stars.tsx b/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
index 1c16222435..f33f7619c1 100644
--- a/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
+++ b/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
@@ -31,7 +31,7 @@ export function GitHubStars() {
       href='https://github.com/simstudioai/sim'
       target='_blank'
       rel='noopener noreferrer'
-      className='flex items-center gap-[8px] px-[12px]'
+      className='flex items-center gap-2 px-3'
       aria-label={`GitHub repository — ${stars} stars`}
     >
       <GithubOutlineIcon className='h-[14px] w-[14px]' />
diff --git a/apps/sim/app/(home)/components/navbar/navbar.tsx b/apps/sim/app/(home)/components/navbar/navbar.tsx
index 056de676be..b04972f2ff 100644
--- a/apps/sim/app/(home)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(home)/components/navbar/navbar.tsx
@@ -32,8 +32,8 @@ const NAV_LINKS: NavLink[] = [
   { label: 'Enterprise', href: 'https://form.typeform.com/to/jqCO12pF', external: true },
 ]
 
-const LOGO_CELL = 'flex items-center pl-[20px] lg:pl-[80px] pr-[20px]'
-const LINK_CELL = 'flex items-center px-[14px]'
+const LOGO_CELL = 'flex items-center pl-5 lg:pl-20 pr-5'
+const LINK_CELL = 'flex items-center px-3.5'
 
 interface NavbarProps {
   logoOnly?: boolean
@@ -96,7 +96,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
   return (
     <nav
       aria-label='Primary navigation'
-      className='relative flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
+      className='relative flex h-[52px] border-[var(--landing-bg-elevated)] border-b-[1px] bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)] text-sm'
       itemScope
       itemType='https://schema.org/SiteNavigationElement'
     >
@@ -138,9 +138,9 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
               const isHighlighted = isActive || isThisHovered
               const isDimmed = anyHighlighted && !isHighlighted
               const linkClass = cn(
-                icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL,
+                icon ? `${LINK_CELL} gap-2` : LINK_CELL,
                 'transition-colors duration-200',
-                isDimmed && 'text-[#F6F6F6]/60'
+                isDimmed && 'text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)]'
               )
               const chevron = icon === 'chevron' && <NavChevron open={isActive} />
 
@@ -171,7 +171,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
 
                     <div
                       className={cn(
-                        '-mt-[2px] absolute top-full left-0 z-50',
+                        '-mt-0.5 absolute top-full left-0 z-50',
                         isActive
                           ? 'pointer-events-auto opacity-100'
                           : 'pointer-events-none opacity-0'
@@ -225,14 +225,14 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
 
           <div
             className={cn(
-              'hidden items-center gap-[8px] pr-[80px] pl-[20px] lg:flex',
+              'hidden items-center gap-2 pr-20 pl-5 lg:flex',
               isSessionPending && 'invisible'
             )}
           >
             {isAuthenticated ? (
               <Link
                 href='/workspace'
-                className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                 aria-label='Go to app'
               >
                 Go to App
@@ -241,14 +241,14 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
               <>
                 <Link
                   href='/login'
-                  className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+                  className='inline-flex h-[30px] items-center rounded-[5px] border border-[var(--landing-border-strong)] px-[9px] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
                   aria-label='Log in'
                 >
                   Log in
                 </Link>
                 <Link
                   href='/signup'
-                  className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                  className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-2.5 text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                   aria-label='Get started with Sim'
                 >
                   Get started
@@ -257,10 +257,10 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
             )}
           </div>
 
-          <div className='flex flex-1 items-center justify-end pr-[20px] lg:hidden'>
+          <div className='flex flex-1 items-center justify-end pr-5 lg:hidden'>
             <button
               type='button'
-              className='flex h-[32px] w-[32px] items-center justify-center rounded-[5px] transition-colors hover:bg-[#2A2A2A]'
+              className='flex h-[32px] w-[32px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--landing-bg-elevated)]'
               onClick={() => setMobileMenuOpen((prev) => !prev)}
               aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
               aria-expanded={mobileMenuOpen}
@@ -271,7 +271,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
 
           <div
             className={cn(
-              'fixed inset-x-0 top-[52px] bottom-0 z-50 flex flex-col overflow-y-auto bg-[#1C1C1C] font-[430] font-season text-[14px] transition-all duration-200 lg:hidden',
+              'fixed inset-x-0 top-[52px] bottom-0 z-50 flex flex-col overflow-y-auto bg-[var(--landing-bg)] font-[430] font-season text-sm transition-all duration-200 lg:hidden',
               mobileMenuOpen ? 'visible opacity-100' : 'invisible opacity-0'
             )}
           >
@@ -280,13 +280,13 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                 const href =
                   useHomeLinks && rawHref.startsWith('/#') ? `/?home${rawHref.slice(1)}` : rawHref
                 return (
-                  <li key={label} className='border-[#2A2A2A] border-b'>
+                  <li key={label} className='border-[var(--landing-border)] border-b'>
                     {external ? (
                       <a
                         href={href}
                         target='_blank'
                         rel='noopener noreferrer'
-                        className='flex items-center justify-between px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                        className='flex items-center justify-between px-5 py-3.5 text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
                         onClick={() => setMobileMenuOpen(false)}
                       >
                         {label}
@@ -295,7 +295,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                     ) : (
                       <Link
                         href={href}
-                        className='flex items-center px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                        className='flex items-center px-5 py-3.5 text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
                         onClick={() => setMobileMenuOpen(false)}
                       >
                         {label}
@@ -304,12 +304,12 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                   </li>
                 )
               })}
-              <li className='border-[#2A2A2A] border-b'>
+              <li className='border-[var(--landing-border)] border-b'>
                 <a
                   href='https://github.com/simstudioai/sim'
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='flex items-center gap-[8px] px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                  className='flex items-center gap-2 px-5 py-3.5 text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
                   onClick={() => setMobileMenuOpen(false)}
                 >
                   <GithubOutlineIcon className='h-[14px] w-[14px]' />
@@ -319,15 +319,12 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
             </ul>
 
             <div
-              className={cn(
-                'mt-auto flex flex-col gap-[10px] p-[20px]',
-                isSessionPending && 'invisible'
-              )}
+              className={cn('mt-auto flex flex-col gap-2.5 p-5', isSessionPending && 'invisible')}
             >
               {isAuthenticated ? (
                 <Link
                   href='/workspace'
-                  className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                  className='flex h-[32px] items-center justify-center rounded-[5px] border border-[var(--white)] bg-[var(--white)] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
                   onClick={() => setMobileMenuOpen(false)}
                   aria-label='Go to app'
                 >
@@ -337,7 +334,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                 <>
                   <Link
                     href='/login'
-                    className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#3d3d3d] text-[#ECECEC] text-[14px] transition-colors active:bg-[#2A2A2A]'
+                    className='flex h-[32px] items-center justify-center rounded-[5px] border border-[var(--landing-border-strong)] text-[14px] text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
                     onClick={() => setMobileMenuOpen(false)}
                     aria-label='Log in'
                   >
@@ -345,7 +342,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                   </Link>
                   <Link
                     href='/signup'
-                    className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                    className='flex h-[32px] items-center justify-center rounded-[5px] border border-[var(--white)] bg-[var(--white)] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
                     onClick={() => setMobileMenuOpen(false)}
                     aria-label='Get started with Sim'
                   >
@@ -432,7 +429,13 @@ function MobileMenuIcon({ open }: { open: boolean }) {
 
 function ExternalArrowIcon() {
   return (
-    <svg width='12' height='12' viewBox='0 0 12 12' fill='none' className='text-[#666]'>
+    <svg
+      width='12'
+      height='12'
+      viewBox='0 0 12 12'
+      fill='none'
+      className='text-[var(--landing-text-secondary)]'
+    >
       <path
         d='M3.5 2.5H9.5V8.5M9 3L3 9'
         stroke='currentColor'
diff --git a/apps/sim/app/(home)/components/pricing/pricing.tsx b/apps/sim/app/(home)/components/pricing/pricing.tsx
index de1a719d36..0c244a398e 100644
--- a/apps/sim/app/(home)/components/pricing/pricing.tsx
+++ b/apps/sim/app/(home)/components/pricing/pricing.tsx
@@ -107,21 +107,21 @@ function PricingCard({ tier }: PricingCardProps) {
 
   return (
     <article className='flex flex-1 flex-col' aria-labelledby={`${tier.id}-heading`}>
-      <div className='flex flex-1 flex-col gap-6 rounded-t-lg border border-[#E5E5E5] border-b-0 bg-white p-5'>
+      <div className='flex flex-1 flex-col gap-6 rounded-t-lg border border-[var(--landing-border-light)] border-b-0 bg-white p-5'>
         <div className='flex flex-col'>
           <h3
             id={`${tier.id}-heading`}
-            className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[100%] tracking-[-0.02em]'
+            className='font-[430] font-season text-[24px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em]'
           >
             {tier.name}
           </h3>
-          <p className='mt-2 min-h-[44px] font-[430] font-season text-[#5c5c5c] text-[14px] leading-[125%] tracking-[0.02em]'>
+          <p className='mt-2 min-h-[44px] font-[430] font-season text-[#5c5c5c] text-sm leading-[125%] tracking-[0.02em]'>
             {tier.description}
           </p>
-          <p className='mt-4 flex items-center gap-1.5 font-[430] font-season text-[#1C1C1C] text-[20px] leading-[100%] tracking-[-0.02em]'>
+          <p className='mt-4 flex items-center gap-1.5 font-[430] font-season text-[20px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em]'>
             {tier.price}
             {tier.billingPeriod && (
-              <span className='text-[#737373] text-[16px]'>{tier.billingPeriod}</span>
+              <span className='text-[#737373] text-md'>{tier.billingPeriod}</span>
             )}
           </p>
           <div className='mt-4'>
@@ -129,7 +129,7 @@ function PricingCard({ tier }: PricingCardProps) {
               <DemoRequestModal theme='light'>
                 <button
                   type='button'
-                  className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] bg-transparent px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:bg-[#F0F0F0]'
+                  className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-border-light)] bg-transparent px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text-dark)] transition-colors hover:bg-[var(--landing-bg-hover)]'
                 >
                   {tier.cta.label}
                 </button>
@@ -137,14 +137,14 @@ function PricingCard({ tier }: PricingCardProps) {
             ) : isPro ? (
               <Link
                 href={tier.cta.href || '/signup'}
-                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-2.5 font-[430] font-season text-[14px] text-white transition-colors hover:border-[var(--landing-border)] hover:bg-[var(--landing-bg-elevated)]'
               >
                 {tier.cta.label}
               </Link>
             ) : (
               <Link
                 href={tier.cta.href || '/signup'}
-                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:bg-[#F0F0F0]'
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-border-light)] px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text-dark)] transition-colors hover:bg-[var(--landing-bg-hover)]'
               >
                 {tier.cta.label}
               </Link>
@@ -156,7 +156,7 @@ function PricingCard({ tier }: PricingCardProps) {
           {tier.features.map((feature) => (
             <li key={feature} className='flex items-center gap-2'>
               <CheckIcon color='#404040' />
-              <span className='font-[400] font-season text-[#5c5c5c] text-[14px] leading-[125%] tracking-[0.02em]'>
+              <span className='font-[400] font-season text-[#5c5c5c] text-sm leading-[125%] tracking-[0.02em]'>
                 {feature}
               </span>
             </li>
@@ -187,9 +187,13 @@ function PricingCard({ tier }: PricingCardProps) {
  */
 export default function Pricing() {
   return (
-    <section id='pricing' aria-labelledby='pricing-heading' className='bg-[#F6F6F6]'>
-      <div className='px-4 pt-[60px] pb-[40px] sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
-        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
+    <section
+      id='pricing'
+      aria-labelledby='pricing-heading'
+      className='bg-[var(--landing-bg-section)]'
+    >
+      <div className='px-4 pt-[60px] pb-10 sm:px-8 sm:pt-20 sm:pb-0 md:px-20 md:pt-[100px]'>
+        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-5'>
           <Badge
             variant='blue'
             size='md'
@@ -201,7 +205,7 @@ export default function Pricing() {
 
           <h2
             id='pricing-heading'
-            className='font-[430] font-season text-[#1C1C1C] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+            className='text-balance font-[430] font-season text-[32px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
           >
             Pricing
           </h2>
diff --git a/apps/sim/app/(home)/components/templates/templates.tsx b/apps/sim/app/(home)/components/templates/templates.tsx
index f38d69aba5..c9aa7461a4 100644
--- a/apps/sim/app/(home)/components/templates/templates.tsx
+++ b/apps/sim/app/(home)/components/templates/templates.tsx
@@ -19,7 +19,7 @@ const LandingPreviewWorkflow = dynamic(
     ).then((mod) => mod.LandingPreviewWorkflow),
   {
     ssr: false,
-    loading: () => <div className='h-full w-full bg-[#1b1b1b]' />,
+    loading: () => <div className='h-full w-full bg-[var(--landing-bg)]' />,
   }
 )
 
@@ -337,7 +337,7 @@ function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
       }}
     >
       {Array.from({ length: cols * rows }, (_, i) => (
-        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[#2A2A2A]' />
+        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[var(--landing-bg-elevated)]' />
       ))}
     </div>
   )
@@ -412,7 +412,7 @@ export default function Templates() {
       ref={sectionRef}
       id='templates'
       aria-labelledby='templates-heading'
-      className='mt-[40px] mb-[80px]'
+      className='mt-10 mb-20'
     >
       <p className='sr-only'>
         Sim includes {TEMPLATE_WORKFLOWS.length} pre-built workflow templates covering OCR
@@ -422,9 +422,9 @@ export default function Templates() {
         customise it, and deploy in minutes.
       </p>
 
-      <div className='bg-[#1C1C1C]'>
+      <div className='bg-[var(--landing-bg)]'>
         <DotGrid
-          className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+          className='overflow-hidden border-[var(--landing-bg-elevated)] border-y bg-[var(--landing-bg)] p-1.5'
           cols={160}
           rows={1}
           gap={6}
@@ -449,8 +449,8 @@ export default function Templates() {
             </svg>
           </div>
 
-          <div className='px-[20px] pt-[60px] lg:px-[80px] lg:pt-[100px]'>
-            <div className='flex flex-col items-start gap-[20px]'>
+          <div className='px-5 pt-[60px] lg:px-20 lg:pt-[100px]'>
+            <div className='flex flex-col items-start gap-5'>
               <Badge
                 variant='blue'
                 size='md'
@@ -466,12 +466,12 @@ export default function Templates() {
 
               <h2
                 id='templates-heading'
-                className='font-[430] font-season text-[28px] text-white leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+                className='text-balance font-[430] font-season text-[28px] text-white leading-[100%] tracking-[-0.02em] lg:text-[40px]'
               >
                 Ship your agent in minutes
               </h2>
 
-              <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
+              <p className='font-[430] font-season text-[#F6F6F0]/50 text-base leading-[150%] tracking-[0.02em] lg:text-lg'>
                 Pre-built templates for every use case—pick one, swap{' '}
                 <br className='hidden lg:inline' />
                 models and tools to fit your stack, and deploy.
@@ -479,11 +479,11 @@ export default function Templates() {
             </div>
           </div>
 
-          <div className='mt-[40px] flex border-[#2A2A2A] border-y lg:mt-[73px]'>
+          <div className='mt-10 flex border-[var(--landing-bg-elevated)] border-y lg:mt-[73px]'>
             <div className='shrink-0'>
               <div className='h-full lg:hidden'>
                 <DotGrid
-                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-r p-[4px]'
+                  className='h-full w-[24px] overflow-hidden border-[var(--landing-bg-elevated)] border-r p-1'
                   cols={2}
                   rows={55}
                   gap={4}
@@ -491,7 +491,7 @@ export default function Templates() {
               </div>
               <div className='hidden h-full lg:block'>
                 <DotGrid
-                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-r p-[6px]'
+                  className='h-full w-[80px] overflow-hidden border-[var(--landing-bg-elevated)] border-r p-1.5'
                   cols={8}
                   rows={55}
                   gap={6}
@@ -503,7 +503,7 @@ export default function Templates() {
               <div
                 role='tablist'
                 aria-label='Workflow templates'
-                className='flex w-full shrink-0 flex-col border-[#2A2A2A] lg:w-[300px] lg:border-r'
+                className='flex w-full shrink-0 flex-col border-[var(--landing-bg-elevated)] lg:w-[300px] lg:border-r'
               >
                 {TEMPLATE_WORKFLOWS.map((workflow, index) => {
                   const isActive = index === activeIndex
@@ -521,7 +521,7 @@ export default function Templates() {
                           isActive
                             ? 'z-10'
                             : cn(
-                                'flex items-center px-[12px] py-[10px] hover:bg-[#232323]/50',
+                                'flex items-center px-3 py-2.5 hover:bg-[color-mix(in_srgb,var(--landing-bg-card)_50%,transparent)]',
                                 index < TEMPLATE_WORKFLOWS.length - 1 &&
                                   'shadow-[inset_0_-1px_0_0_#2A2A2A]'
                               )
@@ -543,8 +543,8 @@ export default function Templates() {
                                   className='absolute right-[-8px] bottom-0 left-2 h-2'
                                   style={buildBottomWallStyle(depth)}
                                 />
-                                <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
-                                  <span className='flex-1 font-[430] font-season text-[16px] text-white'>
+                                <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[var(--landing-bg-card)] px-3 py-2.5 shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
+                                  <span className='flex-1 font-[430] font-season text-md text-white'>
                                     {workflow.name}
                                   </span>
                                   <ChevronDown
@@ -556,7 +556,7 @@ export default function Templates() {
                             )
                           })()
                         ) : (
-                          <span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
+                          <span className='font-[430] font-season text-[#F6F6F0]/50 text-md'>
                             {workflow.name}
                           </span>
                         )}
@@ -571,19 +571,19 @@ export default function Templates() {
                             transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
                             className='overflow-hidden'
                           >
-                            <div className='aspect-[16/10] w-full border-[#2A2A2A] border-y bg-[#1b1b1b]'>
+                            <div className='aspect-[16/10] w-full border-[var(--landing-bg-elevated)] border-y bg-[var(--landing-bg)]'>
                               <LandingPreviewWorkflow
                                 workflow={workflow}
                                 animate
                                 fitViewOptions={{ padding: 0.15, maxZoom: 1.3 }}
                               />
                             </div>
-                            <div className='p-[12px]'>
+                            <div className='p-3'>
                               <button
                                 type='button'
                                 onClick={handleUseTemplate}
                                 disabled={isPreparingTemplate}
-                                className='inline-flex h-[32px] w-full cursor-pointer items-center justify-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] font-[430] font-season text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                                className='inline-flex h-[32px] w-full cursor-pointer items-center justify-center gap-1.5 rounded-[5px] border border-white bg-white font-[430] font-season text-black text-sm transition-colors active:bg-[#E0E0E0]'
                               >
                                 {isPreparingTemplate ? 'Preparing...' : 'Use template'}
                               </button>
@@ -614,7 +614,7 @@ export default function Templates() {
                   type='button'
                   onClick={handleUseTemplate}
                   disabled={isPreparingTemplate}
-                  className='group/cta absolute top-[16px] right-[16px] z-10 inline-flex h-[32px] cursor-pointer items-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                  className='group/cta absolute top-4 right-[16px] z-10 inline-flex h-[32px] cursor-pointer items-center gap-1.5 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-black text-sm transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                 >
                   {isPreparingTemplate ? 'Preparing...' : 'Use template'}
                   <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -642,7 +642,7 @@ export default function Templates() {
             <div className='shrink-0'>
               <div className='h-full lg:hidden'>
                 <DotGrid
-                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-l p-[4px]'
+                  className='h-full w-[24px] overflow-hidden border-[var(--landing-bg-elevated)] border-l p-1'
                   cols={2}
                   rows={55}
                   gap={4}
@@ -650,7 +650,7 @@ export default function Templates() {
               </div>
               <div className='hidden h-full lg:block'>
                 <DotGrid
-                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-l p-[6px]'
+                  className='h-full w-[80px] overflow-hidden border-[var(--landing-bg-elevated)] border-l p-1.5'
                   cols={8}
                   rows={55}
                   gap={6}
diff --git a/apps/sim/app/(home)/landing.tsx b/apps/sim/app/(home)/landing.tsx
index 9463afa4be..43a1d665a1 100644
--- a/apps/sim/app/(home)/landing.tsx
+++ b/apps/sim/app/(home)/landing.tsx
@@ -36,7 +36,9 @@ export default async function Landing() {
   const blogPosts = await getNavBlogPosts()
 
   return (
-    <div className={`${season.variable} ${martianMono.variable} min-h-screen bg-[#1C1C1C]`}>
+    <div
+      className={`${season.variable} ${martianMono.variable} min-h-screen bg-[var(--landing-bg)]`}
+    >
       <a
         href='#main-content'
         className='sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:font-medium focus:text-black focus:text-sm'
diff --git a/apps/sim/app/(landing)/blog/[slug]/back-link.tsx b/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
index 179223a0b8..d9b6874e68 100644
--- a/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
@@ -10,7 +10,7 @@ export function BackLink() {
   return (
     <Link
       href='/blog'
-      className='group flex items-center gap-1 text-[#999] text-sm hover:text-[#ECECEC]'
+      className='group flex items-center gap-1 text-[var(--landing-text-muted)] text-sm hover:text-[var(--landing-text)]'
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
diff --git a/apps/sim/app/(landing)/blog/[slug]/loading.tsx b/apps/sim/app/(landing)/blog/[slug]/loading.tsx
index 40352cabef..8d08751229 100644
--- a/apps/sim/app/(landing)/blog/[slug]/loading.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/loading.tsx
@@ -7,51 +7,51 @@ export default function BlogPostLoading() {
       <div className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
         {/* Back link */}
         <div className='mb-6'>
-          <Skeleton className='h-[16px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-[60px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
         </div>
         {/* Image + title row */}
         <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
           {/* Image */}
           <div className='w-full flex-shrink-0 md:w-[450px]'>
-            <Skeleton className='aspect-[450/360] w-full rounded-lg bg-[#2A2A2A]' />
+            <Skeleton className='aspect-[450/360] w-full rounded-lg bg-[var(--landing-bg-elevated)]' />
           </div>
           {/* Title + author */}
           <div className='flex flex-1 flex-col justify-between'>
             <div>
-              <Skeleton className='h-[48px] w-full rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='mt-[8px] h-[48px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[48px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='mt-2 h-[48px] w-[80%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
             </div>
             <div className='mt-4 flex items-center justify-between'>
               <div className='flex items-center gap-2'>
-                <Skeleton className='h-[24px] w-[24px] rounded-full bg-[#2A2A2A]' />
-                <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
+                <Skeleton className='h-[24px] w-[24px] rounded-full bg-[var(--landing-bg-elevated)]' />
+                <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
               </div>
-              <Skeleton className='h-[32px] w-[32px] rounded-[6px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[32px] w-[32px] rounded-[6px] bg-[var(--landing-bg-elevated)]' />
             </div>
           </div>
         </div>
         {/* Divider */}
-        <Skeleton className='mt-8 h-[1px] w-full bg-[#2A2A2A] sm:mt-12' />
+        <Skeleton className='mt-8 h-[1px] w-full bg-[var(--landing-bg-elevated)] sm:mt-12' />
         {/* Date + description */}
         <div className='flex flex-col gap-6 py-8 sm:flex-row sm:items-start sm:justify-between sm:gap-8 sm:py-10'>
-          <Skeleton className='h-[16px] w-[120px] flex-shrink-0 rounded-[4px] bg-[#2A2A2A]' />
-          <div className='flex-1 space-y-[8px]'>
-            <Skeleton className='h-[20px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[20px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-[120px] flex-shrink-0 rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <div className='flex-1 space-y-2'>
+            <Skeleton className='h-[20px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[20px] w-[70%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
         </div>
       </div>
       {/* Article body */}
       <div className='mx-auto max-w-[900px] px-6 pb-20 sm:px-8 md:px-12'>
-        <div className='space-y-[16px]'>
-          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[16px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[16px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
-          <Skeleton className='mt-[24px] h-[24px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[16px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[16px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
+        <div className='space-y-4'>
+          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[16px] w-[95%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[16px] w-[88%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='mt-6 h-[24px] w-[200px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[16px] w-[92%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[16px] w-[85%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
         </div>
       </div>
     </article>
diff --git a/apps/sim/app/(landing)/blog/[slug]/page.tsx b/apps/sim/app/(landing)/blog/[slug]/page.tsx
index d5ed263e2b..200d3bb0d4 100644
--- a/apps/sim/app/(landing)/blog/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/page.tsx
@@ -66,7 +66,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
           </div>
           <div className='flex flex-1 flex-col justify-between'>
             <h1
-              className='font-[500] text-[#ECECEC] text-[36px] leading-tight tracking-tight sm:text-[48px] md:text-[56px] lg:text-[64px]'
+              className='text-balance font-[500] text-[36px] text-[var(--landing-text)] leading-tight tracking-tight sm:text-[48px] md:text-[56px] lg:text-[64px]'
               itemProp='headline'
             >
               {post.title}
@@ -85,7 +85,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                       href={a?.url || '#'}
                       target='_blank'
                       rel='noopener noreferrer author'
-                      className='text-[#999] text-[14px] leading-[1.5] hover:text-[#ECECEC] sm:text-[16px]'
+                      className='text-[var(--landing-text-muted)] text-sm leading-[1.5] hover:text-[var(--landing-text)] sm:text-md'
                       itemProp='author'
                       itemScope
                       itemType='https://schema.org/Person'
@@ -99,11 +99,11 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             </div>
           </div>
         </div>
-        <hr className='mt-8 border-[#2A2A2A] border-t sm:mt-12' />
+        <hr className='mt-8 border-[var(--landing-bg-elevated)] border-t sm:mt-12' />
         <div className='flex flex-col gap-6 py-8 sm:flex-row sm:items-start sm:justify-between sm:gap-8 sm:py-10'>
           <div className='flex flex-shrink-0 items-center gap-4'>
             <time
-              className='block text-[#999] text-[14px] leading-[1.5] sm:text-[16px]'
+              className='block text-[var(--landing-text-muted)] text-sm leading-[1.5] sm:text-md'
               dateTime={post.date}
               itemProp='datePublished'
             >
@@ -116,7 +116,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             <meta itemProp='dateModified' content={post.updated ?? post.date} />
           </div>
           <div className='flex-1'>
-            <p className='m-0 block translate-y-[-4px] font-[400] text-[#999] text-[18px] leading-[1.5] sm:text-[20px] md:text-[26px]'>
+            <p className='m-0 block translate-y-[-4px] font-[400] text-[var(--landing-text-muted)] text-lg leading-[1.5] sm:text-[20px] md:text-[26px]'>
               {post.description}
             </p>
           </div>
@@ -124,18 +124,18 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       </header>
 
       <div className='mx-auto max-w-[900px] px-6 pb-20 sm:px-8 md:px-12' itemProp='articleBody'>
-        <div className='prose prose-lg prose-invert max-w-none prose-blockquote:border-[#3d3d3d] prose-hr:border-[#2A2A2A] prose-a:text-[#ECECEC] prose-blockquote:text-[#999] prose-code:text-[#ECECEC] prose-headings:text-[#ECECEC] prose-li:text-[#999] prose-p:text-[#999] prose-strong:text-[#ECECEC]'>
+        <div className='prose prose-lg prose-invert max-w-none prose-blockquote:border-[var(--landing-border-strong)] prose-hr:border-[var(--landing-bg-elevated)] prose-a:text-[var(--landing-text)] prose-blockquote:text-[var(--landing-text-muted)] prose-code:text-[var(--landing-text)] prose-headings:text-[var(--landing-text)] prose-li:text-[var(--landing-text-muted)] prose-p:text-[var(--landing-text-muted)] prose-strong:text-[var(--landing-text)]'>
           <Article />
           {post.faq && post.faq.length > 0 ? <FAQ items={post.faq} /> : null}
         </div>
       </div>
       {related.length > 0 && (
         <div className='mx-auto max-w-[900px] px-6 pb-24 sm:px-8 md:px-12'>
-          <h2 className='mb-4 font-[500] text-[#ECECEC] text-[24px]'>Related posts</h2>
+          <h2 className='mb-4 font-[500] text-[24px] text-[var(--landing-text)]'>Related posts</h2>
           <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
             {related.map((p) => (
               <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
-                <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
+                <div className='overflow-hidden rounded-lg border border-[var(--landing-bg-elevated)]'>
                   <Image
                     src={p.ogImage}
                     alt={p.title}
@@ -147,14 +147,16 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                     unoptimized
                   />
                   <div className='p-3'>
-                    <div className='mb-1 text-[#999] text-xs'>
+                    <div className='mb-1 text-[var(--landing-text-muted)] text-xs'>
                       {new Date(p.date).toLocaleDateString('en-US', {
                         month: 'short',
                         day: 'numeric',
                         year: 'numeric',
                       })}
                     </div>
-                    <div className='font-[500] text-[#ECECEC] text-sm leading-tight'>{p.title}</div>
+                    <div className='font-[500] text-[var(--landing-text)] text-sm leading-tight'>
+                      {p.title}
+                    </div>
                   </div>
                 </div>
               </Link>
diff --git a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
index 4950d1ecab..f81d6fc0a2 100644
--- a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
@@ -41,7 +41,7 @@ export function ShareButton({ url, title }: ShareButtonProps) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button
-          className='flex items-center gap-1.5 text-[#999] text-sm hover:text-[#ECECEC]'
+          className='flex items-center gap-1.5 text-[var(--landing-text-muted)] text-sm hover:text-[var(--landing-text)]'
           aria-label='Share this post'
         >
           <Share2 className='h-4 w-4' />
diff --git a/apps/sim/app/(landing)/blog/authors/[id]/loading.tsx b/apps/sim/app/(landing)/blog/authors/[id]/loading.tsx
index 113e93c841..09490935cb 100644
--- a/apps/sim/app/(landing)/blog/authors/[id]/loading.tsx
+++ b/apps/sim/app/(landing)/blog/authors/[id]/loading.tsx
@@ -6,16 +6,16 @@ export default function AuthorLoading() {
   return (
     <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
       <div className='mb-6 flex items-center gap-3'>
-        <Skeleton className='h-[40px] w-[40px] rounded-full bg-[#2A2A2A]' />
-        <Skeleton className='h-[32px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
+        <Skeleton className='h-[40px] w-[40px] rounded-full bg-[var(--landing-bg-elevated)]' />
+        <Skeleton className='h-[32px] w-[160px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
       </div>
       <div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
         {Array.from({ length: SKELETON_POST_COUNT }).map((_, i) => (
-          <div key={i} className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
-            <Skeleton className='h-[160px] w-full rounded-none bg-[#2A2A2A]' />
+          <div key={i} className='overflow-hidden rounded-lg border border-[var(--landing-border)]'>
+            <Skeleton className='h-[160px] w-full rounded-none bg-[var(--landing-bg-elevated)]' />
             <div className='p-3'>
-              <Skeleton className='mb-1 h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[14px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='mb-1 h-[12px] w-[80px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[14px] w-[200px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
             </div>
           </div>
         ))}
diff --git a/apps/sim/app/(landing)/blog/authors/[id]/page.tsx b/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
index 9cb330c396..5d25bf03f4 100644
--- a/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
+++ b/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
@@ -23,7 +23,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
   if (!author) {
     return (
       <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px]'>Author not found</h1>
+        <h1 className='font-[500] text-[32px] text-[var(--landing-text)]'>Author not found</h1>
       </main>
     )
   }
@@ -52,12 +52,14 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
             unoptimized
           />
         ) : null}
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] leading-tight'>{author.name}</h1>
+        <h1 className='font-[500] text-[32px] text-[var(--landing-text)] leading-tight'>
+          {author.name}
+        </h1>
       </div>
       <div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
         {posts.map((p) => (
           <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
-            <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
+            <div className='overflow-hidden rounded-lg border border-[var(--landing-bg-elevated)]'>
               <Image
                 src={p.ogImage}
                 alt={p.title}
@@ -67,14 +69,16 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
                 unoptimized
               />
               <div className='p-3'>
-                <div className='mb-1 text-[#999] text-xs'>
+                <div className='mb-1 text-[var(--landing-text-muted)] text-xs'>
                   {new Date(p.date).toLocaleDateString('en-US', {
                     month: 'short',
                     day: 'numeric',
                     year: 'numeric',
                   })}
                 </div>
-                <div className='font-[500] text-[#ECECEC] text-sm leading-tight'>{p.title}</div>
+                <div className='font-[500] text-[var(--landing-text)] text-sm leading-tight'>
+                  {p.title}
+                </div>
               </div>
             </div>
           </Link>
diff --git a/apps/sim/app/(landing)/blog/layout.tsx b/apps/sim/app/(landing)/blog/layout.tsx
index 59f7adaf70..b200ed5ead 100644
--- a/apps/sim/app/(landing)/blog/layout.tsx
+++ b/apps/sim/app/(landing)/blog/layout.tsx
@@ -26,7 +26,7 @@ export default async function StudioLayout({ children }: { children: React.React
   }
 
   return (
-    <div className='flex min-h-screen flex-col bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <div className='flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}
diff --git a/apps/sim/app/(landing)/blog/loading.tsx b/apps/sim/app/(landing)/blog/loading.tsx
index 5fabbd4e79..adedd43b08 100644
--- a/apps/sim/app/(landing)/blog/loading.tsx
+++ b/apps/sim/app/(landing)/blog/loading.tsx
@@ -5,20 +5,23 @@ const SKELETON_CARD_COUNT = 6
 export default function BlogLoading() {
   return (
     <main className='mx-auto max-w-[1200px] px-6 py-12 sm:px-8 md:px-12'>
-      <Skeleton className='h-[48px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
-      <Skeleton className='mt-3 h-[18px] w-[420px] rounded-[4px] bg-[#2A2A2A]' />
+      <Skeleton className='h-[48px] w-[100px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+      <Skeleton className='mt-3 h-[18px] w-[420px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
       <div className='mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
         {Array.from({ length: SKELETON_CARD_COUNT }).map((_, i) => (
-          <div key={i} className='flex flex-col overflow-hidden rounded-xl border border-[#2A2A2A]'>
-            <Skeleton className='aspect-video w-full rounded-none bg-[#2A2A2A]' />
+          <div
+            key={i}
+            className='flex flex-col overflow-hidden rounded-xl border border-[var(--landing-border)]'
+          >
+            <Skeleton className='aspect-video w-full rounded-none bg-[var(--landing-bg-elevated)]' />
             <div className='flex flex-1 flex-col p-4'>
-              <Skeleton className='mb-2 h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='mb-1 h-[20px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='mb-3 h-[14px] w-full rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[14px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='mb-2 h-[12px] w-[80px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='mb-1 h-[20px] w-[85%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='mb-3 h-[14px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[14px] w-[70%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
               <div className='mt-3 flex items-center gap-2'>
-                <Skeleton className='h-[16px] w-[16px] rounded-full bg-[#2A2A2A]' />
-                <Skeleton className='h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
+                <Skeleton className='h-[16px] w-[16px] rounded-full bg-[var(--landing-bg-elevated)]' />
+                <Skeleton className='h-[12px] w-[80px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
               </div>
             </div>
           </div>
diff --git a/apps/sim/app/(landing)/blog/page.tsx b/apps/sim/app/(landing)/blog/page.tsx
index 359464e320..b385bbbf9f 100644
--- a/apps/sim/app/(landing)/blog/page.tsx
+++ b/apps/sim/app/(landing)/blog/page.tsx
@@ -50,10 +50,10 @@ export default async function BlogIndex({
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(blogJsonLd) }}
       />
-      <h1 className='mb-3 font-[500] text-[#ECECEC] text-[40px] leading-tight sm:text-[56px]'>
+      <h1 className='mb-3 text-balance font-[500] text-[40px] text-[var(--landing-text)] leading-tight sm:text-[56px]'>
         Blog
       </h1>
-      <p className='mb-10 text-[#999] text-[18px]'>
+      <p className='mb-10 text-[var(--landing-text-muted)] text-lg'>
         Announcements, insights, and guides for building AI agent workflows.
       </p>
 
@@ -75,18 +75,18 @@ export default async function BlogIndex({
           {pageNum > 1 && (
             <Link
               href={`/blog?page=${pageNum - 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
-              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+              className='rounded-[5px] border border-[var(--landing-border-strong)] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
             >
               Previous
             </Link>
           )}
-          <span className='text-[#999] text-sm'>
+          <span className='text-[var(--landing-text-muted)] text-sm'>
             Page {pageNum} of {totalPages}
           </span>
           {pageNum < totalPages && (
             <Link
               href={`/blog?page=${pageNum + 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
-              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+              className='rounded-[5px] border border-[var(--landing-border-strong)] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
             >
               Next
             </Link>
diff --git a/apps/sim/app/(landing)/blog/post-grid.tsx b/apps/sim/app/(landing)/blog/post-grid.tsx
index e9889dd9b3..0ba8492c77 100644
--- a/apps/sim/app/(landing)/blog/post-grid.tsx
+++ b/apps/sim/app/(landing)/blog/post-grid.tsx
@@ -25,7 +25,7 @@ export function PostGrid({ posts }: { posts: Post[] }) {
     <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
       {posts.map((p, index) => (
         <Link key={p.slug} href={`/blog/${p.slug}`} className='group flex flex-col'>
-          <div className='flex h-full flex-col overflow-hidden rounded-xl border border-[#2A2A2A] transition-colors duration-300 hover:border-[#3d3d3d]'>
+          <div className='flex h-full flex-col overflow-hidden rounded-xl border border-[var(--landing-bg-elevated)] transition-colors duration-300 hover:border-[var(--landing-border-strong)]'>
             {/* Image container with fixed aspect ratio to prevent layout shift */}
             <div className='relative aspect-video w-full overflow-hidden'>
               <Image
@@ -40,29 +40,33 @@ export function PostGrid({ posts }: { posts: Post[] }) {
               />
             </div>
             <div className='flex flex-1 flex-col p-4'>
-              <div className='mb-2 text-[#999] text-xs'>
+              <div className='mb-2 text-[var(--landing-text-muted)] text-xs'>
                 {new Date(p.date).toLocaleDateString('en-US', {
                   month: 'short',
                   day: 'numeric',
                   year: 'numeric',
                 })}
               </div>
-              <h3 className='mb-1 font-[500] text-[#ECECEC] text-lg leading-tight'>{p.title}</h3>
-              <p className='mb-3 line-clamp-3 flex-1 text-[#999] text-sm'>{p.description}</p>
+              <h3 className='mb-1 font-[500] text-[var(--landing-text)] text-lg leading-tight'>
+                {p.title}
+              </h3>
+              <p className='mb-3 line-clamp-3 flex-1 text-[var(--landing-text-muted)] text-sm'>
+                {p.description}
+              </p>
               <div className='flex items-center gap-2'>
                 <div className='-space-x-1.5 flex'>
                   {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
                     .slice(0, 3)
                     .map((author, idx) => (
-                      <Avatar key={idx} className='size-4 border border-[#1C1C1C]'>
+                      <Avatar key={idx} className='size-4 border border-[var(--landing-text)]'>
                         <AvatarImage src={author?.avatarUrl} alt={author?.name} />
-                        <AvatarFallback className='border border-[#1C1C1C] bg-[#2A2A2A] text-[#999] text-[10px]'>
+                        <AvatarFallback className='border border-[var(--landing-text)] bg-[var(--landing-bg-elevated)] text-[var(--landing-text-muted)] text-micro'>
                           {author?.name.slice(0, 2)}
                         </AvatarFallback>
                       </Avatar>
                     ))}
                 </div>
-                <span className='text-[#999] text-xs'>
+                <span className='text-[var(--landing-text-muted)] text-xs'>
                   {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
                     .slice(0, 2)
                     .map((a) => a?.name)
diff --git a/apps/sim/app/(landing)/blog/tags/loading.tsx b/apps/sim/app/(landing)/blog/tags/loading.tsx
index 6c395b3add..9d47cdc806 100644
--- a/apps/sim/app/(landing)/blog/tags/loading.tsx
+++ b/apps/sim/app/(landing)/blog/tags/loading.tsx
@@ -5,12 +5,12 @@ const SKELETON_TAG_COUNT = 12
 export default function TagsLoading() {
   return (
     <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
-      <Skeleton className='mb-6 h-[32px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
+      <Skeleton className='mb-6 h-[32px] w-[200px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
       <div className='flex flex-wrap gap-3'>
         {Array.from({ length: SKELETON_TAG_COUNT }).map((_, i) => (
           <Skeleton
             key={i}
-            className='h-[30px] rounded-full bg-[#2A2A2A]'
+            className='h-[30px] rounded-full bg-[var(--landing-bg-elevated)]'
             style={{ width: `${60 + (i % 4) * 24}px` }}
           />
         ))}
diff --git a/apps/sim/app/(landing)/blog/tags/page.tsx b/apps/sim/app/(landing)/blog/tags/page.tsx
index a36ca97fd0..a1be664407 100644
--- a/apps/sim/app/(landing)/blog/tags/page.tsx
+++ b/apps/sim/app/(landing)/blog/tags/page.tsx
@@ -10,11 +10,13 @@ export default async function TagsIndex() {
   const tags = await getAllTags()
   return (
     <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
-      <h1 className='mb-6 font-[500] text-[#ECECEC] text-[32px] leading-tight'>Browse by tag</h1>
+      <h1 className='mb-6 font-[500] text-[32px] text-[var(--landing-text)] leading-tight'>
+        Browse by tag
+      </h1>
       <div className='flex flex-wrap gap-3'>
         <Link
           href='/blog'
-          className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+          className='rounded-full border border-[var(--landing-border-strong)] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
         >
           All
         </Link>
@@ -22,7 +24,7 @@ export default async function TagsIndex() {
           <Link
             key={t.tag}
             href={`/blog?tag=${encodeURIComponent(t.tag)}`}
-            className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+            className='rounded-full border border-[var(--landing-border-strong)] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
           >
             {t.tag} ({t.count})
           </Link>
diff --git a/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx b/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx
index 14872b4930..82b484d179 100644
--- a/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx
@@ -4,7 +4,7 @@ import { HIPAABadgeIcon } from '@/components/icons'
 
 export default function ComplianceBadges() {
   return (
-    <div className='mt-[6px] flex items-center gap-[12px]'>
+    <div className='mt-1.5 flex items-center gap-3'>
       {/* SOC2 badge */}
       <Link
         href='https://app.vanta.com/sim.ai/trust/v35ia0jil4l7dteqjgaktn'
diff --git a/apps/sim/app/(landing)/components/footer/components/social-links.tsx b/apps/sim/app/(landing)/components/footer/components/social-links.tsx
index ccc6ef8d70..2205c2d390 100644
--- a/apps/sim/app/(landing)/components/footer/components/social-links.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/social-links.tsx
@@ -2,12 +2,12 @@ import { DiscordIcon, GithubIcon, LinkedInIcon, xIcon as XIcon } from '@/compone
 
 export default function SocialLinks() {
   return (
-    <div className='flex items-center gap-[12px]'>
+    <div className='flex items-center gap-3'>
       <a
         href='https://discord.gg/Hr4UWYEcTT'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='Discord'
       >
         <DiscordIcon className='h-[20px] w-[20px]' aria-hidden='true' />
@@ -16,7 +16,7 @@ export default function SocialLinks() {
         href='https://x.com/simdotai'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='X (Twitter)'
       >
         <XIcon className='h-[18px] w-[18px]' aria-hidden='true' />
@@ -25,7 +25,7 @@ export default function SocialLinks() {
         href='https://www.linkedin.com/company/simstudioai/'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='LinkedIn'
       >
         <LinkedInIcon className='h-[18px] w-[18px]' aria-hidden='true' />
@@ -34,7 +34,7 @@ export default function SocialLinks() {
         href='https://github.com/simstudioai/sim'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='GitHub'
       >
         <GithubIcon className='h-[20px] w-[20px]' aria-hidden='true' />
diff --git a/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx b/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx
index 36beae40a6..046b652b9a 100644
--- a/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx
@@ -36,8 +36,8 @@ export function StatusDotIcon({ status, className, ...props }: StatusDotIconProp
 
 const STATUS_COLORS: Record<StatusType, string> = {
   operational: 'text-[#10B981] hover:text-[#059669]',
-  degraded: 'text-[#F59E0B] hover:text-[#D97706]',
-  outage: 'text-[#EF4444] hover:text-[#DC2626]',
+  degraded: 'text-[var(--caution)] hover:text-[#D97706]',
+  outage: 'text-[var(--text-error)] hover:text-[var(--error)]',
   maintenance: 'text-[#3B82F6] hover:text-[#2563EB]',
   loading: 'text-muted-foreground hover:text-foreground',
   error: 'text-muted-foreground hover:text-foreground',
@@ -59,7 +59,7 @@ export default function StatusIndicator() {
       href={statusUrl}
       target='_blank'
       rel='noopener noreferrer'
-      className={`flex min-w-[165px] items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
+      className={`flex min-w-[165px] items-center gap-1.5 whitespace-nowrap text-caption transition-colors ${STATUS_COLORS[status]}`}
       aria-label={`System status: ${message}`}
     >
       <StatusDotIcon status={status} className='h-[6px] w-[6px]' aria-hidden='true' />
diff --git a/apps/sim/app/(landing)/components/footer/footer.tsx b/apps/sim/app/(landing)/components/footer/footer.tsx
index 9ed8d03c84..a77cd0cd15 100644
--- a/apps/sim/app/(landing)/components/footer/footer.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer.tsx
@@ -17,13 +17,13 @@ export default function Footer({ fullWidth = false }: FooterProps) {
       <div
         className={
           fullWidth
-            ? 'px-4 pt-[40px] pb-[40px] sm:px-4 sm:pt-[34px] sm:pb-[340px]'
-            : 'px-4 pt-[40px] pb-[40px] sm:px-[50px] sm:pt-[34px] sm:pb-[340px]'
+            ? 'px-4 pt-10 pb-10 sm:px-4 sm:pt-[34px] sm:pb-[340px]'
+            : 'px-4 pt-10 pb-10 sm:px-[50px] sm:pt-[34px] sm:pb-[340px]'
         }
       >
-        <div className={`flex gap-[80px] ${fullWidth ? 'justify-center' : ''}`}>
+        <div className={`flex gap-20 ${fullWidth ? 'justify-center' : ''}`}>
           {/* Logo and social links */}
-          <div className='flex flex-col gap-[24px]'>
+          <div className='flex flex-col gap-6'>
             <Logo />
             <SocialLinks />
             <ComplianceBadges />
@@ -32,19 +32,19 @@ export default function Footer({ fullWidth = false }: FooterProps) {
 
           {/* Links section */}
           <div>
-            <h2 className='mb-[16px] font-medium text-[14px] text-foreground'>More Sim</h2>
-            <div className='flex flex-col gap-[12px]'>
+            <h2 className='mb-4 font-medium text-foreground text-sm'>More Sim</h2>
+            <div className='flex flex-col gap-3'>
               <Link
                 href='https://docs.sim.ai'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Docs
               </Link>
               <Link
                 href='#pricing'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Pricing
               </Link>
@@ -52,19 +52,19 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='https://form.typeform.com/to/jqCO12pF'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Enterprise
               </Link>
               <Link
                 href='/blog'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Blog
               </Link>
               <Link
                 href='/changelog'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Changelog
               </Link>
@@ -72,7 +72,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='https://status.sim.ai'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Status
               </Link>
@@ -80,7 +80,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='https://jobs.ashbyhq.com/sim'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Careers
               </a>
@@ -88,7 +88,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='/privacy'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Privacy Policy
               </Link>
@@ -96,7 +96,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='/terms'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Terms of Service
               </Link>
@@ -105,15 +105,15 @@ export default function Footer({ fullWidth = false }: FooterProps) {
 
           {/* Blocks section */}
           <div className='hidden sm:block'>
-            <h2 className='mb-[16px] font-medium text-[14px] text-foreground'>Blocks</h2>
-            <div className='flex flex-col gap-[12px]'>
+            <h2 className='mb-4 font-medium text-foreground text-sm'>Blocks</h2>
+            <div className='flex flex-col gap-3'>
               {FOOTER_BLOCKS.map((block) => (
                 <Link
                   key={block}
                   href={`https://docs.sim.ai/blocks/${block.toLowerCase().replaceAll(' ', '-')}`}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                  className='text-muted-foreground text-sm transition-colors hover:text-foreground'
                 >
                   {block}
                 </Link>
@@ -123,24 +123,24 @@ export default function Footer({ fullWidth = false }: FooterProps) {
 
           {/* Tools section - split into columns */}
           <div className='hidden sm:block'>
-            <h2 className='mb-[16px] font-medium text-[14px] text-foreground'>Tools</h2>
-            <div className='flex gap-[80px]'>
+            <h2 className='mb-4 font-medium text-foreground text-sm'>Tools</h2>
+            <div className='flex gap-20'>
               {/* First column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(0, Math.ceil(FOOTER_TOOLS.length / 4)).map((tool) => (
                   <Link
                     key={tool}
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
                 ))}
               </div>
               {/* Second column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(
                   Math.ceil(FOOTER_TOOLS.length / 4),
                   Math.ceil((FOOTER_TOOLS.length * 2) / 4)
@@ -150,14 +150,14 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
                 ))}
               </div>
               {/* Third column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(
                   Math.ceil((FOOTER_TOOLS.length * 2) / 4),
                   Math.ceil((FOOTER_TOOLS.length * 3) / 4)
@@ -167,21 +167,21 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
                 ))}
               </div>
               {/* Fourth column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(Math.ceil((FOOTER_TOOLS.length * 3) / 4)).map((tool) => (
                   <Link
                     key={tool}
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
diff --git a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
index c8e523e2f8..fd58b46f71 100644
--- a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
@@ -27,8 +27,8 @@ export function IconButton({
       onMouseEnter={onMouseEnter}
       className={`flex items-center justify-center rounded-xl border p-2 outline-none transition-all duration-300 ${
         isAutoHovered
-          ? 'border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-          : 'border-transparent hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+          ? 'border-[#454545] shadow-subtle'
+          : 'border-transparent hover:border-[#454545] hover:shadow-subtle'
       }`}
       style={style}
     >
diff --git a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx
index 78f1884478..df1cf0462c 100644
--- a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx
@@ -44,20 +44,20 @@ export const LandingBlock = React.memo(function LandingBlock({
 
   return (
     <div
-      className={`z-10 flex w-[250px] flex-col rounded-[8px] border border-[#E5E5E5] bg-white ${className ?? ''}`}
+      className={`z-10 flex w-[250px] flex-col rounded-lg border border-[var(--landing-border-light)] bg-white ${className ?? ''}`}
     >
       {/* Header - matches workflow-block.tsx header styling */}
       <div
-        className={`flex items-center justify-between p-[8px] ${hasContentBelowHeader ? 'border-[#E5E5E5] border-b' : ''}`}
+        className={`flex items-center justify-between p-2 ${hasContentBelowHeader ? 'border-[var(--landing-border-light)] border-b' : ''}`}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2.5'>
           <div
-            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
             style={{ background: color as string }}
           >
             {icon}
           </div>
-          <span className='truncate font-medium text-[#171717] text-[16px]' title={name}>
+          <span className='truncate font-medium text-[#171717] text-md' title={name}>
             {name}
           </span>
         </div>
@@ -65,7 +65,7 @@ export const LandingBlock = React.memo(function LandingBlock({
 
       {/* Content - SubBlock Rows matching workflow-block.tsx */}
       {hasContentBelowHeader && (
-        <div className='flex flex-col gap-[8px] p-[8px]'>
+        <div className='flex flex-col gap-2 p-2'>
           {tags.map((tag) => (
             <SubBlockRow key={tag.label} icon={tag.icon} label={tag.label} />
           ))}
diff --git a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
index 655a8b3a9c..8dcefe126e 100644
--- a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
@@ -30,15 +30,12 @@ export const SubBlockRow = React.memo(function SubBlockRow({ label, value }: Sub
     : [label, value]
 
   return (
-    <div className='flex items-center gap-[8px]'>
-      <span className='min-w-0 truncate text-[#888888] text-[14px] capitalize' title={title}>
+    <div className='flex items-center gap-2'>
+      <span className='min-w-0 truncate text-[#888888] text-sm capitalize' title={title}>
         {title}
       </span>
       {displayValue && (
-        <span
-          className='flex-1 truncate text-right text-[#171717] text-[14px]'
-          title={displayValue}
-        >
+        <span className='flex-1 truncate text-right text-[#171717] text-sm' title={displayValue}>
           {displayValue}
         </span>
       )}
diff --git a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx
index f3bcd0f529..07513f2e10 100644
--- a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx
@@ -128,7 +128,7 @@ export function LandingCanvas({
       {/* <button
         type='button'
         aria-label='Use template'
-        className='absolute top-[24px] left-[50px] z-20 inline-flex items-center justify-center rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-1.5 text-sm text-white shadow-[inset_0_1.25px_2.5px_0_#9B77FF] transition-all duration-200'
+        className='absolute top-6 left-[50px] z-20 inline-flex items-center justify-center rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-1.5 text-sm text-white shadow-brand-inset transition-all duration-200'
         onClick={() => {
           // Template usage logic will be implemented here
         }}
diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
index a3674b2146..de94d6ff8a 100644
--- a/apps/sim/app/(landing)/components/hero/hero.tsx
+++ b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -363,20 +363,20 @@ export default function Hero() {
   return (
     <section
       id='hero'
-      className='flex w-full flex-col items-center justify-center pt-[36px] sm:pt-[80px]'
+      className='flex w-full flex-col items-center justify-center pt-9 sm:pt-20'
       aria-labelledby='hero-heading'
     >
       <h1
         id='hero-heading'
-        className='px-4 text-center font-medium text-[36px] leading-none tracking-tight sm:px-0 sm:text-[74px]'
+        className='text-balance px-4 text-center font-medium text-[36px] leading-none tracking-tight sm:px-0 sm:text-[74px]'
       >
         Workflows for LLMs
       </h1>
-      <p className='px-4 pt-[6px] text-center text-[18px] opacity-70 sm:px-0 sm:pt-[10px] sm:text-[22px]'>
+      <p className='px-4 pt-1.5 text-center text-lg opacity-70 sm:px-0 sm:pt-2.5 sm:text-[22px]'>
         Build and deploy AI agent workflows
       </p>
       <div
-        className='flex items-center justify-center gap-[2px] pt-[18px] sm:pt-[32px]'
+        className='flex items-center justify-center gap-0.5 pt-4.5 sm:pt-8'
         onMouseEnter={handleIconContainerMouseEnter}
         onMouseLeave={handleIconContainerMouseLeave}
       >
@@ -397,7 +397,7 @@ export default function Hero() {
           )
         })}
       </div>
-      <div className='flex w-full items-center justify-center px-4 pt-[8px] sm:px-8 sm:pt-[12px] md:px-[50px]'>
+      <div className='flex w-full items-center justify-center px-4 pt-2 sm:px-8 sm:pt-3 md:px-[50px]'>
         <div className='relative w-full sm:w-[640px]'>
           <label htmlFor='agent-description' className='sr-only'>
             Describe the AI agent you want to build
@@ -424,7 +424,7 @@ export default function Hero() {
             key={isEmpty ? 'empty' : 'filled'}
             type='button'
             aria-label='Submit description'
-            className='absolute right-2.5 bottom-4 flex h-[30px] w-[30px] items-center justify-center transition-all duration-200 sm:right-[11px] sm:bottom-[16px] sm:h-[34px] sm:w-[34px]'
+            className='absolute right-2.5 bottom-4 flex h-[30px] w-[30px] items-center justify-center transition-all duration-200 sm:right-[11px] sm:bottom-4 sm:h-[34px] sm:w-[34px]'
             disabled={isEmpty}
             onClick={handleSubmit}
             style={{
diff --git a/apps/sim/app/(landing)/components/integrations/integrations.tsx b/apps/sim/app/(landing)/components/integrations/integrations.tsx
index 34e2c9bfba..5084e4d16f 100644
--- a/apps/sim/app/(landing)/components/integrations/integrations.tsx
+++ b/apps/sim/app/(landing)/components/integrations/integrations.tsx
@@ -93,7 +93,7 @@ function TickerRow({ direction, offset, showOdd, icons }: TickerRowProps) {
   return (
     <div className='relative h-[88px] w-full overflow-hidden'>
       <div
-        className={`absolute flex items-center gap-[16px] ${
+        className={`absolute flex items-center gap-4 ${
           direction === 'left' ? 'animate-slide-left' : 'animate-slide-right'
         }`}
         style={{
@@ -121,21 +121,21 @@ export default function Integrations() {
   return (
     <section
       id='integrations'
-      className='flex flex-col pt-[40px] pb-[27px] sm:pt-[24px]'
+      className='flex flex-col pt-10 pb-[27px] sm:pt-6'
       aria-labelledby='integrations-heading'
     >
       <h2
         id='integrations-heading'
-        className='mb-[4px] px-4 font-medium text-[28px] text-foreground tracking-tight sm:pl-[50px]'
+        className='mb-1 px-4 font-medium text-[28px] text-foreground tracking-tight sm:pl-[50px]'
       >
         Integrations
       </h2>
-      <p className='mb-[24px] px-4 text-[#515151] text-[18px] sm:pl-[50px]'>
+      <p className='mb-6 px-4 text-[#515151] text-lg sm:pl-[50px]'>
         Immediately connect to 100+ models and apps
       </p>
 
       {/* Sliding tickers */}
-      <div className='flex w-full flex-col sm:px-[12px]'>
+      <div className='flex w-full flex-col sm:px-3'>
         <TickerRow direction='left' offset={0} showOdd={false} icons={modelProviderIcons} />
         <TickerRow direction='right' offset={0.5} showOdd={true} icons={communicationIcons} />
         <TickerRow direction='left' offset={1} showOdd={false} icons={dataStorageIcons} />
diff --git a/apps/sim/app/(landing)/components/landing-pricing/components/pricing-card.tsx b/apps/sim/app/(landing)/components/landing-pricing/components/pricing-card.tsx
index e20a2ce462..3fb9b7c282 100644
--- a/apps/sim/app/(landing)/components/landing-pricing/components/pricing-card.tsx
+++ b/apps/sim/app/(landing)/components/landing-pricing/components/pricing-card.tsx
@@ -159,7 +159,7 @@ function PricingCard({
             </span>
           </div>
 
-          <ul className='mb-[2px] space-y-3'>
+          <ul className='mb-0.5 space-y-3'>
             {tier.features.map((feature, idx) => (
               <li key={idx} className='flex items-start gap-2'>
                 <feature.icon
@@ -182,7 +182,7 @@ function PricingCard({
               onClick={handleCtaClick}
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
-              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#E8E8E8] bg-gradient-to-b from-[#F8F8F8] to-white px-3 py-[6px] font-medium text-[#6F3DFA] text-[14px] shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.9)] transition-all'
+              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#E8E8E8] bg-gradient-to-b from-[#F8F8F8] to-white px-3 py-1.5 font-medium text-[#6F3DFA] text-[14px] shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.9)] transition-all'
             >
               <span className='flex items-center gap-1'>
                 {tier.ctaText}
@@ -200,7 +200,7 @@ function PricingCard({
               onClick={handleCtaClick}
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
-              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-[6px] font-medium text-[14px] text-white shadow-[inset_0_1.25px_2.5px_0_#9B77FF] transition-all'
+              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-1.5 font-medium text-[14px] text-white shadow-[inset_0_1.25px_2.5px_0_#9B77FF] transition-all'
             >
               <span className='flex items-center gap-1'>
                 {tier.ctaText}
diff --git a/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx b/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx
index 3ef4acc7bf..1fd769773f 100644
--- a/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx
+++ b/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx
@@ -5,7 +5,7 @@ import { PricingGrid } from '@/app/(landing)/components/landing-pricing/componen
  */
 export default function LandingPricing() {
   return (
-    <section id='pricing' className='px-4 pt-[23px] sm:px-0 sm:pt-[4px]' aria-label='Pricing plans'>
+    <section id='pricing' className='px-4 pt-[23px] sm:px-0 sm:pt-1' aria-label='Pricing plans'>
       <h2 className='sr-only'>Pricing Plans</h2>
       <div className='relative mx-auto w-full max-w-[1289px]'>
         <PricingGrid />
diff --git a/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx b/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx
index e2c686c1f0..b55f928b59 100644
--- a/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx
+++ b/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx
@@ -79,12 +79,12 @@ export default function LandingTemplates() {
   return (
     <section
       id='templates'
-      className='flex flex-col px-4 pt-[40px] sm:px-[50px] sm:pt-[34px]'
+      className='flex flex-col px-4 pt-10 sm:px-[50px] sm:pt-[34px]'
       aria-labelledby='templates-heading'
     >
       <h2
         id='templates-heading'
-        className='mb-[16px] font-medium text-[28px] text-foreground tracking-tight sm:mb-[24px]'
+        className='mb-4 font-medium text-[28px] text-foreground tracking-tight sm:mb-6'
       >
         Templates
       </h2>
diff --git a/apps/sim/app/(landing)/components/legal-layout.tsx b/apps/sim/app/(landing)/components/legal-layout.tsx
index 552bb5dd9e..a829a67b47 100644
--- a/apps/sim/app/(landing)/components/legal-layout.tsx
+++ b/apps/sim/app/(landing)/components/legal-layout.tsx
@@ -12,16 +12,16 @@ export default async function LegalLayout({ title, children }: LegalLayoutProps)
   const blogPosts = await getNavBlogPosts()
 
   return (
-    <main className='min-h-screen bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <main className='min-h-screen bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
       <header>
         <Navbar blogPosts={blogPosts} />
       </header>
 
-      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
-        <h1 className='mb-12 text-center font-[500] text-4xl text-[#ECECEC] md:text-5xl'>
+      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-20 sm:px-12'>
+        <h1 className='mb-12 text-balance text-center font-[500] text-4xl text-[var(--landing-text)] md:text-5xl'>
           {title}
         </h1>
-        <div className='space-y-8 text-[#999] text-[15px] leading-[1.7] [&_h2]:mt-12 [&_h2]:mb-6 [&_h2]:text-[#ECECEC] [&_h3]:mt-8 [&_h3]:mb-4 [&_h3]:text-[#ECECEC] [&_li]:text-[#999] [&_strong]:text-[#ECECEC]'>
+        <div className='space-y-8 text-[var(--landing-text-muted)] text-base leading-[1.7] [&_h2]:mt-12 [&_h2]:mb-6 [&_h2]:text-[var(--landing-text)] [&_h3]:mt-8 [&_h3]:mb-4 [&_h3]:text-[var(--landing-text)] [&_li]:text-[var(--landing-text-muted)] [&_strong]:text-[var(--landing-text)]'>
           {children}
         </div>
       </div>
diff --git a/apps/sim/app/(landing)/components/nav/nav.tsx b/apps/sim/app/(landing)/components/nav/nav.tsx
index ea4452f7d4..06baaf8d13 100644
--- a/apps/sim/app/(landing)/components/nav/nav.tsx
+++ b/apps/sim/app/(landing)/components/nav/nav.tsx
@@ -71,7 +71,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
           href='https://docs.sim.ai'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
           prefetch={false}
         >
           Docs
@@ -80,7 +80,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
       <li>
         <Link
           href={useHomeLinks ? '/?home#pricing' : '/#pricing'}
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
           scroll={true}
         >
           Pricing
@@ -89,7 +89,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
       <li>
         <button
           onClick={handleEnterpriseClick}
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
           type='button'
           aria-label='Contact for Enterprise pricing'
         >
@@ -101,7 +101,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
           href='https://jobs.ashbyhq.com/sim'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
         >
           Careers
         </a>
@@ -111,7 +111,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
           href='https://github.com/simstudioai/sim'
           target='_blank'
           rel='noopener noreferrer'
-          className='flex items-center gap-2 text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='flex items-center gap-2 text-md text-muted-foreground transition-colors hover:text-foreground'
           aria-label={`GitHub repository - ${githubStars} stars`}
         >
           <GithubIcon className='h-[16px] w-[16px]' aria-hidden='true' />
@@ -125,8 +125,8 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
     <nav
       aria-label='Primary navigation'
       className={`flex w-full items-center justify-between px-4 ${
-        variant === 'auth' ? 'pt-[20px] sm:pt-[16.5px]' : 'pt-[12px] sm:pt-[8.5px]'
-      } pb-[21px] sm:px-8 md:px-[44px]`}
+        variant === 'auth' ? 'pt-5 sm:pt-[16.5px]' : 'pt-3 sm:pt-[8.5px]'
+      } pb-[21px] sm:px-8 md:px-11`}
       itemScope
       itemType='https://schema.org/SiteNavigationElement'
     >
@@ -161,7 +161,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
         </Link>
         {/* Desktop Navigation Links - only show on landing and if hosted */}
         {variant === 'landing' && isHosted && (
-          <ul className='hidden items-center justify-center gap-[20px] pt-[4px] md:flex'>
+          <ul className='hidden items-center justify-center gap-5 pt-1 md:flex'>
             <NavLinks />
           </ul>
         )}
@@ -170,14 +170,14 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
       {/* Auth Buttons - show only when hosted, regardless of variant */}
       {!hideAuthButtons && isHosted && (
         <div
-          className={`flex items-center justify-center gap-[16px] pt-[1.5px]${isSessionPending ? ' invisible' : ''}`}
+          className={`flex items-center justify-center gap-4 pt-[1.5px]${isSessionPending ? ' invisible' : ''}`}
         >
           {isAuthenticated ? (
             <Link
               href='/workspace'
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
-              className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
+              className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-1.5 pr-2.5 pl-3 text-[15px] text-white transition-all`}
               aria-label='Go to app'
             >
               <span className='flex items-center gap-1'>
@@ -216,7 +216,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
                 href='/signup'
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}
-                className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
+                className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-1.5 pr-2.5 pl-3 text-[15px] text-white transition-all`}
                 aria-label='Get started with Sim - Sign up for free'
                 prefetch={true}
               >
diff --git a/apps/sim/app/(landing)/components/testimonials/testimonials.tsx b/apps/sim/app/(landing)/components/testimonials/testimonials.tsx
index 86af1ccb26..0103d096bc 100644
--- a/apps/sim/app/(landing)/components/testimonials/testimonials.tsx
+++ b/apps/sim/app/(landing)/components/testimonials/testimonials.tsx
@@ -125,7 +125,7 @@ export default function Testimonials() {
       className='flex hidden h-[150px] items-center sm:block'
       aria-label='Social proof testimonials'
     >
-      <div className='relative mx-auto h-full w-full max-w-[1289px] pl-[2px]'>
+      <div className='relative mx-auto h-full w-full max-w-[1289px] pl-0.5'>
         <div
           className='relative h-full w-full overflow-hidden'
           onMouseEnter={() => setIsPaused(true)}
@@ -146,7 +146,7 @@ export default function Testimonials() {
                 <div key={`${absoluteIndex}`} className='flex h-full w-1/4 flex-shrink-0'>
                   {/* Tweet container */}
                   <div
-                    className='group flex h-full w-full cursor-pointer flex-col px-[12px] py-[12px] transition-all duration-100 hover:bg-[#0A0A0A] sm:px-[14px]'
+                    className='group flex h-full w-full cursor-pointer flex-col px-3 py-3 transition-all duration-100 hover:bg-[#0A0A0A] sm:px-3.5'
                     onClick={() => window.open(tweet.tweetUrl, '_blank', 'noopener,noreferrer')}
                   >
                     {/* Top section with profile info */}
@@ -179,7 +179,7 @@ export default function Testimonials() {
                     </div>
 
                     {/* Tweet content below with padding */}
-                    <p className='mt-2 line-clamp-4 font-[380] text-[#0A0A0A] text-[13px] leading-[1.3] transition-colors duration-300 group-hover:text-white'>
+                    <p className='mt-2 line-clamp-4 font-[380] text-[#0A0A0A] text-small leading-[1.3] transition-colors duration-300 group-hover:text-white'>
                       {tweet.text}
                     </p>
                   </div>
diff --git a/apps/sim/app/(landing)/integrations/[slug]/components/integration-faq.tsx b/apps/sim/app/(landing)/integrations/[slug]/components/integration-faq.tsx
index c829d33fb0..a0c6a8e1c7 100644
--- a/apps/sim/app/(landing)/integrations/[slug]/components/integration-faq.tsx
+++ b/apps/sim/app/(landing)/integrations/[slug]/components/integration-faq.tsx
@@ -13,7 +13,7 @@ export function IntegrationFAQ({ faqs }: IntegrationFAQProps) {
   const [openIndex, setOpenIndex] = useState<number | null>(0)
 
   return (
-    <div className='divide-y divide-[#2A2A2A]'>
+    <div className='divide-y divide-[var(--landing-border)]'>
       {faqs.map(({ question, answer }, index) => {
         const isOpen = openIndex === index
         return (
@@ -27,7 +27,9 @@ export function IntegrationFAQ({ faqs }: IntegrationFAQProps) {
               <span
                 className={cn(
                   'font-[500] text-[15px] leading-snug transition-colors',
-                  isOpen ? 'text-[#ECECEC]' : 'text-[#999] hover:text-[#ECECEC]'
+                  isOpen
+                    ? 'text-[var(--landing-text)]'
+                    : 'text-[var(--landing-text-muted)] hover:text-[var(--landing-text)]'
                 )}
               >
                 {question}
@@ -43,7 +45,9 @@ export function IntegrationFAQ({ faqs }: IntegrationFAQProps) {
 
             {isOpen && (
               <div className='pb-5'>
-                <p className='text-[#999] text-[14px] leading-[1.75]'>{answer}</p>
+                <p className='text-[14px] text-[var(--landing-text-muted)] leading-[1.75]'>
+                  {answer}
+                </p>
               </div>
             )}
           </div>
diff --git a/apps/sim/app/(landing)/integrations/[slug]/components/template-card-button.tsx b/apps/sim/app/(landing)/integrations/[slug]/components/template-card-button.tsx
index a42a3728b6..feb7f40a66 100644
--- a/apps/sim/app/(landing)/integrations/[slug]/components/template-card-button.tsx
+++ b/apps/sim/app/(landing)/integrations/[slug]/components/template-card-button.tsx
@@ -20,7 +20,7 @@ export function TemplateCardButton({ prompt, children }: TemplateCardButtonProps
     <button
       type='button'
       onClick={handleClick}
-      className='group flex w-full flex-col items-start rounded-lg border border-[#2A2A2A] bg-[#242424] p-5 text-left transition-colors hover:border-[#3d3d3d] hover:bg-[#2A2A2A]'
+      className='group flex w-full flex-col items-start rounded-lg border border-[var(--landing-border)] bg-[var(--landing-bg-card)] p-5 text-left transition-colors hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-elevated)]'
     >
       {children}
     </button>
diff --git a/apps/sim/app/(landing)/integrations/[slug]/page.tsx b/apps/sim/app/(landing)/integrations/[slug]/page.tsx
index 9538956e6b..9927c35d1f 100644
--- a/apps/sim/app/(landing)/integrations/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/integrations/[slug]/page.tsx
@@ -307,15 +307,18 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
           aria-label='Breadcrumb'
           className='mb-10 flex items-center gap-2 text-[#555] text-[13px]'
         >
-          <Link href='/' className='transition-colors hover:text-[#999]'>
+          <Link href='/' className='transition-colors hover:text-[var(--landing-text-muted)]'>
             Home
           </Link>
           <span aria-hidden='true'>/</span>
-          <Link href='/integrations' className='transition-colors hover:text-[#999]'>
+          <Link
+            href='/integrations'
+            className='transition-colors hover:text-[var(--landing-text-muted)]'
+          >
             Integrations
           </Link>
           <span aria-hidden='true'>/</span>
-          <span className='text-[#999]'>{name}</span>
+          <span className='text-[var(--landing-text-muted)]'>{name}</span>
         </nav>
 
         {/* Hero */}
@@ -334,20 +337,22 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
               <p className='mb-0.5 text-[#555] text-[12px]'>Integration</p>
               <h1
                 id='integration-heading'
-                className='font-[500] text-[#ECECEC] text-[36px] leading-tight sm:text-[44px]'
+                className='font-[500] text-[36px] text-[var(--landing-text)] leading-tight sm:text-[44px]'
               >
                 {name}
               </h1>
             </div>
           </div>
 
-          <p className='mb-8 max-w-[700px] text-[#999] text-[17px] leading-[1.7]'>{description}</p>
+          <p className='mb-8 max-w-[700px] text-[17px] text-[var(--landing-text-muted)] leading-[1.7]'>
+            {description}
+          </p>
 
           {/* CTAs */}
-          <div className='flex flex-wrap gap-[8px]'>
+          <div className='flex flex-wrap gap-2'>
             <a
               href='https://sim.ai'
-              className='inline-flex h-[32px] items-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+              className='inline-flex h-[32px] items-center rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text-dark)] transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
             >
               Start building free
             </a>
@@ -355,7 +360,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
               href={docsUrl}
               target='_blank'
               rel='noopener noreferrer'
-              className='inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#3d3d3d] px-[10px] font-[430] font-season text-[#ECECEC] text-[14px] transition-colors hover:bg-[#2A2A2A]'
+              className='inline-flex h-[32px] items-center gap-1.5 rounded-[5px] border border-[var(--landing-border-strong)] px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
             >
               View docs
               <svg
@@ -381,16 +386,24 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             {/* Overview */}
             {longDescription && (
               <section aria-labelledby='overview-heading'>
-                <h2 id='overview-heading' className='mb-4 font-[500] text-[#ECECEC] text-[20px]'>
+                <h2
+                  id='overview-heading'
+                  className='mb-4 font-[500] text-[20px] text-[var(--landing-text)]'
+                >
                   Overview
                 </h2>
-                <p className='text-[#999] text-[15px] leading-[1.8]'>{longDescription}</p>
+                <p className='text-[15px] text-[var(--landing-text-muted)] leading-[1.8]'>
+                  {longDescription}
+                </p>
               </section>
             )}
 
             {/* How to automate — targets "how to connect X" queries */}
             <section aria-labelledby='how-it-works-heading'>
-              <h2 id='how-it-works-heading' className='mb-6 font-[500] text-[#ECECEC] text-[20px]'>
+              <h2
+                id='how-it-works-heading'
+                className='mb-6 font-[500] text-[20px] text-[var(--landing-text)]'
+              >
                 How to automate {name} with Sim
               </h2>
               <ol className='space-y-4' aria-label='Steps to set up automation'>
@@ -418,14 +431,18 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                 ].map(({ step, title, body }) => (
                   <li key={step} className='flex gap-4'>
                     <span
-                      className='mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-[#3d3d3d] font-[500] text-[#555] text-[11px]'
+                      className='mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-[var(--landing-border-strong)] font-[500] text-[#555] text-[11px]'
                       aria-hidden='true'
                     >
                       {step}
                     </span>
                     <div>
-                      <h3 className='mb-1 font-[500] text-[#ECECEC] text-[15px]'>{title}</h3>
-                      <p className='text-[#999] text-[14px] leading-relaxed'>{body}</p>
+                      <h3 className='mb-1 font-[500] text-[15px] text-[var(--landing-text)]'>
+                        {title}
+                      </h3>
+                      <p className='text-[14px] text-[var(--landing-text-muted)] leading-relaxed'>
+                        {body}
+                      </p>
                     </div>
                   </li>
                 ))}
@@ -435,10 +452,13 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             {/* Triggers */}
             {triggers.length > 0 && (
               <section aria-labelledby='triggers-heading'>
-                <h2 id='triggers-heading' className='mb-2 font-[500] text-[#ECECEC] text-[20px]'>
+                <h2
+                  id='triggers-heading'
+                  className='mb-2 font-[500] text-[20px] text-[var(--landing-text)]'
+                >
                   Real-time triggers
                 </h2>
-                <p className='mb-4 text-[#999] text-[14px] leading-relaxed'>
+                <p className='mb-4 text-[14px] text-[var(--landing-text-muted)] leading-relaxed'>
                   Connect a {name} webhook to Sim and your workflow fires the instant an event
                   happens — no polling, no delay. Sim receives the full event payload and makes
                   every field available as a variable inside your workflow.
@@ -452,10 +472,10 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                   {triggers.map((trigger) => (
                     <li
                       key={trigger.id}
-                      className='rounded-lg border border-[#2A2A2A] bg-[#242424] p-4'
+                      className='rounded-lg border border-[var(--landing-border)] bg-[var(--landing-bg-card)] p-4'
                     >
                       <div className='mb-2 flex items-center gap-2'>
-                        <span className='inline-flex items-center gap-1 rounded-[4px] bg-[#2A2A2A] px-1.5 py-0.5 font-[500] text-[#ECECEC] text-[11px]'>
+                        <span className='inline-flex items-center gap-1 rounded-[4px] bg-[var(--landing-bg-elevated)] px-1.5 py-0.5 font-[500] text-[11px] text-[var(--landing-text)]'>
                           <svg
                             aria-hidden='true'
                             className='h-2.5 w-2.5'
@@ -469,9 +489,11 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                           Event
                         </span>
                       </div>
-                      <p className='font-[500] text-[#ECECEC] text-[13px]'>{trigger.name}</p>
+                      <p className='font-[500] text-[13px] text-[var(--landing-text)]'>
+                        {trigger.name}
+                      </p>
                       {trigger.description && (
-                        <p className='mt-1 text-[#999] text-[12px] leading-relaxed'>
+                        <p className='mt-1 text-[12px] text-[var(--landing-text-muted)] leading-relaxed'>
                           {trigger.description}
                         </p>
                       )}
@@ -484,10 +506,13 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             {/* Workflow templates */}
             {matchingTemplates.length > 0 && (
               <section aria-labelledby='templates-heading'>
-                <h2 id='templates-heading' className='mb-2 font-[500] text-[#ECECEC] text-[20px]'>
+                <h2
+                  id='templates-heading'
+                  className='mb-2 font-[500] text-[20px] text-[var(--landing-text)]'
+                >
                   Workflow templates
                 </h2>
-                <p className='mb-6 text-[#999] text-[14px]'>
+                <p className='mb-6 text-[14px] text-[var(--landing-text-muted)]'>
                   Ready-to-use workflows featuring {name}. Click any to build it instantly.
                 </p>
                 <ul
@@ -522,7 +547,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                                       →
                                     </span>
                                   )}
-                                  <span className='inline-flex items-center gap-1 rounded-[3px] bg-[#2A2A2A] px-1.5 py-0.5 font-[500] text-[#ECECEC]'>
+                                  <span className='inline-flex items-center gap-1 rounded-[3px] bg-[var(--landing-bg-elevated)] px-1.5 py-0.5 font-[500] text-[var(--landing-text)]'>
                                     <IntegrationIcon
                                       bgColor={int?.bgColor ?? '#6B7280'}
                                       name={intName}
@@ -539,11 +564,11 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                             })}
                           </div>
 
-                          <p className='mb-1 font-[500] text-[#ECECEC] text-[14px]'>
+                          <p className='mb-1 font-[500] text-[14px] text-[var(--landing-text)]'>
                             {template.title}
                           </p>
 
-                          <p className='mt-3 text-[#555] text-[13px] transition-colors group-hover:text-[#999]'>
+                          <p className='mt-3 text-[#555] text-[13px] transition-colors group-hover:text-[var(--landing-text-muted)]'>
                             Try this workflow →
                           </p>
                         </TemplateCardButton>
@@ -557,10 +582,13 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             {/* Tools */}
             {operations.length > 0 && (
               <section aria-labelledby='tools-heading'>
-                <h2 id='tools-heading' className='mb-2 font-[500] text-[#ECECEC] text-[20px]'>
+                <h2
+                  id='tools-heading'
+                  className='mb-2 font-[500] text-[20px] text-[var(--landing-text)]'
+                >
                   Supported tools
                 </h2>
-                <p className='mb-6 text-[#999] text-[14px]'>
+                <p className='mb-6 text-[14px] text-[var(--landing-text-muted)]'>
                   {operations.length} {name} tool{operations.length === 1 ? '' : 's'} available in
                   Sim
                 </p>
@@ -571,9 +599,9 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                   {operations.map((op) => (
                     <li
                       key={op.name}
-                      className='rounded-[6px] border border-[#2A2A2A] bg-[#242424] px-3.5 py-3'
+                      className='rounded-[6px] border border-[var(--landing-border)] bg-[var(--landing-bg-card)] px-3.5 py-3'
                     >
-                      <p className='font-[500] text-[#ECECEC] text-[13px]'>{op.name}</p>
+                      <p className='font-[500] text-[13px] text-[var(--landing-text)]'>{op.name}</p>
                       {op.description && (
                         <p className='mt-0.5 text-[#555] text-[12px] leading-relaxed'>
                           {op.description}
@@ -587,7 +615,10 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
 
             {/* FAQ */}
             <section aria-labelledby='faq-heading'>
-              <h2 id='faq-heading' className='mb-8 font-[500] text-[#ECECEC] text-[20px]'>
+              <h2
+                id='faq-heading'
+                className='mb-8 font-[500] text-[20px] text-[var(--landing-text)]'
+              >
                 Frequently asked questions
               </h2>
               <IntegrationFAQ faqs={faqs} />
@@ -597,24 +628,24 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
           {/* Sidebar */}
           <aside className='space-y-5' aria-label='Integration details'>
             {/* Quick details */}
-            <div className='rounded-lg border border-[#2A2A2A] bg-[#242424] p-5'>
-              <h3 className='mb-4 font-[500] text-[#ECECEC] text-[14px]'>Details</h3>
+            <div className='rounded-lg border border-[var(--landing-border)] bg-[var(--landing-bg-card)] p-5'>
+              <h3 className='mb-4 font-[500] text-[14px] text-[var(--landing-text)]'>Details</h3>
               <dl className='space-y-3 text-[13px]'>
                 {operations.length > 0 && (
                   <div>
                     <dt className='text-[#555]'>Tools</dt>
-                    <dd className='text-[#ECECEC]'>{operations.length} supported</dd>
+                    <dd className='text-[var(--landing-text)]'>{operations.length} supported</dd>
                   </div>
                 )}
                 {triggers.length > 0 && (
                   <div>
                     <dt className='text-[#555]'>Triggers</dt>
-                    <dd className='text-[#ECECEC]'>{triggers.length} available</dd>
+                    <dd className='text-[var(--landing-text)]'>{triggers.length} available</dd>
                   </div>
                 )}
                 <div>
                   <dt className='text-[#555]'>Auth</dt>
-                  <dd className='text-[#ECECEC]'>
+                  <dd className='text-[var(--landing-text)]'>
                     {authType === 'oauth'
                       ? 'One-click OAuth'
                       : authType === 'api-key'
@@ -624,13 +655,13 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                 </div>
                 <div>
                   <dt className='text-[#555]'>Pricing</dt>
-                  <dd className='text-[#ECECEC]'>Free to start</dd>
+                  <dd className='text-[var(--landing-text)]'>Free to start</dd>
                 </div>
               </dl>
               <div className='mt-5 flex flex-col gap-2'>
                 <a
                   href='https://sim.ai'
-                  className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] font-[430] font-season text-[#1C1C1C] text-[13px] transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                  className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--white)] bg-[var(--white)] font-[430] font-season text-[13px] text-[var(--landing-text-dark)] transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                 >
                   Get started free
                 </a>
@@ -638,7 +669,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                   href={docsUrl}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='flex h-[32px] w-full items-center justify-center gap-1.5 rounded-[5px] border border-[#3d3d3d] font-[430] font-season text-[#ECECEC] text-[13px] transition-colors hover:bg-[#2A2A2A]'
+                  className='flex h-[32px] w-full items-center justify-center gap-1.5 rounded-[5px] border border-[var(--landing-border-strong)] font-[430] font-season text-[13px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
                 >
                   View docs
                   <svg
@@ -658,10 +689,10 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             </div>
 
             {/* Related integrations — internal linking for SEO */}
-            <div className='rounded-lg border border-[#2A2A2A] bg-[#242424] p-5'>
+            <div className='rounded-lg border border-[var(--landing-border)] bg-[var(--landing-bg-card)] p-5'>
               {relatedIntegrations.length > 0 && (
                 <>
-                  <h3 className='mb-4 font-[500] text-[#ECECEC] text-[14px]'>
+                  <h3 className='mb-4 font-[500] text-[14px] text-[var(--landing-text)]'>
                     Related integrations
                   </h3>
                   <ul className='space-y-2'>
@@ -669,7 +700,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                       <li key={rel.slug}>
                         <Link
                           href={`/integrations/${rel.slug}`}
-                          className='flex items-center gap-2.5 rounded-[6px] p-1.5 text-[#999] text-[13px] transition-colors hover:bg-[#2A2A2A] hover:text-[#ECECEC]'
+                          className='flex items-center gap-2.5 rounded-[6px] p-1.5 text-[13px] text-[var(--landing-text-muted)] transition-colors hover:bg-[var(--landing-bg-elevated)] hover:text-[var(--landing-text)]'
                         >
                           <IntegrationIcon
                             bgColor={rel.bgColor}
@@ -690,7 +721,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
               )}
               <Link
                 href='/integrations'
-                className={`block text-[#555] text-[12px] transition-colors hover:text-[#999]${relatedIntegrations.length > 0 ? ' mt-4' : ''}`}
+                className={`block text-[#555] text-[12px] transition-colors hover:text-[var(--landing-text-muted)]${relatedIntegrations.length > 0 ? ' mt-4' : ''}`}
               >
                 All integrations →
               </Link>
@@ -701,7 +732,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
         {/* Bottom CTA */}
         <section
           aria-labelledby='cta-heading'
-          className='mt-20 rounded-xl border border-[#2A2A2A] bg-[#242424] p-8 text-center sm:p-12'
+          className='mt-20 rounded-xl border border-[var(--landing-border)] bg-[var(--landing-bg-card)] p-8 text-center sm:p-12'
         >
           {/* Logo pair: Sim × Integration */}
           <div className='mx-auto mb-6 flex items-center justify-center gap-3'>
@@ -716,11 +747,11 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             <div className='flex items-center gap-2'>
               <span className='h-px w-5 bg-[#3d3d3d]' aria-hidden='true' />
               <span
-                className='flex h-7 w-7 items-center justify-center rounded-full border border-[#3d3d3d]'
+                className='flex h-7 w-7 items-center justify-center rounded-full border border-[var(--landing-border-strong)]'
                 aria-hidden='true'
               >
                 <svg
-                  className='h-3.5 w-3.5 text-[#666]'
+                  className='h-3.5 w-3.5 text-[var(--landing-text-secondary)]'
                   viewBox='0 0 24 24'
                   fill='none'
                   stroke='currentColor'
@@ -745,17 +776,17 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
           </div>
           <h2
             id='cta-heading'
-            className='mb-3 font-[500] text-[#ECECEC] text-[28px] sm:text-[34px]'
+            className='mb-3 font-[500] text-[28px] text-[var(--landing-text)] sm:text-[34px]'
           >
             Start automating {name} today
           </h2>
-          <p className='mx-auto mb-8 max-w-[480px] text-[#999] text-[16px] leading-relaxed'>
+          <p className='mx-auto mb-8 max-w-[480px] text-[16px] text-[var(--landing-text-muted)] leading-relaxed'>
             Build your first AI workflow with {name} in minutes. Connect to every tool your team
             uses. Free to start — no credit card required.
           </p>
           <a
             href='https://sim.ai'
-            className='inline-flex h-[32px] items-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+            className='inline-flex h-[32px] items-center rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text-dark)] transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
           >
             Build for free →
           </a>
diff --git a/apps/sim/app/(landing)/integrations/components/integration-card.tsx b/apps/sim/app/(landing)/integrations/components/integration-card.tsx
index 4d760f2494..38ce0a4beb 100644
--- a/apps/sim/app/(landing)/integrations/components/integration-card.tsx
+++ b/apps/sim/app/(landing)/integrations/components/integration-card.tsx
@@ -15,7 +15,7 @@ export function IntegrationCard({ integration, IconComponent }: IntegrationCardP
   return (
     <Link
       href={`/integrations/${slug}`}
-      className='group flex flex-col rounded-lg border border-[#2A2A2A] bg-[#242424] p-4 transition-colors hover:border-[#3d3d3d] hover:bg-[#2A2A2A]'
+      className='group flex flex-col rounded-lg border border-[var(--landing-border)] bg-[var(--landing-bg-card)] p-4 transition-colors hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-elevated)]'
       aria-label={`${name} integration`}
     >
       <IntegrationIcon
@@ -27,26 +27,28 @@ export function IntegrationCard({ integration, IconComponent }: IntegrationCardP
       />
 
       {/* Name */}
-      <h3 className='mb-1 font-[500] text-[#ECECEC] text-[14px] leading-snug'>{name}</h3>
+      <h3 className='mb-1 font-[500] text-[14px] text-[var(--landing-text)] leading-snug'>
+        {name}
+      </h3>
 
       {/* Description — clamped to 2 lines */}
-      <p className='mb-3 line-clamp-2 flex-1 text-[#999] text-[12px] leading-relaxed'>
+      <p className='mb-3 line-clamp-2 flex-1 text-[12px] text-[var(--landing-text-muted)] leading-relaxed'>
         {description}
       </p>
 
       {/* Footer row */}
       <div className='flex flex-wrap items-center gap-1.5'>
         {operationCount > 0 && (
-          <Badge className='border-0 bg-[#333] text-[#999] text-[11px]'>
+          <Badge className='border-0 bg-[#333] text-[11px] text-[var(--landing-text-muted)]'>
             {operationCount} {operationCount === 1 ? 'tool' : 'tools'}
           </Badge>
         )}
         {triggerCount > 0 && (
-          <Badge className='border-0 bg-[#333] text-[#999] text-[11px]'>
+          <Badge className='border-0 bg-[#333] text-[11px] text-[var(--landing-text-muted)]'>
             {triggerCount} {triggerCount === 1 ? 'trigger' : 'triggers'}
           </Badge>
         )}
-        <span className='ml-auto text-[#555] text-[12px] transition-colors group-hover:text-[#999]'>
+        <span className='ml-auto text-[#555] text-[12px] transition-colors group-hover:text-[var(--landing-text-muted)]'>
           Learn more →
         </span>
       </div>
diff --git a/apps/sim/app/(landing)/integrations/components/integration-grid.tsx b/apps/sim/app/(landing)/integrations/components/integration-grid.tsx
index 61975a2951..79b57cefc6 100644
--- a/apps/sim/app/(landing)/integrations/components/integration-grid.tsx
+++ b/apps/sim/app/(landing)/integrations/components/integration-grid.tsx
@@ -105,8 +105,8 @@ export function IntegrationGrid({ integrations }: IntegrationGridProps) {
           onClick={() => setActiveCategory(null)}
           className={`rounded-md border px-3 py-1 text-[12px] transition-colors ${
             activeCategory === null
-              ? 'border-[#555] bg-[#333] text-[#ECECEC]'
-              : 'border-[#2A2A2A] bg-transparent text-[#999] hover:border-[#3d3d3d] hover:text-[#ECECEC]'
+              ? 'border-[#555] bg-[#333] text-[var(--landing-text)]'
+              : 'border-[var(--landing-border)] bg-transparent text-[var(--landing-text-muted)] hover:border-[var(--landing-border-strong)] hover:text-[var(--landing-text)]'
           }`}
         >
           All
@@ -118,8 +118,8 @@ export function IntegrationGrid({ integrations }: IntegrationGridProps) {
             onClick={() => setActiveCategory(activeCategory === cat ? null : cat)}
             className={`rounded-md border px-3 py-1 text-[12px] transition-colors ${
               activeCategory === cat
-                ? 'border-[#555] bg-[#333] text-[#ECECEC]'
-                : 'border-[#2A2A2A] bg-transparent text-[#999] hover:border-[#3d3d3d] hover:text-[#ECECEC]'
+                ? 'border-[#555] bg-[#333] text-[var(--landing-text)]'
+                : 'border-[var(--landing-border)] bg-transparent text-[var(--landing-text-muted)] hover:border-[var(--landing-border-strong)] hover:text-[var(--landing-text)]'
             }`}
           >
             {CATEGORY_LABELS[cat] || cat}
diff --git a/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx b/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx
index a5acd60fe0..d85c7898e9 100644
--- a/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx
+++ b/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx
@@ -74,7 +74,7 @@ export function RequestIntegrationModal() {
       <button
         type='button'
         onClick={() => setOpen(true)}
-        className='inline-flex h-[32px] shrink-0 items-center gap-[6px] rounded-[5px] border border-[#3d3d3d] px-[10px] font-[430] font-season text-[#ECECEC] text-[14px] transition-colors hover:bg-[#2A2A2A]'
+        className='inline-flex h-[32px] shrink-0 items-center gap-1.5 rounded-[5px] border border-[var(--landing-border-strong)] px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
       >
         Request an integration
       </button>
@@ -88,7 +88,7 @@ export function RequestIntegrationModal() {
               <div className='flex flex-col items-center gap-3 py-6 text-center'>
                 <div className='flex h-10 w-10 items-center justify-center rounded-full bg-[#33C482]/10'>
                   <svg
-                    className='h-5 w-5 text-[#33C482]'
+                    className='h-5 w-5 text-[var(--brand-accent)]'
                     viewBox='0 0 24 24'
                     fill='none'
                     stroke='currentColor'
@@ -99,7 +99,7 @@ export function RequestIntegrationModal() {
                     <polyline points='20 6 9 17 4 12' />
                   </svg>
                 </div>
-                <p className='text-[14px] text-[var(--text-primary)]'>
+                <p className='text-[14px] text-[var(--landing-text)]'>
                   Request submitted — we&apos;ll follow up at{' '}
                   <span className='font-medium'>{email}</span>.
                 </p>
@@ -108,8 +108,8 @@ export function RequestIntegrationModal() {
           ) : (
             <form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
               <ModalBody>
-                <div className='space-y-[12px]'>
-                  <div className='flex flex-col gap-[4px]'>
+                <div className='space-y-3'>
+                  <div className='flex flex-col gap-1'>
                     <Label htmlFor='integration-name'>Integration name</Label>
                     <Input
                       id='integration-name'
@@ -122,7 +122,7 @@ export function RequestIntegrationModal() {
                     />
                   </div>
 
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label htmlFor='requester-email'>Your email</Label>
                     <Input
                       id='requester-email'
@@ -135,7 +135,7 @@ export function RequestIntegrationModal() {
                     />
                   </div>
 
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label htmlFor='use-case'>
                       Use case <span className='text-[var(--text-tertiary)]'>(optional)</span>
                     </Label>
diff --git a/apps/sim/app/(landing)/integrations/layout.tsx b/apps/sim/app/(landing)/integrations/layout.tsx
index 8b523aa9ff..b6cbbb8ca4 100644
--- a/apps/sim/app/(landing)/integrations/layout.tsx
+++ b/apps/sim/app/(landing)/integrations/layout.tsx
@@ -28,7 +28,7 @@ export default async function IntegrationsLayout({ children }: { children: React
   }
 
   return (
-    <div className='dark flex min-h-screen flex-col bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <div className='dark flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}
diff --git a/apps/sim/app/(landing)/integrations/page.tsx b/apps/sim/app/(landing)/integrations/page.tsx
index 65a6526236..fbd8b0fbf9 100644
--- a/apps/sim/app/(landing)/integrations/page.tsx
+++ b/apps/sim/app/(landing)/integrations/page.tsx
@@ -105,11 +105,11 @@ export default function IntegrationsPage() {
         <section aria-labelledby='integrations-heading' className='mb-16'>
           <h1
             id='integrations-heading'
-            className='mb-4 font-[500] text-[#ECECEC] text-[40px] leading-tight sm:text-[56px]'
+            className='mb-4 text-balance font-[500] text-[40px] text-[var(--landing-text)] leading-tight sm:text-[56px]'
           >
             Integrations
           </h1>
-          <p className='max-w-[640px] text-[#999] text-[18px] leading-relaxed'>
+          <p className='max-w-[640px] text-[18px] text-[var(--landing-text-muted)] leading-relaxed'>
             Connect every tool your team uses. Build AI-powered workflows that automate tasks across{' '}
             {TOP_NAMES.slice(0, 4).map((name, i, arr) => {
               const integration = allIntegrations.find((int) => int.name === name)
@@ -136,16 +136,19 @@ export default function IntegrationsPage() {
 
         {/* Searchable grid — client component */}
         <section aria-labelledby='all-integrations-heading'>
-          <h2 id='all-integrations-heading' className='mb-8 font-[500] text-[#ECECEC] text-[24px]'>
+          <h2
+            id='all-integrations-heading'
+            className='mb-8 font-[500] text-[24px] text-[var(--landing-text)]'
+          >
             All Integrations
           </h2>
           <IntegrationGrid integrations={allIntegrations} />
         </section>
 
         {/* Integration request */}
-        <div className='mt-16 flex flex-col items-start gap-3 border-[#2A2A2A] border-t pt-10 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='mt-16 flex flex-col items-start gap-3 border-[var(--landing-border)] border-t pt-10 sm:flex-row sm:items-center sm:justify-between'>
           <div>
-            <p className='font-[500] text-[#ECECEC] text-[15px]'>
+            <p className='font-[500] text-[15px] text-[var(--landing-text)]'>
               Don&apos;t see the integration you need?
             </p>
             <p className='mt-0.5 text-[#555] text-[13px]'>
diff --git a/apps/sim/app/(landing)/layout.tsx b/apps/sim/app/(landing)/layout.tsx
index 9fef82ff68..10e07b462f 100644
--- a/apps/sim/app/(landing)/layout.tsx
+++ b/apps/sim/app/(landing)/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://sim.ai'),
-  manifest: '/manifest.json',
+  manifest: '/manifest.webmanifest',
   icons: {
     icon: [{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' }],
     apple: '/favicon/apple-touch-icon.png',
diff --git a/apps/sim/app/(landing)/privacy/loading.tsx b/apps/sim/app/(landing)/privacy/loading.tsx
index 98727e7d45..962c436464 100644
--- a/apps/sim/app/(landing)/privacy/loading.tsx
+++ b/apps/sim/app/(landing)/privacy/loading.tsx
@@ -2,55 +2,55 @@ import { Skeleton } from '@/components/emcn'
 
 export default function PrivacyLoading() {
   return (
-    <main className='min-h-screen bg-[#1C1C1C] text-[#ECECEC]'>
-      <div className='flex h-[52px] items-center border-[#2A2A2A] border-b px-6'>
-        <Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
-        <div className='ml-auto flex items-center gap-[12px]'>
-          <Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
+    <main className='min-h-screen bg-[var(--landing-bg)] text-[var(--landing-text)]'>
+      <div className='flex h-[52px] items-center border-[var(--landing-border)] border-b px-6'>
+        <Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+        <div className='ml-auto flex items-center gap-3'>
+          <Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
         </div>
       </div>
-      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
-        <Skeleton className='mx-auto h-[48px] w-[280px] rounded-[4px] bg-[#2A2A2A]' />
+      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-20 sm:px-12'>
+        <Skeleton className='mx-auto h-[48px] w-[280px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
         <div className='mt-12 space-y-8'>
-          <div className='space-y-[10px]'>
-            <Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
+          <div className='space-y-2.5'>
+            <Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[320px] rounded-[4px] bg-[#2A2A2A]' />
-            <div className='mt-4 space-y-[10px]'>
-              <Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[320px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <div className='mt-4 space-y-2.5'>
+              <Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
             </div>
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
-            <div className='mt-4 space-y-[8px] pl-6'>
-              <Skeleton className='h-[15px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[15px] w-[60%] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[15px] w-[65%] rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <div className='mt-4 space-y-2 pl-6'>
+              <Skeleton className='h-[15px] w-[70%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[15px] w-[60%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[15px] w-[65%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
             </div>
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[220px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[220px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
         </div>
       </div>
diff --git a/apps/sim/app/(landing)/privacy/page.tsx b/apps/sim/app/(landing)/privacy/page.tsx
index 7d3be4c643..44140c62bb 100644
--- a/apps/sim/app/(landing)/privacy/page.tsx
+++ b/apps/sim/app/(landing)/privacy/page.tsx
@@ -1,7 +1,15 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 import { getEnv } from '@/lib/core/config/env'
 import { ExternalRedirect, LegalLayout } from '@/app/(landing)/components'
 
+export const metadata: Metadata = {
+  title: 'Privacy Policy',
+  description:
+    'Learn how Sim collects, uses, and protects your personal data, including data obtained from Google APIs.',
+  alternates: { canonical: '/privacy' },
+}
+
 export default function PrivacyPolicy() {
   return (
     <LegalLayout title='Privacy Policy'>
@@ -574,7 +582,7 @@ export default function PrivacyPolicy() {
           Please note that we may ask you to verify your identity before responding to such
           requests.
         </p>
-        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[#2A2A2A] p-3 text-[#ECECEC]'>
+        <p className='mb-4 border-[var(--landing-border-strong)] border-l-4 bg-[var(--landing-bg-elevated)] p-3 text-[var(--landing-text)]'>
           You have the right to complain to a Data Protection Authority about our collection and use
           of your Personal Information. For more information, please contact your local data
           protection authority in the European Economic Area (EEA).
@@ -596,7 +604,10 @@ export default function PrivacyPolicy() {
           sharing practices (such as analytics or advertising services) may be considered a "sale"
           or "share" under CCPA/CPRA. You have the right to opt-out of such data sharing. To
           exercise this right, contact us at{' '}
-          <Link href='mailto:privacy@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:privacy@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             privacy@sim.ai
           </Link>
           .
@@ -682,7 +693,10 @@ export default function PrivacyPolicy() {
           Sim interacts with are not covered by this policy and should be reported directly to the
           solution vendor in accordance with their disclosure policy (if any). Before beginning your
           inquiry, email us at{' '}
-          <Link href='mailto:security@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:security@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             security@sim.ai
           </Link>{' '}
           if you're unsure whether a system or endpoint is in scope.
@@ -701,7 +715,10 @@ export default function PrivacyPolicy() {
         <h3 className='mb-2 font-medium text-xl'>Reporting a vulnerability</h3>
         <p className='mb-4'>
           To report any security flaws, send an email to{' '}
-          <Link href='mailto:security@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:security@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             security@sim.ai
           </Link>
           . The next business day, we'll acknowledge receipt of your vulnerability report and keep
@@ -745,7 +762,7 @@ export default function PrivacyPolicy() {
             Email:{' '}
             <Link
               href='mailto:privacy@sim.ai'
-              className='text-[#ECECEC] underline hover:text-white'
+              className='text-[var(--landing-text)] underline hover:text-white'
             >
               privacy@sim.ai
             </Link>
diff --git a/apps/sim/app/(landing)/terms/loading.tsx b/apps/sim/app/(landing)/terms/loading.tsx
index 5c9d573caf..90391b4e23 100644
--- a/apps/sim/app/(landing)/terms/loading.tsx
+++ b/apps/sim/app/(landing)/terms/loading.tsx
@@ -2,48 +2,48 @@ import { Skeleton } from '@/components/emcn'
 
 export default function TermsLoading() {
   return (
-    <main className='min-h-screen bg-[#1C1C1C] text-[#ECECEC]'>
-      <div className='flex h-[52px] items-center border-[#2A2A2A] border-b px-6'>
-        <Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
-        <div className='ml-auto flex items-center gap-[12px]'>
-          <Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[#2A2A2A]' />
-          <Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
+    <main className='min-h-screen bg-[var(--landing-bg)] text-[var(--landing-text)]'>
+      <div className='flex h-[52px] items-center border-[var(--landing-border)] border-b px-6'>
+        <Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+        <div className='ml-auto flex items-center gap-3'>
+          <Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
+          <Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
         </div>
       </div>
-      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
-        <Skeleton className='mx-auto h-[48px] w-[320px] rounded-[4px] bg-[#2A2A2A]' />
+      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-20 sm:px-12'>
+        <Skeleton className='mx-auto h-[48px] w-[320px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
         <div className='mt-12 space-y-8'>
-          <div className='space-y-[10px]'>
-            <Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
+          <div className='space-y-2.5'>
+            <Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[140px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[140px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[380px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[380px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
-          <div className='mt-12 space-y-[10px]'>
-            <Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
+          <div className='mt-12 space-y-2.5'>
+            <Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
           </div>
         </div>
       </div>
diff --git a/apps/sim/app/(landing)/terms/page.tsx b/apps/sim/app/(landing)/terms/page.tsx
index e5c6099649..08c16aeaa1 100644
--- a/apps/sim/app/(landing)/terms/page.tsx
+++ b/apps/sim/app/(landing)/terms/page.tsx
@@ -1,7 +1,15 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 import { getEnv } from '@/lib/core/config/env'
 import { ExternalRedirect, LegalLayout } from '@/app/(landing)/components'
 
+export const metadata: Metadata = {
+  title: 'Terms of Service',
+  description:
+    'Read the terms and conditions for using the Sim platform, including subscription plans, data ownership, and acceptable use.',
+  alternates: { canonical: '/terms' },
+}
+
 export default function TermsOfService() {
   return (
     <LegalLayout title='Terms of Service'>
@@ -281,7 +289,7 @@ export default function TermsOfService() {
           Agreement. The arbitration will be conducted by JAMS, an established alternative dispute
           resolution provider.
         </p>
-        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[#2A2A2A] p-3 text-[#ECECEC]'>
+        <p className='mb-4 border-[var(--landing-border-strong)] border-l-4 bg-[var(--landing-bg-elevated)] p-3 text-[var(--landing-text)]'>
           YOU AND COMPANY AGREE THAT EACH OF US MAY BRING CLAIMS AGAINST THE OTHER ONLY ON AN
           INDIVIDUAL BASIS AND NOT ON A CLASS, REPRESENTATIVE, OR COLLECTIVE BASIS. ONLY INDIVIDUAL
           RELIEF IS AVAILABLE, AND DISPUTES OF MORE THAN ONE CUSTOMER OR USER CANNOT BE ARBITRATED
@@ -290,7 +298,10 @@ export default function TermsOfService() {
         <p className='mb-4'>
           You have the right to opt out of the provisions of this Arbitration Agreement by sending a
           timely written notice of your decision to opt out to:{' '}
-          <Link href='mailto:legal@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:legal@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             legal@sim.ai{' '}
           </Link>
           within 30 days after first becoming subject to this Arbitration Agreement.
@@ -339,7 +350,7 @@ export default function TermsOfService() {
           Our Copyright Agent can be reached at:{' '}
           <Link
             href='mailto:copyright@sim.ai'
-            className='text-[#ECECEC] underline hover:text-white'
+            className='text-[var(--landing-text)] underline hover:text-white'
           >
             copyright@sim.ai
           </Link>
@@ -350,7 +361,10 @@ export default function TermsOfService() {
         <h2 className='mb-4 font-semibold text-2xl'>18. Contact Us</h2>
         <p>
           If you have any questions about these Terms, please contact us at:{' '}
-          <Link href='mailto:legal@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:legal@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             legal@sim.ai
           </Link>
         </p>
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index b8bd485ee7..4678ace8d1 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -15,6 +15,23 @@
   --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
+
+  /* z-index scale for layered UI
+     Popover must be above modal so dropdowns inside modals render correctly */
+  --z-dropdown: 100;
+  --z-modal: 200;
+  --z-popover: 300;
+  --z-tooltip: 400;
+  --z-toast: 500;
+
+  /* Shadow scale */
+  --shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.15);
+  --shadow-kbd: 0 4px 0 0 rgba(48, 48, 48, 1);
+  --shadow-kbd-sm: 0 2px 0 0 rgba(48, 48, 48, 1);
+  --shadow-brand-inset: inset 0 1.25px 2.5px 0 #9b77ff;
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
 .workspace-root {
@@ -194,10 +211,8 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-success: #e0e0e0;
 
     /* Brand & state */
-    --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
-    --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #33c482;
+    --brand-accent: #33c482;
     --selection: #1a5cf6;
     --warning: #ea580c;
 
@@ -209,67 +224,50 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --font-weight-medium: 440;
     --font-weight-semibold: 500;
 
-    /* Extended palette */
-    --c-0D0D0D: #0d0d0d;
-    --c-1A1A1A: #1a1a1a;
-    --c-1F1F1F: #1f1f1f;
-    --c-2A2A2A: #2a2a2a;
-    --c-383838: #383838;
-    --c-414141: #414141;
-    --c-442929: #442929;
-    --c-491515: #491515;
-    --c-575757: #575757;
-    --c-686868: #686868;
-    --c-707070: #707070;
-    --c-727272: #727272;
-    --c-737373: #737373;
-    --c-808080: #808080;
-    --c-858585: #858585;
-    --c-868686: #868686;
-    --c-8D8D8D: #8d8d8d;
-    --c-939393: #939393;
-    --c-A8A8A8: #a8a8a8;
-    --c-B8B8B8: #b8b8b8;
-    --c-C0C0C0: #c0c0c0;
-    --c-CDCDCD: #cdcdcd;
-    --c-D0D0D0: #d0d0d0;
-    --c-D2D2D2: #d2d2d2;
-    --c-E0E0E0: #e0e0e0;
-    --c-E5E5E5: #e5e5e5;
-    --c-E8E8E8: #e8e8e8;
-    --c-EEEEEE: #eeeeee;
-    --c-F0F0F0: #f0f0f0;
-    --c-F4F4F4: #f4f4f4;
-    --c-F5F5F5: #f5f5f5;
+    /* Landing / marketing - text (static dark-section colors) */
+    --landing-text: #ececec;
+    --landing-text-muted: #999999;
+    --landing-text-subtle: #f6f6f6;
+    --landing-text-dark: #1c1c1c;
+    --landing-text-secondary: #666666;
+    --landing-text-body: #cdcdcd;
+    --landing-text-icon: #939393;
 
-    /* Blues and cyans */
-    --c-00B0B0: #00b0b0;
-    --c-264F78: #264f78;
-    --c-2F55FF: #2f55ff;
-    --c-2FA1FF: #2fa1ff;
-    --c-336699: #336699;
-    --c-34B5FF: #34b5ff;
-    --c-601EE0: #601ee0;
-    --c-611F69: #611f69;
-    --c-802FFF: #802fff;
-    --c-8357FF: #8357ff;
-    --c-8C10FF: #8c10ff;
+    /* Landing / marketing - surfaces */
+    --landing-bg: #1c1c1c;
+    --landing-bg-elevated: #2a2a2a;
+    --landing-bg-card: #232323;
+    --landing-bg-section: #f6f6f6;
+    --landing-bg-subtle: #fafafa;
+    --landing-bg-surface: #1e1e1e;
+    --landing-bg-hover: #f0f0f0;
+    --landing-bg-skeleton: #e8e8e8;
 
-    /* Greens */
-    --c-4CAF50: #22c55e;
+    /* Landing / marketing - borders */
+    --landing-border: #2a2a2a;
+    --landing-border-light: #e5e5e5;
+    --landing-border-strong: #3d3d3d;
+    --landing-border-subtle: #d4d4d4;
 
-    /* Oranges / Ambers */
-    --c-F59E0B: #f59e0b;
-    --c-F97316: #ea580c;
-    --c-FF972F: #f97316;
+    /* Code editor (theme-aware) */
+    --code-bg: #f5f5f5;
+    --code-foreground: #1a1a1a;
+    --code-line-number: #737373;
 
-    /* Reds */
-    --c-DC2626: #dc2626;
-    --c-F6D2D2: #fecaca;
-    --c-F87171: #f87171;
-    --c-FF402F: #ef4444;
-    --c-B91C1C: #b91c1c;
-    --c-883827: #7c2d12;
+    /* Workspace: additional text */
+    --text-placeholder: #8d8d8d;
+    --text-success: #22c55e;
+
+    /* Status / semantic colors */
+    --error: #dc2626;
+    --error-muted: #fecaca;
+    --error-emphasis: #b91c1c;
+    --caution: #f59e0b;
+    --success: #22c55e;
+
+    /* Brand extended */
+    --brand-knowledge: #00b0b0;
+    --selection-dark: #264f78;
 
     /* Terminal status badges */
     --terminal-status-error-bg: #fef2f2;
@@ -280,6 +278,49 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --terminal-status-warning-bg: #fefce8;
     --terminal-status-warning-border: #facc15;
     --terminal-status-warning-color: #a16207;
+
+    /* Badge semantic colors */
+    --badge-success-bg: #bbf7d0;
+    --badge-success-text: #15803d;
+    --badge-error-bg: #fecaca;
+    --badge-error-text: #dc2626;
+    --badge-gray-bg: #e7e5e4;
+    --badge-gray-text: #57534e;
+    --badge-blue-bg: #bfdbfe;
+    --badge-blue-text: #1d4ed8;
+    --badge-blue-secondary-bg: #bae6fd;
+    --badge-blue-secondary-text: #0369a1;
+    --badge-purple-bg: #e9d5ff;
+    --badge-purple-text: #7c3aed;
+    --badge-orange-bg: #fed7aa;
+    --badge-orange-text: #c2410c;
+    --badge-amber-bg: #fde68a;
+    --badge-amber-text: #a16207;
+    --badge-teal-bg: #99f6e4;
+    --badge-teal-text: #0f766e;
+    --badge-cyan-bg: #cffafe;
+    --badge-cyan-text: #0891b2;
+    --badge-pink-bg: #fbcfe8;
+    --badge-pink-text: #be185d;
+
+    /* Search/highlight */
+    --highlight-search-active: #f6ad55;
+    --highlight-search: #fcd34d;
+    --highlight-match-bg: #bae6fd;
+    --highlight-match-text: #0369a1;
+
+    /* Selection */
+    --selection-bg: #add6ff;
+
+    /* Active indicator */
+    --indicator-online: #33c482;
+    --indicator-active: #4ade80;
+    --indicator-inactive: #b7b7b7;
+    --indicator-seat-filled: #34b5ff;
+
+    /* Scrollbar colors */
+    --scrollbar-thumb-color: #c0c0c0;
+    --scrollbar-thumb-hover-color: #a8a8a8;
   }
   .dark {
     /* Surface */
@@ -316,10 +357,8 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-success: #575757;
 
     /* Brand & state */
-    --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
-    --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #33c482;
+    --brand-accent: #33c482;
     --selection: #4b83f7;
     --warning: #ff6600;
 
@@ -331,70 +370,25 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --font-weight-medium: 480;
     --font-weight-semibold: 550;
 
-    /* Extended palette (exhaustive from code usage via -[#...]) */
-    /* Neutral deep shades */
-    --c-0D0D0D: #0d0d0d;
-    --c-1A1A1A: #1a1a1a;
-    --c-1F1F1F: #1f1f1f;
-    --c-2A2A2A: #2a2a2a;
-    --c-383838: #383838;
-    --c-414141: #414141;
-    --c-442929: #442929;
-    --c-491515: #491515;
-    --c-575757: #575757;
-    --c-686868: #686868;
-    --c-707070: #707070;
-    --c-727272: #727272;
-    --c-737373: #737373;
-    --c-808080: #808080;
-    --c-858585: #858585;
-    --c-868686: #868686;
-    --c-8D8D8D: #8d8d8d;
-    --c-939393: #939393;
-    --c-A8A8A8: #a8a8a8;
-    --c-B8B8B8: #b8b8b8;
-    --c-C0C0C0: #c0c0c0;
-    --c-CDCDCD: #cdcdcd;
-    --c-D0D0D0: #d0d0d0;
-    --c-D2D2D2: #d2d2d2;
-    --c-E0E0E0: #e0e0e0;
-    --c-E5E5E5: #e5e5e5;
-    --c-E8E8E8: #e8e8e8;
-    --c-EEEEEE: #eeeeee;
-    --c-F0F0F0: #f0f0f0;
-    --c-F4F4F4: #f4f4f4;
-    --c-F5F5F5: #f5f5f5;
+    /* Code editor (dark mode overrides) */
+    --code-bg: #1f1f1f;
+    --code-foreground: #eeeeee;
+    --code-line-number: #a8a8a8;
 
-    --c-CFCFCF: #cfcfcf;
+    /* Workspace text */
+    --text-placeholder: #8d8d8d;
+    --text-success: #22c55e;
 
-    /* Blues and cyans */
-    --c-00B0B0: #00b0b0;
-    --c-264F78: #264f78;
-    --c-2F55FF: #2f55ff;
-    --c-2FA1FF: #2fa1ff;
-    --c-336699: #336699;
-    --c-34B5FF: #34b5ff;
-    --c-601EE0: #601ee0;
-    --c-611F69: #611f69;
-    --c-802FFF: #802fff;
-    --c-8357FF: #8357ff;
-    --c-8C10FF: #8c10ff;
+    /* Status / semantic (dark overrides where needed) */
+    --error: #f87171;
+    --error-muted: #f6d2d2;
+    --error-emphasis: #b91c1c;
+    --caution: #f59e0b;
+    --success: #22c55e;
 
-    /* Greens */
-    --c-4CAF50: #4caf50;
-
-    /* Oranges / Ambers */
-    --c-F59E0B: #f59e0b;
-    --c-F97316: #f97316;
-    --c-FF972F: #ff972f;
-
-    /* Reds */
-    --c-DC2626: #dc2626;
-    --c-F6D2D2: #f6d2d2;
-    --c-F87171: #f87171;
-    --c-FF402F: #ff402f;
-    --c-B91C1C: #b91c1c;
-    --c-883827: #883827;
+    /* Brand extended */
+    --brand-knowledge: #00b0b0;
+    --selection-dark: #264f78;
 
     /* Terminal status badges */
     --terminal-status-error-bg: #491515;
@@ -405,6 +399,52 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --terminal-status-warning-bg: #3d3520;
     --terminal-status-warning-border: #5c4d1f;
     --terminal-status-warning-color: #d4a72c;
+
+    /* Badge semantic colors */
+    --badge-success-bg: rgba(34, 197, 94, 0.2);
+    --badge-success-text: #86efac;
+    --badge-error-bg: #551a1a;
+    --badge-error-text: #fca5a5;
+    --badge-gray-bg: #3a3a3a;
+    --badge-gray-text: #a8a8a8;
+    --badge-blue-bg: rgba(59, 130, 246, 0.2);
+    --badge-blue-text: #93c5fd;
+    --badge-blue-secondary-bg: rgba(51, 180, 255, 0.2);
+    --badge-blue-secondary-text: #7dd3fc;
+    --badge-purple-bg: rgba(168, 85, 247, 0.2);
+    --badge-purple-text: #d8b4fe;
+    --badge-orange-bg: rgba(249, 115, 22, 0.2);
+    --badge-orange-text: #fdba74;
+    --badge-amber-bg: rgba(245, 158, 11, 0.2);
+    --badge-amber-text: #fcd34d;
+    --badge-teal-bg: rgba(20, 184, 166, 0.2);
+    --badge-teal-text: #5eead4;
+    --badge-cyan-bg: rgba(14, 165, 233, 0.2);
+    --badge-cyan-text: #7dd3fc;
+    --badge-pink-bg: rgba(236, 72, 153, 0.2);
+    --badge-pink-text: #f9a8d4;
+
+    /* Search/highlight */
+    --highlight-search-active: #f6ad55;
+    --highlight-search: #fcd34d;
+    --highlight-match-bg: rgba(51, 180, 255, 0.2);
+    --highlight-match-text: #7dd3fc;
+
+    /* Selection */
+    --selection-bg: #264f78;
+
+    /* Active indicator */
+    --indicator-online: #33c482;
+    --indicator-active: #4ade80;
+    --indicator-inactive: #b7b7b7;
+    --indicator-seat-filled: #34b5ff;
+
+    /* Scrollbar colors */
+    --scrollbar-thumb-color: #5a5a5a;
+    --scrollbar-thumb-hover-color: #6a6a6a;
+
+    /* Shadow scale - dark */
+    --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -445,7 +485,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     caret-color: var(--text-primary);
   }
 
-  .dark body {
+  body {
     @apply antialiased;
   }
   ::-webkit-scrollbar {
@@ -458,12 +498,12 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #c0c0c0;
+    background-color: var(--scrollbar-thumb-color);
     border-radius: var(--radius);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: #a8a8a8;
+    background-color: var(--scrollbar-thumb-hover-color);
   }
 
   /* Dark Mode Global Scrollbar */
@@ -472,20 +512,20 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background-color: #5a5a5a;
+    background-color: var(--scrollbar-thumb-color);
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background-color: #6a6a6a;
+    background-color: var(--scrollbar-thumb-hover-color);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: #c0c0c0 transparent;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
   }
 
   .dark * {
-    scrollbar-color: #5a5a5a transparent;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
   }
 
   .copilot-scrollable {
@@ -624,13 +664,13 @@ input[type="search"]::-ms-clear {
   }
 
   .branded-button-custom {
-    background: var(--brand-primary-hex) !important;
-    border-color: var(--brand-primary-hex) !important;
+    background: var(--brand) !important;
+    border-color: var(--brand) !important;
   }
 
   .branded-button-custom:hover {
-    background: var(--brand-primary-hover-hex) !important;
-    border-color: var(--brand-primary-hover-hex) !important;
+    background: var(--brand-hover) !important;
+    border-color: var(--brand-hover) !important;
   }
 
   /**
@@ -722,12 +762,10 @@ input[type="search"]::-ms-clear {
     --base-muted-foreground: #737373;
     --gradient-primary: 263 85% 70%;
     --gradient-secondary: 336 95% 65%;
-    --brand-primary-hex: #6f3dfa;
-    --brand-primary-hover-hex: #6338d9;
-    --brand-accent-hex: #6f3dfa;
-    --brand-accent-hover-hex: #6f3dfa;
-    --brand-background-hex: #ffffff;
-    --surface-elevated: #202020;
+    --brand: #6f3dfa;
+    --brand-hover: #6338d9;
+    --brand-link: #6f3dfa;
+    --brand-link-hover: #6f3dfa;
   }
 
   .dark {
@@ -761,12 +799,10 @@ input[type="search"]::-ms-clear {
     --base-muted-foreground: #a3a3a3;
     --gradient-primary: 263 90% 75%;
     --gradient-secondary: 336 100% 72%;
-    --brand-primary-hex: #701ffc;
-    --brand-primary-hover-hex: #802fff;
-    --brand-accent-hex: #9d54ff;
-    --brand-accent-hover-hex: #a66fff;
-    --brand-background-hex: #0c0c0c;
-    --surface-elevated: #202020;
+    --brand: #701ffc;
+    --brand-hover: #802fff;
+    --brand-link: #9d54ff;
+    --brand-link-hover: #a66fff;
   }
 }
 
diff --git a/apps/sim/app/api/chat/route.ts b/apps/sim/app/api/chat/route.ts
index ef906239e8..b723323801 100644
--- a/apps/sim/app/api/chat/route.ts
+++ b/apps/sim/app/api/chat/route.ts
@@ -165,7 +165,7 @@ export async function POST(request: NextRequest) {
       // Merge customizations with the additional fields
       const mergedCustomizations = {
         ...(customizations || {}),
-        primaryColor: customizations?.primaryColor || 'var(--brand-primary-hover-hex)',
+        primaryColor: customizations?.primaryColor || 'var(--brand-hover)',
         welcomeMessage: customizations?.welcomeMessage || 'Hi there! How can I help you today?',
       }
 
diff --git a/apps/sim/app/changelog/components/changelog-content.tsx b/apps/sim/app/changelog/components/changelog-content.tsx
index d8f3e687e9..3befc2cf99 100644
--- a/apps/sim/app/changelog/components/changelog-content.tsx
+++ b/apps/sim/app/changelog/components/changelog-content.tsx
@@ -47,35 +47,37 @@ export default async function ChangelogContent() {
     <div className='min-h-screen'>
       <div className='relative grid md:grid-cols-2'>
         {/* Left intro panel */}
-        <div className='relative top-0 overflow-hidden border-[#2A2A2A] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
+        <div className='relative top-0 overflow-hidden border-[var(--landing-bg-elevated)] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
           <div className='relative mx-auto h-full max-w-xl md:flex md:flex-col md:justify-center'>
-            <h1 className='mt-6 font-[500] text-4xl tracking-tight sm:text-5xl'>Changelog</h1>
-            <p className='mt-4 text-[#999] text-sm'>
+            <h1 className='mt-6 text-balance font-[500] text-4xl tracking-tight sm:text-5xl'>
+              Changelog
+            </h1>
+            <p className='mt-4 text-[var(--landing-text-muted)] text-sm'>
               Stay up-to-date with the latest features, improvements, and bug fixes in Sim. All
               changes are documented here with detailed release notes.
             </p>
-            <hr className='mt-6 border-[#2A2A2A]' />
+            <hr className='mt-6 border-[var(--landing-bg-elevated)]' />
 
             <div className='mt-6 flex flex-wrap items-center gap-3 text-sm'>
               <Link
                 href='https://github.com/simstudioai/sim/releases'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] py-[5px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                className='inline-flex items-center gap-2 rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-[9px] py-[5px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
               >
                 <Github className='h-4 w-4' />
                 View on GitHub
               </Link>
               <Link
                 href='https://docs.sim.ai'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+                className='inline-flex items-center gap-2 rounded-[5px] border border-[var(--landing-border-strong)] px-[9px] py-[5px] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
               >
                 <BookOpen className='h-4 w-4' />
                 Documentation
               </Link>
               <Link
                 href='/changelog.xml'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+                className='inline-flex items-center gap-2 rounded-[5px] border border-[var(--landing-border-strong)] px-[9px] py-[5px] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
               >
                 <Rss className='h-4 w-4' />
                 RSS Feed
diff --git a/apps/sim/app/changelog/components/timeline-list.tsx b/apps/sim/app/changelog/components/timeline-list.tsx
index 968d80ea08..e940bb98bb 100644
--- a/apps/sim/app/changelog/components/timeline-list.tsx
+++ b/apps/sim/app/changelog/components/timeline-list.tsx
@@ -98,7 +98,7 @@ export default function ChangelogList({ initialEntries }: Props) {
         <div key={entry.tag}>
           <div className='flex items-center justify-between gap-4'>
             <div className='flex items-center gap-2'>
-              <div className='font-[500] text-[#ECECEC] text-[18px] tracking-tight'>
+              <div className='font-[500] text-[var(--landing-text)] text-lg tracking-tight'>
                 {entry.tag}
               </div>
               {entry.contributors && entry.contributors.length > 0 && (
@@ -113,7 +113,7 @@ export default function ChangelogList({ initialEntries }: Props) {
                       title={`@${contributor}`}
                       className='block'
                     >
-                      <Avatar className='size-6 ring-2 ring-[#1C1C1C]'>
+                      <Avatar className='size-6 ring-2 ring-[var(--landing-bg)]'>
                         <AvatarImage
                           src={`https://avatars.githubusercontent.com/${contributor}`}
                           alt={`@${contributor}`}
@@ -124,14 +124,14 @@ export default function ChangelogList({ initialEntries }: Props) {
                     </a>
                   ))}
                   {entry.contributors.length > 5 && (
-                    <div className='relative flex size-6 items-center justify-center rounded-full bg-[#2A2A2A] text-[#ECECEC] text-[10px] ring-2 ring-[#1C1C1C] hover:z-10'>
+                    <div className='relative flex size-6 items-center justify-center rounded-full bg-[var(--landing-bg-elevated)] text-[var(--landing-text)] text-micro ring-2 ring-[var(--landing-bg)] hover:z-10'>
                       +{entry.contributors.length - 5}
                     </div>
                   )}
                 </div>
               )}
             </div>
-            <div className='text-[#999] text-xs'>
+            <div className='text-[var(--landing-text-muted)] text-xs'>
               {new Date(entry.date).toLocaleDateString('en-US', {
                 year: 'numeric',
                 month: 'short',
@@ -146,7 +146,7 @@ export default function ChangelogList({ initialEntries }: Props) {
                 h2: ({ children, ...props }) =>
                   isContributorsLabel(children) ? null : (
                     <h3
-                      className='mt-5 mb-2 font-[500] text-[#ECECEC] text-[13px] tracking-tight'
+                      className='mt-5 mb-2 font-[500] text-[var(--landing-text)] text-small tracking-tight'
                       {...props}
                     >
                       {children}
@@ -155,7 +155,7 @@ export default function ChangelogList({ initialEntries }: Props) {
                 h3: ({ children, ...props }) =>
                   isContributorsLabel(children) ? null : (
                     <h4
-                      className='mt-4 mb-1 font-[500] text-[#ECECEC] text-[13px] tracking-tight'
+                      className='mt-4 mb-1 font-[500] text-[var(--landing-text)] text-small tracking-tight'
                       {...props}
                     >
                       {children}
@@ -170,25 +170,31 @@ export default function ChangelogList({ initialEntries }: Props) {
                   const text = String(children)
                   if (/^\s*contributors\s*:?\s*$/i.test(text)) return null
                   return (
-                    <li className='text-[#999] text-[13px] leading-relaxed' {...props}>
+                    <li
+                      className='text-[var(--landing-text-muted)] text-small leading-relaxed'
+                      {...props}
+                    >
                       {children}
                     </li>
                   )
                 },
                 p: ({ children, ...props }) =>
                   /^\s*contributors\s*:?\s*$/i.test(String(children)) ? null : (
-                    <p className='mb-3 text-[#999] text-[13px] leading-relaxed' {...props}>
+                    <p
+                      className='mb-3 text-[var(--landing-text-muted)] text-small leading-relaxed'
+                      {...props}
+                    >
                       {children}
                     </p>
                   ),
                 strong: ({ children, ...props }) => (
-                  <strong className='font-[500] text-[#ECECEC]' {...props}>
+                  <strong className='font-[500] text-[var(--landing-text)]' {...props}>
                     {children}
                   </strong>
                 ),
                 code: ({ children, ...props }) => (
                   <code
-                    className='rounded bg-[#2A2A2A] px-1 py-0.5 font-mono text-[#ECECEC] text-xs'
+                    className='rounded bg-[var(--landing-bg-elevated)] px-1 py-0.5 font-mono text-[var(--landing-text)] text-xs'
                     {...props}
                   >
                     {children}
@@ -217,7 +223,7 @@ export default function ChangelogList({ initialEntries }: Props) {
             type='button'
             onClick={loadMore}
             disabled={loading}
-            className='rounded-[5px] border border-[#3d3d3d] px-3 py-1.5 text-[#ECECEC] text-[13px] transition-colors hover:bg-[#2A2A2A] disabled:opacity-60'
+            className='rounded-[5px] border border-[var(--landing-border-strong)] px-3 py-1.5 text-[var(--landing-text)] text-small transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:opacity-60'
           >
             {loading ? 'Loading…' : 'Show more'}
           </button>
diff --git a/apps/sim/app/changelog/layout.tsx b/apps/sim/app/changelog/layout.tsx
index 5fbd289673..e392181c18 100644
--- a/apps/sim/app/changelog/layout.tsx
+++ b/apps/sim/app/changelog/layout.tsx
@@ -7,7 +7,7 @@ export default async function ChangelogLayout({ children }: { children: React.Re
   const blogPosts = await getNavBlogPosts()
   return (
     <div
-      className={`${martianMono.variable} relative min-h-screen bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]`}
+      className={`${martianMono.variable} relative min-h-screen bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]`}
     >
       <header>
         <Navbar blogPosts={blogPosts} />
diff --git a/apps/sim/app/changelog/loading.tsx b/apps/sim/app/changelog/loading.tsx
index e81c5c19e0..695c11a3a4 100644
--- a/apps/sim/app/changelog/loading.tsx
+++ b/apps/sim/app/changelog/loading.tsx
@@ -4,29 +4,29 @@ export default function ChangelogLoading() {
   return (
     <div className='min-h-screen'>
       <div className='relative grid md:grid-cols-2'>
-        <div className='relative top-0 overflow-hidden border-[#2A2A2A] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
+        <div className='relative top-0 overflow-hidden border-[var(--landing-border)] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
           <div className='relative mx-auto h-full max-w-xl md:flex md:flex-col md:justify-center'>
-            <Skeleton className='mt-6 h-[48px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='mt-4 h-[14px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='mt-[4px] h-[14px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
-            <Skeleton className='mt-6 h-[1px] w-full bg-[#2A2A2A]' />
+            <Skeleton className='mt-6 h-[48px] w-[200px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='mt-4 h-[14px] w-[300px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='mt-1 h-[14px] w-[260px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+            <Skeleton className='mt-6 h-[1px] w-full bg-[var(--landing-bg-elevated)]' />
             <div className='mt-6 flex flex-wrap items-center gap-3'>
-              <Skeleton className='h-[32px] w-[130px] rounded-[5px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[32px] w-[120px] rounded-[5px] bg-[#2A2A2A]' />
-              <Skeleton className='h-[32px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[32px] w-[130px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[32px] w-[120px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
+              <Skeleton className='h-[32px] w-[80px] rounded-[5px] bg-[var(--landing-bg-elevated)]' />
             </div>
           </div>
         </div>
         <div className='px-6 py-16 sm:px-10 md:px-12 md:py-24'>
-          <div className='max-w-2xl space-y-[32px]'>
+          <div className='max-w-2xl space-y-8'>
             {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className='space-y-[12px]'>
-                <Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
-                <Skeleton className='h-[14px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
-                <div className='space-y-[8px]'>
-                  <Skeleton className='h-[14px] w-full rounded-[4px] bg-[#2A2A2A]' />
-                  <Skeleton className='h-[14px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
-                  <Skeleton className='h-[14px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
+              <div key={i} className='space-y-3'>
+                <Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+                <Skeleton className='h-[14px] w-[100px] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+                <div className='space-y-2'>
+                  <Skeleton className='h-[14px] w-full rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+                  <Skeleton className='h-[14px] w-[90%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
+                  <Skeleton className='h-[14px] w-[75%] rounded-[4px] bg-[var(--landing-bg-elevated)]' />
                 </div>
               </div>
             ))}
diff --git a/apps/sim/app/chat/[identifier]/chat.tsx b/apps/sim/app/chat/[identifier]/chat.tsx
index 549e450d4a..816ae3c35f 100644
--- a/apps/sim/app/chat/[identifier]/chat.tsx
+++ b/apps/sim/app/chat/[identifier]/chat.tsx
@@ -466,7 +466,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   if (authRequired) {
     // const title = new URLSearchParams(window.location.search).get('title') || 'chat'
     // const primaryColor =
-    //   new URLSearchParams(window.location.search).get('color') || 'var(--brand-primary-hover-hex)'
+    //   new URLSearchParams(window.location.search).get('color') || 'var(--brand-hover)'
 
     if (authRequired === 'password') {
       return <PasswordAuth identifier={identifier} onAuthSuccess={handleAuthSuccess} />
diff --git a/apps/sim/app/chat/components/auth/email/email-auth.tsx b/apps/sim/app/chat/components/auth/email/email-auth.tsx
index 72cb122d4f..ade89db3f4 100644
--- a/apps/sim/app/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/chat/components/auth/email/email-auth.tsx
@@ -182,18 +182,18 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
                   {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   {showOtpVerification
                     ? `A verification code has been sent to ${email}`
                     : 'This chat requires email verification'}
@@ -246,7 +246,7 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                   </form>
                 ) : (
                   <div className='space-y-6'>
-                    <p className='text-center text-[#999] text-sm'>
+                    <p className='text-center text-[var(--text-subtle)] text-sm'>
                       Enter the 6-digit code to verify your account. If you don't see it in your
                       inbox, check your spam folder.
                     </p>
@@ -301,7 +301,7 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                           </span>
                         ) : (
                           <button
-                            className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+                            className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
                             onClick={handleResendOtp}
                             disabled={isVerifyingOtp || isResendDisabled}
                           >
@@ -311,14 +311,14 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                       </p>
                     </div>
 
-                    <div className='text-center font-light text-[14px]'>
+                    <div className='text-center font-light text-sm'>
                       <button
                         onClick={() => {
                           setShowOtpVerification(false)
                           setOtpValue('')
                           setAuthError(null)
                         }}
-                        className='font-medium text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+                        className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
                       >
                         Change email
                       </button>
diff --git a/apps/sim/app/chat/components/auth/password/password-auth.tsx b/apps/sim/app/chat/components/auth/password/password-auth.tsx
index c25f63b5c3..832f450887 100644
--- a/apps/sim/app/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/chat/components/auth/password/password-auth.tsx
@@ -80,18 +80,18 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
                   Password Required
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   This chat is password-protected
                 </p>
               </div>
@@ -103,47 +103,59 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
                 }}
                 className='mt-8 w-full max-w-[410px] space-y-6'
               >
-                <div className='space-y-2'>
+                <div className='space-y-6'>
                   <div className='flex items-center justify-between'>
                     <Label htmlFor='password'>Password</Label>
                   </div>
                   <div className='relative'>
-                    <Input
-                      id='password'
-                      name='password'
-                      required
-                      type={showPassword ? 'text' : 'password'}
-                      autoCapitalize='none'
-                      autoComplete='new-password'
-                      autoCorrect='off'
-                      placeholder='Enter password'
-                      value={password}
-                      onChange={handlePasswordChange}
-                      onKeyDown={handleKeyDown}
-                      className={cn(
-                        'pr-10',
-                        showValidationError &&
-                          passwordErrors.length > 0 &&
-                          'border-red-500 focus:border-red-500'
-                      )}
-                      autoFocus
-                    />
-                    <button
-                      type='button'
-                      onClick={() => setShowPassword(!showPassword)}
-                      className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] hover:text-[#ECECEC]'
-                      aria-label={showPassword ? 'Hide password' : 'Show password'}
-                    >
-                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                    </button>
-                  </div>
-                  {showValidationError && passwordErrors.length > 0 && (
-                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                      {passwordErrors.map((error, index) => (
-                        <p key={index}>{error}</p>
-                      ))}
+                    <div className='relative'>
+                      <Input
+                        id='password'
+                        name='password'
+                        required
+                        type={showPassword ? 'text' : 'password'}
+                        autoCapitalize='none'
+                        autoComplete='new-password'
+                        autoCorrect='off'
+                        placeholder='Enter password'
+                        value={password}
+                        onChange={handlePasswordChange}
+                        onKeyDown={handleKeyDown}
+                        className={cn(
+                          'pr-10',
+                          showValidationError &&
+                            passwordErrors.length > 0 &&
+                            'border-red-500 focus:border-red-500'
+                        )}
+                        autoFocus
+                      />
+                      <button
+                        type='button'
+                        onClick={() => setShowPassword(!showPassword)}
+                        className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] hover:text-[var(--landing-text)]'
+                        aria-label={showPassword ? 'Hide password' : 'Show password'}
+                      >
+                        {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                      </button>
                     </div>
-                  )}
+                    <div
+                      className={cn(
+                        'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                        showValidationError && passwordErrors.length > 0
+                          ? 'grid-rows-[1fr]'
+                          : 'grid-rows-[0fr]'
+                      )}
+                      aria-live='polite'
+                    >
+                      <div className='overflow-hidden'>
+                        <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                          {passwordErrors.map((error, index) => (
+                            <p key={index}>{error}</p>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
 
                 <BrandedButton
diff --git a/apps/sim/app/chat/components/header/header.tsx b/apps/sim/app/chat/components/header/header.tsx
index 43a9d7d7bb..e78fa05bef 100644
--- a/apps/sim/app/chat/components/header/header.tsx
+++ b/apps/sim/app/chat/components/header/header.tsx
@@ -20,13 +20,13 @@ interface ChatHeaderProps {
 
 export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
   const brand = useBrandConfig()
-  const primaryColor = chatConfig?.customizations?.primaryColor || 'var(--brand-primary-hex)'
+  const primaryColor = chatConfig?.customizations?.primaryColor || 'var(--brand)'
   const customImage = chatConfig?.customizations?.imageUrl || chatConfig?.customizations?.logoUrl
 
   return (
     <nav
       aria-label='Chat navigation'
-      className={`flex w-full items-center justify-between px-4 pt-[12px] pb-[21px] sm:px-8 sm:pt-[8.5px] md:px-[44px] md:pt-[16px]`}
+      className={`flex w-full items-center justify-between px-4 pt-3 pb-[21px] sm:px-8 sm:pt-[8.5px] md:px-[44px] md:pt-4`}
     >
       <div className='flex items-center gap-[34px]'>
         <div className='flex items-center gap-3'>
@@ -40,19 +40,19 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
               className='h-6 w-6 rounded-md object-cover'
             />
           )}
-          <h2 className='font-medium text-[18px] text-foreground'>
+          <h2 className='font-medium text-foreground text-lg'>
             {chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
           </h2>
         </div>
       </div>
 
       {!brand.logoUrl && (
-        <div className='flex items-center gap-[16px]'>
+        <div className='flex items-center gap-4'>
           <a
             href='https://github.com/simstudioai/sim'
             target='_blank'
             rel='noopener noreferrer'
-            className='flex items-center gap-2 text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+            className='flex items-center gap-2 text-md text-muted-foreground transition-colors hover:text-foreground'
             aria-label={`GitHub repository - ${starCount} stars`}
           >
             <GithubIcon className='h-[16px] w-[16px]' aria-hidden='true' />
diff --git a/apps/sim/app/chat/components/input/input.tsx b/apps/sim/app/chat/components/input/input.tsx
index 25402cf475..d1742f8069 100644
--- a/apps/sim/app/chat/components/input/input.tsx
+++ b/apps/sim/app/chat/components/input/input.tsx
@@ -303,7 +303,7 @@ export const ChatInput: React.FC<{
                             <div className='truncate font-medium text-gray-800 text-xs dark:text-gray-200'>
                               {file.name}
                             </div>
-                            <div className='text-[10px] text-gray-500 dark:text-gray-400'>
+                            <div className='text-gray-500 text-micro dark:text-gray-400'>
                               {formatFileSize(file.size)}
                             </div>
                           </div>
diff --git a/apps/sim/app/chat/components/message/components/file-download.tsx b/apps/sim/app/chat/components/message/components/file-download.tsx
index be884b1a2a..23f1e31c8f 100644
--- a/apps/sim/app/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/chat/components/message/components/file-download.tsx
@@ -119,7 +119,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
       <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center'>{renderIcon()}</div>
       <div className='min-w-0 flex-1 text-left'>
         <div className='w-[100px] truncate text-xs'>{file.name}</div>
-        <div className='text-[10px] text-[var(--text-muted)]'>{formatFileSize(file.size)}</div>
+        <div className='text-[var(--text-muted)] text-micro'>{formatFileSize(file.size)}</div>
       </div>
       <div className='flex-shrink-0'>
         {isDownloading ? (
diff --git a/apps/sim/app/chat/components/message/components/markdown-renderer.tsx b/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
index 8aa66579d5..c0152c53b2 100644
--- a/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
+++ b/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
@@ -208,7 +208,7 @@ const MarkdownRenderer = memo(function MarkdownRenderer({
   const processedContent = content.trim()
 
   return (
-    <div className='space-y-4 break-words font-sans text-[#0D0D0D] text-base leading-relaxed dark:text-gray-100'>
+    <div className='space-y-4 break-words font-sans text-[var(--text-primary)] text-base leading-relaxed dark:text-gray-100'>
       <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={components}>
         {processedContent}
       </ReactMarkdown>
diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
index a9186ae020..e4fac1eca7 100644
--- a/apps/sim/app/chat/components/message/message.tsx
+++ b/apps/sim/app/chat/components/message/message.tsx
@@ -146,7 +146,7 @@ export const ClientChatMessage = memo(
                                 {attachment.name}
                               </div>
                               {attachment.size && (
-                                <div className='text-[10px] text-gray-500 md:text-xs dark:text-gray-400'>
+                                <div className='text-gray-500 text-micro md:text-xs dark:text-gray-400'>
                                   {formatFileSize(attachment.size)}
                                 </div>
                               )}
@@ -163,7 +163,7 @@ export const ClientChatMessage = memo(
             {/* Only render message bubble if there's actual text content (not just file count message) */}
             {message.content && !String(message.content).startsWith('Sent') && (
               <div className='flex justify-end'>
-                <div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
+                <div className='max-w-[80%] rounded-3xl bg-[var(--surface-4)] px-4 py-3 dark:bg-gray-600'>
                   <div className='whitespace-pre-wrap break-words text-base text-gray-800 leading-relaxed dark:text-gray-100'>
                     {isJsonObject ? (
                       <pre>{JSON.stringify(message.content, null, 2)}</pre>
diff --git a/apps/sim/app/form/[identifier]/components/form-field.tsx b/apps/sim/app/form/[identifier]/components/form-field.tsx
index f51f0dd4f9..ace234fc47 100644
--- a/apps/sim/app/form/[identifier]/components/form-field.tsx
+++ b/apps/sim/app/form/[identifier]/components/form-field.tsx
@@ -95,7 +95,7 @@ export function FormField({
               onCheckedChange={onChange}
               style={value ? { backgroundColor: primaryColor } : undefined}
             />
-            <span className={'text-[14px] text-muted-foreground'}>{value ? 'Yes' : 'No'}</span>
+            <span className={'text-muted-foreground text-sm'}>{value ? 'Yes' : 'No'}</span>
           </div>
         )
 
@@ -122,7 +122,7 @@ export function FormField({
             placeholder={
               placeholder || (field.type === 'array' ? '["item1", "item2"]' : '{"key": "value"}')
             }
-            className='min-h-[100px] rounded-[10px] font-mono text-[13px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
+            className='min-h-[100px] rounded-[10px] font-mono text-small shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
           />
         )
 
@@ -141,7 +141,7 @@ export function FormField({
               className={cn(
                 'flex cursor-pointer flex-col items-center justify-center rounded-[10px] border-2 border-dashed px-6 py-8 transition-colors',
                 isDragging
-                  ? 'border-[var(--brand-primary-hex)] bg-[var(--brand-primary-hex)]/5'
+                  ? 'border-[var(--brand)] bg-[color-mix(in_srgb,var(--brand)_5%,transparent)]'
                   : 'border-border hover:border-muted-foreground/50'
               )}
             >
@@ -156,7 +156,7 @@ export function FormField({
                 className='mb-2 h-6 w-6 text-muted-foreground'
                 style={isDragging ? { color: primaryColor } : undefined}
               />
-              <p className={'text-center text-[14px] text-muted-foreground'}>
+              <p className={'text-center text-muted-foreground text-sm'}>
                 <span style={{ color: primaryColor }} className='font-medium'>
                   Click to upload
                 </span>{' '}
@@ -169,13 +169,13 @@ export function FormField({
                 {files.map((file, idx) => (
                   <div
                     key={idx}
-                    className='flex items-center justify-between rounded-[8px] border border-border bg-muted/30 px-3 py-2'
+                    className='flex items-center justify-between rounded-lg border border-border bg-muted/30 px-3 py-2'
                   >
                     <div className='min-w-0 flex-1'>
-                      <p className={'truncate font-medium text-[13px] text-foreground'}>
+                      <p className={'truncate font-medium text-foreground text-small'}>
                         {file.name}
                       </p>
-                      <p className={'text-[12px] text-muted-foreground'}>
+                      <p className={'text-caption text-muted-foreground'}>
                         {formatFileSize(file.size)}
                       </p>
                     </div>
@@ -212,7 +212,7 @@ export function FormField({
 
   return (
     <div className='space-y-2'>
-      <Label className={'font-medium text-[14px] text-foreground'}>
+      <Label className={'font-medium text-foreground text-sm'}>
         {displayLabel}
         {isRequired && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
       </Label>
diff --git a/apps/sim/app/form/[identifier]/components/password-auth.tsx b/apps/sim/app/form/[identifier]/components/password-auth.tsx
index d6c6f54e91..f18f3b3892 100644
--- a/apps/sim/app/form/[identifier]/components/password-auth.tsx
+++ b/apps/sim/app/form/[identifier]/components/password-auth.tsx
@@ -33,18 +33,18 @@ export function PasswordAuth({ onSubmit, error }: PasswordAuthProps) {
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
                   Password Required
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   Enter the password to access this form.
                 </p>
               </div>
@@ -65,12 +65,12 @@ export function PasswordAuth({ onSubmit, error }: PasswordAuthProps) {
                     <button
                       type='button'
                       onClick={() => setShowPassword(!showPassword)}
-                      className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] hover:text-[#ECECEC]'
+                      className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] hover:text-[var(--landing-text)]'
                     >
                       {showPassword ? <EyeOff className='h-4 w-4' /> : <Eye className='h-4 w-4' />}
                     </button>
                   </div>
-                  {error && <p className='text-[14px] text-red-500'>{error}</p>}
+                  {error && <p className='text-red-500 text-sm'>{error}</p>}
                 </div>
 
                 <BrandedButton
diff --git a/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx b/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx
index 29e78da43b..339c24e4d2 100644
--- a/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx
+++ b/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx
@@ -9,7 +9,7 @@ export function PoweredBySim() {
   return (
     <div
       className={
-        'fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed'
+        'fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[var(--text-subtle)] text-small leading-relaxed'
       }
     >
       <a
diff --git a/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx b/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx
index 2e617c7fa1..773995011e 100644
--- a/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx
+++ b/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx
@@ -6,7 +6,7 @@ interface ThankYouScreenProps {
   primaryColor?: string
 }
 
-/** Default green color matching --brand-tertiary-2 */
+/** Default green color matching --brand-accent */
 const DEFAULT_THANK_YOU_COLOR = '#33C482'
 
 /** Legacy blue default that should be treated as "no custom color" */
@@ -32,7 +32,7 @@ export function ThankYouScreen({ title, message, primaryColor }: ThankYouScreenP
         >
           {title}
         </h2>
-        <p className={'mt-3 max-w-md font-[380] text-[#999] text-[16px]'}>{message}</p>
+        <p className={'mt-3 max-w-md font-[380] text-[var(--text-subtle)] text-md'}>{message}</p>
       </div>
     </main>
   )
diff --git a/apps/sim/app/form/[identifier]/form.tsx b/apps/sim/app/form/[identifier]/form.tsx
index 47a2e93e07..cd5cfe305c 100644
--- a/apps/sim/app/form/[identifier]/form.tsx
+++ b/apps/sim/app/form/[identifier]/form.tsx
@@ -221,7 +221,7 @@ export default function Form({ identifier }: { identifier: string }) {
     [identifier, fetchFormConfig]
   )
 
-  const primaryColor = formConfig?.customizations?.primaryColor || 'var(--brand-primary-hex)'
+  const primaryColor = formConfig?.customizations?.primaryColor || 'var(--brand)'
 
   if (isLoading && !authRequired) {
     return <FormLoadingState />
@@ -238,7 +238,7 @@ export default function Form({ identifier }: { identifier: string }) {
   if (isSubmitted && thankYouData) {
     return (
       <AuthBackground className={`${martianMono.variable} dark font-[430] font-season`}>
-        <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
+        <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
           <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
             <ThankYouScreen
               title={thankYouData.title}
@@ -270,22 +270,24 @@ export default function Form({ identifier }: { identifier: string }) {
 
   return (
     <AuthBackground className={`${martianMono.variable} dark font-[430] font-season`}>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
         <div className='relative z-30 flex flex-1 justify-center px-4 pt-16 pb-24'>
           <div className='w-full max-w-[410px]'>
             {/* Form title */}
             <div className='mb-8 text-center'>
-              <h1 className='font-[500] text-[#ECECEC] text-[28px] tracking-tight'>
+              <h1 className='font-[500] text-[28px] text-[var(--landing-text)] tracking-tight'>
                 {formConfig.title}
               </h1>
               {formConfig.description && (
-                <p className='mt-2 font-[380] text-[#999] text-[15px]'>{formConfig.description}</p>
+                <p className='mt-2 font-[380] text-[var(--text-subtle)] text-base'>
+                  {formConfig.description}
+                </p>
               )}
             </div>
 
             <form onSubmit={handleSubmit} className='space-y-6'>
               {fields.length === 0 ? (
-                <div className='rounded-[10px] border border-[#2A2A2A] bg-[#2A2A2A] p-6 text-center text-[#999]'>
+                <div className='rounded-[10px] border border-[var(--landing-bg-elevated)] bg-[var(--surface-4)] p-6 text-center text-[var(--text-subtle)]'>
                   This form has no fields configured.
                 </div>
               ) : (
@@ -307,7 +309,7 @@ export default function Form({ identifier }: { identifier: string }) {
               )}
 
               {error && (
-                <div className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] p-3 text-red-500 text-sm'>
+                <div className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-4)] p-3 text-red-500 text-sm'>
                   {error}
                 </div>
               )}
diff --git a/apps/sim/app/invite/components/layout.tsx b/apps/sim/app/invite/components/layout.tsx
index 63000b5375..c2e0d8e724 100644
--- a/apps/sim/app/invite/components/layout.tsx
+++ b/apps/sim/app/invite/components/layout.tsx
@@ -7,7 +7,7 @@ interface InviteLayoutProps {
 
 export default function InviteLayout({ children }: InviteLayoutProps) {
   return (
-    <div className='relative flex min-h-screen flex-col bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <div className='relative flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
       <header className='shrink-0'>
         <Navbar logoOnly />
       </header>
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index 19f03ce282..e930827a10 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -32,11 +32,13 @@ export function InviteStatusCard({
     return (
       <>
         <div className='space-y-1 text-center'>
-          <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>Loading</h1>
-          <p className='font-[380] text-[#999] text-[16px]'>{description}</p>
+          <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
+            Loading
+          </h1>
+          <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p>
         </div>
         <div className='mt-8 flex w-full items-center justify-center py-8'>
-          <Loader2 className='h-8 w-8 animate-spin text-[#999]' />
+          <Loader2 className='h-8 w-8 animate-spin text-[var(--landing-text-muted)]' />
         </div>
       </>
     )
@@ -45,8 +47,10 @@ export function InviteStatusCard({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>{title}</h1>
-        <p className='font-[380] text-[#999] text-[16px]'>{description}</p>
+        <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
+          {title}
+        </h1>
+        <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p>
       </div>
 
       <div className='mt-8 w-full max-w-[410px] space-y-3'>
@@ -66,7 +70,7 @@ export function InviteStatusCard({
             showArrow={false}
             className={
               index !== 0
-                ? 'border-[#3d3d3d] bg-transparent text-[#ECECEC] hover:border-[#3d3d3d] hover:bg-[#2A2A2A]'
+                ? 'border-[var(--landing-border-strong)] bg-transparent text-[var(--landing-text)] hover:border-[var(--landing-border-strong)] hover:bg-[var(--landing-bg-elevated)]'
                 : undefined
             }
           >
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index 5556ae4cca..1877477fbf 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -1,31 +1,37 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 import { getNavBlogPosts } from '@/lib/blog/registry'
 import AuthBackground from '@/app/(auth)/components/auth-background'
 import Navbar from '@/app/(home)/components/navbar/navbar'
 
+export const metadata: Metadata = {
+  title: 'Page Not Found',
+  robots: { index: false, follow: true },
+}
+
 const CTA_BASE =
-  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+  'inline-flex items-center h-[32px] rounded-[5px] border px-2.5 font-[430] font-season text-sm'
 
 export default async function NotFound() {
   const blogPosts = await getNavBlogPosts()
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar blogPosts={blogPosts} />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='flex flex-col items-center gap-[12px]'>
-            <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
-              Page Not Found
+          <div className='flex flex-col items-center gap-3'>
+            <h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+              Page not found
             </h1>
-            <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+            <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
               The page you&apos;re looking for doesn&apos;t exist or has been moved.
             </p>
-            <div className='mt-[12px] flex items-center gap-[8px]'>
+            <div className='mt-3 flex items-center gap-2'>
               <Link
                 href='/'
-                className={`${CTA_BASE} gap-[8px] border-[#FFFFFF] bg-[#FFFFFF] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
+                className={`${CTA_BASE} gap-2 border-white bg-white text-black transition-colors hover:border-[var(--border-1)] hover:bg-[var(--border-1)]`}
               >
                 Return to Home
               </Link>
diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx
index c028f52138..40ad9722a8 100644
--- a/apps/sim/app/templates/[id]/template.tsx
+++ b/apps/sim/app/templates/[id]/template.tsx
@@ -65,7 +65,7 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
       <div className={cn('flex flex-1', isWorkspaceContext && 'overflow-hidden')}>
         <div
           className={cn(
-            'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
+            'flex flex-1 flex-col px-6 pt-6 pb-6',
             isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
           )}
         >
@@ -73,54 +73,54 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
           <Breadcrumb items={breadcrumbItems} />
 
           {/* Template name and action buttons */}
-          <div className='mt-[14px] flex items-center justify-between'>
-            <Skeleton className='h-[27px] w-[250px] rounded-[4px]' />
-            <div className='flex items-center gap-[8px]'>
-              <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+          <div className='mt-3.5 flex items-center justify-between'>
+            <Skeleton className='h-[27px] w-[250px] rounded-sm' />
+            <div className='flex items-center gap-2'>
+              <Skeleton className='h-[32px] w-[80px] rounded-md' />
             </div>
           </div>
 
           {/* Template tagline */}
-          <div className='mt-[4px]'>
-            <Skeleton className='h-[21px] w-[400px] rounded-[4px]' />
+          <div className='mt-1'>
+            <Skeleton className='h-[21px] w-[400px] rounded-sm' />
           </div>
 
           {/* Creator and stats row */}
-          <div className='mt-[16px] flex items-center gap-[8px]'>
+          <div className='mt-4 flex items-center gap-2'>
             {/* Star icon and count */}
-            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
-            <Skeleton className='h-[21px] w-[24px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[14px] rounded-xs' />
+            <Skeleton className='h-[21px] w-[24px] rounded-sm' />
 
             {/* Views icon and count */}
-            <Skeleton className='h-[16px] w-[16px] rounded-[2px]' />
-            <Skeleton className='h-[21px] w-[32px] rounded-[4px]' />
+            <Skeleton className='h-[16px] w-[16px] rounded-xs' />
+            <Skeleton className='h-[21px] w-[32px] rounded-sm' />
 
             {/* Vertical divider */}
-            <div className='mx-[4px] mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
+            <div className='mx-1 mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
 
             {/* Creator profile pic */}
             <Skeleton className='h-[16px] w-[16px] rounded-full' />
             {/* Creator name */}
-            <Skeleton className='h-[21px] w-[100px] rounded-[4px]' />
+            <Skeleton className='h-[21px] w-[100px] rounded-sm' />
           </div>
 
           {/* Credentials needed */}
-          <div className='mt-[12px]'>
-            <Skeleton className='h-[18px] w-[280px] rounded-[4px]' />
+          <div className='mt-3'>
+            <Skeleton className='h-[18px] w-[280px] rounded-sm' />
           </div>
 
           {/* Canvas preview */}
-          <div className='relative mt-[24px] h-[450px] w-full flex-shrink-0 overflow-hidden rounded-[8px] border border-[var(--border)]'>
+          <div className='relative mt-6 h-[450px] w-full flex-shrink-0 overflow-hidden rounded-lg border border-[var(--border)]'>
             <Skeleton className='h-full w-full rounded-none' />
           </div>
 
           {/* About this Workflow */}
           <div className='mt-8'>
-            <Skeleton className='mb-4 h-[24px] w-[180px] rounded-[4px]' />
+            <Skeleton className='mb-4 h-[24px] w-[180px] rounded-sm' />
             <div className='space-y-2'>
-              <Skeleton className='h-[18px] w-full rounded-[4px]' />
-              <Skeleton className='h-[18px] w-[90%] rounded-[4px]' />
-              <Skeleton className='h-[18px] w-[75%] rounded-[4px]' />
+              <Skeleton className='h-[18px] w-full rounded-sm' />
+              <Skeleton className='h-[18px] w-[90%] rounded-sm' />
+              <Skeleton className='h-[18px] w-[75%] rounded-sm' />
             </div>
           </div>
         </div>
@@ -624,7 +624,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
       <div className={cn('flex flex-1', isWorkspaceContext && 'overflow-hidden')}>
         <div
           className={cn(
-            'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
+            'flex flex-1 flex-col px-6 pt-6 pb-6',
             isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
           )}
         >
@@ -632,11 +632,11 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
           <Breadcrumb items={breadcrumbItems} />
 
           {/* Template name and action buttons */}
-          <div className='mt-[14px] flex items-center justify-between'>
-            <h1 className='font-medium text-[18px] text-[var(--text-primary)]'>{template.name}</h1>
+          <div className='mt-3.5 flex items-center justify-between'>
+            <h1 className='font-medium text-[var(--text-primary)] text-lg'>{template.name}</h1>
 
             {/* Action buttons */}
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               {/* Approve/Reject buttons for super users */}
               {isSuperUser && template.status === 'pending' && (
                 <>
@@ -644,7 +644,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     variant='active'
                     onClick={handleApprove}
                     disabled={isApproving}
-                    className='h-[32px] rounded-[6px]'
+                    className='h-[32px] rounded-md'
                   >
                     {isApproving ? 'Approving...' : 'Approve'}
                   </Button>
@@ -652,7 +652,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     variant='active'
                     onClick={handleReject}
                     disabled={isRejecting}
-                    className='h-[32px] rounded-[6px]'
+                    className='h-[32px] rounded-md'
                   >
                     {isRejecting ? 'Rejecting...' : 'Reject'}
                   </Button>
@@ -667,7 +667,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       variant='active'
                       onClick={handleEditTemplate}
                       disabled={isEditing || (!isWorkspaceContext && hasWorkspaceAccess === false)}
-                      className='h-[32px] rounded-[6px]'
+                      className='h-[32px] rounded-md'
                     >
                       {isEditing ? 'Opening...' : 'Edit'}
                     </Button>
@@ -681,7 +681,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                           variant='active'
                           onClick={() => setShowWorkspaceSelectorForEdit(true)}
                           disabled={isUsing || isLoadingWorkspaces}
-                          className='h-[32px] rounded-[6px]'
+                          className='h-[32px] rounded-md'
                         >
                           {isUsing ? 'Importing...' : isLoadingWorkspaces ? 'Loading...' : 'Edit'}
                           <ChevronDown className='ml-2 h-4 w-4' />
@@ -700,7 +700,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             >
                               <div className='flex flex-col'>
                                 <span>{workspace.name}</span>
-                                <span className='text-[11px] text-[var(--text-tertiary)] capitalize'>
+                                <span className='text-[var(--text-tertiary)] text-xs capitalize'>
                                   {workspace.permissions} access
                                 </span>
                               </div>
@@ -728,7 +728,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             : encodeURIComponent(`/templates/${template.id}`)
                         router.push(`/login?callbackUrl=${callbackUrl}`)
                       }}
-                      className='h-[32px] rounded-[6px]'
+                      className='h-[32px] rounded-md'
                     >
                       Sign in to use
                     </Button>
@@ -737,7 +737,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       variant='primary'
                       onClick={handleUseTemplate}
                       disabled={isUsing}
-                      className='!text-[#FFFFFF] h-[32px] rounded-[6px] px-[12px] text-[14px]'
+                      className='!text-[var(--white)] h-[32px] rounded-md px-3 text-sm'
                     >
                       {isUsing ? 'Creating...' : 'Use template'}
                     </Button>
@@ -748,7 +748,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
               {/* Share button */}
               <Popover open={sharePopoverOpen} onOpenChange={setSharePopoverOpen}>
                 <PopoverTrigger asChild>
-                  <Button variant='active' className='h-[32px] rounded-[6px] px-[12px]'>
+                  <Button variant='active' className='h-[32px] rounded-md px-3'>
                     <Share2 className='h-[14px] w-[14px]' />
                   </Button>
                 </PopoverTrigger>
@@ -779,13 +779,13 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
 
           {/* Template tagline */}
           {template.details?.tagline && (
-            <p className='mt-[4px] line-clamp-2 max-w-[40vw] font-medium text-[14px] text-[var(--text-tertiary)]'>
+            <p className='mt-1 line-clamp-2 max-w-[40vw] font-medium text-[var(--text-tertiary)] text-sm'>
               {template.details.tagline}
             </p>
           )}
 
           {/* Creator and stats row */}
-          <div className='mt-[16px] flex items-center gap-[8px]'>
+          <div className='mt-4 flex items-center gap-2'>
             {/* Star icon and count */}
             <Star
               onClick={handleStarToggle}
@@ -795,18 +795,16 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                 starTemplate.isPending && 'opacity-50'
               )}
             />
-            <span className='font-medium text-[14px] text-[var(--text-muted)]'>
+            <span className='font-medium text-[var(--text-muted)] text-sm'>
               {template.stars || 0}
             </span>
 
             {/* Users icon and count */}
             <ChartNoAxesColumn className='h-[16px] w-[16px] text-[var(--text-muted)]' />
-            <span className='font-medium text-[14px] text-[var(--text-muted)]'>
-              {template.views}
-            </span>
+            <span className='font-medium text-[var(--text-muted)] text-sm'>{template.views}</span>
 
             {/* Vertical divider */}
-            <div className='mx-[4px] mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
+            <div className='mx-1 mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
 
             {/* Creator profile pic */}
             {template.creator?.profileImageUrl ? (
@@ -823,8 +821,8 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
               </div>
             )}
             {/* Creator name */}
-            <div className='flex items-center gap-[4px]'>
-              <span className='font-medium text-[14px] text-[var(--text-muted)]'>
+            <div className='flex items-center gap-1'>
+              <span className='font-medium text-[var(--text-muted)] text-sm'>
                 {template.creator?.name || 'Unknown'}
               </span>
               {template.creator?.verified && <VerifiedBadge size='md' />}
@@ -834,7 +832,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
           {/* Credentials needed */}
           {Array.isArray(template.requiredCredentials) &&
             template.requiredCredentials.length > 0 && (
-              <p className='mt-[12px] font-medium text-[12px] text-[var(--text-muted)]'>
+              <p className='mt-3 font-medium text-[var(--text-muted)] text-caption'>
                 Credentials needed:{' '}
                 {template.requiredCredentials
                   .map((cred: CredentialRequirement) => {
@@ -852,15 +850,15 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
 
           {/* Canvas preview */}
           <div
-            className='relative mt-[24px] h-[450px] w-full flex-shrink-0 overflow-hidden rounded-[8px] border border-[var(--border)]'
+            className='relative mt-6 h-[450px] w-full flex-shrink-0 overflow-hidden rounded-lg border border-[var(--border)]'
             onWheelCapture={handleCanvasWheelCapture}
           >
             {renderWorkflowPreview()}
 
             {/* Last updated overlay */}
             {template.updatedAt && (
-              <div className='pointer-events-none absolute right-[12px] bottom-[12px] rounded-[4px] bg-[var(--bg)]/80 px-[8px] py-[4px] backdrop-blur-sm'>
-                <span className='font-medium text-[12px] text-[var(--text-muted)]'>
+              <div className='pointer-events-none absolute right-[12px] bottom-3 rounded-sm bg-[color-mix(in_srgb,var(--bg)_80%,transparent)] px-2 py-1 backdrop-blur-sm'>
+                <span className='font-medium text-[var(--text-muted)] text-caption'>
                   Last updated{' '}
                   {formatDistanceToNow(new Date(template.updatedAt), {
                     addSuffix: true,
@@ -917,7 +915,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     li: ({ children }) => <li className='leading-[1.4rem]'>{children}</li>,
                     code: ({ inline, children }: any) =>
                       inline ? (
-                        <code className='rounded bg-muted px-1.5 py-0.5 font-mono text-[#F59E0B] text-xs'>
+                        <code className='rounded bg-muted px-1.5 py-0.5 font-mono text-[var(--caution)] text-xs'>
                           {children}
                         </code>
                       ) : (
@@ -966,7 +964,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       variant={template.creator.verified ? 'active' : 'default'}
                       onClick={handleToggleVerification}
                       disabled={isVerifying}
-                      className='h-[28px] rounded-[6px] text-[12px]'
+                      className='h-[28px] rounded-md text-caption'
                     >
                       {isVerifying
                         ? 'Updating...'
@@ -995,7 +993,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                   {/* Creator details */}
                   <div className='flex-1'>
                     <div className='mb-[5px] flex items-center gap-3'>
-                      <div className='flex items-center gap-[6px]'>
+                      <div className='flex items-center gap-1.5'>
                         <h4 className='font-sans font-semibold text-base text-foreground'>
                           {template.creator.name}
                         </h4>
@@ -1003,7 +1001,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       </div>
 
                       {/* Social links */}
-                      <div className='flex items-center gap-[12px]'>
+                      <div className='flex items-center gap-3'>
                         {template.creator.details?.websiteUrl && (
                           <a
                             href={template.creator.details.websiteUrl}
diff --git a/apps/sim/app/templates/components/template-card.tsx b/apps/sim/app/templates/components/template-card.tsx
index dd8e3d2612..15fb0cec4c 100644
--- a/apps/sim/app/templates/components/template-card.tsx
+++ b/apps/sim/app/templates/components/template-card.tsx
@@ -29,26 +29,26 @@ interface TemplateCardProps {
 
 export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px]', className)}>
-      <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
-      <div className='mt-[14px] flex items-center justify-between'>
+    <div className={cn('h-[268px] w-full rounded-lg bg-[var(--surface-3)] p-2', className)}>
+      <div className='h-[180px] w-full animate-pulse rounded-md bg-[var(--surface-5)]' />
+      <div className='mt-3.5 flex items-center justify-between'>
         <div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-5)]' />
         <div className='flex items-center gap-[-4px]'>
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-5)]'
+              className='h-[18px] w-[18px] animate-pulse rounded-sm bg-[var(--surface-5)]'
             />
           ))}
         </div>
       </div>
 
-      <div className='mt-[14px] flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='mt-3.5 flex items-center justify-between'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-5)]' />
           <div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-5)]' />
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
           <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' />
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
@@ -196,11 +196,11 @@ function TemplateCardInner({
   return (
     <div
       onClick={handleCardClick}
-      className={cn('w-full cursor-pointer rounded-[8px] bg-[var(--surface-3)] p-[8px]', className)}
+      className={cn('w-full cursor-pointer rounded-lg bg-[var(--surface-3)] p-2', className)}
     >
       <div
         ref={previewRef}
-        className='pointer-events-none h-[180px] w-full cursor-pointer overflow-hidden rounded-[6px]'
+        className='pointer-events-none h-[180px] w-full cursor-pointer overflow-hidden rounded-md'
       >
         {normalizedState && isInView ? (
           <PreviewWorkflow
@@ -217,8 +217,8 @@ function TemplateCardInner({
         )}
       </div>
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-[var(--text-primary)]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <h3 className='truncate pr-2 pl-0.5 font-medium text-[var(--text-primary)] text-md'>
           {title}
         </h3>
 
@@ -232,7 +232,7 @@ function TemplateCardInner({
                 return (
                   <div
                     key={index}
-                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                     style={{
                       background: blockConfig.bgColor || 'gray',
                       marginLeft: index > 0 ? '-4px' : '0',
@@ -243,10 +243,10 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-7)]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--surface-7)]'
                 style={{ marginLeft: '-4px' }}
               >
-                <span className='font-medium text-[10px] text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-primary)] text-micro'>
                   +{blockTypes.length - 3}
                 </span>
               </div>
@@ -259,7 +259,7 @@ function TemplateCardInner({
               return (
                 <div
                   key={index}
-                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                   style={{
                     background: blockConfig.bgColor || 'gray',
                     marginLeft: index > 0 ? '-4px' : '0',
@@ -274,13 +274,13 @@ function TemplateCardInner({
       </div>
 
       {description && (
-        <p className='mt-[4px] truncate pl-[2px] text-[12px] text-[var(--text-tertiary)]'>
+        <p className='mt-1 truncate pl-0.5 text-[var(--text-tertiary)] text-caption'>
           {description}
         </p>
       )}
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex min-w-0 items-center gap-[8px]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <div className='flex min-w-0 items-center gap-2'>
           {authorImageUrl ? (
             <Image
               src={authorImageUrl}
@@ -295,15 +295,15 @@ function TemplateCardInner({
               <User className='h-[12px] w-[12px] text-[var(--text-muted)]' />
             </div>
           )}
-          <div className='flex min-w-0 items-center gap-[4px]'>
-            <span className='truncate font-medium text-[12px] text-[var(--text-muted)]'>
+          <div className='flex min-w-0 items-center gap-1'>
+            <span className='truncate font-medium text-[var(--text-muted)] text-caption'>
               {author}
             </span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[12px] text-[var(--text-muted)]'>
+        <div className='flex flex-shrink-0 items-center gap-1.5 font-medium text-[var(--text-muted)] text-caption'>
           <User className='h-[12px] w-[12px]' />
           <span>{usageCount}</span>
           <Star
diff --git a/apps/sim/app/templates/templates.tsx b/apps/sim/app/templates/templates.tsx
index 08fe559555..0bc56f9c74 100644
--- a/apps/sim/app/templates/templates.tsx
+++ b/apps/sim/app/templates/templates.tsx
@@ -135,21 +135,21 @@ export default function Templates({
   return (
     <div className='flex h-[100vh] flex-col'>
       <div className='flex flex-1 overflow-hidden'>
-        <div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[28px] pb-[24px]'>
+        <div className='flex flex-1 flex-col overflow-auto px-6 pt-7 pb-6'>
           <div>
-            <div className='flex items-start gap-[12px]'>
-              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#1E3A5A] bg-[#0F2A3D]'>
+            <div className='flex items-start gap-3'>
+              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-md border border-[#1E3A5A] bg-[#0F2A3D]'>
                 <Layout className='h-[14px] w-[14px] text-[#60A5FA]' />
               </div>
-              <h1 className='font-medium text-[18px]'>Templates</h1>
+              <h1 className='font-medium text-lg'>Templates</h1>
             </div>
-            <p className='mt-[10px] text-[14px] text-[var(--text-tertiary)]'>
+            <p className='mt-2.5 text-[var(--text-tertiary)] text-sm'>
               Grab a template and start building, or make one from scratch.
             </p>
           </div>
 
-          <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
+          <div className='mt-3.5 flex items-center justify-between'>
+            <div className='flex h-[32px] w-[400px] items-center gap-1.5 rounded-lg bg-[var(--surface-4)] px-2'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search'
@@ -158,10 +158,10 @@ export default function Templates({
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button
                 variant={activeTab === 'gallery' ? 'active' : 'default'}
-                className='h-[32px] rounded-[6px]'
+                className='h-[32px] rounded-md'
                 onClick={() => setActiveTab('gallery')}
               >
                 Gallery
@@ -169,7 +169,7 @@ export default function Templates({
               {isSuperUser && (
                 <Button
                   variant={activeTab === 'pending' ? 'active' : 'default'}
-                  className='h-[32px] rounded-[6px]'
+                  className='h-[32px] rounded-md'
                   onClick={() => setActiveTab('pending')}
                 >
                   Pending
@@ -178,7 +178,7 @@ export default function Templates({
             </div>
           </div>
 
-          <div className='mt-[24px] grid grid-cols-1 gap-x-[20px] gap-y-[40px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+          <div className='mt-6 grid grid-cols-1 gap-x-5 gap-y-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
             {loading ? (
               Array.from({ length: 8 }).map((_, index) => (
                 <TemplateCardSkeleton key={`skeleton-${index}`} />
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index b402a06fef..4dd853499b 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -119,13 +119,15 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>Loading</h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
+            Loading
+          </h1>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
             Validating your unsubscribe link...
           </p>
         </div>
         <div className={'mt-8 flex w-full items-center justify-center py-8'}>
-          <Loader2 className='h-8 w-8 animate-spin text-[#999]' />
+          <Loader2 className='h-8 w-8 animate-spin text-[var(--text-subtle)]' />
         </div>
       </InviteLayout>
     )
@@ -135,10 +137,10 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
             Invalid Unsubscribe Link
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>{error}</p>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>{error}</p>
         </div>
 
         <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
@@ -152,10 +154,10 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
             Important Account Emails
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
             Transactional emails like password resets, account confirmations, and security alerts
             cannot be unsubscribed from as they contain essential information for your account.
           </p>
@@ -172,10 +174,10 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
             Successfully Unsubscribed
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
             You have been unsubscribed from our emails. You will stop receiving emails within 48
             hours.
           </p>
@@ -193,13 +195,13 @@ function UnsubscribeContent() {
   return (
     <InviteLayout>
       <div className='space-y-1 text-center'>
-        <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+        <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
           Email Preferences
         </h1>
-        <p className={'font-[380] text-[#999] text-[16px]'}>
+        <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
           Choose which emails you'd like to stop receiving.
         </p>
-        <p className={'mt-2 font-[380] text-[#999] text-[14px]'}>{data?.email}</p>
+        <p className={'mt-2 font-[380] text-[var(--text-subtle)] text-sm'}>{data?.email}</p>
       </div>
 
       <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
@@ -215,7 +217,9 @@ function UnsubscribeContent() {
         </BrandedButton>
 
         <div className='py-2 text-center'>
-          <span className={'font-[380] text-[#999] text-[14px]'}>or choose specific types</span>
+          <span className={'font-[380] text-[var(--text-subtle)] text-sm'}>
+            or choose specific types
+          </span>
         </div>
 
         <BrandedButton
@@ -259,7 +263,7 @@ function UnsubscribeContent() {
       </div>
 
       <div className={'mt-6 max-w-[410px] text-center'}>
-        <p className='font-[380] text-[#999] text-[13px]'>
+        <p className='font-[380] text-[var(--text-subtle)] text-small'>
           You'll continue receiving important account emails like password resets and security
           alerts.
         </p>
@@ -274,13 +278,15 @@ export default function Unsubscribe() {
       fallback={
         <InviteLayout>
           <div className='space-y-1 text-center'>
-            <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>Loading</h1>
-            <p className={'font-[380] text-[#999] text-[16px]'}>
+            <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
+              Loading
+            </h1>
+            <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
               Validating your unsubscribe link...
             </p>
           </div>
           <div className={'mt-8 flex w-full items-center justify-center py-8'}>
-            <Loader2 className='h-8 w-8 animate-spin text-[#999]' />
+            <Loader2 className='h-8 w-8 animate-spin text-[var(--text-subtle)]' />
           </div>
         </InviteLayout>
       }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx
index af9bc4f612..465e314786 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx
@@ -22,7 +22,7 @@ export function ConversationListItem({
   actions,
 }: ConversationListItemProps) {
   return (
-    <div className={cn('flex w-full min-w-0 items-center gap-[8px]', className)}>
+    <div className={cn('flex w-full min-w-0 items-center gap-2', className)}>
       <span className='relative flex-shrink-0'>
         <Blimp className='h-[16px] w-[16px] text-[var(--text-icon)]' />
         {isActive && (
@@ -36,7 +36,7 @@ export function ConversationListItem({
         {!isActive && isUnread && (
           <span
             className={cn(
-              '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[#33C482]',
+              '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--indicator-online)]',
               statusIndicatorClassName
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
index 524a7f8860..b55513cd7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
@@ -37,12 +37,12 @@ export function ErrorState({
 
   return (
     <div className='flex h-full flex-1 items-center justify-center'>
-      <div className='flex flex-col items-center gap-[16px] text-center'>
-        <div className='flex flex-col gap-[8px]'>
-          <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>{title}</h2>
-          <p className='max-w-[300px] text-[13px] text-[var(--text-tertiary)]'>{description}</p>
+      <div className='flex flex-col items-center gap-4 text-center'>
+        <div className='flex flex-col gap-2'>
+          <h2 className='font-semibold text-[var(--text-primary)] text-md'>{title}</h2>
+          <p className='max-w-[300px] text-[var(--text-tertiary)] text-small'>{description}</p>
         </div>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           {secondaryAction && (
             <Button
               variant={secondaryAction.variant ?? 'ghost'}
@@ -54,7 +54,7 @@ export function ErrorState({
             </Button>
           )}
           <Button variant='default' size='sm' onClick={reset}>
-            <RefreshCw className='mr-[6px] h-[14px] w-[14px]' />
+            <RefreshCw className='mr-1.5 h-[14px] w-[14px]' />
             Try again
           </Button>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
index c431184475..99cae0891b 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
@@ -32,7 +32,7 @@ export function InlineRenameInput({ value, onChange, onSubmit, onCancel }: Inlin
       }}
       onBlur={onSubmit}
       onClick={(e) => e.stopPropagation()}
-      className='min-w-0 flex-1 truncate border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0'
+      className='min-w-0 flex-1 truncate border-0 bg-transparent p-0 font-medium text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0'
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index 9d86664c81..cda3f8c9cc 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -49,7 +49,7 @@ export function MessageActions({ content, requestId }: MessageActionsProps) {
         <button
           type='button'
           aria-label='More options'
-          className='flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-icon)] opacity-0 transition-colors transition-opacity hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)] focus-visible:opacity-100 focus-visible:outline-none group-hover/msg:opacity-100 data-[state=open]:opacity-100'
+          className='flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-icon)] opacity-0 transition-colors transition-opacity hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-primary)] focus-visible:opacity-100 focus-visible:outline-none group-hover/msg:opacity-100 data-[state=open]:opacity-100'
           onClick={(event) => event.stopPropagation()}
         >
           <Ellipsis className='h-3 w-3' strokeWidth={2} />
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 7c94ac098c..4a63ce8ed0 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -67,17 +67,15 @@ export const ResourceHeader = memo(function ResourceHeader({
     <div
       className={cn(
         'border-[var(--border)] border-b',
-        hasBreadcrumbs ? 'px-[16px] py-[8.5px]' : 'px-[24px] py-[10px]'
+        hasBreadcrumbs ? 'px-4 py-[8.5px]' : 'px-6 py-2.5'
       )}
     >
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-[12px]'>
+        <div className='flex items-center gap-3'>
           {hasBreadcrumbs ? (
             breadcrumbs.map((crumb, i) => (
               <Fragment key={i}>
-                {i > 0 && (
-                  <span className='select-none text-[14px] text-[var(--text-icon)]'>/</span>
-                )}
+                {i > 0 && <span className='select-none text-[var(--text-icon)] text-sm'>/</span>}
                 <BreadcrumbSegment
                   icon={i === 0 ? Icon : undefined}
                   label={crumb.label}
@@ -90,13 +88,11 @@ export const ResourceHeader = memo(function ResourceHeader({
           ) : (
             <>
               {Icon && <Icon className='h-[14px] w-[14px] text-[var(--text-icon)]' />}
-              {title && (
-                <h1 className='font-medium text-[14px] text-[var(--text-body)]'>{title}</h1>
-              )}
+              {title && <h1 className='font-medium text-[var(--text-body)] text-sm'>{title}</h1>}
             </>
           )}
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           {actions?.map((action) => {
             const ActionIcon = action.icon
             return (
@@ -105,13 +101,13 @@ export const ResourceHeader = memo(function ResourceHeader({
                 onClick={action.onClick}
                 disabled={action.disabled}
                 variant='subtle'
-                className='px-[8px] py-[4px] text-[12px]'
+                className='px-2 py-1 text-caption'
               >
                 {ActionIcon && (
                   <ActionIcon
                     className={cn(
                       'h-[14px] w-[14px] text-[var(--text-icon)]',
-                      action.label && 'mr-[6px]'
+                      action.label && 'mr-1.5'
                     )}
                   />
                 )}
@@ -124,9 +120,9 @@ export const ResourceHeader = memo(function ResourceHeader({
               onClick={create.onClick}
               disabled={create.disabled}
               variant='subtle'
-              className='px-[8px] py-[4px] text-[12px]'
+              className='px-2 py-1 text-caption'
             >
-              <Plus className='mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+              <Plus className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
               {create.label}
             </Button>
           )}
@@ -151,8 +147,8 @@ function BreadcrumbSegment({
 }) {
   if (editing?.isEditing) {
     return (
-      <span className='inline-flex items-center px-[8px] py-[4px]'>
-        {Icon && <Icon className='mr-[12px] h-[14px] w-[14px] text-[var(--text-icon)]' />}
+      <span className='inline-flex items-center px-2 py-1'>
+        {Icon && <Icon className='mr-3 h-[14px] w-[14px] text-[var(--text-icon)]' />}
         <InlineRenameInput
           value={editing.value}
           onChange={editing.onChange}
@@ -165,7 +161,7 @@ function BreadcrumbSegment({
 
   const content = (
     <>
-      {Icon && <Icon className='mr-[12px] h-[14px] w-[14px] text-[var(--text-icon)]' />}
+      {Icon && <Icon className='mr-3 h-[14px] w-[14px] text-[var(--text-icon)]' />}
       {label}
     </>
   )
@@ -174,9 +170,9 @@ function BreadcrumbSegment({
     return (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant='subtle' className='px-[8px] py-[4px] font-medium text-[14px]'>
+          <Button variant='subtle' className='px-2 py-1 font-medium text-sm'>
             {content}
-            <ChevronDown className='ml-[8px] h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
@@ -196,18 +192,14 @@ function BreadcrumbSegment({
 
   if (onClick) {
     return (
-      <Button
-        variant='subtle'
-        className='px-[8px] py-[4px] font-medium text-[14px]'
-        onClick={onClick}
-      >
+      <Button variant='subtle' className='px-2 py-1 font-medium text-sm' onClick={onClick}>
         {content}
       </Button>
     )
   }
 
   return (
-    <span className='inline-flex items-center px-[8px] py-[4px] font-medium text-[14px] text-[var(--text-body)]'>
+    <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
       {content}
     </span>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
index b64349112c..5749e243e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
@@ -77,30 +77,25 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
   if (!hasContent) return null
 
   return (
-    <div
-      className={cn(
-        'border-[var(--border)] border-b py-[10px]',
-        search ? 'px-[24px]' : 'px-[16px]'
-      )}
-    >
+    <div className={cn('border-[var(--border)] border-b py-2.5', search ? 'px-6' : 'px-4')}>
       <div className='flex items-center justify-between'>
         {search && (
           <div className='relative flex flex-1 items-center'>
             <Search className='pointer-events-none h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-            <div className='flex flex-1 items-center gap-[6px] overflow-x-auto pl-[10px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+            <div className='flex flex-1 items-center gap-1.5 overflow-x-auto pl-2.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
               {search.tags?.map((tag, i) => (
                 <Button
                   key={`${tag.label}-${tag.value}-${i}`}
                   variant='subtle'
                   className={cn(
-                    'shrink-0 px-[8px] py-[4px] text-[12px]',
+                    'shrink-0 px-2 py-1 text-caption',
                     search.highlightedTagIndex === i &&
                       'ring-1 ring-[var(--border-focus)] ring-offset-1'
                   )}
                   onClick={tag.onRemove}
                 >
                   {tag.label}: {tag.value}
-                  <span className='ml-[4px] text-[10px] text-[var(--text-icon)]'>✕</span>
+                  <span className='ml-1 text-[var(--text-icon)] text-micro'>✕</span>
                 </Button>
               ))}
               <input
@@ -112,46 +107,46 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
                 onFocus={search.onFocus}
                 onBlur={search.onBlur}
                 placeholder={search.tags?.length ? '' : (search.placeholder ?? 'Search...')}
-                className='min-w-[80px] flex-1 bg-transparent py-[4px] text-[12px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-subtle)]'
+                className='min-w-[80px] flex-1 bg-transparent py-1 text-[var(--text-secondary)] text-caption outline-none placeholder:text-[var(--text-subtle)]'
               />
             </div>
             {search.tags?.length || search.value ? (
               <button
                 type='button'
-                className='mr-[2px] flex h-[14px] w-[14px] shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover:text-[var(--text-secondary)]'
+                className='mr-0.5 flex h-[14px] w-[14px] shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover-hover:text-[var(--text-secondary)]'
                 onClick={search.onClearAll}
               >
-                <span className='text-[12px]'>✕</span>
+                <span className='text-caption'>✕</span>
               </button>
             ) : null}
             {search.dropdown && (
               <div
                 ref={search.dropdownRef}
-                className='absolute top-full left-0 z-50 mt-[6px] w-full rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+                className='absolute top-full left-0 z-50 mt-1.5 w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
               >
                 {search.dropdown}
               </div>
             )}
           </div>
         )}
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           {extras}
           {filterTags?.map((tag) => (
             <Button
               key={tag.label}
               variant='subtle'
-              className='px-[8px] py-[4px] text-[12px]'
+              className='px-2 py-1 text-caption'
               onClick={tag.onRemove}
             >
               {tag.label}
-              <span className='ml-[4px] text-[10px] text-[var(--text-icon)]'>✕</span>
+              <span className='ml-1 text-[var(--text-icon)] text-micro'>✕</span>
             </Button>
           ))}
           {filter && (
             <PopoverPrimitive.Root>
               <PopoverPrimitive.Trigger asChild>
-                <Button variant='subtle' className='px-[8px] py-[4px] text-[12px]'>
-                  <ListFilter className='mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+                <Button variant='subtle' className='px-2 py-1 text-caption'>
+                  <ListFilter className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
                   Filter
                 </Button>
               </PopoverPrimitive.Trigger>
@@ -160,7 +155,7 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
                   align='start'
                   sideOffset={6}
                   className={cn(
-                    'z-50 rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+                    'z-50 rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
                   )}
                 >
                   {filter}
@@ -181,8 +176,8 @@ function SortDropdown({ config }: { config: SortConfig }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='subtle' className='px-[8px] py-[4px] text-[12px]'>
-          <ArrowUpDown className='mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+        <Button variant='subtle' className='px-2 py-1 text-caption'>
+          <ArrowUpDown className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
           Sort
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
index 63300948f9..6882ac89a6 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
@@ -242,7 +242,7 @@ export const ResourceTable = memo(function ResourceTable({
   if (rows.length === 0 && emptyMessage) {
     return (
       <div className='flex min-h-0 flex-1 items-center justify-center'>
-        <span className='text-[13px] text-[var(--text-secondary)]'>{emptyMessage}</span>
+        <span className='text-[var(--text-secondary)] text-small'>{emptyMessage}</span>
       </div>
     )
   }
@@ -250,12 +250,12 @@ export const ResourceTable = memo(function ResourceTable({
   return (
     <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
       <div ref={headerRef} className='overflow-hidden'>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
             <tr>
               {hasCheckbox && (
-                <th className='h-10 w-[52px] py-[6px] pr-0 pl-[20px] text-left align-middle'>
+                <th className='h-10 w-[52px] py-1.5 pr-0 pl-5 text-left align-middle'>
                   <Checkbox
                     size='sm'
                     checked={selectable.isAllSelected}
@@ -270,7 +270,7 @@ export const ResourceTable = memo(function ResourceTable({
                   return (
                     <th
                       key={col.id}
-                      className='h-10 px-[24px] py-[6px] text-left align-middle font-base text-[12px] text-[var(--text-muted)]'
+                      className='h-10 px-6 py-1.5 text-left align-middle font-base text-[var(--text-muted)] text-caption'
                     >
                       {col.header}
                     </th>
@@ -279,10 +279,10 @@ export const ResourceTable = memo(function ResourceTable({
                 const isActive = internalSort.column === col.id
                 const SortIcon = internalSort.direction === 'asc' ? ArrowUp : ArrowDown
                 return (
-                  <th key={col.id} className='h-10 px-[16px] py-[6px] text-left align-middle'>
+                  <th key={col.id} className='h-10 px-4 py-1.5 text-left align-middle'>
                     <Button
                       variant='subtle'
-                      className='px-[8px] py-[4px] font-base text-[var(--text-muted)] hover:text-[var(--text-muted)]'
+                      className='px-2 py-1 font-base text-[var(--text-muted)] hover-hover:text-[var(--text-muted)]'
                       onClick={() =>
                         handleSort(
                           col.id,
@@ -292,7 +292,7 @@ export const ResourceTable = memo(function ResourceTable({
                     >
                       {col.header}
                       {isActive && (
-                        <SortIcon className='ml-[4px] h-[12px] w-[12px] text-[var(--text-icon)]' />
+                        <SortIcon className='ml-1 h-[12px] w-[12px] text-[var(--text-icon)]' />
                       )}
                     </Button>
                   </th>
@@ -303,7 +303,7 @@ export const ResourceTable = memo(function ResourceTable({
         </table>
       </div>
       <div className='min-h-0 flex-1 overflow-auto' onScroll={handleBodyScroll}>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <tbody>
             {displayRows.map((row) => {
@@ -314,7 +314,7 @@ export const ResourceTable = memo(function ResourceTable({
                   data-resource-row
                   data-row-id={row.id}
                   className={cn(
-                    'transition-colors hover:bg-[var(--surface-3)]',
+                    'transition-colors hover-hover:bg-[var(--surface-3)]',
                     onRowClick && 'cursor-pointer',
                     (selectedRowId === row.id || isSelected) && 'bg-[var(--surface-3)]'
                   )}
@@ -323,7 +323,7 @@ export const ResourceTable = memo(function ResourceTable({
                   onContextMenu={(e) => onRowContextMenu?.(e, row.id)}
                 >
                   {hasCheckbox && (
-                    <td className='w-[52px] py-[10px] pr-0 pl-[20px] align-middle'>
+                    <td className='w-[52px] py-2.5 pr-0 pl-5 align-middle'>
                       <Checkbox
                         size='sm'
                         checked={isSelected}
@@ -339,7 +339,7 @@ export const ResourceTable = memo(function ResourceTable({
                   {columns.map((col, colIdx) => {
                     const cell = row.cells[col.id]
                     return (
-                      <td key={col.id} className='px-[24px] py-[10px] align-middle'>
+                      <td key={col.id} className='px-6 py-2.5 align-middle'>
                         <CellContent
                           cell={{ ...cell, label: cell?.label || EMPTY_CELL_PLACEHOLDER }}
                           primary={colIdx === 0}
@@ -356,12 +356,12 @@ export const ResourceTable = memo(function ResourceTable({
                   'transition-colors',
                   create.disabled
                     ? 'cursor-not-allowed'
-                    : 'cursor-pointer hover:bg-[var(--surface-3)]'
+                    : 'cursor-pointer hover-hover:bg-[var(--surface-3)]'
                 )}
                 onClick={create.disabled ? undefined : create.onClick}
               >
-                <td colSpan={totalColSpan} className='px-[24px] py-[10px] align-middle'>
-                  <span className='flex items-center gap-[12px] font-medium text-[14px] text-[var(--text-secondary)]'>
+                <td colSpan={totalColSpan} className='px-6 py-2.5 align-middle'>
+                  <span className='flex items-center gap-3 font-medium text-[var(--text-secondary)] text-sm'>
                     <Plus className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
                     {create.label}
                   </span>
@@ -371,7 +371,7 @@ export const ResourceTable = memo(function ResourceTable({
           </tbody>
         </table>
         {hasMore && (
-          <div ref={loadMoreRef} className='flex items-center justify-center py-[12px]'>
+          <div ref={loadMoreRef} className='flex items-center justify-center py-3'>
             {isLoadingMore && (
               <Loader className='h-[16px] w-[16px] text-[var(--text-secondary)]' animate />
             )}
@@ -400,7 +400,7 @@ function Pagination({
   onPageChange: (page: number) => void
 }) {
   return (
-    <div className='flex items-center justify-center border-[var(--border)] border-t bg-[var(--bg)] px-4 py-[10px]'>
+    <div className='flex items-center justify-center border-[var(--border)] border-t bg-[var(--bg)] px-4 py-2.5'>
       <div className='flex items-center gap-1'>
         <Button
           variant='ghost'
@@ -409,7 +409,7 @@ function Pagination({
         >
           <ChevronLeft className='h-3.5 w-3.5' />
         </Button>
-        <div className='mx-[12px] flex items-center gap-[16px]'>
+        <div className='mx-3 flex items-center gap-4'>
           {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
             let page: number
             if (totalPages <= 5) {
@@ -428,7 +428,7 @@ function Pagination({
                 type='button'
                 onClick={() => onPageChange(page)}
                 className={cn(
-                  'font-medium text-sm transition-colors hover:text-[var(--text-body)]',
+                  'font-medium text-sm transition-colors hover-hover:text-[var(--text-body)]',
                   page === currentPage ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
                 )}
               >
@@ -454,7 +454,7 @@ function CellContent({ cell, primary }: { cell: ResourceCell; primary?: boolean
   return (
     <span
       className={cn(
-        'flex min-w-0 items-center gap-[12px] font-medium text-[14px]',
+        'flex min-w-0 items-center gap-3 font-medium text-sm',
         primary ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
       )}
     >
@@ -500,19 +500,19 @@ function DataTableSkeleton({
   return (
     <>
       <div className='overflow-hidden'>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
             <tr>
               {hasCheckbox && (
-                <th className='h-10 w-[52px] py-[10px] pr-0 pl-[20px] text-left align-middle'>
-                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                <th className='h-10 w-[52px] py-2.5 pr-0 pl-5 text-left align-middle'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-xs' />
                 </th>
               )}
               {columns.map((col) => (
                 <th
                   key={col.id}
-                  className='h-10 px-[24px] py-[10px] text-left align-middle font-base text-[var(--text-muted)]'
+                  className='h-10 px-6 py-2.5 text-left align-middle font-base text-[var(--text-muted)]'
                 >
                   <div className='flex min-h-[20px] items-center'>
                     <Skeleton className='h-[12px] w-[56px]' />
@@ -524,20 +524,20 @@ function DataTableSkeleton({
         </table>
       </div>
       <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <tbody>
             {Array.from({ length: rowCount }, (_, i) => (
               <tr key={i}>
                 {hasCheckbox && (
-                  <td className='w-[52px] py-[10px] pr-0 pl-[20px] align-middle'>
-                    <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                  <td className='w-[52px] py-2.5 pr-0 pl-5 align-middle'>
+                    <Skeleton className='h-[14px] w-[14px] rounded-xs' />
                   </td>
                 )}
                 {columns.map((col, colIdx) => (
-                  <td key={col.id} className='px-[24px] py-[10px] align-middle'>
-                    <span className='flex min-h-[21px] items-center gap-[12px]'>
-                      {colIdx === 0 && <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />}
+                  <td key={col.id} className='px-6 py-2.5 align-middle'>
+                    <span className='flex min-h-[21px] items-center gap-3'>
+                      {colIdx === 0 && <Skeleton className='h-[14px] w-[14px] rounded-xs' />}
                       <Skeleton className='h-[14px] w-[128px]' />
                     </span>
                   </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
index 0a7be9495e..b22267cd7f 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
@@ -100,7 +100,7 @@ const PREVIEW_MARKDOWN_COMPONENTS = {
       return (
         <code
           {...props}
-          className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[#F59E0B] text-[13px]'
+          className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[13px] text-[var(--caution)]'
         >
           {children}
         </code>
@@ -181,7 +181,7 @@ const MarkdownPreview = memo(function MarkdownPreview({
   )
 
   return (
-    <div ref={scrollRef} className='h-full overflow-auto p-[24px]'>
+    <div ref={scrollRef} className='h-full overflow-auto p-6'>
       {committedMarkdown}
       {incoming && (
         <div
@@ -234,14 +234,14 @@ function CsvPreview({ content }: { content: string }) {
 
   if (headers.length === 0) {
     return (
-      <div className='flex h-full items-center justify-center p-[24px]'>
+      <div className='flex h-full items-center justify-center p-6'>
         <p className='text-[13px] text-[var(--text-muted)]'>No data to display</p>
       </div>
     )
   }
 
   return (
-    <div className='h-full overflow-auto p-[24px]'>
+    <div className='h-full overflow-auto p-6'>
       <div className='overflow-x-auto rounded-md border border-[var(--border)]'>
         <table className='w-full border-collapse text-[13px]'>
           <thead className='bg-[var(--surface-2)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index 522420eb55..23697173f5 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -202,7 +202,7 @@ export function Files() {
               label: file.name,
               content:
                 listRename.editingId === file.id ? (
-                  <span className='flex min-w-0 items-center gap-[12px] font-medium text-[14px] text-[var(--text-body)]'>
+                  <span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
                     <span className='flex-shrink-0 text-[var(--text-icon)]'>
                       <Icon className='h-[14px] w-[14px]' />
                     </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index 12f5f454d4..98161bfd7e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -76,7 +76,7 @@ export function AgentGroup({
   }, [expanded])
 
   return (
-    <div className='flex flex-col gap-[6px]'>
+    <div className='flex flex-col gap-1.5'>
       {hasItems ? (
         <button
           type='button'
@@ -84,7 +84,7 @@ export function AgentGroup({
             wasAutoExpandedRef.current = false
             setExpanded((prev) => !prev)
           }}
-          className='flex cursor-pointer items-center gap-[8px]'
+          className='flex cursor-pointer items-center gap-2'
         >
           <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
             {isDelegating ? (
@@ -93,7 +93,7 @@ export function AgentGroup({
               <AgentIcon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
             )}
           </div>
-          <span className='font-base text-[14px] text-[var(--text-body)]'>{agentLabel}</span>
+          <span className='font-base text-[var(--text-body)] text-sm'>{agentLabel}</span>
           <ChevronDown
             className={cn(
               'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
@@ -102,7 +102,7 @@ export function AgentGroup({
           />
         </button>
       ) : (
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
             {isDelegating ? (
               <PillsRing className='h-[15px] w-[15px] text-[var(--text-icon)]' animate />
@@ -110,13 +110,13 @@ export function AgentGroup({
               <AgentIcon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
             )}
           </div>
-          <span className='font-base text-[14px] text-[var(--text-body)]'>{agentLabel}</span>
+          <span className='font-base text-[var(--text-body)] text-sm'>{agentLabel}</span>
         </div>
       )}
       {hasItems && mounted && (
         <div
           className={cn(
-            'flex flex-col gap-[6px] transition-opacity duration-300 ease-out',
+            'flex flex-col gap-1.5 transition-opacity duration-300 ease-out',
             expanded ? 'opacity-100' : 'opacity-0'
           )}
         >
@@ -131,7 +131,7 @@ export function AgentGroup({
             ) : (
               <span
                 key={`text-${idx}`}
-                className='pl-[24px] font-base text-[13px] text-[var(--text-secondary)]'
+                className='pl-6 font-base text-[var(--text-secondary)] text-small'
               >
                 {item.content.trim()}
               </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
index 3ad7c3eba2..a849d0a6ad 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
@@ -48,14 +48,14 @@ const PROSE_CLASSES = cn(
   'font-[family-name:var(--font-inter)] antialiased break-words font-[430] tracking-[0]',
   'prose-headings:font-[600] prose-headings:tracking-[0] prose-headings:text-[var(--text-primary)]',
   'prose-headings:mb-3 prose-headings:mt-6 first:prose-headings:mt-0',
-  'prose-p:text-[15px] prose-p:leading-[25px] prose-p:text-[var(--text-primary)]',
+  'prose-p:text-base prose-p:leading-[25px] prose-p:text-[var(--text-primary)]',
   'first:prose-p:mt-0 last:prose-p:mb-0',
-  'prose-li:text-[15px] prose-li:leading-[25px] prose-li:text-[var(--text-primary)]',
+  'prose-li:text-base prose-li:leading-[25px] prose-li:text-[var(--text-primary)]',
   'prose-li:my-1',
   'prose-ul:my-4 prose-ol:my-4',
   'prose-strong:font-[600] prose-strong:text-[var(--text-primary)]',
   'prose-a:text-[var(--text-primary)] prose-a:underline prose-a:decoration-dashed prose-a:underline-offset-2',
-  'prose-code:rounded prose-code:bg-[var(--surface-5)] prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[13px] prose-code:font-mono prose-code:font-[400] prose-code:text-[var(--text-primary)]',
+  'prose-code:rounded prose-code:bg-[var(--surface-5)] prose-code:px-1.5 prose-code:py-0.5 prose-code:text-small prose-code:font-mono prose-code:font-[400] prose-code:text-[var(--text-primary)]',
   'prose-code:before:content-none prose-code:after:content-none',
   'prose-hr:border-[var(--divider)] prose-hr:my-6',
   'prose-table:my-0'
@@ -79,7 +79,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
     return (
       <th
         style={style}
-        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-left font-[600] text-[14px] text-[var(--text-primary)] leading-6'
+        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-left font-[600] text-[var(--text-primary)] text-sm leading-6'
       >
         {children}
       </th>
@@ -89,7 +89,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
     return (
       <td
         style={style}
-        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-[14px] text-[var(--text-primary)] leading-6'
+        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-[var(--text-primary)] text-sm leading-6'
       >
         {children}
       </td>
@@ -112,7 +112,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
 
     if (!codeString) {
       return (
-        <pre className='not-prose my-6 overflow-x-auto rounded-lg bg-[var(--surface-5)] p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:bg-[#1F1F1F]'>
+        <pre className='not-prose my-6 overflow-x-auto rounded-lg bg-[var(--surface-5)] p-4 font-[430] font-mono text-[var(--text-primary)] text-small leading-[21px] dark:bg-[var(--code-bg)]'>
           {children}
         </pre>
       )
@@ -125,13 +125,13 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
     return (
       <div className='not-prose my-6 overflow-hidden rounded-lg border border-[var(--divider)]'>
         {language && (
-          <div className='border-[var(--divider)] border-b bg-[var(--surface-4)] px-4 py-2 text-[var(--text-tertiary)] text-xs dark:bg-[#2a2a2a]'>
+          <div className='border-[var(--divider)] border-b bg-[var(--surface-4)] px-4 py-2 text-[var(--text-tertiary)] text-xs dark:bg-[var(--surface-4)]'>
             {language}
           </div>
         )}
-        <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[#1F1F1F]'>
+        <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[var(--code-bg)]'>
           <pre
-            className='m-0 overflow-x-auto whitespace-pre p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px]'
+            className='m-0 overflow-x-auto whitespace-pre p-4 font-[430] font-mono text-[var(--text-primary)] text-small leading-[21px]'
             dangerouslySetInnerHTML={{ __html: html }}
           />
         </div>
@@ -162,13 +162,13 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
   li({ children, className }) {
     if (className?.includes('task-list-item')) {
       return (
-        <li className='flex list-none items-start gap-2 text-[15px] text-[var(--text-primary)] leading-[25px]'>
+        <li className='flex list-none items-start gap-2 text-[var(--text-primary)] text-base leading-[25px]'>
           {children}
         </li>
       )
     }
     return (
-      <li className='my-1 text-[15px] text-[var(--text-primary)] leading-[25px] marker:text-[var(--text-primary)]'>
+      <li className='my-1 text-[var(--text-primary)] text-base leading-[25px] marker:text-[var(--text-primary)]'>
         {children}
       </li>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
index a358e5e68c..ea0f2fc82a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
@@ -15,7 +15,7 @@ export function Options({ items, onSelect }: OptionsProps) {
           key={item.id}
           type='button'
           onClick={() => onSelect?.(item.id)}
-          className='rounded-full border border-[var(--divider)] bg-[var(--bg)] px-3.5 py-1.5 font-[430] font-[family-name:var(--font-inter)] text-[14px] text-[var(--text-primary)] leading-5 transition-colors hover:bg-[var(--surface-5)]'
+          className='rounded-full border border-[var(--divider)] bg-[var(--bg)] px-3.5 py-1.5 font-[430] font-[family-name:var(--font-inter)] text-[var(--text-primary)] text-sm leading-5 transition-colors hover-hover:bg-[var(--surface-5)]'
         >
           {item.label}
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index 4513f95d56..b9518ba042 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -334,17 +334,17 @@ export function SpecialTags({ segment, onOptionSelect }: SpecialTagsProps) {
  */
 export function PendingTagIndicator() {
   return (
-    <div className='flex animate-stream-fade-in items-center gap-[8px] py-[8px]'>
+    <div className='flex animate-stream-fade-in items-center gap-2 py-2'>
       <div className='grid h-[16px] w-[16px] grid-cols-2 gap-[1.5px]'>
         {THINKING_BLOCKS.map((block, i) => (
           <div
             key={i}
-            className='animate-thinking-block rounded-[2px]'
+            className='animate-thinking-block rounded-xs'
             style={{ backgroundColor: block.color, animationDelay: block.delay }}
           />
         ))}
       </div>
-      <span className='font-base text-[14px] text-[var(--text-body)]'>Thinking…</span>
+      <span className='font-base text-[var(--text-body)] text-sm'>Thinking…</span>
     </div>
   )
 }
@@ -362,7 +362,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
 
   return (
     <div className='animate-stream-fade-in'>
-      <span className='font-base text-[14px] text-[var(--text-body)]'>Suggested follow-ups</span>
+      <span className='font-base text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
       <div className='mt-1.5 flex flex-col'>
         {entries.map(([key, value], i) => {
           const title = value.title
@@ -374,15 +374,15 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
               disabled={disabled}
               onClick={() => onSelect?.(title)}
               className={cn(
-                'flex items-center gap-[8px] border-[var(--divider)] px-[8px] py-[8px] text-left transition-colors',
-                disabled ? 'cursor-not-allowed' : 'hover:bg-[var(--surface-5)]',
+                'flex items-center gap-2 border-[var(--divider)] px-2 py-2 text-left transition-colors',
+                disabled ? 'cursor-not-allowed' : 'hover-hover:bg-[var(--surface-5)]',
                 i > 0 && 'border-t'
               )}
             >
               <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
-                <span className='font-base text-[14px] text-[var(--text-icon)]'>{i + 1}</span>
+                <span className='font-base text-[var(--text-icon)] text-sm'>{i + 1}</span>
               </div>
-              <span className='flex-1 font-base text-[14px] text-[var(--text-body)]'>{title}</span>
+              <span className='flex-1 font-base text-[var(--text-body)] text-sm'>{title}</span>
               <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
             </button>
           )
@@ -437,10 +437,10 @@ function CredentialDisplay({ data }: { data: CredentialTagData }) {
       href={data.value}
       target='_blank'
       rel='noopener noreferrer'
-      className='flex animate-stream-fade-in items-center gap-[8px] rounded-lg border border-[var(--divider)] px-3 py-2.5 transition-colors hover:bg-[var(--surface-5)]'
+      className='flex animate-stream-fade-in items-center gap-2 rounded-lg border border-[var(--divider)] px-3 py-2.5 transition-colors hover-hover:bg-[var(--surface-5)]'
     >
       {createElement(Icon, { className: 'h-[16px] w-[16px] shrink-0' })}
-      <span className='flex-1 font-base text-[14px] text-[var(--text-body)]'>
+      <span className='flex-1 font-base text-[var(--text-body)] text-sm'>
         Connect {data.provider}
       </span>
       <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
@@ -481,16 +481,16 @@ function UsageUpgradeDisplay({ data }: { data: UsageUpgradeTagData }) {
           <path d='M8 6.5v3' stroke='currentColor' strokeWidth='1.3' strokeLinecap='round' />
           <circle cx='8' cy='11.5' r='0.75' fill='currentColor' />
         </svg>
-        <span className='font-[500] text-[14px] text-amber-800 leading-5 dark:text-amber-300'>
+        <span className='font-[500] text-amber-800 text-sm leading-5 dark:text-amber-300'>
           Usage Limit Reached
         </span>
       </div>
-      <p className='mt-1.5 text-[13px] text-amber-700/90 leading-[20px] dark:text-amber-400/80'>
+      <p className='mt-1.5 text-amber-700/90 text-small leading-[20px] dark:text-amber-400/80'>
         {data.message}
       </p>
       <a
         href={settingsPath}
-        className='mt-2 inline-flex items-center gap-1 font-[500] text-[13px] text-amber-700 underline decoration-dashed underline-offset-2 transition-colors hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-200'
+        className='mt-2 inline-flex items-center gap-1 font-[500] text-amber-700 text-small underline decoration-dashed underline-offset-2 transition-colors hover-hover:text-amber-900 dark:text-amber-300 dark:hover-hover:text-amber-200'
       >
         {buttonLabel}
         <ArrowRight className='h-3 w-3' />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index d909180081..83d19f44aa 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -312,7 +312,7 @@ export function MessageContent({
   if (segments.length === 0) {
     if (isStreaming) {
       return (
-        <div className='space-y-[10px]'>
+        <div className='space-y-2.5'>
           <PendingTagIndicator />
         </div>
       )
@@ -341,7 +341,7 @@ export function MessageContent({
     )?.id
 
   return (
-    <div className='space-y-[10px]'>
+    <div className='space-y-2.5'>
       {segments.map((segment, i) => {
         switch (segment.type) {
           case 'text':
@@ -384,11 +384,9 @@ export function MessageContent({
             )
           case 'stopped':
             return (
-              <div key={`stopped-${i}`} className='flex items-center gap-[8px]'>
+              <div key={`stopped-${i}`} className='flex items-center gap-2'>
                 <CircleStop className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                <span className='font-base text-[14px] text-[var(--text-body)]'>
-                  Stopped by user
-                </span>
+                <span className='font-base text-[var(--text-body)] text-sm'>Stopped by user</span>
               </div>
             )
         }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
index 5a979f1eb6..e2bcccb2dd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
@@ -199,14 +199,14 @@ export function AddResourceDropdown({
                     onClick={() => select({ type, id: item.id, title: item.name }, item.isOpen)}
                   >
                     {config.renderDropdownItem({ item })}
-                    <span className='ml-auto pl-[8px] text-[11px] text-[var(--text-tertiary)]'>
+                    <span className='ml-auto pl-2 text-[var(--text-tertiary)] text-xs'>
                       {config.label}
                     </span>
                   </DropdownMenuItem>
                 )
               })
             ) : (
-              <div className='px-[8px] py-[5px] text-center font-medium text-[12px] text-[var(--text-tertiary)]'>
+              <div className='px-2 py-[5px] text-center font-medium text-[var(--text-tertiary)] text-caption'>
                 No results
               </div>
             )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index ac99366d48..5d336a3df2 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -41,7 +41,7 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 const Workflow = lazy(() => import('@/app/workspace/[workspaceId]/w/[workflowId]/workflow'))
 
 const LOADING_SKELETON = (
-  <div className='flex h-full flex-col gap-[8px] p-[24px]'>
+  <div className='flex h-full flex-col gap-2 p-6'>
     <Skeleton className='h-[16px] w-[60%]' />
     <Skeleton className='h-[16px] w-[80%]' />
     <Skeleton className='h-[16px] w-[40%]' />
@@ -374,11 +374,11 @@ function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) {
 
   if (!workflowExists || hasLoadError) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <WorkflowX className='h-[32px] w-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-primary)]'>Workflow not found</h2>
-          <p className='text-[13px] text-[var(--text-body)]'>
+          <p className='text-[var(--text-body)] text-small'>
             This workflow may have been deleted or moved
           </p>
         </div>
@@ -409,11 +409,11 @@ function EmbeddedFile({ workspaceId, fileId, previewMode, streamingContent }: Em
 
   if (!file) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <FileX className='h-[32px] w-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-primary)]'>File not found</h2>
-          <p className='text-[13px] text-[var(--text-body)]'>
+          <p className='text-[var(--text-body)] text-small'>
             This file may have been deleted or moved
           </p>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index 41529075ad..acc2a63c2c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -67,7 +67,7 @@ function FileDropdownItem({ item }: DropdownItemRenderProps) {
   const DocIcon = getDocumentIcon('', item.name)
   return (
     <>
-      <DocIcon className='mr-[8px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+      <DocIcon className='mr-2 h-[14px] w-[14px] text-[var(--text-icon)]' />
       <span className='truncate'>{item.name}</span>
     </>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
index f1d48eb543..f58373a226 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
@@ -1,6 +1,5 @@
-export const RESOURCE_TAB_GAP_CLASS = 'gap-[6px]'
+export const RESOURCE_TAB_GAP_CLASS = 'gap-1.5'
 
-export const RESOURCE_TAB_ICON_BUTTON_CLASS =
-  'shrink-0 bg-transparent px-[8px] py-[5px] text-[12px]'
+export const RESOURCE_TAB_ICON_BUTTON_CLASS = 'shrink-0 bg-transparent px-2 py-[5px] text-caption'
 
 export const RESOURCE_TAB_ICON_CLASS = 'h-[16px] w-[16px] text-[var(--text-icon)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 546d8796ef..985788e7cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -260,7 +260,7 @@ export function ResourceTabs({
   return (
     <div
       className={cn(
-        'flex shrink-0 items-center border-[var(--border)] border-b px-[16px] py-[8.5px]',
+        'flex shrink-0 items-center border-[var(--border)] border-b px-4 py-[8.5px]',
         RESOURCE_TAB_GAP_CLASS
       )}
     >
@@ -333,12 +333,12 @@ export function ResourceTabs({
                       onMouseEnter={() => setHoveredTabId(resource.id)}
                       onMouseLeave={() => setHoveredTabId(null)}
                       className={cn(
-                        'group relative shrink-0 bg-transparent px-[8px] py-[4px] pr-[22px] text-[12px] transition-opacity duration-150',
+                        'group relative shrink-0 bg-transparent px-2 py-1 pr-[22px] text-caption transition-opacity duration-150',
                         isActive && 'bg-[var(--surface-4)]',
                         isDragging && 'opacity-30'
                       )}
                     >
-                      {config.renderTabIcon(resource, 'mr-[6px] h-[14px] w-[14px]')}
+                      {config.renderTabIcon(resource, 'mr-1.5 h-[14px] w-[14px]')}
                       {displayName}
                       {(isHovered || isActive) && chatId && (
                         <span
@@ -349,7 +349,7 @@ export function ResourceTabs({
                             if (e.key === 'Enter')
                               handleRemove(e as unknown as React.MouseEvent, resource)
                           }}
-                          className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-[4px] p-[1px] hover:bg-[var(--surface-5)]'
+                          className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-sm p-[1px] hover-hover:bg-[var(--surface-5)]'
                           aria-label={`Close ${displayName}`}
                         >
                           <svg
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index 14c87ed724..0bf54b0e63 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -143,7 +143,7 @@ export const MothershipView = memo(
                 streamingFile={streamingForActive}
               />
             ) : (
-              <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+              <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
                 Click "+" above to add a resource
               </div>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
index 06bb5dd4cc..c883cd49f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
@@ -18,18 +18,18 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
   if (messageQueue.length === 0) return null
 
   return (
-    <div className='-mb-[12px] mx-[14px] overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-[12px]'>
+    <div className='-mb-3 mx-3.5 overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-3'>
       <button
         type='button'
         onClick={() => setIsExpanded(!isExpanded)}
-        className='flex w-full items-center gap-[6px] px-[14px] py-[8px] transition-colors hover:bg-[var(--surface-active)]'
+        className='flex w-full items-center gap-1.5 px-3.5 py-2 transition-colors hover-hover:bg-[var(--surface-active)]'
       >
         {isExpanded ? (
           <ChevronDown className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         ) : (
           <ChevronRight className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         )}
-        <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+        <span className='font-medium text-[var(--text-secondary)] text-small'>
           {messageQueue.length} Queued
         </span>
       </button>
@@ -39,17 +39,17 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
           {messageQueue.map((msg) => (
             <div
               key={msg.id}
-              className='flex items-center gap-[8px] px-[14px] py-[6px] transition-colors hover:bg-[var(--surface-active)]'
+              className='flex items-center gap-2 px-3.5 py-1.5 transition-colors hover-hover:bg-[var(--surface-active)]'
             >
               <div className='flex h-[16px] w-[16px] shrink-0 items-center justify-center'>
-                <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[var(--text-tertiary)]/40' />
+                <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[color-mix(in_srgb,var(--text-tertiary)_40%,transparent)]' />
               </div>
 
               <div className='min-w-0 flex-1'>
-                <p className='truncate text-[13px] text-[var(--text-primary)]'>{msg.content}</p>
+                <p className='truncate text-[var(--text-primary)] text-small'>{msg.content}</p>
               </div>
 
-              <div className='flex shrink-0 items-center gap-[2px]'>
+              <div className='flex shrink-0 items-center gap-0.5'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <button
@@ -58,7 +58,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         onEdit(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
+                      className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)]'
                     >
                       <Pencil className='h-[13px] w-[13px]' />
                     </button>
@@ -76,7 +76,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         void onSendNow(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
+                      className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)]'
                     >
                       <ArrowUp className='h-[13px] w-[13px]' />
                     </button>
@@ -94,7 +94,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         onRemove(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
+                      className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)]'
                     >
                       <Trash2 className='h-[13px] w-[13px]' />
                     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
index c0057396e2..c0593aebc1 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
@@ -76,7 +76,7 @@ function PreviewTable() {
     <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
       <div className='flex shrink-0 items-center border-[var(--border-1)] border-b bg-[var(--surface-3)]'>
         {['Name', 'Email', 'Company', 'Status'].map((col) => (
-          <div key={col} className='flex flex-1 items-center px-[6px] py-[5px]'>
+          <div key={col} className='flex flex-1 items-center px-1.5 py-[5px]'>
             <span className='font-medium text-[7px] text-[var(--text-tertiary)]'>{col}</span>
           </div>
         ))}
@@ -84,7 +84,7 @@ function PreviewTable() {
       {MINI_TABLE_DATA.map((row, i) => (
         <div key={i} className='flex items-center border-[var(--border-1)] border-b'>
           {row.map((cell, j) => (
-            <div key={j} className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+            <div key={j} className='flex flex-1 items-center px-1.5 py-[2.5px]'>
               {j === 3 ? (
                 <div className='flex items-center gap-[3px]'>
                   <div className={`h-[4px] w-[4px] shrink-0 rounded-full ${STATUS_DOT[cell]}`} />
@@ -110,28 +110,26 @@ function PreviewKnowledge() {
     <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
       <div className='flex shrink-0 items-center border-[var(--border-1)] border-b bg-[var(--surface-3)]'>
         {['Name', 'Size', 'Tokens', 'Status'].map((col) => (
-          <div key={col} className='flex flex-1 items-center px-[6px] py-[5px]'>
+          <div key={col} className='flex flex-1 items-center px-1.5 py-[5px]'>
             <span className='font-medium text-[7px] text-[var(--text-tertiary)]'>{col}</span>
           </div>
         ))}
       </div>
       {MINI_KB_DATA.map((row, i) => (
         <div key={i} className='flex items-center border-[var(--border-1)] border-b'>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
             <span className='truncate font-medium text-[7px] text-[var(--text-body)] leading-[1.2]'>
               {row[0]}
             </span>
           </div>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
             <span className='text-[7px] text-[var(--text-tertiary)] leading-[1.2]'>{row[1]}</span>
           </div>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
             <span className='text-[7px] text-[var(--text-tertiary)] leading-[1.2]'>{row[2]}</span>
           </div>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
-            <span
-              className={`inline-block rounded-full px-[4px] py-px text-[6px] ${KB_BADGE[row[3]]}`}
-            >
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
+            <span className={`inline-block rounded-full px-1 py-px text-[6px] ${KB_BADGE[row[3]]}`}>
               {row[3]}
             </span>
           </div>
@@ -144,14 +142,14 @@ function PreviewKnowledge() {
 function PreviewFile() {
   return (
     <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
-      <div className='flex shrink-0 items-center gap-[4px] border-[var(--border-1)] border-b px-[10px] py-[5px]'>
+      <div className='flex shrink-0 items-center gap-1 border-[var(--border-1)] border-b px-2.5 py-[5px]'>
         <span className='text-[7px] text-[var(--text-tertiary)]'>Files</span>
         <span className='text-[7px] text-[var(--text-tertiary)] opacity-40'>/</span>
         <span className='font-medium text-[7px] text-[var(--text-body)]'>meeting-notes.md</span>
       </div>
-      <div className='flex-1 overflow-hidden px-[10px] py-[6px]'>
+      <div className='flex-1 overflow-hidden px-2.5 py-1.5'>
         <p className='font-semibold text-[8px] text-[var(--text-body)]'>Meeting Notes</p>
-        <p className='mt-[4px] font-medium text-[7px] text-[var(--text-body)]'>Action Items</p>
+        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Action Items</p>
         <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
           • Review Q1 metrics with Sarah
         </p>
@@ -159,11 +157,11 @@ function PreviewFile() {
         <p className='text-[6.5px] text-[var(--text-tertiary)]'>
           • Schedule design review for v2.0
         </p>
-        <p className='mt-[4px] font-medium text-[7px] text-[var(--text-body)]'>Discussion Points</p>
+        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Discussion Points</p>
         <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
           The team agreed to prioritize the new onboarding flow...
         </p>
-        <p className='mt-[4px] font-medium text-[7px] text-[var(--text-body)]'>Next Steps</p>
+        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Next Steps</p>
         <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
           Follow up with engineering on the API v2 migration.
         </p>
@@ -180,9 +178,9 @@ const WorkflowMiniBlock = memo(function WorkflowMiniBlock({
 }: WorkflowBlockDef) {
   const hasRows = rows.length > 0
   return (
-    <div className='w-[76px] rounded-[4px] border border-[var(--border-1)] bg-[var(--white)] dark:bg-[var(--surface-4)]'>
+    <div className='w-[76px] rounded-sm border border-[var(--border-1)] bg-[var(--white)] dark:bg-[var(--surface-4)]'>
       <div
-        className={`flex items-center gap-[4px] px-[5px] py-[3px] ${hasRows ? 'border-[var(--border-1)] border-b' : ''}`}
+        className={`flex items-center gap-1 px-[5px] py-[3px] ${hasRows ? 'border-[var(--border-1)] border-b' : ''}`}
       >
         <div
           className='flex h-[11px] w-[11px] shrink-0 items-center justify-center rounded-[3px]'
@@ -193,7 +191,7 @@ const WorkflowMiniBlock = memo(function WorkflowMiniBlock({
         <span className='truncate font-medium text-[6.5px] text-[var(--text-body)]'>{name}</span>
       </div>
       {rows.map((row) => (
-        <div key={row.title} className='flex items-center gap-[3px] px-[5px] py-[2px]'>
+        <div key={row.title} className='flex items-center gap-[3px] px-[5px] py-0.5'>
           <span className='shrink-0 text-[5.5px] text-[var(--text-tertiary)]'>{row.title}</span>
           <span className='ml-auto truncate text-[5.5px] text-[var(--text-body)]'>{row.value}</span>
         </div>
@@ -319,8 +317,8 @@ interface TemplatePromptsProps {
 
 export function TemplatePrompts({ onSelect }: TemplatePromptsProps) {
   return (
-    <div className='flex flex-col gap-[24px] lg:gap-[32px]'>
-      <div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
+    <div className='flex flex-col gap-6 lg:gap-8'>
+      <div className='grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-3'>
         {FEATURED_TEMPLATES.map((template) => (
           <TemplateCard key={template.title} template={template} onSelect={onSelect} />
         ))}
@@ -329,11 +327,11 @@ export function TemplatePrompts({ onSelect }: TemplatePromptsProps) {
       {GROUPED_EXTRAS.map((group) => (
         <div
           key={group.category}
-          className='flex flex-col gap-[12px]'
+          className='flex flex-col gap-3'
           style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 200px' }}
         >
-          <h3 className='font-medium text-[13px] text-[var(--text-secondary)]'>{group.label}</h3>
-          <div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
+          <h3 className='font-medium text-[var(--text-secondary)] text-small'>{group.label}</h3>
+          <div className='grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-3'>
             {group.templates.map((template) => (
               <TemplateCard key={template.title} template={template} onSelect={onSelect} />
             ))}
@@ -359,7 +357,7 @@ const TemplateCard = memo(function TemplateCard({ template, onSelect }: Template
       aria-label={`Select template: ${template.title}`}
       className='group flex cursor-pointer flex-col text-left'
     >
-      <div className='overflow-hidden rounded-[8px] border border-[var(--border-1)] transition-colors group-hover:bg-[var(--surface-2)]'>
+      <div className='overflow-hidden rounded-lg border border-[var(--border-1)] transition-colors group-hover:bg-[var(--surface-2)]'>
         <div className='relative h-[120px] w-full overflow-hidden'>
           {template.image ? (
             <Image
@@ -373,9 +371,9 @@ const TemplateCard = memo(function TemplateCard({ template, onSelect }: Template
             <TemplatePreview modules={template.modules} template={template} />
           )}
         </div>
-        <div className='flex items-center gap-[6px] border-[var(--border-1)] border-t bg-[var(--white)] px-[12px] py-[8px] transition-colors group-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-4)]'>
+        <div className='flex items-center gap-1.5 border-[var(--border-1)] border-t bg-[var(--white)] px-3 py-2 transition-colors group-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-4)]'>
           <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-          <span className='text-[13px] text-[var(--text-body)]'>{template.title}</span>
+          <span className='text-[var(--text-body)] text-small'>{template.title}</span>
         </div>
       </div>
     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/attached-files-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/attached-files-list.tsx
index 3e00e43cf6..3ec84a6e3a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/attached-files-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/attached-files-list.tsx
@@ -20,7 +20,7 @@ export const AttachedFilesList = React.memo(function AttachedFilesList({
   if (attachedFiles.length === 0) return null
 
   return (
-    <div className='mb-[6px] flex flex-wrap gap-[6px]'>
+    <div className='mb-1.5 flex flex-wrap gap-1.5'>
       {attachedFiles.map((file) => {
         const isImage = file.type.startsWith('image/')
         return (
@@ -37,7 +37,7 @@ export const AttachedFilesList = React.memo(function AttachedFilesList({
                     className='h-full w-full object-cover'
                   />
                 ) : (
-                  <div className='flex h-full w-full flex-col items-center justify-center gap-[2px] text-[var(--text-icon)]'>
+                  <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--text-icon)]'>
                     {(() => {
                       const Icon = getDocumentIcon(file.type, file.name)
                       return <Icon className='h-[18px] w-[18px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/constants.ts
index 3c0f5971d6..678aa9ba87 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/constants.ts
@@ -40,7 +40,7 @@ export interface PlusMenuHandle {
 export const TEXTAREA_BASE_CLASSES = cn(
   'm-0 box-border h-auto min-h-[24px] w-full resize-none',
   'overflow-y-auto overflow-x-hidden break-all border-0 bg-transparent',
-  'px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em]',
+  'px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em]',
   'text-transparent caret-[var(--text-primary)] outline-none',
   'placeholder:font-[380] placeholder:text-[var(--text-subtle)]',
   'focus-visible:ring-0 focus-visible:ring-offset-0',
@@ -50,15 +50,15 @@ export const TEXTAREA_BASE_CLASSES = cn(
 export const OVERLAY_CLASSES = cn(
   'pointer-events-none absolute top-0 left-0 m-0 box-border h-auto w-full resize-none',
   'overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-all border-0 bg-transparent',
-  'px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em]',
+  'px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em]',
   'text-[var(--text-primary)] outline-none',
   '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
 )
 
 export const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
 export const SEND_BUTTON_ACTIVE =
-  'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
-export const SEND_BUTTON_DISABLED = 'bg-[var(--c-808080)] dark:bg-[var(--c-808080)]'
+  'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
+export const SEND_BUTTON_DISABLED = 'bg-[#808080] dark:bg-[#808080]'
 
 export const MAX_CHAT_TEXTAREA_HEIGHT = 200
 export const SPEECH_RECOGNITION_LANG = 'en-US'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/drop-overlay.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/drop-overlay.tsx
index 5d0af330c4..e786c2d189 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/drop-overlay.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/drop-overlay.tsx
@@ -28,9 +28,9 @@ const DROP_OVERLAY_ICONS = [
 export const DropOverlay = React.memo(function DropOverlay() {
   return (
     <div className='pointer-events-none absolute inset-[6px] z-10 flex items-center justify-center rounded-[14px] border-[1.5px] border-[var(--border-1)] border-dashed bg-[var(--white)] dark:bg-[var(--surface-4)]'>
-      <div className='flex flex-col items-center gap-[8px]'>
+      <div className='flex flex-col items-center gap-2'>
         <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Drop files</span>
-        <div className='flex items-center gap-[8px] text-[var(--text-icon)]'>
+        <div className='flex items-center gap-2 text-[var(--text-icon)]'>
           {DROP_OVERLAY_ICONS.map((Icon, i) => (
             <Icon key={i} className='h-[14px] w-[14px]' />
           ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/plus-menu-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/plus-menu-dropdown.tsx
index 4e057a04c5..e7ff53e493 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/plus-menu-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/_components/plus-menu-dropdown.tsx
@@ -171,14 +171,14 @@ export const PlusMenuDropdown = React.memo(
                       }}
                     >
                       {config.renderDropdownItem({ item })}
-                      <span className='ml-auto pl-[8px] text-[11px] text-[var(--text-tertiary)]'>
+                      <span className='ml-auto pl-2 text-[11px] text-[var(--text-tertiary)]'>
                         {config.label}
                       </span>
                     </DropdownMenuItem>
                   )
                 })
               ) : (
-                <div className='px-[8px] py-[5px] text-center font-medium text-[12px] text-[var(--text-tertiary)]'>
+                <div className='px-2 py-[5px] text-center font-medium text-[12px] text-[var(--text-tertiary)]'>
                   No results
                 </div>
               )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 3a549351c5..0a4b06e123 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -602,7 +602,7 @@ export function UserInput({
       elements.push(
         <span
           key={`mention-${i}-${range.start}-${range.end}`}
-          className='rounded-[5px] bg-[var(--surface-5)] py-[2px]'
+          className='rounded-[5px] bg-[var(--surface-5)] py-0.5'
           style={{
             boxShadow: '-2px 0 0 var(--surface-5), 2px 0 0 var(--surface-5)',
           }}
@@ -630,7 +630,7 @@ export function UserInput({
     <div
       onClick={handleContainerClick}
       className={cn(
-        'relative z-10 mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-[10px] py-[8px] dark:bg-[var(--surface-4)]',
+        'relative z-10 mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
         isInitialView && 'shadow-sm'
       )}
       onDragEnter={handleDragEnter}
@@ -672,7 +672,7 @@ export function UserInput({
       </div>
 
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <PlusMenuDropdown
             ref={plusMenuRef}
             availableResources={availableResources}
@@ -683,7 +683,7 @@ export function UserInput({
             pendingCursorRef={pendingCursorRef}
           />
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <MicButton isListening={isListening} onToggle={toggleListening} />
           <SendButton
             isSending={isSending}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
index b9a679bb26..9bb8ebcde3 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
@@ -6,7 +6,7 @@ import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/type
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const USER_MESSAGE_CLASSES =
-  'whitespace-pre-wrap break-all font-[430] font-[family-name:var(--font-inter)] text-[15px] text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
+  'whitespace-pre-wrap break-all font-[430] font-[family-name:var(--font-inter)] text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
 
 interface UserMessageContentProps {
   content: string
@@ -83,8 +83,8 @@ function MentionHighlight({ context }: { context: ChatMessageContext }) {
   }
 
   return (
-    <span className='inline-flex items-baseline gap-[4px] rounded-[5px] bg-[var(--surface-5)] px-[5px]'>
-      {icon && <span className='relative top-[2px] flex-shrink-0'>{icon}</span>}
+    <span className='inline-flex items-baseline gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px]'>
+      {icon && <span className='relative top-0.5 flex-shrink-0'>{icon}</span>}
       {context.label}
     </span>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 0c6b7d6acd..0f71c62221 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -300,10 +300,10 @@ export function Home({ chatId }: HomeProps = {}) {
   if (!hasMessages && !chatId) {
     return (
       <div className='h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable_both-edges]'>
-        <div className='flex min-h-full flex-col items-center justify-center px-[24px] pb-[2vh]'>
+        <div className='flex min-h-full flex-col items-center justify-center px-6 pb-[2vh]'>
           <h1
             data-tour='home-greeting'
-            className='mb-[24px] max-w-[42rem] font-[430] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'
+            className='mb-6 max-w-[42rem] text-balance font-[430] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'
           >
             What should we get done
             {session?.user?.name ? `, ${session.user.name.split(' ')[0]}` : ''}?
@@ -322,7 +322,7 @@ export function Home({ chatId }: HomeProps = {}) {
         <div
           ref={templateRef}
           data-tour='home-templates'
-          className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-[16px] pb-[32px] sm:px-[24px] lg:px-[40px]'
+          className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-4 pb-8 sm:px-6 lg:px-10'
         >
           <TemplatePrompts onSelect={handleSubmit} />
         </div>
@@ -393,7 +393,7 @@ export function Home({ chatId }: HomeProps = {}) {
           <button
             type='button'
             onClick={expandResource}
-            className='flex h-[30px] w-[30px] items-center justify-center rounded-[8px] hover:bg-[var(--surface-active)]'
+            className='flex h-[30px] w-[30px] items-center justify-center rounded-[8px] hover-hover:bg-[var(--surface-active)]'
             aria-label='Expand resource view'
           >
             <PanelLeft className='h-[16px] w-[16px] text-[var(--text-icon)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
index 25281533fc..4813384122 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
@@ -197,7 +197,7 @@ export function ChunkEditor({
         }}
       >
         {tokenizerOn ? (
-          <div className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-[24px] font-sans text-[14px] text-[var(--text-body)]'>
+          <div className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-6 font-sans text-[var(--text-body)] text-sm'>
             {tokenStrings.map((token, index) => (
               <span
                 key={index}
@@ -223,20 +223,20 @@ export function ChunkEditor({
                     ? 'This chunk is synced from a connector and cannot be edited'
                     : 'Read-only view'
             }
-            className='min-h-0 flex-1 resize-none border-0 bg-transparent p-[24px] font-sans text-[14px] text-[var(--text-body)] outline-none placeholder:text-[var(--text-subtle)]'
+            className='min-h-0 flex-1 resize-none border-0 bg-transparent p-6 font-sans text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-subtle)]'
             disabled={!canEdit}
             readOnly={!canEdit}
             spellCheck={false}
           />
         )}
       </div>
-      <div className='flex items-center justify-between border-[var(--border)] border-t px-[24px] py-[10px]'>
+      <div className='flex items-center justify-between border-[var(--border)] border-t px-6 py-2.5'>
         <TokenizerToggle
           checked={tokenizerOn}
           onCheckedChange={setTokenizerOn}
           hoveredTokenIndex={tokenizerOn ? hoveredTokenIndex : null}
         />
-        <span className='text-[12px] text-[var(--text-secondary)]'>
+        <span className='text-[var(--text-secondary)] text-caption'>
           {tokenCount.toLocaleString()}
           {maxChunkSize !== undefined && `/${maxChunkSize.toLocaleString()}`} tokens
         </span>
@@ -255,11 +255,11 @@ const TokenizerToggle = React.memo(function TokenizerToggle({
   hoveredTokenIndex: number | null
 }) {
   return (
-    <div className='flex items-center gap-[8px]'>
-      <Label className='text-[12px] text-[var(--text-secondary)]'>Tokenizer</Label>
+    <div className='flex items-center gap-2'>
+      <Label className='text-[var(--text-secondary)] text-caption'>Tokenizer</Label>
       <Switch checked={checked} onCheckedChange={onCheckedChange} />
       {checked && hoveredTokenIndex !== null && (
-        <span className='text-[12px] text-[var(--text-tertiary)]'>
+        <span className='text-[var(--text-tertiary)] text-caption'>
           Token #{hoveredTokenIndex + 1}
         </span>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index c947e01747..0dd45e35f0 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -392,23 +392,23 @@ export function DocumentTagsModal({
 
         <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='space-y-[8px]'>
+            <div className='space-y-2'>
               <Label>Tags</Label>
 
               {documentTags.map((tag, index) => (
-                <div key={index} className='space-y-[8px]'>
+                <div key={index} className='space-y-2'>
                   <div
-                    className='flex cursor-pointer items-center gap-2 rounded-[4px] border p-[8px] hover:bg-[var(--surface-2)]'
+                    className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
                     onClick={() => startEditingTag(index)}
                   >
-                    <span className='min-w-0 truncate text-[12px] text-[var(--text-primary)]'>
+                    <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
                       {tag.displayName}
                     </span>
-                    <span className='rounded-[3px] bg-[var(--surface-3)] px-[6px] py-[2px] text-[10px] text-[var(--text-muted)]'>
+                    <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                       {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                     </span>
-                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[#3A3A3A]' />
-                    <span className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-muted)]'>
+                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                    <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-xs'>
                       {formatValueForDisplay(tag.value, tag.fieldType)}
                     </span>
                     <div className='flex flex-shrink-0 items-center gap-1'>
@@ -418,7 +418,7 @@ export function DocumentTagsModal({
                           e.stopPropagation()
                           handleRemoveTag(index)
                         }}
-                        className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-error)]'
+                        className='h-4 w-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
                       >
                         <Trash className='h-3 w-3' />
                       </Button>
@@ -426,8 +426,8 @@ export function DocumentTagsModal({
                   </div>
 
                   {editingTagIndex === index && (
-                    <div className='space-y-[8px] rounded-[6px] border p-[12px]'>
-                      <div className='flex flex-col gap-[8px]'>
+                    <div className='space-y-2 rounded-md border p-3'>
+                      <div className='flex flex-col gap-2'>
                         <Label htmlFor={`tagName-${index}`}>Tag Name</Label>
                         {availableDefinitions.length > 0 ? (
                           <Combobox
@@ -477,13 +477,13 @@ export function DocumentTagsModal({
                           />
                         )}
                         {tagNameConflict && (
-                          <span className='text-[12px] text-[var(--text-error)]'>
+                          <span className='text-[var(--text-error)] text-caption'>
                             A tag with this name already exists
                           </span>
                         )}
                       </div>
 
-                      <div className='flex flex-col gap-[8px]'>
+                      <div className='flex flex-col gap-2'>
                         <Label htmlFor={`tagValue-${index}`}>Value</Label>
                         {editTagForm.fieldType === 'boolean' ? (
                           <Combobox
@@ -549,7 +549,7 @@ export function DocumentTagsModal({
                         )}
                       </div>
 
-                      <div className='flex gap-[8px]'>
+                      <div className='flex gap-2'>
                         <Button variant='default' onClick={cancelEditingTag} className='flex-1'>
                           Cancel
                         </Button>
@@ -579,8 +579,8 @@ export function DocumentTagsModal({
               )}
 
               {(isCreatingTag || documentTags.length === 0) && editingTagIndex === null && (
-                <div className='space-y-[8px] rounded-[6px] border p-[12px]'>
-                  <div className='flex flex-col gap-[8px]'>
+                <div className='space-y-2 rounded-md border p-3'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='newTagName'>Tag Name</Label>
                     {tagNameOptions.length > 0 ? (
                       <Combobox
@@ -630,13 +630,13 @@ export function DocumentTagsModal({
                       />
                     )}
                     {tagNameConflict && (
-                      <span className='text-[12px] text-[var(--text-error)]'>
+                      <span className='text-[var(--text-error)] text-caption'>
                         A tag with this name already exists
                       </span>
                     )}
                   </div>
 
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='newTagValue'>Value</Label>
                     {editTagForm.fieldType === 'boolean' ? (
                       <Combobox
@@ -711,7 +711,7 @@ export function DocumentTagsModal({
                       </Badge>
                     )}
 
-                  <div className='flex gap-[8px]'>
+                  <div className='flex gap-2'>
                     {documentTags.length > 0 && (
                       <Button variant='default' onClick={cancelEditingTag} className='flex-1'>
                         Cancel
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index 21b6bfc71a..e088225863 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -564,16 +564,16 @@ export function Document({
 
   const filterContent = (
     <div className='w-[200px]'>
-      <div className='border-[var(--border-1)] border-b px-[12px] py-[8px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Status</span>
+      <div className='border-[var(--border-1)] border-b px-3 py-2'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
       </div>
-      <div className='flex flex-col gap-[2px] px-[12px] py-[8px]'>
+      <div className='flex flex-col gap-0.5 px-3 py-2'>
         {(['all', 'enabled', 'disabled'] as const).map((value) => (
           <button
             key={value}
             type='button'
             className={cn(
-              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-secondary)] outline-none transition-colors hover:bg-[var(--surface-active)]',
+              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]',
               enabledFilter === value && 'bg-[var(--surface-active)]'
             )}
             onClick={() => {
@@ -822,9 +822,9 @@ export function Document({
           cells: {
             content: {
               content: (
-                <div className='flex items-center gap-[8px]'>
+                <div className='flex items-center gap-2'>
                   <FileText className='h-5 w-5 flex-shrink-0 text-[var(--text-muted)]' />
-                  <span className='text-[14px] text-[var(--text-muted)] italic'>
+                  <span className='text-[var(--text-muted)] text-sm italic'>
                     {documentData?.processingStatus === 'pending' &&
                       'Document processing pending...'}
                     {documentData?.processingStatus === 'processing' &&
@@ -849,7 +849,7 @@ export function Document({
         content: {
           content: (
             <span
-              className='block min-w-0 truncate text-[14px] text-[var(--text-primary)]'
+              className='block min-w-0 truncate text-[var(--text-primary)] text-sm'
               title={chunk.content}
             >
               <SearchHighlight
@@ -861,9 +861,7 @@ export function Document({
         },
         index: {
           content: (
-            <span className='font-mono text-[14px] text-[var(--text-primary)]'>
-              {chunk.chunkIndex}
-            </span>
+            <span className='font-mono text-[var(--text-primary)] text-sm'>{chunk.chunkIndex}</span>
           ),
         },
         tokens: {
@@ -1043,7 +1041,7 @@ export function Document({
         <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
           <ResourceHeader icon={FileText} breadcrumbs={loadingBreadcrumbs} />
           <div className='flex flex-1 items-center justify-center'>
-            <span className='text-[14px] text-[var(--text-muted)]'>Loading chunk...</span>
+            <span className='text-[var(--text-muted)] text-sm'>Loading chunk...</span>
           </div>
         </div>
       )
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index dbdf92ba32..3a018ce5e1 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -814,16 +814,16 @@ export function KnowledgeBase({
 
   const filterContent = (
     <div className='w-[320px]'>
-      <div className='border-[var(--border-1)] border-b px-[12px] py-[8px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Status</span>
+      <div className='border-[var(--border-1)] border-b px-3 py-2'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
       </div>
-      <div className='flex flex-col gap-[2px] px-[12px] py-[8px]'>
+      <div className='flex flex-col gap-0.5 px-3 py-2'>
         {(['all', 'enabled', 'disabled'] as const).map((value) => (
           <button
             key={value}
             type='button'
             className={cn(
-              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-secondary)] outline-none transition-colors hover:bg-[var(--surface-active)]',
+              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]',
               enabledFilter === value && 'bg-[var(--surface-active)]'
             )}
             onClick={() => {
@@ -861,7 +861,7 @@ export function KnowledgeBase({
               key={connector.id}
               type='button'
               onClick={() => setShowConnectorsModal(true)}
-              className='flex shrink-0 cursor-pointer items-center gap-[6px] rounded-[6px] px-[8px] py-[4px] text-[12px] text-[var(--text-secondary)] shadow-[inset_0_0_0_1px_var(--border)] transition-colors hover:bg-[var(--surface-3)]'
+              className='flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption shadow-[inset_0_0_0_1px_var(--border)] transition-colors hover-hover:bg-[var(--surface-3)]'
             >
               {ConnectorIcon && <ConnectorIcon className='h-[14px] w-[14px]' />}
               {def?.name || connector.connectorType}
@@ -940,7 +940,7 @@ export function KnowledgeBase({
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
                       <span
-                        className='block max-w-full truncate text-[12px] text-[var(--text-secondary)]'
+                        className='block max-w-full truncate text-[var(--text-secondary)] text-caption'
                         onClick={(e) => e.stopPropagation()}
                       >
                         {tagsDisplayText}
@@ -950,9 +950,9 @@ export function KnowledgeBase({
                       side='top'
                       className='max-h-[104px] max-w-[240px] overflow-y-auto'
                     >
-                      <div className='flex flex-col gap-[2px]'>
+                      <div className='flex flex-col gap-0.5'>
                         {tags.map((tag) => (
-                          <div key={tag.slot} className='text-[11px]'>
+                          <div key={tag.slot} className='text-xs'>
                             <span className='text-[var(--text-muted)]'>{tag.displayName}:</span>{' '}
                             {tag.value}
                           </div>
@@ -968,7 +968,7 @@ export function KnowledgeBase({
           cells: {
             name: {
               content: (
-                <span className='flex min-w-0 items-center gap-[12px] font-medium text-[14px] text-[var(--text-body)]'>
+                <span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
                   <span className='flex-shrink-0 text-[var(--text-icon)]'>
                     <DocIcon className='h-[14px] w-[14px]' />
                   </span>
@@ -999,7 +999,7 @@ export function KnowledgeBase({
               content: (
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <span className='font-medium text-[var(--text-secondary)] text-sm'>
                       {format(new Date(doc.uploadedAt), 'MMM d')}
                     </span>
                   </Tooltip.Trigger>
@@ -1025,13 +1025,13 @@ export function KnowledgeBase({
 
   if (error && !knowledgeBase) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <DatabaseX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>
             Knowledge base not found
           </h2>
-          <p className='text-[13px] text-[var(--text-muted)]'>
+          <p className='text-[var(--text-muted)] text-small'>
             This knowledge base may have been deleted or moved
           </p>
         </div>
@@ -1388,13 +1388,15 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
 
   return (
     <div className='border-[var(--border-1)] border-t'>
-      <div className='flex items-center justify-between px-[12px] py-[8px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Filter by tags</span>
-        <div className='flex items-center gap-[4px]'>
+      <div className='flex items-center justify-between px-3 py-2'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>
+          Filter by tags
+        </span>
+        <div className='flex items-center gap-1'>
           {activeCount > 0 && (
             <Button
               variant='ghost'
-              className='h-auto px-[6px] py-[2px] text-[11px] text-[var(--text-muted)]'
+              className='h-auto px-1.5 py-0.5 text-[var(--text-muted)] text-xs'
               onClick={() => onChange([])}
             >
               Clear all
@@ -1406,7 +1408,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
         </div>
       </div>
 
-      <div className='flex max-h-[320px] flex-col gap-[8px] overflow-y-auto px-[12px] pb-[12px]'>
+      <div className='flex max-h-[320px] flex-col gap-2 overflow-y-auto px-3 pb-3'>
         {filtersToShow.map((entry) => {
           const operators = getOperatorsForFieldType(entry.fieldType)
           const operatorOptions: ComboboxOption[] = operators.map((op) => ({
@@ -1418,14 +1420,14 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
           return (
             <div
               key={entry.id}
-              className='flex flex-col gap-[6px] rounded-[6px] border border-[var(--border-1)] p-[8px]'
+              className='flex flex-col gap-1.5 rounded-md border border-[var(--border-1)] p-2'
             >
               <div className='flex items-center justify-between'>
-                <Label className='text-[11px] text-[var(--text-muted)]'>Tag</Label>
+                <Label className='text-[var(--text-muted)] text-xs'>Tag</Label>
                 <button
                   type='button'
                   onClick={() => removeFilter(entry.id)}
-                  className='text-[var(--text-muted)] transition-colors hover:text-[var(--text-error)]'
+                  className='text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-error)]'
                 >
                   <X className='h-3 w-3' />
                 </button>
@@ -1439,7 +1441,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
 
               {entry.tagSlot && (
                 <>
-                  <Label className='text-[11px] text-[var(--text-muted)]'>Operator</Label>
+                  <Label className='text-[var(--text-muted)] text-xs'>Operator</Label>
                   <Combobox
                     options={operatorOptions}
                     value={entry.operator}
@@ -1447,19 +1449,17 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
                     placeholder='Select operator'
                   />
 
-                  <Label className='text-[11px] text-[var(--text-muted)]'>Value</Label>
+                  <Label className='text-[var(--text-muted)] text-xs'>Value</Label>
                   {entry.fieldType === 'date' ? (
                     isBetween ? (
-                      <div className='flex items-center gap-[6px]'>
+                      <div className='flex items-center gap-1.5'>
                         <DatePicker
                           size='sm'
                           value={entry.value || undefined}
                           onChange={(v) => updateEntry(entry.id, { value: v })}
                           placeholder='From'
                         />
-                        <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>
-                          to
-                        </span>
+                        <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>to</span>
                         <DatePicker
                           size='sm'
                           value={entry.valueTo || undefined}
@@ -1476,19 +1476,19 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
                       />
                     )
                   ) : isBetween ? (
-                    <div className='flex items-center gap-[6px]'>
+                    <div className='flex items-center gap-1.5'>
                       <Input
                         value={entry.value}
                         onChange={(e) => updateEntry(entry.id, { value: e.target.value })}
                         placeholder='From'
-                        className='h-[28px] text-[12px]'
+                        className='h-[28px] text-caption'
                       />
-                      <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>to</span>
+                      <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>to</span>
                       <Input
                         value={entry.valueTo}
                         onChange={(e) => updateEntry(entry.id, { valueTo: e.target.value })}
                         placeholder='To'
-                        className='h-[28px] text-[12px]'
+                        className='h-[28px] text-caption'
                       />
                     </div>
                   ) : (
@@ -1502,7 +1502,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
                             ? 'Enter number'
                             : 'Enter value'
                       }
-                      className='h-[28px] text-[12px]'
+                      className='h-[28px] text-caption'
                     />
                   )}
                 </>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
index a3e4211d07..6c96ec31d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
@@ -54,8 +54,8 @@ export function ActionBar({
       className={cn('-translate-x-1/2 fixed bottom-6 z-50 transform', className)}
       style={{ left: '50%' }}
     >
-      <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px] py-[6px]'>
-        <span className='px-[4px] text-[13px] text-[var(--text-secondary)]'>
+      <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
+        <span className='px-1 text-[var(--text-secondary)] text-small'>
           {isAllSelected ? totalCount : selectedCount} selected
           {showSelectAllOption && (
             <>
@@ -63,7 +63,7 @@ export function ActionBar({
               <button
                 type='button'
                 onClick={onSelectAll}
-                className='text-[var(--brand-primary)] hover:underline'
+                className='text-[var(--brand-primary)] hover-hover:underline'
               >
                 Select all
               </button>
@@ -75,7 +75,7 @@ export function ActionBar({
               <button
                 type='button'
                 onClick={onClearSelectAll}
-                className='text-[var(--brand-primary)] hover:underline'
+                className='text-[var(--brand-primary)] hover-hover:underline'
               >
                 Clear
               </button>
@@ -91,7 +91,7 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onEnable}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                  className='hover-hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
                 >
                   <Circle className='h-[12px] w-[12px]' />
                 </Button>
@@ -107,7 +107,7 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onDisable}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                  className='hover-hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
                 >
                   <CircleOff className='h-[12px] w-[12px]' />
                 </Button>
@@ -123,7 +123,7 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onDelete}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                  className='hover-hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
                 >
                   <Trash2 className='h-[12px] w-[12px]' />
                 </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
index 1d5c3f78a4..e7d9603da8 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
@@ -337,8 +337,8 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
 
           <ModalBody>
             {step === 'select-type' ? (
-              <div className='flex flex-col gap-[8px]'>
-                <div className='flex items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+              <div className='flex flex-col gap-2'>
+                <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
                   <Search
                     className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
                     strokeWidth={2}
@@ -351,7 +351,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                   />
                 </div>
                 <div className='min-h-[400px] overflow-y-auto'>
-                  <div className='flex flex-col gap-[2px]'>
+                  <div className='flex flex-col gap-0.5'>
                     {filteredEntries.map(([type, config]) => (
                       <ConnectorTypeCard
                         key={type}
@@ -360,7 +360,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                       />
                     ))}
                     {filteredEntries.length === 0 && (
-                      <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                      <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                         {CONNECTOR_ENTRIES.length === 0
                           ? 'No connectors available.'
                           : `No sources found matching "${searchTerm}"`}
@@ -370,10 +370,10 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                 </div>
               </div>
             ) : connectorConfig ? (
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {/* Auth: API key input or OAuth credential selection */}
                 {isApiKeyMode ? (
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label>
                       {connectorConfig.auth.mode === 'apiKey' && connectorConfig.auth.label
                         ? connectorConfig.auth.label
@@ -394,10 +394,10 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                     />
                   </div>
                 ) : (
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label>Account</Label>
                     {credentialsLoading ? (
-                      <div className='flex items-center gap-2 text-[13px] text-[var(--text-muted)]'>
+                      <div className='flex items-center gap-2 text-[var(--text-muted)] text-small'>
                         <Loader2 className='h-4 w-4 animate-spin' />
                         Loading credentials...
                       </div>
@@ -442,12 +442,12 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                     canonicalId && (canonicalGroups.get(canonicalId)?.length ?? 0) === 2
 
                   return (
-                    <div key={field.id} className='flex flex-col gap-[4px]'>
+                    <div key={field.id} className='flex flex-col gap-1'>
                       <div className='flex items-center justify-between'>
                         <Label>
                           {field.title}
                           {field.required && (
-                            <span className='ml-[2px] text-[var(--text-error)]'>*</span>
+                            <span className='ml-0.5 text-[var(--text-error)]'>*</span>
                           )}
                         </Label>
                         {hasCanonicalPair && canonicalId && (
@@ -455,7 +455,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                             <Tooltip.Trigger asChild>
                               <button
                                 type='button'
-                                className='flex h-[18px] w-[18px] items-center justify-center rounded-[3px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-secondary)]'
+                                className='flex h-[18px] w-[18px] items-center justify-center rounded-[3px] text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-secondary)]'
                                 onClick={() => toggleCanonicalMode(canonicalId)}
                               >
                                 <ArrowLeftRight className='h-[12px] w-[12px]' />
@@ -470,7 +470,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                         )}
                       </div>
                       {field.description && (
-                        <p className='text-[11px] text-[var(--text-muted)]'>{field.description}</p>
+                        <p className='text-[var(--text-muted)] text-xs'>{field.description}</p>
                       )}
                       {field.type === 'selector' && field.selectorKey ? (
                         <ConnectorSelectorField
@@ -507,12 +507,12 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
 
                 {/* Tag definitions (opt-out) */}
                 {connectorConfig.tagDefinitions && connectorConfig.tagDefinitions.length > 0 && (
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label>Metadata Tags</Label>
                     {connectorConfig.tagDefinitions.map((tagDef) => (
                       <div
                         key={tagDef.id}
-                        className='flex cursor-pointer items-center gap-[8px] rounded-[4px] px-[2px] py-[2px] text-[13px]'
+                        className='flex cursor-pointer items-center gap-2 rounded-sm px-0.5 py-0.5 text-small'
                         onClick={() => {
                           setDisabledTagIds((prev) => {
                             const next = new Set(prev)
@@ -541,7 +541,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                           }}
                         />
                         <span className='text-[var(--text-primary)]'>{tagDef.displayName}</span>
-                        <span className='text-[11px] text-[var(--text-muted)]'>
+                        <span className='text-[var(--text-muted)] text-xs'>
                           ({tagDef.fieldType})
                         </span>
                       </div>
@@ -550,7 +550,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                 )}
 
                 {/* Sync interval */}
-                <div className='flex flex-col gap-[4px]'>
+                <div className='flex flex-col gap-1'>
                   <Label>Sync Frequency</Label>
                   <ButtonGroup
                     value={String(syncInterval)}
@@ -565,7 +565,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                 </div>
 
                 {error && (
-                  <p className='text-[12px] text-[var(--text-error)] leading-tight'>{error}</p>
+                  <p className='text-[var(--text-error)] text-caption leading-tight'>{error}</p>
                 )}
               </div>
             ) : null}
@@ -619,15 +619,15 @@ function ConnectorTypeCard({ config, onClick }: ConnectorTypeCardProps) {
   return (
     <button
       type='button'
-      className='flex items-center gap-[10px] rounded-[6px] px-[10px] py-[8px] text-left transition-colors hover:bg-[var(--surface-3)]'
+      className='flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors hover-hover:bg-[var(--surface-3)]'
       onClick={onClick}
     >
       <Icon className='h-[18px] w-[18px] flex-shrink-0' />
       <div className='flex min-w-0 flex-col gap-[1px]'>
-        <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+        <span className='truncate font-medium text-[var(--text-primary)] text-small'>
           {config.name}
         </span>
-        <span className='truncate text-[11px] text-[var(--text-muted)]'>{config.description}</span>
+        <span className='truncate text-[var(--text-muted)] text-xs'>{config.description}</span>
       </div>
     </button>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx
index 9b6e3fa829..441a4a9313 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx
@@ -67,7 +67,7 @@ export function ConnectorSelectorField({
 
   if (isLoading && isEnabled) {
     return (
-      <div className='flex items-center gap-2 rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] text-[var(--text-muted)] text-sm'>
+      <div className='flex items-center gap-2 rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 text-[var(--text-muted)] text-sm'>
         <Loader2 className='h-3.5 w-3.5 animate-spin' />
         Loading...
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index 61b6f258fb..531fcc3f17 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -236,12 +236,12 @@ export function AddDocumentsModal({
 
         <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='space-y-[12px]'>
+            <div className='space-y-3'>
               {fileError && (
-                <p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
+                <p className='text-[var(--text-error)] text-caption leading-tight'>{fileError}</p>
               )}
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Upload Documents</Label>
                 <Button
                   type='button'
@@ -252,7 +252,7 @@ export function AddDocumentsModal({
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
                   className={cn(
-                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                    '!bg-[var(--surface-1)] hover-hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-2.5',
                     isDragging && 'border-[var(--surface-7)]'
                   )}
                 >
@@ -264,11 +264,11 @@ export function AddDocumentsModal({
                     className='hidden'
                     multiple
                   />
-                  <div className='flex flex-col gap-[2px] text-center'>
+                  <div className='flex flex-col gap-0.5 text-center'>
                     <span className='text-[var(--text-primary)]'>
                       {isDragging ? 'Drop files here' : 'Drop files here or click to browse'}
                     </span>
-                    <span className='text-[11px] text-[var(--text-tertiary)]'>
+                    <span className='text-[var(--text-tertiary)] text-xs'>
                       PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML (max 100MB each)
                     </span>
                   </div>
@@ -289,20 +289,20 @@ export function AddDocumentsModal({
                         <div
                           key={index}
                           className={cn(
-                            'flex items-center gap-2 rounded-[4px] border p-[8px]',
+                            'flex items-center gap-2 rounded-sm border p-2',
                             isFailed && !isRetrying && 'border-[var(--text-error)]'
                           )}
                         >
                           <span
                             className={cn(
-                              'min-w-0 flex-1 truncate text-[12px]',
+                              'min-w-0 flex-1 truncate text-caption',
                               isFailed && !isRetrying && 'text-[var(--text-error)]'
                             )}
                             title={file.name}
                           >
                             {file.name}
                           </span>
-                          <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>
+                          <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
                             {formatFileSize(file.size)}
                           </span>
                           <div className='flex flex-shrink-0 items-center gap-1'>
@@ -344,15 +344,15 @@ export function AddDocumentsModal({
         </ModalBody>
 
         <ModalFooter>
-          <div className='flex w-full items-center justify-between gap-[12px]'>
+          <div className='flex w-full items-center justify-between gap-3'>
             {uploadError ? (
-              <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+              <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                 {uploadError.message}
               </p>
             ) : (
               <div />
             )}
-            <div className='flex flex-shrink-0 gap-[8px]'>
+            <div className='flex flex-shrink-0 gap-2'>
               <Button variant='default' onClick={handleClose} type='button' disabled={isUploading}>
                 Cancel
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 9d2b83eaf8..dc57496db0 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -50,23 +50,20 @@ function DocumentList({ documents, totalCount }: DocumentListProps) {
   const hasMore = totalCount > displayLimit
 
   return (
-    <div className='rounded-[4px] border'>
+    <div className='rounded-sm border'>
       <div className='max-h-[160px] overflow-y-auto'>
         {documents.slice(0, displayLimit).map((doc) => {
           const DocumentIcon = getDocumentIcon('', doc.name)
           return (
-            <div
-              key={doc.id}
-              className='flex items-center gap-[8px] border-b p-[8px] last:border-b-0'
-            >
+            <div key={doc.id} className='flex items-center gap-2 border-b p-2 last:border-b-0'>
               <DocumentIcon className='h-4 w-4 flex-shrink-0 text-[var(--text-muted)]' />
-              <span className='min-w-0 max-w-[120px] truncate text-[12px] text-[var(--text-primary)]'>
+              <span className='min-w-0 max-w-[120px] truncate text-[var(--text-primary)] text-caption'>
                 {doc.name}
               </span>
               {doc.tagValue && (
                 <>
-                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[#3A3A3A]' />
-                  <span className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-muted)]'>
+                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                  <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-xs'>
                     {doc.tagValue}
                   </span>
                 </>
@@ -75,7 +72,7 @@ function DocumentList({ documents, totalCount }: DocumentListProps) {
           )
         })}
         {hasMore && (
-          <div className='p-[8px] text-[11px] text-[var(--text-muted)]'>
+          <div className='p-2 text-[var(--text-muted)] text-xs'>
             and {totalCount - displayLimit} more documents
           </div>
         )}
@@ -273,17 +270,17 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
 
           <ModalBody>
             <div className='min-h-0 flex-1 overflow-y-auto'>
-              <div className='space-y-[8px]'>
+              <div className='space-y-2'>
                 <Label>
                   Tags:{' '}
-                  <span className='pl-[6px] text-[var(--text-tertiary)]'>
+                  <span className='pl-1.5 text-[var(--text-tertiary)]'>
                     {kbTagDefinitions.length} defined
                   </span>
                 </Label>
 
                 {kbTagDefinitions.length === 0 && !isCreatingTag && (
-                  <div className='rounded-[6px] border p-[16px] text-center'>
-                    <p className='text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='rounded-md border p-4 text-center'>
+                    <p className='text-[var(--text-tertiary)] text-caption'>
                       No tag definitions yet. Create your first tag to organize documents.
                     </p>
                   </div>
@@ -294,17 +291,17 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                   return (
                     <div
                       key={tag.id}
-                      className='flex cursor-pointer items-center gap-2 rounded-[4px] border p-[8px] hover:bg-[var(--surface-2)]'
+                      className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
                       onClick={() => handleViewDocuments(tag)}
                     >
-                      <span className='min-w-0 truncate text-[12px] text-[var(--text-primary)]'>
+                      <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
                         {tag.displayName}
                       </span>
-                      <span className='rounded-[3px] bg-[var(--surface-3)] px-[6px] py-[2px] text-[10px] text-[var(--text-muted)]'>
+                      <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                         {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                       </span>
-                      <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[#3A3A3A]' />
-                      <span className='min-w-0 flex-1 text-[11px] text-[var(--text-muted)]'>
+                      <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                      <span className='min-w-0 flex-1 text-[var(--text-muted)] text-xs'>
                         {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
                       </span>
                       <div className='flex flex-shrink-0 items-center gap-1'>
@@ -314,7 +311,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                             e.stopPropagation()
                             handleDeleteTagClick(tag)
                           }}
-                          className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-error)]'
+                          className='h-4 w-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
                         >
                           <Trash className='h-3 w-3' />
                         </Button>
@@ -335,8 +332,8 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                 )}
 
                 {isCreatingTag && (
-                  <div className='space-y-[8px] rounded-[6px] border p-[12px]'>
-                    <div className='flex flex-col gap-[8px]'>
+                  <div className='space-y-2 rounded-md border p-3'>
+                    <div className='flex flex-col gap-2'>
                       <Label htmlFor='tagName'>Tag Name</Label>
                       <Input
                         id='tagName'
@@ -358,13 +355,13 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         }}
                       />
                       {tagNameConflict && (
-                        <span className='text-[12px] text-[var(--text-error)]'>
+                        <span className='text-[var(--text-error)] text-caption'>
                           A tag with this name already exists
                         </span>
                       )}
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
+                    <div className='flex flex-col gap-2'>
                       <Label htmlFor='tagType'>Type</Label>
                       <Combobox
                         options={fieldTypeOptions}
@@ -375,13 +372,13 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         placeholder='Select type'
                       />
                       {!hasAvailableSlots(createTagForm.fieldType) && (
-                        <span className='text-[12px] text-[var(--text-error)]'>
+                        <span className='text-[var(--text-error)] text-caption'>
                           No available slots for this type. Choose a different type.
                         </span>
                       )}
                     </div>
 
-                    <div className='flex gap-[8px]'>
+                    <div className='flex gap-2'>
                       <Button variant='default' onClick={cancelCreatingTag} className='flex-1'>
                         Cancel
                       </Button>
@@ -417,7 +414,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         <ModalContent size='sm'>
           <ModalHeader>Delete Tag</ModalHeader>
           <ModalBody>
-            <div className='space-y-[8px]'>
+            <div className='space-y-2'>
               <p className='text-[var(--text-secondary)]'>
                 Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
                 remove this tag from {selectedTagUsage?.documentCount || 0} document
@@ -426,7 +423,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
               </p>
 
               {selectedTagUsage && selectedTagUsage.documentCount > 0 && (
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Affected documents:</Label>
                   <DocumentList
                     documents={selectedTagUsage.documents}
@@ -460,7 +457,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         <ModalContent size='sm'>
           <ModalHeader>Documents using "{selectedTag?.displayName}"</ModalHeader>
           <ModalBody>
-            <div className='space-y-[8px]'>
+            <div className='space-y-2'>
               <p className='text-[var(--text-secondary)]'>
                 {selectedTagUsage?.documentCount || 0} document
                 {selectedTagUsage?.documentCount !== 1 ? 's are' : ' is'} currently using this tag
@@ -468,7 +465,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
               </p>
 
               {selectedTagUsage?.documentCount === 0 ? (
-                <div className='rounded-[6px] border p-[16px] text-center'>
+                <div className='rounded-md border p-4 text-center'>
                   <p className='text-[var(--text-secondary)]'>
                     This tag definition is not being used by any documents. You can safely delete it
                     to free up the tag slot.
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
index 3abc3d5082..5e80e1f8cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
@@ -130,22 +130,17 @@ export function ConnectorsSection({
   if (connectors.length === 0 && !canEdit && !isLoading) return null
 
   return (
-    <div className='mt-[16px]'>
-      {error && (
-        <p className='mt-[8px] text-[12px] text-[var(--text-error)] leading-tight'>{error}</p>
-      )}
+    <div className='mt-4'>
+      {error && <p className='mt-2 text-[var(--text-error)] text-caption leading-tight'>{error}</p>}
 
       {isLoading ? (
-        <div className='mt-[8px] flex flex-col gap-[8px]'>
+        <div className='mt-2 flex flex-col gap-2'>
           {Array.from({ length: 2 }).map((_, i) => (
-            <div
-              key={i}
-              className='rounded-[8px] border border-[var(--border-1)] px-[12px] py-[10px]'
-            >
-              <div className='flex items-center gap-[10px]'>
-                <Skeleton className='h-5 w-5 flex-shrink-0 rounded-[4px]' />
-                <div className='flex flex-col gap-[4px]'>
-                  <div className='flex items-center gap-[8px]'>
+            <div key={i} className='rounded-lg border border-[var(--border-1)] px-3 py-2.5'>
+              <div className='flex items-center gap-2.5'>
+                <Skeleton className='h-5 w-5 flex-shrink-0 rounded-sm' />
+                <div className='flex flex-col gap-1'>
+                  <div className='flex items-center gap-2'>
                     <Skeleton className='h-[14px] w-[100px]' />
                     <Skeleton className='h-[18px] w-[52px] rounded-full' />
                   </div>
@@ -156,11 +151,11 @@ export function ConnectorsSection({
           ))}
         </div>
       ) : connectors.length === 0 ? (
-        <p className='mt-[8px] text-[13px] text-[var(--text-muted)]'>
+        <p className='mt-2 text-[var(--text-muted)] text-small'>
           No connected sources yet. Connect an external source to automatically sync documents.
         </p>
       ) : (
-        <div className='mt-[8px] flex flex-col gap-[8px]'>
+        <div className='mt-2 flex flex-col gap-2'>
           {connectors.map((connector) => (
             <ConnectorCard
               key={connector.id}
@@ -210,7 +205,7 @@ export function ConnectorsSection({
         <ModalContent size='sm'>
           <ModalHeader>Delete Connector</ModalHeader>
           <ModalBody>
-            <p className='text-[14px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-sm'>
               Are you sure you want to remove this connected source? Documents already synced will
               remain in the knowledge base.
             </p>
@@ -305,23 +300,23 @@ function ConnectorCard({
   const syncLogs = detail?.syncLogs ?? []
 
   return (
-    <div className='rounded-[8px] border border-[var(--border-1)]'>
-      <div className='flex items-center justify-between px-[12px] py-[10px]'>
-        <div className='flex items-center gap-[10px]'>
+    <div className='rounded-lg border border-[var(--border-1)]'>
+      <div className='flex items-center justify-between px-3 py-2.5'>
+        <div className='flex items-center gap-2.5'>
           {Icon && <Icon className='h-5 w-5 flex-shrink-0' />}
-          <div className='flex flex-col gap-[2px]'>
-            <div className='flex items-center gap-[8px]'>
-              <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+          <div className='flex flex-col gap-0.5'>
+            <div className='flex items-center gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-small'>
                 {connectorDef?.name || connector.connectorType}
               </span>
-              <Badge variant={statusConfig.variant} className='text-[10px]'>
+              <Badge variant={statusConfig.variant} className='text-micro'>
                 {connector.status === 'syncing' && (
                   <Loader2 className='mr-1 h-3 w-3 animate-spin' />
                 )}
                 {statusConfig.label}
               </Badge>
             </div>
-            <div className='flex items-center gap-[6px] text-[11px] text-[var(--text-muted)]'>
+            <div className='flex items-center gap-1.5 text-[var(--text-muted)] text-xs'>
               {connector.lastSyncAt && (
                 <span>Last sync: {format(new Date(connector.lastSyncAt), 'MMM d, h:mm a')}</span>
               )}
@@ -352,7 +347,7 @@ function ConnectorCard({
           </div>
         </div>
 
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {canEdit && (
             <>
               <Tooltip.Root>
@@ -436,10 +431,10 @@ function ConnectorCard({
       </div>
 
       {missingScopes.length > 0 && (
-        <div className='border-[var(--border-1)] border-t px-[12px] py-[8px]'>
-          <div className='flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
-            <div className='flex items-center font-medium text-[12px]'>
-              <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+        <div className='border-[var(--border-1)] border-t px-3 py-2'>
+          <div className='flex flex-col gap-1 rounded-sm border bg-[var(--surface-2)] px-2 py-1.5'>
+            <div className='flex items-center font-medium text-caption'>
+              <span className='mr-1.5 inline-block h-[6px] w-[6px] rounded-xs bg-amber-500' />
               Additional permissions required
             </div>
             {canEdit && (
@@ -457,7 +452,7 @@ function ConnectorCard({
                   })
                   setShowOAuthModal(true)
                 }}
-                className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+                className='w-full px-2 py-1 font-medium text-caption'
               >
                 Update access
               </Button>
@@ -467,7 +462,7 @@ function ConnectorCard({
       )}
 
       {expanded && (
-        <div className='border-[var(--border-1)] border-t px-[12px] py-[8px]'>
+        <div className='border-[var(--border-1)] border-t px-3 py-2'>
           <SyncHistory logs={syncLogs} isLoading={detailLoading} />
         </div>
       )}
@@ -498,7 +493,7 @@ interface SyncHistoryProps {
 function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
   if (isLoading) {
     return (
-      <div className='flex items-center gap-2 py-[4px] text-[11px] text-[var(--text-muted)]'>
+      <div className='flex items-center gap-2 py-1 text-[var(--text-muted)] text-xs'>
         <Loader2 className='h-3 w-3 animate-spin' />
         Loading sync history...
       </div>
@@ -506,11 +501,11 @@ function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
   }
 
   if (logs.length === 0) {
-    return <p className='py-[4px] text-[11px] text-[var(--text-muted)]'>No sync history yet.</p>
+    return <p className='py-1 text-[var(--text-muted)] text-xs'>No sync history yet.</p>
   }
 
   return (
-    <div className='flex flex-col gap-[6px]'>
+    <div className='flex flex-col gap-1.5'>
       {logs.map((log) => {
         const isError = log.status === 'error' || log.status === 'failed'
         const isRunning = log.status === 'running' || log.status === 'syncing'
@@ -518,7 +513,7 @@ function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
           log.docsAdded + log.docsUpdated + log.docsDeleted + (log.docsFailed ?? 0)
 
         return (
-          <div key={log.id} className='flex items-start gap-[8px] text-[11px]'>
+          <div key={log.id} className='flex items-start gap-2 text-xs'>
             <div className='mt-[1px] flex-shrink-0'>
               {isRunning ? (
                 <Loader2 className='h-3 w-3 animate-spin text-[var(--text-muted)]' />
@@ -530,7 +525,7 @@ function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
             </div>
 
             <div className='flex min-w-0 flex-1 flex-col gap-[1px]'>
-              <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-1.5'>
                 <span className='text-[var(--text-muted)]'>
                   {format(new Date(log.startedAt), 'MMM d, h:mm a')}
                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
index 5ee8ab5cdc..c212edc1d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
@@ -196,15 +196,15 @@ function SettingsTab({
   error,
 }: SettingsTabProps) {
   return (
-    <div className='flex flex-col gap-[12px]'>
+    <div className='flex flex-col gap-3'>
       {connectorConfig?.configFields.map((field) => (
-        <div key={field.id} className='flex flex-col gap-[4px]'>
+        <div key={field.id} className='flex flex-col gap-1'>
           <Label>
             {field.title}
-            {field.required && <span className='ml-[2px] text-[var(--text-error)]'>*</span>}
+            {field.required && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
           </Label>
           {field.description && (
-            <p className='text-[11px] text-[var(--text-muted)]'>{field.description}</p>
+            <p className='text-[var(--text-muted)] text-xs'>{field.description}</p>
           )}
           {field.type === 'dropdown' && field.options ? (
             <Combobox
@@ -227,7 +227,7 @@ function SettingsTab({
         </div>
       ))}
 
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label>Sync Frequency</Label>
         <ButtonGroup
           value={String(syncInterval)}
@@ -241,7 +241,7 @@ function SettingsTab({
         </ButtonGroup>
       </div>
 
-      {error && <p className='text-[12px] text-[var(--text-error)] leading-tight'>{error}</p>}
+      {error && <p className='text-[var(--text-error)] text-caption leading-tight'>{error}</p>}
     </div>
   )
 }
@@ -270,7 +270,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
 
   if (isLoading) {
     return (
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-6 w-full' />
         <Skeleton className='h-6 w-full' />
         <Skeleton className='h-6 w-full' />
@@ -279,7 +279,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
   }
 
   return (
-    <div className='flex flex-col gap-[16px]'>
+    <div className='flex flex-col gap-4'>
       <ButtonGroup value={filter} onValueChange={(val) => setFilter(val as 'active' | 'excluded')}>
         <ButtonGroupItem value='active'>Active ({counts.active})</ButtonGroupItem>
         <ButtonGroupItem value='excluded'>Excluded ({counts.excluded})</ButtonGroupItem>
@@ -287,15 +287,15 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
 
       <div className='max-h-[320px] min-h-0 overflow-y-auto'>
         {documents.length === 0 ? (
-          <p className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+          <p className='py-4 text-center text-[var(--text-muted)] text-small'>
             {filter === 'excluded' ? 'No excluded documents' : 'No documents yet'}
           </p>
         ) : (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {documents.map((doc) => (
               <div key={doc.id} className='flex items-center justify-between'>
-                <div className='flex min-w-0 items-center gap-[6px]'>
-                  <span className='truncate text-[13px] text-[var(--text-primary)]'>
+                <div className='flex min-w-0 items-center gap-1.5'>
+                  <span className='truncate text-[var(--text-primary)] text-small'>
                     {doc.filename}
                   </span>
                   {doc.sourceUrl && (
@@ -303,7 +303,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
                       href={doc.sourceUrl}
                       target='_blank'
                       rel='noopener noreferrer'
-                      className='flex-shrink-0 text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+                      className='flex-shrink-0 text-[var(--text-muted)] hover-hover:text-[var(--text-secondary)]'
                     >
                       <ExternalLink className='h-3 w-3' />
                     </a>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
index e701c171bb..33144a19d2 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
@@ -80,9 +80,9 @@ export function RenameDocumentModal({
       <ModalContent size='sm'>
         <ModalHeader>Rename Document</ModalHeader>
         <form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody className='!pb-[16px]'>
-            <div className='space-y-[12px]'>
-              <div className='flex flex-col gap-[8px]'>
+          <ModalBody className='!pb-4'>
+            <div className='space-y-3'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='document-name'>Name</Label>
                 <Input
                   id='document-name'
@@ -106,15 +106,15 @@ export function RenameDocumentModal({
             </div>
           </ModalBody>
           <ModalFooter>
-            <div className='flex w-full items-center justify-between gap-[12px]'>
+            <div className='flex w-full items-center justify-between gap-3'>
               {error ? (
-                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                   {error}
                 </p>
               ) : (
                 <div />
               )}
-              <div className='flex flex-shrink-0 gap-[8px]'>
+              <div className='flex flex-shrink-0 gap-2'>
                 <Button
                   variant='default'
                   onClick={() => onOpenChange(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
index a3ef57c6ee..d956af406f 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
@@ -29,26 +29,26 @@ interface BaseCardProps {
  */
 export function BaseCardSkeleton() {
   return (
-    <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
-      <div className='flex items-center justify-between gap-[8px]'>
-        <div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-        <div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+    <div className='group flex h-full cursor-pointer flex-col gap-3 rounded-sm bg-[var(--surface-3)] px-2 py-1.5 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]'>
+      <div className='flex items-center justify-between gap-2'>
+        <div className='h-[17px] w-[120px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+        <div className='h-[22px] w-[90px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
       </div>
 
-      <div className='flex flex-1 flex-col gap-[8px]'>
+      <div className='flex flex-1 flex-col gap-2'>
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[6px]'>
-            <div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-            <div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+          <div className='flex items-center gap-1.5'>
+            <div className='h-[12px] w-[12px] animate-pulse rounded-xs bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+            <div className='h-[15px] w-[45px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           </div>
-          <div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+          <div className='h-[15px] w-[120px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         </div>
 
         <div className='h-0 w-full border-[var(--divider)] border-t' />
 
-        <div className='flex h-[36px] flex-col gap-[6px]'>
-          <div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-          <div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+        <div className='flex h-[36px] flex-col gap-1.5'>
+          <div className='h-[15px] w-full animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+          <div className='h-[15px] w-[75%] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         </div>
       </div>
     </div>
@@ -173,26 +173,24 @@ export function BaseCard({
         onContextMenu={handleContextMenu}
         data-kb-card
       >
-        <div className='group flex h-full flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
-          <div className='flex items-center justify-between gap-[8px]'>
-            <h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+        <div className='group flex h-full flex-col gap-3 rounded-sm bg-[var(--surface-3)] px-2 py-1.5 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]'>
+          <div className='flex items-center justify-between gap-2'>
+            <h3 className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-sm'>
               {title}
             </h3>
-            {shortId && (
-              <Badge className='flex-shrink-0 rounded-[4px] text-[12px]'>{shortId}</Badge>
-            )}
+            {shortId && <Badge className='flex-shrink-0 rounded-sm text-caption'>{shortId}</Badge>}
           </div>
 
-          <div className='flex flex-1 flex-col gap-[8px]'>
+          <div className='flex flex-1 flex-col gap-2'>
             <div className='flex items-center justify-between'>
-              <span className='flex items-center gap-[6px] text-[12px] text-[var(--text-tertiary)]'>
+              <span className='flex items-center gap-1.5 text-[var(--text-tertiary)] text-caption'>
                 <DocumentAttachment className='h-[12px] w-[12px]' />
                 {docCount} {docCount === 1 ? 'doc' : 'docs'}
               </span>
               {updatedAt && (
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <span className='text-[12px] text-[var(--text-tertiary)]'>
+                    <span className='text-[var(--text-tertiary)] text-caption'>
                       last updated: {formatRelativeTime(updatedAt)}
                     </span>
                   </Tooltip.Trigger>
@@ -203,8 +201,8 @@ export function BaseCard({
 
             <div className='h-0 w-full border-[var(--divider)] border-t' />
 
-            <div className='flex items-start justify-between gap-[8px]'>
-              <p className='line-clamp-2 h-[36px] flex-1 text-[12px] text-[var(--text-tertiary)] leading-[18px]'>
+            <div className='flex items-start justify-between gap-2'>
+              <p className='line-clamp-2 h-[36px] flex-1 text-[var(--text-tertiary)] text-caption leading-[18px]'>
                 {description}
               </p>
               {connectorTypes.length > 0 && (
@@ -217,7 +215,7 @@ export function BaseCard({
                       <Tooltip.Root key={type}>
                         <Tooltip.Trigger asChild>
                           <div
-                            className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-5)]'
+                            className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--surface-5)]'
                             style={{ marginLeft: index > 0 ? '-4px' : '0' }}
                           >
                             <Icon className='h-[12px] w-[12px] text-[var(--text-secondary)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
index aa5b7618fe..03fe178bdc 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
@@ -1,8 +1,8 @@
 export const filterButtonClass =
-  'w-full justify-between rounded-[10px] border-[#E5E5E5] bg-[var(--white)] font-normal text-sm dark:border-[#414141] dark:bg-[var(--surface-2)]'
+  'w-full justify-between rounded-[10px] border-[var(--surface-6)] bg-[var(--white)] font-normal text-sm dark:border-[var(--border-muted)] dark:bg-[var(--surface-2)]'
 
 export const dropdownContentClass =
-  'w-[220px] rounded-lg border-[#E5E5E5] bg-[var(--white)] p-0 shadow-xs dark:border-[#414141] dark:bg-[var(--surface-2)]'
+  'w-[220px] rounded-lg border-[var(--surface-6)] bg-[var(--white)] p-0 shadow-xs dark:border-[var(--border-muted)] dark:bg-[var(--surface-2)]'
 
 export const commandListClass = 'overflow-y-auto overflow-x-hidden'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index 8bf91682a9..1c8efc0794 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -309,8 +309,8 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
           <ModalBody>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-              <div className='space-y-[12px]'>
-                <div className='flex flex-col gap-[8px]'>
+              <div className='space-y-3'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='kb-name'>Name</Label>
                   {/* Hidden decoy fields to prevent browser autofill */}
                   <input
@@ -339,7 +339,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='description'>Description</Label>
                   <Textarea
                     id='description'
@@ -350,8 +350,8 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   />
                 </div>
 
-                <div className='grid grid-cols-2 gap-[12px]'>
-                  <div className='flex flex-col gap-[8px]'>
+                <div className='grid grid-cols-2 gap-3'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
                     <Input
                       id='minChunkSize'
@@ -364,7 +364,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     />
                   </div>
 
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
                     <Input
                       id='maxChunkSize'
@@ -378,7 +378,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   </div>
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
                   <Input
                     id='overlapSize'
@@ -389,12 +389,12 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     data-form-type='other'
                     name='overlap-size'
                   />
-                  <p className='text-[11px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-xs'>
                     1 token ≈ 4 characters. Max chunk size and overlap are in tokens.
                   </p>
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Upload Documents</Label>
                   <Button
                     type='button'
@@ -405,7 +405,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     onDragLeave={handleDragLeave}
                     onDrop={handleDrop}
                     className={cn(
-                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                      '!bg-[var(--surface-1)] hover-hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-2.5',
                       isDragging && 'border-[var(--surface-7)]'
                     )}
                   >
@@ -417,11 +417,11 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                       className='hidden'
                       multiple
                     />
-                    <div className='flex flex-col gap-[2px] text-center'>
+                    <div className='flex flex-col gap-0.5 text-center'>
                       <span className='text-[var(--text-primary)]'>
                         {isDragging ? 'Drop files here' : 'Drop files here or click to browse'}
                       </span>
-                      <span className='text-[11px] text-[var(--text-tertiary)]'>
+                      <span className='text-[var(--text-tertiary)] text-xs'>
                         PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML (max 100MB each)
                       </span>
                     </div>
@@ -442,20 +442,20 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                           <div
                             key={index}
                             className={cn(
-                              'flex items-center gap-2 rounded-[4px] border p-[8px]',
+                              'flex items-center gap-2 rounded-sm border p-2',
                               isFailed && !isRetrying && 'border-[var(--text-error)]'
                             )}
                           >
                             <span
                               className={cn(
-                                'min-w-0 flex-1 truncate text-[12px]',
+                                'min-w-0 flex-1 truncate text-caption',
                                 isFailed && !isRetrying && 'text-[var(--text-error)]'
                               )}
                               title={file.name}
                             >
                               {file.name}
                             </span>
-                            <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>
+                            <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
                               {formatFileSize(file.size)}
                             </span>
                             <div className='flex flex-shrink-0 items-center gap-1'>
@@ -497,22 +497,22 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                 )}
 
                 {fileError && (
-                  <p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
+                  <p className='text-[var(--text-error)] text-caption leading-tight'>{fileError}</p>
                 )}
               </div>
             </div>
           </ModalBody>
 
           <ModalFooter>
-            <div className='flex w-full items-center justify-between gap-[12px]'>
+            <div className='flex w-full items-center justify-between gap-3'>
               {submitStatus?.type === 'error' || uploadError ? (
-                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                   {uploadError?.message || submitStatus?.message}
                 </p>
               ) : (
                 <div />
               )}
-              <div className='flex flex-shrink-0 gap-[8px]'>
+              <div className='flex flex-shrink-0 gap-2'>
                 <Button
                   variant='default'
                   onClick={() => handleClose(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
index bf0699813c..8dd4823971 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
@@ -103,8 +103,8 @@ export function EditKnowledgeBaseModal({
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
           <ModalBody>
-            <div className='space-y-[12px]'>
-              <div className='flex flex-col gap-[8px]'>
+            <div className='space-y-3'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='kb-name'>Name</Label>
                 <Input
                   id='kb-name'
@@ -118,11 +118,11 @@ export function EditKnowledgeBaseModal({
                   data-form-type='other'
                 />
                 {errors.name && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{errors.name.message}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{errors.name.message}</p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='description'>Description</Label>
                 <Textarea
                   id='description'
@@ -132,7 +132,7 @@ export function EditKnowledgeBaseModal({
                   className={cn(errors.description && 'border-[var(--text-error)]')}
                 />
                 {errors.description && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {errors.description.message}
                   </p>
                 )}
@@ -141,15 +141,15 @@ export function EditKnowledgeBaseModal({
           </ModalBody>
 
           <ModalFooter>
-            <div className='flex w-full items-center justify-between gap-[12px]'>
+            <div className='flex w-full items-center justify-between gap-3'>
               {error ? (
-                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                   {error}
                 </p>
               ) : (
                 <div />
               )}
-              <div className='flex flex-shrink-0 gap-[8px]'>
+              <div className='flex flex-shrink-0 gap-2'>
                 <Button
                   variant='default'
                   onClick={() => onOpenChange(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
index df5bf237b9..c588073530 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
@@ -27,10 +27,10 @@ interface BreadcrumbItem {
 }
 
 const HEADER_STYLES = {
-  container: 'flex items-center justify-between px-6 pt-[14px] pb-6',
+  container: 'flex items-center justify-between px-6 pt-3.5 pb-6',
   breadcrumbs: 'flex items-center gap-2',
   icon: 'h-[18px] w-[18px] text-[var(--text-icon)] transition-colors',
-  link: 'group flex items-center gap-2 font-medium text-sm text-[var(--text-body)] transition-colors hover:text-[var(--text-secondary)]',
+  link: 'group flex items-center gap-2 font-medium text-sm text-[var(--text-body)] transition-colors hover-hover:text-[var(--text-secondary)]',
   label: 'font-medium text-sm text-[var(--text-body)]',
   separator: 'text-[var(--text-icon)]',
   actionsContainer: 'flex items-center gap-2',
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
index 24a80a8f80..ccdc7ede82 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
@@ -269,7 +269,7 @@ function LineChartComponent({
                     type='button'
                     aria-pressed={activeSeriesId === s.id}
                     aria-label={`Toggle ${s.label}`}
-                    className='inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px]'
+                    className='inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-micro'
                     style={{
                       color: resolvedColors[s.id || ''] || s.color,
                       opacity: dimmed ? 0.4 : isHovered ? 1 : 0.9,
@@ -290,7 +290,7 @@ function LineChartComponent({
                   >
                     <span
                       aria-hidden='true'
-                      className='inline-block h-[6px] w-[6px] rounded-[2px]'
+                      className='inline-block h-[6px] w-[6px] rounded-xs'
                       style={{ backgroundColor: resolvedColors[s.id || ''] || s.color }}
                     />
                     <span style={{ color: 'hsl(var(--muted-foreground))' }}>{s.label}</span>
@@ -671,11 +671,11 @@ function LineChartComponent({
             const top = Math.min(Math.max(anchorY - 26, padding.top), height - padding.bottom - 18)
             return (
               <div
-                className='pointer-events-none absolute rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] font-medium text-[11px] shadow-lg'
+                className='pointer-events-none absolute rounded-lg border border-[var(--border-1)] bg-[var(--surface-1)] px-2 py-1.5 font-medium text-xs shadow-lg'
                 style={{ left, top }}
               >
                 {currentHoverDate && (
-                  <div className='mb-1 text-[10px] text-[var(--text-tertiary)]'>
+                  <div className='mb-1 text-[var(--text-tertiary)] text-micro'>
                     {currentHoverDate}
                   </div>
                 )}
@@ -686,9 +686,9 @@ function LineChartComponent({
                   const showLabel =
                     seriesLabel && seriesLabel !== 'base' && seriesLabel.trim() !== ''
                   return (
-                    <div key={`tt-${s.id}`} className='flex items-center gap-[8px]'>
+                    <div key={`tt-${s.id}`} className='flex items-center gap-2'>
                       <span
-                        className='inline-block h-[6px] w-[6px] rounded-[2px]'
+                        className='inline-block h-[6px] w-[6px] rounded-xs'
                         style={{ backgroundColor: resolvedColors[s.id || ''] || s.color }}
                       />
                       {showLabel && (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
index 568d4179c2..afdf2867d5 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
@@ -48,7 +48,7 @@ function StatusBarInner({
   return (
     <div className='relative'>
       <div
-        className='flex select-none items-stretch gap-[2px]'
+        className='flex select-none items-stretch gap-0.5'
         onMouseLeave={() => setHoverIndex(null)}
       >
         {segments.map((segment, i) => {
@@ -60,16 +60,16 @@ function StatusBarInner({
           let hoverBrightness: string
           if (!segment.hasExecutions) {
             color = 'bg-gray-300/60 dark:bg-gray-500/40'
-            hoverBrightness = 'hover:brightness-200'
+            hoverBrightness = 'hover-hover:brightness-200'
           } else if (segment.successRate === 100) {
             color = 'bg-emerald-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover-hover:brightness-106'
           } else if (segment.successRate >= 95) {
             color = 'bg-amber-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover-hover:brightness-106'
           } else {
             color = 'bg-red-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover-hover:brightness-106'
           }
 
           return (
@@ -97,7 +97,7 @@ function StatusBarInner({
 
       {hoverIndex !== null && segments[hoverIndex] && (
         <div
-          className={`-translate-x-1/2 pointer-events-none absolute z-20 w-max whitespace-nowrap rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] text-center text-[11px] shadow-lg ${
+          className={`-translate-x-1/2 pointer-events-none absolute z-20 w-max whitespace-nowrap rounded-lg border border-[var(--border-1)] bg-[var(--surface-1)] px-2 py-1.5 text-center text-xs shadow-lg ${
             preferBelow ? '' : '-translate-y-full'
           }`}
           style={{
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
index 3709b3db9a..70915c2b8f 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
@@ -39,15 +39,15 @@ function WorkflowsListInner({
   const workflows = useWorkflowRegistry((s) => s.workflows)
 
   return (
-    <div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
+    <div className='flex h-full flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
       {/* Table header */}
-      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
-        <div className='flex items-center gap-[16px]'>
-          <span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
+        <div className='flex items-center gap-4'>
+          <span className='w-[160px] flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
             Workflow
           </span>
-          <span className='flex-1 font-medium text-[12px] text-[var(--text-tertiary)]'>Logs</span>
-          <span className='w-[100px] flex-shrink-0 pl-[16px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <span className='flex-1 font-medium text-[var(--text-tertiary)] text-caption'>Logs</span>
+          <span className='w-[100px] flex-shrink-0 pl-4 font-medium text-[var(--text-tertiary)] text-caption'>
             Success Rate
           </span>
         </div>
@@ -56,8 +56,8 @@ function WorkflowsListInner({
       {/* Table body - scrollable */}
       <div className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden'>
         {filteredExecutions.length === 0 ? (
-          <div className='flex items-center justify-center py-[32px]'>
-            <span className='text-[13px] text-[var(--text-secondary)]'>
+          <div className='flex items-center justify-center py-8'>
+            <span className='text-[var(--text-secondary)] text-small'>
               {searchQuery ? `No workflows found matching "${searchQuery}"` : 'No workflows found'}
             </span>
           </div>
@@ -75,7 +75,7 @@ function WorkflowsListInner({
                 <div
                   key={workflow.workflowId}
                   className={cn(
-                    'flex h-[44px] items-center gap-[16px] px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
+                    'flex h-[44px] items-center gap-4 px-6 hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-4)]',
                     canToggle ? 'cursor-pointer' : 'cursor-default',
                     isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
                   )}
@@ -86,7 +86,7 @@ function WorkflowsListInner({
                   }}
                 >
                   {/* Workflow name with color */}
-                  <div className='flex w-[160px] flex-shrink-0 items-center gap-[8px] pr-[8px]'>
+                  <div className='flex w-[160px] flex-shrink-0 items-center gap-2 pr-2'>
                     <div
                       className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
                       style={{
@@ -95,7 +95,7 @@ function WorkflowsListInner({
                         backgroundClip: 'padding-box',
                       }}
                     />
-                    <span className='min-w-0 truncate font-medium text-[12px] text-[var(--text-primary)]'>
+                    <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
                       {workflow.workflowName}
                     </span>
                   </div>
@@ -113,7 +113,7 @@ function WorkflowsListInner({
                   </div>
 
                   {/* Success rate */}
-                  <span className='w-[100px] flex-shrink-0 pl-[16px] font-medium text-[12px] text-[var(--text-primary)]'>
+                  <span className='w-[100px] flex-shrink-0 pl-4 font-medium text-[var(--text-primary)] text-caption'>
                     {workflow.overallSuccessRate.toFixed(1)}%
                   </span>
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
index 9f574d5095..e19df1fc19 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
@@ -33,16 +33,16 @@ const SKELETON_BAR_HEIGHTS = [
 
 function GraphCardSkeleton({ title }: { title: string }) {
   return (
-    <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-      <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+    <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+      <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
         <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
           {title}
         </span>
         <Skeleton className='h-[20px] w-[40px]' />
       </div>
-      <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
-        <div className='flex h-[166px] flex-col justify-end gap-[4px]'>
-          <div className='flex items-end gap-[2px]'>
+      <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
+        <div className='flex h-[166px] flex-col justify-end gap-1'>
+          <div className='flex items-end gap-0.5'>
             {SKELETON_BAR_HEIGHTS.map((height, i) => (
               <Skeleton
                 key={i}
@@ -61,15 +61,15 @@ function GraphCardSkeleton({ title }: { title: string }) {
 
 function WorkflowRowSkeleton() {
   return (
-    <div className='flex h-[44px] items-center gap-[16px] px-[24px]'>
-      <div className='flex w-[160px] flex-shrink-0 items-center gap-[8px] pr-[8px]'>
+    <div className='flex h-[44px] items-center gap-4 px-6'>
+      <div className='flex w-[160px] flex-shrink-0 items-center gap-2 pr-2'>
         <Skeleton className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px]' />
         <Skeleton className='h-[16px] flex-1' />
       </div>
       <div className='flex-1'>
-        <Skeleton className='h-[24px] w-full rounded-[4px]' />
+        <Skeleton className='h-[24px] w-full rounded-sm' />
       </div>
-      <div className='w-[100px] flex-shrink-0 pl-[16px]'>
+      <div className='w-[100px] flex-shrink-0 pl-4'>
         <Skeleton className='h-[16px] w-[50px]' />
       </div>
     </div>
@@ -78,14 +78,14 @@ function WorkflowRowSkeleton() {
 
 function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
   return (
-    <div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
-      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
-        <div className='flex items-center gap-[16px]'>
-          <span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+    <div className='flex h-full flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
+      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
+        <div className='flex items-center gap-4'>
+          <span className='w-[160px] flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
             Workflow
           </span>
-          <span className='flex-1 font-medium text-[12px] text-[var(--text-tertiary)]'>Logs</span>
-          <span className='w-[100px] flex-shrink-0 pl-[16px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <span className='flex-1 font-medium text-[var(--text-tertiary)] text-caption'>Logs</span>
+          <span className='w-[100px] flex-shrink-0 pl-4 font-medium text-[var(--text-tertiary)] text-caption'>
             Success Rate
           </span>
         </div>
@@ -101,9 +101,9 @@ function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
 
 function DashboardSkeleton() {
   return (
-    <div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'>
-      <div className='mb-[16px] flex-shrink-0'>
-        <div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'>
+    <div className='mt-6 flex min-h-0 flex-1 flex-col pb-6'>
+      <div className='mb-4 flex-shrink-0'>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
           <GraphCardSkeleton title='Runs' />
           <GraphCardSkeleton title='Errors' />
           <GraphCardSkeleton title='Latency' />
@@ -450,10 +450,10 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
 
   if (error) {
     return (
-      <div className='mt-[24px] flex flex-1 items-center justify-center'>
+      <div className='mt-6 flex flex-1 items-center justify-center'>
         <div className='text-[var(--text-error)]'>
-          <p className='font-medium text-[13px]'>Error loading data</p>
-          <p className='text-[12px]'>{error.message}</p>
+          <p className='font-medium text-small'>Error loading data</p>
+          <p className='text-caption'>{error.message}</p>
         </div>
       </div>
     )
@@ -461,23 +461,21 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
 
   if (Object.keys(allWorkflows).length === 0) {
     return (
-      <div className='mt-[24px] flex flex-1 items-center justify-center'>
+      <div className='mt-6 flex flex-1 items-center justify-center'>
         <div className='text-center text-[var(--text-secondary)]'>
-          <p className='font-medium text-[13px]'>No workflows</p>
-          <p className='mt-[4px] text-[12px]'>
-            Create a workflow to see its execution history here
-          </p>
+          <p className='font-medium text-small'>No workflows</p>
+          <p className='mt-1 text-caption'>Create a workflow to see its execution history here</p>
         </div>
       </div>
     )
   }
 
   return (
-    <div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'>
-      <div className='mb-[16px] flex-shrink-0'>
-        <div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'>
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-            <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+    <div className='mt-6 flex min-h-0 flex-1 flex-col pb-6'>
+      <div className='mb-4 flex-shrink-0'>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+          <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+            <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Runs
               </span>
@@ -487,12 +485,12 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.executionCounts}
                   label=''
-                  color='var(--brand-tertiary)'
+                  color='var(--success)'
                   unit=''
                 />
               ) : (
@@ -503,8 +501,8 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
             </div>
           </div>
 
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-            <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+          <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+            <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Errors
               </span>
@@ -514,7 +512,7 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.failureCounts}
@@ -530,8 +528,8 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
             </div>
           </div>
 
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-            <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+          <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+            <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Latency
               </span>
@@ -541,12 +539,12 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.latencies}
                   label=''
-                  color='var(--c-F59E0B)'
+                  color='var(--caution)'
                   unit='latency'
                 />
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
index 0f4010f82e..293adba19c 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
@@ -92,9 +92,9 @@ export function ExecutionSnapshot({
           className={cn('flex items-center justify-center', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+          <div className='flex items-center gap-2 text-[var(--text-secondary)]'>
             <Loader2 className='h-[16px] w-[16px] animate-spin' />
-            <span className='text-[13px]'>Loading execution snapshot...</span>
+            <span className='text-small'>Loading execution snapshot...</span>
           </div>
         </div>
       )
@@ -106,9 +106,9 @@ export function ExecutionSnapshot({
           className={cn('flex items-center justify-center', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[8px] text-[var(--text-error)]'>
+          <div className='flex items-center gap-2 text-[var(--text-error)]'>
             <AlertCircle className='h-[16px] w-[16px]' />
-            <span className='text-[13px]'>Failed to load execution snapshot: {error.message}</span>
+            <span className='text-small'>Failed to load execution snapshot: {error.message}</span>
           </div>
         </div>
       )
@@ -120,9 +120,9 @@ export function ExecutionSnapshot({
           className={cn('flex items-center justify-center', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+          <div className='flex items-center gap-2 text-[var(--text-secondary)]'>
             <Loader2 className='h-[16px] w-[16px] animate-spin' />
-            <span className='text-[13px]'>Loading execution snapshot...</span>
+            <span className='text-small'>Loading execution snapshot...</span>
           </div>
         </div>
       )
@@ -131,18 +131,20 @@ export function ExecutionSnapshot({
     if (isMigratedWorkflowState(workflowState)) {
       return (
         <div
-          className={cn('flex flex-col items-center justify-center gap-[16px] p-[32px]', className)}
+          className={cn('flex flex-col items-center justify-center gap-4 p-8', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[12px] text-[var(--text-warning)]'>
+          <div className='flex items-center gap-3 text-[var(--text-warning)]'>
             <AlertCircle className='h-[20px] w-[20px]' />
-            <span className='font-medium text-[15px]'>Logged State Not Found</span>
+            <span className='font-medium text-base'>Logged State Not Found</span>
           </div>
-          <div className='max-w-md text-center text-[13px] text-[var(--text-secondary)]'>
+          <div className='max-w-md text-center text-[var(--text-secondary)] text-small'>
             This log was migrated from the old logging system. The workflow state at execution time
             is not available.
           </div>
-          <div className='text-[12px] text-[var(--text-tertiary)]'>Note: {workflowState._note}</div>
+          <div className='text-[var(--text-tertiary)] text-caption'>
+            Note: {workflowState._note}
+          </div>
         </div>
       )
     }
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
index 5985a00c03..dd538f5087 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
@@ -99,28 +99,28 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
   }
 
   return (
-    <div className='flex flex-col gap-[4px] rounded-[6px] bg-[var(--surface-1)] px-[8px] py-[6px]'>
-      <div className='flex min-w-0 items-center justify-between gap-[8px]'>
-        <span className='min-w-0 flex-1 truncate font-medium text-[12px] text-[var(--text-secondary)]'>
+    <div className='flex flex-col gap-1 rounded-md bg-[var(--surface-1)] px-2 py-1.5'>
+      <div className='flex min-w-0 items-center justify-between gap-2'>
+        <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-secondary)] text-caption'>
           {file.name}
         </span>
-        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+        <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
           {formatFileSize(file.size)}
         </span>
       </div>
 
       <div className='flex items-center justify-between'>
-        <span className='font-medium text-[11px] text-[var(--text-subtle)]'>{file.type}</span>
+        <span className='font-medium text-[var(--text-subtle)] text-xs'>{file.type}</span>
         <Button
           variant='ghost'
-          className='!h-[20px] !px-[6px] !py-0 text-[11px]'
+          className='!h-[20px] !px-1.5 !py-0 text-xs'
           onClick={handleDownload}
           disabled={isDownloading}
         >
           {isDownloading ? (
-            <Loader2 className='mr-[4px] h-[10px] w-[10px] animate-spin' />
+            <Loader2 className='mr-1 h-[10px] w-[10px] animate-spin' />
           ) : (
-            <ArrowDown className='mr-[4px] h-[10px] w-[10px]' />
+            <ArrowDown className='mr-1 h-[10px] w-[10px]' />
           )}
           {isDownloading ? 'Opening...' : 'Download'}
         </Button>
@@ -135,8 +135,8 @@ export function FileCards({ files, isExecutionFile = false, workspaceId }: FileC
   }
 
   return (
-    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
-      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+    <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
+      <span className='font-medium text-[var(--text-tertiary)] text-caption'>
         Files ({files.length})
       </span>
       {files.map((file, index) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
index c2d29dc5fd..509654c294 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
@@ -295,7 +295,7 @@ function InputOutputSection({
   }, [activateSearch, closeContextMenu])
 
   return (
-    <div className='relative flex min-w-0 flex-col gap-[6px] overflow-hidden'>
+    <div className='relative flex min-w-0 flex-col gap-1.5 overflow-hidden'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => onToggle(sectionKey)}
@@ -312,7 +312,7 @@ function InputOutputSection({
       >
         <span
           className={cn(
-            'font-medium text-[12px] transition-colors',
+            'font-medium text-caption transition-colors',
             isError
               ? 'text-[var(--text-error)]'
               : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
@@ -333,7 +333,7 @@ function InputOutputSection({
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
               wrapText
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
@@ -341,7 +341,7 @@ function InputOutputSection({
             />
             {/* Glass action buttons overlay */}
             {!isSearchActive && (
-              <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+              <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
@@ -351,7 +351,7 @@ function InputOutputSection({
                         e.stopPropagation()
                         handleCopy()
                       }}
-                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                     >
                       {copied ? (
                         <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -371,7 +371,7 @@ function InputOutputSection({
                         e.stopPropagation()
                         activateSearch()
                       }}
-                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                     >
                       <Search className='h-[10px] w-[10px]' />
                     </Button>
@@ -385,7 +385,7 @@ function InputOutputSection({
           {/* Search Overlay */}
           {isSearchActive && (
             <div
-              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
               onClick={(e) => e.stopPropagation()}
             >
               <Input
@@ -394,11 +394,11 @@ function InputOutputSection({
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder='Search...'
-                className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+                className='mr-0.5 h-[23px] w-[94px] text-caption'
               />
               <span
                 className={cn(
-                  'min-w-[45px] text-center text-[11px]',
+                  'min-w-[45px] text-center text-xs',
                   matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
                 )}
               >
@@ -581,7 +581,7 @@ const TraceSpanNode = memo(function TraceSpanNode({
       {/* Node Header Row */}
       <div
         className={cn(
-          'group flex items-center justify-between gap-[8px] py-[6px]',
+          'group flex items-center justify-between gap-2 py-1.5',
           isToggleable && 'cursor-pointer'
         )}
         onClick={isToggleable ? () => onToggleNode(spanId) : undefined}
@@ -600,17 +600,17 @@ const TraceSpanNode = memo(function TraceSpanNode({
         aria-expanded={isToggleable ? isExpanded : undefined}
         aria-label={isToggleable ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           {!isIterationType(span.type) && (
             <div
-              className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+              className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
               style={{ background: bgColor }}
             >
               {BlockIcon && <BlockIcon className='h-[9px] w-[9px] text-white' />}
             </div>
           )}
           <span
-            className='min-w-0 max-w-[180px] truncate font-medium text-[12px]'
+            className='min-w-0 max-w-[180px] truncate font-medium text-caption'
             style={{ color: showErrorStyle ? 'var(--text-error)' : 'var(--text-secondary)' }}
           >
             {span.name}
@@ -624,14 +624,14 @@ const TraceSpanNode = memo(function TraceSpanNode({
             />
           )}
         </div>
-        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+        <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
           {formatDuration(duration, { precision: 2 })}
         </span>
       </div>
 
       {/* Expanded Content */}
       {isExpanded && (
-        <div className='flex min-w-0 flex-col gap-[10px]'>
+        <div className='flex min-w-0 flex-col gap-2.5'>
           {/* Progress Bar */}
           <ProgressBar
             span={span}
@@ -642,7 +642,7 @@ const TraceSpanNode = memo(function TraceSpanNode({
 
           {/* Input/Output Sections */}
           {(hasInput || hasOutput) && (
-            <div className='flex min-w-0 flex-col gap-[6px] overflow-hidden py-[2px]'>
+            <div className='flex min-w-0 flex-col gap-1.5 overflow-hidden py-0.5'>
               {hasInput && (
                 <InputOutputSection
                   label='Input'
@@ -675,9 +675,9 @@ const TraceSpanNode = memo(function TraceSpanNode({
 
           {/* Nested Children */}
           {hasChildren && (
-            <div className='flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[10px]'>
+            <div className='flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-2.5'>
               {filteredChildren.map((child, index) => (
-                <div key={child.id || `${spanId}-child-${index}`} className='pl-[6px]'>
+                <div key={child.id || `${spanId}-child-${index}`} className='pl-1.5'>
                   <TraceSpanNode
                     span={child}
                     workflowStartTime={workflowStartTime}
@@ -740,7 +740,7 @@ export const TraceSpans = memo(function TraceSpans({ traceSpans }: TraceSpansPro
   )
 
   if (!traceSpans || traceSpans.length === 0) {
-    return <div className='text-[12px] text-[var(--text-secondary)]'>No trace data available</div>
+    return <div className='text-[var(--text-secondary)] text-caption'>No trace data available</div>
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index 240918d389..0289e4d928 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -105,7 +105,7 @@ const WorkflowOutputSection = memo(
           <Code.Viewer
             code={jsonString}
             language='json'
-            className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+            className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
             wrapText
             searchQuery={isSearchActive ? searchQuery : undefined}
             currentMatchIndex={currentMatchIndex}
@@ -113,7 +113,7 @@ const WorkflowOutputSection = memo(
           />
           {/* Glass action buttons overlay */}
           {!isSearchActive && (
-            <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+            <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Button
@@ -123,7 +123,7 @@ const WorkflowOutputSection = memo(
                       e.stopPropagation()
                       handleCopy()
                     }}
-                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                   >
                     {copied ? (
                       <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -143,7 +143,7 @@ const WorkflowOutputSection = memo(
                       e.stopPropagation()
                       activateSearch()
                     }}
-                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                   >
                     <Search className='h-[10px] w-[10px]' />
                   </Button>
@@ -157,7 +157,7 @@ const WorkflowOutputSection = memo(
         {/* Search Overlay */}
         {isSearchActive && (
           <div
-            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
             onClick={(e) => e.stopPropagation()}
           >
             <Input
@@ -166,11 +166,11 @@ const WorkflowOutputSection = memo(
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder='Search...'
-              className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+              className='mr-0.5 h-[23px] w-[94px] text-caption'
             />
             <span
               className={cn(
-                'min-w-[45px] text-center text-[11px]',
+                'min-w-[45px] text-center text-xs',
                 matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
               )}
             >
@@ -365,14 +365,14 @@ export const LogDetails = memo(function LogDetails({
         aria-label='Log details sidebar'
       >
         {log && (
-          <div className='flex h-full flex-col px-[14px] pt-[12px]'>
+          <div className='flex h-full flex-col px-3.5 pt-3'>
             {/* Header */}
             <div className='flex items-center justify-between'>
-              <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Log Details</h2>
+              <h2 className='font-medium text-[var(--text-primary)] text-sm'>Log Details</h2>
               <div className='flex items-center gap-[1px]'>
                 <Button
                   variant='ghost'
-                  className='!p-[4px]'
+                  className='!p-1'
                   onClick={() => hasPrev && onNavigatePrev?.()}
                   disabled={!hasPrev}
                   aria-label='Previous log'
@@ -381,45 +381,45 @@ export const LogDetails = memo(function LogDetails({
                 </Button>
                 <Button
                   variant='ghost'
-                  className='!p-[4px]'
+                  className='!p-1'
                   onClick={() => hasNext && onNavigateNext?.()}
                   disabled={!hasNext}
                   aria-label='Next log'
                 >
                   <ChevronUp className='h-[14px] w-[14px] rotate-180' />
                 </Button>
-                <Button variant='ghost' className='!p-[4px]' onClick={onClose} aria-label='Close'>
+                <Button variant='ghost' className='!p-1' onClick={onClose} aria-label='Close'>
                   <X className='h-[14px] w-[14px]' />
                 </Button>
               </div>
             </div>
 
             {/* Content - Scrollable */}
-            <div className='mt-[20px] h-full w-full overflow-y-auto' ref={scrollAreaRef}>
-              <div className='flex flex-col gap-[10px] pb-[16px]'>
+            <div className='mt-5 h-full w-full overflow-y-auto' ref={scrollAreaRef}>
+              <div className='flex flex-col gap-2.5 pb-4'>
                 {/* Timestamp & Workflow Row */}
-                <div className='flex min-w-0 items-center gap-[16px] px-[1px]'>
+                <div className='flex min-w-0 items-center gap-4 px-[1px]'>
                   {/* Timestamp Card */}
-                  <div className='flex w-[140px] flex-shrink-0 flex-col gap-[8px]'>
-                    <div className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex w-[140px] flex-shrink-0 flex-col gap-2'>
+                    <div className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Timestamp
                     </div>
-                    <div className='flex items-center gap-[6px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex items-center gap-1.5'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         {formattedTimestamp?.compactDate || 'N/A'}
                       </span>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         {formattedTimestamp?.compactTime || 'N/A'}
                       </span>
                     </div>
                   </div>
 
                   {/* Workflow Card */}
-                  <div className='flex w-0 min-w-0 flex-1 flex-col gap-[8px]'>
-                    <div className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex w-0 min-w-0 flex-1 flex-col gap-2'>
+                    <div className='font-medium text-[var(--text-tertiary)] text-caption'>
                       {log.trigger === 'mothership' ? 'Job' : 'Workflow'}
                     </div>
-                    <div className='flex min-w-0 items-center gap-[8px]'>
+                    <div className='flex min-w-0 items-center gap-2'>
                       {(() => {
                         const c =
                           log.trigger === 'mothership'
@@ -437,7 +437,7 @@ export const LogDetails = memo(function LogDetails({
                           />
                         )
                       })()}
-                      <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-secondary)]'>
+                      <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-secondary)] text-sm'>
                         {log.trigger === 'mothership'
                           ? log.jobTitle || 'Untitled Job'
                           : log.workflow?.name ||
@@ -449,35 +449,35 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Execution ID */}
                 {log.executionId && (
-                  <div className='flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Execution ID
                     </span>
-                    <span className='truncate font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <span className='truncate font-medium text-[var(--text-secondary)] text-sm'>
                       {log.executionId}
                     </span>
                   </div>
                 )}
 
                 {/* Details Section */}
-                <div className='-my-[4px] flex min-w-0 flex-col overflow-hidden'>
+                <div className='-my-1 flex min-w-0 flex-col overflow-hidden'>
                   {/* Level */}
-                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-[8px]'>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-2'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Level
                     </span>
                     <StatusBadge status={logStatus} />
                   </div>
 
                   {/* Trigger */}
-                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-[8px]'>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-2'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Trigger
                     </span>
                     {log.trigger ? (
                       <TriggerBadge trigger={log.trigger} />
                     ) : (
-                      <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                      <span className='font-medium text-[var(--text-secondary)] text-caption'>
                         —
                       </span>
                     )}
@@ -485,24 +485,24 @@ export const LogDetails = memo(function LogDetails({
 
                   {/* Duration */}
                   <div
-                    className={`flex h-[48px] items-center justify-between border-b p-[8px] ${log.deploymentVersion ? 'border-[var(--border)]' : 'border-transparent'}`}
+                    className={`flex h-[48px] items-center justify-between border-b p-2 ${log.deploymentVersion ? 'border-[var(--border)]' : 'border-transparent'}`}
                   >
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Duration
                     </span>
-                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    <span className='font-medium text-[var(--text-secondary)] text-small'>
                       {formatDuration(log.duration, { precision: 2 }) || '—'}
                     </span>
                   </div>
 
                   {/* Version */}
                   {log.deploymentVersion && (
-                    <div className='flex h-[48px] items-center gap-[8px] p-[8px]'>
-                      <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <div className='flex h-[48px] items-center gap-2 p-2'>
+                      <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
                         Version
                       </span>
                       <div className='flex w-0 flex-1 justify-end'>
-                        <span className='max-w-full truncate rounded-[6px] bg-[#bbf7d0] px-[9px] py-[2px] font-medium text-[#15803d] text-[12px] dark:bg-[#14291B] dark:text-[#86EFAC]'>
+                        <span className='max-w-full truncate rounded-md bg-[var(--badge-success-bg)] px-[9px] py-0.5 font-medium text-[var(--badge-success-text)] text-caption'>
                           {log.deploymentVersionName || `v${log.deploymentVersion}`}
                         </span>
                       </div>
@@ -515,16 +515,16 @@ export const LogDetails = memo(function LogDetails({
                   log.executionId &&
                   log.trigger !== 'mothership' &&
                   !permissionConfig.hideTraceSpans && (
-                    <div className='-mt-[8px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
-                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <div className='-mt-2 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2'>
+                      <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                         Workflow State
                       </span>
                       <Button
                         variant='active'
                         onClick={() => setIsExecutionSnapshotOpen(true)}
-                        className='flex w-full items-center justify-between px-[10px] py-[6px]'
+                        className='flex w-full items-center justify-between px-2.5 py-1.5'
                       >
-                        <span className='font-medium text-[12px]'>View Snapshot</span>
+                        <span className='font-medium text-caption'>View Snapshot</span>
                         <Eye className='h-[14px] w-[14px]' />
                       </Button>
                     </div>
@@ -532,10 +532,10 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Workflow Output */}
                 {isWorkflowExecutionLog && workflowOutput && !permissionConfig.hideTraceSpans && (
-                  <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
+                  <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
                     <span
                       className={cn(
-                        'font-medium text-[12px]',
+                        'font-medium text-caption',
                         workflowOutput.error
                           ? 'text-[var(--text-error)]'
                           : 'text-[var(--text-tertiary)]'
@@ -551,8 +551,8 @@ export const LogDetails = memo(function LogDetails({
                 {isWorkflowExecutionLog &&
                   log.executionData?.traceSpans &&
                   !permissionConfig.hideTraceSpans && (
-                    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
-                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
+                      <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                         Trace Span
                       </span>
                       <TraceSpans traceSpans={log.executionData.traceSpans} />
@@ -566,34 +566,34 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Cost Breakdown */}
                 {hasCostInfo && (
-                  <div className='flex flex-col gap-[8px]'>
-                    <span className='px-[1px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex flex-col gap-2'>
+                    <span className='px-[1px] font-medium text-[var(--text-tertiary)] text-caption'>
                       Cost Breakdown
                     </span>
 
-                    <div className='flex flex-col gap-[4px] rounded-[6px] border border-[var(--border)]'>
-                      <div className='flex flex-col gap-[10px] rounded-[6px] p-[10px]'>
+                    <div className='flex flex-col gap-1 rounded-md border border-[var(--border)]'>
+                      <div className='flex flex-col gap-2.5 rounded-md p-2.5'>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Base Execution:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(BASE_EXECUTION_CHARGE)}
                           </span>
                         </div>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Model Input:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(log.cost?.input || 0)}
                           </span>
                         </div>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Model Output:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(log.cost?.output || 0)}
                           </span>
                         </div>
@@ -601,20 +601,20 @@ export const LogDetails = memo(function LogDetails({
 
                       <div className='border-[var(--border)] border-t' />
 
-                      <div className='flex flex-col gap-[10px] rounded-[6px] p-[10px]'>
+                      <div className='flex flex-col gap-2.5 rounded-md p-2.5'>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Total:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(log.cost?.total || 0)}
                           </span>
                         </div>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Tokens:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {log.cost?.tokens?.input || log.cost?.tokens?.prompt || 0} in /{' '}
                             {log.cost?.tokens?.output || log.cost?.tokens?.completion || 0} out
                           </span>
@@ -622,8 +622,8 @@ export const LogDetails = memo(function LogDetails({
                       </div>
                     </div>
 
-                    <div className='flex items-center justify-center rounded-[6px] bg-[var(--surface-2)] p-[8px] text-center'>
-                      <p className='font-medium text-[11px] text-[var(--text-subtle)]'>
+                    <div className='flex items-center justify-center rounded-md bg-[var(--surface-2)] p-2 text-center'>
+                      <p className='font-medium text-[var(--text-subtle)] text-xs'>
                         Total cost includes a base execution charge of{' '}
                         {formatCost(BASE_EXECUTION_CHARGE)} plus any model usage costs.
                       </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
index 955c6ee878..c99a59988f 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
@@ -75,7 +75,7 @@ const LogRow = memo(
       <div
         ref={isSelected ? selectedRowRef : null}
         className={cn(
-          'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
+          'relative flex h-[44px] cursor-pointer items-center px-6 hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-4)]',
           isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
         )}
         onClick={handleClick}
@@ -84,7 +84,7 @@ const LogRow = memo(
       >
         <div className='flex flex-1 items-center'>
           <div
-            className={`flex ${LOG_COLUMNS.workflow.width} ${LOG_COLUMNS.workflow.minWidth} items-center gap-[8px] pr-[8px]`}
+            className={`flex ${LOG_COLUMNS.workflow.width} ${LOG_COLUMNS.workflow.minWidth} items-center gap-2 pr-2`}
           >
             <div
               className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
@@ -96,7 +96,7 @@ const LogRow = memo(
             />
             <span
               className={cn(
-                'min-w-0 truncate font-medium text-[12px]',
+                'min-w-0 truncate font-medium text-caption',
                 isDeletedWorkflow ? 'text-[var(--text-tertiary)]' : 'text-[var(--text-primary)]'
               )}
             >
@@ -105,7 +105,7 @@ const LogRow = memo(
           </div>
 
           <span
-            className={`${LOG_COLUMNS.date.width} ${LOG_COLUMNS.date.minWidth} font-medium text-[12px] text-[var(--text-primary)]`}
+            className={`${LOG_COLUMNS.date.width} ${LOG_COLUMNS.date.minWidth} font-medium text-[var(--text-primary)] text-caption`}
           >
             {formattedDate.compactDate} {formattedDate.compactTime}
           </span>
@@ -115,7 +115,7 @@ const LogRow = memo(
           </div>
 
           <span
-            className={`${LOG_COLUMNS.cost.width} ${LOG_COLUMNS.cost.minWidth} font-medium text-[12px] text-[var(--text-primary)]`}
+            className={`${LOG_COLUMNS.cost.width} ${LOG_COLUMNS.cost.minWidth} font-medium text-[var(--text-primary)] text-caption`}
           >
             {typeof log.cost?.total === 'number'
               ? `${dollarsToCredits(log.cost.total).toLocaleString()} credits`
@@ -126,12 +126,12 @@ const LogRow = memo(
             {log.trigger ? (
               <TriggerBadge trigger={log.trigger} />
             ) : (
-              <span className='font-medium text-[12px] text-[var(--text-primary)]'>—</span>
+              <span className='font-medium text-[var(--text-primary)] text-caption'>—</span>
             )}
           </div>
 
           <div className={`${LOG_COLUMNS.duration.width} ${LOG_COLUMNS.duration.minWidth}`}>
-            <Badge variant='default' className='rounded-[6px] px-[9px] py-[2px] text-[12px]'>
+            <Badge variant='default' className='rounded-md px-[9px] py-0.5 text-caption'>
               {formatDuration(log.duration, { precision: 2 }) || '—'}
             </Badge>
           </div>
@@ -145,7 +145,7 @@ const LogRow = memo(
             rel='noopener noreferrer'
             className={cn(
               buttonVariants({ variant: 'active' }),
-              'absolute right-[24px] h-[26px] w-[26px] rounded-[6px] p-0'
+              'absolute right-[24px] h-[26px] w-[26px] rounded-md p-0'
             )}
             aria-label='Open resume console'
             onClick={(e) => e.stopPropagation()}
@@ -197,14 +197,14 @@ function Row({
   if (index >= logs.length) {
     return (
       <div style={style} className='flex items-center justify-center'>
-        <div ref={loaderRef} className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+        <div ref={loaderRef} className='flex items-center gap-2 text-[var(--text-secondary)]'>
           {isFetchingNextPage ? (
             <>
               <Loader2 className='h-[16px] w-[16px] animate-spin' />
-              <span className='text-[13px]'>Loading more...</span>
+              <span className='text-small'>Loading more...</span>
             </>
           ) : (
-            <span className='text-[13px]'>Scroll to load more</span>
+            <span className='text-small'>Scroll to load more</span>
           )}
         </div>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
index de9903c7ce..8b7c706d64 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
@@ -85,7 +85,7 @@ export function SlackChannelSelector({
   }
 
   return (
-    <div className='flex flex-col gap-[4px]'>
+    <div className='flex flex-col gap-1'>
       <Combobox
         options={options}
         value={value}
@@ -104,11 +104,11 @@ export function SlackChannelSelector({
         searchPlaceholder='Search channels...'
       />
       {selectedChannel && !fetchError && (
-        <p className='text-[12px] text-[var(--text-muted)]'>
+        <p className='text-[var(--text-muted)] text-caption'>
           {selectedChannel.isPrivate ? 'Private' : 'Public'} channel: #{selectedChannel.name}
         </p>
       )}
-      {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
+      {error && <p className='text-[var(--text-error)] text-caption'>{error}</p>}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
index 807a061e88..02c3173bd8 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
@@ -79,12 +79,12 @@ export function WorkflowSelector({
     }
 
     return (
-      <div className='flex items-center gap-[4px] overflow-hidden'>
+      <div className='flex items-center gap-1 overflow-hidden'>
         {selectedWorkflows.slice(0, 2).map((w) => (
           <Badge
             key={w.id}
             variant='outline'
-            className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px]'
+            className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs'
             onMouseDown={(e) => handleRemove(e, w.id)}
           >
             {w.name}
@@ -92,7 +92,7 @@ export function WorkflowSelector({
           </Badge>
         ))}
         {selectedWorkflows.length > 2 && (
-          <Badge variant='outline' className='rounded-[6px] px-[8px] py-[2px] text-[11px]'>
+          <Badge variant='outline' className='rounded-md px-2 py-0.5 text-xs'>
             +{selectedWorkflows.length - 2}
           </Badge>
         )}
@@ -102,15 +102,15 @@ export function WorkflowSelector({
 
   if (isLoading) {
     return (
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Label>Workflows</Label>
-        <Skeleton className='h-[34px] w-full rounded-[6px]' />
+        <Skeleton className='h-[34px] w-full rounded-md' />
       </div>
     )
   }
 
   return (
-    <div className='flex flex-col gap-[8px]'>
+    <div className='flex flex-col gap-2'>
       <Label>Workflows</Label>
       <Combobox
         options={options}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
index 4a8d8ccd91..277b202a5a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
@@ -551,34 +551,34 @@ export const NotificationSettings = memo(function NotificationSettings({
           : `#${subscription.slackConfig?.channelName || subscription.slackConfig?.channelId}`
 
     return (
-      <div key={subscription.id} className='rounded-[6px] border p-[10px]'>
-        <div className='flex items-center justify-between gap-[12px]'>
-          <div className='flex min-w-0 flex-1 flex-col gap-[6px]'>
-            <p className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+      <div key={subscription.id} className='rounded-md border p-2.5'>
+        <div className='flex items-center justify-between gap-3'>
+          <div className='flex min-w-0 flex-1 flex-col gap-1.5'>
+            <p className='truncate font-medium text-[var(--text-primary)] text-small'>
               {identifier}
             </p>
-            <div className='flex flex-wrap items-center gap-[6px] text-[11px]'>
+            <div className='flex flex-wrap items-center gap-1.5 text-xs'>
               {subscription.allWorkflows ? (
-                <Badge className='rounded-[4px] px-[6px] py-[2px] text-[11px]'>All workflows</Badge>
+                <Badge className='rounded-sm px-1.5 py-0.5 text-xs'>All workflows</Badge>
               ) : (
-                <Badge className='rounded-[4px] px-[6px] py-[2px] text-[11px]'>
+                <Badge className='rounded-sm px-1.5 py-0.5 text-xs'>
                   {subscription.workflowIds.length} workflow(s)
                 </Badge>
               )}
               {subscription.levelFilter.map((level) => (
-                <Badge key={level} className='rounded-[4px] px-[6px] py-[2px] text-[11px]'>
+                <Badge key={level} className='rounded-sm px-1.5 py-0.5 text-xs'>
                   {level}
                 </Badge>
               ))}
               {subscription.alertConfig && (
-                <Badge className='rounded-[4px] bg-amber-100 px-[6px] py-[2px] text-[11px] text-amber-800 dark:bg-amber-900/30 dark:text-amber-400'>
+                <Badge className='rounded-sm bg-amber-100 px-1.5 py-0.5 text-amber-800 text-xs dark:bg-amber-900/30 dark:text-amber-400'>
                   {formatAlertConfigLabel(subscription.alertConfig)}
                 </Badge>
               )}
             </div>
           </div>
 
-          <div className='flex flex-shrink-0 items-center gap-[8px]'>
+          <div className='flex flex-shrink-0 items-center gap-2'>
             <Button
               variant='primary'
               onClick={() => handleTest(subscription.id)}
@@ -609,13 +609,13 @@ export const NotificationSettings = memo(function NotificationSettings({
   }
 
   const renderForm = () => (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-4'>
       <div className='min-h-0 flex-1 overflow-y-auto'>
         {formErrors.general && (
-          <p className='mb-[16px] text-[12px] text-[var(--text-error)]'>{formErrors.general}</p>
+          <p className='mb-4 text-[var(--text-error)] text-caption'>{formErrors.general}</p>
         )}
 
-        <div className='flex flex-col gap-[16px]'>
+        <div className='flex flex-col gap-4'>
           <WorkflowSelector
             workspaceId={workspaceId}
             selectedIds={formData.workflowIds}
@@ -629,7 +629,7 @@ export const NotificationSettings = memo(function NotificationSettings({
 
           {activeTab === 'webhook' && (
             <>
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Webhook URL</Label>
                 <EmcnInput
                   type='url'
@@ -642,10 +642,10 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }}
                 />
                 {formErrors.webhookUrl && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.webhookUrl}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.webhookUrl}</p>
                 )}
               </div>
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Secret (optional)</Label>
                 <EmcnInput
                   type='password'
@@ -659,7 +659,7 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {activeTab === 'email' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Email Recipients</Label>
               <TagInput
                 items={emailItems}
@@ -669,17 +669,19 @@ export const NotificationSettings = memo(function NotificationSettings({
                 placeholderWithTags='Add email'
               />
               {formErrors.emailRecipients && (
-                <p className='text-[12px] text-[var(--text-error)]'>{formErrors.emailRecipients}</p>
+                <p className='text-[var(--text-error)] text-caption'>
+                  {formErrors.emailRecipients}
+                </p>
               )}
             </div>
           )}
 
           {activeTab === 'slack' && (
             <>
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Slack Account</Label>
                 {isLoadingSlackAccounts ? (
-                  <Skeleton className='h-[34px] w-full rounded-[6px]' />
+                  <Skeleton className='h-[34px] w-full rounded-md' />
                 ) : slackAccounts.length === 0 ? (
                   <div className='flex'>
                     <Button
@@ -691,7 +693,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                         })
                       }}
                       disabled={connectSlack.isPending}
-                      className='flex items-center gap-[8px]'
+                      className='flex items-center gap-2'
                     >
                       <SlackIcon className='h-[11px] w-[11px]' />
                       {connectSlack.isPending ? 'Connecting...' : 'Connect Slack'}
@@ -716,13 +718,13 @@ export const NotificationSettings = memo(function NotificationSettings({
                   />
                 )}
                 {formErrors.slackAccountId && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.slackAccountId}
                   </p>
                 )}
               </div>
               {slackAccounts.length > 0 && (
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Channel</Label>
                   <SlackChannelSelector
                     accountId={formData.slackAccountId}
@@ -743,7 +745,7 @@ export const NotificationSettings = memo(function NotificationSettings({
             </>
           )}
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Log Level Filters</Label>
             <Combobox
               options={LOG_LEVELS.map((level) => ({
@@ -759,12 +761,12 @@ export const NotificationSettings = memo(function NotificationSettings({
               placeholder='Select log levels...'
               overlayContent={
                 formData.levelFilter.length > 0 ? (
-                  <div className='flex items-center gap-[4px]'>
+                  <div className='flex items-center gap-1'>
                     {formData.levelFilter.map((level) => (
                       <Badge
                         key={level}
                         variant='outline'
-                        className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px] capitalize'
+                        className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs capitalize'
                         onMouseDown={(e) => {
                           e.preventDefault()
                           e.stopPropagation()
@@ -785,11 +787,11 @@ export const NotificationSettings = memo(function NotificationSettings({
               allOptionLabel='All levels'
             />
             {formErrors.levelFilter && (
-              <p className='text-[12px] text-[var(--text-error)]'>{formErrors.levelFilter}</p>
+              <p className='text-[var(--text-error)] text-caption'>{formErrors.levelFilter}</p>
             )}
           </div>
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Trigger Type Filters</Label>
             <Combobox
               options={TRIGGER_OPTIONS.map((t) => ({
@@ -805,12 +807,12 @@ export const NotificationSettings = memo(function NotificationSettings({
               placeholder='Select trigger types...'
               overlayContent={
                 formData.triggerFilter.length > 0 ? (
-                  <div className='flex items-center gap-[4px] overflow-hidden'>
+                  <div className='flex items-center gap-1 overflow-hidden'>
                     {formData.triggerFilter.slice(0, 6).map((trigger) => (
                       <Badge
                         key={trigger}
                         variant='outline'
-                        className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px] capitalize'
+                        className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs capitalize'
                         onMouseDown={(e) => {
                           e.preventDefault()
                           e.stopPropagation()
@@ -825,10 +827,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                       </Badge>
                     ))}
                     {formData.triggerFilter.length > 6 && (
-                      <Badge
-                        variant='outline'
-                        className='rounded-[6px] px-[8px] py-[2px] text-[11px]'
-                      >
+                      <Badge variant='outline' className='rounded-md px-2 py-0.5 text-xs'>
                         +{formData.triggerFilter.length - 6}
                       </Badge>
                     )}
@@ -839,11 +838,11 @@ export const NotificationSettings = memo(function NotificationSettings({
               allOptionLabel='All triggers'
             />
             {formErrors.triggerFilter && (
-              <p className='text-[12px] text-[var(--text-error)]'>{formErrors.triggerFilter}</p>
+              <p className='text-[var(--text-error)] text-caption'>{formErrors.triggerFilter}</p>
             )}
           </div>
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Include in Payload</Label>
             <Combobox
               options={[
@@ -891,12 +890,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                 if (selected.length === 0) return null
 
                 return (
-                  <div className='flex items-center gap-[4px] overflow-hidden'>
+                  <div className='flex items-center gap-1 overflow-hidden'>
                     {selected.slice(0, 2).map((key) => (
                       <Badge
                         key={key}
                         variant='outline'
-                        className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px]'
+                        className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs'
                         onMouseDown={(e) => {
                           e.preventDefault()
                           e.stopPropagation()
@@ -908,10 +907,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                       </Badge>
                     ))}
                     {selected.length > 2 && (
-                      <Badge
-                        variant='outline'
-                        className='rounded-[6px] px-[8px] py-[2px] text-[11px]'
-                      >
+                      <Badge variant='outline' className='rounded-md px-2 py-0.5 text-xs'>
                         +{selected.length - 2}
                       </Badge>
                     )}
@@ -923,7 +919,7 @@ export const NotificationSettings = memo(function NotificationSettings({
             />
           </div>
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Rule</Label>
             <Combobox
               options={ALERT_RULES.map((rule) => ({
@@ -934,13 +930,13 @@ export const NotificationSettings = memo(function NotificationSettings({
               onChange={(value) => setFormData({ ...formData, alertRule: value as AlertRule })}
               placeholder='Select rule'
             />
-            <p className='text-[12px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-caption'>
               {ALERT_RULES.find((r) => r.value === formData.alertRule)?.description}
             </p>
           </div>
 
           {formData.alertRule === 'consecutive_failures' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Failure Count</Label>
               <EmcnInput
                 type='number'
@@ -955,7 +951,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.consecutiveFailures && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {formErrors.consecutiveFailures}
                 </p>
               )}
@@ -963,8 +959,8 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {formData.alertRule === 'failure_rate' && (
-            <div className='flex gap-[8px]'>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+            <div className='flex gap-2'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Failure Rate (%)</Label>
                 <EmcnInput
                   type='number'
@@ -979,12 +975,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.failureRatePercent && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.failureRatePercent}
                   </p>
                 )}
               </div>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Window (hours)</Label>
                 <EmcnInput
                   type='number'
@@ -999,14 +995,14 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.windowHours && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.windowHours}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
                 )}
               </div>
             </div>
           )}
 
           {formData.alertRule === 'latency_threshold' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Duration Threshold (seconds)</Label>
               <EmcnInput
                 type='number'
@@ -1021,7 +1017,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.durationThresholdMs && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {formErrors.durationThresholdMs}
                 </p>
               )}
@@ -1029,8 +1025,8 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {formData.alertRule === 'latency_spike' && (
-            <div className='flex gap-[8px]'>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+            <div className='flex gap-2'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Above Average (%)</Label>
                 <EmcnInput
                   type='number'
@@ -1045,12 +1041,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.latencySpikePercent && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.latencySpikePercent}
                   </p>
                 )}
               </div>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Window (hours)</Label>
                 <EmcnInput
                   type='number'
@@ -1065,14 +1061,14 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.windowHours && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.windowHours}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
                 )}
               </div>
             </div>
           )}
 
           {formData.alertRule === 'cost_threshold' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Cost Threshold ($)</Label>
               <EmcnInput
                 type='number'
@@ -1088,7 +1084,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.costThresholdDollars && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {formErrors.costThresholdDollars}
                 </p>
               )}
@@ -1096,7 +1092,7 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {formData.alertRule === 'no_activity' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Inactivity Period (hours)</Label>
               <EmcnInput
                 type='number'
@@ -1111,14 +1107,16 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.inactivityHours && (
-                <p className='text-[12px] text-[var(--text-error)]'>{formErrors.inactivityHours}</p>
+                <p className='text-[var(--text-error)] text-caption'>
+                  {formErrors.inactivityHours}
+                </p>
               )}
             </div>
           )}
 
           {formData.alertRule === 'error_count' && (
-            <div className='flex gap-[8px]'>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+            <div className='flex gap-2'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Error Count</Label>
                 <EmcnInput
                   type='number'
@@ -1133,12 +1131,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.errorCountThreshold && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.errorCountThreshold}
                   </p>
                 )}
               </div>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Window (hours)</Label>
                 <EmcnInput
                   type='number'
@@ -1153,7 +1151,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.windowHours && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.windowHours}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
                 )}
               </div>
             </div>
@@ -1169,19 +1167,19 @@ export const NotificationSettings = memo(function NotificationSettings({
     }
 
     return (
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-4'>
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {isLoading ? (
-            <div className='flex flex-col gap-[16px]'>
+            <div className='flex flex-col gap-4'>
               {[120, 80, 100, 90].map((labelWidth, i) => (
-                <div key={i} className='flex flex-col gap-[8px]'>
-                  <Skeleton className='h-[14px] rounded-[4px]' style={{ width: labelWidth }} />
-                  <Skeleton className='h-[34px] w-full rounded-[6px]' />
+                <div key={i} className='flex flex-col gap-2'>
+                  <Skeleton className='h-[14px] rounded-sm' style={{ width: labelWidth }} />
+                  <Skeleton className='h-[34px] w-full rounded-md' />
                 </div>
               ))}
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredSubscriptions.map(renderSubscriptionItem)}
             </div>
           )}
@@ -1257,7 +1255,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 variant='primary'
                 disabled={isLoading}
               >
-                <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                <Plus className='mr-1.5 h-[13px] w-[13px]' />
                 Add
               </Button>
             )}
@@ -1269,7 +1267,7 @@ export const NotificationSettings = memo(function NotificationSettings({
         <ModalContent size='sm'>
           <ModalHeader>Delete Notification</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-caption'>
               This will permanently remove the notification and stop all deliveries.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
index fb1f69e02a..cb8b795276 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
@@ -165,12 +165,12 @@ export function AutocompleteSearch({
         modal={false}
       >
         <DropdownMenuPrimitive.Trigger asChild>
-          <div className='relative flex h-[32px] w-[400px] items-center rounded-[8px] bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'>
+          <div className='relative flex h-[32px] w-[400px] items-center rounded-lg bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'>
             {/* Search Icon */}
-            <Search className='mr-[6px] ml-[8px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' />
+            <Search className='mr-1.5 ml-2 h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' />
 
             {/* Scrollable container for badges */}
-            <div className='flex flex-1 items-center gap-[6px] overflow-x-auto pr-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+            <div className='flex flex-1 items-center gap-1.5 overflow-x-auto pr-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
               {/* Applied Filter Badges */}
               {appliedFilters.map((filter, index) => (
                 <Badge
@@ -179,7 +179,7 @@ export function AutocompleteSearch({
                   role='button'
                   tabIndex={0}
                   className={cn(
-                    'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]',
+                    'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-xs',
                     highlightedBadgeIndex === index &&
                       'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-3)] dark:ring-offset-[var(--surface-5)]'
                   )}
@@ -206,7 +206,7 @@ export function AutocompleteSearch({
                   variant='outline'
                   role='button'
                   tabIndex={0}
-                  className='h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]'
+                  className='h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-xs'
                   onClick={() => handleFiltersChange(appliedFilters, '')}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -240,7 +240,7 @@ export function AutocompleteSearch({
             {(hasFilters || hasTextSearch) && (
               <button
                 type='button'
-                className='mr-[8px] ml-[6px] flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover:text-[var(--text-secondary)]'
+                className='mr-2 ml-1.5 flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover-hover:text-[var(--text-secondary)]'
                 onClick={clearAll}
               >
                 <X className='h-[14px] w-[14px]' />
@@ -253,7 +253,7 @@ export function AutocompleteSearch({
         <DropdownMenuPrimitive.Portal>
           <DropdownMenuPrimitive.Content
             ref={dropdownRef}
-            className='z-50 rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+            className='z-50 rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
             style={{ width: dropdownWidth }}
             align='start'
             sideOffset={4}
@@ -268,8 +268,8 @@ export function AutocompleteSearch({
                       key={suggestions[0].id}
                       data-index={0}
                       className={cn(
-                        'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                        'hover:bg-[var(--surface-5)]',
+                        'w-full rounded-md px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
+                        'hover-hover:bg-[var(--surface-5)]',
                         highlightedIndex === 0 && 'bg-[var(--surface-5)]'
                       )}
                       onMouseEnter={() => setHighlightedIndex(0)}
@@ -278,13 +278,13 @@ export function AutocompleteSearch({
                         handleSuggestionSelect(suggestions[0])
                       }}
                     >
-                      <div className='text-[13px]'>{suggestions[0].label}</div>
+                      <div className='text-small'>{suggestions[0].label}</div>
                     </button>
                   )}
 
                   {sections.map((section) => (
                     <div key={section.title}>
-                      <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                      <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                         {section.title}
                       </div>
                       {section.suggestions.map((suggestion) => {
@@ -298,8 +298,8 @@ export function AutocompleteSearch({
                             key={suggestion.id}
                             data-index={index}
                             className={cn(
-                              'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                              'hover:bg-[var(--surface-5)]',
+                              'w-full rounded-md px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
+                              'hover-hover:bg-[var(--surface-5)]',
                               isHighlighted && 'bg-[var(--surface-5)]'
                             )}
                             onMouseEnter={() => setHighlightedIndex(index)}
@@ -309,11 +309,11 @@ export function AutocompleteSearch({
                             }}
                           >
                             <div className='flex items-center justify-between gap-3'>
-                              <div className='min-w-0 flex-1 truncate text-[13px]'>
+                              <div className='min-w-0 flex-1 truncate text-small'>
                                 {suggestion.label}
                               </div>
                               {suggestion.value !== suggestion.label && (
-                                <div className='shrink-0 font-mono text-[11px] text-[var(--text-muted)]'>
+                                <div className='shrink-0 font-mono text-[var(--text-muted)] text-xs'>
                                   {suggestion.category === 'workflow' ||
                                   suggestion.category === 'folder'
                                     ? `${suggestion.category}:`
@@ -331,7 +331,7 @@ export function AutocompleteSearch({
                 // Single section layout
                 <div className='py-1'>
                   {suggestionType === 'filters' && (
-                    <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                    <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                       SUGGESTED FILTERS
                     </div>
                   )}
@@ -341,8 +341,8 @@ export function AutocompleteSearch({
                       key={suggestion.id}
                       data-index={index}
                       className={cn(
-                        'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                        'hover:bg-[var(--surface-5)]',
+                        'w-full rounded-md px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
+                        'hover-hover:bg-[var(--surface-5)]',
                         index === highlightedIndex && 'bg-[var(--surface-5)]'
                       )}
                       onMouseEnter={() => setHighlightedIndex(index)}
@@ -352,9 +352,9 @@ export function AutocompleteSearch({
                       }}
                     >
                       <div className='flex items-center justify-between gap-3'>
-                        <div className='min-w-0 flex-1 text-[13px]'>{suggestion.label}</div>
+                        <div className='min-w-0 flex-1 text-small'>{suggestion.label}</div>
                         {suggestion.description && (
-                          <div className='shrink-0 text-[11px] text-[var(--text-muted)]'>
+                          <div className='shrink-0 text-[var(--text-muted)] text-xs'>
                             {suggestion.value}
                           </div>
                         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
index 219c306dc3..542a64ca0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
@@ -396,17 +396,17 @@ export const LogsToolbar = memo(function LogsToolbar({
     <div className='flex flex-col gap-[19px]'>
       {/* Header Section */}
       <div className='flex items-start justify-between'>
-        <div className='flex items-start gap-[12px]'>
-          <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#D4A843] bg-[#FDF6E3] dark:border-[#7A5F11] dark:bg-[#514215]'>
+        <div className='flex items-start gap-3'>
+          <div className='flex h-[26px] w-[26px] items-center justify-center rounded-md border border-[#D4A843] bg-[#FDF6E3] dark:border-[#7A5F11] dark:bg-[#514215]'>
             <Library className='h-[14px] w-[14px] text-[#D4A843] dark:text-[#FBBC04]' />
           </div>
-          <h1 className='font-medium text-[18px]'>Logs</h1>
+          <h1 className='font-medium text-lg'>Logs</h1>
         </div>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           {/* More options menu */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant='default' className='h-[32px] w-[32px] rounded-[6px] p-0'>
+              <Button variant='default' className='h-[32px] w-[32px] rounded-md p-0'>
                 <MoreHorizontal className='h-[14px] w-[14px]' />
                 <span className='sr-only'>More options</span>
               </Button>
@@ -426,7 +426,7 @@ export const LogsToolbar = memo(function LogsToolbar({
           {/* Refresh button */}
           <Button
             variant='default'
-            className='h-[32px] rounded-[6px] px-[10px]'
+            className='h-[32px] rounded-md px-2.5'
             onClick={isRefreshing ? undefined : onRefresh}
             disabled={isRefreshing}
           >
@@ -442,8 +442,8 @@ export const LogsToolbar = memo(function LogsToolbar({
             variant={isLive ? 'tertiary' : 'default'}
             onClick={onToggleLive}
             className={cn(
-              'h-[32px] rounded-[6px] px-[10px]',
-              isLive && 'border border-[var(--brand-tertiary-2)]'
+              'h-[32px] rounded-md px-2.5',
+              isLive && 'border border-[var(--brand-accent)]'
             )}
           >
             Live
@@ -451,13 +451,13 @@ export const LogsToolbar = memo(function LogsToolbar({
 
           {/* View mode toggle */}
           <div
-            className='flex h-[32px] cursor-pointer items-center rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] p-[2px]'
+            className='flex h-[32px] cursor-pointer items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] p-0.5'
             onClick={() => onViewModeChange(isDashboardView ? 'logs' : 'dashboard')}
           >
             <Button
               variant={!isDashboardView ? 'active' : 'ghost'}
               className={cn(
-                'h-[26px] rounded-[4px] px-[10px]',
+                'h-[26px] rounded-sm px-2.5',
                 isDashboardView && 'border border-transparent'
               )}
             >
@@ -466,7 +466,7 @@ export const LogsToolbar = memo(function LogsToolbar({
             <Button
               variant={isDashboardView ? 'active' : 'ghost'}
               className={cn(
-                'h-[26px] rounded-[4px] px-[10px]',
+                'h-[26px] rounded-sm px-2.5',
                 !isDashboardView && 'border border-transparent'
               )}
             >
@@ -477,7 +477,7 @@ export const LogsToolbar = memo(function LogsToolbar({
       </div>
 
       {/* Filter Bar Section */}
-      <div className='flex w-full items-center gap-[12px]'>
+      <div className='flex w-full items-center gap-3'>
         <div className='min-w-[200px] max-w-[400px] flex-1'>
           <AutocompleteSearch
             value={searchQuery}
@@ -486,13 +486,13 @@ export const LogsToolbar = memo(function LogsToolbar({
             onOpenChange={onSearchOpenChange}
           />
         </div>
-        <div className='ml-auto flex items-center gap-[8px]'>
+        <div className='ml-auto flex items-center gap-2'>
           {/* Clear Filters Button */}
           {filtersActive && (
             <Button
               variant='active'
               onClick={handleClearFilters}
-              className='h-[32px] rounded-[6px] px-[10px]'
+              className='h-[32px] rounded-md px-2.5'
             >
               <span>Clear</span>
             </Button>
@@ -501,18 +501,15 @@ export const LogsToolbar = memo(function LogsToolbar({
           {/* Filters dropdown - Small screens only */}
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button
-                variant='active'
-                className='h-[32px] gap-[6px] rounded-[6px] px-[10px] xl:hidden'
-              >
+              <Button variant='active' className='h-[32px] gap-1.5 rounded-md px-2.5 xl:hidden'>
                 <span>Filters</span>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align='end' sideOffset={4} className='w-[280px] p-[12px]'>
-              <div className='flex flex-col gap-[12px]'>
+            <DropdownMenuContent align='end' sideOffset={4} className='w-[280px] p-3'>
+              <div className='flex flex-col gap-3'>
                 {/* Status Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Status
                   </span>
                   <Combobox
@@ -522,7 +519,7 @@ export const LogsToolbar = memo(function LogsToolbar({
                     onMultiSelectChange={handleStatusChange}
                     placeholder='All statuses'
                     overlayContent={
-                      <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                      <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                         {selectedStatusColor && (
                           <div
                             className='flex-shrink-0 rounded-[3px]'
@@ -535,13 +532,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All statuses'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Workflow Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Workflow
                   </span>
                   <Combobox
@@ -551,10 +548,10 @@ export const LogsToolbar = memo(function LogsToolbar({
                     onMultiSelectChange={setWorkflowIds}
                     placeholder='All workflows'
                     overlayContent={
-                      <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                      <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                         {selectedWorkflow && (
                           <div
-                            className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                            className='h-[8px] w-[8px] flex-shrink-0 rounded-xs border-[1.5px]'
                             style={{
                               backgroundColor: selectedWorkflow.color,
                               borderColor: `${selectedWorkflow.color}60`,
@@ -570,13 +567,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All workflows'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Folder Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Folder
                   </span>
                   <Combobox
@@ -595,13 +592,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All folders'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Trigger Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Trigger
                   </span>
                   <Combobox
@@ -620,13 +617,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All triggers'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Time Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Time Range
                   </span>
                   <Combobox
@@ -640,7 +637,7 @@ export const LogsToolbar = memo(function LogsToolbar({
                       </span>
                     }
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
               </div>
@@ -648,7 +645,7 @@ export const LogsToolbar = memo(function LogsToolbar({
           </DropdownMenu>
 
           {/* Inline Filters - Large screens only */}
-          <div className='hidden items-center gap-[8px] xl:flex'>
+          <div className='hidden items-center gap-2 xl:flex'>
             {/* Status Filter */}
             <Combobox
               options={statusOptions}
@@ -657,7 +654,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               onMultiSelectChange={handleStatusChange}
               placeholder='Status'
               overlayContent={
-                <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                   {selectedStatusColor && (
                     <div
                       className='flex-shrink-0 rounded-[3px]'
@@ -671,7 +668,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All statuses'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Workflow Filter */}
@@ -682,10 +679,10 @@ export const LogsToolbar = memo(function LogsToolbar({
               onMultiSelectChange={setWorkflowIds}
               placeholder='Workflow'
               overlayContent={
-                <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                   {selectedWorkflow && (
                     <div
-                      className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                      className='h-[8px] w-[8px] flex-shrink-0 rounded-xs border-[1.5px]'
                       style={{
                         backgroundColor: selectedWorkflow.color,
                         borderColor: `${selectedWorkflow.color}60`,
@@ -702,7 +699,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All workflows'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Folder Filter */}
@@ -721,7 +718,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All folders'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Trigger Filter */}
@@ -740,7 +737,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All triggers'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Timeline Filter */}
@@ -759,7 +756,7 @@ export const LogsToolbar = memo(function LogsToolbar({
                     }
                     size='sm'
                     align='end'
-                    className='h-[32px] w-[120px] rounded-[6px]'
+                    className='h-[32px] w-[120px] rounded-md'
                   />
                 </div>
               </DropdownMenuTrigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index d21929f5ae..e95b32a355 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -907,7 +907,7 @@ export default function Logs() {
             )}
             {sections.map((section) => (
               <div key={section.title}>
-                <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                   {section.title}
                 </div>
                 {section.suggestions.map((suggestion) => {
@@ -931,7 +931,7 @@ export default function Logs() {
         ) : (
           <div className='py-1'>
             {suggestionType === 'filters' && (
-              <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+              <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                 SUGGESTED FILTERS
               </div>
             )}
@@ -1072,7 +1072,7 @@ export default function Logs() {
         />
         {isDashboardView ? (
           <div className='relative flex min-h-0 flex-1 flex-col overflow-auto'>
-            <div className='flex min-h-0 flex-1 flex-col px-[24px]'>
+            <div className='flex min-h-0 flex-1 flex-col px-6'>
               <Dashboard
                 stats={dashboardStatsQuery.data}
                 isLoading={dashboardStatsQuery.isLoading}
@@ -1335,9 +1335,9 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
   }, [resetFilters, onSearchQueryChange])
 
   return (
-    <div className='flex flex-col gap-[12px] p-[12px]'>
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Status</span>
+    <div className='flex flex-col gap-3 p-3'>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
         <Combobox
           options={statusOptions}
           multiSelect
@@ -1345,7 +1345,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           onMultiSelectChange={handleStatusChange}
           placeholder='All statuses'
           overlayContent={
-            <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+            <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
               {selectedStatusColor && (
                 <div
                   className='flex-shrink-0 rounded-[3px]'
@@ -1358,12 +1358,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All statuses'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Workflow</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Workflow</span>
         <Combobox
           options={workflowOptions}
           multiSelect
@@ -1371,10 +1371,10 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           onMultiSelectChange={setWorkflowIds}
           placeholder='All workflows'
           overlayContent={
-            <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+            <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
               {selectedWorkflow && (
                 <div
-                  className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                  className='h-[8px] w-[8px] flex-shrink-0 rounded-xs border-[1.5px]'
                   style={{
                     backgroundColor: selectedWorkflow.color,
                     borderColor: `${selectedWorkflow.color}60`,
@@ -1390,12 +1390,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All workflows'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Folder</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Folder</span>
         <Combobox
           options={folderOptions}
           multiSelect
@@ -1410,12 +1410,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All folders'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Trigger</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Trigger</span>
         <Combobox
           options={triggerOptions}
           multiSelect
@@ -1430,12 +1430,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All triggers'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Time Range</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Time Range</span>
         <DropdownMenu open={datePickerOpen} onOpenChange={setDatePickerOpen}>
           <DropdownMenuTrigger asChild>
             <div>
@@ -1448,7 +1448,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
                   <span className='truncate text-[var(--text-primary)]'>{timeDisplayLabel}</span>
                 }
                 size='sm'
-                className='h-[32px] w-full rounded-[6px]'
+                className='h-[32px] w-full rounded-md'
               />
             </div>
           </DropdownMenuTrigger>
@@ -1475,7 +1475,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
         <Button
           variant='active'
           onClick={handleClearFilters}
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         >
           Clear All Filters
         </Button>
@@ -1503,7 +1503,7 @@ function SuggestionButton({
     <button
       data-index={index}
       className={cn(
-        'w-full rounded-[6px] px-3 py-2 text-left transition-colors hover:bg-[var(--surface-5)]',
+        'w-full rounded-md px-3 py-2 text-left transition-colors hover-hover:bg-[var(--surface-5)]',
         highlighted && 'bg-[var(--surface-5)]'
       )}
       onMouseEnter={() => onHover(index)}
@@ -1513,16 +1513,16 @@ function SuggestionButton({
       }}
     >
       <div className='flex items-center justify-between gap-3'>
-        <div className='min-w-0 flex-1 truncate text-[13px]'>{suggestion.label}</div>
+        <div className='min-w-0 flex-1 truncate text-small'>{suggestion.label}</div>
         {showCategory && suggestion.value !== suggestion.label && (
-          <div className='shrink-0 font-mono text-[11px] text-[var(--text-muted)]'>
+          <div className='shrink-0 font-mono text-[var(--text-muted)] text-xs'>
             {suggestion.category === 'workflow' || suggestion.category === 'folder'
               ? `${suggestion.category}:`
               : ''}
           </div>
         )}
         {!showCategory && suggestion.description && (
-          <div className='shrink-0 text-[11px] text-[var(--text-muted)]'>{suggestion.value}</div>
+          <div className='shrink-0 text-[var(--text-muted)] text-xs'>{suggestion.value}</div>
         )}
       </div>
     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
index f0dea2817f..abcafb2974 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
@@ -316,9 +316,9 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
       <ModalContent size='lg'>
         <ModalHeader>{isEditing ? 'Edit scheduled task' : 'Create new scheduled task'}</ModalHeader>
         <ModalBody>
-          <div className='flex flex-col gap-[18px]'>
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Title</p>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Title</p>
               <EmcnInput
                 value={title}
                 onChange={(e) => {
@@ -332,10 +332,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
               />
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Task description
-              </p>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Task description</p>
               <Textarea
                 value={prompt}
                 onChange={(e) => {
@@ -347,8 +345,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
               />
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Run frequency</p>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Run frequency</p>
               <Combobox
                 options={SCHEDULE_TYPE_OPTIONS}
                 value={scheduleType}
@@ -358,8 +356,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             </div>
 
             {scheduleType === 'minutes' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Interval (minutes)
                 </p>
                 <EmcnInput
@@ -375,10 +373,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {scheduleType === 'hourly' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Minute of hour
-                </p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Minute of hour</p>
                 <EmcnInput
                   type='number'
                   value={hourlyMinute}
@@ -392,33 +388,29 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {scheduleType === 'daily' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Time</p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
                 <TimePicker value={dailyTime} onChange={setDailyTime} />
               </div>
             )}
 
             {scheduleType === 'weekly' && (
-              <div className='flex gap-[12px]'>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Day of week
-                  </p>
+              <div className='flex gap-3'>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Day of week</p>
                   <Combobox options={WEEKDAY_OPTIONS} value={weeklyDay} onChange={setWeeklyDay} />
                 </div>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Time</p>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
                   <TimePicker value={weeklyDayTime} onChange={setWeeklyDayTime} />
                 </div>
               </div>
             )}
 
             {scheduleType === 'monthly' && (
-              <div className='flex gap-[12px]'>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Day of month
-                  </p>
+              <div className='flex gap-3'>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Day of month</p>
                   <EmcnInput
                     type='number'
                     value={monthlyDay}
@@ -429,18 +421,16 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
                     className='h-9'
                   />
                 </div>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Time</p>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
                   <TimePicker value={monthlyTime} onChange={setMonthlyTime} />
                 </div>
               </div>
             )}
 
             {scheduleType === 'custom' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Cron expression
-                </p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Cron expression</p>
                 <EmcnInput
                   value={cronExpression}
                   onChange={(e) => setCronExpression(e.target.value)}
@@ -452,8 +442,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {showTimezone && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Timezone</p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Timezone</p>
                 <Combobox
                   options={TIMEZONE_OPTIONS}
                   value={timezone}
@@ -466,10 +456,10 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {!isEditing && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Start date
-                  <span className='ml-[4px] font-normal text-[var(--text-muted)]'>(optional)</span>
+                  <span className='ml-1 font-normal text-[var(--text-muted)]'>(optional)</span>
                 </p>
                 <DatePicker
                   value={startDate}
@@ -479,8 +469,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
               </div>
             )}
 
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Lifecycle</p>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Lifecycle</p>
               <ButtonGroup
                 value={lifecycle}
                 onValueChange={(value) => setLifecycle(value as 'persistent' | 'until_complete')}
@@ -491,10 +481,10 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             </div>
 
             {lifecycle === 'until_complete' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Max runs
-                  <span className='ml-[4px] font-normal text-[var(--text-muted)]'>(optional)</span>
+                  <span className='ml-1 font-normal text-[var(--text-muted)]'>(optional)</span>
                 </p>
                 <EmcnInput
                   type='number'
@@ -510,14 +500,14 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             {computedCron && schedulePreview && (
               <div>
                 {'error' in schedulePreview ? (
-                  <p className='text-[13px] text-[var(--text-error)]'>{schedulePreview.error}</p>
+                  <p className='text-[var(--text-error)] text-small'>{schedulePreview.error}</p>
                 ) : (
-                  <div className='flex flex-col gap-[4px]'>
-                    <p className='text-[13px] text-[var(--text-secondary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <p className='text-[var(--text-secondary)] text-small'>
                       {schedulePreview.humanReadable}
                     </p>
                     {schedulePreview.nextRun && (
-                      <p className='text-[12px] text-[var(--text-muted)]'>
+                      <p className='text-[var(--text-muted)] text-caption'>
                         Next run:{' '}
                         {schedulePreview.nextRun.toLocaleString(undefined, {
                           dateStyle: 'medium',
@@ -531,7 +521,7 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {submitError && (
-              <p className='text-[13px] text-[var(--text-error)] leading-tight'>{submitError}</p>
+              <p className='text-[var(--text-error)] text-small leading-tight'>{submitError}</p>
             )}
           </div>
         </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
index 9b9298edc7..36acbbe08e 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
@@ -230,7 +230,7 @@ export function ScheduledTasks() {
         <ModalContent size='sm'>
           <ModalHeader>Delete Scheduled Task</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-caption'>
               Are you sure you want to delete{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {activeTask?.jobTitle || 'this task'}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index df2f2fcdcd..02fcbad3a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -28,11 +28,11 @@ import {
  */
 function SettingsSectionSkeleton() {
   return (
-    <div className='flex flex-col gap-[16px]'>
-      <Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
+    <div className='flex flex-col gap-4'>
+      <Skeleton className='h-[20px] w-[200px] rounded-sm' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
     </div>
   )
 }
@@ -176,7 +176,7 @@ export function SettingsPage({ section }: SettingsPageProps) {
 
   return (
     <div>
-      <h2 className='mb-[28px] font-medium text-[22px] text-[var(--text-primary)]'>{label}</h2>
+      <h2 className='mb-7 font-medium text-[22px] text-[var(--text-primary)]'>{label}</h2>
       {effectiveSection === 'general' && <General />}
       {effectiveSection === 'integrations' && <Integrations />}
       {effectiveSection === 'secrets' && <Credentials />}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
index b15fae3a02..5fc7bfcf96 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
@@ -2,21 +2,21 @@ import { Skeleton } from '@/components/emcn'
 
 export function AdminSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[24px]'>
+    <div className='flex h-full flex-col gap-6'>
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[20px] w-[36px] rounded-full' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[340px]' />
-        <div className='flex gap-[8px]'>
-          <Skeleton className='h-9 flex-1 rounded-[6px]' />
-          <Skeleton className='h-9 w-[80px] rounded-[6px]' />
+        <div className='flex gap-2'>
+          <Skeleton className='h-9 flex-1 rounded-md' />
+          <Skeleton className='h-9 w-[80px] rounded-md' />
         </div>
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[120px]' />
-        <Skeleton className='h-[200px] w-full rounded-[8px]' />
+        <Skeleton className='h-[200px] w-full rounded-lg' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 9b8d24f2b8..5105cb404f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -118,7 +118,7 @@ export function Admin() {
     impersonatingUserId,
   ])
   return (
-    <div className='flex h-full flex-col gap-[24px]'>
+    <div className='flex h-full flex-col gap-6'>
       <div className='flex items-center justify-between'>
         <Label htmlFor='super-user-mode'>Super admin mode</Label>
         <Switch
@@ -130,11 +130,11 @@ export function Admin() {
 
       <div className='h-px bg-[var(--border-secondary)]' />
 
-      <div className='flex flex-col gap-[8px]'>
-        <p className='text-[14px] text-[var(--text-secondary)]'>
+      <div className='flex flex-col gap-2'>
+        <p className='text-[var(--text-secondary)] text-sm'>
           Import a workflow by ID along with its associated copilot chats.
         </p>
-        <div className='flex gap-[8px]'>
+        <div className='flex gap-2'>
           <EmcnInput
             value={workflowId}
             onChange={(e) => {
@@ -153,10 +153,10 @@ export function Admin() {
           </Button>
         </div>
         {importWorkflow.error && (
-          <p className='text-[13px] text-[var(--text-error)]'>{importWorkflow.error.message}</p>
+          <p className='text-[var(--text-error)] text-small'>{importWorkflow.error.message}</p>
         )}
         {importWorkflow.isSuccess && (
-          <p className='text-[13px] text-[var(--text-secondary)]'>
+          <p className='text-[var(--text-secondary)] text-small'>
             Workflow imported successfully (new ID: {importWorkflow.data.newWorkflowId},{' '}
             {importWorkflow.data.copilotChatsImported ?? 0} copilot chats imported)
           </p>
@@ -165,9 +165,9 @@ export function Admin() {
 
       <div className='h-px bg-[var(--border-secondary)]' />
 
-      <div className='flex flex-col gap-[12px]'>
-        <p className='font-medium text-[14px] text-[var(--text-primary)]'>User Management</p>
-        <div className='flex gap-[8px]'>
+      <div className='flex flex-col gap-3'>
+        <p className='font-medium text-[var(--text-primary)] text-sm'>User Management</p>
+        <div className='flex gap-2'>
           <EmcnInput
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
@@ -180,7 +180,7 @@ export function Admin() {
         </div>
 
         {usersError && (
-          <p className='text-[13px] text-[var(--text-error)]'>
+          <p className='text-[var(--text-error)] text-small'>
             {usersError instanceof Error ? usersError.message : 'Failed to fetch users'}
           </p>
         )}
@@ -199,17 +199,17 @@ export function Admin() {
         )}
 
         {usersLoading && !usersData && (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {Array.from({ length: 5 }).map((_, i) => (
-              <Skeleton key={i} className='h-[48px] w-full rounded-[6px]' />
+              <Skeleton key={i} className='h-[48px] w-full rounded-md' />
             ))}
           </div>
         )}
 
         {searchQuery.length > 0 && usersData && (
           <>
-            <div className='flex flex-col gap-[2px]'>
-              <div className='flex items-center gap-[12px] border-[var(--border-secondary)] border-b px-[12px] py-[8px] text-[12px] text-[var(--text-tertiary)]'>
+            <div className='flex flex-col gap-0.5'>
+              <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
                 <span className='w-[200px]'>Name</span>
                 <span className='flex-1'>Email</span>
                 <span className='w-[80px]'>Role</span>
@@ -218,7 +218,7 @@ export function Admin() {
               </div>
 
               {usersData.users.length === 0 && (
-                <div className='py-[16px] text-center text-[13px] text-[var(--text-tertiary)]'>
+                <div className='py-4 text-center text-[var(--text-tertiary)] text-small'>
                   No users found.
                 </div>
               )}
@@ -227,7 +227,7 @@ export function Admin() {
                 <div
                   key={u.id}
                   className={cn(
-                    'flex items-center gap-[12px] px-[12px] py-[8px] text-[13px]',
+                    'flex items-center gap-3 px-3 py-2 text-small',
                     'border-[var(--border-secondary)] border-b last:border-b-0'
                   )}
                 >
@@ -245,12 +245,12 @@ export function Admin() {
                       <Badge variant='green'>Active</Badge>
                     )}
                   </span>
-                  <span className='flex w-[250px] justify-end gap-[4px]'>
+                  <span className='flex w-[250px] justify-end gap-1'>
                     {u.id !== session?.user?.id && (
                       <>
                         <Button
                           variant='active'
-                          className='h-[28px] px-[8px] text-[12px]'
+                          className='h-[28px] px-2 text-[12px]'
                           onClick={() => handleImpersonate(u.id)}
                           disabled={pendingUserIds.has(u.id)}
                         >
@@ -263,7 +263,7 @@ export function Admin() {
                         </Button>
                         <Button
                           variant='active'
-                          className='h-[28px] px-[8px] text-[12px]'
+                          className='h-[28px] px-2 text-[12px]'
                           onClick={() => {
                             setUserRole.reset()
                             setUserRole.mutate({
@@ -278,7 +278,7 @@ export function Admin() {
                         {u.banned ? (
                           <Button
                             variant='active'
-                            className='h-[28px] px-[8px] text-[12px]'
+                            className='h-[28px] px-2 text-caption'
                             onClick={() => {
                               unbanUser.reset()
                               unbanUser.mutate({ userId: u.id })
@@ -288,16 +288,16 @@ export function Admin() {
                             Unban
                           </Button>
                         ) : banUserId === u.id ? (
-                          <div className='flex gap-[4px]'>
+                          <div className='flex gap-1'>
                             <EmcnInput
                               value={banReason}
                               onChange={(e) => setBanReason(e.target.value)}
                               placeholder='Reason (optional)'
-                              className='h-[28px] w-[120px] text-[12px]'
+                              className='h-[28px] w-[120px] text-caption'
                             />
                             <Button
                               variant='primary'
-                              className='h-[28px] px-[8px] text-[12px]'
+                              className='h-[28px] px-2 text-caption'
                               onClick={() => {
                                 banUser.reset()
                                 banUser.mutate(
@@ -319,7 +319,7 @@ export function Admin() {
                             </Button>
                             <Button
                               variant='active'
-                              className='h-[28px] px-[8px] text-[12px]'
+                              className='h-[28px] px-2 text-caption'
                               onClick={() => {
                                 setBanUserId(null)
                                 setBanReason('')
@@ -331,7 +331,7 @@ export function Admin() {
                         ) : (
                           <Button
                             variant='active'
-                            className='h-[28px] px-[8px] text-[12px] text-[var(--text-error)]'
+                            className='h-[28px] px-2 text-[var(--text-error)] text-caption'
                             onClick={() => {
                               setBanUserId(u.id)
                               setBanReason('')
@@ -349,14 +349,14 @@ export function Admin() {
             </div>
 
             {totalPages > 1 && (
-              <div className='flex items-center justify-between text-[13px] text-[var(--text-secondary)]'>
+              <div className='flex items-center justify-between text-[var(--text-secondary)] text-small'>
                 <span>
                   Page {currentPage} of {totalPages} ({usersData.total} users)
                 </span>
-                <div className='flex gap-[4px]'>
+                <div className='flex gap-1'>
                   <Button
                     variant='active'
-                    className='h-[28px] px-[8px] text-[12px]'
+                    className='h-[28px] px-2 text-caption'
                     onClick={() => setUsersOffset((prev) => prev - PAGE_SIZE)}
                     disabled={usersOffset === 0 || usersLoading}
                   >
@@ -364,7 +364,7 @@ export function Admin() {
                   </Button>
                   <Button
                     variant='active'
-                    className='h-[28px] px-[8px] text-[12px]'
+                    className='h-[28px] px-2 text-caption'
                     onClick={() => setUsersOffset((prev) => prev + PAGE_SIZE)}
                     disabled={usersOffset + PAGE_SIZE >= (usersData?.total ?? 0) || usersLoading}
                   >
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
index 606e35e8ab..2840852df8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
@@ -5,15 +5,15 @@ import { Skeleton } from '@/components/emcn'
  */
 export function ApiKeySkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <Skeleton className='h-5 w-[80px]' />
           <Skeleton className='h-5 w-[140px]' />
         </div>
         <Skeleton className='h-5 w-[100px]' />
       </div>
-      <Skeleton className='h-[26px] w-[48px] rounded-[6px]' />
+      <Skeleton className='h-[26px] w-[48px] rounded-md' />
     </div>
   )
 }
@@ -23,12 +23,12 @@ export function ApiKeySkeleton() {
  */
 export function ApiKeysSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[80px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[80px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <ApiKeySkeleton />
         <ApiKeySkeleton />
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index 7a41e992c7..f4ec9d6806 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -123,10 +123,10 @@ export function ApiKeys() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* Search Input and Create Button */}
-      <div className='flex items-center gap-[8px]'>
-        <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex items-center gap-2'>
+        <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-2 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
           <Search
             className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
             strokeWidth={2}
@@ -149,7 +149,7 @@ export function ApiKeys() {
           variant='primary'
           disabled={createButtonDisabled}
         >
-          <Plus className='mr-[6px] h-[13px] w-[13px]' />
+          <Plus className='mr-1.5 h-[13px] w-[13px]' />
           Create
         </Button>
       </div>
@@ -157,49 +157,47 @@ export function ApiKeys() {
       {/* Scrollable Content */}
       <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
         {isLoading ? (
-          <div className='flex flex-col gap-[18px]'>
-            <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[70px]' />
-              <div className='text-[14px] text-[var(--text-muted)]'>
+              <div className='text-[var(--text-muted)] text-sm'>
                 <Skeleton className='h-5 w-[140px]' />
               </div>
             </div>
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[55px]' />
               <ApiKeySkeleton />
               <ApiKeySkeleton />
             </div>
           </div>
         ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+          <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
             Click "Create" above to get started
           </div>
         ) : (
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             <>
               {/* Workspace section */}
               {!searchTerm.trim() ? (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Workspace
-                  </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>Workspace</div>
                   {workspaceKeys.length === 0 ? (
-                    <div className='text-[14px] text-[var(--text-muted)]'>
+                    <div className='text-[var(--text-muted)] text-sm'>
                       No workspace Sim keys yet
                     </div>
                   ) : (
                     workspaceKeys.map((key) => (
-                      <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                      <div key={key.id} className='flex items-center justify-between gap-3'>
                         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                          <div className='flex items-center gap-[6px]'>
-                            <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                          <div className='flex items-center gap-1.5'>
+                            <span className='max-w-[280px] truncate font-medium text-base'>
                               {key.name}
                             </span>
-                            <span className='text-[14px] text-[var(--text-secondary)]'>
+                            <span className='text-[var(--text-secondary)] text-sm'>
                               (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                             </span>
                           </div>
-                          <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                          <p className='truncate text-[var(--text-muted)] text-sm'>
                             {key.displayKey || key.key}
                           </p>
                         </div>
@@ -219,22 +217,20 @@ export function ApiKeys() {
                   )}
                 </div>
               ) : filteredWorkspaceKeys.length > 0 ? (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Workspace
-                  </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>Workspace</div>
                   {filteredWorkspaceKeys.map(({ key }) => (
-                    <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                    <div key={key.id} className='flex items-center justify-between gap-3'>
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <div className='flex items-center gap-[6px]'>
-                          <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                        <div className='flex items-center gap-1.5'>
+                          <span className='max-w-[280px] truncate font-medium text-base'>
                             {key.name}
                           </span>
-                          <span className='text-[14px] text-[var(--text-secondary)]'>
+                          <span className='text-[var(--text-secondary)] text-sm'>
                             (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                           </span>
                         </div>
-                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                        <p className='truncate text-[var(--text-muted)] text-sm'>
                           {key.displayKey || key.key}
                         </p>
                       </div>
@@ -256,25 +252,23 @@ export function ApiKeys() {
 
               {/* Personal section */}
               {(!searchTerm.trim() || filteredPersonalKeys.length > 0) && (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Personal
-                  </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>Personal</div>
                   {filteredPersonalKeys.map(({ key }) => {
                     const isConflict = conflicts.includes(key.name)
                     return (
-                      <div key={key.id} className='flex flex-col gap-[8px]'>
-                        <div className='flex items-center justify-between gap-[12px]'>
+                      <div key={key.id} className='flex flex-col gap-2'>
+                        <div className='flex items-center justify-between gap-3'>
                           <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                            <div className='flex items-center gap-[6px]'>
-                              <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                            <div className='flex items-center gap-1.5'>
+                              <span className='max-w-[280px] truncate font-medium text-base'>
                                 {key.name}
                               </span>
-                              <span className='text-[14px] text-[var(--text-secondary)]'>
+                              <span className='text-[var(--text-secondary)] text-sm'>
                                 (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                               </span>
                             </div>
-                            <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                            <p className='truncate text-[var(--text-muted)] text-sm'>
                               {key.displayKey || key.key}
                             </p>
                           </div>
@@ -290,7 +284,7 @@ export function ApiKeys() {
                           </Button>
                         </div>
                         {isConflict && (
-                          <div className='text-[13px] text-[var(--text-error)] leading-tight'>
+                          <div className='text-[var(--text-error)] text-small leading-tight'>
                             Workspace Sim key with the same name overrides this. Rename your
                             personal key to use it.
                           </div>
@@ -306,7 +300,7 @@ export function ApiKeys() {
                 filteredPersonalKeys.length === 0 &&
                 filteredWorkspaceKeys.length === 0 &&
                 (personalKeys.length > 0 || workspaceKeys.length > 0) && (
-                  <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                  <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                     No Sim keys found matching "{searchTerm}"
                   </div>
                 )}
@@ -318,21 +312,21 @@ export function ApiKeys() {
       {/* Allow Personal API Keys Toggle - Fixed at bottom */}
       {!isLoading && canManageWorkspaceKeys && (
         <Tooltip.Provider delayDuration={150}>
-          <div className='mt-[24px] flex items-center justify-between'>
-            <div className='flex items-center gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+          <div className='mt-6 flex items-center justify-between'>
+            <div className='flex items-center gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>
                 Allow personal Sim keys
               </span>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <button
                     type='button'
-                    className='rounded-full p-[4px] text-[var(--text-muted)] transition hover:text-[var(--text-primary)]'
+                    className='rounded-full p-1 text-[var(--text-muted)] transition hover-hover:text-[var(--text-primary)]'
                   >
                     <Info className='h-[12px] w-[12px]' strokeWidth={2} />
                   </button>
                 </Tooltip.Trigger>
-                <Tooltip.Content side='top' className='max-w-xs text-[13px]'>
+                <Tooltip.Content side='top' className='max-w-xs text-small'>
                   Allow collaborators to create and use their own keys with billing charged to them.
                 </Tooltip.Content>
               </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
index 078b915c45..ad64805a2e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
@@ -121,12 +121,10 @@ export function CreateApiKeyModal({
                 : "This key will have access to your personal workflows. Make sure to copy it after creation as you won't be able to see it again."}
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[18px]'>
+            <div className='mt-4 flex flex-col gap-4.5'>
               {canManageWorkspaceKeys && (
-                <div className='flex flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Sim Key Type
-                  </p>
+                <div className='flex flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Sim Key Type</p>
                   <ButtonGroup
                     value={keyType}
                     onValueChange={(value) => {
@@ -141,8 +139,8 @@ export function CreateApiKeyModal({
                   </ButtonGroup>
                 </div>
               )}
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Enter a name for your Sim key to help you identify it later.
                 </p>
                 {/* Hidden decoy fields to prevent browser autofill */}
@@ -176,9 +174,7 @@ export function CreateApiKeyModal({
                   data-form-type='other'
                 />
                 {createError && (
-                  <p className='text-[13px] text-[var(--text-error)] leading-tight'>
-                    {createError}
-                  </p>
+                  <p className='text-[var(--text-error)] text-small leading-tight'>{createError}</p>
                 )}
               </div>
             </div>
@@ -226,15 +222,15 @@ export function CreateApiKeyModal({
             </p>
 
             {newKey && (
-              <div className='relative mt-[10px]'>
-                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
-                  <code className='flex-1 truncate font-mono text-[14px] text-[var(--text-primary)]'>
+              <div className='relative mt-2.5'>
+                <div className='flex h-9 items-center rounded-md border bg-[var(--surface-1)] px-2.5 pr-10'>
+                  <code className='flex-1 truncate font-mono text-[var(--text-primary)] text-sm'>
                     {newKey.key}
                   </code>
                 </div>
                 <Button
                   variant='ghost'
-                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-sm text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                   onClick={() => copyToClipboard(newKey.key)}
                 >
                   {copySuccess ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
index a235342a0c..de080c3c23 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
@@ -5,15 +5,15 @@ import { Skeleton } from '@/components/emcn'
  */
 export function BYOKKeySkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
-      <div className='flex items-center gap-[12px]'>
-        <Skeleton className='h-9 w-9 flex-shrink-0 rounded-[6px]' />
+    <div className='flex items-center justify-between gap-3'>
+      <div className='flex items-center gap-3'>
+        <Skeleton className='h-9 w-9 flex-shrink-0 rounded-md' />
         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
           <Skeleton className='h-[14px] w-[100px]' />
           <Skeleton className='h-[13px] w-[200px]' />
         </div>
       </div>
-      <Skeleton className='h-[32px] w-[72px] rounded-[6px]' />
+      <Skeleton className='h-[32px] w-[72px] rounded-md' />
     </div>
   )
 }
@@ -23,13 +23,13 @@ export function BYOKKeySkeleton() {
  */
 export function BYOKSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
       </div>
       <Skeleton className='h-[14px] w-[280px]' />
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[8px]'>
+        <div className='flex flex-col gap-2'>
           <BYOKKeySkeleton />
           <BYOKKeySkeleton />
           <BYOKKeySkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
index ecd16ff3d7..f65b58c333 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
@@ -216,9 +216,9 @@ export function BYOK() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -233,39 +233,39 @@ export function BYOK() {
           </div>
         </div>
 
-        <p className='text-[14px] text-[var(--text-secondary)]'>
+        <p className='text-[var(--text-secondary)] text-sm'>
           Use your own API keys for hosted model providers.
         </p>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {PROVIDERS.map((p) => (
                 <BYOKKeySkeleton key={p.id} />
               ))}
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredProviders.map((provider) => {
                 const existingKey = getKeyForProvider(provider.id)
                 const Icon = provider.icon
 
                 return (
-                  <div key={provider.id} className='flex items-center justify-between gap-[12px]'>
-                    <div className='flex items-center gap-[12px]'>
-                      <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-6)]'>
+                  <div key={provider.id} className='flex items-center justify-between gap-3'>
+                    <div className='flex items-center gap-3'>
+                      <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-md bg-[var(--surface-6)]'>
                         <Icon className='h-4 w-4' />
                       </div>
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='font-medium text-[15px]'>{provider.name}</span>
-                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                        <span className='font-medium text-base'>{provider.name}</span>
+                        <p className='truncate text-[var(--text-muted)] text-sm'>
                           {provider.description}
                         </p>
                       </div>
                     </div>
 
                     {existingKey ? (
-                      <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                      <div className='flex flex-shrink-0 items-center gap-2'>
                         <Button variant='default' onClick={() => openEditModal(provider.id)}>
                           Update
                         </Button>
@@ -285,7 +285,7 @@ export function BYOK() {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No providers found matching "{searchTerm}"
                 </div>
               )}
@@ -320,10 +320,8 @@ export function BYOK() {
               requests in this workspace. Your key is encrypted and stored securely.
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Enter your API key
-              </p>
+            <div className='mt-4 flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Enter your API key</p>
               {/* Hidden decoy fields to prevent browser autofill */}
               <input
                 type='text'
@@ -347,7 +345,7 @@ export function BYOK() {
                     if (error) setError(null)
                   }}
                   placeholder={PROVIDERS.find((p) => p.id === editingProvider)?.placeholder}
-                  className='h-9 pr-[36px]'
+                  className='h-9 pr-9'
                   autoFocus
                   name='byok_api_key'
                   autoComplete='off'
@@ -369,7 +367,7 @@ export function BYOK() {
                 </Button>
               </div>
               {error && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{error}</p>
+                <p className='text-[var(--text-error)] text-small leading-tight'>{error}</p>
               )}
             </div>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index 0f8ae7adc9..cb9085af9b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -33,7 +33,7 @@ const logger = createLogger('CopilotSettings')
  */
 // function McpServerSkeleton() {
 //   return (
-//     <div className='flex items-center justify-between gap-[12px]'>
+//     <div className='flex items-center justify-between gap-3'>
 //       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
 //         <Skeleton className='h-5 w-[120px]' />
 //         <Skeleton className='h-5 w-[80px]' />
@@ -145,28 +145,28 @@ export function Copilot() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         {/* MCP Tools Section — uncomment when ready to allow users to toggle MCP servers for Mothership
-        <div className='flex flex-col gap-[8px]'>
-          <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
+        <div className='flex flex-col gap-2'>
+          <div className='font-medium text-sm text-[var(--text-secondary)]'>
             MCP Tools
           </div>
           {mcpLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <McpServerSkeleton />
               <McpServerSkeleton />
             </div>
           ) : enabledServers.length === 0 ? (
-            <div className='text-[14px] text-[var(--text-muted)]'>
+            <div className='text-sm text-[var(--text-muted)]'>
               No MCP servers configured. Add servers in the MCP Tools tab.
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {enabledServers.map((server) => (
-                <div key={server.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={server.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[15px]'>{server.name}</span>
-                    <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                    <span className='truncate font-medium text-base'>{server.name}</span>
+                    <p className='truncate text-sm text-[var(--text-muted)]'>
                       {server.toolCount ?? 0} tool{server.toolCount === 1 ? '' : 's'}
                     </p>
                   </div>
@@ -182,8 +182,8 @@ export function Copilot() {
         */}
 
         {/* Search Input and Create Button */}
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -203,7 +203,7 @@ export function Copilot() {
             variant='primary'
             disabled={isLoading}
           >
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Create
           </Button>
         </div>
@@ -211,31 +211,29 @@ export function Copilot() {
         {/* Scrollable Content */}
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <CopilotKeySkeleton />
               <CopilotKeySkeleton />
               <CopilotKeySkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Create" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredKeys.map((key) => (
-                <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={key.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <div className='flex items-center gap-[6px]'>
-                      <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                    <div className='flex items-center gap-1.5'>
+                      <span className='max-w-[280px] truncate font-medium text-base'>
                         {key.name || 'Unnamed Key'}
                       </span>
-                      <span className='text-[14px] text-[var(--text-secondary)]'>
+                      <span className='text-[var(--text-secondary)] text-sm'>
                         (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                       </span>
                     </div>
-                    <p className='truncate text-[14px] text-[var(--text-muted)]'>
-                      {key.displayKey}
-                    </p>
+                    <p className='truncate text-[var(--text-muted)] text-sm'>{key.displayKey}</p>
                   </div>
                   <Button
                     variant='ghost'
@@ -250,7 +248,7 @@ export function Copilot() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No API keys found matching "{searchTerm}"
                 </div>
               )}
@@ -269,8 +267,8 @@ export function Copilot() {
               you won't be able to see it again.
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='mt-4 flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>
                 Enter a name for your API key to help you identify it later.
               </p>
               <EmcnInput
@@ -284,7 +282,7 @@ export function Copilot() {
                 autoFocus
               />
               {createError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{createError}</p>
+                <p className='text-[var(--text-error)] text-small leading-tight'>{createError}</p>
               )}
             </div>
           </ModalBody>
@@ -334,15 +332,15 @@ export function Copilot() {
             </p>
 
             {newKey && (
-              <div className='relative mt-[10px]'>
-                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
-                  <code className='flex-1 truncate font-mono text-[14px] text-[var(--text-primary)]'>
+              <div className='relative mt-2.5'>
+                <div className='flex h-9 items-center rounded-md border bg-[var(--surface-1)] px-2.5 pr-10'>
+                  <code className='flex-1 truncate font-mono text-[var(--text-primary)] text-sm'>
                     {newKey}
                   </code>
                 </div>
                 <Button
                   variant='ghost'
-                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-sm text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                   onClick={() => copyToClipboard(newKey)}
                 >
                   {copySuccess ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
index b9af75ee0d..67dae0e906 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
@@ -5,35 +5,35 @@ import { Skeleton } from '@/components/emcn'
  */
 export function CredentialSetsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[80px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[80px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[100px]' />
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='h-9 w-9 rounded-[6px]' />
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-9 w-9 rounded-md' />
             <div className='flex flex-col'>
               <Skeleton className='h-[14px] w-[120px]' />
               <Skeleton className='h-[12px] w-[80px]' />
             </div>
           </div>
-          <Skeleton className='h-[32px] w-[60px] rounded-[6px]' />
+          <Skeleton className='h-[32px] w-[60px] rounded-md' />
         </div>
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[60px]' />
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='h-9 w-9 rounded-[6px]' />
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-9 w-9 rounded-md' />
             <div className='flex flex-col'>
               <Skeleton className='h-[14px] w-[140px]' />
               <Skeleton className='h-[12px] w-[100px]' />
             </div>
           </div>
-          <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+          <Skeleton className='h-[32px] w-[80px] rounded-md' />
         </div>
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
index fe31cb51dd..33aca21f31 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
@@ -410,34 +410,28 @@ export function CredentialSets() {
 
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
+        <div className='flex h-full flex-col gap-4.5'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[18px]'>
-              <div className='flex items-center gap-[18px]'>
-                <div className='flex items-center gap-[8px]'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                    Group Name
-                  </span>
-                  <span className='text-[14px] text-[var(--text-secondary)]'>
-                    {viewingSet.name}
-                  </span>
+            <div className='flex flex-col gap-4.5'>
+              <div className='flex items-center gap-4.5'>
+                <div className='flex items-center gap-2'>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>Group Name</span>
+                  <span className='text-[var(--text-secondary)] text-sm'>{viewingSet.name}</span>
                 </div>
                 <div className='h-4 w-px bg-[var(--border)]' />
-                <div className='flex items-center gap-[8px]'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                    Provider
-                  </span>
-                  <div className='flex items-center gap-[6px]'>
+                <div className='flex items-center gap-2'>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>Provider</span>
+                  <div className='flex items-center gap-1.5'>
                     {getProviderIcon(viewingSet.providerId)}
-                    <span className='text-[14px] text-[var(--text-secondary)]'>
+                    <span className='text-[var(--text-secondary)] text-sm'>
                       {getProviderDisplayName(viewingSet.providerId as PollingProvider)}
                     </span>
                   </div>
                 </div>
               </div>
 
-              <div className='flex flex-col gap-[4px]'>
-                <div className='flex items-center gap-[8px]'>
+              <div className='flex flex-col gap-1'>
+                <div className='flex items-center gap-2'>
                   <TagInput
                     items={emailItems}
                     onAdd={(value) => addEmail(value)}
@@ -456,19 +450,19 @@ export function CredentialSets() {
                     {createInvitation.isPending ? 'Sending...' : 'Invite'}
                   </Button>
                 </div>
-                {emailError && <p className='text-[13px] text-[var(--text-error)]'>{emailError}</p>}
+                {emailError && <p className='text-[var(--text-error)] text-small'>{emailError}</p>}
               </div>
 
-              <div className='flex flex-col gap-[18px]'>
-                <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>Members</h4>
+              <div className='flex flex-col gap-4.5'>
+                <h4 className='font-medium text-[var(--text-primary)] text-base'>Members</h4>
 
                 {membersLoading || pendingInvitationsLoading ? (
-                  <div className='flex flex-col gap-[18px]'>
+                  <div className='flex flex-col gap-4.5'>
                     {[1, 2].map((i) => (
                       <div key={i} className='flex items-center justify-between'>
-                        <div className='flex items-center gap-[12px]'>
+                        <div className='flex items-center gap-3'>
                           <Skeleton className='h-8 w-8 rounded-full' />
-                          <div className='flex flex-col gap-[4px]'>
+                          <div className='flex flex-col gap-1'>
                             <Skeleton className='h-[14px] w-[100px]' />
                             <Skeleton className='h-[12px] w-[150px]' />
                           </div>
@@ -477,18 +471,18 @@ export function CredentialSets() {
                     ))}
                   </div>
                 ) : totalCount === 0 ? (
-                  <p className='text-[14px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-sm'>
                     No members yet. Send invitations above.
                   </p>
                 ) : (
-                  <div className='flex flex-col gap-[18px]'>
+                  <div className='flex flex-col gap-4.5'>
                     {activeMembers.map((member) => {
                       const name = member.userName || 'Unknown'
                       const avatarInitial = name.charAt(0).toUpperCase()
 
                       return (
                         <div key={member.id} className='flex items-center justify-between'>
-                          <div className='flex flex-1 items-center gap-[12px]'>
+                          <div className='flex flex-1 items-center gap-3'>
                             <Avatar size='md'>
                               {member.userImage && (
                                 <AvatarImage src={member.userImage} alt={name} />
@@ -504,8 +498,8 @@ export function CredentialSets() {
                             </Avatar>
 
                             <div className='min-w-0'>
-                              <div className='flex items-center gap-[8px]'>
-                                <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                              <div className='flex items-center gap-2'>
+                                <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                                   {name}
                                 </span>
                                 {member.credentials.length === 0 && (
@@ -514,13 +508,13 @@ export function CredentialSets() {
                                   </Badge>
                                 )}
                               </div>
-                              <div className='truncate text-[13px] text-[var(--text-muted)]'>
+                              <div className='truncate text-[var(--text-muted)] text-small'>
                                 {member.userEmail}
                               </div>
                             </div>
                           </div>
 
-                          <div className='ml-[16px] flex items-center gap-[4px]'>
+                          <div className='ml-4 flex items-center gap-1'>
                             <Button
                               variant='destructive'
                               onClick={() => handleRemoveMember(member.id)}
@@ -541,7 +535,7 @@ export function CredentialSets() {
 
                       return (
                         <div key={invitation.id} className='flex items-center justify-between'>
-                          <div className='flex flex-1 items-center gap-[12px]'>
+                          <div className='flex flex-1 items-center gap-3'>
                             <Avatar size='md'>
                               <AvatarFallback
                                 style={{ background: getUserColor(email) }}
@@ -552,21 +546,21 @@ export function CredentialSets() {
                             </Avatar>
 
                             <div className='min-w-0'>
-                              <div className='flex items-center gap-[8px]'>
-                                <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                              <div className='flex items-center gap-2'>
+                                <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                                   {emailPrefix}
                                 </span>
                                 <Badge variant='gray-secondary' size='sm'>
                                   Pending
                                 </Badge>
                               </div>
-                              <div className='truncate text-[13px] text-[var(--text-muted)]'>
+                              <div className='truncate text-[var(--text-muted)] text-small'>
                                 {email}
                               </div>
                             </div>
                           </div>
 
-                          <div className='ml-[16px] flex items-center gap-[4px]'>
+                          <div className='ml-4 flex items-center gap-1'>
                             <Button
                               variant='ghost'
                               onClick={() => handleResendInvitation(invitation.id, email)}
@@ -614,9 +608,9 @@ export function CredentialSets() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -630,7 +624,7 @@ export function CredentialSets() {
           </div>
           {canManageCredentialSets && (
             <Button variant='primary' onClick={() => setShowCreateModal(true)}>
-              <Plus className='mr-[6px] h-[13px] w-[13px]' />
+              <Plus className='mr-1.5 h-[13px] w-[13px]' />
               Create
             </Button>
           )}
@@ -638,19 +632,19 @@ export function CredentialSets() {
 
         <div className='relative min-h-0 flex-1 overflow-y-auto'>
           {hasNoContent && !canManageCredentialSets ? (
-            <div className='absolute inset-0 flex items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='absolute inset-0 flex items-center justify-center text-[var(--text-muted)] text-sm'>
               You're not a member of any polling groups yet. When someone invites you, it will
               appear here.
             </div>
           ) : hasNoResults ? (
-            <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+            <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
               No results found matching "{searchTerm}"
             </div>
           ) : (
-            <div className='flex flex-col gap-[18px]'>
+            <div className='flex flex-col gap-4.5'>
               {filteredInvitations.length > 0 && (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>
                     Pending Invitations
                   </div>
                   {filteredInvitations.map((invitation) => (
@@ -658,15 +652,15 @@ export function CredentialSets() {
                       key={invitation.invitationId}
                       className='flex items-center justify-between'
                     >
-                      <div className='flex items-center gap-[12px]'>
-                        <div className='flex h-9 w-9 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                      <div className='flex items-center gap-3'>
+                        <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {getProviderIcon(invitation.providerId)}
                         </div>
                         <div className='flex flex-col'>
-                          <span className='font-medium text-[15px]'>
+                          <span className='font-medium text-base'>
                             {invitation.credentialSetName}
                           </span>
-                          <span className='text-[14px] text-[var(--text-muted)]'>
+                          <span className='text-[var(--text-muted)] text-sm'>
                             {invitation.organizationName}
                           </span>
                         </div>
@@ -684,8 +678,8 @@ export function CredentialSets() {
               )}
 
               {filteredMemberships.length > 0 && (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>
                     My Memberships
                   </div>
                   {filteredMemberships.map((membership) => (
@@ -693,15 +687,15 @@ export function CredentialSets() {
                       key={membership.membershipId}
                       className='flex items-center justify-between'
                     >
-                      <div className='flex items-center gap-[12px]'>
-                        <div className='flex h-9 w-9 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                      <div className='flex items-center gap-3'>
+                        <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {getProviderIcon(membership.providerId)}
                         </div>
                         <div className='flex flex-col'>
-                          <span className='font-medium text-[15px]'>
+                          <span className='font-medium text-base'>
                             {membership.credentialSetName}
                           </span>
-                          <span className='text-[14px] text-[var(--text-muted)]'>
+                          <span className='text-[var(--text-muted)] text-sm'>
                             {membership.organizationName}
                           </span>
                         </div>
@@ -724,17 +718,15 @@ export function CredentialSets() {
                 (filteredOwnedSets.length > 0 ||
                   ownedSetsLoading ||
                   (!searchTerm.trim() && ownedSets.length === 0)) && (
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                      Manage
-                    </div>
+                  <div className='flex flex-col gap-2'>
+                    <div className='font-medium text-[var(--text-secondary)] text-sm'>Manage</div>
                     {ownedSetsLoading ? (
                       <>
                         {[1, 2].map((i) => (
                           <div key={i} className='flex items-center justify-between'>
-                            <div className='flex items-center gap-[12px]'>
-                              <Skeleton className='h-9 w-9 rounded-[6px]' />
-                              <div className='flex flex-col gap-[4px]'>
+                            <div className='flex items-center gap-3'>
+                              <Skeleton className='h-9 w-9 rounded-md' />
+                              <div className='flex flex-col gap-1'>
                                 <Skeleton className='h-[14px] w-[120px]' />
                                 <Skeleton className='h-[12px] w-[80px]' />
                               </div>
@@ -743,24 +735,24 @@ export function CredentialSets() {
                         ))}
                       </>
                     ) : !searchTerm.trim() && ownedSets.length === 0 ? (
-                      <div className='text-[14px] text-[var(--text-muted)]'>
+                      <div className='text-[var(--text-muted)] text-sm'>
                         No polling groups created yet
                       </div>
                     ) : (
                       filteredOwnedSets.map((set) => (
                         <div key={set.id} className='flex items-center justify-between'>
-                          <div className='flex items-center gap-[12px]'>
-                            <div className='flex h-9 w-9 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                          <div className='flex items-center gap-3'>
+                            <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                               {getProviderIcon(set.providerId)}
                             </div>
                             <div className='flex flex-col'>
-                              <span className='font-medium text-[15px]'>{set.name}</span>
-                              <span className='text-[14px] text-[var(--text-muted)]'>
+                              <span className='font-medium text-base'>{set.name}</span>
+                              <span className='text-[var(--text-muted)] text-sm'>
                                 {set.memberCount} member{set.memberCount !== 1 ? 's' : ''}
                               </span>
                             </div>
                           </div>
-                          <div className='flex items-center gap-[8px]'>
+                          <div className='flex items-center gap-2'>
                             <Button variant='default' onClick={() => setViewingSet(set)}>
                               Details
                             </Button>
@@ -786,8 +778,8 @@ export function CredentialSets() {
         <ModalContent size='sm'>
           <ModalHeader>Create Polling Group</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex flex-col gap-[4px]'>
+            <div className='flex flex-col gap-3'>
+              <div className='flex flex-col gap-1'>
                 <Label>Name</Label>
                 <Input
                   value={newSetName}
@@ -798,7 +790,7 @@ export function CredentialSets() {
                   placeholder='e.g., Marketing Team'
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
+              <div className='flex flex-col gap-1'>
                 <Label>Description (optional)</Label>
                 <Input
                   value={newSetDescription}
@@ -806,16 +798,16 @@ export function CredentialSets() {
                   placeholder='e.g., Poll emails for marketing automations'
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
+              <div className='flex flex-col gap-1'>
                 <Label>Email Provider</Label>
-                <div className='inline-flex gap-[2px]'>
+                <div className='inline-flex gap-0.5'>
                   <Button
                     variant={newSetProvider === 'google-email' ? 'active' : 'default'}
                     onClick={() => setNewSetProvider('google-email')}
                     className={cn(
-                      'rounded-r-none px-[8px] py-[4px] text-[13px]',
+                      'rounded-r-none px-2 py-1 text-small',
                       newSetProvider === 'google-email' &&
-                        'bg-[var(--border-1)] hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
+                        'bg-[var(--border-1)] hover-hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover-hover:bg-[var(--border-1)]'
                     )}
                   >
                     Gmail
@@ -824,19 +816,19 @@ export function CredentialSets() {
                     variant={newSetProvider === 'outlook' ? 'active' : 'default'}
                     onClick={() => setNewSetProvider('outlook')}
                     className={cn(
-                      'rounded-l-none px-[8px] py-[4px] text-[13px]',
+                      'rounded-l-none px-2 py-1 text-small',
                       newSetProvider === 'outlook' &&
-                        'bg-[var(--border-1)] hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
+                        'bg-[var(--border-1)] hover-hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover-hover:bg-[var(--border-1)]'
                     )}
                   >
                     Outlook
                   </Button>
                 </div>
-                <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
+                <p className='mt-1 text-[var(--text-tertiary)] text-xs'>
                   Members will connect their {getProviderDisplayName(newSetProvider)} account
                 </p>
               </div>
-              {createError && <p className='text-[13px] text-[var(--text-error)]'>{createError}</p>}
+              {createError && <p className='text-[var(--text-error)] text-small'>{createError}</p>}
             </div>
           </ModalBody>
           <ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
index 0b7f25ef0d..3282397856 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
@@ -8,12 +8,12 @@ const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto] items-c
 export function CredentialSkeleton() {
   return (
     <div className={GRID_COLS}>
-      <Skeleton className='h-9 rounded-[6px]' />
+      <Skeleton className='h-9 rounded-md' />
       <div />
-      <Skeleton className='h-9 rounded-[6px]' />
-      <div className='ml-[8px] flex items-center gap-0'>
-        <Skeleton className='h-9 w-9 rounded-[6px]' />
-        <Skeleton className='h-9 w-9 rounded-[6px]' />
+      <Skeleton className='h-9 rounded-md' />
+      <div className='ml-2 flex items-center gap-0'>
+        <Skeleton className='h-9 w-9 rounded-md' />
+        <Skeleton className='h-9 w-9 rounded-md' />
       </div>
     </div>
   )
@@ -24,19 +24,19 @@ export function CredentialSkeleton() {
  */
 export function CredentialsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[56px] rounded-[6px]' />
-        <Skeleton className='h-[30px] w-[50px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[56px] rounded-md' />
+        <Skeleton className='h-[30px] w-[50px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-5 w-[70px]' />
-        <div className='text-[13px] text-[var(--text-muted)]'>
+        <div className='text-[var(--text-muted)] text-small'>
           <Skeleton className='h-5 w-[160px]' />
         </div>
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-5 w-[55px]' />
         <CredentialSkeleton />
         <CredentialSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
index 042ece2125..21ae97ca04 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
@@ -174,7 +174,7 @@ function WorkspaceVariableRow({
         variant='default'
         onClick={() => onViewDetails(envKey)}
         disabled={!hasCredential}
-        className={`ml-[8px] h-9 ${!hasCredential ? 'opacity-40' : ''}`}
+        className={`ml-2 h-9 ${!hasCredential ? 'opacity-40' : ''}`}
       >
         Details
       </Button>
@@ -246,7 +246,7 @@ function NewWorkspaceVariableRow({ envVar, index, onUpdate }: NewWorkspaceVariab
       </Tooltip.Root>
       {keyError && (
         <div
-          className={`${COL_SPAN_ALL} mt-[-4px] text-[12px] text-[var(--text-error)] leading-tight`}
+          className={`${COL_SPAN_ALL} mt-[-4px] text-[var(--text-error)] text-caption leading-tight`}
         >
           {keyError}
         </div>
@@ -1046,7 +1046,7 @@ export function CredentialsManager() {
               variant='default'
               onClick={() => handleViewDetails(envVar.key, 'env_personal')}
               disabled={!hasCredential}
-              className={`ml-[8px] h-9 ${!hasCredential ? 'opacity-40' : ''}`}
+              className={`ml-2 h-9 ${!hasCredential ? 'opacity-40' : ''}`}
             >
               Details
             </Button>
@@ -1066,14 +1066,14 @@ export function CredentialsManager() {
           </Tooltip.Root>
           {keyError && (
             <div
-              className={`${COL_SPAN_ALL} mt-[-4px] text-[12px] text-[var(--text-error)] leading-tight`}
+              className={`${COL_SPAN_ALL} mt-[-4px] text-[var(--text-error)] text-caption leading-tight`}
             >
               {keyError}
             </div>
           )}
           {isConflict && !keyError && (
             <div
-              className={`${COL_SPAN_ALL} mt-[-4px] text-[12px] text-[var(--text-error)] leading-tight`}
+              className={`${COL_SPAN_ALL} mt-[-4px] text-[var(--text-error)] text-caption leading-tight`}
             >
               Workspace variable with the same name overrides this. Rename your personal key to use
               it.
@@ -1101,16 +1101,16 @@ export function CredentialsManager() {
   if (selectedCredential) {
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
+        <div className='flex h-full flex-col gap-4.5'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[18px]'>
-              <div className='flex items-center gap-[10px] border-[var(--border)] border-b pb-[12px]'>
-                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[8px] bg-[var(--surface-5)]'>
+            <div className='flex flex-col gap-4.5'>
+              <div className='flex items-center gap-2.5 border-[var(--border)] border-b pb-3'>
+                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
                   <Key className='h-[18px] w-[18px] text-[var(--text-tertiary)]' />
                 </div>
                 <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <p className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                  <div className='flex items-center gap-2'>
+                    <p className='truncate font-medium text-[var(--text-primary)] text-base'>
                       {selectedCredential.envKey || selectedCredential.displayName}
                     </p>
                     <Badge variant='gray-secondary' size='sm'>
@@ -1122,7 +1122,7 @@ export function CredentialsManager() {
                       </Badge>
                     )}
                   </div>
-                  <p className='text-[13px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-small'>
                     {selectedCredential.type === 'env_personal'
                       ? 'Personal secret'
                       : 'Workspace secret'}
@@ -1130,8 +1130,8 @@ export function CredentialsManager() {
                 </div>
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='flex items-center gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='flex items-center gap-1.5'>
                   Display Name
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
@@ -1167,7 +1167,7 @@ export function CredentialsManager() {
                 />
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
                 <Label>Description</Label>
                 <Textarea
                   id='credential-description'
@@ -1183,42 +1183,42 @@ export function CredentialsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[13px] text-[var(--status-red)]'>
+                <div className='rounded-lg border border-[color-mix(in_srgb,var(--status-red)_40%,transparent)] bg-[color-mix(in_srgb,var(--status-red)_10%,transparent)] px-2.5 py-2 text-[var(--status-red)] text-small'>
                   {detailsError}
                 </div>
               )}
 
-              <div className='flex flex-col gap-[6px] border-[var(--border)] border-t pt-[16px]'>
+              <div className='flex flex-col gap-1.5 border-[var(--border)] border-t pt-4'>
                 <Label>Members ({activeMembers.length})</Label>
 
                 {membersLoading ? (
-                  <div className='flex flex-col gap-[8px]'>
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
+                  <div className='flex flex-col gap-2'>
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
                   </div>
                 ) : (
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     {activeMembers.map((member) => (
                       <div
                         key={member.id}
-                        className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px]'
+                        className='grid grid-cols-[1fr_120px_72px] items-center gap-2'
                       >
-                        <div className='flex min-w-0 items-center gap-[10px]'>
+                        <div className='flex min-w-0 items-center gap-2.5'>
                           <Avatar className='h-8 w-8 flex-shrink-0'>
                             <AvatarFallback
                               style={{
                                 background: getUserColor(member.userId || member.userEmail || ''),
                               }}
-                              className='border-0 text-[13px] text-white'
+                              className='border-0 text-small text-white'
                             >
                               {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
                             </AvatarFallback>
                           </Avatar>
                           <div className='min-w-0'>
-                            <p className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                            <p className='truncate font-medium text-[var(--text-primary)] text-sm'>
                               {member.userName || member.userEmail || member.userId}
                             </p>
-                            <p className='truncate text-[12px] text-[var(--text-tertiary)]'>
+                            <p className='truncate text-[var(--text-tertiary)] text-caption'>
                               {member.userEmail || member.userId}
                             </p>
                           </div>
@@ -1264,7 +1264,7 @@ export function CredentialsManager() {
                       </div>
                     ))}
                     {isSelectedAdmin && (
-                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px] border-[var(--border)] border-t pt-[8px]'>
+                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-2 border-[var(--border)] border-t pt-2'>
                         <Combobox
                           options={workspaceUserOptions}
                           value={
@@ -1307,8 +1307,8 @@ export function CredentialsManager() {
             </div>
           </div>
 
-          <div className='mt-auto flex items-center justify-end border-[var(--border)] border-t pt-[10px]'>
-            <div className='flex items-center gap-[8px]'>
+          <div className='mt-auto flex items-center justify-end border-[var(--border)] border-t pt-2.5'>
+            <div className='flex items-center gap-2'>
               <Button onClick={handleBackAttempt} variant='default'>
                 Back
               </Button>
@@ -1369,7 +1369,7 @@ export function CredentialsManager() {
   // List view
   return (
     <>
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-4'>
         <div className='hidden'>
           <input
             type='text'
@@ -1393,8 +1393,8 @@ export function CredentialsManager() {
             readOnly
           />
         </div>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1431,36 +1431,36 @@ export function CredentialsManager() {
         </div>
 
         <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[16px]'>
+          <div className='flex flex-col gap-4'>
             {isLoading ? (
               <>
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Skeleton className='h-5 w-[70px]' />
-                  <div className='text-[13px] text-[var(--text-muted)]'>
+                  <div className='text-[var(--text-muted)] text-small'>
                     <Skeleton className='h-5 w-[160px]' />
                   </div>
                 </div>
-                <div className={`${GRID_COLS} gap-y-[8px]`}>
+                <div className={`${GRID_COLS} gap-y-2`}>
                   <Skeleton className={`${COL_SPAN_ALL} h-5 w-[55px]`} />
                   {Array.from({ length: 2 }, (_, i) => (
                     <div key={`personal-${i}`} className='contents'>
-                      <Skeleton className='h-9 rounded-[6px]' />
+                      <Skeleton className='h-9 rounded-md' />
                       <div />
-                      <Skeleton className='h-9 rounded-[6px]' />
-                      <Skeleton className='ml-[8px] h-9 w-[60px] rounded-[6px]' />
-                      <Skeleton className='h-9 w-9 rounded-[6px]' />
+                      <Skeleton className='h-9 rounded-md' />
+                      <Skeleton className='ml-2 h-9 w-[60px] rounded-md' />
+                      <Skeleton className='h-9 w-9 rounded-md' />
                     </div>
                   ))}
                 </div>
               </>
             ) : (
-              <div className={`${GRID_COLS} gap-y-[8px]`}>
+              <div className={`${GRID_COLS} gap-y-2`}>
                 {(!searchTerm.trim() ||
                   filteredWorkspaceEntries.length > 0 ||
                   filteredNewWorkspaceRows.length > 0) && (
                   <>
                     <div
-                      className={`${COL_SPAN_ALL} font-medium text-[13px] text-[var(--text-secondary)]`}
+                      className={`${COL_SPAN_ALL} font-medium text-[var(--text-secondary)] text-small`}
                     >
                       Workspace
                     </div>
@@ -1500,7 +1500,7 @@ export function CredentialsManager() {
                 {(!searchTerm.trim() || filteredEnvVars.length > 0) && (
                   <>
                     <div
-                      className={`${COL_SPAN_ALL} font-medium text-[13px] text-[var(--text-secondary)]`}
+                      className={`${COL_SPAN_ALL} font-medium text-[var(--text-secondary)] text-small`}
                     >
                       Personal
                     </div>
@@ -1519,7 +1519,7 @@ export function CredentialsManager() {
                     Object.keys(workspaceVars).length > 0 ||
                     newWorkspaceRows.length > 0) && (
                     <div
-                      className={`${COL_SPAN_ALL} py-[16px] text-center text-[13px] text-[var(--text-muted)]`}
+                      className={`${COL_SPAN_ALL} py-4 text-center text-[var(--text-muted)] text-small`}
                     >
                       No secrets found matching &ldquo;{searchTerm}&rdquo;
                     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
index 097ea1e39a..93f2895d76 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
@@ -5,14 +5,14 @@ import { Skeleton } from '@/components/emcn'
  */
 export function CustomToolSkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
         <Skeleton className='h-[14px] w-[100px]' />
         <Skeleton className='h-[13px] w-[200px]' />
       </div>
-      <div className='flex flex-shrink-0 items-center gap-[8px]'>
-        <Skeleton className='h-[30px] w-[40px] rounded-[4px]' />
-        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
+      <div className='flex flex-shrink-0 items-center gap-2'>
+        <Skeleton className='h-[30px] w-[40px] rounded-sm' />
+        <Skeleton className='h-[30px] w-[54px] rounded-sm' />
       </div>
     </div>
   )
@@ -23,12 +23,12 @@ export function CustomToolSkeleton() {
  */
 export function CustomToolsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[64px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <CustomToolSkeleton />
         <CustomToolSkeleton />
         <CustomToolSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
index 1939170155..3d55993f12 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
@@ -86,9 +86,9 @@ export function CustomTools() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -102,43 +102,43 @@ export function CustomTools() {
             />
           </div>
           <Button onClick={() => setShowAddForm(true)} disabled={isLoading} variant='primary'>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load tools'}
               </p>
             </div>
           ) : isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <CustomToolSkeleton />
               <CustomToolSkeleton />
               <CustomToolSkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Add" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredTools.map((tool) => (
-                <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={tool.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[15px]'>
+                    <span className='truncate font-medium text-base'>
                       {tool.title || 'Unnamed Tool'}
                     </span>
                     {tool.schema?.function?.description && (
-                      <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                      <p className='truncate text-[var(--text-muted)] text-sm'>
                         {tool.schema.function.description}
                       </p>
                     )}
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     <Button variant='default' onClick={() => setEditingTool(tool.id)}>
                       Edit
                     </Button>
@@ -153,7 +153,7 @@ export function CustomTools() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No tools found matching "{searchTerm}"
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
index 037ada7b28..e58ef57af1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
@@ -6,11 +6,11 @@ import { Skeleton } from '@/components/emcn'
  */
 export function GeneralSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[12px]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-3'>
         <Skeleton className='h-9 w-9 rounded-full' />
         <div className='flex flex-1 flex-col justify-center gap-[1px]'>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             <Skeleton className='h-5 w-24' />
             <Skeleton className='h-[10.5px] w-[10.5px]' />
           </div>
@@ -18,9 +18,9 @@ export function GeneralSkeleton() {
         </div>
       </div>
 
-      <div className='flex items-center justify-between border-b pb-[12px]'>
+      <div className='flex items-center justify-between border-b pb-3'>
         <Skeleton className='h-4 w-12' />
-        <Skeleton className='h-8 w-[100px] rounded-[4px]' />
+        <Skeleton className='h-8 w-[100px] rounded-sm' />
       </div>
 
       <div className='flex items-center justify-between'>
@@ -35,7 +35,7 @@ export function GeneralSkeleton() {
 
       <div className='flex items-center justify-between'>
         <Skeleton className='h-4 w-20' />
-        <Skeleton className='h-8 w-[100px] rounded-[4px]' />
+        <Skeleton className='h-8 w-[100px] rounded-sm' />
       </div>
 
       <div className='flex items-center justify-between'>
@@ -43,20 +43,20 @@ export function GeneralSkeleton() {
         <Skeleton className='h-[17px] w-[30px] rounded-full' />
       </div>
 
-      <div className='flex items-center justify-between border-t pt-[16px]'>
+      <div className='flex items-center justify-between border-t pt-4'>
         <Skeleton className='h-4 w-44' />
         <Skeleton className='h-[17px] w-[30px] rounded-full' />
       </div>
 
-      <div className='-mt-[8px] flex flex-col gap-1'>
+      <div className='-mt-2 flex flex-col gap-1'>
         <Skeleton className='h-[12px] w-full' />
         <Skeleton className='h-[12px] w-4/5' />
       </div>
 
-      <div className='mt-auto flex items-center gap-[8px]'>
-        <Skeleton className='h-8 w-20 rounded-[4px]' />
-        <Skeleton className='h-8 w-28 rounded-[4px]' />
-        <Skeleton className='ml-auto h-8 w-24 rounded-[4px]' />
+      <div className='mt-auto flex items-center gap-2'>
+        <Skeleton className='h-8 w-20 rounded-sm' />
+        <Skeleton className='h-8 w-28 rounded-sm' />
+        <Skeleton className='ml-auto h-8 w-24 rounded-sm' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index b1641aa8c1..2c3f437224 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -251,12 +251,12 @@ export function General() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* User Info Section */}
-      <div className='flex items-center gap-[12px]'>
+      <div className='flex items-center gap-3'>
         <div className='relative'>
           <div
-            className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-all hover:bg-[var(--bg)] ${!imageUrl ? 'border border-[var(--border)]' : ''}`}
+            className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-all hover-hover:bg-[var(--bg)] ${!imageUrl ? 'border border-[var(--border)]' : ''}`}
             onClick={handleProfilePictureClick}
           >
             {(() => {
@@ -275,7 +275,7 @@ export function General() {
                 )
               }
               return (
-                <span className='font-medium text-[15px] text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-primary)] text-base'>
                   {getInitials(profile?.name) || ''}
                 </span>
               )
@@ -302,12 +302,12 @@ export function General() {
           />
         </div>
         <div className='flex flex-1 flex-col justify-center gap-[1px]'>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             {isEditingName ? (
               <>
                 <div className='relative inline-flex'>
                   <span
-                    className='invisible whitespace-pre font-medium text-[15px]'
+                    className='invisible whitespace-pre font-medium text-base'
                     aria-hidden='true'
                   >
                     {name || '\u00A0'}
@@ -318,7 +318,7 @@ export function General() {
                     onChange={(e) => setName(e.target.value)}
                     onKeyDown={handleKeyDown}
                     onBlur={handleInputBlur}
-                    className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 font-medium text-[15px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 font-medium text-base outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                     maxLength={100}
                     disabled={updateProfile.isPending}
                     autoComplete='off'
@@ -339,7 +339,7 @@ export function General() {
               </>
             ) : (
               <>
-                <h3 className='font-medium text-[15px]'>{profile?.name || ''}</h3>
+                <h3 className='font-medium text-base'>{profile?.name || ''}</h3>
                 <Button
                   variant='ghost'
                   className='h-[10.5px] w-[10.5px] flex-shrink-0 p-0'
@@ -351,12 +351,12 @@ export function General() {
               </>
             )}
           </div>
-          <p className='text-[14px] text-[var(--text-tertiary)]'>{profile?.email || ''}</p>
+          <p className='text-[var(--text-tertiary)] text-sm'>{profile?.email || ''}</p>
         </div>
       </div>
-      {uploadError && <p className='text-[14px] text-[var(--text-error)]'>{uploadError}</p>}
+      {uploadError && <p className='text-[var(--text-error)] text-sm'>{uploadError}</p>}
 
-      <div className='flex items-center justify-between border-b pb-[12px]'>
+      <div className='flex items-center justify-between border-b pb-3'>
         <Label htmlFor='theme-select'>Theme</Label>
         <div className='w-[100px]'>
           <Combobox
@@ -376,7 +376,7 @@ export function General() {
       </div>
 
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <Label htmlFor='auto-connect'>Auto-connect on drop</Label>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
@@ -400,7 +400,7 @@ export function General() {
       </div>
 
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <Label htmlFor='error-notifications'>Canvas error notifications</Label>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
@@ -453,7 +453,7 @@ export function General() {
         />
       </div>
 
-      <div className='flex items-center justify-between border-t pt-[16px]'>
+      <div className='flex items-center justify-between border-t pt-4'>
         <Label htmlFor='telemetry'>Allow anonymous telemetry</Label>
         <Switch
           id='telemetry'
@@ -462,7 +462,7 @@ export function General() {
         />
       </div>
 
-      <p className='-mt-[8px] text-[13px] text-[var(--text-muted)]'>
+      <p className='-mt-2 text-[var(--text-muted)] text-small'>
         We use OpenTelemetry to collect anonymous usage data to improve Sim. You can opt-out at any
         time.
       </p>
@@ -478,7 +478,7 @@ export function General() {
         </div>
       )}
 
-      <div className='mt-auto flex items-center gap-[8px]'>
+      <div className='mt-auto flex items-center gap-2'>
         {!isAuthDisabled && (
           <>
             <Button onClick={handleSignOut} variant='active'>
@@ -511,7 +511,7 @@ export function General() {
               Click the link in the email to create a new password.
             </p>
             {resetPassword.error && (
-              <p className='mt-[8px] text-[13px] text-[var(--text-error)]'>
+              <p className='mt-2 text-[var(--text-error)] text-small'>
                 {resetPassword.error.message}
               </p>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
index 7d2d266491..34bd8694fc 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
@@ -65,11 +65,9 @@ export function InboxEnableToggle() {
   return (
     <>
       <div className='flex items-center justify-between'>
-        <div className='flex flex-col gap-[2px]'>
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-            Enable email inbox
-          </span>
-          <span className='text-[13px] text-[var(--text-muted)]'>
+        <div className='flex flex-col gap-0.5'>
+          <span className='font-medium text-[var(--text-primary)] text-sm'>Enable email inbox</span>
+          <span className='text-[var(--text-muted)] text-small'>
             Allow this workspace to receive tasks via email
           </span>
         </div>
@@ -88,8 +86,8 @@ export function InboxEnableToggle() {
               An email address will be created for this workspace. Anyone in the allowed senders
               list can email it to create tasks.
             </p>
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='mt-4 flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>
                 Custom email prefix (optional)
               </p>
               <EmcnInput
@@ -99,7 +97,7 @@ export function InboxEnableToggle() {
                 className='h-9'
                 autoFocus
               />
-              <p className='text-[12px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-caption'>
                 Leave blank for an auto-generated address.
               </p>
             </div>
@@ -130,7 +128,7 @@ export function InboxEnableToggle() {
               ? Any emails sent to this address after disabling will not be delivered.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
-            <p className='mt-[8px] text-[var(--text-secondary)]'>
+            <p className='mt-2 text-[var(--text-secondary)]'>
               Your existing conversations and task history will be preserved.
             </p>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
index 71d3ed6c31..93bcf2f98a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
@@ -96,17 +96,15 @@ export function InboxSettingsTab() {
 
   return (
     <>
-      <div className='flex flex-col gap-[24px]'>
+      <div className='flex flex-col gap-6'>
         {config?.address && (
-          <div className='flex flex-col gap-[6px]'>
-            <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Sim&apos;s email
-            </div>
+          <div className='flex flex-col gap-1.5'>
+            <div className='font-medium text-[var(--text-secondary)] text-sm'>Sim&apos;s email</div>
             <div className='flex items-center justify-between'>
-              <p className='text-[13px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-small'>
                 Send emails here to create tasks.
               </p>
-              <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-1.5'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <button
@@ -150,22 +148,20 @@ export function InboxSettingsTab() {
             <EmcnInput
               value={config.address}
               readOnly
-              className='h-9 cursor-default font-mono text-[13px]'
+              className='h-9 cursor-default font-mono text-small'
             />
           </div>
         )}
 
-        <div className='flex flex-col gap-[6px]'>
-          <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-            Allowed senders
-          </div>
-          <p className='text-[13px] text-[var(--text-muted)]'>
+        <div className='flex flex-col gap-1.5'>
+          <div className='font-medium text-[var(--text-secondary)] text-sm'>Allowed senders</div>
+          <p className='text-[var(--text-muted)] text-small'>
             Only emails from these addresses can create tasks.
           </p>
 
-          <div className='mt-[4px] flex flex-col gap-[1px] overflow-hidden rounded-[8px] border border-[var(--border)]'>
+          <div className='mt-1 flex flex-col gap-[1px] overflow-hidden rounded-lg border border-[var(--border)]'>
             {sendersLoading ? (
-              <div className='px-[12px] py-[10px]'>
+              <div className='px-3 py-2.5'>
                 <Skeleton className='h-[16px] w-[200px]' />
               </div>
             ) : (
@@ -173,11 +169,11 @@ export function InboxSettingsTab() {
                 {sendersData?.workspaceMembers.map((member) => (
                   <div
                     key={member.email}
-                    className='flex items-center justify-between border-[var(--border)] border-b px-[12px] py-[10px] last:border-b-0'
+                    className='flex items-center justify-between border-[var(--border)] border-b px-3 py-2.5 last:border-b-0'
                   >
-                    <div className='flex items-center gap-[8px]'>
-                      <span className='text-[13px] text-[var(--text-primary)]'>{member.email}</span>
-                      <Badge variant='gray' className='text-[11px]'>
+                    <div className='flex items-center gap-2'>
+                      <span className='text-[var(--text-primary)] text-small'>{member.email}</span>
+                      <Badge variant='gray' className='text-xs'>
                         member
                       </Badge>
                     </div>
@@ -187,19 +183,19 @@ export function InboxSettingsTab() {
                 {sendersData?.senders.map((sender) => (
                   <div
                     key={sender.id}
-                    className='flex items-center justify-between border-[var(--border)] border-b px-[12px] py-[10px] last:border-b-0'
+                    className='flex items-center justify-between border-[var(--border)] border-b px-3 py-2.5 last:border-b-0'
                   >
-                    <div className='flex items-center gap-[8px]'>
-                      <span className='text-[13px] text-[var(--text-primary)]'>{sender.email}</span>
+                    <div className='flex items-center gap-2'>
+                      <span className='text-[var(--text-primary)] text-small'>{sender.email}</span>
                       {sender.label && (
-                        <span className='text-[12px] text-[var(--text-muted)]'>
+                        <span className='text-[var(--text-muted)] text-caption'>
                           ({sender.label})
                         </span>
                       )}
                     </div>
                     <Button
                       variant='ghost'
-                      className='h-[28px] w-[28px] p-0 text-[var(--text-muted)] hover:text-[var(--text-error)]'
+                      className='h-[28px] w-[28px] p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
                       onClick={() => handleRemoveSender(sender.id)}
                     >
                       <Trash2 className='h-[14px] w-[14px]' />
@@ -209,7 +205,7 @@ export function InboxSettingsTab() {
 
                 {sendersData?.workspaceMembers.length === 0 &&
                   sendersData?.senders.length === 0 && (
-                    <div className='px-[12px] py-[10px] text-[13px] text-[var(--text-muted)]'>
+                    <div className='px-3 py-2.5 text-[var(--text-muted)] text-small'>
                       No allowed senders configured.
                     </div>
                   )}
@@ -218,14 +214,14 @@ export function InboxSettingsTab() {
           </div>
 
           {removeSenderError && (
-            <p className='px-[12px] text-[13px] text-[var(--text-error)] leading-tight'>
+            <p className='px-3 text-[var(--text-error)] text-small leading-tight'>
               {removeSenderError}
             </p>
           )}
 
           <Button
             variant='ghost'
-            className='mt-[4px] w-fit'
+            className='mt-1 w-fit'
             onClick={() => {
               setNewSenderEmail('')
               setNewSenderLabel('')
@@ -233,7 +229,7 @@ export function InboxSettingsTab() {
               setIsAddSenderOpen(true)
             }}
           >
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add sender
           </Button>
         </div>
@@ -243,11 +239,9 @@ export function InboxSettingsTab() {
         <ModalContent size='sm'>
           <ModalHeader>Add allowed sender</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex flex-col gap-[4px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Email address
-                </p>
+            <div className='flex flex-col gap-3'>
+              <div className='flex flex-col gap-1'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Email address</p>
                 <EmcnInput
                   value={newSenderEmail}
                   onChange={(e) => {
@@ -259,10 +253,8 @@ export function InboxSettingsTab() {
                   autoFocus
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Label (optional)
-                </p>
+              <div className='flex flex-col gap-1'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Label (optional)</p>
                 <EmcnInput
                   value={newSenderLabel}
                   onChange={(e) => setNewSenderLabel(e.target.value)}
@@ -271,7 +263,7 @@ export function InboxSettingsTab() {
                 />
               </div>
               {addSenderError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+                <p className='text-[var(--text-error)] text-small leading-tight'>
                   {addSenderError}
                 </p>
               )}
@@ -302,10 +294,8 @@ export function InboxSettingsTab() {
                 The old address will stop receiving emails immediately.
               </span>
             </p>
-            <div className='mt-[16px] flex flex-col gap-[4px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                New email prefix
-              </p>
+            <div className='mt-4 flex flex-col gap-1'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>New email prefix</p>
               <EmcnInput
                 value={newUsername}
                 onChange={(e) => {
@@ -317,7 +307,7 @@ export function InboxSettingsTab() {
                 autoFocus
               />
               {editAddressError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+                <p className='text-[var(--text-error)] text-small leading-tight'>
                   {editAddressError}
                 </p>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
index b65710925d..70768951c2 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
@@ -5,7 +5,7 @@ import { Skeleton } from '@/components/emcn'
  */
 export function InboxTaskSkeleton() {
   return (
-    <div className='flex flex-col gap-[4px] rounded-[8px] border border-[var(--border)] p-[12px]'>
+    <div className='flex flex-col gap-1 rounded-lg border border-[var(--border)] p-3'>
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[14px] w-[200px]' />
         <Skeleton className='h-[14px] w-[50px]' />
@@ -24,29 +24,29 @@ export function InboxTaskSkeleton() {
  */
 export function InboxSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <Skeleton className='h-[32px] w-full rounded-[8px]' />
-      <Skeleton className='h-[20px] w-[140px] rounded-[4px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
-      <div className='flex flex-col gap-[6px]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <Skeleton className='h-[32px] w-full rounded-lg' />
+      <Skeleton className='h-[20px] w-[140px] rounded-sm' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
+      <div className='flex flex-col gap-1.5'>
         <Skeleton className='h-[14px] w-[100px]' />
         <Skeleton className='h-[13px] w-[200px]' />
-        <Skeleton className='h-[40px] w-full rounded-[8px]' />
+        <Skeleton className='h-[40px] w-full rounded-lg' />
       </div>
-      <div className='flex flex-col gap-[6px]'>
+      <div className='flex flex-col gap-1.5'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[13px] w-[250px]' />
-        <Skeleton className='h-[80px] w-full rounded-[8px]' />
+        <Skeleton className='h-[80px] w-full rounded-lg' />
       </div>
-      <div className='border-[var(--border)] border-t pt-[16px]'>
+      <div className='border-[var(--border)] border-t pt-4'>
         <Skeleton className='h-[14px] w-[40px]' />
-        <Skeleton className='mt-[2px] h-[13px] w-[220px]' />
+        <Skeleton className='mt-0.5 h-[13px] w-[220px]' />
       </div>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[100px] rounded-[6px]' />
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[100px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <InboxTaskSkeleton />
         <InboxTaskSkeleton />
         <InboxTaskSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
index d3cce09a89..69276930a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
@@ -73,9 +73,9 @@ export function InboxTaskList() {
   )
 
   return (
-    <div className='flex flex-col gap-[12px]'>
-      <div className='flex items-center gap-[8px]'>
-        <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+    <div className='flex flex-col gap-3'>
+      <div className='flex items-center gap-2'>
+        <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
           <Search
             className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
             strokeWidth={2}
@@ -91,7 +91,7 @@ export function InboxTaskList() {
           <DropdownMenuTrigger asChild>
             <Button
               variant='ghost'
-              className='h-[32px] gap-[4px] px-[8px] text-[13px] text-[var(--text-secondary)]'
+              className='h-[32px] gap-1 px-2 text-[var(--text-secondary)] text-small'
             >
               {STATUS_OPTIONS.find((o) => o.value === statusFilter)?.label ?? 'All statuses'}
               <ChevronDown className='h-[12px] w-[12px]' />
@@ -111,13 +111,13 @@ export function InboxTaskList() {
 
       <div className='min-h-0 flex-1 overflow-y-auto'>
         {isLoading ? (
-          <div className='flex flex-col gap-[4px]'>
+          <div className='flex flex-col gap-1'>
             {Array.from({ length: 3 }).map((_, i) => (
               <InboxTaskSkeleton key={i} />
             ))}
           </div>
         ) : filteredTasks.length === 0 ? (
-          <div className='flex h-[200px] items-center justify-center text-[14px] text-[var(--text-muted)]'>
+          <div className='flex h-[200px] items-center justify-center text-[var(--text-muted)] text-sm'>
             {searchTerm.trim()
               ? `No tasks matching "${searchTerm}"`
               : config?.address
@@ -125,7 +125,7 @@ export function InboxTaskList() {
                 : 'No email tasks yet.'}
           </div>
         ) : (
-          <div className='flex flex-col gap-[4px]'>
+          <div className='flex flex-col gap-1'>
             {filteredTasks.map((task) => {
               const statusBadge = STATUS_BADGES[task.status] || STATUS_BADGES.received
               const isClickable =
@@ -133,8 +133,8 @@ export function InboxTaskList() {
               return (
                 <div
                   key={task.id}
-                  className={`flex flex-col gap-[4px] rounded-[8px] border border-[var(--border)] p-[12px] transition-colors ${
-                    isClickable ? 'cursor-pointer hover:bg-[var(--surface-2)]' : ''
+                  className={`flex flex-col gap-1 rounded-lg border border-[var(--border)] p-3 transition-colors ${
+                    isClickable ? 'cursor-pointer hover-hover:bg-[var(--surface-2)]' : ''
                   }`}
                   role={isClickable ? 'button' : undefined}
                   tabIndex={isClickable ? 0 : undefined}
@@ -147,41 +147,41 @@ export function InboxTaskList() {
                   }}
                 >
                   <div className='flex items-center justify-between'>
-                    <span className='max-w-[70%] truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                    <span className='max-w-[70%] truncate font-medium text-[var(--text-primary)] text-sm'>
                       {task.subject}
                     </span>
-                    <div className='flex items-center gap-[6px]'>
+                    <div className='flex items-center gap-1.5'>
                       {task.hasAttachments && (
                         <Paperclip className='h-[12px] w-[12px] text-[var(--text-muted)]' />
                       )}
-                      <span className='whitespace-nowrap text-[12px] text-[var(--text-muted)]'>
+                      <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
                         {formatRelativeTime(task.createdAt)}
                       </span>
                     </div>
                   </div>
                   <div className='flex items-center justify-between'>
-                    <span className='max-w-[60%] truncate text-[12px] text-[var(--text-muted)]'>
+                    <span className='max-w-[60%] truncate text-[var(--text-muted)] text-caption'>
                       {task.fromName || task.fromEmail}
                     </span>
-                    <Badge variant={statusBadge.variant} className='text-[11px]'>
+                    <Badge variant={statusBadge.variant} className='text-xs'>
                       {task.status === 'processing' && (
-                        <span className='mr-[4px] inline-block h-[6px] w-[6px] animate-pulse rounded-full bg-yellow-500' />
+                        <span className='mr-1 inline-block h-[6px] w-[6px] animate-pulse rounded-full bg-yellow-500' />
                       )}
                       {statusBadge.label}
                     </Badge>
                   </div>
                   {task.status === 'rejected' && task.rejectionReason && (
-                    <span className='text-[12px] text-[var(--text-muted)] line-through'>
+                    <span className='text-[var(--text-muted)] text-caption line-through'>
                       {formatRejectionReason(task.rejectionReason)}
                     </span>
                   )}
                   {task.status === 'failed' && task.errorMessage && (
-                    <span className='truncate text-[12px] text-[var(--text-error)]'>
+                    <span className='truncate text-[var(--text-error)] text-caption'>
                       {task.errorMessage}
                     </span>
                   )}
                   {task.status === 'completed' && task.resultSummary && (
-                    <span className='truncate text-[12px] text-[var(--text-muted)]'>
+                    <span className='truncate text-[var(--text-muted)] text-caption'>
                       {task.resultSummary}
                     </span>
                   )}
@@ -189,7 +189,7 @@ export function InboxTaskList() {
                     task.status !== 'failed' &&
                     task.status !== 'rejected' &&
                     task.bodyPreview && (
-                      <span className='truncate text-[12px] text-[var(--text-muted)]'>
+                      <span className='truncate text-[var(--text-muted)] text-caption'>
                         {task.bodyPreview}
                       </span>
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
index 415dd2668d..d434475ac3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
@@ -29,12 +29,12 @@ export function Inbox() {
 
   if (isBillingEnabled && !subscriptionAccess.hasUsableMaxAccess) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[16px] py-[80px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-4 py-20'>
         <div className='text-center'>
           <h3 className='font-medium text-[16px] text-[var(--text-primary)]'>
             Sim Mailer requires an active Max plan
           </h3>
-          <p className='mt-[6px] text-[14px] text-[var(--text-muted)]'>
+          <p className='mt-1.5 text-[14px] text-[var(--text-muted)]'>
             Upgrade to Max and ensure billing is active to receive tasks via email and let Sim work
             on your behalf.
           </p>
@@ -44,14 +44,14 @@ export function Inbox() {
           onClick={() => router.push(`/workspace/${workspaceId}/settings/subscription`)}
         >
           Upgrade to Max
-          <ArrowRight className='ml-[6px] h-[14px] w-[14px]' />
+          <ArrowRight className='ml-1.5 h-[14px] w-[14px]' />
         </Button>
       </div>
     )
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       <InboxEnableToggle />
 
       {config?.enabled && (
@@ -59,9 +59,9 @@ export function Inbox() {
           <div className='border-[var(--border)] border-t' />
           <InboxSettingsTab />
 
-          <div className='border-[var(--border)] border-t pt-[16px]'>
-            <div className='font-medium text-[14px] text-[var(--text-secondary)]'>Inbox</div>
-            <p className='mt-[2px] text-[13px] text-[var(--text-muted)]'>
+          <div className='border-[var(--border)] border-t pt-4'>
+            <div className='font-medium text-[var(--text-secondary)] text-sm'>Inbox</div>
+            <p className='mt-0.5 text-[var(--text-muted)] text-small'>
               Email tasks received by this workspace.
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
index 2152a3e6c2..c59f5cc0fc 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
@@ -643,8 +643,8 @@ export function IntegrationsManager() {
           <>
             <ModalHeader>Connect Integration</ModalHeader>
             <ModalBody>
-              <div className='flex flex-col gap-[12px]'>
-                <div className='flex items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+              <div className='flex flex-col gap-3'>
+                <div className='flex items-center gap-2 rounded-[8px] border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                   <Search
                     className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
                     strokeWidth={2}
@@ -669,7 +669,7 @@ export function IntegrationsManager() {
                           setCreateStep(2)
                           setServiceSearch('')
                         }}
-                        className='flex items-center gap-[10px] rounded-[6px] px-[8px] py-[8px] text-left hover:bg-[var(--surface-5)]'
+                        className='flex items-center gap-2.5 rounded-[6px] px-2 py-2 text-left hover:bg-[var(--surface-5)]'
                       >
                         <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
                           {config ? (
@@ -687,7 +687,7 @@ export function IntegrationsManager() {
                     )
                   })}
                   {filteredServices.length === 0 && (
-                    <div className='py-[24px] text-center text-[13px] text-[var(--text-muted)]'>
+                    <div className='py-6 text-center text-[13px] text-[var(--text-muted)]'>
                       No services found
                     </div>
                   )}
@@ -703,7 +703,7 @@ export function IntegrationsManager() {
         ) : (
           <>
             <ModalHeader>
-              <div className='flex items-center gap-[10px]'>
+              <div className='flex items-center gap-2.5'>
                 <button
                   type='button'
                   onClick={() => {
@@ -736,8 +736,8 @@ export function IntegrationsManager() {
                   )}
                 </div>
               )}
-              <div className='flex flex-col gap-[16px]'>
-                <div className='flex items-center gap-[12px]'>
+              <div className='flex flex-col gap-4'>
+                <div className='flex items-center gap-3'>
                   <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
                     {selectedOAuthService &&
                       createElement(selectedOAuthService.icon, { className: 'h-[18px] w-[18px]' })}
@@ -754,15 +754,15 @@ export function IntegrationsManager() {
 
                 {createDisplayScopes.length > 0 && (
                   <div className='rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-                    <div className='border-[var(--border-1)] border-b px-[14px] py-[10px]'>
+                    <div className='border-[var(--border-1)] border-b px-3.5 py-2.5'>
                       <h4 className='font-medium text-[12px] text-[var(--text-primary)]'>
                         Permissions requested
                       </h4>
                     </div>
-                    <ul className='max-h-[200px] space-y-[10px] overflow-y-auto px-[14px] py-[12px]'>
+                    <ul className='max-h-[200px] space-y-2.5 overflow-y-auto px-3.5 py-3'>
                       {createDisplayScopes.map((scope) => (
-                        <li key={scope} className='flex items-start gap-[10px]'>
-                          <div className='mt-[2px] flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                        <li key={scope} className='flex items-start gap-2.5'>
+                          <div className='mt-0.5 flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                             <Check className='h-[10px] w-[10px] text-[var(--text-primary)]' />
                           </div>
                           <span className='text-[12px] text-[var(--text-primary)]'>
@@ -784,7 +784,7 @@ export function IntegrationsManager() {
                     placeholder='Integration name'
                     autoComplete='off'
                     data-lpignore='true'
-                    className='mt-[6px]'
+                    className='mt-1.5'
                     autoFocus
                   />
                 </div>
@@ -797,7 +797,7 @@ export function IntegrationsManager() {
                     maxLength={500}
                     autoComplete='off'
                     data-lpignore='true'
-                    className='mt-[6px] min-h-[80px] resize-none'
+                    className='mt-1.5 min-h-[80px] resize-none'
                   />
                 </div>
               </div>
@@ -854,10 +854,10 @@ export function IntegrationsManager() {
             ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </p>
           {deleteError && (
-            <div className='mt-[12px] rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
-              <div className='flex items-start gap-[10px]'>
+            <div className='mt-3 rounded-lg border border-red-500/50 bg-red-50 p-3 dark:bg-red-950/30'>
+              <div className='flex items-start gap-2.5'>
                 <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
-                <p className='text-[13px] text-red-700 dark:text-red-300'>{deleteError}</p>
+                <p className='text-red-700 text-small dark:text-red-300'>{deleteError}</p>
               </div>
             </div>
           )}
@@ -902,24 +902,24 @@ export function IntegrationsManager() {
   if (selectedCredential) {
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
+        <div className='flex h-full flex-col gap-4.5'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[18px]'>
-              <div className='flex items-center gap-[10px] border-[var(--border)] border-b pb-[12px]'>
-                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[8px] bg-[var(--surface-5)]'>
+            <div className='flex flex-col gap-4.5'>
+              <div className='flex items-center gap-2.5 border-[var(--border)] border-b pb-3'>
+                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
                   {selectedOAuthServiceConfig ? (
                     createElement(selectedOAuthServiceConfig.icon, {
                       className: 'h-[18px] w-[18px]',
                     })
                   ) : (
-                    <span className='font-medium text-[13px] text-[var(--text-tertiary)]'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-small'>
                       {resolveProviderLabel(selectedCredential.providerId).slice(0, 1)}
                     </span>
                   )}
                 </div>
                 <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <p className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                  <div className='flex items-center gap-2'>
+                    <p className='truncate font-medium text-[var(--text-primary)] text-base'>
                       {resolveProviderLabel(selectedCredential.providerId) || 'Unknown service'}
                     </p>
                     <Badge variant='gray-secondary' size='sm'>
@@ -931,12 +931,12 @@ export function IntegrationsManager() {
                       </Badge>
                     )}
                   </div>
-                  <p className='text-[13px] text-[var(--text-muted)]'>Connected service</p>
+                  <p className='text-[var(--text-muted)] text-small'>Connected service</p>
                 </div>
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='flex items-center gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='flex items-center gap-1.5'>
                   Display Name
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
@@ -972,7 +972,7 @@ export function IntegrationsManager() {
                 />
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
                 <Label>Description</Label>
                 <Textarea
                   id='credential-description'
@@ -988,42 +988,42 @@ export function IntegrationsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[13px] text-[var(--status-red)]'>
+                <div className='rounded-lg border border-[color-mix(in_srgb,var(--status-red)_40%,transparent)] bg-[color-mix(in_srgb,var(--status-red)_10%,transparent)] px-2.5 py-2 text-[var(--status-red)] text-small'>
                   {detailsError}
                 </div>
               )}
 
-              <div className='flex flex-col gap-[6px] border-[var(--border)] border-t pt-[16px]'>
+              <div className='flex flex-col gap-1.5 border-[var(--border)] border-t pt-4'>
                 <Label>Members ({activeMembers.length})</Label>
 
                 {membersLoading ? (
-                  <div className='flex flex-col gap-[8px]'>
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
+                  <div className='flex flex-col gap-2'>
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
                   </div>
                 ) : (
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     {activeMembers.map((member) => (
                       <div
                         key={member.id}
-                        className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px]'
+                        className='grid grid-cols-[1fr_120px_72px] items-center gap-2'
                       >
-                        <div className='flex min-w-0 items-center gap-[10px]'>
+                        <div className='flex min-w-0 items-center gap-2.5'>
                           <Avatar className='h-8 w-8 flex-shrink-0'>
                             <AvatarFallback
                               style={{
                                 background: getUserColor(member.userId || member.userEmail || ''),
                               }}
-                              className='border-0 text-[13px] text-white'
+                              className='border-0 text-small text-white'
                             >
                               {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
                             </AvatarFallback>
                           </Avatar>
                           <div className='min-w-0'>
-                            <p className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                            <p className='truncate font-medium text-[var(--text-primary)] text-sm'>
                               {member.userName || member.userEmail || member.userId}
                             </p>
-                            <p className='truncate text-[12px] text-[var(--text-tertiary)]'>
+                            <p className='truncate text-[var(--text-tertiary)] text-caption'>
                               {member.userEmail || member.userId}
                             </p>
                           </div>
@@ -1069,7 +1069,7 @@ export function IntegrationsManager() {
                       </div>
                     ))}
                     {isSelectedAdmin && (
-                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px] border-[var(--border)] border-t pt-[8px]'>
+                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-2 border-[var(--border)] border-t pt-2'>
                         <Combobox
                           options={workspaceUserOptions}
                           value={
@@ -1112,8 +1112,8 @@ export function IntegrationsManager() {
             </div>
           </div>
 
-          <div className='mt-auto flex items-center justify-between border-[var(--border)] border-t pt-[10px]'>
-            <div className='flex items-center gap-[8px]'>
+          <div className='mt-auto flex items-center justify-between border-[var(--border)] border-t pt-2.5'>
+            <div className='flex items-center gap-2'>
               {isSelectedAdmin && (
                 <>
                   <Button
@@ -1131,7 +1131,7 @@ export function IntegrationsManager() {
                       onClick={handleShareWithWorkspace}
                       disabled={isShareingWithWorkspace || workspaceUserOptions.length === 0}
                     >
-                      <Share2 className='mr-[6px] h-[13px] w-[13px]' />
+                      <Share2 className='mr-1.5 h-[13px] w-[13px]' />
                       {isShareingWithWorkspace ? 'Sharing...' : 'Share'}
                     </Button>
                   )}
@@ -1145,7 +1145,7 @@ export function IntegrationsManager() {
                 </>
               )}
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button onClick={handleBackAttempt} variant='default'>
                 Back
               </Button>
@@ -1171,9 +1171,9 @@ export function IntegrationsManager() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1191,42 +1191,42 @@ export function IntegrationsManager() {
             disabled={credentialsLoading}
             variant='primary'
           >
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Connect
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {credentialsLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <CredentialSkeleton />
               <CredentialSkeleton />
               <CredentialSkeleton />
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {sortedCredentials.map((credential) => {
                 const serviceConfig = credential.providerId
                   ? getServiceConfigByProviderId(credential.providerId)
                   : null
                 return (
-                  <div key={credential.id} className='flex items-center justify-between gap-[12px]'>
-                    <div className='flex min-w-0 items-center gap-[10px]'>
+                  <div key={credential.id} className='flex items-center justify-between gap-3'>
+                    <div className='flex min-w-0 items-center gap-2.5'>
                       {serviceConfig && (
-                        <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                        <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {createElement(serviceConfig.icon, { className: 'h-4 w-4' })}
                         </div>
                       )}
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='truncate font-medium text-[15px]'>
+                        <span className='truncate font-medium text-base'>
                           {credential.displayName}
                         </span>
-                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                        <p className='truncate text-[var(--text-muted)] text-sm'>
                           {credential.description || resolveProviderLabel(credential.providerId)}
                         </p>
                       </div>
                     </div>
-                    <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                    <div className='flex flex-shrink-0 items-center gap-1'>
                       <Button variant='default' onClick={() => handleSelectCredential(credential)}>
                         Details
                       </Button>
@@ -1245,16 +1245,16 @@ export function IntegrationsManager() {
               })}
 
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No integrations found matching &ldquo;{searchTerm}&rdquo;
                 </div>
               )}
 
               {filteredAvailableIntegrations.length > 0 && (
                 <div
-                  className={`flex flex-col gap-[8px]${hasCredentials || showNoResults ? ' mt-[8px] border-[var(--border)] border-t pt-[16px]' : ''}`}
+                  className={`flex flex-col gap-2${hasCredentials || showNoResults ? ' mt-2 border-[var(--border)] border-t pt-4' : ''}`}
                 >
-                  <p className='mb-[4px] font-medium text-[12px] text-[var(--text-muted)]'>
+                  <p className='mb-1 font-medium text-[12px] text-[var(--text-muted)]'>
                     Available integrations
                   </p>
                   {filteredAvailableIntegrations.map((service) => {
@@ -1263,9 +1263,9 @@ export function IntegrationsManager() {
                     return (
                       <div
                         key={service.providerId}
-                        className='flex items-center justify-between gap-[12px]'
+                        className='flex items-center justify-between gap-3'
                       >
-                        <div className='flex min-w-0 items-center gap-[10px]'>
+                        <div className='flex min-w-0 items-center gap-2.5'>
                           {serviceConfig && (
                             <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
                               {createElement(serviceConfig.icon, { className: 'h-4 w-4' })}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
index a7ded899ac..04beeb1484 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
@@ -8,11 +8,11 @@ interface FormFieldProps {
 
 export function FormField({ label, children, optional }: FormFieldProps) {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
-      <Label className='w-[100px] shrink-0 font-medium text-[14px] text-[var(--text-secondary)]'>
+    <div className='flex items-center justify-between gap-3'>
+      <Label className='w-[100px] shrink-0 font-medium text-[var(--text-secondary)] text-sm'>
         {label}
         {optional && (
-          <span className='ml-1 font-normal text-[11px] text-[var(--text-muted)]'>(optional)</span>
+          <span className='ml-1 font-normal text-[var(--text-muted)] text-xs'>(optional)</span>
         )}
       </Label>
       <div className='relative flex-1'>{children}</div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
index 1b2145991f..5e6f8db16a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
@@ -149,7 +149,7 @@ function FormattedInput({
         onInput={handleScroll}
         className='h-9 text-transparent caret-[var(--text-primary)] placeholder:text-[var(--text-muted)]'
       />
-      <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-[8px] py-[6px] font-medium font-sans text-sm'>
+      <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-2 py-1.5 font-medium font-sans text-sm'>
         <div className='whitespace-nowrap' style={{ transform: `translateX(-${scrollLeft}px)` }}>
           {formatDisplayText(value, { availableEnvVars })}
         </div>
@@ -219,7 +219,7 @@ function HeaderRow({
   }
 
   return (
-    <div className='relative flex items-center gap-[8px]'>
+    <div className='relative flex items-center gap-2'>
       <FormattedInput
         placeholder='Name'
         value={header.key || ''}
@@ -598,7 +598,7 @@ export function McpServerFormModal({
         <ModalHeader>{title}</ModalHeader>
         <ModalBody>
           {formMode === 'json' ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Textarea
                 placeholder={`{\n  "mcpServers": {\n    "server-name": {\n      "url": "https://...",\n      "headers": {\n        "X-API-Key": "..."\n      }\n    }\n  }\n}`}
                 value={jsonInput}
@@ -608,12 +608,12 @@ export function McpServerFormModal({
                   if (testResult) clearTestResult()
                   if (submitError) setSubmitError(null)
                 }}
-                className='min-h-[200px] font-mono text-[13px]'
+                className='min-h-[200px] font-mono text-small'
               />
-              {jsonError && <p className='text-[12px] text-[var(--text-error)]'>{jsonError}</p>}
+              {jsonError && <p className='text-[var(--text-error)] text-caption'>{jsonError}</p>}
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <FormField label='Server Name'>
                 <EmcnInput
                   placeholder='e.g., My MCP Server'
@@ -646,17 +646,15 @@ export function McpServerFormModal({
                   onScroll={setUrlScrollLeft}
                 />
                 {isDomainBlocked && (
-                  <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  <p className='mt-1 text-[var(--text-error)] text-caption'>
                     Domain not permitted by server policy
                   </p>
                 )}
               </FormField>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                  Headers
-                </span>
-                <div className='flex max-h-[140px] flex-col gap-[8px] overflow-y-auto'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-small'>Headers</span>
+                <div className='flex max-h-[140px] flex-col gap-2 overflow-y-auto'>
                   {(formData.headers || []).map((header, index) => (
                     <HeaderRow
                       key={index}
@@ -683,10 +681,10 @@ export function McpServerFormModal({
         </ModalBody>
         <ModalFooter>
           {submitError && (
-            <p className='mb-[8px] w-full text-[13px] text-[var(--text-error)]'>{submitError}</p>
+            <p className='mb-2 w-full text-[var(--text-error)] text-small'>{submitError}</p>
           )}
           <div className='flex w-full items-center justify-between'>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               {mode === 'add' && (
                 <Button
                   type='button'
@@ -711,7 +709,7 @@ export function McpServerFormModal({
                 </Button>
               )}
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button variant='ghost' onClick={() => onOpenChange(false)}>
                 Cancel
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
index a0c34a19cc..87b6f0ce01 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
@@ -6,17 +6,17 @@ import { Skeleton } from '@/components/emcn'
  */
 export function McpServerSkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <Skeleton className='h-[14px] w-[100px]' />
           <Skeleton className='h-[13px] w-[80px]' />
         </div>
         <Skeleton className='h-[13px] w-[120px]' />
       </div>
-      <div className='flex flex-shrink-0 items-center gap-[4px]'>
-        <Skeleton className='h-[30px] w-[60px] rounded-[4px]' />
-        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
+      <div className='flex flex-shrink-0 items-center gap-1'>
+        <Skeleton className='h-[30px] w-[60px] rounded-sm' />
+        <Skeleton className='h-[30px] w-[54px] rounded-sm' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
index 40ccbf66d6..8ac8f6282d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
@@ -6,12 +6,12 @@ import { McpServerSkeleton } from '@/app/workspace/[workspaceId]/settings/compon
  */
 export function McpSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[64px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <McpServerSkeleton />
         <McpServerSkeleton />
         <McpServerSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index 6bdfc72166..6522a2974a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -111,16 +111,16 @@ function ServerListItem({
   const isError = server.connectionStatus === 'error'
 
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-[6px]'>
-          <span className='max-w-[200px] truncate font-medium text-[15px]'>
+        <div className='flex items-center gap-1.5'>
+          <span className='max-w-[200px] truncate font-medium text-base'>
             {server.name || 'Unnamed Server'}
           </span>
-          <span className='text-[14px] text-[var(--text-secondary)]'>({transportLabel})</span>
+          <span className='text-[var(--text-secondary)] text-sm'>({transportLabel})</span>
         </div>
         <p
-          className={`truncate text-[14px] ${isError ? 'text-red-500 dark:text-red-400' : 'text-[var(--text-muted)]'}`}
+          className={`truncate text-sm ${isError ? 'text-red-500 dark:text-red-400' : 'text-[var(--text-muted)]'}`}
         >
           {isRefreshing
             ? 'Refreshing...'
@@ -129,7 +129,7 @@ function ServerListItem({
               : toolsLabel}
         </p>
       </div>
-      <div className='flex flex-shrink-0 items-center gap-[4px]'>
+      <div className='flex flex-shrink-0 items-center gap-1'>
         <Button variant='default' onClick={onViewDetails}>
           Details
         </Button>
@@ -413,47 +413,45 @@ export function MCP({ initialServerId }: MCPProps) {
     const transportLabel = formatTransportLabel(server.transport || 'http')
 
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[18px]'>
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                Server Name
-              </span>
-              <p className='text-[15px] text-[var(--text-secondary)]'>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>Server Name</span>
+              <p className='text-[var(--text-secondary)] text-base'>
                 {server.name || 'Unnamed Server'}
               </p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>Transport</span>
-              <p className='text-[15px] text-[var(--text-secondary)]'>{transportLabel}</p>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>Transport</span>
+              <p className='text-[var(--text-secondary)] text-base'>{transportLabel}</p>
             </div>
 
             {server.url && (
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-primary)]'>URL</span>
-                <p className='break-all text-[15px] text-[var(--text-secondary)]'>{server.url}</p>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-primary)] text-sm'>URL</span>
+                <p className='break-all text-[var(--text-secondary)] text-base'>{server.url}</p>
               </div>
             )}
 
             {server.connectionStatus === 'error' && (
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-primary)]'>Status</span>
-                <p className='text-[15px] text-red-500 dark:text-red-400'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-primary)] text-sm'>Status</span>
+                <p className='text-base text-red-500 dark:text-red-400'>
                   {server.lastError || 'Unable to connect'}
                 </p>
               </div>
             )}
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>
                 Tools ({tools.length})
               </span>
               {tools.length === 0 ? (
-                <p className='text-[14px] text-[var(--text-muted)]'>No tools available</p>
+                <p className='text-[var(--text-muted)] text-sm'>No tools available</p>
               ) : (
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   {tools.map((tool) => {
                     const issues = getStoredToolIssues(server.id, tool.name)
                     const affectedWorkflows = issues.map((i) => i.workflowName)
@@ -466,20 +464,20 @@ export function MCP({ initialServerId }: MCPProps) {
                     return (
                       <div
                         key={tool.name}
-                        className='overflow-hidden rounded-[6px] border bg-[var(--surface-3)]'
+                        className='overflow-hidden rounded-md border bg-[var(--surface-3)]'
                       >
                         <button
                           type='button'
                           onClick={() => hasParams && toggleToolExpanded(tool.name)}
                           className={cn(
-                            'flex w-full items-start justify-between px-[10px] py-[8px] text-left',
-                            hasParams && 'cursor-pointer hover:bg-[var(--surface-4)]'
+                            'flex w-full items-start justify-between px-2.5 py-2 text-left',
+                            hasParams && 'cursor-pointer hover-hover:bg-[var(--surface-4)]'
                           )}
                           disabled={!hasParams}
                         >
                           <div className='flex-1'>
-                            <div className='flex h-[16px] items-center gap-[6px]'>
-                              <p className='font-medium text-[14px] text-[var(--text-primary)] leading-none'>
+                            <div className='flex h-[16px] items-center gap-1.5'>
+                              <p className='font-medium text-[var(--text-primary)] text-sm leading-none'>
                                 {tool.name}
                               </p>
                               {issues.length > 0 && (
@@ -501,7 +499,7 @@ export function MCP({ initialServerId }: MCPProps) {
                               )}
                             </div>
                             {tool.description && (
-                              <p className='mt-[4px] text-[14px] text-[var(--text-tertiary)]'>
+                              <p className='mt-1 text-[var(--text-tertiary)] text-sm'>
                                 {tool.description}
                               </p>
                             )}
@@ -509,7 +507,7 @@ export function MCP({ initialServerId }: MCPProps) {
                           {hasParams && (
                             <ChevronDown
                               className={cn(
-                                'mt-[2px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
+                                'mt-0.5 h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
                                 isExpanded && 'rotate-180'
                               )}
                             />
@@ -517,11 +515,11 @@ export function MCP({ initialServerId }: MCPProps) {
                         </button>
 
                         {isExpanded && hasParams && (
-                          <div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] py-[8px]'>
-                            <p className='mb-[6px] font-medium text-[11px] text-[var(--text-muted)] uppercase tracking-wide'>
+                          <div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 py-2'>
+                            <p className='mb-1.5 font-medium text-[var(--text-muted)] text-xs uppercase tracking-wide'>
                               Parameters
                             </p>
-                            <div className='flex flex-col gap-[6px]'>
+                            <div className='flex flex-col gap-1.5'>
                               {Object.entries(tool.inputSchema!.properties!).map(
                                 ([paramName, param]) => {
                                   const isRequired = requiredParams.includes(paramName)
@@ -537,10 +535,10 @@ export function MCP({ initialServerId }: MCPProps) {
                                   return (
                                     <div
                                       key={paramName}
-                                      className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] px-[8px] py-[6px]'
+                                      className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-3)] px-2 py-1.5'
                                     >
-                                      <div className='flex items-center gap-[6px]'>
-                                        <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                                      <div className='flex items-center gap-1.5'>
+                                        <span className='font-medium text-[var(--text-primary)] text-small'>
                                           {paramName}
                                         </span>
                                         <Badge variant='outline' size='sm'>
@@ -553,7 +551,7 @@ export function MCP({ initialServerId }: MCPProps) {
                                         )}
                                       </div>
                                       {paramDesc && (
-                                        <p className='mt-[3px] text-[11px] text-[var(--text-tertiary)] leading-relaxed'>
+                                        <p className='mt-[3px] text-[var(--text-tertiary)] text-xs leading-relaxed'>
                                           {paramDesc}
                                         </p>
                                       )}
@@ -577,7 +575,7 @@ export function MCP({ initialServerId }: MCPProps) {
           <Button onClick={handleBackToList} variant='default'>
             Back
           </Button>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             <Button
               onClick={() => handleRefreshServer(server.id)}
               variant='default'
@@ -623,9 +621,9 @@ export function MCP({ initialServerId }: MCPProps) {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -638,32 +636,30 @@ export function MCP({ initialServerId }: MCPProps) {
             />
           </div>
           <Button onClick={() => setShowAddModal(true)} variant='primary' disabled={serversLoading}>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load MCP servers'}
               </p>
             </div>
           ) : serversLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <McpServerSkeleton />
               <McpServerSkeleton />
               <McpServerSkeleton />
             </div>
           ) : !hasServers ? (
             <div className='flex h-full items-center justify-center'>
-              <p className='text-[14px] text-[var(--text-muted)]'>
-                Click "Add" above to get started
-              </p>
+              <p className='text-[var(--text-muted)] text-sm'>Click "Add" above to get started</p>
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredServers.map((server) => {
                 if (!server?.id) return null
                 const tools = toolsByServer[server.id] || []
@@ -683,7 +679,7 @@ export function MCP({ initialServerId }: MCPProps) {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No servers found matching "{searchTerm}"
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
index 165830fe8b..58a62e1f52 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
@@ -5,13 +5,13 @@ import { Skeleton } from '@/components/emcn'
  */
 export function DeletedItemSkeleton() {
   return (
-    <div className='flex items-center gap-[12px] px-[8px] py-[8px]'>
+    <div className='flex items-center gap-3 px-2 py-2'>
       <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-[3px]' />
-      <div className='flex min-w-0 flex-1 flex-col gap-[2px]'>
+      <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[12px] w-[180px]' />
       </div>
-      <Skeleton className='h-[30px] w-[64px] shrink-0 rounded-[6px]' />
+      <Skeleton className='h-[30px] w-[64px] shrink-0 rounded-md' />
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
index 7829a4e8d0..07050c2759 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -231,8 +231,8 @@ export function RecentlyDeleted() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
         <Search
           className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
           strokeWidth={2}
@@ -258,25 +258,25 @@ export function RecentlyDeleted() {
 
       <div className='min-h-0 flex-1 overflow-y-auto'>
         {error ? (
-          <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-            <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+          <div className='flex h-full flex-col items-center justify-center gap-2'>
+            <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
               {error instanceof Error ? error.message : 'Failed to load deleted items'}
             </p>
           </div>
         ) : isLoading ? (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <DeletedItemSkeleton />
             <DeletedItemSkeleton />
             <DeletedItemSkeleton />
           </div>
         ) : filtered.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+          <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
             {showNoResults
               ? `No items found matching \u201c${searchTerm}\u201d`
               : 'No deleted items'}
           </div>
         ) : (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {filtered.map((resource) => {
               const isRestoring = restoringIds.has(resource.id)
               const isRestored = restoredItems.has(resource.id)
@@ -284,15 +284,15 @@ export function RecentlyDeleted() {
               return (
                 <div
                   key={resource.id}
-                  className='flex items-center gap-[12px] rounded-[6px] px-[8px] py-[8px] hover:bg-[var(--bg-hover)]'
+                  className='flex items-center gap-3 rounded-md px-2 py-2 hover-hover:bg-[var(--bg-hover)]'
                 >
                   <ResourceIcon resource={resource} />
 
                   <div className='flex min-w-0 flex-1 flex-col'>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                    <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {resource.name}
                     </span>
-                    <span className='text-[12px] text-[var(--text-tertiary)]'>
+                    <span className='text-[var(--text-tertiary)] text-caption'>
                       {TYPE_LABEL[resource.type]}
                       {' \u00b7 '}
                       Deleted {formatDate(resource.deletedAt)}
@@ -300,8 +300,8 @@ export function RecentlyDeleted() {
                   </div>
 
                   {isRestored ? (
-                    <div className='flex shrink-0 items-center gap-[8px]'>
-                      <span className='text-[13px] text-[var(--text-tertiary)]'>Restored</span>
+                    <div className='flex shrink-0 items-center gap-2'>
+                      <span className='text-[var(--text-tertiary)] text-small'>Restored</span>
                       <Button
                         variant='primary'
                         size='sm'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx
index 4e4347b3f2..eb70114139 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx
@@ -167,7 +167,7 @@ export function SkillImport({ onImport }: SkillImportProps) {
   return (
     <div className='flex flex-col gap-[18px]'>
       {/* File drop zone */}
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label className='font-medium text-[14px]'>Upload File</Label>
         <button
           type='button'
@@ -178,7 +178,7 @@ export function SkillImport({ onImport }: SkillImportProps) {
           onDrop={handleDrop}
           disabled={fileState === 'loading'}
           className={cn(
-            'flex w-full cursor-pointer flex-col items-center justify-center gap-[8px] rounded-[8px] border border-dashed px-[16px] py-[32px] transition-colors',
+            'flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-[8px] border border-dashed px-4 py-8 transition-colors',
             'border-[var(--border-1)] bg-[var(--surface-1)] hover:bg-[var(--surface-4)]',
             isDragging && 'border-[var(--surface-7)] bg-[var(--surface-4)]',
             fileState === 'loading' && 'pointer-events-none opacity-60'
@@ -196,7 +196,7 @@ export function SkillImport({ onImport }: SkillImportProps) {
           ) : (
             <Upload className='h-[20px] w-[20px] text-[var(--text-tertiary)]' />
           )}
-          <div className='flex flex-col gap-[2px] text-center'>
+          <div className='flex flex-col gap-0.5 text-center'>
             <span className='text-[14px] text-[var(--text-primary)]'>
               {isDragging ? 'Drop file here' : 'Drop file here or click to browse'}
             </span>
@@ -211,11 +211,11 @@ export function SkillImport({ onImport }: SkillImportProps) {
       <Divider />
 
       {/* GitHub URL */}
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label htmlFor='skill-github-url' className='font-medium text-[14px]'>
           Import from GitHub
         </Label>
-        <div className='flex gap-[8px]'>
+        <div className='flex gap-2'>
           <Input
             id='skill-github-url'
             placeholder='https://github.com/owner/repo/blob/main/SKILL.md'
@@ -245,7 +245,7 @@ export function SkillImport({ onImport }: SkillImportProps) {
       <Divider />
 
       {/* Paste content */}
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label htmlFor='skill-paste' className='font-medium text-[14px]'>
           Paste SKILL.md Content
         </Label>
@@ -274,7 +274,7 @@ export function SkillImport({ onImport }: SkillImportProps) {
 
 function Divider() {
   return (
-    <div className='flex items-center gap-[12px]'>
+    <div className='flex items-center gap-3'>
       <div className='h-px flex-1 bg-[var(--border-1)]' />
       <span className='text-[12px] text-[var(--text-tertiary)]'>or</span>
       <div className='h-px flex-1 bg-[var(--border-1)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
index 678a80a3a1..c7431be6a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
@@ -148,7 +148,7 @@ export function SkillModal({
 
   const createForm = (
     <div className='flex flex-col gap-[18px]'>
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label htmlFor='skill-name' className='font-medium text-[14px]'>
           Name
         </Label>
@@ -171,7 +171,7 @@ export function SkillModal({
         )}
       </div>
 
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label htmlFor='skill-description' className='font-medium text-[14px]'>
           Description
         </Label>
@@ -191,7 +191,7 @@ export function SkillModal({
         )}
       </div>
 
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label htmlFor='skill-content' className='font-medium text-[14px]'>
           Content
         </Label>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
index a88c156ced..0d642ca3c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
@@ -80,9 +80,9 @@ export function Skills() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -96,37 +96,37 @@ export function Skills() {
             />
           </div>
           <Button onClick={() => setShowAddForm(true)} disabled={isLoading} variant='primary'>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load skills'}
               </p>
             </div>
           ) : isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <SkillSkeleton />
               <SkillSkeleton />
               <SkillSkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Add" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredSkills.map((s) => (
-                <div key={s.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={s.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[15px]'>{s.name}</span>
-                    <p className='truncate text-[14px] text-[var(--text-muted)]'>{s.description}</p>
+                    <span className='truncate font-medium text-base'>{s.name}</span>
+                    <p className='truncate text-[var(--text-muted)] text-sm'>{s.description}</p>
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     <Button variant='default' onClick={() => setEditingSkill(s)}>
                       Edit
                     </Button>
@@ -141,7 +141,7 @@ export function Skills() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No skills found matching "{searchTerm}"
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx
index f122b31405..87b4e2b8d7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx
@@ -127,9 +127,9 @@ export function CreditBalance({
 
   return (
     <div className='flex items-center justify-between'>
-      <div className='flex items-center gap-[8px]'>
+      <div className='flex items-center gap-2'>
         <Label>Additional Credits Balance:</Label>
-        <span className='text-[13px] text-[var(--text-secondary)]'>
+        <span className='text-[var(--text-secondary)] text-small tabular-nums'>
           {isLoading ? '...' : `${formatCredits(balance)} credits`}
         </span>
       </div>
@@ -143,15 +143,15 @@ export function CreditBalance({
             <ModalHeader>Add Credits</ModalHeader>
             <ModalBody>
               {purchaseCredits.isSuccess ? (
-                <p className='text-center text-[13px] text-[var(--text-primary)]'>
+                <p className='text-center text-[var(--text-primary)] text-small'>
                   Credits added successfully!
                 </p>
               ) : (
-                <div className='space-y-[12px]'>
-                  <div className='flex flex-col gap-[8px]'>
+                <div className='space-y-3'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='credit-amount'>Amount (USD)</Label>
                     <div className='relative'>
-                      <span className='-translate-y-1/2 absolute top-1/2 left-[12px] text-[13px] text-[var(--text-muted)]'>
+                      <span className='-translate-y-1/2 absolute top-1/2 left-[12px] text-[var(--text-muted)] text-small'>
                         $
                       </span>
                       <Input
@@ -161,21 +161,21 @@ export function CreditBalance({
                         value={amount}
                         onChange={(e) => handleAmountChange(e.target.value)}
                         placeholder='50'
-                        className='pl-[28px]'
+                        className='pl-7'
                         disabled={purchaseCredits.isPending}
                       />
                     </div>
                     {dollarAmount > 0 && !displayError && (
-                      <span className='text-[12px] text-[var(--text-secondary)]'>
+                      <span className='text-[var(--text-secondary)] text-caption tabular-nums'>
                         You'll receive {creditPreview.toLocaleString()} credits
                       </span>
                     )}
                     {displayError && (
-                      <span className='text-[13px] text-[var(--text-error)]'>{displayError}</span>
+                      <span className='text-[var(--text-error)] text-small'>{displayError}</span>
                     )}
                   </div>
 
-                  <div className='rounded-[6px] bg-[var(--surface-4)] p-[12px]'>
+                  <div className='rounded-md bg-[var(--surface-4)] p-3'>
                     <p className='text-[var(--text-secondary)]'>
                       Credits are non-refundable and don't expire. They'll be applied automatically
                       to your {entityType === 'organization' ? 'team' : ''} usage.
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx
index cea5d60ce7..fbe199811b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx
@@ -44,11 +44,9 @@ export function PlanCard({
     if (typeof price === 'string') {
       return (
         <>
-          <span className='font-medium text-[15px] text-[var(--text-primary)]'>{price}</span>
+          <span className='font-medium text-[var(--text-primary)] text-base'>{price}</span>
           {priceSubtext && (
-            <span className='ml-[4px] text-[13px] text-[var(--text-secondary)]'>
-              {priceSubtext}
-            </span>
+            <span className='ml-1 text-[var(--text-secondary)] text-small'>{priceSubtext}</span>
           )}
         </>
       )
@@ -60,13 +58,13 @@ export function PlanCard({
     return (
       <article
         className={cn(
-          'flex flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]',
+          'flex flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]',
           className
         )}
       >
-        <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
-          <div className='flex items-baseline gap-[8px]'>
-            <span className='font-medium text-[15px] text-[var(--text-primary)]'>{name}</span>
+        <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
+          <div className='flex items-baseline gap-2'>
+            <span className='font-medium text-[var(--text-primary)] text-base'>{name}</span>
             <div className='flex items-baseline'>{renderPrice()}</div>
           </div>
           <Button
@@ -77,13 +75,13 @@ export function PlanCard({
             {isError ? 'Error' : buttonText}
           </Button>
         </div>
-        <ul className='flex flex-wrap items-center gap-x-[16px] gap-y-[8px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[16px]'>
+        <ul className='flex flex-wrap items-center gap-x-4 gap-y-2 rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-4'>
           {features.map((feature, index) => {
             const Icon = feature.icon
             return (
-              <li key={`${feature.text}-${index}`} className='flex items-center gap-[8px]'>
+              <li key={`${feature.text}-${index}`} className='flex items-center gap-2'>
                 <Icon className='h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
-                <span className='text-[13px] text-[var(--text-primary)]'>{feature.text}</span>
+                <span className='text-[var(--text-primary)] text-small'>{feature.text}</span>
               </li>
             )
           })}
@@ -95,36 +93,34 @@ export function PlanCard({
   return (
     <article
       className={cn(
-        'flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]',
+        'flex flex-1 flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]',
         className
       )}
     >
-      <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
-        <span className='font-medium text-[15px] text-[var(--text-primary)]'>{name}</span>
+      <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
+        <span className='font-medium text-[var(--text-primary)] text-base'>{name}</span>
         <div className='flex items-baseline'>{renderPrice()}</div>
       </div>
       <div
         className={cn(
-          'flex rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px]',
+          'flex border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5',
           inlineButton
-            ? 'items-center justify-between gap-[18px] py-[12px]'
-            : 'flex-1 flex-col gap-[18px] py-[16px]'
+            ? 'items-center justify-between gap-4.5 py-3'
+            : 'flex-1 flex-col gap-4.5 py-4'
         )}
       >
         <ul
           className={cn(
-            'flex gap-[14px]',
-            inlineButton
-              ? 'flex-row flex-wrap items-center gap-x-[16px] gap-y-[8px]'
-              : 'flex-1 flex-col'
+            'flex gap-3.5',
+            inlineButton ? 'flex-row flex-wrap items-center gap-x-4 gap-y-2' : 'flex-1 flex-col'
           )}
         >
           {features.map((feature, index) => {
             const Icon = feature.icon
             return (
-              <li key={`${feature.text}-${index}`} className='flex items-center gap-[8px]'>
+              <li key={`${feature.text}-${index}`} className='flex items-center gap-2'>
                 <Icon className='h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
-                <span className='text-[13px] text-[var(--text-primary)]'>{feature.text}</span>
+                <span className='text-[var(--text-primary)] text-small'>{feature.text}</span>
               </li>
             )
           })}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
index 9ca4256613..d2c6322be9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
@@ -102,45 +102,45 @@ interface WorkspaceAdmin {
 
 function SubscriptionSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[20px]'>
-      <div className='flex flex-col gap-[12px]'>
+    <div className='flex h-full flex-col gap-5'>
+      <div className='flex flex-col gap-3'>
         <div className='flex items-center justify-between'>
-          <div className='flex flex-col gap-[4px]'>
+          <div className='flex flex-col gap-1'>
             <div className='flex h-[18px] items-center'>
-              <Skeleton className='h-[12px] w-[40px] rounded-[4px]' />
+              <Skeleton className='h-[12px] w-[40px] rounded-sm' />
             </div>
-            <div className='flex h-[21px] items-center gap-[4px]'>
-              <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
-              <span className='font-medium text-[15px] text-[var(--text-primary)]'>/</span>
-              <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
+            <div className='flex h-[21px] items-center gap-1'>
+              <Skeleton className='h-[14px] w-[50px] rounded-sm' />
+              <span className='font-medium text-[var(--text-primary)] text-base'>/</span>
+              <Skeleton className='h-[14px] w-[50px] rounded-sm' />
             </div>
           </div>
-          <div className='flex flex-col items-end gap-[8px]'>
-            <div className='flex w-[100px] items-center gap-[4px]'>
+          <div className='flex flex-col items-end gap-2'>
+            <div className='flex w-[100px] items-center gap-1'>
               {[...Array(5)].map((_, i) => (
-                <Skeleton key={i} className='h-[6px] flex-1 rounded-[2px]' />
+                <Skeleton key={i} className='h-[6px] flex-1 rounded-xs' />
               ))}
             </div>
           </div>
         </div>
       </div>
-      <div className='flex flex-col gap-[10px]'>
-        <div className='grid grid-cols-2 gap-[10px]'>
+      <div className='flex flex-col gap-2.5'>
+        <div className='grid grid-cols-2 gap-2.5'>
           {[0, 1].map((i) => (
             <article
               key={i}
-              className='flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'
+              className='flex flex-1 flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'
             >
-              <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
-                <Skeleton className='h-[14px] w-[32px] rounded-[4px]' />
-                <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
+              <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
+                <Skeleton className='h-[14px] w-[32px] rounded-sm' />
+                <Skeleton className='h-[14px] w-[50px] rounded-sm' />
               </div>
-              <div className='flex flex-1 flex-col gap-[18px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[16px]'>
-                <ul className='flex flex-1 flex-col gap-[14px]'>
+              <div className='flex flex-1 flex-col gap-4.5 rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-4'>
+                <ul className='flex flex-1 flex-col gap-3.5'>
                   {[...Array(5)].map((_, j) => (
-                    <li key={j} className='flex items-center gap-[8px]'>
-                      <Skeleton className='h-[12px] w-[12px] flex-shrink-0 rounded-[4px]' />
-                      <Skeleton className='h-[12px] w-[120px] rounded-[4px]' />
+                    <li key={j} className='flex items-center gap-2'>
+                      <Skeleton className='h-[12px] w-[12px] flex-shrink-0 rounded-sm' />
+                      <Skeleton className='h-[12px] w-[120px] rounded-sm' />
                     </li>
                   ))}
                 </ul>
@@ -192,57 +192,55 @@ function CreditPlanCard({
 
   return (
     <article className='flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='flex min-h-[44px] items-center justify-between gap-[8px] px-[14px] py-[10px]'>
+      <div className='flex min-h-[44px] items-center justify-between gap-2 px-3.5 py-2.5'>
         <span className='font-medium text-[14px] text-[var(--text-primary)]'>{name}</span>
-        <div className='flex shrink-0 items-baseline gap-[4px] whitespace-nowrap'>
+        <div className='flex shrink-0 items-baseline gap-1 whitespace-nowrap'>
           <span className='font-medium text-[14px] text-[var(--text-primary)]'>
             ${isAnnual ? discountedMonthly : dollars}
           </span>
-          <span className='text-[12px] text-[var(--text-secondary)]'>{perUnit}/mo</span>
+          <span className='text-[var(--text-secondary)] text-caption'>{perUnit}/mo</span>
           {isAnnual && (
-            <span className='ml-[2px] text-[11px] text-[var(--text-muted)] line-through'>
-              ${dollars}
-            </span>
+            <span className='ml-0.5 text-[var(--text-muted)] text-xs line-through'>${dollars}</span>
           )}
         </div>
       </div>
 
-      <div className='flex items-center gap-[12px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[10px]'>
+      <div className='flex items-center gap-3 rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-2.5'>
         <div className='flex flex-col'>
-          <span className='font-semibold text-[18px] text-[var(--text-primary)]'>
+          <span className='font-semibold text-[var(--text-primary)] text-lg tabular-nums'>
             {credits.toLocaleString()}
           </span>
-          <span className='text-[11px] text-[var(--text-secondary)]'>credits/mo</span>
+          <span className='text-[var(--text-secondary)] text-xs'>credits/mo</span>
         </div>
         <div className='h-[28px] w-[1px] bg-[var(--border-1)]' />
         <div className='flex flex-col'>
-          <span className='font-semibold text-[14px] text-[var(--text-primary)]'>
+          <span className='font-semibold text-[var(--text-primary)] text-sm tabular-nums'>
             +{dailyRefresh.toLocaleString()}
           </span>
-          <span className='text-[11px] text-[var(--text-secondary)]'>daily refresh</span>
+          <span className='text-[var(--text-secondary)] text-xs'>daily refresh</span>
         </div>
       </div>
 
       {features && features.length > 0 && (
-        <ul className='flex flex-col gap-[10px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
+        <ul className='flex flex-col gap-2.5 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
           {features.map((feature, idx) => (
-            <li key={idx} className='flex items-center gap-[8px]'>
+            <li key={idx} className='flex items-center gap-2'>
               <feature.icon className='h-[13px] w-[13px] flex-shrink-0 text-[var(--text-muted)]' />
-              <span className='text-[12px] text-[var(--text-secondary)]'>{feature.text}</span>
+              <span className='text-[var(--text-secondary)] text-caption'>{feature.text}</span>
             </li>
           ))}
         </ul>
       )}
 
       {isCurrentPlan && isLegacyPlan && (
-        <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[8px]'>
+        <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-2'>
           <Badge variant='amber' size='sm' dot>
             You are on an old version of this plan
           </Badge>
         </div>
       )}
 
-      <div className='flex min-h-[60px] items-center border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[14px]'>
+      <div className='flex min-h-[60px] items-center border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3.5'>
         {isCurrentPlan ? (
           <Button onClick={onManagePlan} className='h-[32px] w-full' variant='default'>
             {isCancelledAtPeriodEnd ? 'Restore Subscription' : 'Manage plan'}
@@ -570,7 +568,7 @@ export function Subscription() {
   const showTeamCard = visiblePlans.includes('pro') || visiblePlans.includes('team')
 
   return (
-    <div className='flex h-full flex-col gap-[20px]'>
+    <div className='flex h-full flex-col gap-5'>
       {/* Current Plan & Usage Overview */}
       {permissions.canViewUsageInfo ? (
         <UsageHeader
@@ -646,7 +644,7 @@ export function Subscription() {
         />
       ) : (
         <div className='flex items-center'>
-          <span className='font-medium text-[15px] text-[var(--text-primary)]'>
+          <span className='font-medium text-[var(--text-primary)] text-base'>
             {formatPlanName(subscription.plan)}
           </span>
         </div>
@@ -654,17 +652,17 @@ export function Subscription() {
 
       {/* Upgrade Plans */}
       {showUpgradePlans && (
-        <div className='flex flex-col gap-[12px]'>
+        <div className='flex flex-col gap-3'>
           {/* Billing toggle */}
           <div className='flex items-center justify-start'>
-            <div className='flex rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] p-[2px]'>
+            <div className='flex rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] p-0.5'>
               <button
                 type='button'
                 className={cn(
-                  'rounded-[4px] px-[10px] py-[4px] font-medium text-[12px] transition-colors',
+                  'rounded-sm px-2.5 py-1 font-medium text-caption transition-colors',
                   !isAnnual
                     ? 'bg-[var(--surface-3)] text-[var(--text-primary)]'
-                    : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    : 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                 )}
                 onClick={() => setIsAnnual(false)}
               >
@@ -673,15 +671,15 @@ export function Subscription() {
               <button
                 type='button'
                 className={cn(
-                  'flex items-center gap-[4px] rounded-[4px] px-[10px] py-[4px] font-medium text-[12px] transition-colors',
+                  'flex items-center gap-1 rounded-sm px-2.5 py-1 font-medium text-caption transition-colors',
                   isAnnual
                     ? 'bg-[var(--surface-3)] text-[var(--text-primary)]'
-                    : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    : 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                 )}
                 onClick={() => setIsAnnual(true)}
               >
                 Annual
-                <span className='rounded-[3px] bg-[#10b981] px-[4px] py-[1px] font-semibold text-[10px] text-white'>
+                <span className='rounded-[3px] bg-[var(--success)] px-1 py-[1px] font-semibold text-micro text-white'>
                   -15%
                 </span>
               </button>
@@ -711,7 +709,7 @@ export function Subscription() {
             const showProCard = !isOnMaxTier
 
             return (
-              <div className='grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-[10px]'>
+              <div className='grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-2.5'>
                 {showProCard && (
                   <CreditPlanCard
                     name='Pro'
@@ -933,7 +931,7 @@ export function Subscription() {
 
       {/* Billing details section */}
       {(subscription.isPaid || (!isLoading && isTeamAdmin)) && (
-        <div className='flex flex-col gap-[16px]'>
+        <div className='flex flex-col gap-4'>
           {subscription.isPaid && permissions.canViewUsageInfo && (
             <div>
               <CreditBalance
@@ -952,9 +950,9 @@ export function Subscription() {
             subscriptionData?.data?.periodEnd &&
             !permissions.showTeamMemberView &&
             !permissions.isEnterpriseMember && (
-              <div className='flex items-center justify-between gap-[16px]'>
+              <div className='flex items-center justify-between gap-4'>
                 <Label>{isCancelledAtPeriodEnd ? 'Access Until' : 'Next Billing Date'}</Label>
-                <span className='text-[13px] text-[var(--text-secondary)]'>
+                <span className='text-[var(--text-secondary)] text-small'>
                   {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
                 </span>
               </div>
@@ -969,7 +967,7 @@ export function Subscription() {
           {subscription.isPaid &&
             !permissions.showTeamMemberView &&
             !permissions.isEnterpriseMember && (
-              <div className='flex items-center justify-between gap-[16px]'>
+              <div className='flex items-center justify-between gap-4'>
                 <Label>Invoices</Label>
                 <Button
                   variant='active'
@@ -1007,8 +1005,8 @@ export function Subscription() {
             )}
 
           {!isLoading && isTeamAdmin && (
-            <div className='flex items-center justify-between gap-[16px]'>
-              <div className='flex items-center gap-[6px]'>
+            <div className='flex items-center justify-between gap-4'>
+              <div className='flex items-center gap-1.5'>
                 <Label htmlFor='billed-account'>Billed Account</Label>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
@@ -1020,7 +1018,7 @@ export function Subscription() {
                 </Tooltip.Root>
               </div>
               {workspaceAdmins.length === 0 ? (
-                <div className='rounded-[6px] border border-[var(--border)] border-dashed px-[12px] py-[6px] text-[13px] text-[var(--text-muted)]'>
+                <div className='rounded-md border border-[var(--border)] border-dashed px-3 py-1.5 text-[var(--text-muted)] text-small'>
                   No admins available
                 </div>
               ) : (
@@ -1095,23 +1093,21 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
           </p>
 
           {/* Plan toggle */}
-          <div className='mt-[16px] flex flex-col gap-[4px]'>
-            <Label className='text-[13px]'>Plan</Label>
-            <div className='flex gap-[8px]'>
+          <div className='mt-4 flex flex-col gap-1'>
+            <Label className='text-small'>Plan</Label>
+            <div className='flex gap-2'>
               <button
                 type='button'
                 className={cn(
-                  'flex-1 rounded-[6px] border px-[12px] py-[10px] text-left transition-colors',
+                  'flex-1 rounded-md border px-3 py-2.5 text-left transition-colors',
                   selectedTier === PRO_TIER.credits
-                    ? 'border-[var(--accent)] bg-[var(--accent)]/5'
-                    : 'border-[var(--border-1)] hover:border-[var(--border-2)]'
+                    ? 'border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_5%,transparent)]'
+                    : 'border-[var(--border-1)] hover-hover:border-[var(--border-2)]'
                 )}
                 onClick={() => setSelectedTier(PRO_TIER.credits)}
               >
-                <span className='block font-medium text-[13px] text-[var(--text-primary)]'>
-                  Pro
-                </span>
-                <span className='block text-[12px] text-[var(--text-secondary)]'>
+                <span className='block font-medium text-[var(--text-primary)] text-small'>Pro</span>
+                <span className='block text-[var(--text-secondary)] text-caption tabular-nums'>
                   {PRO_TIER.credits.toLocaleString()} credits/seat &middot; ${PRO_TIER.dollars}
                   /seat/mo
                 </span>
@@ -1119,17 +1115,15 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
               <button
                 type='button'
                 className={cn(
-                  'flex-1 rounded-[6px] border px-[12px] py-[10px] text-left transition-colors',
+                  'flex-1 rounded-md border px-3 py-2.5 text-left transition-colors',
                   selectedTier === MAX_TIER.credits
-                    ? 'border-[var(--accent)] bg-[var(--accent)]/5'
-                    : 'border-[var(--border-1)] hover:border-[var(--border-2)]'
+                    ? 'border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_5%,transparent)]'
+                    : 'border-[var(--border-1)] hover-hover:border-[var(--border-2)]'
                 )}
                 onClick={() => setSelectedTier(MAX_TIER.credits)}
               >
-                <span className='block font-medium text-[13px] text-[var(--text-primary)]'>
-                  Max
-                </span>
-                <span className='block text-[12px] text-[var(--text-secondary)]'>
+                <span className='block font-medium text-[var(--text-primary)] text-small'>Max</span>
+                <span className='block text-[var(--text-secondary)] text-caption tabular-nums'>
                   {MAX_TIER.credits.toLocaleString()} credits/seat &middot; ${MAX_TIER.dollars}
                   /seat/mo
                 </span>
@@ -1138,8 +1132,8 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
           </div>
 
           {/* Seat selector */}
-          <div className='mt-[16px] flex flex-col gap-[4px]'>
-            <Label className='text-[13px]'>Seats</Label>
+          <div className='mt-4 flex flex-col gap-1'>
+            <Label className='text-small'>Seats</Label>
             <Combobox
               options={seatOptions}
               value={selectedSeats > 0 ? selectedSeats.toString() : ''}
@@ -1153,8 +1147,8 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
           </div>
 
           {/* Cost summary */}
-          <div className='mt-[16px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[12px] py-[10px]'>
-            <div className='flex justify-between text-[13px]'>
+          <div className='mt-4 rounded-md border border-[var(--border-1)] bg-[var(--surface-4)] px-3 py-2.5'>
+            <div className='flex justify-between text-small'>
               <span className='text-[var(--text-muted)]'>
                 {selectedSeats} {selectedSeats === 1 ? 'seat' : 'seats'} &times; $
                 {monthlyCostPerSeat}/mo
@@ -1164,11 +1158,11 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
               </span>
             </div>
             {isAnnual && (
-              <div className='mt-[4px] flex justify-between text-[12px]'>
+              <div className='mt-1 flex justify-between text-caption'>
                 <span className='text-[var(--text-muted)]'>Annual total</span>
                 <span className='text-[var(--text-secondary)]'>
                   ${annualTotal}/yr
-                  <span className='ml-[4px] text-[var(--text-muted)] line-through'>
+                  <span className='ml-1 text-[var(--text-muted)] line-through'>
                     ${totalMonthly * 12}
                   </span>
                 </span>
@@ -1315,31 +1309,31 @@ function ManagePlanModal({
           </p>
 
           {isLegacyPlan && (
-            <Badge variant='amber' size='lg' dot className='mt-[8px]'>
+            <Badge variant='amber' size='lg' dot className='mt-2'>
               You're on an older version of this plan
             </Badge>
           )}
 
-          <div className='mt-[16px] flex flex-col'>
+          <div className='mt-4 flex flex-col'>
             {actions.map((action, i) => (
               <div
                 key={action.title}
                 className={cn(
-                  'flex items-center justify-between py-[12px]',
+                  'flex items-center justify-between py-3',
                   i > 0 && 'border-[var(--border-1)] border-t'
                 )}
               >
                 <div className='min-w-0 flex-1'>
-                  <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                  <span className='font-medium text-[var(--text-primary)] text-small'>
                     {action.title}
                   </span>
-                  <span className='block text-[12px] text-[var(--text-secondary)]'>
+                  <span className='block text-[var(--text-secondary)] text-caption'>
                     {action.description}
                   </span>
                 </div>
                 <Button
                   variant='primary'
-                  className='ml-[12px] shrink-0'
+                  className='ml-3 shrink-0'
                   onClick={action.onClick}
                   disabled={action.disabled}
                 >
@@ -1350,7 +1344,7 @@ function ManagePlanModal({
           </div>
 
           {error && (
-            <span className='mt-[4px] block text-[12px] text-[var(--text-error)]'>{error}</span>
+            <span className='mt-1 block text-[var(--text-error)] text-caption'>{error}</span>
           )}
         </ModalBody>
         <ModalFooter>
@@ -1386,11 +1380,9 @@ function BillingUsageNotificationsToggle() {
 
   return (
     <div className='flex items-center justify-between'>
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label htmlFor='usage-notifications'>Usage notifications</Label>
-        <span className='text-[13px] text-[var(--text-muted)]'>
-          Email me when I reach 80% usage
-        </span>
+        <span className='text-[var(--text-muted)] text-small'>Email me when I reach 80% usage</span>
       </div>
       <Switch
         id='usage-notifications'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx
index 3ec22ad20d..12b2560eff 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx
@@ -38,21 +38,21 @@ const PermissionSelector = React.memo<PermissionSelectorProps>(
       >
         <ButtonGroupItem
           value='read'
-          className='h-[22px] min-w-[38px] px-[6px] py-0 text-[11px]'
+          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
           title='View only'
         >
           Read
         </ButtonGroupItem>
         <ButtonGroupItem
           value='write'
-          className='h-[22px] min-w-[38px] px-[6px] py-0 text-[11px]'
+          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
           title='Edit content'
         >
           Write
         </ButtonGroupItem>
         <ButtonGroupItem
           value='admin'
-          className='h-[22px] min-w-[38px] px-[6px] py-0 text-[11px]'
+          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
           title='Full access'
         >
           Admin
@@ -120,16 +120,16 @@ export function MemberInvitationCard({
   }
 
   return (
-    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='px-[14px] py-[10px]'>
-        <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>Invite Team Members</h4>
-        <p className='text-[13px] text-[var(--text-muted)]'>
+    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='px-3.5 py-2.5'>
+        <h4 className='font-medium text-[var(--text-primary)] text-base'>Invite Team Members</h4>
+        <p className='text-[var(--text-muted)] text-small'>
           Add new members to your team and optionally give them access to specific workspaces
         </p>
       </div>
 
-      <div className='flex flex-col gap-[12px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
-        <div className='flex items-start gap-[8px]'>
+      <div className='flex flex-col gap-3 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
+        <div className='flex items-start gap-2'>
           <div className='flex-1'>
             <TagInput
               items={inviteEmails}
@@ -177,15 +177,15 @@ export function MemberInvitationCard({
               className='max-h-[320px] min-w-[240px] max-w-[240px] overflow-y-auto'
             >
               {isLoadingWorkspaces ? (
-                <div className='px-[6px] py-[16px] text-center'>
-                  <p className='text-[13px] text-[var(--text-tertiary)]'>Loading...</p>
+                <div className='px-1.5 py-4 text-center'>
+                  <p className='text-[var(--text-tertiary)] text-small'>Loading...</p>
                 </div>
               ) : userWorkspaces.length === 0 ? (
-                <div className='px-[6px] py-[16px] text-center'>
-                  <p className='text-[13px] text-[var(--text-tertiary)]'>No workspaces available</p>
+                <div className='px-1.5 py-4 text-center'>
+                  <p className='text-[var(--text-tertiary)] text-small'>No workspaces available</p>
                 </div>
               ) : (
-                <div className='flex flex-col gap-[2px]'>
+                <div className='flex flex-col gap-0.5'>
                   {userWorkspaces.map((workspace) => {
                     const isSelected = selectedWorkspaces.some(
                       (w) => w.workspaceId === workspace.id
@@ -195,7 +195,7 @@ export function MemberInvitationCard({
                     )
 
                     return (
-                      <div key={workspace.id} className='flex flex-col gap-[4px]'>
+                      <div key={workspace.id} className='flex flex-col gap-1'>
                         <DropdownMenuItem
                           onSelect={(e) => {
                             e.preventDefault()
@@ -216,8 +216,8 @@ export function MemberInvitationCard({
                           <span className='flex-1 truncate'>{workspace.name}</span>
                         </DropdownMenuItem>
                         {isSelected && (
-                          <div className='ml-[31px] flex items-center gap-[6px] pb-[4px]'>
-                            <span className='text-[11px] text-[var(--text-tertiary)]'>Access:</span>
+                          <div className='ml-[31px] flex items-center gap-1.5 pb-1'>
+                            <span className='text-[var(--text-tertiary)] text-xs'>Access:</span>
                             <PermissionSelector
                               value={
                                 (['read', 'write', 'admin'].includes(
@@ -248,7 +248,7 @@ export function MemberInvitationCard({
         </div>
 
         {invitationError && (
-          <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+          <p className='text-[var(--text-error)] text-small leading-tight'>
             {invitationError instanceof Error && invitationError.message
               ? invitationError.message
               : String(invitationError)}
@@ -256,7 +256,7 @@ export function MemberInvitationCard({
         )}
 
         {inviteSuccess && (
-          <p className='text-[11px] text-[var(--text-success)] leading-tight'>
+          <p className='text-[var(--text-success)] text-xs leading-tight'>
             Invitation sent successfully
             {selectedCount > 0 &&
               ` with access to ${selectedCount} workspace${selectedCount !== 1 ? 's' : ''}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
index 9ee29b4c4a..0686ad070b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -45,20 +45,20 @@ export function NoOrganizationView({
   if (hasTeamPlan || hasEnterprisePlan) {
     return (
       <div>
-        <div className='flex flex-col gap-[20px]'>
+        <div className='flex flex-col gap-5'>
           {/* Header - matching settings page style */}
           <div>
-            <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>
+            <h4 className='font-medium text-[var(--text-primary)] text-base'>
               Create Your Team Workspace
             </h4>
-            <p className='mt-[4px] text-[13px] text-[var(--text-muted)]'>
+            <p className='mt-1 text-[var(--text-muted)] text-small'>
               You're subscribed to a {hasEnterprisePlan ? 'enterprise' : 'team'} plan. Create your
               workspace to start collaborating with your team.
             </p>
           </div>
 
           {/* Form fields - clean layout without card */}
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             {/* Hidden decoy field to prevent browser autofill */}
             <input
               type='text'
@@ -69,7 +69,7 @@ export function NoOrganizationView({
               readOnly
             />
             <div>
-              <Label htmlFor='team-name-field' className='font-medium text-[13px]'>
+              <Label htmlFor='team-name-field' className='font-medium text-small'>
                 Team Name
               </Label>
               <Input
@@ -77,7 +77,7 @@ export function NoOrganizationView({
                 value={orgName}
                 onChange={onOrgNameChange}
                 placeholder='My Team'
-                className='mt-[4px]'
+                className='mt-1'
                 name='team_name_field'
                 autoComplete='off'
                 autoCorrect='off'
@@ -88,11 +88,11 @@ export function NoOrganizationView({
             </div>
 
             <div>
-              <Label htmlFor='orgSlug' className='font-medium text-[13px]'>
+              <Label htmlFor='orgSlug' className='font-medium text-small'>
                 Team URL
               </Label>
-              <div className='mt-[4px] flex items-center'>
-                <div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-[12px] py-[6px] text-[13px] text-[var(--text-muted)]'>
+              <div className='mt-1 flex items-center'>
+                <div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-3 py-1.5 text-[var(--text-muted)] text-small'>
                   sim.ai/team/
                 </div>
                 <Input
@@ -105,9 +105,9 @@ export function NoOrganizationView({
               </div>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {error && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{error}</p>
+                <p className='text-[var(--text-error)] text-small leading-tight'>{error}</p>
               )}
               <div className='flex justify-end'>
                 <Button
@@ -131,7 +131,7 @@ export function NoOrganizationView({
               </ModalDescription>
             </ModalHeader>
 
-            <div className='flex flex-col gap-[18px]'>
+            <div className='flex flex-col gap-4.5'>
               {/* Hidden decoy field to prevent browser autofill */}
               <input
                 type='text'
@@ -142,7 +142,7 @@ export function NoOrganizationView({
                 readOnly
               />
               <div>
-                <Label htmlFor='org-name-field' className='font-medium text-[13px]'>
+                <Label htmlFor='org-name-field' className='font-medium text-small'>
                   Organization Name
                 </Label>
                 <Input
@@ -151,7 +151,7 @@ export function NoOrganizationView({
                   value={orgName}
                   onChange={onOrgNameChange}
                   disabled={isCreatingOrg}
-                  className='mt-[4px]'
+                  className='mt-1'
                   name='org_name_field'
                   autoComplete='off'
                   autoCorrect='off'
@@ -162,7 +162,7 @@ export function NoOrganizationView({
               </div>
 
               <div>
-                <Label htmlFor='org-slug-field' className='font-medium text-[13px]'>
+                <Label htmlFor='org-slug-field' className='font-medium text-small'>
                   Organization Slug
                 </Label>
                 <Input
@@ -171,7 +171,7 @@ export function NoOrganizationView({
                   value={orgSlug}
                   onChange={(e) => setOrgSlug(e.target.value)}
                   disabled={isCreatingOrg}
-                  className='mt-[4px]'
+                  className='mt-1'
                   name='org_slug_field'
                   autoComplete='off'
                   autoCorrect='off'
@@ -182,7 +182,7 @@ export function NoOrganizationView({
               </div>
             </div>
 
-            {error && <p className='text-[13px] text-[var(--text-error)] leading-tight'>{error}</p>}
+            {error && <p className='text-[var(--text-error)] text-small leading-tight'>{error}</p>}
 
             <ModalFooter>
               <Button
@@ -207,10 +207,10 @@ export function NoOrganizationView({
   }
 
   return (
-    <div className='flex flex-col gap-[20px]'>
-      <div className='flex flex-col gap-[8px]'>
-        <h3 className='font-medium text-[15px] text-[var(--text-primary)]'>No Team Workspace</h3>
-        <p className='text-[13px] text-[var(--text-secondary)]'>
+    <div className='flex flex-col gap-5'>
+      <div className='flex flex-col gap-2'>
+        <h3 className='font-medium text-[var(--text-primary)] text-base'>No Team Workspace</h3>
+        <p className='text-[var(--text-secondary)] text-small'>
           You don't have a team workspace yet. To collaborate with others, first upgrade to a team
           or enterprise plan.
         </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
index 67b148c268..01057633c3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
@@ -50,18 +50,18 @@ export function RemoveMemberDialog({
           </p>
 
           {!isSelfRemoval && (
-            <div className='mt-[16px]'>
-              <div className='flex items-center gap-[8px]'>
+            <div className='mt-4'>
+              <div className='flex items-center gap-2'>
                 <Checkbox
                   id='reduce-seats'
                   checked={shouldReduceSeats}
                   onCheckedChange={(checked) => onShouldReduceSeatsChange(checked === true)}
                 />
-                <label htmlFor='reduce-seats' className='text-[13px] text-[var(--text-primary)]'>
+                <label htmlFor='reduce-seats' className='text-[var(--text-primary)] text-small'>
                   Also reduce seat count in my subscription
                 </label>
               </div>
-              <p className='mt-[4px] text-[13px] text-[var(--text-muted)]'>
+              <p className='mt-1 text-[var(--text-muted)] text-small'>
                 If selected, your team seat count will be reduced by 1, lowering your monthly
                 billing.
               </p>
@@ -69,8 +69,8 @@ export function RemoveMemberDialog({
           )}
 
           {error && (
-            <div className='mt-[8px]'>
-              <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+            <div className='mt-2'>
+              <p className='text-[var(--text-error)] text-small leading-tight'>
                 {error instanceof Error && error.message ? error.message : String(error)}
               </p>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx
index 13c3cf6e34..3424c88223 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx
@@ -230,18 +230,18 @@ export function TeamMembers({
   }
 
   return (
-    <div className='flex flex-col gap-[18px]'>
+    <div className='flex flex-col gap-4.5'>
       {/* Header */}
       <div>
-        <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>Team Members</h4>
+        <h4 className='font-medium text-[var(--text-primary)] text-base'>Team Members</h4>
       </div>
 
       {/* Members list */}
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         {teamItems.map((item) => (
           <div key={item.id} className='flex items-center justify-between'>
             {/* Left section: Avatar + Name/Role + Action buttons */}
-            <div className='flex flex-1 items-center gap-[12px]'>
+            <div className='flex flex-1 items-center gap-3'>
               {/* Avatar */}
               <Avatar className='h-9 w-9'>
                 {item.avatarUrl && <AvatarImage src={item.avatarUrl} alt={item.name} />}
@@ -255,8 +255,8 @@ export function TeamMembers({
 
               {/* Name and email */}
               <div className='min-w-0'>
-                <div className='flex items-center gap-[8px]'>
-                  <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                <div className='flex items-center gap-2'>
+                  <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                     {item.name}
                   </span>
                   {item.type === 'member' && (
@@ -273,7 +273,7 @@ export function TeamMembers({
                     </Badge>
                   )}
                 </div>
-                <div className='truncate text-[14px] text-[var(--text-muted)]'>{item.email}</div>
+                <div className='truncate text-[var(--text-muted)] text-sm'>{item.email}</div>
               </div>
 
               {/* Action buttons for members */}
@@ -293,20 +293,20 @@ export function TeamMembers({
 
             {/* Right section */}
             {isAdminOrOwner && (
-              <div className='ml-[16px] flex flex-col items-end'>
+              <div className='ml-4 flex flex-col items-end'>
                 {item.type === 'member' ? (
                   <>
-                    <div className='text-[13px] text-[var(--text-muted)]'>Usage</div>
-                    <div className='font-medium text-[13px] text-[var(--text-primary)] tabular-nums'>
+                    <div className='text-[var(--text-muted)] text-small'>Usage</div>
+                    <div className='font-medium text-[var(--text-primary)] text-small tabular-nums'>
                       {isLoadingUsage ? (
-                        <span className='inline-block h-3 w-12 animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
+                        <span className='inline-block h-3 w-12 animate-pulse rounded-sm bg-[var(--surface-4)]' />
                       ) : (
                         item.usage
                       )}
                     </div>
                   </>
                 ) : (
-                  <div className='flex items-center gap-[4px]'>
+                  <div className='flex items-center gap-1'>
                     <Button
                       variant='ghost'
                       onClick={() => handleResendInvitation(item.invitation.id)}
@@ -340,7 +340,7 @@ export function TeamMembers({
 
       {/* Leave Organization button */}
       {canLeaveOrganization && (
-        <div className='mt-[4px] border-[var(--border-1)] border-t pt-[16px]'>
+        <div className='mt-1 border-[var(--border-1)] border-t pt-4'>
           <Button
             variant='active'
             onClick={() => {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
index 3c534acb89..82ec25ece7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -25,17 +25,17 @@ interface TeamSeatsOverviewProps {
 
 function TeamSeatsSkeleton() {
   return (
-    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='flex flex-col gap-[8px] px-[14px] py-[12px]'>
+    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='flex flex-col gap-2 px-3.5 py-3'>
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <Skeleton className='h-5 w-16 rounded-[4px]' />
-            <Skeleton className='h-4 w-20 rounded-[4px]' />
+          <div className='flex items-center gap-2'>
+            <Skeleton className='h-5 w-16 rounded-sm' />
+            <Skeleton className='h-4 w-20 rounded-sm' />
           </div>
-          <div className='flex items-center gap-[4px] text-[13px]'>
-            <Skeleton className='h-4 w-8 rounded-[4px]' />
+          <div className='flex items-center gap-1 text-small'>
+            <Skeleton className='h-4 w-8 rounded-sm' />
             <span className='text-[var(--text-muted)]'>/</span>
-            <Skeleton className='h-4 w-8 rounded-[4px]' />
+            <Skeleton className='h-4 w-8 rounded-sm' />
           </div>
         </div>
         <Skeleton className='h-[6px] w-full rounded-full' />
@@ -60,13 +60,13 @@ export function TeamSeatsOverview({
 
   if (!subscriptionData) {
     return (
-      <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-        <div className='flex flex-col items-center gap-[12px] px-[14px] py-[16px] text-center'>
-          <div className='flex flex-col gap-[4px]'>
-            <p className='font-medium text-[15px] text-[var(--text-primary)]'>
+      <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+        <div className='flex flex-col items-center gap-3 px-3.5 py-4 text-center'>
+          <div className='flex flex-col gap-1'>
+            <p className='font-medium text-[var(--text-primary)] text-base'>
               No Team Subscription Found
             </p>
-            <p className='text-[13px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-small'>
               Your subscription may need to be transferred to this organization.
             </p>
           </div>
@@ -87,12 +87,12 @@ export function TeamSeatsOverview({
   const isEnterprise = checkEnterprisePlan(subscriptionData)
 
   return (
-    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='flex flex-col gap-[8px] px-[14px] py-[12px]'>
+    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='flex flex-col gap-2 px-3.5 py-3'>
         {/* Top row - matching UsageHeader */}
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <span className='font-medium text-[15px] text-[var(--text-primary)]'>Seats</span>
+          <div className='flex items-center gap-2'>
+            <span className='font-medium text-[var(--text-primary)] text-base'>Seats</span>
             {!isEnterprise && (
               <Badge
                 variant='blue-secondary'
@@ -104,7 +104,7 @@ export function TeamSeatsOverview({
               </Badge>
             )}
           </div>
-          <div className='flex items-center gap-[4px] text-[13px] tabular-nums'>
+          <div className='flex items-center gap-1 text-small tabular-nums'>
             <span className='font-medium text-[var(--text-secondary)] tabular-nums'>
               {usedSeats} used
             </span>
@@ -116,7 +116,7 @@ export function TeamSeatsOverview({
         </div>
 
         {/* Pills row - one pill per seat */}
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {Array.from({ length: totalSeats }).map((_, i) => {
             const isFilled = i < usedSeats
             return (
@@ -124,7 +124,7 @@ export function TeamSeatsOverview({
                 key={i}
                 className={cn(
                   'h-[6px] flex-1 rounded-full transition-colors',
-                  isFilled ? 'bg-[#34B5FF]' : 'bg-[var(--border)]'
+                  isFilled ? 'bg-[var(--indicator-seat-filled)]' : 'bg-[var(--border)]'
                 )}
               />
             )
@@ -133,8 +133,8 @@ export function TeamSeatsOverview({
 
         {/* Enterprise message */}
         {isEnterprise && (
-          <div className='pt-[4px] text-center'>
-            <p className='text-[13px] text-[var(--text-muted)]'>
+          <div className='pt-1 text-center'>
+            <p className='text-[var(--text-muted)] text-small'>
               Contact support for enterprise usage limit changes
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx
index 60731dc451..b6d45e817f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx
@@ -70,8 +70,8 @@ export function TeamSeats({
         <ModalBody>
           <p className='text-[var(--text-secondary)]'>{description}</p>
 
-          <div className='mt-[16px] flex flex-col gap-[4px]'>
-            <Label htmlFor='seats' className='text-[13px]'>
+          <div className='mt-4 flex flex-col gap-1'>
+            <Label htmlFor='seats' className='text-small'>
               Number of seats
             </Label>
             <Combobox
@@ -89,22 +89,22 @@ export function TeamSeats({
             />
           </div>
 
-          <p className='mt-[12px] text-[13px] text-[var(--text-muted)]'>
+          <p className='mt-3 text-[var(--text-muted)] text-small'>
             Your team will have {selectedSeats} {selectedSeats === 1 ? 'seat' : 'seats'} with a
             total of {(selectedSeats * seatCredits).toLocaleString()} inference credits per month.
           </p>
 
           {showCostBreakdown && currentSeats !== undefined && (
-            <div className='mt-[16px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[12px] py-[10px]'>
-              <div className='flex justify-between text-[13px]'>
+            <div className='mt-4 rounded-md border border-[var(--border-1)] bg-[var(--surface-4)] px-3 py-2.5'>
+              <div className='flex justify-between text-small'>
                 <span className='text-[var(--text-muted)]'>Current seats:</span>
                 <span className='text-[var(--text-primary)]'>{currentSeats}</span>
               </div>
-              <div className='mt-[8px] flex justify-between text-[13px]'>
+              <div className='mt-2 flex justify-between text-small'>
                 <span className='text-[var(--text-muted)]'>New seats:</span>
                 <span className='text-[var(--text-primary)]'>{selectedSeats}</span>
               </div>
-              <div className='mt-[12px] flex justify-between border-[var(--border-1)] border-t pt-[12px] text-[13px]'>
+              <div className='mt-3 flex justify-between border-[var(--border-1)] border-t pt-3 text-small'>
                 <span className='font-medium text-[var(--text-primary)]'>
                   Monthly credit change:
                 </span>
@@ -120,7 +120,7 @@ export function TeamSeats({
           )}
 
           {error && (
-            <p className='mt-[12px] text-[13px] text-[var(--text-error)]'>
+            <p className='mt-3 text-[var(--text-error)] text-small'>
               {error instanceof Error && error.message ? error.message : String(error)}
             </p>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
index 0c8e0243a4..9c9f7d8add 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
@@ -292,27 +292,27 @@ export function TeamManagement() {
 
   if (isLoading && !displayOrganization && !(hasTeamPlan || hasEnterprisePlan)) {
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         {/* Team Seats Overview */}
         <div>
-          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4 shadow-xs'>
-            <div className='space-y-[12px]'>
+          <div className='rounded-lg border bg-[var(--surface-3)] p-4 shadow-xs'>
+            <div className='space-y-3'>
               <div className='flex items-center justify-between'>
                 <Skeleton className='h-5 w-24' />
-                <Skeleton className='h-8 w-20 rounded-[6px]' />
+                <Skeleton className='h-8 w-20 rounded-md' />
               </div>
-              <div className='flex items-center gap-[18px]'>
-                <div className='flex flex-col gap-[4px]'>
+              <div className='flex items-center gap-4.5'>
+                <div className='flex flex-col gap-1'>
                   <Skeleton className='h-3 w-16' />
                   <Skeleton className='h-6 w-8' />
                 </div>
                 <div className='h-8 w-px bg-[var(--border)]' />
-                <div className='flex flex-col gap-[4px]'>
+                <div className='flex flex-col gap-1'>
                   <Skeleton className='h-3 w-20' />
                   <Skeleton className='h-6 w-8' />
                 </div>
                 <div className='h-8 w-px bg-[var(--border)]' />
-                <div className='flex flex-col gap-[4px]'>
+                <div className='flex flex-col gap-1'>
                   <Skeleton className='h-3 w-24' />
                   <Skeleton className='h-6 w-12' />
                 </div>
@@ -323,13 +323,13 @@ export function TeamManagement() {
 
         {/* Team Members */}
         <div>
-          <Skeleton className='mb-[12px] h-5 w-32' />
-          <div className='space-y-[8px]'>
+          <Skeleton className='mb-3 h-5 w-32' />
+          <div className='space-y-2'>
             {[...Array(3)].map((_, i) => (
-              <div key={i} className='flex items-center justify-between rounded-[8px] border p-3'>
-                <div className='flex items-center gap-[12px]'>
+              <div key={i} className='flex items-center justify-between rounded-lg border p-3'>
+                <div className='flex items-center gap-3'>
                   <Skeleton className='h-10 w-10 rounded-full' />
-                  <div className='space-y-[4px]'>
+                  <div className='space-y-1'>
                     <Skeleton className='h-4 w-32' />
                     <Skeleton className='h-3 w-24' />
                   </div>
@@ -342,11 +342,11 @@ export function TeamManagement() {
 
         {/* Invite Member Card */}
         <div>
-          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4'>
-            <Skeleton className='mb-[12px] h-5 w-32' />
-            <div className='space-y-[12px]'>
-              <Skeleton className='h-9 w-full rounded-[8px]' />
-              <Skeleton className='h-9 w-full rounded-[8px]' />
+          <div className='rounded-lg border bg-[var(--surface-3)] p-4'>
+            <Skeleton className='mb-3 h-5 w-32' />
+            <div className='space-y-3'>
+              <Skeleton className='h-9 w-full rounded-lg' />
+              <Skeleton className='h-9 w-full rounded-lg' />
             </div>
           </div>
         </div>
@@ -374,7 +374,7 @@ export function TeamManagement() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[20px]'>
+    <div className='flex h-full flex-col gap-5'>
       {/* Seats Overview - Full Width */}
       {adminOrOwner && (
         <div>
@@ -425,11 +425,11 @@ export function TeamManagement() {
       </div>
 
       {/* Additional Info - Subtle and collapsed */}
-      <div className='flex flex-col gap-[10px]'>
+      <div className='flex flex-col gap-2.5'>
         {/* Single Organization Notice */}
         {adminOrOwner && (
-          <div className='rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[14px] py-[10px]'>
-            <p className='text-[13px] text-[var(--text-muted)]'>
+          <div className='rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-3.5 py-2.5'>
+            <p className='text-[var(--text-muted)] text-small'>
               <span className='font-medium'>Note:</span> Users can only be part of one organization
               at a time.
             </p>
@@ -437,8 +437,8 @@ export function TeamManagement() {
         )}
 
         {/* Team Information */}
-        <details className='group overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-          <summary className='flex cursor-pointer items-center justify-between px-[14px] py-[10px] font-medium text-[15px] text-[var(--text-primary)] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+        <details className='group overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+          <summary className='flex cursor-pointer items-center justify-between px-3.5 py-2.5 font-medium text-[var(--text-primary)] text-base hover-hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
             <span>Team Information</span>
             <svg
               className='h-4 w-4 transition-transform group-open:rotate-180'
@@ -454,10 +454,10 @@ export function TeamManagement() {
               />
             </svg>
           </summary>
-          <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px] text-[13px]'>
+          <div className='flex flex-col gap-2 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3 text-small'>
             <div className='flex justify-between'>
               <span className='text-[var(--text-muted)]'>Team ID:</span>
-              <span className='font-mono text-[10px] text-[var(--text-primary)]'>
+              <span className='font-mono text-[var(--text-primary)] text-micro'>
                 {displayOrganization.id}
               </span>
             </div>
@@ -476,8 +476,8 @@ export function TeamManagement() {
 
         {/* Team Billing Information (only show for Team Plan, not Enterprise) */}
         {hasTeamPlan && !hasEnterprisePlan && (
-          <details className='group overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-            <summary className='flex cursor-pointer items-center justify-between px-[14px] py-[10px] font-medium text-[15px] text-[var(--text-primary)] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+          <details className='group overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+            <summary className='flex cursor-pointer items-center justify-between px-3.5 py-2.5 font-medium text-[var(--text-primary)] text-base hover-hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
               <span>Billing Information</span>
               <svg
                 className='h-4 w-4 transition-transform group-open:rotate-180'
@@ -493,8 +493,8 @@ export function TeamManagement() {
                 />
               </svg>
             </summary>
-            <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
-              <ul className='ml-4 flex list-disc flex-col gap-[8px] text-[13px] text-[var(--text-muted)]'>
+            <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
+              <ul className='ml-4 flex list-disc flex-col gap-2 text-[var(--text-muted)] text-small'>
                 <li>
                   Your team is billed a minimum of $
                   {((subscriptionData?.seats ?? 0) * costPerSeat).toLocaleString()}/month for{' '}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx
index 0930cceda3..d43113dd59 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx
@@ -256,26 +256,26 @@ export function TemplateProfile() {
 
   if (isLoading) {
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             {/* Display Skeleton */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[50px]' />
-              <div className='flex items-center gap-[10px]'>
+              <div className='flex items-center gap-2.5'>
                 <Skeleton className='h-9 w-9 flex-shrink-0 rounded-full' />
                 <Skeleton className='h-9 flex-1' />
               </div>
             </div>
 
             {/* About Skeleton */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[35px]' />
               <Skeleton className='min-h-[100px] w-full' />
             </div>
 
             {/* Socials Skeleton */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[45px]' />
               <Skeleton className='h-9 w-full' />
               <Skeleton className='h-9 w-full' />
@@ -286,7 +286,7 @@ export function TemplateProfile() {
         </div>
 
         {/* Save Button Skeleton */}
-        <div className='mt-auto flex items-center justify-end gap-[8px]'>
+        <div className='mt-auto flex items-center justify-end gap-2'>
           <Skeleton className='h-9 w-[60px]' />
         </div>
       </div>
@@ -294,14 +294,14 @@ export function TemplateProfile() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* Scrollable Content */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[18px]'>
+        <div className='flex flex-col gap-4.5'>
           {/* Profile Selection - only show if user has organizations */}
           {organizations.length > 0 && (
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Profile</span>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Profile</span>
               <Combobox
                 options={[
                   { label: 'Personal', value: userId },
@@ -326,14 +326,14 @@ export function TemplateProfile() {
           )}
 
           {/* Display */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Display<span className='ml-[6px] text-[var(--text-secondary)]'>*</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>
+              Display<span className='ml-1.5 text-[var(--text-secondary)]'>*</span>
             </span>
-            <div className='flex items-center gap-[10px]'>
+            <div className='flex items-center gap-2.5'>
               <div className='relative'>
                 <div
-                  className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border transition-all hover:bg-[var(--bg)] ${
+                  className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border transition-all hover-hover:bg-[var(--bg)] ${
                     profilePictureUrl && !imageLoadError
                       ? 'border-transparent'
                       : 'border-[var(--border)]'
@@ -359,7 +359,7 @@ export function TemplateProfile() {
                     const initials = getInitials(formData.name)
                     if (initials) {
                       return (
-                        <span className='font-medium text-[15px] text-[var(--text-primary)]'>
+                        <span className='font-medium text-[var(--text-primary)] text-base'>
                           {initials}
                         </span>
                       )
@@ -411,12 +411,12 @@ export function TemplateProfile() {
                 data-form-type='other'
               />
             </div>
-            {uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
+            {uploadError && <p className='text-[var(--text-error)] text-small'>{uploadError}</p>}
           </div>
 
           {/* About */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>About</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>About</span>
             <Textarea
               placeholder='Tell people about yourself or your organization'
               value={formData.about}
@@ -426,8 +426,8 @@ export function TemplateProfile() {
           </div>
 
           {/* Social Links */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Socials</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Socials</span>
 
             <div>
               <div className='relative'>
@@ -436,11 +436,11 @@ export function TemplateProfile() {
                   placeholder='x.com/username'
                   value={formData.xUrl}
                   onChange={(e) => updateField('xUrl', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.xUrl && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>{fieldErrors.xUrl}</p>
+                <p className='mt-1 text-[var(--text-error)] text-small'>{fieldErrors.xUrl}</p>
               )}
             </div>
 
@@ -451,11 +451,11 @@ export function TemplateProfile() {
                   placeholder='linkedin.com/in/username'
                   value={formData.linkedinUrl}
                   onChange={(e) => updateField('linkedinUrl', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.linkedinUrl && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>
+                <p className='mt-1 text-[var(--text-error)] text-small'>
                   {fieldErrors.linkedinUrl}
                 </p>
               )}
@@ -468,13 +468,11 @@ export function TemplateProfile() {
                   placeholder='yourwebsite.com'
                   value={formData.websiteUrl}
                   onChange={(e) => updateField('websiteUrl', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.websiteUrl && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>
-                  {fieldErrors.websiteUrl}
-                </p>
+                <p className='mt-1 text-[var(--text-error)] text-small'>{fieldErrors.websiteUrl}</p>
               )}
             </div>
 
@@ -486,11 +484,11 @@ export function TemplateProfile() {
                   type='email'
                   value={formData.contactEmail}
                   onChange={(e) => updateField('contactEmail', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.contactEmail && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>
+                <p className='mt-1 text-[var(--text-error)] text-small'>
                   {fieldErrors.contactEmail}
                 </p>
               )}
@@ -499,8 +497,8 @@ export function TemplateProfile() {
         </div>
       </div>
 
-      <div className='mt-auto flex items-center justify-end gap-[8px]'>
-        {saveError && <p className='mr-auto text-[13px] text-[var(--text-error)]'>{saveError}</p>}
+      <div className='mt-auto flex items-center justify-end gap-2'>
+        {saveError && <p className='mr-auto text-[var(--text-error)] text-small'>{saveError}</p>}
         <Button
           onClick={handleSubmit}
           disabled={saveStatus === 'saving' || !isFormValid}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx
index 6cb1994abf..6cd8b16901 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx
@@ -56,28 +56,24 @@ export function UsageHeader({
   const isOnDemandActive = onDemandState === 'disable'
 
   return (
-    <div className='flex flex-col gap-[12px]'>
+    <div className='flex flex-col gap-3'>
       <div className='flex items-center justify-between'>
-        <div className='flex flex-col gap-[4px]'>
-          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+        <div className='flex flex-col gap-1'>
+          <span className='font-medium text-[var(--text-secondary)] text-small'>
             {title}
-            {seatsText && (
-              <span className='ml-[6px] text-[var(--text-tertiary)]'>({seatsText})</span>
-            )}
+            {seatsText && <span className='ml-1.5 text-[var(--text-tertiary)]'>({seatsText})</span>}
           </span>
-          <div className='flex items-center gap-[4px]'>
+          <div className='flex items-center gap-1'>
             {isBlocked ? (
-              <span className='font-medium text-[15px] text-[var(--text-error)]'>
-                Payment failed
-              </span>
+              <span className='font-medium text-[var(--text-error)] text-base'>Payment failed</span>
             ) : (
               <>
-                <span className='font-medium text-[15px] text-[var(--text-primary)] tabular-nums'>
+                <span className='font-medium text-[var(--text-primary)] text-base tabular-nums'>
                   {formatCredits(current)}
                 </span>
-                <span className='font-medium text-[15px] text-[var(--text-primary)]'>/</span>
+                <span className='font-medium text-[var(--text-primary)] text-base'>/</span>
                 {rightContent ?? (
-                  <span className='font-medium text-[15px] text-[var(--text-primary)] tabular-nums'>
+                  <span className='font-medium text-[var(--text-primary)] text-base tabular-nums'>
                     {formatCredits(limit)}
                     {limit < ON_DEMAND_UNLIMITED && ' credits'}
                   </span>
@@ -88,10 +84,7 @@ export function UsageHeader({
         </div>
 
         <div
-          className={cn(
-            'flex flex-col gap-[8px]',
-            showOnDemandBadge ? 'items-center' : 'items-end'
-          )}
+          className={cn('flex flex-col gap-2', showOnDemandBadge ? 'items-center' : 'items-end')}
         >
           {showOnDemandBadge ? (
             <Badge
@@ -114,13 +107,13 @@ export function UsageHeader({
               </Badge>
             )
           )}
-          <div className='flex w-[100px] items-center gap-[4px]'>
+          <div className='flex w-[100px] items-center gap-1'>
             {Array.from({ length: PILL_COUNT }).map((_, i) => {
               const isFilled = i < filledPillsCount
               return (
                 <div
                   key={i}
-                  className='h-[6px] flex-1 rounded-[2px]'
+                  className='h-[6px] flex-1 rounded-xs'
                   style={{
                     backgroundColor: isFilled ? filledColor : USAGE_PILL_COLORS.UNFILLED,
                   }}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx
index 168d8aedba..f0be6e2139 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx
@@ -174,10 +174,10 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
     const inputWidthCh = Math.max(3, inputValue.length + 2)
 
     return (
-      <div className='flex items-center gap-[6px]'>
+      <div className='flex items-center gap-1.5'>
         {isEditing ? (
           <>
-            <span className='font-medium text-[15px] text-[var(--text-muted)]'>$</span>
+            <span className='font-medium text-[var(--text-muted)] text-base'>$</span>
             <input
               ref={inputRef}
               type='number'
@@ -192,7 +192,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
                 handleSubmit()
               }}
               className={cn(
-                'border-0 bg-transparent p-0 font-medium text-[15px] text-[var(--text-primary)] tabular-nums',
+                'border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-base tabular-nums',
                 'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
                 '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
                 hasError && 'text-[var(--text-error)]'
@@ -222,7 +222,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
           </>
         ) : (
           <>
-            <span className='font-medium text-[15px] text-[var(--text-primary)] tabular-nums'>
+            <span className='font-medium text-[var(--text-primary)] text-base tabular-nums'>
               {formatCredits(pendingLimit !== null ? pendingLimit : currentLimit)}
               {(pendingLimit !== null ? pendingLimit : currentLimit) < ON_DEMAND_UNLIMITED &&
                 ' credits'}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 20d031a246..3ff652e94f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -302,7 +302,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   if (isLoading) {
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <Skeleton className='h-[24px] w-[200px]' />
         <Skeleton className='h-[100px] w-full' />
         <Skeleton className='h-[150px] w-full' />
@@ -312,8 +312,8 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   if (error || !data) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-        <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+      <div className='flex h-full flex-col items-center justify-center gap-2'>
+        <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
           Failed to load server details
         </p>
         <Button variant='default' onClick={onBack}>
@@ -327,7 +327,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <SModalTabs
           value={activeServerTab}
           onValueChange={(value) => setActiveServerTab(value as 'workflows' | 'details')}
@@ -340,11 +340,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
           <SModalTabsBody className='min-h-[300px]'>
             <SModalTabsContent value='workflows'>
-              <div className='flex flex-col gap-[18px]'>
+              <div className='flex flex-col gap-4.5'>
                 <div className='flex items-center justify-between'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                    Workflows
-                  </span>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>Workflows</span>
                   {showAddDisabledTooltip ? (
                     <Tooltip.Root>
                       <Tooltip.Trigger asChild>
@@ -354,7 +352,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                             onClick={() => setShowAddWorkflow(true)}
                             disabled
                           >
-                            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                            <Plus className='mr-1.5 h-[13px] w-[13px]' />
                             Add
                           </Button>
                         </div>
@@ -369,27 +367,27 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                       onClick={() => setShowAddWorkflow(true)}
                       disabled={!canAddWorkflow}
                     >
-                      <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                      <Plus className='mr-1.5 h-[13px] w-[13px]' />
                       Add
                     </Button>
                   )}
                 </div>
 
                 {tools.length === 0 ? (
-                  <p className='text-[14px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-sm'>
                     No workflows added yet. Click "Add" to add a deployed workflow.
                   </p>
                 ) : (
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     {tools.map((tool) => (
-                      <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
+                      <div key={tool.id} className='flex items-center justify-between gap-3'>
                         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                          <span className='font-medium text-[15px]'>{tool.toolName}</span>
-                          <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                          <span className='font-medium text-base'>{tool.toolName}</span>
+                          <p className='truncate text-[var(--text-muted)] text-sm'>
                             {tool.toolDescription || 'No description'}
                           </p>
                         </div>
-                        <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                        <div className='flex flex-shrink-0 items-center gap-1'>
                           <Button variant='default' onClick={() => setToolToView(tool)}>
                             Edit
                           </Button>
@@ -407,7 +405,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 )}
 
                 {deployedWorkflows.length === 0 && !isLoadingWorkflows && (
-                  <p className='mt-[4px] text-[11px] text-[var(--text-muted)]'>
+                  <p className='mt-1 text-[var(--text-muted)] text-xs'>
                     Deploy a workflow first to add it to this server.
                   </p>
                 )}
@@ -415,49 +413,45 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
             </SModalTabsContent>
 
             <SModalTabsContent value='details'>
-              <div className='flex flex-col gap-[18px]'>
-                <div className='grid grid-cols-[1fr_1fr_1fr] gap-x-[24px] gap-y-[14px]'>
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+              <div className='flex flex-col gap-4.5'>
+                <div className='grid grid-cols-[1fr_1fr_1fr] gap-x-6 gap-y-3.5'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
                       Server Name
                     </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>{server.name}</p>
+                    <p className='text-[var(--text-secondary)] text-base'>{server.name}</p>
                   </div>
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
                       Transport
                     </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>Streamable-HTTP</p>
+                    <p className='text-[var(--text-secondary)] text-base'>Streamable-HTTP</p>
                   </div>
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                      Access
-                    </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>Access</span>
+                    <p className='text-[var(--text-secondary)] text-base'>
                       {server.isPublic ? 'Public' : 'API Key'}
                     </p>
                   </div>
                 </div>
 
                 {server.description?.trim() && (
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
                       Description
                     </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>{server.description}</p>
+                    <p className='text-[var(--text-secondary)] text-base'>{server.description}</p>
                   </div>
                 )}
 
-                <div className='flex flex-col gap-[4px]'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>URL</span>
-                  <p className='break-all text-[15px] text-[var(--text-secondary)]'>
-                    {mcpServerUrl}
-                  </p>
+                <div className='flex flex-col gap-1'>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>URL</span>
+                  <p className='break-all text-[var(--text-secondary)] text-base'>{mcpServerUrl}</p>
                 </div>
 
                 <div>
                   <div className='mb-[6.5px] flex items-center justify-between'>
-                    <span className='block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                    <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                       MCP Client
                     </span>
                   </div>
@@ -474,9 +468,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 </div>
 
                 {activeConfigTab === 'sim' ? (
-                  <div className='rounded-[8px] border border-[var(--border-1)] p-[16px]'>
-                    <div className='flex flex-col gap-[12px]'>
-                      <p className='text-[13px] text-[var(--text-secondary)]'>
+                  <div className='rounded-lg border border-[var(--border-1)] p-4'>
+                    <div className='flex flex-col gap-3'>
+                      <p className='text-[var(--text-secondary)] text-small'>
                         Add this MCP server to your workspace so you can use its tools in other
                         workflows via the MCP block.
                       </p>
@@ -514,18 +508,18 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                           'Adding...'
                         ) : addedToWorkspace ? (
                           <>
-                            <Check className='mr-[6px] h-[13px] w-[13px]' />
+                            <Check className='mr-1.5 h-[13px] w-[13px]' />
                             Added to Workspace
                           </>
                         ) : (
                           <>
-                            <Server className='mr-[6px] h-[13px] w-[13px]' />
+                            <Server className='mr-1.5 h-[13px] w-[13px]' />
                             Add to Workspace
                           </>
                         )}
                       </Button>
                       {addToWorkspaceMutation.isError && (
-                        <p className='text-[11px] text-[var(--text-error)]'>
+                        <p className='text-[var(--text-error)] text-xs'>
                           {addToWorkspaceMutation.error?.message || 'Failed to add server'}
                         </p>
                       )}
@@ -534,7 +528,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 ) : (
                   <div>
                     <div className='mb-[6.5px] flex items-center justify-between'>
-                      <span className='block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                      <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                         Configuration
                       </span>
                       <Button
@@ -554,28 +548,28 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                         code={getConfigSnippet(activeConfigTab, server.isPublic, server.name)}
                         language={activeConfigTab === 'claude-code' ? 'javascript' : 'json'}
                         wrapText
-                        className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+                        className='!min-h-0 rounded-sm border border-[var(--border-1)]'
                       />
                       {activeConfigTab === 'cursor' && (
                         <a
                           href={getCursorInstallUrl(server.isPublic, server.name)}
-                          className='absolute top-[6px] right-2 inline-flex rounded-[6px] bg-[var(--surface-5)] ring-1 ring-[var(--border-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+                          className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-1 ring-[var(--border-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
                         >
                           <img
                             src='https://cursor.com/deeplink/mcp-install-dark.svg'
                             alt='Add to Cursor'
-                            className='h-[26px] rounded-[6px] align-middle'
+                            className='h-[26px] rounded-md align-middle'
                           />
                         </a>
                       )}
                     </div>
                     {!server.isPublic && (
-                      <p className='mt-[8px] text-[11px] text-[var(--text-muted)]'>
+                      <p className='mt-2 text-[var(--text-muted)] text-xs'>
                         Replace $SIM_API_KEY with your API key, or{' '}
                         <button
                           type='button'
                           onClick={() => setShowCreateApiKeyModal(true)}
-                          className='underline hover:text-[var(--text-secondary)]'
+                          className='underline hover-hover:text-[var(--text-secondary)]'
                         >
                           create one now
                         </button>
@@ -592,7 +586,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
           <Button onClick={onBack} variant='default'>
             Back
           </Button>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             {activeServerTab === 'details' && (
               <>
                 <Button onClick={handleOpenEditServer} variant='default'>
@@ -666,9 +660,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
         <ModalContent size='md'>
           <ModalHeader>{toolToView?.toolName}</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[18px]'>
+            <div className='flex flex-col gap-4.5'>
               <div>
-                <Label className='mb-[6.5px] block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                   Description
                 </Label>
                 <Textarea
@@ -687,19 +681,19 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 const hasParams = properties && Object.keys(properties).length > 0
                 return (
                   <div>
-                    <Label className='mb-[6.5px] block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                    <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                       Parameters
                     </Label>
                     {hasParams ? (
-                      <div className='flex flex-col gap-[8px]'>
+                      <div className='flex flex-col gap-2'>
                         {Object.entries(properties).map(([name, prop]) => (
                           <div
                             key={name}
-                            className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'
+                            className='overflow-hidden rounded-sm border border-[var(--border-1)]'
                           >
-                            <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
-                              <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                                <span className='block truncate font-medium text-[15px] text-[var(--text-tertiary)]'>
+                            <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
+                              <div className='flex min-w-0 flex-1 items-center gap-2'>
+                                <span className='block truncate font-medium text-[var(--text-tertiary)] text-base'>
                                   {name}
                                 </span>
                                 <Badge variant='type' size='sm'>
@@ -707,9 +701,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                                 </Badge>
                               </div>
                             </div>
-                            <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                              <div className='flex flex-col gap-[6px]'>
-                                <Label className='text-[14px]'>Description</Label>
+                            <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                              <div className='flex flex-col gap-1.5'>
+                                <Label className='text-sm'>Description</Label>
                                 <EmcnInput
                                   value={editingParameterDescriptions[name] || ''}
                                   onChange={(e) =>
@@ -726,7 +720,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                         ))}
                       </div>
                     ) : (
-                      <p className='text-[14px] text-[var(--text-muted)]'>
+                      <p className='text-[var(--text-muted)] text-sm'>
                         No inputs configured for this workflow.
                       </p>
                     )}
@@ -821,8 +815,8 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
               as a tool.
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <Label className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='mt-4 flex flex-col gap-2'>
+              <Label className='font-medium text-[var(--text-secondary)] text-sm'>
                 Select Workflow
               </Label>
               <Combobox
@@ -842,7 +836,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 }
               />
               {addToolMutation.isError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+                <p className='text-[var(--text-error)] text-small leading-tight'>
                   {addToolMutation.error?.message || 'Failed to add workflow'}
                 </p>
               )}
@@ -881,7 +875,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
         <ModalContent size='lg'>
           <ModalHeader>Edit Server</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
+            <div className='flex flex-col gap-3'>
               <FormField label='Server Name'>
                 <EmcnInput
                   placeholder='e.g., My MCP Server'
@@ -909,7 +903,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                   <ButtonGroupItem value='public'>Public</ButtonGroupItem>
                 </ButtonGroup>
               </FormField>
-              <p className='text-[11px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-xs'>
                 {editServerIsPublic
                   ? 'Anyone with the URL can call this server without authentication'
                   : 'Requests must include your Sim API key in the X-API-Key header'}
@@ -1046,9 +1040,9 @@ export function WorkflowMcpServers() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1061,41 +1055,39 @@ export function WorkflowMcpServers() {
             />
           </div>
           <Button onClick={() => setShowAddModal(true)} disabled={isLoading} variant='primary'>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load MCP servers'}
               </p>
             </div>
           ) : isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <McpServerSkeleton />
               <McpServerSkeleton />
               <McpServerSkeleton />
             </div>
           ) : !hasServers ? (
             <div className='flex h-full items-center justify-center'>
-              <p className='text-[14px] text-[var(--text-muted)]'>
-                Click "Add" above to get started
-              </p>
+              <p className='text-[var(--text-muted)] text-sm'>Click "Add" above to get started</p>
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredServers.map((server) => {
                 const count = server.toolCount || 0
                 const toolsLabel = `${count} tool${count !== 1 ? 's' : ''}`
                 const isDeleting = deletingServers.has(server.id)
                 return (
-                  <div key={server.id} className='flex items-center justify-between gap-[12px]'>
+                  <div key={server.id} className='flex items-center justify-between gap-3'>
                     <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                      <div className='flex items-center gap-[6px]'>
-                        <span className='max-w-[200px] truncate font-medium text-[15px]'>
+                      <div className='flex items-center gap-1.5'>
+                        <span className='max-w-[200px] truncate font-medium text-base'>
                           {server.name}
                         </span>
                         {server.isPublic && (
@@ -1104,9 +1096,9 @@ export function WorkflowMcpServers() {
                           </Badge>
                         )}
                       </div>
-                      <p className='truncate text-[14px] text-[var(--text-muted)]'>{toolsLabel}</p>
+                      <p className='truncate text-[var(--text-muted)] text-sm'>{toolsLabel}</p>
                     </div>
-                    <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                    <div className='flex flex-shrink-0 items-center gap-1'>
                       <Button variant='default' onClick={() => setSelectedServerId(server.id)}>
                         Details
                       </Button>
@@ -1122,7 +1114,7 @@ export function WorkflowMcpServers() {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No servers found matching "{searchTerm}"
                 </div>
               )}
@@ -1135,7 +1127,7 @@ export function WorkflowMcpServers() {
         <ModalContent>
           <ModalHeader>Add New MCP Server</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
+            <div className='flex flex-col gap-3'>
               <FormField label='Server Name'>
                 <EmcnInput
                   placeholder='e.g., My MCP Server'
@@ -1178,7 +1170,7 @@ export function WorkflowMcpServers() {
               </FormField>
 
               <FormField label='Access'>
-                <div className='flex items-center gap-[12px]'>
+                <div className='flex items-center gap-3'>
                   <ButtonGroup
                     value={formData.isPublic ? 'public' : 'private'}
                     onValueChange={(value) =>
@@ -1189,7 +1181,7 @@ export function WorkflowMcpServers() {
                     <ButtonGroupItem value='public'>Public</ButtonGroupItem>
                   </ButtonGroup>
                   {formData.isPublic && (
-                    <span className='text-[11px] text-[var(--text-muted)]'>
+                    <span className='text-[var(--text-muted)] text-xs'>
                       No authentication required
                     </span>
                   )}
@@ -1198,7 +1190,7 @@ export function WorkflowMcpServers() {
             </div>
           </ModalBody>
           <ModalFooter>
-            <Button variant='ghost' onClick={resetForm}>
+            <Button variant='default' onClick={resetForm}>
               Cancel
             </Button>
             <Button
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx b/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx
index 76564966fb..0fab587de0 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx
@@ -1,7 +1,7 @@
 export default function SettingsLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className='h-full overflow-y-auto [scrollbar-gutter:stable]'>
-      <div className='mx-auto flex min-h-full max-w-[900px] flex-col px-[26px] pt-[36px] pb-[52px]'>
+      <div className='mx-auto flex min-h-full max-w-[900px] flex-col px-[26px] pt-9 pb-[52px]'>
         {children}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
index 6f35e7e309..1e08d230b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
@@ -158,7 +158,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
           <ModalHeader>Delete {isSingleRow ? 'Row' : `${deleteCount} Rows`}</ModalHeader>
           <ModalBody>
             {error && (
-              <div className='rounded-[8px] border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-[14px] py-[12px] text-[13px] text-[var(--status-error-text)]'>
+              <div className='rounded-lg border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-3.5 py-3 text-[var(--status-error-text)] text-small'>
                 {error}
               </div>
             )}
@@ -188,15 +188,15 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
     <Modal open={isOpen} onOpenChange={handleClose}>
       <ModalContent size='lg'>
         <ModalHeader>
-          <div className='flex flex-col gap-[4px]'>
-            <h2 className='font-semibold text-[16px]'>{isAddMode ? 'Add New Row' : 'Edit Row'}</h2>
-            <p className='font-normal text-[13px] text-[var(--text-tertiary)]'>
+          <div className='flex flex-col gap-1'>
+            <h2 className='font-semibold text-md'>{isAddMode ? 'Add New Row' : 'Edit Row'}</h2>
+            <p className='font-normal text-[var(--text-tertiary)] text-small'>
               {isAddMode ? 'Fill in the values for' : 'Update values for'} {table?.name ?? 'table'}
             </p>
           </div>
         </ModalHeader>
         <ModalBody className='max-h-[60vh] overflow-y-auto'>
-          <form onSubmit={handleFormSubmit} className='flex flex-col gap-[16px]'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col gap-4'>
             <ErrorMessage error={error} />
 
             {columns.map((column) => (
@@ -209,7 +209,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
             ))}
           </form>
         </ModalBody>
-        <ModalFooter className='gap-[10px]'>
+        <ModalFooter className='gap-2.5'>
           <Button
             type='button'
             variant='default'
@@ -244,7 +244,7 @@ function ErrorMessage({ error }: { error: string | null }) {
   if (!error) return null
 
   return (
-    <div className='rounded-[8px] border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-[14px] py-[12px] text-[13px] text-[var(--status-error-text)]'>
+    <div className='rounded-lg border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-3.5 py-3 text-[var(--status-error-text)] text-small'>
       {error}
     </div>
   )
@@ -258,19 +258,17 @@ interface ColumnFieldProps {
 
 function ColumnField({ column, value, onChange }: ColumnFieldProps) {
   return (
-    <div className='flex flex-col gap-[8px]'>
-      <Label htmlFor={column.name} className='font-medium text-[13px]'>
+    <div className='flex flex-col gap-2'>
+      <Label htmlFor={column.name} className='font-medium text-small'>
         {column.name}
         {column.required && <span className='text-[var(--text-error)]'> *</span>}
         {column.unique && (
-          <span className='ml-[6px] font-normal text-[11px] text-[var(--text-tertiary)]'>
-            (unique)
-          </span>
+          <span className='ml-1.5 font-normal text-[var(--text-tertiary)] text-xs'>(unique)</span>
         )}
       </Label>
 
       {column.type === 'boolean' ? (
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <Checkbox
             id={column.name}
             checked={Boolean(value)}
@@ -278,7 +276,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
           />
           <Label
             htmlFor={column.name}
-            className='font-normal text-[13px] text-[var(--text-tertiary)]'
+            className='font-normal text-[var(--text-tertiary)] text-small'
           >
             {value ? 'True' : 'False'}
           </Label>
@@ -290,7 +288,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
           onChange={(e) => onChange(e.target.value)}
           placeholder='{"key": "value"}'
           rows={4}
-          className='font-mono text-[12px]'
+          className='font-mono text-caption'
           required={column.required}
         />
       ) : column.type === 'date' ? (
@@ -312,7 +310,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
         />
       )}
 
-      <div className='text-[12px] text-[var(--text-tertiary)]'>
+      <div className='text-[var(--text-tertiary)] text-caption'>
         Type: {column.type}
         {!column.required && ' (optional)'}
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index 69c25d338f..0e74854677 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -64,7 +64,7 @@ export function TableFilter({ columns, onApply }: TableFilterProps) {
   }, [rules, onApply])
 
   return (
-    <div className='flex flex-col gap-[6px] p-[8px]'>
+    <div className='flex flex-col gap-1.5 p-2'>
       {rules.map((rule) => (
         <FilterRuleRow
           key={rule.id}
@@ -76,20 +76,20 @@ export function TableFilter({ columns, onApply }: TableFilterProps) {
         />
       ))}
 
-      <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex items-center justify-between gap-3'>
         <Button
           variant='ghost'
           size='sm'
           onClick={handleAdd}
           className={cn(
-            'border border-[var(--border)] border-dashed px-[8px] py-[3px] text-[11px] text-[var(--text-secondary)]'
+            'border border-[var(--border)] border-dashed px-2 py-[3px] text-[var(--text-secondary)] text-xs'
           )}
         >
-          <Plus className='mr-[4px] h-[10px] w-[10px]' />
+          <Plus className='mr-1 h-[10px] w-[10px]' />
           Add filter
         </Button>
 
-        <Button variant='default' size='sm' onClick={handleApply} className='text-[11px]'>
+        <Button variant='default' size='sm' onClick={handleApply} className='text-xs'>
           Apply filter
         </Button>
       </div>
@@ -107,12 +107,12 @@ interface FilterRuleRowProps {
 
 function FilterRuleRow({ rule, columns, onUpdate, onRemove, onApply }: FilterRuleRowProps) {
   return (
-    <div className='flex items-center gap-[4px]'>
+    <div className='flex items-center gap-1'>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <button className='flex h-[30px] min-w-[100px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-[8px] text-[11px] text-[var(--text-secondary)] outline-none hover:border-[var(--border-1)]'>
+          <button className='flex h-[30px] min-w-[100px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-2 text-[var(--text-secondary)] text-xs outline-none hover-hover:border-[var(--border-1)]'>
             <span className='truncate'>{rule.column || 'Column'}</span>
-            <ChevronDown className='ml-[4px] h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
+            <ChevronDown className='ml-1 h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
@@ -129,9 +129,9 @@ function FilterRuleRow({ rule, columns, onUpdate, onRemove, onApply }: FilterRul
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <button className='flex h-[30px] min-w-[50px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-[8px] text-[11px] text-[var(--text-secondary)] outline-none hover:border-[var(--border-1)]'>
+          <button className='flex h-[30px] min-w-[50px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-2 text-[var(--text-secondary)] text-xs outline-none hover-hover:border-[var(--border-1)]'>
             <span>{OPERATOR_LABELS[rule.operator] ?? rule.operator}</span>
-            <ChevronDown className='ml-[4px] h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
+            <ChevronDown className='ml-1 h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
@@ -154,12 +154,12 @@ function FilterRuleRow({ rule, columns, onUpdate, onRemove, onApply }: FilterRul
           if (e.key === 'Enter') handleApply()
         }}
         placeholder='Enter a value'
-        className='h-[30px] min-w-[160px] flex-1 rounded-[5px] border border-[var(--border)] bg-transparent px-[8px] text-[11px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-subtle)] hover:border-[var(--border-1)] focus:border-[var(--border-1)]'
+        className='h-[30px] min-w-[160px] flex-1 rounded-[5px] border border-[var(--border)] bg-transparent px-2 text-[var(--text-secondary)] text-xs outline-none placeholder:text-[var(--text-subtle)] hover-hover:border-[var(--border-1)] focus:border-[var(--border-1)]'
       />
 
       <button
         onClick={() => onRemove(rule.id)}
-        className='flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--surface-4)] hover:text-[var(--text-primary)]'
+        className='flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[5px] text-[var(--text-tertiary)] transition-colors hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
       >
         <X className='h-[12px] w-[12px]' />
       </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
index 39e2996f40..7055671797 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
@@ -93,15 +93,15 @@ const SKELETON_COL_COUNT = 4
 const SKELETON_ROW_COUNT = 10
 const ROW_HEIGHT_ESTIMATE = 35
 
-const CELL = 'border-[var(--border)] border-r border-b px-[8px] py-[7px] align-middle select-none'
+const CELL = 'border-[var(--border)] border-r border-b px-2 py-[7px] align-middle select-none'
 const CELL_CHECKBOX =
-  'border-[var(--border)] border-r border-b px-[4px] py-[7px] align-middle select-none'
+  'border-[var(--border)] border-r border-b px-1 py-[7px] align-middle select-none'
 const CELL_HEADER =
-  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-[8px] py-[7px] text-left align-middle'
+  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[7px] text-left align-middle'
 const CELL_HEADER_CHECKBOX =
-  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-[4px] py-[7px] text-center align-middle'
+  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-1 py-[7px] text-center align-middle'
 const CELL_CONTENT =
-  'relative min-h-[20px] min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[13px]'
+  'relative min-h-[20px] min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-small'
 const SELECTION_OVERLAY =
   'pointer-events-none absolute -top-px -right-px -bottom-px -left-px z-[5] border-[2px] border-[var(--selection)]'
 
@@ -1579,11 +1579,11 @@ export function Table({
 
   if (!isLoadingTable && !tableData) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <TableX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>Table not found</h2>
-          <p className='text-[13px] text-[var(--text-muted)]'>
+          <p className='text-[var(--text-muted)] text-small'>
             This table may have been deleted or moved
           </p>
         </div>
@@ -1612,7 +1612,7 @@ export function Table({
       >
         <div className='relative h-fit' style={{ width: `${tableWidth}px` }}>
           <table
-            className='table-fixed border-separate border-spacing-0 text-[13px]'
+            className='table-fixed border-separate border-spacing-0 text-small'
             style={{ width: `${tableWidth}px` }}
           >
             {isLoadingTable ? (
@@ -1631,20 +1631,20 @@ export function Table({
                 <tr>
                   <th className={CELL_HEADER_CHECKBOX}>
                     <div className='flex items-center justify-center'>
-                      <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                      <Skeleton className='h-[14px] w-[14px] rounded-xs' />
                     </div>
                   </th>
                   {Array.from({ length: SKELETON_COL_COUNT }).map((_, i) => (
                     <th key={i} className={CELL_HEADER}>
-                      <div className='flex h-[20px] min-w-0 items-center gap-[6px]'>
-                        <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-[2px]' />
+                      <div className='flex h-[20px] min-w-0 items-center gap-1.5'>
+                        <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-xs' />
                         <Skeleton className='h-[14px]' style={{ width: `${56 + i * 16}px` }} />
                       </div>
                     </th>
                   ))}
                   <th className={CELL_HEADER}>
-                    <div className='flex h-[20px] items-center gap-[8px]'>
-                      <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-[2px]' />
+                    <div className='flex h-[20px] items-center gap-2'>
+                      <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-xs' />
                       <Skeleton className='h-[14px] w-[72px]' />
                     </div>
                   </th>
@@ -1911,7 +1911,7 @@ const PositionGapRows = React.memo(
               >
                 <span
                   className={cn(
-                    'text-[11px] text-[var(--text-tertiary)] tabular-nums',
+                    'text-[var(--text-tertiary)] text-xs tabular-nums',
                     isGapChecked ? 'hidden' : 'block group-hover/checkbox:hidden'
                   )}
                 >
@@ -2154,7 +2154,7 @@ const DataRow = React.memo(function DataRow({
       >
         <span
           className={cn(
-            'text-[11px] text-[var(--text-tertiary)] tabular-nums',
+            'text-[var(--text-tertiary)] text-xs tabular-nums',
             isRowSelected ? 'hidden' : 'block group-hover/checkbox:hidden'
           )}
         >
@@ -2405,7 +2405,7 @@ function InlineDateEditor({
         onBlur={handleBlur}
         placeholder='mm/dd/yyyy'
         className={cn(
-          'w-full min-w-0 select-text border-none bg-transparent p-0 text-[13px] text-[var(--text-primary)] outline-none'
+          'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none'
         )}
       />
       <div className='absolute top-full left-0 h-0 w-0'>
@@ -2499,7 +2499,7 @@ function InlineTextEditor({
       onKeyDown={handleKeyDown}
       onBlur={() => doSave('blur')}
       className={cn(
-        'w-full min-w-0 select-text border-none bg-transparent p-0 text-[13px] text-[var(--text-primary)] outline-none'
+        'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none'
       )}
     />
   )
@@ -2529,7 +2529,7 @@ const TableBodySkeleton = React.memo(function TableBodySkeleton({
         <tr key={rowIndex}>
           <td className={cn(CELL_CHECKBOX, 'text-center')}>
             <div className='flex min-h-[20px] items-center justify-center'>
-              <span className='text-[11px] text-[var(--text-tertiary)] tabular-nums'>
+              <span className='text-[var(--text-tertiary)] text-xs tabular-nums'>
                 {rowIndex + 1}
               </span>
             </div>
@@ -2710,7 +2710,7 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
         <div className='pointer-events-none absolute top-0 right-[-1px] bottom-0 z-10 w-[2px] bg-[var(--selection)]' />
       )}
       {isRenaming ? (
-        <div className='flex h-full w-full min-w-0 items-center px-[8px] py-[7px]'>
+        <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
           <ColumnTypeIcon type={column.type} />
           <input
             ref={renameInputRef}
@@ -2722,13 +2722,13 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               if (e.key === 'Escape') onRenameCancel()
             }}
             onBlur={onRenameSubmit}
-            className='ml-[6px] min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[13px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0'
+            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-small outline-none focus:outline-none focus:ring-0'
           />
         </div>
       ) : readOnly ? (
-        <div className='flex h-full w-full min-w-0 items-center px-[8px] py-[7px]'>
+        <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
           <ColumnTypeIcon type={column.type} />
-          <span className='ml-[6px] min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
+          <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
             {column.name}
           </span>
         </div>
@@ -2737,13 +2737,13 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
           <DropdownMenuTrigger asChild>
             <button
               type='button'
-              className='flex h-full w-full min-w-0 cursor-grab items-center px-[8px] py-[7px] outline-none active:cursor-grabbing'
+              className='flex h-full w-full min-w-0 cursor-pointer items-center px-2 py-[7px] outline-none active:cursor-grabbing'
             >
               <ColumnTypeIcon type={column.type} />
-              <span className='ml-[6px] min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
+              <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                 {column.name}
               </span>
-              <ChevronDown className='ml-[8px] h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+              <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align='start'>
@@ -2828,12 +2828,12 @@ const AddColumnButton = React.memo(function AddColumnButton({
     <th className={CELL_HEADER}>
       <button
         type='button'
-        className='flex h-[20px] cursor-pointer items-center gap-[8px]'
+        className='flex h-[20px] cursor-pointer items-center gap-2'
         onClick={onClick}
         disabled={disabled}
       >
         <Plus className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-        <span className='font-medium text-[13px] text-[var(--text-body)]'>New column</span>
+        <span className='font-medium text-[var(--text-body)] text-small'>New column</span>
       </button>
     </th>
   )
@@ -2841,14 +2841,14 @@ const AddColumnButton = React.memo(function AddColumnButton({
 
 const AddRowButton = React.memo(function AddRowButton({ onClick }: { onClick: () => void }) {
   return (
-    <div className='px-[8px] py-[7px]'>
+    <div className='px-2 py-[7px]'>
       <button
         type='button'
-        className='flex h-[20px] cursor-pointer items-center gap-[8px]'
+        className='flex h-[20px] cursor-pointer items-center gap-2'
         onClick={onClick}
       >
         <Plus className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-        <span className='font-medium text-[13px] text-[var(--text-body)]'>New row</span>
+        <span className='font-medium text-[var(--text-body)] text-small'>New row</span>
       </button>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx
index a0d5a1719b..032e14a504 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx
@@ -23,7 +23,7 @@ export default function TableError({ error, reset }: TableErrorProps) {
       loggerName='TableError'
       secondaryAction={{
         label: 'Go back',
-        icon: <ArrowLeft className='mr-[6px] h-[14px] w-[14px]' />,
+        icon: <ArrowLeft className='mr-1.5 h-[14px] w-[14px]' />,
         onClick: () => router.push(`/workspace/${workspaceId}/tables`),
       }}
     />
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
index ad66eecbd5..8671a70927 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
@@ -28,30 +28,30 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]',
+        'h-[268px] w-full rounded-lg bg-[var(--surface-3)] p-2 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]',
         className
       )}
     >
-      <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+      <div className='h-[180px] w-full animate-pulse rounded-md bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
 
-      <div className='mt-[14px] flex items-center justify-between'>
+      <div className='mt-3.5 flex items-center justify-between'>
         <div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         <div className='flex items-center gap-[-4px]'>
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
+              className='h-[18px] w-[18px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
             />
           ))}
         </div>
       </div>
 
-      <div className='mt-[14px] flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='mt-3.5 flex items-center justify-between'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           <div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
@@ -200,13 +200,13 @@ function TemplateCardInner({
     <div
       onClick={handleCardClick}
       className={cn(
-        'w-full cursor-pointer rounded-[8px] bg-[var(--surface-3)] p-[8px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]',
+        'w-full cursor-pointer rounded-lg bg-[var(--surface-3)] p-2 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]',
         className
       )}
     >
       <div
         ref={previewRef}
-        className='pointer-events-none h-[180px] w-full overflow-hidden rounded-[6px]'
+        className='pointer-events-none h-[180px] w-full overflow-hidden rounded-md'
       >
         {normalizedState && isInView ? (
           <PreviewWorkflow
@@ -224,8 +224,8 @@ function TemplateCardInner({
         )}
       </div>
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-[var(--text-primary)]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <h3 className='truncate pr-2 pl-0.5 font-medium text-[var(--text-primary)] text-md'>
           {title}
         </h3>
 
@@ -239,7 +239,7 @@ function TemplateCardInner({
                 return (
                   <div
                     key={index}
-                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                     style={{
                       background: blockConfig.bgColor || 'gray',
                       marginLeft: index > 0 ? '-4px' : '0',
@@ -250,10 +250,10 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-7)]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--surface-7)]'
                 style={{ marginLeft: '-4px' }}
               >
-                <span className='font-medium text-[10px] text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-primary)] text-micro'>
                   +{blockTypes.length - 3}
                 </span>
               </div>
@@ -266,7 +266,7 @@ function TemplateCardInner({
               return (
                 <div
                   key={index}
-                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                   style={{
                     background: blockConfig.bgColor || 'gray',
                     marginLeft: index > 0 ? '-4px' : '0',
@@ -281,13 +281,13 @@ function TemplateCardInner({
       </div>
 
       {description && (
-        <p className='mt-[4px] truncate pl-[2px] text-[12px] text-[var(--text-tertiary)]'>
+        <p className='mt-1 truncate pl-0.5 text-[var(--text-tertiary)] text-caption'>
           {description}
         </p>
       )}
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <div className='flex min-w-0 flex-1 items-center gap-1.5'>
           {authorImageUrl ? (
             <Image
               src={authorImageUrl}
@@ -302,15 +302,15 @@ function TemplateCardInner({
               <User className='h-[12px] w-[12px] text-[var(--text-tertiary)]' />
             </div>
           )}
-          <div className='flex min-w-0 items-center gap-[4px]'>
-            <span className='truncate font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <div className='flex min-w-0 items-center gap-1'>
+            <span className='truncate font-medium text-[var(--text-tertiary)] text-caption'>
               {author}
             </span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+        <div className='flex flex-shrink-0 items-center gap-1.5 font-medium text-[var(--text-tertiary)] text-caption'>
           <User className='h-[12px] w-[12px]' />
           <span>{usageCount}</span>
           <Star
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
index 57eec6f213..8ee323feb8 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
@@ -154,21 +154,21 @@ export default function Templates({
   return (
     <div className='flex h-full flex-1 flex-col'>
       <div className='flex flex-1 overflow-hidden'>
-        <div className='flex flex-1 flex-col overflow-auto bg-[var(--bg)] px-[24px] pt-[28px] pb-[24px]'>
+        <div className='flex flex-1 flex-col overflow-auto bg-[var(--bg)] px-6 pt-7 pb-6'>
           <div>
-            <div className='flex items-start gap-[12px]'>
-              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#5BA8D9] bg-[#E8F4FB] dark:border-[#1A5070] dark:bg-[#153347]'>
+            <div className='flex items-start gap-3'>
+              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-md border border-[#5BA8D9] bg-[#E8F4FB] dark:border-[#1A5070] dark:bg-[#153347]'>
                 <Layout className='h-[14px] w-[14px] text-[#5BA8D9] dark:text-[#33b4ff]' />
               </div>
-              <h1 className='font-medium text-[18px]'>Templates</h1>
+              <h1 className='font-medium text-lg'>Templates</h1>
             </div>
-            <p className='mt-[10px] text-[14px] text-[var(--text-tertiary)]'>
+            <p className='mt-2.5 text-[var(--text-tertiary)] text-sm'>
               Grab a template and start building, or make one from scratch.
             </p>
           </div>
 
-          <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
+          <div className='mt-3.5 flex items-center justify-between'>
+            <div className='flex h-[32px] w-[400px] items-center gap-1.5 rounded-lg bg-[var(--surface-4)] px-2'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search'
@@ -177,17 +177,17 @@ export default function Templates({
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button
                 variant={activeTab === 'gallery' ? 'active' : 'default'}
-                className='h-[32px] rounded-[6px]'
+                className='h-[32px] rounded-md'
                 onClick={() => setActiveTab('gallery')}
               >
                 Gallery
               </Button>
               <Button
                 variant={activeTab === 'your' ? 'active' : 'default'}
-                className='h-[32px] rounded-[6px]'
+                className='h-[32px] rounded-md'
                 onClick={() => setActiveTab('your')}
               >
                 Your Templates
@@ -195,7 +195,7 @@ export default function Templates({
               {isSuperUser && (
                 <Button
                   variant={activeTab === 'pending' ? 'active' : 'default'}
-                  className='h-[32px] rounded-[6px]'
+                  className='h-[32px] rounded-md'
                   onClick={() => setActiveTab('pending')}
                 >
                   Pending
@@ -204,7 +204,7 @@ export default function Templates({
             </div>
           </div>
 
-          <div className='mt-[24px] grid grid-cols-1 gap-x-[20px] gap-y-[40px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+          <div className='mt-6 grid grid-cols-1 gap-x-5 gap-y-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
             {loading ? (
               Array.from({ length: 8 }).map((_, index) => (
                 <TemplateCardSkeleton key={`skeleton-${index}`} />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index 6955f013f6..fc9033220f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -15,11 +15,11 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
 const ACTION_BUTTON_STYLES = [
-  'h-[23px] w-[23px] rounded-[8px] p-0',
+  'h-[23px] w-[23px] rounded-lg p-0',
   'border border-[var(--border)] bg-[var(--surface-5)]',
   'text-[var(--text-secondary)]',
-  'hover:border-transparent hover:bg-[var(--brand-secondary)] hover:!text-[var(--text-inverse)]',
-  'dark:border-transparent dark:bg-[var(--surface-7)] dark:hover:bg-[var(--brand-secondary)]',
+  'hover-hover:border-transparent hover-hover:bg-[var(--brand-secondary)] hover-hover:!text-[var(--text-inverse)]',
+  'dark:border-transparent dark:bg-[var(--surface-7)] dark:hover-hover:bg-[var(--brand-secondary)]',
 ].join(' ')
 
 const ICON_SIZE = 'h-[11px] w-[11px]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index 42bb7a7982..5cf7652de7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -901,7 +901,7 @@ export function Chat() {
   return (
     <div
       ref={preventZoomRef}
-      className='fixed z-30 flex flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
+      className='fixed z-30 flex flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-2.5 pt-0.5 pb-2'
       style={{
         left: `${actualPosition.x}px`,
         top: `${actualPosition.y}px`,
@@ -915,21 +915,21 @@ export function Chat() {
     >
       {/* Header with drag handle */}
       <div
-        className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between gap-[10px] bg-[var(--surface-1)] p-0 active:cursor-grabbing'
+        className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between gap-2.5 bg-[var(--surface-1)] p-0 active:cursor-grabbing'
         onMouseDown={handleMouseDown}
       >
-        <span className='flex-shrink-0 pr-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+        <span className='flex-shrink-0 pr-0.5 font-medium text-[var(--text-primary)] text-sm'>
           Chat
         </span>
 
         {/* Start inputs button and output selector - with max-width to prevent overflow */}
         <div
-          className='ml-auto flex min-w-0 flex-shrink items-center gap-[6px]'
+          className='ml-auto flex min-w-0 flex-shrink items-center gap-1.5'
           onMouseDown={(e) => e.stopPropagation()}
         >
           {shouldShowConfigureStartInputsButton && (
             <div
-              className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-[2px] font-medium font-sans text-[12px] text-[var(--text-primary)] hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+              className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
               title='Add chat inputs to Start block'
               onMouseDown={(e) => {
                 e.stopPropagation()
@@ -951,7 +951,7 @@ export function Chat() {
           />
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[8px]'>
+        <div className='flex flex-shrink-0 items-center gap-2'>
           {/* More menu with actions */}
           <Popover variant='default' size='sm' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
             <PopoverTrigger asChild>
@@ -1007,12 +1007,12 @@ export function Chat() {
         {/* Messages */}
         <div className='flex-1 overflow-hidden'>
           {workflowMessages.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
               No messages yet
             </div>
           ) : (
             <div ref={scrollAreaRef} className='h-full overflow-y-auto overflow-x-hidden'>
-              <div className='w-full max-w-full space-y-[8px] overflow-hidden py-[8px]'>
+              <div className='w-full max-w-full space-y-2 overflow-hidden py-2'>
                 {workflowMessages.map((message) => (
                   <ChatMessage key={message.id} message={message} />
                 ))}
@@ -1032,16 +1032,16 @@ export function Chat() {
           {/* Error messages */}
           {uploadErrors.length > 0 && (
             <div>
-              <div className='rounded-lg border border-[#883827] bg-[#491515]'>
+              <div className='rounded-lg border border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)]'>
                 <div className='flex items-start gap-2'>
                   <AlertCircle className='mt-0.5 h-3 w-3 shrink-0 text-[var(--text-error)]' />
                   <div className='flex-1'>
-                    <div className='mb-1 font-medium text-[12px] text-[var(--text-error)]'>
+                    <div className='mb-1 font-medium text-[var(--text-error)] text-caption'>
                       File upload error
                     </div>
                     <div className='space-y-1'>
                       {uploadErrors.map((err, idx) => (
-                        <div key={idx} className='text-[10px] text-[var(--text-error)]'>
+                        <div key={idx} className='text-[var(--text-error)] text-micro'>
                           {err}
                         </div>
                       ))}
@@ -1054,13 +1054,13 @@ export function Chat() {
 
           {/* Combined input container */}
           <div
-            className={`rounded-[4px] border bg-[var(--surface-5)] py-0 pr-[6px] pl-[4px] transition-colors ${
+            className={`rounded-sm border bg-[var(--surface-5)] py-0 pr-1.5 pl-1 transition-colors ${
               isDragOver ? 'border-[var(--brand-secondary)]' : 'border-[var(--border-1)]'
             }`}
           >
             {/* File thumbnails */}
             {chatFiles.length > 0 && (
-              <div className='mt-[4px] flex flex-wrap gap-[6px]'>
+              <div className='mt-1 flex flex-wrap gap-1.5'>
                 {chatFiles.map((file) => {
                   const previewUrl = getFilePreviewUrl(file)
 
@@ -1068,10 +1068,10 @@ export function Chat() {
                     <div
                       key={file.id}
                       className={cn(
-                        'group relative flex-shrink-0 overflow-hidden rounded-[6px] bg-[var(--surface-2)]',
+                        'group relative flex-shrink-0 overflow-hidden rounded-md bg-[var(--surface-2)]',
                         previewUrl
                           ? 'h-[40px] w-[40px]'
-                          : 'flex min-w-[80px] max-w-[120px] items-center justify-center px-[8px] py-[2px]'
+                          : 'flex min-w-[80px] max-w-[120px] items-center justify-center px-2 py-0.5'
                       )}
                     >
                       {previewUrl ? (
@@ -1082,7 +1082,7 @@ export function Chat() {
                         />
                       ) : (
                         <div className='min-w-0 flex-1'>
-                          <div className='truncate font-medium text-[10px] text-[var(--white)]'>
+                          <div className='truncate font-medium text-[var(--white)] text-micro'>
                             {file.name}
                           </div>
                           <div className='text-[9px] text-[var(--text-tertiary)]'>
@@ -1118,18 +1118,18 @@ export function Chat() {
                 }}
                 onKeyDown={handleKeyPress}
                 placeholder={isDragOver ? 'Drop files here...' : 'Type a message...'}
-                className='w-full border-0 bg-transparent pr-[56px] pl-[4px] shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                className='w-full border-0 bg-transparent pr-[56px] pl-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
                 disabled={!activeWorkflowId}
               />
 
               {/* Buttons positioned absolutely on the right */}
-              <div className='-translate-y-1/2 absolute top-1/2 right-[2px] flex items-center gap-[10px]'>
+              <div className='-translate-y-1/2 absolute top-1/2 right-[2px] flex items-center gap-2.5'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Badge
                       onClick={() => document.getElementById('floating-chat-file-input')?.click()}
                       className={cn(
-                        '!bg-transparent !border-0 cursor-pointer rounded-[6px] p-[0px]',
+                        '!bg-transparent !border-0 cursor-pointer rounded-md p-[0px]',
                         (!activeWorkflowId || isExecuting || chatFiles.length >= 15) &&
                           'cursor-not-allowed opacity-50'
                       )}
@@ -1143,9 +1143,9 @@ export function Chat() {
                 {isStreaming ? (
                   <Button
                     onClick={handleStopStreaming}
-                    className='!bg-[var(--c-C0C0C0)] hover:!bg-[var(--c-D0D0D0)] h-[22px] w-[22px] rounded-full p-0 transition-colors'
+                    className='h-[22px] w-[22px] rounded-full border-0 bg-[var(--text-primary)] p-0 transition-colors hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
                   >
-                    <Square className='h-2.5 w-2.5 fill-black text-black' />
+                    <Square className='h-2.5 w-2.5 fill-white text-white dark:fill-black dark:text-black' />
                   </Button>
                 ) : (
                   <Button
@@ -1157,13 +1157,16 @@ export function Chat() {
                       isStreaming
                     }
                     className={cn(
-                      'h-[22px] w-[22px] rounded-full p-0 transition-colors',
+                      'h-[22px] w-[22px] rounded-full border-0 p-0 transition-colors',
                       chatMessage.trim() || chatFiles.length > 0
-                        ? '!bg-[var(--c-C0C0C0)] hover:!bg-[var(--c-D0D0D0)]'
-                        : '!bg-[var(--c-C0C0C0)]'
+                        ? 'bg-[var(--text-primary)] hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
+                        : 'bg-[var(--text-subtle)] dark:bg-[var(--text-subtle)]'
                     )}
                   >
-                    <ArrowUp className='h-3.5 w-3.5 text-black' strokeWidth={2.25} />
+                    <ArrowUp
+                      className='h-3.5 w-3.5 text-white dark:text-black'
+                      strokeWidth={2.25}
+                    />
                   </Button>
                 )}
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index 17afd48c5e..c126816e09 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -28,7 +28,7 @@ const TagIcon: React.FC<{
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
-      <span className='!text-white font-bold text-[10px]'>{icon}</span>
+      <span className='!text-white font-bold text-micro'>{icon}</span>
     ) : (
       (() => {
         const IconComponent = icon
@@ -296,9 +296,9 @@ export function OutputSelect({
 
       return {
         sectionElement: (
-          <div className='flex items-center gap-1.5 px-[6px] py-[4px]'>
+          <div className='flex items-center gap-1.5 px-1.5 py-1'>
             <TagIcon icon={blockIcon} color={blockColor} />
-            <span className='font-medium text-[13px]'>{blockName}</span>
+            <span className='font-medium text-small'>{blockName}</span>
           </div>
         ),
         items: outputs.map((output) => ({
@@ -327,7 +327,7 @@ export function OutputSelect({
   return (
     <Combobox
       size='sm'
-      className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
+      className='!w-fit !py-0.5 min-w-[100px] rounded-md px-2.5'
       groups={comboboxGroups}
       options={[]}
       multiSelect
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index bcb7e4a22c..d386c35a62 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -180,12 +180,12 @@ export function CommandList() {
     >
       <div
         data-tour='command-list'
-        className='pointer-events-auto flex flex-col gap-[8px]'
+        className='pointer-events-auto flex flex-col gap-2'
         onDragOver={handleDragOver}
         onDrop={handleDrop}
       >
         {/* Logo */}
-        <div className='mb-[20px] flex justify-center'>
+        <div className='mb-5 flex justify-center'>
           <Image
             src='/logo/b&w/text/b&w.svg'
             alt='Sim'
@@ -209,17 +209,17 @@ export function CommandList() {
               onClick={() => handleCommandClick(command.label)}
             >
               {/* Left side: Icon and Label */}
-              <div className='flex items-center gap-[8px]'>
+              <div className='flex items-center gap-2'>
                 <Icon className='h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]' />
-                <span className='font-medium text-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-tertiary)] text-sm group-hover:text-[var(--text-primary)]'>
                   {command.label}
                 </span>
               </div>
 
               {/* Right side: Keyboard Shortcut */}
-              <div className='flex items-center gap-[4px]'>
+              <div className='flex items-center gap-1'>
                 <Button
-                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-[12px] hover:translate-y-0 hover:text-[var(--text-tertiary)] hover:shadow-[0_2px_0_0_rgba(48,48,48,1)] group-hover:text-[var(--text-primary)] group-hover:shadow-[0_4px_0_0_rgba(48,48,48,1)]'
+                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                   variant='3d'
                 >
                   <span>⌘</span>
@@ -227,7 +227,7 @@ export function CommandList() {
                 {shortcuts.map((key, index) => (
                   <Button
                     key={index}
-                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-[12px] hover:translate-y-0 hover:text-[var(--text-tertiary)] hover:shadow-[0_2px_0_0_rgba(48,48,48,1)] group-hover:text-[var(--text-primary)] group-hover:shadow-[0_4px_0_0_rgba(48,48,48,1)]'
+                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                     variant='3d'
                   >
                     {key}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
index efbc0741d5..2f45ea54b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
@@ -59,13 +59,13 @@ const CursorsComponent = () => {
           >
             <div className='relative flex items-start'>
               {/* Filled mouse pointer cursor */}
-              <svg className='-mt-[18px]' width={24} height={24} viewBox='0 0 24 24' fill={color}>
+              <svg className='-mt-4.5' width={24} height={24} viewBox='0 0 24 24' fill={color}>
                 <path d='M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z' />
               </svg>
 
               {/* Name tag to the right, background tightly wrapping text */}
               <div
-                className='ml-[-4px] inline-flex max-w-[160px] truncate whitespace-nowrap rounded-[2px] px-1.5 py-[2px] font-medium text-[11px] text-[var(--surface-1)]'
+                className='ml-[-4px] inline-flex max-w-[160px] truncate whitespace-nowrap rounded-xs px-1.5 py-0.5 font-medium text-[var(--surface-1)] text-xs'
                 style={{ backgroundColor: color }}
               >
                 {name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
index 800fdf1d1c..a29a8fa7b9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
@@ -81,14 +81,14 @@ export const DiffControls = memo(function DiffControls() {
       }}
     >
       <div
-        className='group relative flex h-[30px] overflow-hidden rounded-[4px]'
+        className='group relative flex h-[30px] overflow-hidden rounded-sm'
         style={{ isolation: 'isolate' }}
       >
         {/* Reject side */}
         <button
           onClick={handleReject}
           title='Reject changes'
-          className='relative flex h-full items-center border border-[var(--border)] bg-[var(--surface-4)] pr-[20px] pl-[12px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-1)] hover:bg-[var(--surface-6)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-5)]'
+          className='relative flex h-full items-center border border-[var(--border)] bg-[var(--surface-4)] pr-5 pl-3 font-medium text-[var(--text-secondary)] text-small transition-colors hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--surface-5)]'
           style={{
             clipPath: 'polygon(0 0, calc(100% + 10px) 0, 100% 100%, 0 100%)',
             borderRadius: '4px 0 0 4px',
@@ -104,21 +104,21 @@ export const DiffControls = memo(function DiffControls() {
             width: '2px',
             transform: 'skewX(-18.4deg)',
             background:
-              'linear-gradient(to right, var(--border) 50%, color-mix(in srgb, var(--brand-tertiary-2) 70%, black) 50%)',
+              'linear-gradient(to right, var(--border) 50%, color-mix(in srgb, var(--brand-accent) 70%, black) 50%)',
           }}
         />
         {/* Accept side */}
         <button
           onClick={handleAccept}
           title='Accept changes (⇧⌘⏎)'
-          className='-ml-[10px] relative flex h-full items-center border border-[rgba(0,0,0,0.15)] bg-[var(--brand-tertiary-2)] pr-[12px] pl-[20px] font-medium text-[13px] text-[var(--text-inverse)] transition-[background-color,border-color,fill,stroke] hover:brightness-110 dark:border-[rgba(255,255,255,0.1)]'
+          className='-ml-2.5 relative flex h-full items-center border border-[rgba(0,0,0,0.15)] bg-[var(--brand-accent)] pr-3 pl-5 font-medium text-[var(--text-inverse)] text-small transition-[background-color,border-color,fill,stroke] hover-hover:brightness-110 dark:border-[rgba(255,255,255,0.1)]'
           style={{
             clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%)',
             borderRadius: '0 4px 4px 0',
           }}
         >
           Accept
-          <kbd className='ml-2 rounded border border-white/20 bg-white/10 px-1.5 py-0.5 font-medium font-sans text-[10px]'>
+          <kbd className='ml-2 rounded border border-white/20 bg-white/10 px-1.5 py-0.5 font-medium font-sans text-micro'>
             ⇧⌘<span className='translate-y-[-1px]'>⏎</span>
           </kbd>
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
index 5c414e170d..777c0c1352 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
@@ -32,13 +32,13 @@ export function ErrorUI({
   if (!fullScreen) {
     return (
       <div className='flex h-full flex-1 items-center justify-center'>
-        <div className='flex flex-col items-center gap-[16px] text-center'>
-          <div className='flex flex-col gap-[8px]'>
-            <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>{title}</h2>
-            <p className='max-w-[300px] text-[13px] text-[var(--text-tertiary)]'>{message}</p>
+        <div className='flex flex-col items-center gap-4 text-center'>
+          <div className='flex flex-col gap-2'>
+            <h2 className='font-semibold text-[var(--text-primary)] text-md'>{title}</h2>
+            <p className='max-w-[300px] text-[var(--text-tertiary)] text-small'>{message}</p>
           </div>
           <Button variant='default' size='sm' onClick={onReset ?? (() => window.location.reload())}>
-            <RefreshCw className='mr-[6px] h-[14px] w-[14px]' />
+            <RefreshCw className='mr-1.5 h-[14px] w-[14px]' />
             Try again
           </Button>
         </div>
@@ -52,9 +52,9 @@ export function ErrorUI({
 
       <div className='relative flex flex-1'>
         <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='pointer-events-none flex flex-col items-center gap-[16px]'>
-            <h3 className='font-semibold text-[16px] text-[var(--text-primary)]'>{title}</h3>
-            <p className='max-w-sm text-center font-medium text-[14px] text-[var(--text-tertiary)]'>
+          <div className='pointer-events-none flex flex-col items-center gap-4'>
+            <h3 className='font-semibold text-[var(--text-primary)] text-md'>{title}</h3>
+            <p className='max-w-sm text-center font-medium text-[var(--text-tertiary)] text-sm'>
               {message}
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
index 4bfa5776e2..fd9b6b2cf9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -351,7 +351,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
             return (
               <code
                 {...props}
-                className='whitespace-normal rounded bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[#F59E0B] text-xs'
+                className='whitespace-normal rounded bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[var(--caution)] text-xs'
               >
                 {children}
               </code>
@@ -376,7 +376,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
                   href={href}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='mb-1 block break-all text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+                  className='mb-1 block break-all text-[var(--brand-secondary)] underline-offset-2 hover-hover:underline'
                 >
                   {children}
                 </a>
@@ -428,7 +428,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
               href={href}
               target='_blank'
               rel='noopener noreferrer'
-              className='break-all text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+              className='break-all text-[var(--brand-secondary)] underline-offset-2 hover-hover:underline'
             >
               {children}
             </a>
@@ -531,17 +531,17 @@ export const NoteBlock = memo(function NoteBlock({
     <div className='group relative'>
       <div
         className={cn(
-          'note-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+          'note-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
         )}
         onClick={handleClick}
       >
         <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
 
-        <div className='flex items-center justify-between border-[var(--divider)] border-b p-[8px]'>
+        <div className='flex items-center justify-between border-[var(--divider)] border-b p-2'>
           <div className='flex min-w-0 flex-1 items-center'>
             <span
               className={cn(
-                'truncate font-medium text-[16px]',
+                'truncate font-medium text-md',
                 !isEnabled && 'text-[var(--text-muted)]'
               )}
               title={name}
@@ -551,19 +551,17 @@ export const NoteBlock = memo(function NoteBlock({
           </div>
         </div>
 
-        <div className='relative overflow-hidden p-[8px]'>
+        <div className='relative overflow-hidden p-2'>
           <div className='relative max-w-full break-all'>
             {isEmpty ? (
-              <p className='text-[#868686] text-sm'>Add note...</p>
+              <p className='text-[var(--text-placeholder)] text-sm'>Add note...</p>
             ) : (
               <NoteMarkdown content={content} />
             )}
           </div>
         </div>
         {hasRing && (
-          <div
-            className={cn('pointer-events-none absolute inset-0 z-40 rounded-[8px]', ringStyles)}
-          />
+          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
         )}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
index fc736e0d02..a6d56d389c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
@@ -37,7 +37,7 @@ function NotificationCountdownRing({ onPause }: { onPause: () => void }) {
           variant='ghost'
           onClick={onPause}
           aria-label='Keep notifications visible'
-          className='!p-[4px] -m-[2px] shrink-0 rounded-[5px] text-[var(--text-icon)] hover:bg-[var(--surface-active)]'
+          className='!p-1 -m-0.5 shrink-0 rounded-[5px] text-[var(--text-icon)] hover-hover:bg-[var(--surface-active)]'
         >
           <CountdownRing duration={AUTO_DISMISS_MS} />
         </Button>
@@ -207,7 +207,7 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
   }
 
   return (
-    <div ref={preventZoomRef} className='absolute right-[16px] bottom-[16px] z-30 grid'>
+    <div ref={preventZoomRef} className='absolute right-[16px] bottom-4 z-30 grid'>
       {[...visibleNotifications].reverse().map((notification, index, stacked) => {
         const depth = stacked.length - index - 1
         const xOffset = depth * STACK_OFFSET_PX
@@ -226,17 +226,17 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
                 gridArea: '1 / 1',
               } as React.CSSProperties
             }
-            className='w-[240px] self-end overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+            className='w-[240px] self-end overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
           >
-            <div className='flex flex-col gap-[8px] p-[8px]'>
-              <div className='flex items-start gap-[8px]'>
-                <div className='line-clamp-2 min-w-0 flex-1 font-medium text-[12px] text-[var(--text-body)]'>
+            <div className='flex flex-col gap-2 p-2'>
+              <div className='flex items-start gap-2'>
+                <div className='line-clamp-2 min-w-0 flex-1 font-medium text-[var(--text-body)] text-caption'>
                   {notification.level === 'error' && (
-                    <span className='mr-[8px] mb-[2px] inline-block h-[8px] w-[8px] rounded-[2px] bg-[var(--text-error)] align-middle' />
+                    <span className='mr-2 mb-0.5 inline-block h-[8px] w-[8px] rounded-xs bg-[var(--text-error)] align-middle' />
                   )}
                   {notification.message}
                 </div>
-                <div className='flex shrink-0 items-start gap-[2px]'>
+                <div className='flex shrink-0 items-start gap-0.5'>
                   {showCountdown && <NotificationCountdownRing onPause={pauseAll} />}
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
@@ -244,7 +244,7 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
                         variant='ghost'
                         onClick={() => removeNotification(notification.id)}
                         aria-label='Dismiss notification'
-                        className='!p-[4px] -m-[2px] shrink-0 rounded-[5px] hover:bg-[var(--surface-active)]'
+                        className='!p-1 -m-0.5 shrink-0 rounded-[5px] hover-hover:bg-[var(--surface-active)]'
                       >
                         <X className='h-[14px] w-[14px] text-[var(--text-icon)]' />
                       </Button>
@@ -259,7 +259,7 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
                 <Button
                   variant='active'
                   onClick={() => executeAction(notification.id, notification.action!)}
-                  className='w-full rounded-[5px] px-[8px] py-[4px] font-medium text-[12px]'
+                  className='w-full rounded-[5px] px-2 py-1 font-medium text-caption'
                 >
                   {embedded && notification.action!.type === 'copilot'
                     ? 'Fix in Mothership'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx
index ce623aa801..139882dd62 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx
@@ -12,7 +12,7 @@ export function ChatHistorySkeleton() {
       </PopoverSection>
       <div className='flex flex-col gap-0.5'>
         {[1, 2, 3].map((i) => (
-          <div key={i} className='flex h-[25px] items-center px-[6px]'>
+          <div key={i} className='flex h-[25px] items-center px-1.5'>
             <div className='h-3 w-full animate-pulse rounded bg-muted/40' />
           </div>
         ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts
index 89173e92b0..72fc8e3027 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts
@@ -255,7 +255,7 @@ export const SCROLL_TOLERANCE = 8
 /**
  * Shared CSS classes for menu state text (loading, empty states)
  */
-export const MENU_STATE_TEXT_CLASSES = 'px-[8px] py-[8px] text-[12px] text-[var(--text-muted)]'
+export const MENU_STATE_TEXT_CLASSES = 'px-2 py-2 text-caption text-[var(--text-muted)]'
 
 /**
  * Calculates the next index for circular navigation (wraps around at bounds)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
index 61d18e19c4..1d4e5844b4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
@@ -632,23 +632,23 @@ console.log(data);`
 
   if (isLoading) {
     return (
-      <div className='-mx-1 space-y-[12px] px-1'>
+      <div className='-mx-1 space-y-3 px-1'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[80px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
           <Skeleton className='mt-[6.5px] h-[14px] w-[200px]' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[70px]' />
-          <Skeleton className='h-[80px] w-full rounded-[4px]' />
+          <Skeleton className='h-[80px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[90px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
       </div>
     )
@@ -661,13 +661,13 @@ console.log(data);`
         e.preventDefault()
         handleCreateOrUpdate()
       }}
-      className='-mx-1 space-y-[12px] overflow-y-auto px-1 pb-[16px]'
+      className='-mx-1 space-y-3 overflow-y-auto px-1 pb-4'
     >
       {/* Endpoint URL (shown when agent exists) */}
       {existingAgent && endpoint && (
         <div>
           <div className='mb-[6.5px] flex items-center justify-between'>
-            <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               URL
             </Label>
             <Tooltip.Root>
@@ -691,8 +691,8 @@ console.log(data);`
               </Tooltip.Content>
             </Tooltip.Root>
           </div>
-          <div className='relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--border-1)]'>
-            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
+          <div className='relative flex items-stretch overflow-hidden rounded-sm border border-[var(--border-1)]'>
+            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-1.5 pl-2 font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
               {baseUrl.replace(/^https?:\/\//, '')}/api/a2a/serve/
             </div>
             <div className='relative flex-1'>
@@ -703,7 +703,7 @@ console.log(data);`
               />
             </div>
           </div>
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             The A2A endpoint URL where clients can discover and call your agent
           </p>
         </div>
@@ -713,7 +713,7 @@ console.log(data);`
       <div>
         <Label
           htmlFor='a2a-name'
-          className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+          className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
         >
           Agent name <span className='text-red-500'>*</span>
         </Label>
@@ -724,7 +724,7 @@ console.log(data);`
           placeholder='Enter agent name'
           required
         />
-        <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+        <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
           Human-readable name shown in the Agent Card
         </p>
       </div>
@@ -733,7 +733,7 @@ console.log(data);`
       <div>
         <Label
           htmlFor='a2a-description'
-          className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+          className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
         >
           Description <span className='text-red-500'>*</span>
         </Label>
@@ -749,7 +749,7 @@ console.log(data);`
 
       {/* Access */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Access
         </Label>
         <ButtonGroup
@@ -759,7 +759,7 @@ console.log(data);`
           <ButtonGroupItem value='apiKey'>API Key</ButtonGroupItem>
           <ButtonGroupItem value='none'>Public</ButtonGroupItem>
         </ButtonGroup>
-        <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+        <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
           {authScheme === 'none'
             ? 'Anyone can call this agent without authentication'
             : 'Requires X-API-Key header or API key query parameter'}
@@ -768,17 +768,17 @@ console.log(data);`
 
       {/* Capabilities */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Capabilities
         </Label>
-        <div className='space-y-[8px]'>
-          <div className='flex items-center gap-[8px]'>
+        <div className='space-y-2'>
+          <div className='flex items-center gap-2'>
             <Checkbox
               id='a2a-push'
               checked={pushNotificationsEnabled}
               onCheckedChange={(checked) => setPushNotificationsEnabled(checked === true)}
             />
-            <label htmlFor='a2a-push' className='text-[13px] text-[var(--text-primary)]'>
+            <label htmlFor='a2a-push' className='text-[var(--text-primary)] text-small'>
               Push notifications (webhooks)
             </label>
           </div>
@@ -787,7 +787,7 @@ console.log(data);`
 
       {/* Tags */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Tags
         </Label>
         <TagInput
@@ -814,7 +814,7 @@ console.log(data);`
         <>
           <div>
             <div className='mb-[6.5px] flex items-center justify-between'>
-              <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                 Language
               </Label>
             </div>
@@ -829,11 +829,11 @@ console.log(data);`
 
           <div>
             <div className='mb-[6.5px] flex items-center justify-between'>
-              <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                 Send message
               </Label>
-              <div className='flex items-center gap-[8px]'>
-                <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-2'>
+                <div className='flex items-center gap-1.5'>
                   <Checkbox
                     id='a2a-stream-example'
                     checked={useStreamingExample}
@@ -841,7 +841,7 @@ console.log(data);`
                   />
                   <label
                     htmlFor='a2a-stream-example'
-                    className='text-[12px] text-[var(--text-secondary)]'
+                    className='text-[var(--text-secondary)] text-caption'
                   >
                     Stream
                   </label>
@@ -872,18 +872,18 @@ console.log(data);`
               code={getCurlCommand()}
               language={LANGUAGE_SYNTAX[language]}
               wrapText
-              className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+              className='!min-h-0 rounded-sm border border-[var(--border-1)]'
             />
             <div className='mt-[6.5px] flex items-start justify-between gap-2'>
-              <p className='text-[11px] text-[var(--text-secondary)]'>
+              <p className='text-[var(--text-secondary)] text-xs'>
                 External A2A clients can discover and call your agent. TextPart →{' '}
-                <code className='text-[10px]'>&lt;start.input&gt;</code>, DataPart →{' '}
-                <code className='text-[10px]'>&lt;start.data&gt;</code>, FilePart →{' '}
-                <code className='text-[10px]'>&lt;start.files&gt;</code>.
+                <code className='text-micro'>&lt;start.input&gt;</code>, DataPart →{' '}
+                <code className='text-micro'>&lt;start.data&gt;</code>, FilePart →{' '}
+                <code className='text-micro'>&lt;start.files&gt;</code>.
               </p>
               {missingFields.any && (
                 <div
-                  className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-[2px] font-medium font-sans text-[12px] text-[var(--text-primary)] hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+                  className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
                   title='Add required A2A input fields to Start block'
                   onClick={handleAddA2AInputs}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index 84d73dcc84..831d80c835 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -408,28 +408,28 @@ console.log(limits);`
 
   if (isLoading || !info) {
     return (
-      <div className='space-y-[16px]'>
+      <div className='space-y-4'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[62px]' />
-          <Skeleton className='h-[28px] w-[260px] rounded-[4px]' />
+          <Skeleton className='h-[28px] w-[260px] rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[90px]' />
-          <Skeleton className='h-[120px] w-full rounded-[4px]' />
+          <Skeleton className='h-[120px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[180px]' />
-          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+          <Skeleton className='h-[160px] w-full rounded-sm' />
         </div>
       </div>
     )
   }
 
   return (
-    <div className='space-y-[16px]'>
+    <div className='space-y-4'>
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Language
           </Label>
         </div>
@@ -444,7 +444,7 @@ console.log(limits);`
 
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Run workflow
           </Label>
           <Tooltip.Root>
@@ -467,16 +467,16 @@ console.log(limits);`
           code={getSyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
         />
       </div>
 
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Run workflow (stream response)
           </Label>
-          <div className='flex items-center gap-[6px]'>
+          <div className='flex items-center gap-1.5'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
@@ -510,16 +510,16 @@ console.log(limits);`
           code={getStreamCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
         />
       </div>
 
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Run workflow (async)
           </Label>
-          <div className='flex items-center gap-[6px]'>
+          <div className='flex items-center gap-1.5'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
@@ -537,7 +537,7 @@ console.log(limits);`
             </Tooltip.Root>
             <Combobox
               size='sm'
-              className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
+              className='!w-fit !py-0.5 min-w-[100px] rounded-md px-[9px]'
               options={[
                 { label: 'Execute Job', value: 'execute' },
                 { label: 'Check Status', value: 'status' },
@@ -554,7 +554,7 @@ console.log(limits);`
           code={getAsyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
         />
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 4df06afaf8..ed05ace47c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -322,13 +322,13 @@ export function ChatDeploy({
         className='-mx-1 space-y-4 overflow-y-auto px-1'
       >
         {errors.general && (
-          <div className='flex items-center gap-2 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-[13px] text-red-400'>
+          <div className='flex items-center gap-2 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-red-400 text-small'>
             <AlertTriangle className='h-4 w-4 flex-shrink-0' />
             <span>{errors.general}</span>
           </div>
         )}
 
-        <div className='space-y-[12px]'>
+        <div className='space-y-3'>
           <IdentifierInput
             value={formData.identifier}
             onChange={(value) => updateField('identifier', value)}
@@ -341,7 +341,7 @@ export function ChatDeploy({
           <div>
             <Label
               htmlFor='title'
-              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
             >
               Title
             </Label>
@@ -357,7 +357,7 @@ export function ChatDeploy({
           </div>
 
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Output
             </Label>
             <OutputSelect
@@ -387,7 +387,7 @@ export function ChatDeploy({
           <div>
             <Label
               htmlFor='welcomeMessage'
-              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
             >
               Welcome message
             </Label>
@@ -400,7 +400,7 @@ export function ChatDeploy({
               disabled={chatSubmitting}
               className='min-h-[80px] resize-none'
             />
-            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
               This message will be displayed when users first open the chat
             </p>
           </div>
@@ -455,27 +455,27 @@ export function ChatDeploy({
 function LoadingSkeleton() {
   return (
     <div className='-mx-1 space-y-4 px-1'>
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
           <Skeleton className='mt-[6.5px] h-[14px] w-[320px]' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[30px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[46px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[95px]' />
-          <Skeleton className='h-[28px] w-[170px] rounded-[4px]' />
+          <Skeleton className='h-[28px] w-[170px] rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[115px]' />
-          <Skeleton className='h-[80px] w-full rounded-[4px]' />
+          <Skeleton className='h-[80px] w-full rounded-sm' />
           <Skeleton className='mt-[6.5px] h-[14px] w-[340px]' />
         </div>
       </div>
@@ -527,17 +527,17 @@ function IdentifierInput({
     <div>
       <Label
         htmlFor='chat-url'
-        className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+        className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
       >
         URL
       </Label>
       <div
         className={cn(
-          'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--border-1)]',
+          'relative flex items-stretch overflow-hidden rounded-sm border border-[var(--border-1)]',
           error && 'border-[var(--text-error)]'
         )}
       >
-        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
+        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-1.5 pl-2 font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
           {getDomainPrefix()}
         </div>
         <div className='relative flex-1'>
@@ -550,7 +550,7 @@ function IdentifierInput({
             disabled={disabled}
             className={cn(
               'rounded-none border-0 pl-0 shadow-none disabled:bg-transparent disabled:opacity-100',
-              (isChecking || (isValid && value)) && 'pr-[32px]'
+              (isChecking || (isValid && value)) && 'pr-8'
             )}
           />
           {isChecking ? (
@@ -564,7 +564,7 @@ function IdentifierInput({
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <div className='-translate-y-1/2 absolute top-1/2 right-2'>
-                    <Check className='h-4 w-4 text-[var(--brand-tertiary-2)]' />
+                    <Check className='h-4 w-4 text-[var(--brand-accent)]' />
                   </div>
                 </Tooltip.Trigger>
                 <Tooltip.Content>
@@ -575,8 +575,8 @@ function IdentifierInput({
           )}
         </div>
       </div>
-      {error && <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{error}</p>}
-      <p className='mt-[6.5px] truncate text-[11px] text-[var(--text-secondary)]'>
+      {error && <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{error}</p>}
+      <p className='mt-[6.5px] truncate text-[var(--text-secondary)] text-xs'>
         {isEditingExisting && value ? (
           <>
             Live at:{' '}
@@ -584,7 +584,7 @@ function IdentifierInput({
               href={fullUrl}
               target='_blank'
               rel='noopener noreferrer'
-              className='text-[var(--text-primary)] hover:underline'
+              className='text-[var(--text-primary)] hover-hover:underline'
             >
               {displayUrl}
             </a>
@@ -686,9 +686,9 @@ function AuthSelector({
     : (['public', 'password', 'email'] as const)
 
   return (
-    <div className='space-y-[16px]'>
+    <div className='space-y-4'>
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Access control
         </Label>
         <ButtonGroup
@@ -706,7 +706,7 @@ function AuthSelector({
 
       {authType === 'password' && (
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Password
           </Label>
           <div className='relative'>
@@ -778,7 +778,7 @@ function AuthSelector({
               </Tooltip.Root>
             </div>
           </div>
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             {isExistingChat
               ? 'Leave empty to keep the current password'
               : 'This password will be required to access your chat'}
@@ -788,7 +788,7 @@ function AuthSelector({
 
       {(authType === 'email' || authType === 'sso') && (
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             {authType === 'email' ? 'Allowed emails' : 'Allowed SSO emails'}
           </Label>
           <TagInput
@@ -800,9 +800,9 @@ function AuthSelector({
             disabled={disabled}
           />
           {emailError && (
-            <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{emailError}</p>
+            <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{emailError}</p>
           )}
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             {authType === 'email'
               ? 'Add specific emails or entire domains (@example.com)'
               : 'Add emails or domains that can access via SSO'}
@@ -810,7 +810,7 @@ function AuthSelector({
         </div>
       )}
 
-      {error && <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{error}</p>}
+      {error && <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{error}</p>}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx
index 03d20e243f..61489288be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx
@@ -27,9 +27,9 @@ export function EmbedCodeGenerator({ formUrl }: EmbedCodeGeneratorProps) {
   }, [iframeCode])
 
   return (
-    <div className='pb-[12px]'>
+    <div className='pb-3'>
       <div className='mb-[6.5px] flex items-center justify-between'>
-        <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Embed Code
         </Label>
         <Tooltip.Root>
@@ -54,7 +54,7 @@ export function EmbedCodeGenerator({ formUrl }: EmbedCodeGeneratorProps) {
         code={iframeCode}
         language='javascript'
         wrapText
-        className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+        className='!min-h-0 rounded-sm border border-[var(--border-1)]'
       />
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx
index 8faafe3db2..2719b304d7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx
@@ -29,7 +29,7 @@ function CharacterCounter({ current, max, className }: CharacterCounterProps) {
   return (
     <span
       className={cn(
-        'text-[10px] tabular-nums transition-colors',
+        'text-micro tabular-nums transition-colors',
         isAtLimit
           ? 'text-[var(--text-error)]'
           : isNearLimit
@@ -189,10 +189,10 @@ export function FormBuilder({
   )
 
   return (
-    <div className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'>
+    <div className='overflow-hidden rounded-sm border border-[var(--border-1)]'>
       {/* Header */}
-      <div className='border-[var(--border-1)] border-b px-[10px] py-[8px]'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='border-[var(--border-1)] border-b px-2.5 py-2'>
+        <div className='flex items-center gap-1.5'>
           <input
             type='text'
             value={title}
@@ -206,7 +206,7 @@ export function FormBuilder({
             placeholder='Form Title'
             maxLength={MAX_LENGTHS.FORM_TITLE}
             className={cn(
-              'min-w-0 flex-1 bg-transparent font-medium text-[14px] text-[var(--text-primary)] outline-none',
+              'min-w-0 flex-1 bg-transparent font-medium text-[var(--text-primary)] text-sm outline-none',
               'placeholder:text-[var(--text-muted)]',
               titleError && 'text-[var(--text-error)]'
             )}
@@ -215,10 +215,8 @@ export function FormBuilder({
             <CharacterCounter current={title.length} max={MAX_LENGTHS.FORM_TITLE} />
           )}
         </div>
-        {titleError && (
-          <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{titleError}</p>
-        )}
-        <div className='mt-[4px] flex items-center gap-[6px]'>
+        {titleError && <p className='mt-1 text-[var(--text-error)] text-caption'>{titleError}</p>}
+        <div className='mt-1 flex items-center gap-1.5'>
           <input
             type='text'
             value={description}
@@ -231,7 +229,7 @@ export function FormBuilder({
             onBlur={() => setFocusedInput(null)}
             placeholder='Description'
             maxLength={MAX_LENGTHS.FORM_DESCRIPTION}
-            className='min-w-0 flex-1 bg-transparent text-[12px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-muted)]'
+            className='min-w-0 flex-1 bg-transparent text-[var(--text-secondary)] text-caption outline-none placeholder:text-[var(--text-muted)]'
           />
           {focusedInput === 'description' && (
             <CharacterCounter current={description.length} max={MAX_LENGTHS.FORM_DESCRIPTION} />
@@ -257,26 +255,26 @@ export function FormBuilder({
                 itemRefs.current[index] = el
               }}
               className={cn(
-                'relative border-[var(--border-1)] border-b px-[10px] py-[8px] last:border-b-0',
+                'relative border-[var(--border-1)] border-b px-2.5 py-2 last:border-b-0',
                 draggedIndex === index && 'opacity-40'
               )}
             >
               {/* Drop indicator line - shown above this item */}
               {showIndicatorAbove && (
-                <div className='-translate-y-1/2 pointer-events-none absolute top-0 right-0 left-0 z-20 h-[2px] bg-[var(--brand-tertiary-2)]'>
-                  <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-[6px] w-[6px] rounded-full bg-[var(--brand-tertiary-2)]' />
-                  <div className='-translate-y-1/2 absolute top-1/2 right-0 h-[6px] w-[6px] translate-x-1/2 rounded-full bg-[var(--brand-tertiary-2)]' />
+                <div className='-translate-y-1/2 pointer-events-none absolute top-0 right-0 left-0 z-20 h-[2px] bg-[var(--brand-accent)]'>
+                  <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-[6px] w-[6px] rounded-full bg-[var(--brand-accent)]' />
+                  <div className='-translate-y-1/2 absolute top-1/2 right-0 h-[6px] w-[6px] translate-x-1/2 rounded-full bg-[var(--brand-accent)]' />
                 </div>
               )}
 
               {/* Label row */}
-              <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-1.5'>
                 {/* Grip handle - larger hit area with negative margins */}
                 <div
                   draggable
                   onDragStart={(e) => handleDragStart(e, index)}
                   onDragEnd={handleDragEnd}
-                  className='-my-[6px] -ml-[6px] flex cursor-grab items-center py-[6px] pl-[6px] text-[var(--text-muted)] hover:text-[var(--text-tertiary)] active:cursor-grabbing'
+                  className='-my-1.5 -ml-1.5 flex cursor-grab items-center py-1.5 pl-1.5 text-[var(--text-muted)] hover-hover:text-[var(--text-tertiary)] active:cursor-grabbing'
                 >
                   <GripVertical className='h-[12px] w-[12px]' />
                 </div>
@@ -292,13 +290,13 @@ export function FormBuilder({
                   onBlur={() => setFocusedInput(null)}
                   placeholder='Label'
                   maxLength={MAX_LENGTHS.FIELD_LABEL}
-                  className='min-w-0 flex-1 bg-transparent font-medium text-[13px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]'
+                  className='min-w-0 flex-1 bg-transparent font-medium text-[var(--text-primary)] text-small outline-none placeholder:text-[var(--text-muted)]'
                 />
                 {focusedInput === `field-label-${index}` && (
                   <CharacterCounter current={config.label.length} max={MAX_LENGTHS.FIELD_LABEL} />
                 )}
-                <div className='flex items-center gap-[6px]'>
-                  <span className='text-[11px] text-[var(--text-tertiary)]'>Required</span>
+                <div className='flex items-center gap-1.5'>
+                  <span className='text-[var(--text-tertiary)] text-xs'>Required</span>
                   <Switch
                     checked={config.required ?? false}
                     onCheckedChange={(checked) => updateFieldConfig(index, { required: checked })}
@@ -307,7 +305,7 @@ export function FormBuilder({
               </div>
 
               {/* Help text */}
-              <div className='mt-[4px] flex items-center gap-[6px] pl-[18px]'>
+              <div className='mt-1 flex items-center gap-1.5 pl-4.5'>
                 <input
                   type='text'
                   value={config.description || ''}
@@ -320,7 +318,7 @@ export function FormBuilder({
                   onBlur={() => setFocusedInput(null)}
                   placeholder='Description...'
                   maxLength={MAX_LENGTHS.FIELD_DESCRIPTION}
-                  className='min-w-0 flex-1 bg-transparent text-[11px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-muted)]'
+                  className='min-w-0 flex-1 bg-transparent text-[var(--text-secondary)] text-xs outline-none placeholder:text-[var(--text-muted)]'
                 />
                 {focusedInput === `field-desc-${index}` && (
                   <CharacterCounter
@@ -331,15 +329,15 @@ export function FormBuilder({
               </div>
 
               {/* Field mapping */}
-              <div className='mt-[6px] ml-[18px] flex items-center justify-between border-[var(--border-1)] border-t border-dashed pt-[6px]'>
-                <span className='text-[10px] text-[var(--text-muted)]'>
+              <div className='mt-1.5 ml-4.5 flex items-center justify-between border-[var(--border-1)] border-t border-dashed pt-1.5'>
+                <span className='text-[var(--text-muted)] text-micro'>
                   {config.name ? (
                     <>
                       maps to <code>{config.name}</code>
                     </>
                   ) : null}
                 </span>
-                <span className='text-[10px] text-[var(--text-muted)]'>{config.type}</span>
+                <span className='text-[var(--text-muted)] text-micro'>{config.type}</span>
               </div>
             </div>
           )
@@ -347,9 +345,9 @@ export function FormBuilder({
 
         {/* Drop indicator at the end */}
         {dropTargetIndex === fieldConfigs.length && draggedIndex !== null && (
-          <div className='pointer-events-none absolute right-0 bottom-0 left-0 z-20 h-[2px] translate-y-1/2 bg-[var(--brand-tertiary-2)]'>
-            <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-[6px] w-[6px] rounded-full bg-[var(--brand-tertiary-2)]' />
-            <div className='-translate-y-1/2 absolute top-1/2 right-0 h-[6px] w-[6px] translate-x-1/2 rounded-full bg-[var(--brand-tertiary-2)]' />
+          <div className='pointer-events-none absolute right-0 bottom-0 left-0 z-20 h-[2px] translate-y-1/2 bg-[var(--brand-accent)]'>
+            <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-[6px] w-[6px] rounded-full bg-[var(--brand-accent)]' />
+            <div className='-translate-y-1/2 absolute top-1/2 right-0 h-[6px] w-[6px] translate-x-1/2 rounded-full bg-[var(--brand-accent)]' />
           </div>
         )}
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx
index 193932eaec..6adf800473 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx
@@ -320,15 +320,15 @@ export function FormDeploy({
   if (isLoading) {
     return (
       <div className='-mx-1 space-y-4 px-1'>
-        <div className='space-y-[12px]'>
+        <div className='space-y-3'>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
             <Skeleton className='mt-[6.5px] h-[14px] w-[320px]' />
           </div>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[30px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
         </div>
       </div>
@@ -337,7 +337,7 @@ export function FormDeploy({
 
   if (inputFields.length === 0) {
     return (
-      <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-secondary)]'>
+      <div className='flex h-full items-center justify-center text-[var(--text-secondary)] text-small'>
         Add input fields to the Start block to create a form.
       </div>
     )
@@ -348,19 +348,19 @@ export function FormDeploy({
 
   return (
     <form id='form-deploy-form' onSubmit={handleSubmit} className='-mx-1 space-y-4 px-1'>
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         {/* URL Input - matching chat style */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             URL
           </Label>
           <div
             className={cn(
-              'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--border-1)]',
+              'relative flex items-stretch overflow-hidden rounded-sm border border-[var(--border-1)]',
               (identifierError || errors.identifier) && 'border-[var(--text-error)]'
             )}
           >
-            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm'>
+            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-1.5 pl-2 font-medium text-[var(--text-secondary)] text-sm'>
               {getDomainPrefix()}
             </div>
             <div className='relative flex-1'>
@@ -373,8 +373,7 @@ export function FormDeploy({
                 placeholder='my-form'
                 className={cn(
                   'rounded-none border-0 pl-0 shadow-none',
-                  (isCheckingIdentifier || (identifierValidationPassed && identifier)) &&
-                    'pr-[32px]'
+                  (isCheckingIdentifier || (identifierValidationPassed && identifier)) && 'pr-8'
                 )}
               />
               {isCheckingIdentifier ? (
@@ -387,7 +386,7 @@ export function FormDeploy({
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
                       <div className='-translate-y-1/2 absolute top-1/2 right-2'>
-                        <Check className='h-4 w-4 text-[var(--brand-tertiary-2)]' />
+                        <Check className='h-4 w-4 text-[var(--brand-accent)]' />
                       </div>
                     </Tooltip.Trigger>
                     <Tooltip.Content>
@@ -399,11 +398,11 @@ export function FormDeploy({
             </div>
           </div>
           {(identifierError || errors.identifier) && (
-            <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>
+            <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>
               {identifierError || errors.identifier}
             </p>
           )}
-          <p className='mt-[6.5px] truncate text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] truncate text-[var(--text-secondary)] text-xs'>
             {existingForm && identifier ? (
               <>
                 Live at:{' '}
@@ -411,7 +410,7 @@ export function FormDeploy({
                   href={fullUrl}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='text-[var(--text-primary)] hover:underline'
+                  className='text-[var(--text-primary)] hover-hover:underline'
                 >
                   {displayUrl}
                 </a>
@@ -424,7 +423,7 @@ export function FormDeploy({
 
         {/* Form Builder Preview */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Form builder
           </Label>
           <FormBuilder
@@ -443,7 +442,7 @@ export function FormDeploy({
 
         {/* Access Control */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Access control
           </Label>
           <ButtonGroup
@@ -458,7 +457,7 @@ export function FormDeploy({
 
         {authType === 'password' && (
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Password
             </Label>
             <div className='relative'>
@@ -472,7 +471,7 @@ export function FormDeploy({
                 placeholder={
                   existingForm?.hasPassword ? 'Enter new password to change' : 'Enter password'
                 }
-                className='pr-[32px]'
+                className='pr-8'
               />
               <button
                 type='button'
@@ -483,9 +482,9 @@ export function FormDeploy({
               </button>
             </div>
             {errors.password && (
-              <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{errors.password}</p>
+              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.password}</p>
             )}
-            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
               {existingForm?.hasPassword
                 ? 'Leave empty to keep the current password'
                 : 'This password will be required to access your form'}
@@ -495,7 +494,7 @@ export function FormDeploy({
 
         {authType === 'email' && (
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Allowed emails
             </Label>
             <TagInput
@@ -520,9 +519,9 @@ export function FormDeploy({
               placeholderWithTags='Add another'
             />
             {errors.emails && (
-              <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{errors.emails}</p>
+              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.emails}</p>
             )}
-            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
               Add specific emails or entire domains (@example.com)
             </p>
           </div>
@@ -530,7 +529,7 @@ export function FormDeploy({
 
         {/* Thank You Message */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Thank you message
           </Label>
           <Textarea
@@ -540,7 +539,7 @@ export function FormDeploy({
             rows={2}
             className='min-h-[60px] resize-none'
           />
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             This message will be displayed after form submission
           </p>
         </div>
@@ -551,7 +550,7 @@ export function FormDeploy({
         )}
 
         {errors.general && (
-          <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{errors.general}</p>
+          <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.general}</p>
         )}
 
         <button type='button' data-delete-trigger onClick={handleDelete} className='hidden' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
index f86f7eaf9e..c701e0bbb6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
@@ -214,9 +214,9 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
           <ModalHeader>
             <span>Edit API Info</span>
           </ModalHeader>
-          <ModalBody className='space-y-[12px]'>
+          <ModalBody className='space-y-3'>
             <div>
-              <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                 Description
               </Label>
               <Textarea
@@ -229,7 +229,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
 
             {!isPublicApiDisabled && (
               <div>
-                <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+                <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                   Access
                 </Label>
                 <ButtonGroup
@@ -239,7 +239,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                   <ButtonGroupItem value='api_key'>API Key</ButtonGroupItem>
                   <ButtonGroupItem value='public'>Public</ButtonGroupItem>
                 </ButtonGroup>
-                <p className='mt-1 text-[12px] text-[var(--text-secondary)]'>
+                <p className='mt-1 text-[var(--text-secondary)] text-caption'>
                   {accessMode === 'public'
                     ? 'Anyone can call this API without authentication. You will be billed for all usage.'
                     : 'Requires a valid API key to call this endpoint.'}
@@ -249,18 +249,18 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
 
             {inputFormat.length > 0 && (
               <div>
-                <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+                <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                   Parameters ({inputFormat.length})
                 </Label>
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   {inputFormat.map((field) => (
                     <div
                       key={field.name}
-                      className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'
+                      className='overflow-hidden rounded-sm border border-[var(--border-1)]'
                     >
-                      <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
-                        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                          <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+                      <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
+                        <div className='flex min-w-0 flex-1 items-center gap-2'>
+                          <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
                             {field.name}
                           </span>
                           <Badge variant='type' size='sm'>
@@ -268,9 +268,9 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                           </Badge>
                         </div>
                       </div>
-                      <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                        <div className='flex flex-col gap-[6px]'>
-                          <Label className='text-[13px]'>Description</Label>
+                      <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                        <div className='flex flex-col gap-1.5'>
+                          <Label className='text-small'>Description</Label>
                           <Input
                             value={paramDescriptions[field.name] || ''}
                             onChange={(e) =>
@@ -288,7 +288,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
           </ModalBody>
           <ModalFooter>
             {saveError && (
-              <p className='mr-auto text-[12px] text-[var(--text-error)]'>{saveError}</p>
+              <p className='mr-auto text-[var(--text-error)] text-caption'>{saveError}</p>
             )}
             <Button variant='default' onClick={handleCloseAttempt} disabled={isSaving}>
               Cancel
@@ -306,7 +306,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
             <span>Unsaved Changes</span>
           </ModalHeader>
           <ModalBody>
-            <p className='text-[14px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-sm'>
               You have unsaved changes. Are you sure you want to discard them?
             </p>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
index edb2a6e12a..0501948f85 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
@@ -93,7 +93,7 @@ export function VersionDescriptionModal({
           <ModalHeader>
             <span>Version Description</span>
           </ModalHeader>
-          <ModalBody className='space-y-[10px]'>
+          <ModalBody className='space-y-2.5'>
             <div className='flex items-center justify-between'>
               <p className='text-[var(--text-secondary)]'>
                 {currentDescription ? 'Edit the' : 'Add a'} description for{' '}
@@ -101,7 +101,7 @@ export function VersionDescriptionModal({
               </p>
               <Button
                 variant='active'
-                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                className='-my-1 h-5 px-2 py-0 text-xs'
                 onClick={handleGenerateDescription}
                 disabled={isGenerating || updateMutation.isPending}
               >
@@ -118,12 +118,12 @@ export function VersionDescriptionModal({
             />
             <div className='flex items-center justify-between'>
               {(updateMutation.error || generateMutation.error) && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {updateMutation.error?.message || generateMutation.error?.message}
                 </p>
               )}
               {!updateMutation.error && !generateMutation.error && <div />}
-              <p className='text-[11px] text-[var(--text-tertiary)]'>{description.length}/2000</p>
+              <p className='text-[var(--text-tertiary)] text-xs'>{description.length}/2000</p>
             </div>
           </ModalBody>
           <ModalFooter>
@@ -151,7 +151,7 @@ export function VersionDescriptionModal({
             <span>Unsaved Changes</span>
           </ModalHeader>
           <ModalBody>
-            <p className='text-[14px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-sm'>
               You have unsaved changes. Are you sure you want to discard them?
             </p>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index b986b58de6..82c09c5817 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -17,8 +17,8 @@ import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persiste
 import { useUpdateDeploymentVersion } from '@/hooks/queries/deployments'
 import { VersionDescriptionModal } from './version-description-modal'
 
-const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
-const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-[12px]'
+const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-caption'
+const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-caption'
 const COLUMN_BASE_CLASS = 'flex-shrink-0'
 
 const COLUMN_WIDTHS = {
@@ -136,8 +136,8 @@ export function Versions({
 
   if (versionsLoading && versions.length === 0) {
     return (
-      <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
-        <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+      <div className='overflow-hidden rounded-sm border border-[var(--border)]'>
+        <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-4'>
           <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
             <Skeleton className='h-[12px] w-[50px]' />
           </div>
@@ -151,10 +151,10 @@ export function Versions({
         </div>
         <div className='bg-[var(--surface-2)]'>
           {[0, 1].map((i) => (
-            <div key={i} className='flex h-[36px] items-center px-[16px]'>
-              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
-                <div className='flex items-center gap-[16px]'>
-                  <Skeleton className='h-[6px] w-[6px] rounded-[2px]' />
+            <div key={i} className='flex h-[36px] items-center px-4'>
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-2')}>
+                <div className='flex items-center gap-4'>
+                  <Skeleton className='h-[6px] w-[6px] rounded-xs' />
                   <Skeleton className='h-[12px] w-[60px]' />
                 </div>
               </div>
@@ -168,11 +168,11 @@ export function Versions({
                 className={clsx(
                   COLUMN_WIDTHS.ACTIONS,
                   COLUMN_BASE_CLASS,
-                  'flex justify-end gap-[2px]'
+                  'flex justify-end gap-0.5'
                 )}
               >
-                <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
-                <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
+                <Skeleton className='h-[20px] w-[20px] rounded-sm' />
+                <Skeleton className='h-[20px] w-[20px] rounded-sm' />
               </div>
             </div>
           ))}
@@ -183,15 +183,15 @@ export function Versions({
 
   if (versions.length === 0) {
     return (
-      <div className='flex h-[120px] items-center justify-center rounded-[4px] border border-[var(--border)] text-[#8D8D8D] text-[13px]'>
+      <div className='flex h-[120px] items-center justify-center rounded-sm border border-[var(--border)] text-[var(--text-placeholder)] text-small'>
         No deployments yet
       </div>
     )
   }
 
   return (
-    <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
-      <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+    <div className='overflow-hidden rounded-sm border border-[var(--border)]'>
+      <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-4'>
         <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
           <span className={HEADER_TEXT_CLASS}>Version</span>
         </div>
@@ -212,19 +212,19 @@ export function Versions({
             <div
               key={v.id}
               className={clsx(
-                'flex h-[36px] cursor-pointer items-center px-[16px] transition-colors duration-100',
+                'flex h-[36px] cursor-pointer items-center px-4 transition-colors duration-100',
                 isSelected
-                  ? 'bg-[var(--accent)]/10 hover:bg-[var(--accent)]/15'
-                  : 'hover:bg-[var(--surface-6)] dark:hover:bg-[var(--border)]'
+                  ? 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,var(--accent)_15%,transparent)]'
+                  : 'hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--border)]'
               )}
               onClick={() => handleRowClick(v.version)}
             >
-              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
-                <div className='flex items-center gap-[16px]'>
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-2')}>
+                <div className='flex items-center gap-4'>
                   <div
                     className={clsx(
-                      'h-[6px] w-[6px] shrink-0 rounded-[2px]',
-                      v.isActive ? 'bg-[#4ADE80]' : 'bg-[#B7B7B7]'
+                      'h-[6px] w-[6px] shrink-0 rounded-xs',
+                      v.isActive ? 'bg-[var(--indicator-active)]' : 'bg-[var(--indicator-inactive)]'
                     )}
                     title={v.isActive ? 'Live' : 'Inactive'}
                   />
@@ -245,7 +245,7 @@ export function Versions({
                       onClick={(e) => e.stopPropagation()}
                       onBlur={() => handleSaveRename(v.version)}
                       className={clsx(
-                        'w-full border-0 bg-transparent p-0 font-medium text-[12px] leading-5 outline-none',
+                        'w-full border-0 bg-transparent p-0 font-medium text-caption leading-5 outline-none',
                         'text-[var(--text-primary)] focus:outline-none focus:ring-0'
                       )}
                       maxLength={100}
@@ -257,7 +257,7 @@ export function Versions({
                     />
                   ) : (
                     <span
-                      className={clsx('block flex items-center gap-[4px] truncate', ROW_TEXT_CLASS)}
+                      className={clsx('block flex items-center gap-1 truncate', ROW_TEXT_CLASS)}
                     >
                       <span className='truncate'>{v.name || `v${v.version}`}</span>
                       {v.isActive && <span className='text-[var(--text-tertiary)]'> (live)</span>}
@@ -289,7 +289,7 @@ export function Versions({
                 className={clsx(
                   COLUMN_WIDTHS.ACTIONS,
                   COLUMN_BASE_CLASS,
-                  'flex items-center justify-end gap-[2px]'
+                  'flex items-center justify-end gap-0.5'
                 )}
                 onClick={(e) => e.stopPropagation()}
               >
@@ -300,7 +300,7 @@ export function Versions({
                       className={clsx(
                         '!p-1',
                         !v.description &&
-                          'text-[var(--text-quaternary)] hover:text-[var(--text-tertiary)]'
+                          'text-[var(--text-quaternary)] hover-hover:text-[var(--text-tertiary)]'
                       )}
                       onClick={() => handleOpenDescriptionModal(v.version)}
                     >
@@ -309,9 +309,9 @@ export function Versions({
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top' className='max-w-[240px]'>
                     {v.description ? (
-                      <p className='line-clamp-3 text-[12px]'>{v.description}</p>
+                      <p className='line-clamp-3 text-caption'>{v.description}</p>
                     ) : (
-                      <p className='text-[12px]'>Add description</p>
+                      <p className='text-caption'>Add description</p>
                     )}
                   </Tooltip.Content>
                 </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index cd46688c51..695d6c95cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -125,18 +125,18 @@ export function GeneralDeploy({
 
   if (showLoadingSkeleton) {
     return (
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <div className='relative mb-[6.5px]'>
             <Skeleton className='h-[16px] w-[90px]' />
           </div>
-          <div className='h-[260px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+          <div className='h-[260px] w-full overflow-hidden rounded-sm border border-[var(--border)]'>
             <Skeleton className='h-full w-full rounded-none' />
           </div>
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[60px]' />
-          <div className='h-[120px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+          <div className='h-[120px] w-full overflow-hidden rounded-sm border border-[var(--border)]'>
             <Skeleton className='h-full w-full rounded-none' />
           </div>
         </div>
@@ -146,10 +146,10 @@ export function GeneralDeploy({
 
   return (
     <>
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <div className='relative mb-[6.5px]'>
-            <Label className='block truncate pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='block truncate pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {previewMode === 'selected' && selectedVersionInfo
                 ? selectedVersionInfo.name || `v${selectedVersion}`
                 : 'Live Workflow'}
@@ -173,7 +173,7 @@ export function GeneralDeploy({
           </div>
 
           <div
-            className='relative h-[260px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'
+            className='relative h-[260px] w-full overflow-hidden rounded-sm border border-[var(--border)]'
             onWheelCapture={(e) => {
               if (e.ctrlKey || e.metaKey) return
               e.stopPropagation()
@@ -197,7 +197,7 @@ export function GeneralDeploy({
                       type='button'
                       variant='default'
                       onClick={() => setShowExpandedPreview(true)}
-                      className='absolute right-[8px] bottom-[8px] z-10 h-[28px] w-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                      className='absolute right-[8px] bottom-2 z-10 h-[28px] w-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                     >
                       <Expand className='h-[14px] w-[14px]' />
                     </Button>
@@ -206,7 +206,7 @@ export function GeneralDeploy({
                 </Tooltip.Root>
               </>
             ) : (
-              <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+              <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
                 Deploy your workflow to see a preview
               </div>
             )}
@@ -214,7 +214,7 @@ export function GeneralDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Versions
           </Label>
           <Versions
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index 1fe195150e..494158ae39 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -441,7 +441,7 @@ export function McpDeploy({
 
   if (!isDeployed) {
     return (
-      <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+      <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-small'>
         Deploy your workflow first to add it as an MCP tool.
       </div>
     )
@@ -450,18 +450,18 @@ export function McpDeploy({
   if (isLoadingServers) {
     return (
       <div className='-mx-1 space-y-4 px-1'>
-        <div className='space-y-[12px]'>
+        <div className='space-y-3'>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[70px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[80px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
         </div>
       </div>
@@ -497,7 +497,7 @@ export function McpDeploy({
   return (
     <form
       id='mcp-deploy-form'
-      className='-mx-1 space-y-[12px] px-1'
+      className='-mx-1 space-y-3 px-1'
       onSubmit={(e) => {
         e.preventDefault()
         handleSave()
@@ -517,7 +517,7 @@ export function McpDeploy({
       ))}
 
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Tool name
         </Label>
         <Input
@@ -525,13 +525,13 @@ export function McpDeploy({
           onChange={(e) => setToolName(e.target.value)}
           placeholder='e.g., book_flight'
         />
-        <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+        <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
           Use lowercase letters, numbers, and underscores only
         </p>
       </div>
 
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Description
         </Label>
         <Textarea
@@ -544,18 +544,18 @@ export function McpDeploy({
 
       {inputFormat.length > 0 && (
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Parameters ({inputFormat.length})
           </Label>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {inputFormat.map((field) => (
               <div
                 key={field.name}
-                className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'
+                className='overflow-hidden rounded-sm border border-[var(--border-1)]'
               >
-                <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
-                  <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                    <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+                <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
+                  <div className='flex min-w-0 flex-1 items-center gap-2'>
+                    <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
                       {field.name}
                     </span>
                     <Badge variant='type' size='sm'>
@@ -563,9 +563,9 @@ export function McpDeploy({
                     </Badge>
                   </div>
                 </div>
-                <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                  <div className='flex flex-col gap-[6px]'>
-                    <Label className='text-[13px]'>Description</Label>
+                <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Description</Label>
                     <Input
                       value={parameterDescriptions[field.name] || ''}
                       onChange={(e) =>
@@ -585,7 +585,7 @@ export function McpDeploy({
       )}
 
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Servers
         </Label>
         <Combobox
@@ -602,16 +602,16 @@ export function McpDeploy({
           }
         />
         {!toolName.trim() && (
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             Enter a tool name to select servers
           </p>
         )}
       </div>
 
       {saveErrors.length > 0 && (
-        <div className='mt-[6.5px] flex flex-col gap-[2px]'>
+        <div className='mt-[6.5px] flex flex-col gap-0.5'>
           {saveErrors.map((error) => (
-            <p key={error} className='text-[12px] text-[var(--text-error)]'>
+            <p key={error} className='text-[var(--text-error)] text-caption'>
               {error}
             </p>
           ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
index ce03a8a93b..9a749b7d61 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
@@ -205,26 +205,26 @@ export function TemplateDeploy({
 
   if (isLoadingTemplate) {
     return (
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[40px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[76px]' />
-          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+          <Skeleton className='h-[160px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[32px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
       </div>
     )
@@ -232,15 +232,15 @@ export function TemplateDeploy({
 
   return (
     <div className='space-y-4'>
-      <form id='template-deploy-form' onSubmit={handleSubmit} className='space-y-[12px]'>
+      <form id='template-deploy-form' onSubmit={handleSubmit} className='space-y-3'>
         {existingTemplate?.state && (
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Live Template
             </Label>
             <div
               ref={previewContainerRef}
-              className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-[4px] border border-[var(--border)]'
+              className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-sm border border-[var(--border)]'
               onWheelCapture={(e) => {
                 if (e.ctrlKey || e.metaKey) return
                 e.stopPropagation()
@@ -252,7 +252,7 @@ export function TemplateDeploy({
         )}
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Name <span className='text-[var(--text-error)]'>*</span>
           </Label>
           <Input
@@ -264,7 +264,7 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Tagline
           </Label>
           <Input
@@ -277,7 +277,7 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Description
           </Label>
           <Textarea
@@ -290,12 +290,12 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Creator <span className='text-[var(--text-error)]'>*</span>
           </Label>
           {creatorProfiles.length === 0 && !loadingCreators ? (
-            <div className='space-y-[8px]'>
-              <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <div className='space-y-2'>
+              <p className='text-[var(--text-tertiary)] text-caption'>
                 A creator profile is required to publish templates.
               </p>
               <Button
@@ -304,7 +304,7 @@ export function TemplateDeploy({
                 onClick={() => {
                   navigateToSettings({ section: 'template-profile' })
                 }}
-                className='gap-[8px]'
+                className='gap-2'
               >
                 <span>Create Template Profile</span>
               </Button>
@@ -327,7 +327,7 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Tags
           </Label>
           <TagInput
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
index b04f2ed5cc..3285337ab9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
@@ -90,7 +90,7 @@ export function Deploy({ activeWorkflowId, userPermissions, className }: DeployP
         <Tooltip.Trigger asChild>
           <span>
             <Button
-              className='h-[30px] gap-[6px] px-[10px]'
+              className='h-[30px] gap-1.5 px-2.5'
               variant={
                 isRegistryLoading ? 'active' : changeDetected || !isDeployed ? 'tertiary' : 'active'
               }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
index f73b4965d2..38b79c98e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -78,7 +78,7 @@ export function FieldItem({
       onDragStart={handleDragStart}
       onClick={handleClick}
       className={clsx(
-        'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
+        'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
         hasChildren && 'cursor-pointer'
       )}
     >
@@ -90,7 +90,7 @@ export function FieldItem({
       >
         {field.name}
       </span>
-      <Badge className='flex-shrink-0 rounded-[4px] px-[6px] py-[1px] font-mono text-[11px]'>
+      <Badge className='flex-shrink-0 rounded-sm px-1.5 py-[1px] font-mono text-xs'>
         {field.type}
       </Badge>
       {hasChildren && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index b86a912105..e2e5f0e8cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -79,18 +79,18 @@ function ConnectionItem({
   }
 
   return (
-    <div className='mb-[2px] last:mb-0' ref={connectionRef}>
+    <div className='mb-0.5 last:mb-0' ref={connectionRef}>
       <div
         draggable
         onDragStart={(e) => onConnectionDragStart(e, connection)}
         className={clsx(
-          'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
+          'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
           hasFields && 'cursor-pointer'
         )}
         onClick={() => hasFields && onToggleExpand(connection.id)}
       >
         <div
-          className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+          className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
           style={{ background: bgColor }}
         >
           {Icon && (
@@ -122,8 +122,8 @@ function ConnectionItem({
       </div>
 
       {isExpanded && hasFields && (
-        <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-          <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+        <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+          <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
           {renderFieldTree(fields, '', 0, connection)}
         </div>
       )}
@@ -262,8 +262,8 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
               onToggleExpand={(p) => toggleFieldExpansion(connection.id, p)}
             />
             {hasChildren && expanded && (
-              <div className='relative mt-[2px] ml-[6px] space-y-[2px] pl-[10px]'>
-                <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+              <div className='relative mt-0.5 ml-1.5 space-y-0.5 pl-2.5'>
+                <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                 {renderFieldTree(field.children!, fieldPath, level + 1, connection)}
               </div>
             )}
@@ -279,7 +279,7 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
   }
 
   return (
-    <div ref={scrollContainerRef} className='space-y-[2px]'>
+    <div ref={scrollContainerRef} className='space-y-0.5'>
       {connections.map((connection) => {
         const mergedSubBlocks = getMergedSubBlocks(connection.id)
         const sourceBlock = blocks[connection.id]
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index af7d63c168..f288eec621 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -733,8 +733,8 @@ export const Code = memo(function Code({
           className={cn(
             'text-right text-xs tabular-nums leading-[21px]',
             isActive
-              ? 'text-[var(--text-primary)] dark:text-[#eeeeee]'
-              : 'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+              ? 'text-[var(--text-primary)] dark:text-[var(--code-foreground)]'
+              : 'text-[var(--text-muted)] dark:text-[var(--code-line-number)]'
           )}
         >
           {lineNumber}
@@ -759,7 +759,7 @@ export const Code = memo(function Code({
           key={'1-0'}
           className={cn(
             'text-right text-xs tabular-nums leading-[21px]',
-            'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+            'text-[var(--text-muted)] dark:text-[var(--code-line-number)]'
           )}
         >
           1
@@ -782,7 +782,7 @@ export const Code = memo(function Code({
           className={cn(
             'h-8 w-8 p-0',
             'text-muted-foreground/60 transition-all duration-200',
-            'hover:scale-105 hover:bg-muted/50 hover:text-foreground',
+            'hover-hover:scale-105 hover-hover:bg-muted/50 hover-hover:text-foreground',
             'active:scale-95'
           )}
           aria-label='Copy code'
@@ -816,7 +816,7 @@ export const Code = memo(function Code({
                 onClick={isPromptVisible ? hidePromptInline : showPromptInline}
                 disabled={isAiLoading || isAiStreaming}
                 aria-label='Generate code with AI'
-                className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow'
+                className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
               >
                 <Wand2 className='h-4 w-4' />
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
index c0ef093326..a1933049b0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
@@ -453,7 +453,7 @@ export const ComboBox = memo(function ComboBox({
     const displayLabel = inputValue
     return (
       <div className='flex w-full items-center truncate [scrollbar-width:none]'>
-        {SelectedIcon && <SelectedIcon className='mr-[8px] h-3 w-3 flex-shrink-0' />}
+        {SelectedIcon && <SelectedIcon className='mr-2 h-3 w-3 flex-shrink-0' />}
         <div className='truncate'>
           {formatDisplayText(displayLabel, {
             accessiblePrefixes,
@@ -568,7 +568,7 @@ export const ComboBox = memo(function ComboBox({
               inputRef={ref as React.RefObject<HTMLInputElement>}
               filterOptions
               searchable={config.searchable}
-              className={cn('allow-scroll overflow-x-auto', selectedOptionIcon && 'pl-[28px]')}
+              className={cn('allow-scroll overflow-x-auto', selectedOptionIcon && 'pl-7')}
               inputProps={comboboxInputProps}
               isLoading={isLoadingOptions}
               error={fetchError}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index 7f2a1d0546..6bd6837769 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -830,26 +830,26 @@ export function ConditionInput({
   }
 
   return (
-    <div className='space-y-[8px]' ref={containerRef}>
+    <div className='space-y-2' ref={containerRef}>
       {conditionalBlocks.map((block, index) => (
         <div
           key={block.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]'
+          className='group relative overflow-visible rounded-sm border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'
         >
           <div
             className={cn(
-              'flex items-center justify-between overflow-hidden bg-transparent px-[10px] py-[5px]',
+              'flex items-center justify-between overflow-hidden bg-transparent px-2.5 py-[5px]',
               isRouterMode
                 ? 'rounded-t-[4px] border-[var(--border-1)] border-b'
                 : block.title === 'else'
-                  ? 'rounded-[4px] border-0'
+                  ? 'rounded-sm border-0'
                   : 'rounded-t-[4px] border-[var(--border-1)] border-b'
             )}
           >
-            <span className='font-medium text-[14px] text-[var(--text-tertiary)]'>
+            <span className='font-medium text-[var(--text-tertiary)] text-sm'>
               {isRouterMode ? `Route ${index + 1}` : block.title}
             </span>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Button
@@ -914,7 +914,7 @@ export function ConditionInput({
                     disabled={
                       isPreview || disabled || conditionalBlocks.length <= (isRouterMode ? 1 : 2)
                     }
-                    className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+                    className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
                   >
                     <Trash className='h-[14px] w-[14px]' />
                     <span className='sr-only'>Delete Block</span>
@@ -992,7 +992,7 @@ export function ConditionInput({
               {/* Custom resize handle */}
               {!isPreview && !disabled && (
                 <div
-                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
+                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                   onMouseDown={(e) => startRouterResize(e, block.id)}
                   onDragStart={(e) => {
                     e.preventDefault()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/connect-credential-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/connect-credential-modal.tsx
index 91eeb4d325..cc3a2306be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/connect-credential-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/connect-credential-modal.tsx
@@ -133,8 +133,8 @@ export function ConnectCredentialModal({
       <ModalContent size='md'>
         <ModalHeader>Connect {providerName}</ModalHeader>
         <ModalBody>
-          <div className='flex flex-col gap-[16px]'>
-            <div className='flex items-center gap-[12px]'>
+          <div className='flex flex-col gap-4'>
+            <div className='flex items-center gap-3'>
               <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
                 <ProviderIcon className='h-[18px] w-[18px]' />
               </div>
@@ -150,18 +150,18 @@ export function ConnectCredentialModal({
 
             {displayScopes.length > 0 && (
               <div className='rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-                <div className='border-[var(--border-1)] border-b px-[14px] py-[10px]'>
+                <div className='border-[var(--border-1)] border-b px-3.5 py-2.5'>
                   <h4 className='font-medium text-[12px] text-[var(--text-primary)]'>
                     Permissions requested
                   </h4>
                 </div>
-                <ul className='max-h-[200px] space-y-[10px] overflow-y-auto px-[14px] py-[12px]'>
+                <ul className='max-h-[200px] space-y-2.5 overflow-y-auto px-3.5 py-3'>
                   {displayScopes.map((scope) => (
-                    <li key={scope} className='flex items-start gap-[10px]'>
-                      <div className='mt-[2px] flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                    <li key={scope} className='flex items-start gap-2.5'>
+                      <div className='mt-0.5 flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                         <Check className='h-[10px] w-[10px] text-[var(--text-primary)]' />
                       </div>
-                      <div className='flex flex-1 items-center gap-[8px] text-[12px] text-[var(--text-primary)]'>
+                      <div className='flex flex-1 items-center gap-2 text-[12px] text-[var(--text-primary)]'>
                         <span>{getScopeDescription(scope)}</span>
                       </div>
                     </li>
@@ -186,7 +186,7 @@ export function ConnectCredentialModal({
                 placeholder={`My ${providerName} account`}
                 autoComplete='off'
                 data-lpignore='true'
-                className='mt-[6px]'
+                className='mt-1.5'
               />
             </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
index 4ba510e5b9..61e95bc3cc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
@@ -131,35 +131,35 @@ export function OAuthRequiredModal({
       <ModalContent size='md'>
         <ModalHeader>Connect {providerName}</ModalHeader>
         <ModalBody>
-          <div className='flex flex-col gap-[16px]'>
-            <div className='flex items-center gap-[14px]'>
-              <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
+          <div className='flex flex-col gap-4'>
+            <div className='flex items-center gap-3.5'>
+              <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-lg bg-[var(--surface-5)]'>
                 <ProviderIcon className='h-[18px] w-[18px]' />
               </div>
               <div className='flex-1'>
-                <p className='font-medium text-[13px] text-[var(--text-primary)]'>
+                <p className='font-medium text-[var(--text-primary)] text-small'>
                   Connect your {providerName} account
                 </p>
-                <p className='text-[12px] text-[var(--text-tertiary)]'>
+                <p className='text-[var(--text-tertiary)] text-caption'>
                   The "{toolName}" tool requires access to your account
                 </p>
               </div>
             </div>
 
             {displayScopes.length > 0 && (
-              <div className='rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-                <div className='border-[var(--border-1)] border-b px-[14px] py-[10px]'>
-                  <h4 className='font-medium text-[12px] text-[var(--text-primary)]'>
+              <div className='rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)]'>
+                <div className='border-[var(--border-1)] border-b px-3.5 py-2.5'>
+                  <h4 className='font-medium text-[var(--text-primary)] text-caption'>
                     Permissions requested
                   </h4>
                 </div>
-                <ul className='max-h-[200px] space-y-[10px] overflow-y-auto px-[14px] py-[12px]'>
+                <ul className='max-h-[200px] space-y-2.5 overflow-y-auto px-3.5 py-3'>
                   {displayScopes.map((scope) => (
-                    <li key={scope} className='flex items-start gap-[10px]'>
-                      <div className='mt-[2px] flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                    <li key={scope} className='flex items-start gap-2.5'>
+                      <div className='mt-0.5 flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                         <Check className='h-[10px] w-[10px] text-[var(--text-primary)]' />
                       </div>
-                      <div className='flex flex-1 items-center gap-[8px] text-[12px] text-[var(--text-primary)]'>
+                      <div className='flex flex-1 items-center gap-2 text-[var(--text-primary)] text-caption'>
                         <span>{getScopeDescription(scope)}</span>
                         {newScopesSet.has(scope) && (
                           <Badge variant='amber' size='sm'>
@@ -173,7 +173,7 @@ export function OAuthRequiredModal({
               </div>
             )}
 
-            {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
+            {error && <p className='text-[var(--text-error)] text-caption'>{error}</p>}
           </div>
         </ModalBody>
         <ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
index 733c9f1ad3..e7915a6f90 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -346,19 +346,19 @@ export function CredentialSelector({
         filterOptions={true}
         isLoading={credentialsLoading}
         overlayContent={overlayContent}
-        className={overlayContent ? 'pl-[28px]' : ''}
+        className={overlayContent ? 'pl-7' : ''}
       />
 
       {needsUpdate && (
-        <div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
-          <div className='flex items-center font-medium text-[12px]'>
-            <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+        <div className='mt-2 flex flex-col gap-1 rounded-sm border bg-[var(--surface-2)] px-2 py-1.5'>
+          <div className='flex items-center font-medium text-caption'>
+            <span className='mr-1.5 inline-block h-[6px] w-[6px] rounded-xs bg-amber-500' />
             Additional permissions required
           </div>
           <Button
             variant='active'
             onClick={() => setShowOAuthModal(true)}
-            className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+            className='w-full px-2 py-1 font-medium text-caption'
           >
             Update access
           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index 405599aa9a..067b2c2975 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -223,7 +223,7 @@ export function DocumentTagEntry({
 
   if (!isLoading && tagDefinitions.length === 0 && knowledgeBaseId) {
     return (
-      <div className='flex h-32 items-center justify-center rounded-[4px] border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[#1F1F1F]'>
+      <div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
         <div className='text-center'>
           <p className='font-medium text-[var(--text-secondary)] text-sm'>
             No tags defined for this knowledge base
@@ -242,11 +242,11 @@ export function DocumentTagEntry({
    */
   const renderTagHeader = (tag: DocumentTag, index: number) => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => toggleCollapse(tag.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
         </span>
         {tag.collapsed && tag.tagName && (
@@ -255,7 +255,7 @@ export function DocumentTagEntry({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button
           variant='ghost'
           onClick={addTag}
@@ -269,7 +269,7 @@ export function DocumentTagEntry({
           variant='ghost'
           onClick={() => removeTag(tag.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Tag</span>
@@ -327,7 +327,7 @@ export function DocumentTagEntry({
             if (el) overlayRefs.current[cellKey] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
         >
@@ -369,9 +369,9 @@ export function DocumentTagEntry({
     }))
 
     return (
-      <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Tag</Label>
+      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Tag</Label>
           <Combobox
             options={tagOptions}
             value={tag.tagName}
@@ -381,8 +381,8 @@ export function DocumentTagEntry({
           />
         </div>
 
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Value</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Value</Label>
           {renderValueInput(tag)}
         </div>
       </div>
@@ -390,13 +390,13 @@ export function DocumentTagEntry({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {tags.map((tag, index) => (
         <div
           key={tag.id}
           data-tag-id={tag.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-1)]',
+            'rounded-sm border border-[var(--border-1)]',
             tag.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
index 3a56fcfabf..207cd2e630 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
@@ -463,10 +463,7 @@ export const Dropdown = memo(function Dropdown({
     return (
       <div className='flex items-center gap-1 overflow-hidden whitespace-nowrap'>
         {multiValues.map((selectedValue: string) => (
-          <Badge
-            key={selectedValue}
-            className='shrink-0 rounded-[8px] py-[4px] text-[12px] leading-none'
-          >
+          <Badge key={selectedValue} className='shrink-0 rounded-lg py-1 text-caption leading-none'>
             {(optionMap.get(selectedValue) || selectedValue).toLowerCase()}
           </Badge>
         ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index f4bc3f68ff..447752868e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -127,11 +127,9 @@ export function EvalInput({
   }
 
   const renderMetricHeader = (metric: EvalMetric, index: number) => (
-    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-[10px] py-[5px]'>
-      <span className='font-medium text-[14px] text-[var(--text-tertiary)]'>
-        Metric {index + 1}
-      </span>
-      <div className='flex items-center gap-[8px]'>
+    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
+      <span className='font-medium text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
+      <div className='flex items-center gap-2'>
         <Tooltip.Root key={`add-${metric.id}`}>
           <Tooltip.Trigger asChild>
             <Button
@@ -153,7 +151,7 @@ export function EvalInput({
               variant='ghost'
               onClick={() => removeMetric(metric.id)}
               disabled={isPreview || disabled || metrics.length === 1}
-              className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+              className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
             >
               <Trash className='h-[14px] w-[14px]' />
               <span className='sr-only'>Delete Metric</span>
@@ -166,18 +164,18 @@ export function EvalInput({
   )
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {metrics.map((metric, index) => (
         <div
           key={metric.id}
           data-metric-id={metric.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-1)]'
+          className='group relative overflow-visible rounded-sm border border-[var(--border-1)]'
         >
           {renderMetricHeader(metric, index)}
 
-          <div className='flex flex-col gap-[8px] border-[var(--border-1)] px-[10px] pt-[6px] pb-[10px]'>
-            <div key={`name-${metric.id}`} className='flex flex-col gap-[6px]'>
-              <Label className='text-[13px]'>Name</Label>
+          <div className='flex flex-col gap-2 border-[var(--border-1)] px-2.5 pt-1.5 pb-2.5'>
+            <div key={`name-${metric.id}`} className='flex flex-col gap-1.5'>
+              <Label className='text-small'>Name</Label>
               <Input
                 name='name'
                 value={metric.name}
@@ -187,8 +185,8 @@ export function EvalInput({
               />
             </div>
 
-            <div key={`description-${metric.id}`} className='flex flex-col gap-[6px]'>
-              <Label className='text-[13px]'>Description</Label>
+            <div key={`description-${metric.id}`} className='flex flex-col gap-1.5'>
+              <Label className='text-small'>Description</Label>
               <div className='relative'>
                 {(() => {
                   const fieldState = inputController.fieldHelpers.getFieldState(metric.id)
@@ -227,7 +225,7 @@ export function EvalInput({
                           if (el) descriptionOverlayRefs.current[metric.id] = el
                         }}
                         className={cn(
-                          'absolute inset-0 overflow-auto bg-transparent px-[8px] py-[8px] font-medium font-sans text-[#eeeeee] text-sm',
+                          'absolute inset-0 overflow-auto bg-transparent px-2 py-2 font-medium font-sans text-[var(--code-foreground)] text-sm',
                           !(isPreview || disabled) && 'pointer-events-none'
                         )}
                       >
@@ -258,9 +256,9 @@ export function EvalInput({
               </div>
             </div>
 
-            <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-[8px]'>
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='text-[13px]'>Min Value</Label>
+            <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-2'>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='text-small'>Min Value</Label>
                 <Input
                   type='text'
                   value={metric.range.min}
@@ -272,8 +270,8 @@ export function EvalInput({
                   name='eval-range-min'
                 />
               </div>
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='text-[13px]'>Max Value</Label>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='text-small'>Max Value</Label>
                 <Input
                   type='text'
                   value={metric.range.max}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index b46467aa3b..466719a1b3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -124,7 +124,7 @@ function SingleFileSelector({
         {isDeleting ? (
           <div className='h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
         ) : (
-          <X className='h-4 w-4 opacity-50 hover:opacity-100' />
+          <X className='h-4 w-4 opacity-50 hover-hover:opacity-100' />
         )}
       </Button>
     </div>
@@ -553,9 +553,9 @@ export function FileUpload({
     return (
       <div
         key={fileKey}
-        className='relative rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
+        className='relative rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover-hover:bg-[var(--border-1)]'
       >
-        <div className='truncate pr-[24px] text-sm' title={file.name}>
+        <div className='truncate pr-6 text-sm' title={file.name}>
           <span className='text-[var(--text-primary)]'>{truncateMiddle(file.name)}</span>
           <span className='ml-2 text-[var(--text-muted)]'>({formatFileSize(file.size)})</span>
         </div>
@@ -580,7 +580,7 @@ export function FileUpload({
     return (
       <div
         key={file.id}
-        className='flex items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] dark:bg-[var(--surface-5)]'
+        className='flex items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 dark:bg-[var(--surface-5)]'
       >
         <div className='flex-1 truncate pr-2 text-sm'>
           <span className='text-[var(--text-primary)]'>{file.name}</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
index a1894292b2..9bb08d4ebb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
@@ -81,11 +81,11 @@ export function FilterRuleRow({
 
   const renderHeader = () => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => onToggleCollapse(rule.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {rule.collapsed && rule.column ? getColumnLabel(rule.column) : `Condition ${index + 1}`}
         </span>
         {rule.collapsed && rule.column && (
@@ -94,7 +94,7 @@ export function FilterRuleRow({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add Condition</span>
@@ -103,7 +103,7 @@ export function FilterRuleRow({
           variant='ghost'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Condition</span>
@@ -138,7 +138,7 @@ export function FilterRuleRow({
       <div
         ref={overlayRef}
         className={cn(
-          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
           !isReadOnly && 'pointer-events-none'
         )}
       >
@@ -165,10 +165,10 @@ export function FilterRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
+    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
       {index > 0 && (
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Logic</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Logic</Label>
           <Combobox
             options={logicalOptions}
             value={rule.logicalOperator}
@@ -178,8 +178,8 @@ export function FilterRuleRow({
         </div>
       )}
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Column</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Column</Label>
         <Combobox
           options={columns}
           value={rule.column}
@@ -189,8 +189,8 @@ export function FilterRuleRow({
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Operator</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Operator</Label>
         <Combobox
           options={comparisonOptions}
           value={rule.operator}
@@ -200,8 +200,8 @@ export function FilterRuleRow({
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Value</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Value</Label>
         {renderValueInput()}
       </div>
     </div>
@@ -211,7 +211,7 @@ export function FilterRuleRow({
     <div
       data-filter-id={rule.id}
       className={cn(
-        'rounded-[4px] border border-[var(--border-1)]',
+        'rounded-sm border border-[var(--border-1)]',
         rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
index 4703b7f41a..147b9f3f6c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
@@ -92,7 +92,7 @@ export function FilterBuilder({
   )
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {rules.map((rule, index) => (
         <FilterRuleRow
           key={rule.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index d9096c36f3..5f93afb87e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -107,8 +107,8 @@ export function GroupedCheckboxList({
           variant='ghost'
           disabled={disabled}
           className={cn(
-            'flex w-full cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
-            'hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+            'flex w-full cursor-pointer items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
+            'hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
           )}
         >
           <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
index 73563ba9bf..2f6945a48b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -117,7 +117,7 @@ export function InputMapping({
 
   if (!selectedWorkflowId) {
     return (
-      <div className='flex h-32 items-center justify-center rounded-[4px] border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[#1F1F1F]'>
+      <div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
         <div className='text-center'>
           <p className='font-medium text-[var(--text-secondary)] text-sm'>No workflow selected</p>
           <p className='mt-1 text-[var(--text-muted)] text-xs'>
@@ -130,7 +130,7 @@ export function InputMapping({
 
   if (isLoading) {
     return (
-      <div className='space-y-[8px]'>
+      <div className='space-y-2'>
         <InputMappingField
           key='loading'
           fieldName='loading...'
@@ -154,7 +154,7 @@ export function InputMapping({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {childInputFields.map((field) => (
         <InputMappingField
           key={field.name}
@@ -218,16 +218,16 @@ function InputMappingField({
   return (
     <div
       className={cn(
-        'rounded-[4px] border border-[var(--border-1)]',
+        'rounded-sm border border-[var(--border-1)]',
         collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
       <div
-        className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+        className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
         onClick={onToggleCollapse}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-          <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
+          <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
             {fieldName}
           </span>
           {fieldType && (
@@ -239,9 +239,9 @@ function InputMappingField({
       </div>
 
       {!collapsed && (
-        <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-          <div className='flex flex-col gap-[6px]'>
-            <Label className='text-[13px]'>Value</Label>
+        <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+          <div className='flex flex-col gap-1.5'>
+            <Label className='text-small'>Value</Label>
             <div className='relative'>
               <Input
                 ref={(el) => {
@@ -274,7 +274,7 @@ function InputMappingField({
                   if (el) overlayRefs.current.set(fieldId, el)
                 }}
                 className={cn(
-                  'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                  'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
                   !disabled && 'pointer-events-none'
                 )}
                 style={{ overflowX: 'auto' }}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
index 4f45aee71f..99fe3bb416 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
@@ -164,15 +164,15 @@ export function KnowledgeBaseSelector({
           {selectedKnowledgeBases.map((kb) => (
             <div
               key={kb.id}
-              className='inline-flex items-center rounded-md border border-[#00B0B0]/20 bg-[#00B0B0]/10 px-2 py-1 text-xs'
+              className='inline-flex items-center rounded-md border border-[color-mix(in_srgb,var(--brand-knowledge)_20%,transparent)] bg-[color-mix(in_srgb,var(--brand-knowledge)_10%,transparent)] px-2 py-1 text-xs'
             >
-              <PackageSearchIcon className='mr-1 h-3 w-3 text-[#00B0B0]' />
-              <span className='font-medium text-[#00B0B0]'>{kb.name}</span>
+              <PackageSearchIcon className='mr-1 h-3 w-3 text-[var(--brand-knowledge)]' />
+              <span className='font-medium text-[var(--brand-knowledge)]'>{kb.name}</span>
               {!disabled && !isPreview && (
                 <button
                   type='button'
                   onClick={() => handleRemoveKnowledgeBase(kb.id)}
-                  className='ml-1 text-[#00B0B0]/60 hover:text-[#00B0B0]'
+                  className='ml-1 text-[color-mix(in_srgb,var(--brand-knowledge)_60%,transparent)] hover-hover:text-[var(--brand-knowledge)]'
                   aria-label={`Remove ${kb.name}`}
                 >
                   <X className='h-3 w-3' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 2d36e69de5..ad3c547884 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -235,11 +235,11 @@ export function KnowledgeTagFilters({
    */
   const renderFilterHeader = (filter: TagFilter, index: number) => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => toggleCollapse(filter.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
         </span>
         {filter.collapsed && filter.tagName && (
@@ -248,7 +248,7 @@ export function KnowledgeTagFilters({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={addFilter} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add Filter</span>
@@ -257,7 +257,7 @@ export function KnowledgeTagFilters({
           variant='ghost'
           onClick={() => removeFilter(filter.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Filter</span>
@@ -315,7 +315,7 @@ export function KnowledgeTagFilters({
             if (el) overlayRefs.current[cellKey] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
         >
@@ -360,9 +360,9 @@ export function KnowledgeTagFilters({
     const isBetween = filter.operator === 'between'
 
     return (
-      <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Tag</Label>
+      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Tag</Label>
           <Combobox
             options={tagOptions}
             value={filter.tagName}
@@ -372,8 +372,8 @@ export function KnowledgeTagFilters({
           />
         </div>
 
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Operator</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Operator</Label>
           <Combobox
             options={operatorOptions}
             value={filter.operator}
@@ -383,8 +383,8 @@ export function KnowledgeTagFilters({
           />
         </div>
 
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Value</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Value</Label>
           {isBetween ? (
             <div className='flex items-center gap-2'>
               <div className='flex-1'>{renderValueInput(filter, 'tagValue')}</div>
@@ -400,13 +400,13 @@ export function KnowledgeTagFilters({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {filters.map((filter, index) => (
         <div
           key={filter.id}
           data-filter-id={filter.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-1)]',
+            'rounded-sm border border-[var(--border-1)]',
             filter.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index 406441880f..c5090e8b2d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -347,7 +347,7 @@ export function LongInput({
               <div
                 ref={overlayRef}
                 className={cn(
-                  'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm',
+                  'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-medium font-sans text-sm',
                   (isPreview || disabled) && 'opacity-50',
                   !(isPreview || disabled) && 'pointer-events-none'
                 )}
@@ -377,7 +377,7 @@ export function LongInput({
                     }
                     disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
                     aria-label='Generate content with AI'
-                    className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow'
+                    className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
                   >
                     <Wand2 className='h-4 w-4' />
                   </Button>
@@ -387,7 +387,7 @@ export function LongInput({
               {/* Custom resize handle */}
               {!wandHook.isStreaming && (
                 <div
-                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
+                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                   onMouseDown={startResize}
                   onDragStart={(e) => {
                     e.preventDefault()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
index aabf0c7f43..d197ba041d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
@@ -344,10 +344,10 @@ export function McpDynamicArgs({
 
             return (
               <div key={paramName} className='subblock-row'>
-                <div className='subblock-content flex flex-col gap-[10px]'>
+                <div className='subblock-content flex flex-col gap-2.5'>
                   {showLabel && (
-                    <div className='flex items-center justify-between gap-[6px] pl-[2px]'>
-                      <Label className='flex items-baseline gap-[6px] whitespace-nowrap'>
+                    <div className='flex items-center justify-between gap-1.5 pl-0.5'>
+                      <Label className='flex items-baseline gap-1.5 whitespace-nowrap'>
                         {formatParameterLabel(paramName)}
                         {toolSchema.required?.includes(paramName) && (
                           <span className='ml-0.5'>*</span>
@@ -358,7 +358,7 @@ export function McpDynamicArgs({
                   {renderParameterInput(paramName, paramSchema as any)}
                 </div>
                 {showDivider && (
-                  <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                  <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                     <div
                       className='h-[1.25px]'
                       style={{
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 89ceafbfef..361a85582d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -523,12 +523,12 @@ export function MessagesInput({
   }, [currentMessages.length])
 
   return (
-    <div className='flex w-full flex-col gap-[10px]'>
+    <div className='flex w-full flex-col gap-2.5'>
       {currentMessages.map((message, index) => (
         <div
           key={`message-${index}`}
           className={cn(
-            'relative flex w-full flex-col rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
+            'relative flex w-full flex-col rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
             disabled && 'opacity-50'
           )}
         >
@@ -567,7 +567,7 @@ export function MessagesInput({
               <>
                 {/* Header with role label and add button */}
                 <div
-                  className='flex cursor-pointer items-center justify-between px-[8px] pt-[6px]'
+                  className='flex cursor-pointer items-center justify-between px-2 pt-1.5'
                   onClick={(e) => handleHeaderClick(index, e)}
                 >
                   <Popover
@@ -579,9 +579,9 @@ export function MessagesInput({
                         type='button'
                         disabled={isPreview || disabled}
                         className={cn(
-                          'group -ml-1.5 -my-1 flex items-center gap-1 rounded px-1.5 py-1 font-medium text-[13px] text-[var(--text-primary)] leading-none transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-secondary)]',
+                          'group -ml-1.5 -my-1 flex items-center gap-1 rounded px-1.5 py-1 font-medium text-[var(--text-primary)] text-small leading-none transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]',
                           (isPreview || disabled) &&
-                            'cursor-default hover:bg-transparent hover:text-[var(--text-primary)]'
+                            'cursor-default hover-hover:bg-transparent hover-hover:text-[var(--text-primary)]'
                         )}
                         onClick={(e) => e.stopPropagation()}
                         aria-label='Select message role'
@@ -598,7 +598,7 @@ export function MessagesInput({
                       </button>
                     </PopoverTrigger>
                     <PopoverContent minWidth={140} align='start'>
-                      <div className='flex flex-col gap-[2px]'>
+                      <div className='flex flex-col gap-0.5'>
                         {(['system', 'user', 'assistant'] as const).map((role) => (
                           <PopoverItem
                             key={role}
@@ -679,7 +679,7 @@ export function MessagesInput({
                     ref={(el) => {
                       textareaRefs.current[fieldId] = el
                     }}
-                    className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
+                    className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-2 py-2 font-medium font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
                     placeholder='Enter message content...'
                     value={message.content}
                     onChange={fieldHandlers.onChange}
@@ -720,7 +720,7 @@ export function MessagesInput({
                       overlayRefs.current[fieldId] = el
                     }}
                     className={cn(
-                      'absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                      'absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-2 py-2 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                       !(isPreview || disabled) && 'pointer-events-none'
                     )}
                   >
@@ -758,7 +758,7 @@ export function MessagesInput({
 
                   {!isPreview && !disabled && (
                     <div
-                      className='absolute right-1 bottom-1 z-[3] flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
+                      className='absolute right-1 bottom-1 z-[3] flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                       onMouseDown={(e) => handleResizeStart(fieldId, e)}
                       onDragStart={(e) => {
                         e.preventDefault()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx
index 0513619053..90500e6ff1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx
@@ -74,12 +74,12 @@ export function ScheduleInfo({ blockId, isPreview = false }: ScheduleInfoProps)
             ) : null}
           </div>
           {failedCount >= MAX_CONSECUTIVE_FAILURES && isDisabled && (
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[var(--text-tertiary)] text-caption'>
               Disabled after {MAX_CONSECUTIVE_FAILURES} consecutive failures
             </p>
           )}
           {redeployMutation.isError && (
-            <p className='text-[12px] text-[var(--text-error)]'>
+            <p className='text-[var(--text-error)] text-caption'>
               Failed to redeploy. Please try again.
             </p>
           )}
@@ -88,7 +88,7 @@ export function ScheduleInfo({ blockId, isPreview = false }: ScheduleInfoProps)
 
       {/* Schedule info - only show when active */}
       {!isDisabled && (
-        <div className='text-[12px] text-[var(--text-tertiary)]'>
+        <div className='text-[var(--text-tertiary)] text-caption'>
           {schedule?.cronExpression && (
             <span>{parseCronToHumanReadable(schedule.cronExpression, timezone)}</span>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index 44fd568fc8..f0445fd7d5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -173,7 +173,7 @@ export function SelectorCombobox({
                 className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 h-6 w-6 p-0'
                 onClick={handleClear}
               >
-                <X className='h-4 w-4 opacity-50 hover:opacity-100' />
+                <X className='h-4 w-4 opacity-50 hover-hover:opacity-100' />
               </Button>
             )}
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index 6e7577cd8c..ba5ff8461b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -370,7 +370,7 @@ export const ShortInput = memo(function ShortInput({
                 <div
                   ref={overlayRef}
                   className={cn(
-                    'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                    'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                     (isPreview || disabled) && 'opacity-50',
                     !(isPreview || disabled) && 'pointer-events-none'
                   )}
@@ -393,7 +393,7 @@ export const ShortInput = memo(function ShortInput({
               }
               disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
               aria-label='Generate content with AI'
-              className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow'
+              className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
             >
               <Wand2 className='h-4 w-4' />
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index 455eceb5d2..3f42e3c331 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -117,7 +117,7 @@ export function SkillInput({
 
   return (
     <>
-      <div className='w-full space-y-[8px]'>
+      <div className='w-full space-y-2'>
         <Combobox
           options={[]}
           groups={skillGroups}
@@ -136,28 +136,28 @@ export function SkillInput({
             return (
               <div
                 key={stored.skillId}
-                className='group relative flex flex-col overflow-hidden rounded-[4px] border border-[var(--border-1)] transition-all duration-200 ease-in-out'
+                className='group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out'
               >
                 <div
-                  className='flex cursor-pointer items-center justify-between gap-[8px] rounded-t-[4px] bg-[var(--surface-4)] px-[8px] py-[6.5px]'
+                  className='flex cursor-pointer items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]'
                   onClick={() => {
                     if (fullSkill && !disabled && !isPreview) {
                       setEditingSkill(fullSkill)
                     }
                   }}
                 >
-                  <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+                  <div className='flex min-w-0 flex-1 items-center gap-2'>
                     <div
-                      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
                       style={{ backgroundColor: '#e0e0e0' }}
                     >
-                      <AgentSkillsIcon className='h-[10px] w-[10px] text-[#333]' />
+                      <AgentSkillsIcon className='h-[10px] w-[10px] text-[var(--border)]' />
                     </div>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                    <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {resolveSkillName(stored)}
                     </span>
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     {!disabled && !isPreview && (
                       <button
                         type='button'
@@ -165,7 +165,7 @@ export function SkillInput({
                           e.stopPropagation()
                           handleRemove(stored.skillId)
                         }}
-                        className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                        className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                         aria-label='Remove skill'
                       >
                         <XIcon className='h-[13px] w-[13px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
index 77d238e88e..e79bb42752 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
@@ -38,11 +38,11 @@ export function SortRuleRow({
 
   const renderHeader = () => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => onToggleCollapse(rule.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {rule.collapsed && rule.column ? getColumnLabel(rule.column) : `Sort ${index + 1}`}
         </span>
         {rule.collapsed && rule.column && (
@@ -51,7 +51,7 @@ export function SortRuleRow({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add Sort</span>
@@ -60,7 +60,7 @@ export function SortRuleRow({
           variant='ghost'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Sort</span>
@@ -70,9 +70,9 @@ export function SortRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Column</Label>
+    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Column</Label>
         <Combobox
           options={columns}
           value={rule.column}
@@ -82,8 +82,8 @@ export function SortRuleRow({
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Direction</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Direction</Label>
         <Combobox
           options={directionOptions}
           value={rule.direction}
@@ -99,7 +99,7 @@ export function SortRuleRow({
     <div
       data-sort-id={rule.id}
       className={cn(
-        'rounded-[4px] border border-[var(--border-1)]',
+        'rounded-sm border border-[var(--border-1)]',
         rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
index 89705d40bb..95170154f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
@@ -87,7 +87,7 @@ export function SortBuilder({
   )
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {rules.map((rule, index) => (
         <SortRuleRow
           key={rule.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 0d8f69be82..b2b8b96aa4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -10,6 +10,8 @@ import {
   Combobox,
   type ComboboxOption,
   calculateGutterWidth,
+  Expandable,
+  ExpandableContent,
   getCodeEditorProps,
   highlight,
   Input,
@@ -270,7 +272,7 @@ export function FieldFormat({
             if (el) nameOverlayRefs.current[field.id] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
           style={{ scrollbarWidth: 'none' }}
@@ -306,11 +308,11 @@ export function FieldFormat({
    */
   const renderFieldHeader = (field: Field, index: number) => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[3px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => toggleCollapse(field.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {field.name || `${title} ${index + 1}`}
         </span>
         {field.name && showType && (
@@ -319,7 +321,7 @@ export function FieldFormat({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={addField} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add {title}</span>
@@ -328,7 +330,7 @@ export function FieldFormat({
           variant='ghost'
           onClick={() => removeField(field.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)] hover-hover:opacity-90'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Field</span>
@@ -518,7 +520,7 @@ export function FieldFormat({
             if (el) overlayRefs.current[field.id] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
           style={{ scrollbarWidth: 'none' }}
@@ -539,57 +541,56 @@ export function FieldFormat({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {fields.map((field, index) => (
         <div
           key={field.id}
           data-field-id={field.id}
-          className={cn(
-            'rounded-[4px] border border-[var(--border-1)]',
-            field.collapsed ? 'overflow-hidden' : 'overflow-visible'
-          )}
+          className='overflow-hidden rounded-sm border border-[var(--border-1)]'
         >
           {renderFieldHeader(field, index)}
 
-          {!field.collapsed && (
-            <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='text-[13px]'>Name</Label>
-                <div className='relative'>{renderNameInput(field)}</div>
+          <Expandable expanded={!field.collapsed}>
+            <ExpandableContent>
+              <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                <div className='flex flex-col gap-1.5'>
+                  <Label className='text-small'>Name</Label>
+                  <div className='relative'>{renderNameInput(field)}</div>
+                </div>
+
+                {showType && (
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Type</Label>
+                    <Combobox
+                      options={TYPE_OPTIONS}
+                      value={field.type}
+                      onChange={(value) => updateField(field.id, 'type', value)}
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                )}
+
+                {showDescription && (
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Description</Label>
+                    <Input
+                      value={field.description ?? ''}
+                      onChange={(e) => updateField(field.id, 'description', e.target.value)}
+                      placeholder={descriptionPlaceholder}
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                )}
+
+                {showValue && (
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Value</Label>
+                    <div className='relative'>{renderValueInput(field)}</div>
+                  </div>
+                )}
               </div>
-
-              {showType && (
-                <div className='flex flex-col gap-[6px]'>
-                  <Label className='text-[13px]'>Type</Label>
-                  <Combobox
-                    options={TYPE_OPTIONS}
-                    value={field.type}
-                    onChange={(value) => updateField(field.id, 'type', value)}
-                    disabled={isReadOnly}
-                  />
-                </div>
-              )}
-
-              {showDescription && (
-                <div className='flex flex-col gap-[6px]'>
-                  <Label className='text-[13px]'>Description</Label>
-                  <Input
-                    value={field.description ?? ''}
-                    onChange={(e) => updateField(field.id, 'description', e.target.value)}
-                    placeholder={descriptionPlaceholder}
-                    disabled={isReadOnly}
-                  />
-                </div>
-              )}
-
-              {showValue && (
-                <div className='flex flex-col gap-[6px]'>
-                  <Label className='text-[13px]'>Value</Label>
-                  <div className='relative'>{renderValueInput(field)}</div>
-                </div>
-              )}
-            </div>
-          )}
+            </ExpandableContent>
+          </Expandable>
         </div>
       ))}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
index 7cf9c71c72..7a15522861 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
@@ -153,7 +153,7 @@ export function Table({
           <th
             key={column}
             className={cn(
-              'bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]',
+              'bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm',
               index < columns.length - 1 && 'border-[var(--border-1)] border-r'
             )}
           >
@@ -246,7 +246,7 @@ export function Table({
             onFocus={handlers.onFocus}
             disabled={isPreview || disabled}
             autoComplete='off'
-            className='w-full border-0 bg-transparent px-[10px] py-[8px] font-medium text-sm text-transparent leading-[21px] caret-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='w-full border-0 bg-transparent px-2.5 py-2 font-medium text-sm text-transparent leading-[21px] caret-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div
             ref={(el) => {
@@ -255,7 +255,7 @@ export function Table({
             data-overlay={cellKey}
             className='scrollbar-hide pointer-events-none absolute top-0 right-[10px] bottom-0 left-[10px] overflow-x-auto overflow-y-hidden bg-transparent'
           >
-            <div className='whitespace-pre py-[8px] font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
+            <div className='whitespace-pre py-2 font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
               {formatDisplayText(cellValue, {
                 accessiblePrefixes,
                 highlightAll: !accessiblePrefixes,
@@ -316,7 +316,7 @@ export function Table({
 
   return (
     <div className='relative'>
-      <div className='overflow-visible rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
+      <div className='overflow-visible rounded-sm border border-[var(--border-1)] bg-[var(--surface-2)] dark:bg-[var(--code-bg)]'>
         <table className='w-full bg-transparent'>
           {renderHeader()}
           <tbody className='bg-transparent'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
index b3b12c1201..68256664a9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -398,7 +398,7 @@ const TagIcon: React.FC<{
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
-      <span className='!text-white font-bold text-[10px]'>{icon}</span>
+      <span className='!text-white font-bold text-micro'>{icon}</span>
     ) : (
       (() => {
         const IconComponent = icon
@@ -530,7 +530,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
           >
             <span className='flex-1 truncate'>{child.display}</span>
             {childType && childType !== 'any' && (
-              <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>
+              <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
                 {childType}
               </span>
             )}
@@ -565,7 +565,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
             }}
           >
             <span className='flex-1 truncate'>{nestedChild.display}</span>
-            <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>{'>'}</span>
+            <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>{'>'}</span>
           </PopoverItem>
         )
       })}
@@ -729,7 +729,7 @@ const NestedTagRenderer: React.FC<NestedTagRendererProps> = ({
     >
       <span className='flex-1 truncate'>{nestedTag.display}</span>
       {tagDescription && tagDescription !== 'any' && (
-        <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>
+        <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
           {tagDescription}
         </span>
       )}
@@ -799,7 +799,7 @@ const VariableTagItem: React.FC<{
         {tag.startsWith(TAG_PREFIXES.VARIABLE) ? tag.substring(TAG_PREFIXES.VARIABLE.length) : tag}
       </span>
       {variableInfo && (
-        <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>
+        <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
           {variableInfo.type}
         </span>
       )}
@@ -1786,7 +1786,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           <PopoverScrollArea ref={scrollAreaRef}>
             <TagDropdownBackButton setSelectedIndex={setSelectedIndex} />
             {flatTagList.length === 0 ? (
-              <div className='px-[6px] py-[8px] text-[12px] text-[var(--white)]/60'>
+              <div className='px-1.5 py-2 text-[color-mix(in_srgb,var(--white)_60%,transparent)] text-caption'>
                 No matching tags found
               </div>
             ) : (
@@ -1794,7 +1794,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                 {variableTags.length > 0 && (
                   <>
                     <PopoverSection rootOnly>
-                      <div className='flex items-center gap-[6px]'>
+                      <div className='flex items-center gap-1.5'>
                         <TagIcon icon='V' color={BLOCK_COLORS.VARIABLE} />
                         Variables
                       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
index 81d5721483..85f045f84b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
@@ -33,7 +33,7 @@ export function Text({ blockId, subBlockId, content, className }: TextProps) {
         className={`rounded-md border bg-[var(--surface-2)] p-4 shadow-sm ${className || ''}`}
       >
         <div
-          className='max-w-none break-words text-[var(--text-secondary)] text-sm [&_a]:text-[var(--brand-secondary)] [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:brightness-110 [&_code]:rounded [&_code]:bg-[var(--surface-5)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[var(--text-tertiary)] [&_code]:text-xs [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] [&_ul]:ml-5 [&_ul]:list-disc [&_ul]:marker:text-[var(--text-muted)]'
+          className='max-w-none break-words text-[var(--text-secondary)] text-sm [&_a]:text-[var(--brand-secondary)] [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover-hover:brightness-110 [&_code]:rounded [&_code]:bg-[var(--surface-5)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[var(--text-tertiary)] [&_code]:text-xs [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] [&_ul]:ml-5 [&_ul]:list-disc [&_ul]:marker:text-[var(--text-muted)]'
           dangerouslySetInnerHTML={{ __html: content }}
         />
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index 73b9603e24..57df7016b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -118,7 +118,7 @@ export function CodeEditor({
             className={cn(
               'text-xs tabular-nums',
               `leading-[${CODE_LINE_HEIGHT_PX}px]`,
-              i > 0 ? 'invisible' : 'text-[#a8a8a8]'
+              i > 0 ? 'invisible' : 'text-[var(--code-line-number)]'
             )}
           >
             {lineNumber}
@@ -194,7 +194,7 @@ export function CodeEditor({
           onClick={onWandClick}
           disabled={wandButtonDisabled}
           aria-label='Generate with AI'
-          className='absolute top-2 right-3 z-10 h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground opacity-0 shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow group-hover:opacity-100'
+          className='absolute top-2 right-3 z-10 h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground opacity-0 shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow group-hover:opacity-100'
         >
           <Wand2 className='h-4 w-4' />
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index 3a057b5153..a39a1cf210 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -827,28 +827,28 @@ try {
               <ModalTabsContent value='schema'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <Label htmlFor='json-schema' className='font-medium text-[13px]'>
+                    <Label htmlFor='json-schema' className='font-medium text-small'>
                       JSON Schema
                     </Label>
                     {schemaError && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-caption'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{schemaError}</span>
                       </div>
                     )}
                   </div>
-                  <div className='flex min-w-0 items-center justify-end gap-[4px]'>
+                  <div className='flex min-w-0 items-center justify-end gap-1'>
                     {!isSchemaPromptActive ? (
                       <Button
                         variant='active'
-                        className='-my-1 h-5 px-2 py-0 text-[11px]'
+                        className='-my-1 h-5 px-2 py-0 text-xs'
                         onClick={handleSchemaWandClick}
                         disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
                       >
                         Generate
                       </Button>
                     ) : (
-                      <div className='-my-1 flex items-center gap-[4px]'>
+                      <div className='-my-1 flex items-center gap-1'>
                         <Input
                           ref={schemaPromptInputRef}
                           value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
@@ -857,7 +857,7 @@ try {
                           onKeyDown={handleSchemaPromptKeyDown}
                           disabled={schemaGeneration.isStreaming}
                           className={cn(
-                            'h-5 max-w-[200px] flex-1 text-[11px]',
+                            'h-5 max-w-[200px] flex-1 text-xs',
                             schemaGeneration.isStreaming && 'text-muted-foreground'
                           )}
                           placeholder='Generate...'
@@ -919,28 +919,28 @@ try {
               <ModalTabsContent value='code'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <Label htmlFor='function-code' className='font-medium text-[13px]'>
+                    <Label htmlFor='function-code' className='font-medium text-small'>
                       Code
                     </Label>
                     {codeError && !codeGeneration.isStreaming && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-caption'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{codeError}</span>
                       </div>
                     )}
                   </div>
-                  <div className='flex min-w-0 items-center justify-end gap-[4px]'>
+                  <div className='flex min-w-0 items-center justify-end gap-1'>
                     {!isCodePromptActive ? (
                       <Button
                         variant='active'
-                        className='-my-1 h-5 px-2 py-0 text-[11px]'
+                        className='-my-1 h-5 px-2 py-0 text-xs'
                         onClick={handleCodeWandClick}
                         disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
                       >
                         Generate
                       </Button>
                     ) : (
-                      <div className='-my-1 flex items-center gap-[4px]'>
+                      <div className='-my-1 flex items-center gap-1'>
                         <Input
                           ref={codePromptInputRef}
                           value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
@@ -949,7 +949,7 @@ try {
                           onKeyDown={handleCodePromptKeyDown}
                           disabled={codeGeneration.isStreaming}
                           className={cn(
-                            'h-5 max-w-[200px] flex-1 text-[11px]',
+                            'h-5 max-w-[200px] flex-1 text-xs',
                             codeGeneration.isStreaming && 'text-muted-foreground'
                           )}
                           placeholder='Generate...'
@@ -974,7 +974,7 @@ try {
                   </div>
                 </div>
                 {schemaParameters.length > 0 && (
-                  <div className='mb-2 rounded-[6px] border bg-[var(--surface-2)] p-2'>
+                  <div className='mb-2 rounded-md border bg-[var(--surface-2)] p-2'>
                     <div className='flex flex-wrap items-center gap-1.5 text-xs'>
                       <span className='font-medium text-[var(--text-tertiary)]'>
                         Available parameters:
@@ -1106,7 +1106,7 @@ try {
                                 {param.name}
                               </span>
                               {param.type && param.type !== 'any' && (
-                                <span className='ml-auto text-[10px] text-[var(--text-secondary)]'>
+                                <span className='ml-auto text-[var(--text-secondary)] text-micro'>
                                   {param.type}
                                 </span>
                               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
index f95c7b3937..d7dce93c7f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
@@ -211,19 +211,19 @@ export function ToolCredentialSelector({
         filterOptions={true}
         isLoading={credentialsLoading}
         overlayContent={overlayContent}
-        className={selectedId ? 'pl-[28px]' : ''}
+        className={selectedId ? 'pl-7' : ''}
       />
 
       {needsUpdate && (
-        <div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
-          <div className='flex items-center font-medium text-[12px]'>
-            <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+        <div className='mt-2 flex flex-col gap-1 rounded-sm border bg-[var(--surface-2)] px-2 py-1.5'>
+          <div className='flex items-center font-medium text-caption'>
+            <span className='mr-1.5 inline-block h-[6px] w-[6px] rounded-xs bg-amber-500' />
             Additional permissions required
           </div>
           <Button
             variant='active'
             onClick={() => setShowOAuthModal(true)}
-            className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+            className='w-full px-2 py-1 font-medium text-caption'
           >
             Update access
           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
index d6fc5a3e24..3db7ea0f82 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
@@ -85,24 +85,24 @@ export function ParameterWithLabel({
   const isStreaming = wandControlRef.current?.isWandStreaming ?? false
 
   return (
-    <div key={paramId} className='relative min-w-0 space-y-[6px]'>
-      <div className='flex items-center justify-between gap-[6px] pl-[2px]'>
-        <Label className='flex items-baseline gap-[6px] whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
+    <div key={paramId} className='relative min-w-0 space-y-1.5'>
+      <div className='flex items-center justify-between gap-1.5 pl-0.5'>
+        <Label className='flex items-baseline gap-1.5 whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
           {title}
           {isRequired && visibility === 'user-only' && <span className='ml-0.5'>*</span>}
         </Label>
-        <div className='flex min-w-0 flex-1 items-center justify-end gap-[6px]'>
+        <div className='flex min-w-0 flex-1 items-center justify-end gap-1.5'>
           {showWand &&
             (!isSearchActive ? (
               <Button
                 variant='active'
-                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                className='-my-1 h-5 px-2 py-0 text-xs'
                 onClick={handleSearchClick}
               >
                 Generate
               </Button>
             ) : (
-              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-[4px]'>
+              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-1'>
                 <Input
                   ref={searchInputRef}
                   value={isStreaming ? 'Generating...' : searchQuery}
@@ -123,7 +123,7 @@ export function ParameterWithLabel({
                   }}
                   disabled={isStreaming}
                   className={cn(
-                    'h-5 min-w-[80px] flex-1 text-[11px]',
+                    'h-5 min-w-[80px] flex-1 text-xs',
                     isStreaming && 'text-muted-foreground'
                   )}
                   placeholder='Generate with AI...'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index 3c24ce6ed1..0adb1a286b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -423,7 +423,7 @@ function createToolIcon(
 ) {
   return (
     <div
-      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
       style={{ background: bgColor }}
     >
       <IconComponent className='h-[10px] w-[10px] text-white' />
@@ -1527,7 +1527,7 @@ export const ToolInput = memo(function ToolInput({
   ])
 
   return (
-    <div className='w-full space-y-[8px]'>
+    <div className='w-full space-y-2'>
       <Combobox
         options={[]}
         groups={toolGroups}
@@ -1656,7 +1656,7 @@ export const ToolInput = memo(function ToolInput({
             <div
               key={`${tool.customToolId || tool.toolId || toolIndex}-${toolIndex}`}
               className={cn(
-                'group relative flex flex-col overflow-hidden rounded-[4px] border border-[var(--border-1)] transition-all duration-200 ease-in-out',
+                'group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out',
                 draggedIndex === toolIndex ? 'scale-95 opacity-40' : '',
                 dragOverIndex === toolIndex && draggedIndex !== toolIndex && draggedIndex !== null
                   ? 'translate-y-1 transform border-t-2 border-t-muted-foreground/40'
@@ -1671,7 +1671,7 @@ export const ToolInput = memo(function ToolInput({
             >
               <div
                 className={cn(
-                  'flex items-center justify-between gap-[8px] rounded-t-[4px] bg-[var(--surface-4)] px-[8px] py-[6.5px]',
+                  'flex items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]',
                   (isCustomTool || hasToolBody) && 'cursor-pointer'
                 )}
                 onClick={() => {
@@ -1682,9 +1682,9 @@ export const ToolInput = memo(function ToolInput({
                   }
                 }}
               >
-                <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+                <div className='flex min-w-0 flex-1 items-center gap-2'>
                   <div
-                    className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                    className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
                     style={{
                       backgroundColor: isCustomTool
                         ? '#3B82F6'
@@ -1708,7 +1708,7 @@ export const ToolInput = memo(function ToolInput({
                       />
                     )}
                   </div>
-                  <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                  <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                     {isCustomTool ? customToolTitle : tool.title}
                   </span>
                   {isMcpTool &&
@@ -1745,7 +1745,7 @@ export const ToolInput = memo(function ToolInput({
                       <WorkflowToolDeployBadge workflowId={tool.params.workflowId} />
                     )}
                 </div>
-                <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                <div className='flex flex-shrink-0 items-center gap-2'>
                   {supportsToolControl && !(isMcpTool && isMcpToolUnavailable(tool)) && (
                     <Popover
                       open={usageControlPopoverIndex === toolIndex}
@@ -1753,7 +1753,7 @@ export const ToolInput = memo(function ToolInput({
                     >
                       <PopoverTrigger asChild>
                         <button
-                          className='flex items-center justify-center font-medium text-[12px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                          className='flex items-center justify-center font-medium text-[var(--text-tertiary)] text-caption transition-colors hover-hover:text-[var(--text-primary)]'
                           onClick={(e: React.MouseEvent) => e.stopPropagation()}
                           aria-label='Tool usage control'
                         >
@@ -1768,7 +1768,7 @@ export const ToolInput = memo(function ToolInput({
                         align='end'
                         sideOffset={8}
                         onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                        className='gap-[2px]'
+                        className='gap-0.5'
                         border
                       >
                         <PopoverItem
@@ -1822,7 +1822,7 @@ export const ToolInput = memo(function ToolInput({
                             e.stopPropagation()
                             setMcpRemovePopoverIndex(toolIndex)
                           }}
-                          className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                          className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                           aria-label='Remove tool'
                         >
                           <XIcon className='h-[13px] w-[13px]' />
@@ -1833,7 +1833,7 @@ export const ToolInput = memo(function ToolInput({
                         align='end'
                         sideOffset={8}
                         onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                        className='gap-[2px]'
+                        className='gap-0.5'
                         border
                       >
                         <PopoverItem
@@ -1860,7 +1860,7 @@ export const ToolInput = memo(function ToolInput({
                         e.stopPropagation()
                         handleRemoveTool(toolIndex)
                       }}
-                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                       aria-label='Remove tool'
                     >
                       <XIcon className='h-[13px] w-[13px]' />
@@ -1870,15 +1870,15 @@ export const ToolInput = memo(function ToolInput({
               </div>
 
               {!isCustomTool && isExpandedForDisplay && (
-                <div className='flex flex-col gap-[10px] overflow-visible rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[8px] py-[8px]'>
+                <div className='flex flex-col gap-2.5 overflow-visible rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2 py-2'>
                   {/* Operation dropdown for tools with multiple operations */}
                   {(() => {
                     const hasOperations = hasMultipleOperations(tool.type)
                     const operationOptions = hasOperations ? getOperationOptions(tool.type) : []
 
                     return hasOperations && operationOptions.length > 0 ? (
-                      <div className='relative space-y-[6px]'>
-                        <div className='font-medium text-[13px] text-[var(--text-primary)]'>
+                      <div className='relative space-y-1.5'>
+                        <div className='font-medium text-[var(--text-primary)] text-small'>
                           Operation
                         </div>
                         <Combobox
@@ -2003,9 +2003,7 @@ export const ToolInput = memo(function ToolInput({
                         )
                       })
 
-                      return (
-                        <div className='flex flex-col gap-[14px] pt-[4px]'>{renderedElements}</div>
-                      )
+                      return <div className='flex flex-col gap-3.5 pt-1'>{renderedElements}</div>
                     }
 
                     const filteredParams = displayParams.filter((param) =>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 16184393b1..3cb5587931 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -321,9 +321,9 @@ export function VariablesInput({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {assignments.length > 0 && (
-        <div className='space-y-[8px]'>
+        <div className='space-y-2'>
           {assignments.map((assignment, index) => {
             const collapsed = collapsedAssignments[assignment.id] || false
             const availableVars = getAvailableVariablesFor(assignment.id)
@@ -333,16 +333,16 @@ export function VariablesInput({
                 key={assignment.id}
                 data-assignment-id={assignment.id}
                 className={cn(
-                  'rounded-[4px] border border-[var(--border-1)]',
+                  'rounded-sm border border-[var(--border-1)]',
                   collapsed ? 'overflow-hidden' : 'overflow-visible'
                 )}
               >
                 <div
-                  className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+                  className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
                   onClick={() => toggleCollapse(assignment.id)}
                 >
-                  <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                    <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+                  <div className='flex min-w-0 flex-1 items-center gap-2'>
+                    <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
                       {assignment.variableName || `Variable ${index + 1}`}
                     </span>
                     {assignment.variableName && (
@@ -352,7 +352,7 @@ export function VariablesInput({
                     )}
                   </div>
                   <div
-                    className='flex items-center gap-[8px] pl-[8px]'
+                    className='flex items-center gap-2 pl-2'
                     onClick={(e) => e.stopPropagation()}
                   >
                     <Button
@@ -368,7 +368,7 @@ export function VariablesInput({
                       variant='ghost'
                       onClick={() => removeAssignment(assignment.id)}
                       disabled={isReadOnly}
-                      className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
                     >
                       <Trash className='h-[14px] w-[14px]' />
                       <span className='sr-only'>Delete Variable</span>
@@ -377,9 +377,9 @@ export function VariablesInput({
                 </div>
 
                 {!collapsed && (
-                  <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                    <div className='flex flex-col gap-[6px]'>
-                      <Label className='text-[13px]'>Variable</Label>
+                  <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label className='text-small'>Variable</Label>
                       <Combobox
                         options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
                         value={assignment.variableId || ''}
@@ -389,8 +389,8 @@ export function VariablesInput({
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[6px]'>
-                      <Label className='text-[13px]'>Value</Label>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label className='text-small'>Value</Label>
                       {assignment.type === 'boolean' ? (
                         <Combobox
                           options={BOOLEAN_OPTIONS}
@@ -518,7 +518,7 @@ export function VariablesInput({
                               if (el) overlayRefs.current[assignment.id] = el
                             }}
                             className={cn(
-                              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
                               !isReadOnly && 'pointer-events-none'
                             )}
                             style={{ scrollbarWidth: 'none' }}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 3d40957641..d85adff7b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -245,8 +245,8 @@ const renderLabel = (
   const canonicalToggleDisabledResolved = canonicalToggleIsDisabled ?? canonicalToggle?.disabled
 
   return (
-    <div className='flex items-center justify-between gap-[6px] pl-[2px]'>
-      <Label className='flex items-baseline gap-[6px] whitespace-nowrap'>
+    <div className='flex items-center justify-between gap-1.5 pl-0.5'>
+      <Label className='flex items-baseline gap-1.5 whitespace-nowrap'>
         {config.title}
         {required && <span className='ml-0.5'>*</span>}
         {labelSuffix}
@@ -266,7 +266,7 @@ const renderLabel = (
             </Tooltip.Root>
           )}
       </Label>
-      <div className='flex min-w-0 flex-1 items-center justify-end gap-[6px]'>
+      <div className='flex min-w-0 flex-1 items-center justify-end gap-1.5'>
         {showCopy && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
@@ -293,13 +293,13 @@ const renderLabel = (
             {!wandState.isSearchActive ? (
               <Button
                 variant='active'
-                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                className='-my-1 h-5 px-2 py-0 text-xs'
                 onClick={wandState.onSearchClick}
               >
                 Generate
               </Button>
             ) : (
-              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-[4px]'>
+              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-1'>
                 <Input
                   ref={wandState.searchInputRef}
                   value={wandState.isStreaming ? 'Generating...' : wandState.searchQuery}
@@ -325,7 +325,7 @@ const renderLabel = (
                   }}
                   disabled={wandState.isStreaming}
                   className={cn(
-                    'h-5 min-w-[80px] flex-1 text-[11px]',
+                    'h-5 min-w-[80px] flex-1 text-xs',
                     wandState.isStreaming && 'text-muted-foreground'
                   )}
                   placeholder='Generate with AI...'
@@ -1148,7 +1148,7 @@ function SubBlockComponent({
   }
 
   return (
-    <div onMouseDown={handleMouseDown} className='subblock-content flex flex-col gap-[10px]'>
+    <div onMouseDown={handleMouseDown} className='subblock-content flex flex-col gap-2.5'>
       {renderLabel(
         config,
         isValidJson,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index 4a8a8dee19..4fd5c7b77c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -68,10 +68,10 @@ export function SubflowEditor({
     <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
       {/* Subflow Editor Section */}
       <div ref={subBlocksRef} className='subblocks-section flex flex-1 flex-col overflow-hidden'>
-        <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[9px] pb-[8px]'>
+        <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-[9px] pb-2'>
           {/* Type Selection */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {currentBlock.type === 'loop' ? 'Loop Type' : 'Parallel Type'}
             </Label>
             <Combobox
@@ -84,7 +84,7 @@ export function SubflowEditor({
           </div>
 
           {/* Dashed Line Separator */}
-          <div className='px-[2px] pt-[16px] pb-[10px]'>
+          <div className='px-0.5 pt-4 pb-2.5'>
             <div
               className='h-[1.25px]'
               style={{
@@ -96,7 +96,7 @@ export function SubflowEditor({
 
           {/* Configuration */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {isCountMode
                 ? `${currentBlock.type === 'loop' ? 'Loop' : 'Parallel'} Iterations`
                 : isConditionMode
@@ -113,9 +113,9 @@ export function SubflowEditor({
                   onBlur={handleSubflowIterationsSave}
                   onKeyDown={(e) => e.key === 'Enter' && handleSubflowIterationsSave()}
                   disabled={!userCanEdit}
-                  className='mb-[4px]'
+                  className='mb-1'
                 />
-                <div className='text-[10px] text-muted-foreground'>
+                <div className='text-micro text-muted-foreground'>
                   Enter a number between 1 and {subflowConfig.maxIterations}
                 </div>
               </div>
@@ -180,7 +180,7 @@ export function SubflowEditor({
 
           {/* Connections Header with Chevron */}
           <div
-            className='flex flex-shrink-0 cursor-pointer items-center gap-[8px] px-[10px] pt-[5px] pb-[5px]'
+            className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
             onClick={toggleConnectionsCollapsed}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
@@ -198,11 +198,11 @@ export function SubflowEditor({
                 (!isConnectionsAtMinHeight ? ' rotate-180' : '')
               }
             />
-            <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
+            <div className='font-medium text-[var(--text-primary)] text-small'>Connections</div>
           </div>
 
           {/* Connections Content - Always visible */}
-          <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px] pb-[8px]'>
+          <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
             <ConnectionBlocks connections={incomingConnections} currentBlockId={currentBlock.id} />
           </div>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 4a7bc682f6..54dbc65d8c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -319,11 +319,11 @@ export function Editor() {
   return (
     <div className='flex h-full flex-col'>
       {/* Header */}
-      <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+      <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-none border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           {(blockConfig || isSubflow) && currentBlock?.type !== 'note' && (
             <div
-              className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px]'
+              className='flex h-[18px] w-[18px] items-center justify-center rounded-sm'
               style={{ background: isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor }}
             >
               <IconComponent
@@ -346,11 +346,11 @@ export function Editor() {
                   handleCancelRename()
                 }
               }}
-              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--text-primary)] outline-none'
+              className='min-w-0 flex-1 truncate bg-transparent pr-2 font-medium text-[var(--text-primary)] text-sm outline-none'
             />
           ) : (
             <h2
-              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--text-primary)]'
+              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-2 font-medium text-[var(--text-primary)] text-sm'
               title={title}
               onDoubleClick={handleStartRename}
               onMouseDown={(e) => {
@@ -363,7 +363,7 @@ export function Editor() {
             </h2>
           )}
         </div>
-        <div className='flex shrink-0 items-center gap-[8px]'>
+        <div className='flex shrink-0 items-center gap-2'>
           {/* Locked indicator - clickable to unlock if user has admin permissions, block is locked directly, and not locked by an ancestor */}
           {isLocked && currentBlock && (
             <Tooltip.Root>
@@ -454,7 +454,7 @@ export function Editor() {
       </div>
 
       {!currentBlockId || !currentBlock ? (
-        <div className='flex flex-1 items-center justify-center text-[#8D8D8D] text-[13px]'>
+        <div className='flex flex-1 items-center justify-center text-[var(--text-placeholder)] text-small'>
           Select a block to edit
         </div>
       ) : isSubflow ? (
@@ -478,15 +478,15 @@ export function Editor() {
             ref={subBlocksRef}
             className='subblocks-section flex flex-1 flex-col overflow-hidden'
           >
-            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[12px] pb-[8px] [overflow-anchor:none]'>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
               {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
               {isWorkflowBlock && childWorkflowId && (
                 <>
                   <div className='subblock-content flex flex-col gap-[9.5px]'>
-                    <div className='pl-[2px] font-medium text-[13px] text-[var(--text-primary)] leading-none'>
+                    <div className='pl-0.5 font-medium text-[var(--text-primary)] text-small leading-none'>
                       Workflow Preview
                     </div>
-                    <div className='relative h-[160px] overflow-hidden rounded-[4px] border border-[var(--border)]'>
+                    <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                       {isLoadingChildWorkflow ? (
                         <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
                           <Loader2 className='h-5 w-5 animate-spin text-[var(--text-tertiary)]' />
@@ -511,7 +511,7 @@ export function Editor() {
                                 type='button'
                                 variant='ghost'
                                 onClick={handleOpenChildWorkflow}
-                                className='absolute right-[6px] bottom-[6px] z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover:bg-[var(--surface-4)]'
+                                className='absolute right-[6px] bottom-1.5 z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
                               >
                                 <ExternalLink className='h-[12px] w-[12px]' />
                               </Button>
@@ -521,20 +521,20 @@ export function Editor() {
                         </>
                       ) : (
                         <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                          <span className='text-[13px] text-[var(--text-tertiary)]'>
+                          <span className='text-[var(--text-tertiary)] text-small'>
                             Unable to load preview
                           </span>
                         </div>
                       )}
                     </div>
                   </div>
-                  <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                  <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                     <div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
                   </div>
                 </>
               )}
               {subBlocks.length === 0 && !isWorkflowBlock ? (
-                <div className='flex h-full items-center justify-center text-center text-[#8D8D8D] text-[13px]'>
+                <div className='flex h-full items-center justify-center text-center text-[var(--text-placeholder)] text-small'>
                   This block has no subblocks
                 </div>
               ) : (
@@ -592,7 +592,7 @@ export function Editor() {
                           }
                         />
                         {showDivider && (
-                          <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                          <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                             <div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
                           </div>
                         )}
@@ -601,12 +601,12 @@ export function Editor() {
                   })}
 
                   {hasAdvancedOnlyFields && canEditBlock && (
-                    <div className='flex items-center gap-[10px] px-[2px] pt-[14px] pb-[12px]'>
+                    <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
                       <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
                       <button
                         type='button'
                         onClick={handleToggleAdvancedMode}
-                        className='flex items-center gap-[6px] whitespace-nowrap font-medium text-[13px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+                        className='flex items-center gap-1.5 whitespace-nowrap font-medium text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
                       >
                         {displayAdvancedOptions
                           ? 'Hide additional fields'
@@ -619,9 +619,9 @@ export function Editor() {
                     </div>
                   )}
                   {hasAdvancedOnlyFields && !canEditBlock && displayAdvancedOptions && (
-                    <div className='flex items-center gap-[10px] px-[2px] pt-[14px] pb-[12px]'>
+                    <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
                       <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
-                      <span className='whitespace-nowrap font-medium text-[13px] text-[var(--text-secondary)]'>
+                      <span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-small'>
                         Additional fields
                       </span>
                       <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
@@ -646,7 +646,7 @@ export function Editor() {
                           allowExpandInPreview={false}
                         />
                         {index < advancedOnlySubBlocks.length - 1 && (
-                          <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                          <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                             <div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
                           </div>
                         )}
@@ -677,7 +677,7 @@ export function Editor() {
 
               {/* Connections Header with Chevron */}
               <div
-                className='flex flex-shrink-0 cursor-pointer items-center gap-[8px] px-[10px] pt-[5px] pb-[5px]'
+                className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
                 onClick={toggleConnectionsCollapsed}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
@@ -697,13 +697,11 @@ export function Editor() {
                     (!isConnectionsAtMinHeight ? ' rotate-180' : '')
                   }
                 />
-                <div className='font-medium text-[13px] text-[var(--text-primary)]'>
-                  Connections
-                </div>
+                <div className='font-medium text-[var(--text-primary)] text-small'>Connections</div>
               </div>
 
               {/* Connections Content - Always visible */}
-              <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px] pb-[8px]'>
+              <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
                 <ConnectionBlocks
                   connections={incomingConnections}
                   currentBlockId={currentBlock.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 991aafe4e9..6bae8707bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -108,14 +108,14 @@ const ToolbarItem = memo(function ToolbarItem({
       onClick={handleClick}
       onContextMenu={handleContextMenu}
       className={clsx(
-        'group flex h-[28px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
-        'cursor-pointer hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
+        'group flex h-[28px] items-center gap-2 rounded-lg px-1.5 text-sm',
+        'cursor-pointer hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
         'focus-visible:bg-[var(--surface-6)] focus-visible:outline-none dark:focus-visible:bg-[var(--surface-5)]'
       )}
       onKeyDown={handleKeyDown}
     >
       <div
-        className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+        className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
         style={{ background: item.bgColor }}
       >
         {Icon && (
@@ -707,11 +707,11 @@ export const Toolbar = memo(
       >
         {/* Header */}
         <div
-          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'
+          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
           onClick={handleSearchClick}
         >
-          <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Toolbar</h2>
-          <div className='flex shrink-0 items-center gap-[8px]'>
+          <h2 className='font-medium text-[var(--text-primary)] text-sm'>Toolbar</h2>
+          <div className='flex shrink-0 items-center gap-2'>
             {!isSearchActive ? (
               <Button
                 variant='ghost'
@@ -728,7 +728,7 @@ export const Toolbar = memo(
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 onBlur={handleSearchBlur}
-                className='w-full border-none bg-transparent pr-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none'
+                className='w-full border-none bg-transparent pr-0.5 text-right font-medium text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
               />
             )}
           </div>
@@ -746,12 +746,12 @@ export const Toolbar = memo(
           >
             <div
               ref={triggersHeaderRef}
-              className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='px-2.5 pt-1.5 pb-1.5 font-medium text-[var(--text-primary)] text-small'
             >
               Triggers
             </div>
-            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-              <div ref={triggersContentRef} className='space-y-[2px] pb-[8px]'>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5'>
+              <div ref={triggersContentRef} className='space-y-1 pb-2'>
                 {filteredTriggers.map((trigger, index) => (
                   <ToolbarItem
                     key={trigger.type}
@@ -780,12 +780,12 @@ export const Toolbar = memo(
             <div
               ref={blocksHeaderRef}
               onClick={handleBlocksHeaderClick}
-              className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='cursor-pointer px-2.5 pt-1.5 pb-1.5 font-medium text-[var(--text-primary)] text-small'
             >
               Blocks
             </div>
-            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-              <div className='space-y-[2px] pb-[8px]'>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5'>
+              <div className='space-y-1 pb-2'>
                 {filteredBlocks.map((block, index) => (
                   <ToolbarItem
                     key={block.type}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 0ea9cb6c51..fb81604e6e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -594,11 +594,11 @@ export const Panel = memo(function Panel() {
         className='panel-container relative shrink-0 overflow-hidden bg-[var(--bg)]'
         aria-label='Workflow panel'
       >
-        <div className='flex h-full flex-col border-[var(--border)] border-l pt-[14px]'>
+        <div className='flex h-full flex-col border-[var(--border)] border-l pt-3.5'>
           {/* Header */}
-          <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
+          <div className='flex flex-shrink-0 items-center justify-between px-2'>
             {/* More and Chat */}
-            <div className='flex gap-[6px]'>
+            <div className='flex gap-1.5'>
               <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                 <DropdownMenuTrigger asChild>
                   <Button className='h-[30px] w-[30px] rounded-[5px]' data-tour='panel-menu'>
@@ -661,10 +661,10 @@ export const Panel = memo(function Panel() {
             </div>
 
             {/* Deploy and Run */}
-            <div className='flex gap-[6px]' data-tour='deploy-run'>
+            <div className='flex gap-1.5' data-tour='deploy-run'>
               <Deploy activeWorkflowId={activeWorkflowId} userPermissions={userPermissions} />
               <Button
-                className='h-[30px] gap-[8px] px-[10px]'
+                className='h-[30px] gap-2 px-2.5'
                 data-tour='run-button'
                 variant={isExecuting ? 'active' : 'tertiary'}
                 onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
@@ -681,14 +681,14 @@ export const Panel = memo(function Panel() {
           </div>
 
           {/* Tabs */}
-          <div className='flex flex-shrink-0 items-center justify-between px-[8px] pt-[14px]'>
-            <div className='flex gap-[4px]'>
+          <div className='flex flex-shrink-0 items-center justify-between px-2 pt-3.5'>
+            <div className='flex gap-1'>
               {!permissionConfig.hideCopilot && (
                 <Button
-                  className={`h-[28px] truncate rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                  className={`h-[28px] truncate rounded-md border px-2 py-[5px] text-[12.5px] ${
                     _hasHydrated && activeTab === 'copilot'
                       ? 'border-[var(--border-1)]'
-                      : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                      : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                   }`}
                   variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
                   onClick={() => handleTabClick('copilot')}
@@ -699,10 +699,10 @@ export const Panel = memo(function Panel() {
                 </Button>
               )}
               <Button
-                className={`h-[28px] rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                className={`h-[28px] rounded-md border px-2 py-[5px] text-[12.5px] ${
                   _hasHydrated && activeTab === 'toolbar'
                     ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                 }`}
                 variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('toolbar')}
@@ -712,10 +712,10 @@ export const Panel = memo(function Panel() {
                 Toolbar
               </Button>
               <Button
-                className={`h-[28px] rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                className={`h-[28px] rounded-md border px-2 py-[5px] text-[12.5px] ${
                   _hasHydrated && activeTab === 'editor'
                     ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                 }`}
                 variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('editor')}
@@ -728,7 +728,7 @@ export const Panel = memo(function Panel() {
           </div>
 
           {/* Tab Content - Keep all tabs mounted but hidden to preserve state */}
-          <div className='flex-1 overflow-hidden pt-[12px]'>
+          <div className='flex-1 overflow-hidden pt-3'>
             {!permissionConfig.hideCopilot && (
               <div
                 className={
@@ -741,11 +741,11 @@ export const Panel = memo(function Panel() {
                 data-tab-content='copilot'
               >
                 {/* Copilot Header */}
-                <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
+                <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-2 border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
                   <h2 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
                     {copilotChatTitle || 'New Chat'}
                   </h2>
-                  <div className='flex items-center gap-[8px]'>
+                  <div className='flex items-center gap-2'>
                     <Button variant='ghost' className='p-0' onClick={handleCopilotNewChat}>
                       <Plus className='h-[14px] w-[14px]' />
                     </Button>
@@ -763,7 +763,7 @@ export const Panel = memo(function Panel() {
                       </PopoverTrigger>
                       <PopoverContent align='end' side='bottom' sideOffset={8} maxHeight={280}>
                         {copilotChatList.length === 0 ? (
-                          <div className='px-[6px] py-[16px] text-center text-[12px] text-muted-foreground'>
+                          <div className='px-1.5 py-4 text-center text-[12px] text-muted-foreground'>
                             No chats yet
                           </div>
                         ) : (
@@ -782,7 +782,7 @@ export const Panel = memo(function Panel() {
                                       titleClassName='text-[13px]'
                                       actions={
                                         <div
-                                          className={`flex flex-shrink-0 items-center gap-[4px] ${copilotChatId !== chat.id ? 'opacity-0 transition-opacity group-hover:opacity-100' : ''}`}
+                                          className={`flex flex-shrink-0 items-center gap-1 ${copilotChatId !== chat.id ? 'opacity-0 transition-opacity group-hover:opacity-100' : ''}`}
                                         >
                                           <Button
                                             variant='ghost'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 68f179ffd9..8bfd401bc7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -42,9 +42,9 @@ const getHandleClasses = (position: 'left' | 'right') => {
   const colorClasses = '!bg-[var(--workflow-edge)]'
 
   const positionClasses = {
-    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
+    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover-hover:!left-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-l-full',
     right:
-      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full',
+      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover-hover:!right-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-r-full',
   }
 
   return cn(baseClasses, colorClasses, positionClasses[position])
@@ -136,10 +136,10 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
   const getRingColor = (): string | undefined => {
     if (!hasRing) return undefined
     if (isFocused || isSelected || isPreviewSelected) return 'var(--brand-secondary)'
-    if (diffStatus === 'new') return 'var(--brand-tertiary-2)'
+    if (diffStatus === 'new') return 'var(--brand-accent)'
     if (diffStatus === 'edited') return 'var(--warning)'
     if (runPathStatus === 'success') {
-      return executionStatus ? 'var(--brand-tertiary-2)' : 'var(--border-success)'
+      return executionStatus ? 'var(--brand-accent)' : 'var(--border-success)'
     }
     if (runPathStatus === 'error') return 'var(--text-error)'
     return undefined
@@ -149,7 +149,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
   return (
     <div className='group pointer-events-none relative'>
       <div
-        className='relative select-none rounded-[8px] border border-[var(--border-1)] transition-block-bg'
+        className='relative select-none rounded-lg border border-[var(--border-1)] transition-block-bg'
         style={{
           width: data.width || 500,
           height: data.height || 300,
@@ -171,19 +171,19 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
         {/* Header Section */}
         <div
           onClick={() => setCurrentBlockId(id)}
-          className='workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
+          className='workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-2 pr-3 pl-2 [&:active]:cursor-grabbing'
           style={{ pointerEvents: 'auto' }}
         >
-          <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
+          <div className='flex min-w-0 flex-1 items-center gap-2.5'>
             <div
-              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
               style={{ backgroundColor: isEnabled ? blockIconBg : 'gray' }}
             >
               <BlockIcon className='h-[16px] w-[16px] text-white' />
             </div>
             <span
               className={cn(
-                'truncate font-medium text-[16px]',
+                'truncate font-medium text-md',
                 !isEnabled && 'text-[var(--text-muted)]'
               )}
               title={blockName}
@@ -211,25 +211,25 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
 
         {!isPreview && (
           <div
-            className='absolute right-[8px] bottom-[8px] z-20 flex h-[32px] w-[32px] cursor-se-resize items-center justify-center text-muted-foreground'
+            className='absolute right-[8px] bottom-2 z-20 flex h-[32px] w-[32px] cursor-se-resize items-center justify-center text-muted-foreground'
             style={{ pointerEvents: 'auto' }}
           />
         )}
 
         <div
-          className='relative h-[calc(100%-50px)] pt-[16px] pr-[80px] pb-[16px] pl-[16px]'
+          className='relative h-[calc(100%-50px)] pt-4 pr-[80px] pb-4 pl-4'
           data-dragarea='true'
           style={{ pointerEvents: 'none' }}
         >
           {/* Subflow Start */}
           <div
-            className='absolute top-[16px] left-[16px] flex items-center justify-center rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] px-[12px] py-[6px]'
+            className='absolute top-4 left-[16px] flex items-center justify-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] px-3 py-1.5'
             style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
             data-parent-id={id}
             data-node-role={`${data.kind}-start`}
             data-extent='parent'
           >
-            <span className='font-medium text-[14px] text-[var(--text-primary)]'>Start</span>
+            <span className='font-medium text-[var(--text-primary)] text-sm'>Start</span>
 
             <Handle
               type='source'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
index 3362e28de4..47792621d7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
@@ -74,7 +74,7 @@ export const FilterPopover = memo(function FilterPopover({
           onClick={() => toggleStatus('error')}
         >
           <div
-            className='h-[6px] w-[6px] rounded-[2px]'
+            className='h-[6px] w-[6px] rounded-xs'
             style={{ backgroundColor: 'var(--text-error)' }}
           />
           <span className='flex-1'>Error</span>
@@ -85,7 +85,7 @@ export const FilterPopover = memo(function FilterPopover({
           onClick={() => toggleStatus('info')}
         >
           <div
-            className='h-[6px] w-[6px] rounded-[2px]'
+            className='h-[6px] w-[6px] rounded-xs'
             style={{ backgroundColor: 'var(--terminal-status-info-color)' }}
           />
           <span className='flex-1'>Info</span>
@@ -93,7 +93,7 @@ export const FilterPopover = memo(function FilterPopover({
 
         {uniqueBlocks.length > 0 && (
           <>
-            <PopoverDivider className='my-[4px]' />
+            <PopoverDivider className='my-1' />
             <PopoverSection className='!mt-0'>Blocks</PopoverSection>
             <PopoverScrollArea className='max-h-[100px]'>
               {uniqueBlocks.map((block) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
index 853c7dbaef..d5633599e3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
@@ -60,16 +60,15 @@ const BADGE_VARIANTS: Record<ValueType, BadgeVariant> = {
  * Styling constants matching the original non-virtualized implementation.
  */
 const STYLES = {
-  row: 'group flex min-h-[30px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[8px] -mx-[8px] hover:bg-[var(--surface-active)]',
+  row: 'group flex min-h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 -mx-2 hover-hover:bg-[var(--surface-active)]',
   chevron:
     'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
-  keyName: 'font-base text-[14px] text-[var(--text-primary)]',
-  badge: 'rounded-[4px] px-[4px] py-[0px] text-[11px]',
-  summary: 'text-[14px] text-[var(--text-secondary)]',
-  indent:
-    'mt-[2px] ml-[3px] flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[9px]',
-  value: 'min-w-0 py-[2px] text-[14px] text-[var(--text-primary)]',
-  emptyValue: 'py-[2px] text-[14px] text-[var(--text-secondary)]',
+  keyName: 'font-base text-sm text-[var(--text-primary)]',
+  badge: 'rounded-sm px-1 py-[0px] text-xs',
+  summary: 'text-sm text-[var(--text-secondary)]',
+  indent: 'mt-0.5 ml-[3px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[9px]',
+  value: 'min-w-0 py-0.5 text-sm text-[var(--text-primary)]',
+  emptyValue: 'py-0.5 text-sm text-[var(--text-secondary)]',
   matchHighlight: 'bg-yellow-200/60 dark:bg-yellow-500/40',
   currentMatchHighlight: 'bg-orange-400',
 } as const
@@ -817,7 +816,7 @@ export const StructuredOutput = memo(function StructuredOutput({
     return () => cancelAnimationFrame(rafId)
   }, [currentMatchIndex, allMatchPaths.length, expandedPaths, useVirtualization])
 
-  const containerClass = cn('flex flex-col pl-[20px]', wrapText && 'overflow-x-hidden', className)
+  const containerClass = cn('flex flex-col pl-5', wrapText && 'overflow-x-hidden', className)
   const virtualizedContainerClass = cn('relative', wrapText && 'overflow-x-hidden', className)
   const listClass = wrapText ? 'overflow-x-hidden' : 'overflow-x-auto'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index e195271792..20979de5d0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -284,7 +284,7 @@ export const OutputPanel = React.memo(function OutputPanel({
       >
         {/* Horizontal Resize Handle */}
         <div
-          className='-ml-[4px] absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
+          className='-ml-1 absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
           onMouseDown={handleOutputPanelResizeMouseDown}
           role='separator'
           aria-label='Resize output panel'
@@ -293,14 +293,14 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Header */}
         <div
-          className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-[16px] pl-[10px]'
+          className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-2.5'
           onClick={handleHeaderClick}
         >
           <div className='flex items-center'>
             <Button
               variant='ghost'
               className={clsx(
-                'px-[8px] py-[6px] text-small',
+                'px-2 py-1.5 text-small',
                 !showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-icon)]'
               )}
               onClick={handleOutputButtonClick}
@@ -312,7 +312,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               <Button
                 variant='ghost'
                 className={clsx(
-                  'px-[8px] py-[6px] text-small',
+                  'px-2 py-1.5 text-small',
                   showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-icon)]'
                 )}
                 onClick={handleInputButtonClick}
@@ -322,7 +322,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               </Button>
             )}
           </div>
-          <div className='flex flex-shrink-0 items-center gap-[8px]'>
+          <div className='flex flex-shrink-0 items-center gap-2'>
             {isOutputSearchActive ? (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -472,7 +472,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                 collisionPadding={0}
                 onClick={(e) => e.stopPropagation()}
                 style={{ minWidth: '140px', maxWidth: '160px' }}
-                className='gap-[2px]'
+                className='gap-0.5'
               >
                 <PopoverItem
                   active={structuredView}
@@ -500,7 +500,7 @@ export const OutputPanel = React.memo(function OutputPanel({
         {/* Search Overlay */}
         {isOutputSearchActive && (
           <div
-            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-[6px] rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-[6px] shadow-sm'
+            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-1.5 shadow-sm'
             onClick={(e) => e.stopPropagation()}
             data-toolbar-root
             data-search-active='true'
@@ -511,11 +511,11 @@ export const OutputPanel = React.memo(function OutputPanel({
               value={outputSearchQuery}
               onChange={(e) => setOutputSearchQuery(e.target.value)}
               placeholder='Search...'
-              className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+              className='mr-0.5 h-[23px] w-[94px] text-caption'
             />
             <span
               className={clsx(
-                'w-[58px] font-medium text-[11px]',
+                'w-[58px] font-medium text-xs',
                 matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
               )}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index 23ecac6cf7..4bc8623982 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -114,16 +114,16 @@ const BlockRow = memo(function BlockRow({
         onSelect(entry)
       }}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
         <div
-          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
           style={{ background: bgColor }}
         >
           {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
         </div>
         <span
           className={clsx(
-            'min-w-0 truncate font-base text-[14px]',
+            'min-w-0 truncate font-base text-sm',
             hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
           )}
         >
@@ -132,7 +132,7 @@ const BlockRow = memo(function BlockRow({
       </div>
       <span
         className={clsx(
-          'flex-shrink-0 font-base text-[14px]',
+          'flex-shrink-0 font-base text-sm',
           !isRunning && 'text-[var(--text-secondary)]'
         )}
       >
@@ -186,10 +186,10 @@ const IterationNodeRow = memo(function IterationNodeRow({
           onToggle()
         }}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-[14px]',
+              'min-w-0 truncate font-base text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -206,7 +206,7 @@ const IterationNodeRow = memo(function IterationNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-[14px]',
+            'flex-shrink-0 font-base text-sm',
             !hasRunningChild && 'text-[var(--text-secondary)]'
           )}
         >
@@ -281,16 +281,16 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
           onToggleNode(nodeId)
         }}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
             {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
           </div>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-[14px]',
+              'min-w-0 truncate font-base text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -307,7 +307,7 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-[14px]',
+            'flex-shrink-0 font-base text-sm',
             !hasRunningDescendant && 'text-[var(--text-secondary)]'
           )}
         >
@@ -392,16 +392,16 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
           if (hasChildren) onToggleNode(nodeId)
         }}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
             {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
           </div>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-[14px]',
+              'min-w-0 truncate font-base text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -418,7 +418,7 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-[14px]',
+            'flex-shrink-0 font-base text-sm',
             !hasRunningDescendant && 'text-[var(--text-secondary)]'
           )}
         >
@@ -534,12 +534,12 @@ const ExecutionGroupRow = memo(function ExecutionGroupRow({
   onToggleNode: (nodeId: string) => void
 }) {
   return (
-    <div className='flex flex-col px-[6px]'>
+    <div className='flex flex-col px-1.5'>
       {/* Separator between executions */}
-      {showSeparator && <div className='mx-[4px] mb-[6px] border-[var(--border)] border-t' />}
+      {showSeparator && <div className='mx-1 mb-1.5 border-[var(--border)] border-t' />}
 
       {/* Entry tree */}
-      <div className='ml-[4px] flex flex-col gap-[2px] pb-[6px]'>
+      <div className='ml-1 flex flex-col gap-0.5 pb-1.5'>
         {group.entryTree.map((node) => (
           <EntryNodeRow
             key={node.entry.id}
@@ -1262,7 +1262,7 @@ export const Terminal = memo(function Terminal() {
           >
             {/* Header */}
             <div
-              className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-[16px] pl-[16px]'
+              className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-4'
               onClick={handleHeaderClick}
             >
               {/* Left side - Logs label */}
@@ -1270,7 +1270,7 @@ export const Terminal = memo(function Terminal() {
 
               {/* Right side - Icons and options */}
               {!selectedEntry && (
-                <div className='flex items-center gap-[8px]'>
+                <div className='flex items-center gap-2'>
                   {/* Sort toggle */}
                   {allWorkflowEntries.length > 0 && (
                     <Tooltip.Root>
@@ -1396,7 +1396,7 @@ export const Terminal = memo(function Terminal() {
                       collisionPadding={0}
                       onClick={(e) => e.stopPropagation()}
                       style={{ minWidth: '140px', maxWidth: '160px' }}
-                      className='gap-[2px]'
+                      className='gap-0.5'
                     >
                       <PopoverItem
                         active={openOnRun}
@@ -1425,7 +1425,7 @@ export const Terminal = memo(function Terminal() {
             {/* Execution list */}
             <div ref={logsContainerRef} className='flex-1 overflow-y-auto overflow-x-hidden'>
               {executionGroups.length === 0 ? (
-                <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+                <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
                   No logs yet
                 </div>
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
index 45c7edc9e8..0c97956e2c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
@@ -50,15 +50,14 @@ export interface BlockInfo {
  * Common row styling classes for terminal components
  */
 export const ROW_STYLES = {
-  base: 'group flex cursor-pointer items-center justify-between gap-[8px] rounded-[8px] px-[8px]',
+  base: 'group flex cursor-pointer items-center justify-between gap-2 rounded-lg px-2',
   selected: 'bg-[var(--surface-active)]',
   hover: 'hover:bg-[var(--surface-active)]',
-  nested:
-    'mt-[2px] ml-[3px] flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[9px]',
+  nested: 'mt-0.5 ml-[3px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[9px]',
   iconButton: '!p-1.5 -m-1.5',
 } as const
 
 /**
  * Common badge styling for status badges
  */
-export const BADGE_STYLE = 'rounded-[4px] px-[4px] py-[0px] text-[11px]'
+export const BADGE_STYLE = 'rounded-sm px-1 py-[0px] text-xs'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index d20be4837b..7c182e285c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -301,7 +301,7 @@ export function Variables() {
       const isCollapsed = collapsedById[variable.id] ?? false
       return (
         <div
-          className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+          className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
           onClick={() => toggleCollapsed(variable.id)}
           onKeyDown={(e) => handleHeaderKeyDown(e, variable.id)}
           role='button'
@@ -309,8 +309,8 @@ export function Variables() {
           aria-expanded={!isCollapsed}
           aria-controls={`variable-content-${variable.id}`}
         >
-          <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-            <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
+            <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
               {variable.name || `Variable ${index + 1}`}
             </span>
             {variable.name && (
@@ -325,7 +325,7 @@ export function Variables() {
               e.stopPropagation()
               handleRemoveVariable(variable.id)
             }}
-            className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+            className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
             aria-label={`Delete ${variable.name || `variable ${index + 1}`}`}
           >
             <Trash style={{ width: `${ICON_SIZE}px`, height: `${ICON_SIZE}px` }} />
@@ -410,7 +410,7 @@ export function Variables() {
   return (
     <div
       ref={preventZoomRef}
-      className='fixed z-30 flex flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
+      className='fixed z-30 flex flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-2.5 pt-0.5 pb-2'
       style={{
         left: `${actualPosition.x}px`,
         top: `${actualPosition.y}px`,
@@ -428,11 +428,11 @@ export function Variables() {
         onMouseDown={handleMouseDown}
       >
         <div className='flex items-center'>
-          <span className='flex-shrink-0 font-medium text-[14px] text-[var(--text-primary)]'>
+          <span className='flex-shrink-0 font-medium text-[var(--text-primary)] text-sm'>
             Variables
           </span>
         </div>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <Button
             variant='ghost'
             className='!p-1.5 -m-1.5'
@@ -456,19 +456,19 @@ export function Variables() {
       </div>
 
       {/* Content */}
-      <div className='flex flex-1 flex-col overflow-hidden pt-[8px]'>
+      <div className='flex flex-1 flex-col overflow-hidden pt-2'>
         {workflowVariables.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+          <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
             {STRINGS.emptyState}
           </div>
         ) : (
           <div className='h-full overflow-y-auto overflow-x-hidden'>
-            <div className='w-full max-w-full space-y-[8px] overflow-hidden'>
+            <div className='w-full max-w-full space-y-2 overflow-hidden'>
               {workflowVariables.map((variable, index) => (
                 <div
                   key={variable.id}
                   className={cn(
-                    'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]',
+                    'rounded-sm border border-[var(--border-1)] bg-[var(--surface-1)]',
                     (collapsedById[variable.id] ?? false) ? 'overflow-hidden' : 'overflow-visible'
                   )}
                 >
@@ -477,10 +477,10 @@ export function Variables() {
                   {!(collapsedById[variable.id] ?? false) && (
                     <div
                       id={`variable-content-${variable.id}`}
-                      className='flex flex-col gap-[6px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'
+                      className='flex flex-col gap-1.5 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'
                     >
-                      <div className='flex flex-col gap-[4px]'>
-                        <Label className='text-[13px]'>{STRINGS.labels.name}</Label>
+                      <div className='flex flex-col gap-1'>
+                        <Label className='text-small'>{STRINGS.labels.name}</Label>
                         <Input
                           name='name'
                           autoComplete='off'
@@ -497,8 +497,8 @@ export function Variables() {
                         )}
                       </div>
 
-                      <div className='space-y-[4px]'>
-                        <Label className='text-[13px]'>{STRINGS.labels.type}</Label>
+                      <div className='space-y-1'>
+                        <Label className='text-small'>{STRINGS.labels.type}</Label>
                         <Combobox
                           options={TYPE_OPTIONS}
                           value={variable.type}
@@ -506,8 +506,8 @@ export function Variables() {
                         />
                       </div>
 
-                      <div className='space-y-[4px]'>
-                        <Label className='text-[13px]'>{STRINGS.labels.value}</Label>
+                      <div className='space-y-1'>
+                        <Label className='text-small'>{STRINGS.labels.value}</Label>
                         <div className='relative'>{renderValueInput(variable)}</div>
                       </div>
                     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
index ebd5e9a1a3..97cc72eb9d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
@@ -115,7 +115,7 @@ export function WandPromptBar({
           variant='ghost'
           size='icon'
           onClick={handleCancel}
-          className='h-8 w-8 rounded-full text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+          className='h-8 w-8 rounded-full text-muted-foreground hover-hover:bg-accent/50 hover-hover:text-foreground'
         >
           <XIcon className='h-4 w-4' />
         </Button>
@@ -125,7 +125,7 @@ export function WandPromptBar({
             variant='ghost'
             size='icon'
             onClick={() => onSubmit(promptValue)}
-            className='h-8 w-8 rounded-full text-muted-foreground hover:bg-primary/10 hover:text-foreground'
+            className='h-8 w-8 rounded-full text-muted-foreground hover-hover:bg-primary/10 hover-hover:text-foreground'
             disabled={isLoading || isStreaming || !promptValue.trim()}
           >
             <SendIcon className='h-4 w-4' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 19a8d3a867..fa750d2d42 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -828,9 +828,9 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <div className='flex items-center gap-[8px]'>
+    <div className='flex items-center gap-2'>
       <span
-        className='min-w-0 truncate text-[14px] text-[var(--text-tertiary)] capitalize'
+        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
         title={title}
       >
         {title}
@@ -838,7 +838,7 @@ const SubBlockRow = memo(function SubBlockRow({
       {displayValue !== undefined && (
         <span
           className={cn(
-            'flex-1 truncate text-right text-[14px] text-[var(--text-primary)]',
+            'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
             isMonospaceField && 'font-mono'
           )}
           title={displayValue}
@@ -1090,12 +1090,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     const colorClasses = isError ? '!bg-[var(--text-error)]' : '!bg-[var(--workflow-edge)]'
 
     const positionClasses = {
-      left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
+      left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover-hover:!left-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-l-full',
       right:
-        '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full',
-      top: '!top-[-8px] !h-[7px] !w-5 !rounded-t-[2px] !rounded-b-none hover:!top-[-11px] hover:!h-[10px] hover:!rounded-t-full',
+        '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover-hover:!right-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-r-full',
+      top: '!top-[-8px] !h-[7px] !w-5 !rounded-t-[2px] !rounded-b-none hover-hover:!top-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-t-full',
       bottom:
-        '!bottom-[-8px] !h-[7px] !w-5 !rounded-b-[2px] !rounded-t-none hover:!bottom-[-11px] hover:!h-[10px] hover:!rounded-b-full',
+        '!bottom-[-8px] !h-[7px] !w-5 !rounded-b-[2px] !rounded-t-none hover-hover:!bottom-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-b-full',
     }
 
     return cn(baseClasses, colorClasses, positionClasses[position])
@@ -1194,7 +1194,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         ref={contentRef}
         onClick={handleClick}
         className={cn(
-          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
         )}
       >
         {isPending && (
@@ -1228,13 +1228,13 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
         <div
           className={cn(
-            'flex items-center justify-between p-[8px]',
+            'flex items-center justify-between p-2',
             hasContentBelowHeader && 'border-[var(--border-1)] border-b'
           )}
         >
-          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
+          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
             <div
-              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
               style={{
                 background: isEnabled ? config.bgColor : 'gray',
               }}
@@ -1243,7 +1243,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
             </div>
             <span
               className={cn(
-                'truncate font-medium text-[16px]',
+                'truncate font-medium text-md',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
               title={name}
@@ -1352,7 +1352,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
               </Tooltip.Root>
             )}
             {/* {isActive && (
-              <div className='mr-[2px] ml-2 flex h-[16px] w-[16px] items-center justify-center'>
+              <div className='mr-0.5 ml-2 flex h-[16px] w-[16px] items-center justify-center'>
                 <div
                   className='h-full w-full animate-spin-slow rounded-full border-[2.5px] border-[rgba(255,102,0,0.25)] border-t-[var(--warning)]'
                   aria-hidden='true'
@@ -1363,7 +1363,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         </div>
 
         {hasContentBelowHeader && (
-          <div className='flex flex-col gap-[8px] p-[8px]'>
+          <div className='flex flex-col gap-2 p-2'>
             {type === 'condition' ? (
               conditionRows.map((cond) => (
                 <SubBlockRow key={cond.id} title={cond.title} value={getDisplayValue(cond.value)} />
@@ -1556,9 +1556,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           </>
         )}
         {hasRing && (
-          <div
-            className={cn('pointer-events-none absolute inset-0 z-40 rounded-[8px]', ringStyles)}
-          />
+          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
         )}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index 5092db0422..29873d45ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -89,7 +89,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
   return (
     <>
       <div
-        className='absolute bottom-[16px] left-[16px] z-10 flex h-[36px] items-center gap-[2px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] p-[4px]'
+        className='absolute bottom-4 left-[16px] z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] p-1'
         data-tour='workflow-controls'
         onContextMenu={handleContextMenu}
       >
@@ -102,9 +102,9 @@ export const WorkflowControls = memo(function WorkflowControls() {
         >
           <Tooltip.Root>
             <PopoverTrigger asChild>
-              <div className='flex cursor-pointer items-center gap-[4px]'>
+              <div className='flex cursor-pointer items-center gap-1'>
                 <Tooltip.Trigger asChild>
-                  <Button className='h-[28px] w-[28px] rounded-[6px] p-0' variant='active'>
+                  <Button className='h-[28px] w-[28px] rounded-md p-0' variant='active'>
                     {mode === 'hand' ? (
                       <Hand className='h-[14px] w-[14px]' />
                     ) : (
@@ -112,7 +112,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
                     )}
                   </Button>
                 </Tooltip.Trigger>
-                <Button className='-m-[4px] !p-[6px] group' variant='ghost'>
+                <Button className='-m-1 !p-1.5 group' variant='ghost'>
                   <ChevronDown
                     className={`h-[8px] w-[10px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${isCanvasModeOpen ? 'rotate-180' : ''}`}
                   />
@@ -143,13 +143,13 @@ export const WorkflowControls = memo(function WorkflowControls() {
           </PopoverContent>
         </Popover>
 
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
+        <div className='mx-1 h-[20px] w-[1px] bg-[var(--border)]' />
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+              className='h-[28px] w-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={undo}
               disabled={!canUndo}
             >
@@ -165,7 +165,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+              className='h-[28px] w-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={redo}
               disabled={!canRedo}
             >
@@ -177,13 +177,13 @@ export const WorkflowControls = memo(function WorkflowControls() {
           </Tooltip.Content>
         </Tooltip.Root>
 
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
+        <div className='mx-1 h-[20px] w-[1px] bg-[var(--border)]' />
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+              className='h-[28px] w-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={handleFitToView}
             >
               <Scan className='h-[16px] w-[16px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
index 3b0b85ed7d..53ee177b3b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
@@ -92,10 +92,10 @@ const WorkflowEdgeComponent = ({
       color = 'var(--text-error)'
       opacity = 0.7
     } else if (edgeDiffStatus === 'new') {
-      color = 'var(--brand-tertiary-2)'
+      color = 'var(--brand-accent)'
     } else if (edgeRunStatus === 'success') {
       // Use green for preview mode, default for canvas execution
-      color = previewExecutionStatus ? 'var(--brand-tertiary-2)' : 'var(--border-success)'
+      color = previewExecutionStatus ? 'var(--brand-accent)' : 'var(--border-success)'
     } else if (edgeRunStatus === 'error') {
       color = 'var(--text-error)'
     } else if (isErrorEdge) {
@@ -145,7 +145,7 @@ const WorkflowEdgeComponent = ({
               }
             }}
           >
-            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[var(--text-error)]/80' />
+            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[color-mix(in_srgb,var(--text-error)_80%,transparent)]' />
           </div>
         </EdgeLabelRenderer>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
index 62c178337b..34d8648b16 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
@@ -77,7 +77,7 @@ export function getBlockRingStyles(options: BlockRingOptions): {
       !isPending &&
       !isDeletedBlock &&
       diffStatus === 'new' &&
-      'ring-[var(--brand-tertiary-2)]',
+      'ring-[var(--brand-accent)]',
     !isExecuting &&
       !isEditorOpen &&
       !isSelected &&
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index f2f6c40a0c..222eaccd17 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -190,7 +190,7 @@ function CollapsibleSection({
   const [isExpanded, setIsExpanded] = useState(defaultExpanded)
 
   return (
-    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+    <div className='flex min-w-0 flex-col gap-2 overflow-hidden border-[var(--border)] border-b px-3 py-2.5'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => setIsExpanded(!isExpanded)}
@@ -207,7 +207,7 @@ function CollapsibleSection({
       >
         <span
           className={cn(
-            'font-medium text-[12px] transition-colors',
+            'font-medium text-caption transition-colors',
             isError
               ? 'text-[var(--text-error)]'
               : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
@@ -228,8 +228,8 @@ function CollapsibleSection({
       {isExpanded && (
         <>
           {isEmpty ? (
-            <div className='rounded-[6px] bg-[var(--surface-3)] px-[10px] py-[8px]'>
-              <span className='text-[12px] text-[var(--text-tertiary)]'>{emptyMessage}</span>
+            <div className='rounded-md bg-[var(--surface-3)] px-2.5 py-2'>
+              <span className='text-[var(--text-tertiary)] text-caption'>{emptyMessage}</span>
             </div>
           ) : (
             children
@@ -332,7 +332,7 @@ function ConnectionsSection({
 
       {/* Header with Chevron */}
       <div
-        className='flex flex-shrink-0 cursor-pointer items-center gap-[8px] px-[10px] pt-[5px] pb-[5px]'
+        className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
         onClick={onToggleCollapsed}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -347,11 +347,11 @@ function ConnectionsSection({
         <ChevronUp
           className={cn('h-[14px] w-[14px] transition-transform', !isAtMinHeight && 'rotate-180')}
         />
-        <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
+        <div className='font-medium text-[var(--text-primary)] text-small'>Connections</div>
       </div>
 
       {/* Content - styled like ConnectionBlocks */}
-      <div className='flex-1 space-y-[2px] overflow-y-auto overflow-x-hidden px-[6px] pb-[8px]'>
+      <div className='flex-1 space-y-0.5 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
         {connections.map((connection) => {
           const blockConfig = getBlock(connection.blockType)
           const Icon = blockConfig?.icon
@@ -360,17 +360,17 @@ function ConnectionsSection({
           const hasFields = connection.fields.length > 0
 
           return (
-            <div key={connection.blockId} className='mb-[2px] last:mb-0'>
+            <div key={connection.blockId} className='mb-0.5 last:mb-0'>
               {/* Block header - styled like ConnectionItem */}
               <div
                 className={cn(
-                  'group flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
+                  'group flex h-[26px] items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]',
                   hasFields && 'cursor-pointer'
                 )}
                 onClick={() => hasFields && toggleBlock(connection.blockId)}
               >
                 <div
-                  className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                  className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
                   style={{ background: bgColor }}
                 >
                   {Icon && (
@@ -404,12 +404,12 @@ function ConnectionsSection({
 
               {/* Fields - styled like FieldItem but showing resolved values */}
               {isExpanded && hasFields && (
-                <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-                  <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+                <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+                  <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                   {connection.fields.map((field) => (
                     <div
                       key={field.tag}
-                      className='group flex min-h-[26px] flex-wrap items-baseline gap-x-[8px] gap-y-[2px] rounded-[8px] px-[6px] py-[4px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                      className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                       onContextMenu={(e) => handleValueContextMenu(e, field.value)}
                     >
                       <span
@@ -433,12 +433,12 @@ function ConnectionsSection({
 
         {/* Workflow Variables */}
         {workflowVars.length > 0 && (
-          <div className='mb-[2px] last:mb-0'>
+          <div className='mb-0.5 last:mb-0'>
             <div
-              className='group flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+              className='group flex h-[26px] cursor-pointer items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
               onClick={() => setExpandedVariables(!expandedVariables)}
             >
-              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-[#8B5CF6]'>
+              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#8B5CF6]'>
                 <span className='font-bold text-[9px] text-white'>V</span>
               </div>
               <span
@@ -458,12 +458,12 @@ function ConnectionsSection({
               />
             </div>
             {expandedVariables && (
-              <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-                <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+              <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+                <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                 {workflowVars.map((v) => (
                   <div
                     key={v.ref}
-                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-[8px] gap-y-[2px] rounded-[8px] px-[6px] py-[4px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                     onContextMenu={(e) => handleValueContextMenu(e, v.value)}
                   >
                     <span className='flex-shrink-0 font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
@@ -479,12 +479,12 @@ function ConnectionsSection({
 
         {/* Secrets */}
         {envVars.length > 0 && (
-          <div className='mb-[2px] last:mb-0'>
+          <div className='mb-0.5 last:mb-0'>
             <div
-              className='group flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+              className='group flex h-[26px] cursor-pointer items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
               onClick={() => setExpandedEnvVars(!expandedEnvVars)}
             >
-              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-[#6B7280]'>
+              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#6B7280]'>
                 <span className='font-bold text-[9px] text-white'>E</span>
               </div>
               <span
@@ -504,12 +504,12 @@ function ConnectionsSection({
               />
             </div>
             {expandedEnvVars && (
-              <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-                <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+              <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+                <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                 {envVars.map((v) => (
                   <div
                     key={v.ref}
-                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-[8px] gap-y-[2px] rounded-[8px] px-[6px] py-[4px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                   >
                     <span className='flex-shrink-0 font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
                       {v.name}
@@ -622,10 +622,10 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
   }
 
   return (
-    <div className='flex-1 overflow-y-auto overflow-x-hidden pt-[8px] pb-[8px]'>
+    <div className='flex-1 overflow-y-auto overflow-x-hidden pt-2 pb-2'>
       {/* Type Selection - matches SubflowEditor */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           {isLoop ? 'Loop Type' : 'Parallel Type'}
         </Label>
         <Combobox
@@ -638,7 +638,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
       </div>
 
       {/* Dashed Line Separator - matches SubflowEditor */}
-      <div className='px-[2px] pt-[16px] pb-[10px]'>
+      <div className='px-0.5 pt-4 pb-2.5'>
         <div
           className='h-[1.25px]'
           style={{
@@ -650,7 +650,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
 
       {/* Configuration - matches SubflowEditor */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           {getConfigLabel()}
         </Label>
 
@@ -661,9 +661,9 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
               value={iterations.toString()}
               onChange={() => {}}
               disabled
-              className='mb-[4px]'
+              className='mb-1'
             />
-            <div className='text-[10px] text-muted-foreground'>
+            <div className='text-micro text-muted-foreground'>
               Enter a number between 1 and {config.maxIterations}
             </div>
           </div>
@@ -675,7 +675,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
                   {isConditionMode ? '<counter.value> < 10' : "['item1', 'item2', 'item3']"}
                 </Code.Placeholder>
                 <div
-                  className='min-h-[24px] whitespace-pre-wrap break-all px-[12px] py-[8px] font-mono text-[13px] text-[var(--text-secondary)]'
+                  className='min-h-[24px] whitespace-pre-wrap break-all px-3 py-2 font-mono text-[var(--text-secondary)] text-small'
                   style={{ pointerEvents: 'none' }}
                 >
                   {editorValue || (
@@ -1093,18 +1093,18 @@ function PreviewEditorContent({
     return (
       <div className='relative flex h-full w-80 flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
         {/* Header - styled like subflow header */}
-        <div className='mx-[-1px] flex flex-shrink-0 items-center gap-[8px] rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-[12px] py-[6px]'>
+        <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
           <div
-            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ backgroundColor: subflowBgColor }}
           >
             <SubflowIcon className='h-[12px] w-[12px] text-white' />
           </div>
-          <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+          <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-sm'>
             {subflowName}
           </span>
           {onClose && (
-            <Button variant='ghost' className='!p-[4px] flex-shrink-0' onClick={onClose}>
+            <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
               <X className='h-[14px] w-[14px]' />
             </Button>
           )}
@@ -1113,7 +1113,7 @@ function PreviewEditorContent({
         {/* Subflow Configuration */}
         <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
           <div className='flex-1 overflow-y-auto overflow-x-hidden'>
-            <div className='readonly-preview px-[8px]'>
+            <div className='readonly-preview px-2'>
               <style>{READONLY_PREVIEW_STYLES}</style>
               <SubflowConfigDisplay block={block} loop={loopConfig} parallel={parallelConfig} />
             </div>
@@ -1126,14 +1126,14 @@ function PreviewEditorContent({
   if (!blockConfig) {
     return (
       <div className='flex h-full w-80 flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
-        <div className='mx-[-1px] flex items-center gap-[8px] rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-[12px] py-[6px]'>
-          <div className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px] bg-[var(--surface-3)]' />
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+        <div className='mx-[-1px] flex items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
+          <div className='flex h-[18px] w-[18px] items-center justify-center rounded-sm bg-[var(--surface-3)]' />
+          <span className='font-medium text-[var(--text-primary)] text-sm'>
             {block.name || 'Unknown Block'}
           </span>
         </div>
-        <div className='p-[12px]'>
-          <p className='text-[13px] text-[var(--text-secondary)]'>Block configuration not found.</p>
+        <div className='p-3'>
+          <p className='text-[var(--text-secondary)] text-small'>Block configuration not found.</p>
         </div>
       </div>
     )
@@ -1180,10 +1180,10 @@ function PreviewEditorContent({
   return (
     <div className='relative flex h-full w-80 flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
       {/* Header - styled like editor */}
-      <div className='mx-[-1px] flex flex-shrink-0 items-center gap-[8px] rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-[12px] py-[6px]'>
+      <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
         {block.type !== 'note' && (
           <div
-            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ backgroundColor: blockConfig.bgColor }}
           >
             <IconComponent
@@ -1192,11 +1192,11 @@ function PreviewEditorContent({
             />
           </div>
         )}
-        <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+        <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-sm'>
           {block.name || blockConfig.name}
         </span>
         {onClose && (
-          <Button variant='ghost' className='!p-[4px] flex-shrink-0' onClick={onClose}>
+          <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
             <X className='h-[14px] w-[14px]' />
           </Button>
         )}
@@ -1209,7 +1209,7 @@ function PreviewEditorContent({
           <div className='flex-1 overflow-y-auto overflow-x-hidden'>
             {/* Not Executed Banner - shown when in execution mode but block wasn't executed */}
             {isBlockNotExecuted && (
-              <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+              <div className='flex min-w-0 flex-col gap-2 overflow-hidden border-[var(--border)] border-b px-3 py-2.5'>
                 <div className='flex items-center justify-between'>
                   <Badge variant='gray-secondary' size='sm' dot>
                     Not Executed
@@ -1220,14 +1220,14 @@ function PreviewEditorContent({
 
             {/* Execution Status & Duration Header */}
             {executionData && (executionData.status || executionData.durationMs !== undefined) && (
-              <div className='flex min-w-0 items-center justify-between overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+              <div className='flex min-w-0 items-center justify-between overflow-hidden border-[var(--border)] border-b px-3 py-2.5'>
                 {executionData.status && (
                   <Badge variant={statusVariant} size='sm' dot>
                     <span className='capitalize'>{executionData.status}</span>
                   </Badge>
                 )}
                 {executionData.durationMs !== undefined && (
-                  <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                     {formatDuration(executionData.durationMs, { precision: 2 })}
                   </span>
                 )}
@@ -1253,7 +1253,7 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.input)}
                     language='json'
-                    className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+                    className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
                     wrapText={wrapText}
                     searchQuery={isSearchActive ? searchQuery : undefined}
                     currentMatchIndex={currentMatchIndex}
@@ -1261,7 +1261,7 @@ function PreviewEditorContent({
                   />
                   {/* Action buttons overlay */}
                   {!isSearchActive && (
-                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <Button
@@ -1271,7 +1271,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.input), 'input')
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'input' ? (
                               <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -1293,7 +1293,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='h-[10px] w-[10px]' />
                           </Button>
@@ -1323,7 +1323,7 @@ function PreviewEditorContent({
                     code={formatValueAsJson(executionData.output)}
                     language='json'
                     className={cn(
-                      '!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]',
+                      '!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]',
                       executionData.status === 'error' && 'text-[var(--text-error)]'
                     )}
                     wrapText={wrapText}
@@ -1333,7 +1333,7 @@ function PreviewEditorContent({
                   />
                   {/* Action buttons overlay */}
                   {!isSearchActive && (
-                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <Button
@@ -1343,7 +1343,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.output), 'output')
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'output' ? (
                               <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -1365,7 +1365,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='h-[10px] w-[10px]' />
                           </Button>
@@ -1380,12 +1380,12 @@ function PreviewEditorContent({
 
             {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
             {isWorkflowBlock && childWorkflowId && (
-              <div className='px-[8px] pt-[12px]'>
+              <div className='px-2 pt-3'>
                 <div className='subblock-content flex flex-col gap-[9.5px]'>
-                  <div className='pl-[2px] font-medium text-[13px] text-[var(--text-primary)] leading-none'>
+                  <div className='pl-0.5 font-medium text-[var(--text-primary)] text-small leading-none'>
                     Workflow Preview
                   </div>
-                  <div className='relative h-[160px] overflow-hidden rounded-[4px] border border-[var(--border)]'>
+                  <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                     {resolvedIsLoadingChildWorkflow ? (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
                         <div
@@ -1418,7 +1418,7 @@ function PreviewEditorContent({
                               type='button'
                               variant='ghost'
                               onClick={handleExpandChildWorkflow}
-                              className='absolute right-[6px] bottom-[6px] z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover:bg-[var(--surface-4)]'
+                              className='absolute right-[6px] bottom-1.5 z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
                             >
                               {isExecutionMode && onDrillDown ? (
                                 <Maximize2 className='h-[12px] w-[12px]' />
@@ -1434,7 +1434,7 @@ function PreviewEditorContent({
                       </>
                     ) : (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                        <span className='text-[13px] text-[var(--text-tertiary)]'>
+                        <span className='text-[var(--text-tertiary)] text-small'>
                           {isBlockNotExecuted
                             ? 'Not Executed'
                             : isMissingChildWorkflow
@@ -1445,7 +1445,7 @@ function PreviewEditorContent({
                     )}
                   </div>
                 </div>
-                <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                   <div
                     className='h-[1.25px]'
                     style={{
@@ -1458,7 +1458,7 @@ function PreviewEditorContent({
             )}
 
             {/* Subblock Values - Using SubBlock components in preview mode */}
-            <div className='readonly-preview px-[8px] pt-[12px] pb-[8px]'>
+            <div className='readonly-preview px-2 pt-3 pb-2'>
               <style>{READONLY_PREVIEW_STYLES}</style>
               {visibleSubBlocks.length > 0 ? (
                 <div className='flex flex-col'>
@@ -1476,7 +1476,7 @@ function PreviewEditorContent({
                         disabled={true}
                       />
                       {index < visibleSubBlocks.length - 1 && (
-                        <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                        <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                           <div
                             className='h-[1.25px]'
                             style={{
@@ -1490,8 +1490,8 @@ function PreviewEditorContent({
                   ))}
                 </div>
               ) : (
-                <div className='py-[16px] text-center'>
-                  <p className='text-[13px] text-[var(--text-secondary)]'>
+                <div className='py-4 text-center'>
+                  <p className='text-[var(--text-secondary)] text-small'>
                     No configurable fields for this block.
                   </p>
                 </div>
@@ -1521,7 +1521,7 @@ function PreviewEditorContent({
       {/* Search Overlay */}
       {isSearchActive && (
         <div
-          className='absolute top-[40px] right-[8px] z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+          className='absolute top-10 right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
           onClick={(e) => e.stopPropagation()}
         >
           <Input
@@ -1530,11 +1530,11 @@ function PreviewEditorContent({
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder='Search...'
-            className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+            className='mr-0.5 h-[23px] w-[94px] text-caption'
           />
           <span
             className={cn(
-              'min-w-[45px] text-center text-[11px]',
+              'min-w-[45px] text-center text-xs',
               matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
             )}
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index a55934a0e2..f6183bbd66 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -29,8 +29,8 @@ interface SubBlockValueEntry {
  * Extracted to avoid recreating style objects on each render.
  */
 const HANDLE_STYLES = {
-  horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-[2px]',
-  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-[2px]',
+  horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-xs',
+  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-xs',
   right:
     '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
   error:
@@ -243,16 +243,16 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <div className='flex items-center gap-[8px]'>
+    <div className='flex items-center gap-2'>
       <span
-        className='min-w-0 truncate text-[14px] text-[var(--text-tertiary)] capitalize'
+        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
         title={title}
       >
         {title}
       </span>
       {displayValue !== undefined && (
         <span
-          className='flex-1 truncate text-right text-[14px] text-[var(--text-primary)]'
+          className='flex-1 truncate text-right text-[var(--text-primary)] text-sm'
           title={displayValue}
         >
           {displayValue}
@@ -432,18 +432,18 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   const hasSuccess = executionStatus === 'success'
 
   return (
-    <div className='relative w-[250px] select-none rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)]'>
+    <div className='relative w-[250px] select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)]'>
       {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-secondary)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-secondary)]' />
       )}
       {/* Success ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasSuccess && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-tertiary-2)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-accent)]' />
       )}
       {/* Error ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasError && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--text-error)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--text-error)]' />
       )}
 
       {/* Target handle - not shown for triggers/starters */}
@@ -463,19 +463,19 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
 
       {/* Header - matches WorkflowBlock structure */}
       <div
-        className={`flex items-center justify-between p-[8px] ${hasContentBelowHeader ? 'border-[var(--border-1)] border-b' : ''}`}
+        className={`flex items-center justify-between p-2 ${hasContentBelowHeader ? 'border-[var(--border-1)] border-b' : ''}`}
       >
-        <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
+        <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
           {!isNoteBlock && (
             <div
-              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
               style={{ background: enabled ? blockConfig.bgColor : 'gray' }}
             >
               <IconComponent className='h-[16px] w-[16px] text-white' />
             </div>
           )}
           <span
-            className={`truncate font-medium text-[16px] ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
+            className={`truncate font-medium text-md ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
             title={name}
           >
             {name}
@@ -485,7 +485,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
 
       {/* Content area with subblocks */}
       {hasContentBelowHeader && (
-        <div className='flex flex-col gap-[8px] p-[8px]'>
+        <div className='flex flex-col gap-2 p-2'>
           {type === 'condition' ? (
             conditionRows.map((cond) => (
               <SubBlockRow
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
index e939b592ad..df3eabde32 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
@@ -59,7 +59,7 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
 
   return (
     <div
-      className='relative select-none rounded-[8px] border border-[var(--border-1)]'
+      className='relative select-none rounded-lg border border-[var(--border-1)]'
       style={{
         width,
         height,
@@ -67,15 +67,15 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
     >
       {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-secondary)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-secondary)]' />
       )}
       {/* Success ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasSuccess && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-tertiary-2)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-accent)]' />
       )}
       {/* Error ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasError && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--text-error)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--text-error)]' />
       )}
 
       {/* Target handle on left (input to the subflow) */}
@@ -92,19 +92,16 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
       />
 
       {/* Header - matches actual subflow header structure */}
-      <div className='flex items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px]'>
-        <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
+      <div className='flex items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-2 pr-3 pl-2'>
+        <div className='flex min-w-0 flex-1 items-center gap-2.5'>
           <div
-            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
             style={{ backgroundColor: enabled ? blockIconBg : 'var(--surface-4)' }}
           >
             <BlockIcon className='h-[16px] w-[16px] text-white' />
           </div>
           <span
-            className={cn(
-              'truncate font-medium text-[16px]',
-              !enabled && 'text-[var(--text-muted)]'
-            )}
+            className={cn('truncate font-medium text-md', !enabled && 'text-[var(--text-muted)]')}
             title={blockName}
           >
             {blockName}
@@ -115,12 +112,12 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
 
       {/* Content area - matches workflow structure */}
       <div
-        className='h-[calc(100%-50px)] pt-[16px] pr-[80px] pb-[16px] pl-[16px]'
+        className='h-[calc(100%-50px)] pt-4 pr-[80px] pb-4 pl-4'
         style={{ position: 'relative' }}
       >
         {/* Subflow Start - connects to first block in subflow */}
-        <div className='absolute top-[16px] left-[16px] flex items-center justify-center rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] px-[12px] py-[6px]'>
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>Start</span>
+        <div className='absolute top-4 left-[16px] flex items-center justify-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] px-3 py-1.5'>
+          <span className='font-medium text-[var(--text-primary)] text-sm'>Start</span>
           <Handle
             type='source'
             position={Position.Right}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index 890a5a7d4d..ac19ec9d1d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -244,28 +244,28 @@ export function Preview({
       style={{ height, width }}
       className={cn(
         'relative flex overflow-hidden',
-        showBorder && 'rounded-[4px] border border-[var(--border)]',
+        showBorder && 'rounded-sm border border-[var(--border)]',
         className
       )}
     >
       {isNested && (
-        <div className='absolute top-[12px] left-[12px] z-20 flex items-center gap-[6px]'>
+        <div className='absolute top-3 left-[12px] z-20 flex items-center gap-1.5'>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
                 variant='ghost'
                 onClick={handleGoBack}
-                className='flex h-[28px] items-center gap-[5px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] text-[var(--text-secondary)] shadow-sm hover:bg-[var(--surface-4)] hover:text-[var(--text-primary)]'
+                className='flex h-[28px] items-center gap-[5px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 text-[var(--text-secondary)] shadow-sm hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
               >
                 <ArrowLeft className='h-[12px] w-[12px]' />
-                <span className='font-medium text-[12px]'>Back</span>
+                <span className='font-medium text-caption'>Back</span>
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='bottom'>Go back to parent workflow</Tooltip.Content>
           </Tooltip.Root>
           {currentWorkflowName && (
-            <div className='flex h-[28px] max-w-[200px] items-center rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] shadow-sm'>
-              <span className='truncate font-medium text-[12px] text-[var(--text-secondary)]'>
+            <div className='flex h-[28px] max-w-[200px] items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-sm'>
+              <span className='truncate font-medium text-[var(--text-secondary)] text-caption'>
                 {currentWorkflowName}
               </span>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index b9014e3b36..565c441d64 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -62,7 +62,7 @@ interface CollapsedWorkflowFlyoutItemProps {
 }
 
 const EDIT_ROW_CLASS =
-  'mx-[2px] flex min-h-[30px] min-w-0 cursor-default select-none items-center gap-[8px] rounded-[5px] bg-[var(--surface-active)] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)]'
+  'mx-0.5 flex min-h-[30px] min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] bg-[var(--surface-active)] px-2 py-1.5 font-medium text-[12px] text-[var(--text-body)]'
 
 function FlyoutMoreButton({
   ariaLabel,
@@ -109,7 +109,7 @@ function TaskStatusIcon({
       {!isActive && isUnread && (
         <span
           className={cn(
-            '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[#33C482]',
+            '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--indicator-online)]',
             hideStatusOnHover && 'group-hover:hidden'
           )}
         />
@@ -140,7 +140,7 @@ export function CollapsedSidebarMenu({
   primaryAction,
 }: CollapsedSidebarMenuProps) {
   return (
-    <div className={cn('flex flex-col px-[8px]', className)}>
+    <div className={cn('flex flex-col px-2', className)}>
       <DropdownMenu
         open={hover.isOpen}
         onOpenChange={(open) => {
@@ -154,7 +154,7 @@ export function CollapsedSidebarMenu({
             <button
               type='button'
               aria-label={ariaLabel}
-              className='mx-[2px] flex h-[30px] items-center rounded-[8px] px-[8px] hover:bg-[var(--surface-active)]'
+              className='mx-0.5 flex h-[30px] items-center rounded-[8px] px-2 hover:bg-[var(--surface-active)]'
             >
               {icon}
             </button>
@@ -221,11 +221,11 @@ export function CollapsedTaskFlyoutItem({
   }
 
   return (
-    <div className='group relative mx-[2px]'>
+    <div className='group relative mx-0.5'>
       <Link
         href={task.href}
         className={cn(
-          'flex min-h-[30px] min-w-0 items-center rounded-[5px] px-[8px] py-[5px] pr-[30px] font-medium text-[12px] text-[var(--text-body)] hover:bg-[var(--surface-active)] group-focus-within:bg-[var(--surface-active)] group-hover:bg-[var(--surface-active)]',
+          'flex min-h-[30px] min-w-0 items-center rounded-[5px] px-2 py-[5px] pr-[30px] font-medium text-[12px] text-[var(--text-body)] hover:bg-[var(--surface-active)] group-focus-within:bg-[var(--surface-active)] group-hover:bg-[var(--surface-active)]',
           isCurrentRoute && 'bg-[var(--surface-active)]'
         )}
         onContextMenu={
@@ -299,11 +299,11 @@ export function CollapsedWorkflowFlyoutItem({
   }
 
   return (
-    <div className='group relative mx-[2px]'>
+    <div className='group relative mx-0.5'>
       <Link
         href={href}
         className={cn(
-          'flex min-h-[30px] min-w-0 items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] pr-[30px] font-medium text-[12px] text-[var(--text-body)] hover:bg-[var(--surface-active)] group-focus-within:bg-[var(--surface-active)] group-hover:bg-[var(--surface-active)]',
+          'flex min-h-[30px] min-w-0 items-center gap-2 rounded-[5px] px-2 py-[5px] pr-[30px] font-medium text-[12px] text-[var(--text-body)] hover:bg-[var(--surface-active)] group-focus-within:bg-[var(--surface-active)] group-hover:bg-[var(--surface-active)]',
           isCurrentRoute && 'bg-[var(--surface-active)]'
         )}
         onContextMenu={onContextMenu ? (e) => onContextMenu(e, workflow) : undefined}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
index c017e6162e..e489a4065c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -127,8 +127,8 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
             element.hasAttribute('data-radix-popover-content') ||
             (element.hasAttribute('role') && element.getAttribute('role') === 'dialog') ||
             element.querySelector('[role="listbox"]') !== null ||
-            element.classList.contains('rounded-[8px]') ||
-            element.classList.contains('rounded-[4px]')
+            element.classList.contains('rounded-lg') ||
+            element.classList.contains('rounded-sm')
 
           if (hasPopoverStructure && element.offsetParent !== null) {
             element.style.zIndex = '10000101'
@@ -430,8 +430,8 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
           <ModalBody>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-              <div className='space-y-[12px]'>
-                <div className='flex flex-col gap-[8px]'>
+              <div className='space-y-3'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='type'>Request</Label>
                   <Combobox
                     id='type'
@@ -446,7 +446,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='subject'>Subject</Label>
                   <Input
                     id='subject'
@@ -456,7 +456,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='message'>Message</Label>
                   <Textarea
                     id='message'
@@ -467,7 +467,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Attach Images (Optional)</Label>
                   <Button
                     type='button'
@@ -478,7 +478,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                     onDragLeave={handleDragLeave}
                     onDrop={handleDrop}
                     className={cn(
-                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                      '!bg-[var(--surface-1)] hover-hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-2.5',
                       {
                         'border-[var(--surface-7)]': isDragging,
                       }
@@ -492,11 +492,11 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                       className='hidden'
                       multiple
                     />
-                    <div className='flex flex-col gap-[2px] text-center'>
+                    <div className='flex flex-col gap-0.5 text-center'>
                       <span className='text-[var(--text-primary)]'>
                         {isDragging ? 'Drop images here' : 'Drop images here or click to browse'}
                       </span>
-                      <span className='text-[11px] text-[var(--text-tertiary)]'>
+                      <span className='text-[var(--text-tertiary)] text-xs'>
                         PNG, JPEG, WebP, GIF (max 20MB each)
                       </span>
                     </div>
@@ -509,7 +509,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                     <div className='grid grid-cols-2 gap-3'>
                       {images.map((image, index) => (
                         <div
-                          className='group relative overflow-hidden rounded-[4px] border'
+                          className='group relative overflow-hidden rounded-sm border'
                           key={index}
                         >
                           <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center'>
@@ -529,7 +529,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                               <X className='h-[18px] w-[18px] text-white' />
                             </button>
                           </div>
-                          <div className='truncate p-[6px] text-[12px]'>{image.name}</div>
+                          <div className='truncate p-1.5 text-caption'>{image.name}</div>
                         </div>
                       ))}
                     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 077516f2fd..7e240a41c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -366,18 +366,18 @@ export function SearchModal({
         style={{ left: '50%' }}
       >
         <Command label='Search' shouldFilter={false}>
-          <div className='mx-[8px] mt-[8px] mb-[4px] flex items-center gap-[6px] rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] dark:bg-[var(--surface-4)]'>
+          <div className='mx-2 mt-2 mb-1 flex items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
             <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)]' />
             <Command.Input
               ref={inputRef}
               autoFocus
               onValueChange={handleSearchChange}
               placeholder='Search anything...'
-              className='w-full bg-transparent py-[6px] font-base text-[14px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+              className='w-full bg-transparent py-1.5 font-base text-[var(--text-primary)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
             />
           </div>
-          <Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-[8px] [&_[cmdk-group]+[cmdk-group]]:mt-[10px]'>
-            <Command.Empty className='flex items-center justify-center px-[16px] py-[24px] text-[14px] text-[var(--text-subtle)]'>
+          <Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-2 [&_[cmdk-group]+[cmdk-group]]:mt-2.5'>
+            <Command.Empty className='flex items-center justify-center px-4 py-6 text-[var(--text-subtle)] text-sm'>
               No results found.
             </Command.Empty>
 
@@ -439,10 +439,10 @@ export function SearchModal({
                     key={workflow.id}
                     value={`${workflow.name} workflow-${workflow.id}`}
                     onSelect={() => handleWorkflowSelect(workflow)}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                    className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                   >
                     <div
-                      className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px] border-[2px]'
+                      className='h-[14px] w-[14px] flex-shrink-0 rounded-sm border-[2px]'
                       style={{
                         backgroundColor: workflow.color,
                         borderColor: `${workflow.color}60`,
@@ -468,7 +468,7 @@ export function SearchModal({
                       router.push(task.href)
                       onOpenChange(false)
                     }}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                    className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                   >
                     <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                       <Blimp className='h-[14px] w-[14px] text-[var(--text-icon)]' />
@@ -503,7 +503,7 @@ export function SearchModal({
                     key={workspace.id}
                     value={`${workspace.name} workspace-${workspace.id}`}
                     onSelect={() => handleWorkspaceSelect(workspace)}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                    className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                   >
                     <span className='truncate font-base text-[var(--text-body)]'>
                       {workspace.name}
@@ -540,7 +540,7 @@ export function SearchModal({
                       key={page.id}
                       value={`${page.name} page-${page.id}`}
                       onSelect={() => handlePageSelect(page)}
-                      className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                      className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                     >
                       <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                         <Icon className='h-[14px] w-[14px] text-[var(--text-icon)]' />
@@ -549,7 +549,7 @@ export function SearchModal({
                         {page.name}
                       </span>
                       {page.shortcut && (
-                        <span className='ml-auto flex-shrink-0 font-base text-[13px] text-[var(--text-subtle)]'>
+                        <span className='ml-auto flex-shrink-0 font-base text-[var(--text-subtle)] text-small'>
                           {page.shortcut}
                         </span>
                       )}
@@ -567,7 +567,7 @@ export function SearchModal({
 }
 
 const groupHeadingClassName =
-  '[&_[cmdk-group-heading]]:px-[8px] [&_[cmdk-group-heading]]:pt-[2px] [&_[cmdk-group-heading]]:pb-[6px] [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-[12px] [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
+  '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-0.5 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-caption [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
 
 interface CommandItemProps {
   value: string
@@ -593,10 +593,10 @@ const MemoizedCommandItem = memo(
       <Command.Item
         value={value}
         onSelect={onSelect}
-        className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+        className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
       >
         <div
-          className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+          className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
           style={{ background: showColoredIcon ? bgColor : 'transparent' }}
         >
           <Icon
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index f18c961aa3..0c65c2ef48 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -185,13 +185,13 @@ export function SettingsSidebar({
   return (
     <>
       {/* Back button */}
-      <div className='mt-[10px] flex flex-shrink-0 flex-col gap-[2px] px-[8px]'>
+      <div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
         <Tooltip.Root key={`back-${isCollapsed}`}>
           <Tooltip.Trigger asChild>
             <button
               type='button'
               onClick={handleBack}
-              className='group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]'
+              className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-active)]'
             >
               <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
                 <ChevronDown className='h-[10px] w-[10px] rotate-90' />
@@ -210,7 +210,7 @@ export function SettingsSidebar({
       {/* Settings sections */}
       <div
         className={cn(
-          'mt-[14px] flex flex-1 flex-col gap-[14px]',
+          'mt-3.5 flex flex-1 flex-col gap-3.5',
           !isCollapsed && 'overflow-y-auto overflow-x-hidden'
         )}
       >
@@ -218,10 +218,10 @@ export function SettingsSidebar({
           isCollapsed ? (
             <>
               {SKELETON_SECTIONS.map((count, sectionIdx) => (
-                <div key={sectionIdx} className='flex flex-col gap-[2px] px-[8px]'>
+                <div key={sectionIdx} className='flex flex-col gap-0.5 px-2'>
                   {Array.from({ length: count }, (_, i) => (
-                    <div key={i} className='mx-[2px] flex h-[30px] items-center px-[8px]'>
-                      <Skeleton className='h-[16px] w-[16px] rounded-[4px]' />
+                    <div key={i} className='mx-0.5 flex h-[30px] items-center px-2'>
+                      <Skeleton className='h-[16px] w-[16px] rounded-sm' />
                     </div>
                   ))}
                 </div>
@@ -230,13 +230,13 @@ export function SettingsSidebar({
           ) : (
             Array.from({ length: 3 }, (_, i) => (
               <div key={i} className='sidebar-collapse-hide flex flex-shrink-0 flex-col'>
-                <div className='px-[16px] pb-[6px]'>
-                  <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+                <div className='px-4 pb-1.5'>
+                  <Skeleton className='h-[14px] w-[64px] rounded-sm' />
                 </div>
-                <div className='flex flex-col gap-[2px] px-[8px]'>
+                <div className='flex flex-col gap-0.5 px-2'>
                   {Array.from({ length: i === 0 ? 3 : 2 }, (_, j) => (
-                    <div key={j} className='mx-[2px] flex h-[30px] items-center px-[8px]'>
-                      <Skeleton className='h-[24px] w-full rounded-[4px]' />
+                    <div key={j} className='mx-0.5 flex h-[30px] items-center px-2'>
+                      <Skeleton className='h-[24px] w-full rounded-sm' />
                     </div>
                   ))}
                 </div>
@@ -250,16 +250,16 @@ export function SettingsSidebar({
 
             return (
               <div key={key} className='flex flex-shrink-0 flex-col'>
-                <div className='px-[16px] pb-[6px]'>
+                <div className='px-4 pb-1.5'>
                   <div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
                 </div>
-                <div className='flex flex-col gap-[2px] px-[8px]'>
+                <div className='flex flex-col gap-0.5 px-2'>
                   {sectionItems.map((item) => {
                     const Icon = item.icon
                     const active = activeSection === item.id
                     const isLocked = item.requiresMax && !subscriptionAccess.hasUsableMaxAccess
                     const itemClassName = cn(
-                      'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]',
+                      'group mx-0.5 flex h-[30px] items-center gap-2 rounded-[8px] px-2 text-[14px] hover:bg-[var(--surface-active)]',
                       active && 'bg-[var(--surface-active)]'
                     )
                     const content = (
@@ -269,7 +269,7 @@ export function SettingsSidebar({
                           {item.label}
                         </span>
                         {isLocked && (
-                          <span className='ml-auto shrink-0 rounded-[3px] bg-[var(--surface-5)] px-[4px] py-[1px] font-medium text-[9px] text-[var(--text-icon)] uppercase tracking-wide'>
+                          <span className='ml-auto shrink-0 rounded-[3px] bg-[var(--surface-5)] px-1 py-[1px] font-medium text-[9px] text-[var(--text-icon)] uppercase tracking-wide'>
                             Max
                           </span>
                         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
index b8315cb56f..8f65e9b028 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
@@ -402,18 +402,18 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
 
   if (isLoading && !subscriptionData) {
     return (
-      <div className='flex flex-shrink-0 flex-col gap-[8px] border-t px-[13.5px] pt-[8px] pb-[10px]'>
+      <div className='flex flex-shrink-0 flex-col gap-2 border-t px-[13.5px] pt-2 pb-2.5'>
         <div className='flex h-[18px] items-center justify-between'>
-          <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
-            <Skeleton className='h-[12px] w-[28px] rounded-[4px]' />
+          <div className='flex min-w-0 flex-1 items-center gap-1.5'>
+            <Skeleton className='h-[12px] w-[28px] rounded-sm' />
             <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
-            <Skeleton className='h-[12px] w-[90px] rounded-[4px]' />
+            <Skeleton className='h-[12px] w-[90px] rounded-sm' />
           </div>
-          <Skeleton className='h-[16px] w-[50px] rounded-[6px]' />
+          <Skeleton className='h-[16px] w-[50px] rounded-md' />
         </div>
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {Array.from({ length: pillCount }).map((_, i) => (
-            <Skeleton key={i} className='h-[6px] flex-1 rounded-[2px]' />
+            <Skeleton key={i} className='h-[6px] flex-1 rounded-xs' />
           ))}
         </div>
       </div>
@@ -466,9 +466,9 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
 
   if (isEnterpriseMember) {
     return (
-      <div className='flex flex-shrink-0 flex-col border-t px-[13.5px] pt-[8px] pb-[10px]'>
+      <div className='flex flex-shrink-0 flex-col border-t px-[13.5px] pt-2 pb-2.5'>
         <div className='flex h-[18px] items-center'>
-          <span className='font-base text-[12px] text-[var(--text-primary)]'>
+          <span className='font-base text-[var(--text-primary)] text-caption'>
             {PLAN_NAMES[planType]}
           </span>
         </div>
@@ -479,7 +479,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
   return (
     <>
       <div
-        className='group flex flex-shrink-0 cursor-pointer flex-col gap-[8px] border-t px-[13.5px] pt-[8px] pb-[10px]'
+        className='group flex flex-shrink-0 cursor-pointer flex-col gap-2 border-t px-[13.5px] pt-2 pb-2.5'
         onClick={handleClick}
         onContextMenu={handleContextMenuWithCheck}
         onMouseEnter={() => setIsHovered(true)}
@@ -487,27 +487,27 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
       >
         {/* Top row */}
         <div className='flex h-[18px] items-center justify-between'>
-          <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
+          <div className='flex min-w-0 flex-1 items-center gap-1.5'>
             {showPlanText && (
               <>
-                <span className='flex-shrink-0 font-base text-[12px] text-[var(--text-primary)]'>
+                <span className='flex-shrink-0 font-base text-[var(--text-primary)] text-caption'>
                   {PLAN_NAMES[planType]}
                 </span>
                 <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
               </>
             )}
-            <div className='flex min-w-0 flex-1 items-center gap-[4px]'>
+            <div className='flex min-w-0 flex-1 items-center gap-1'>
               {statusText.isError ? (
-                <span className='font-base text-[12px] text-[var(--text-error)]'>
+                <span className='font-base text-[var(--text-error)] text-caption'>
                   {statusText.text}
                 </span>
               ) : (
                 <>
-                  <span className='font-base text-[12px] text-[var(--text-secondary)] tabular-nums'>
+                  <span className='font-base text-[var(--text-secondary)] text-caption tabular-nums'>
                     {dollarsToCredits(usage.current).toLocaleString()}
                   </span>
-                  <span className='font-base text-[12px] text-[var(--text-secondary)]'>/</span>
-                  <span className='font-base text-[12px] text-[var(--text-secondary)] tabular-nums'>
+                  <span className='font-base text-[var(--text-secondary)] text-caption'>/</span>
+                  <span className='font-base text-[var(--text-secondary)] text-caption tabular-nums'>
                     {dollarsToCredits(usage.limit).toLocaleString()} credits
                   </span>
                 </>
@@ -522,7 +522,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
         </div>
 
         {/* Pills row */}
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {Array.from({ length: pillCount }).map((_, i) => {
             const isFilled = i < filledPillsCount
             const baseColor = isFilled ? filledColor : USAGE_PILL_COLORS.UNFILLED
@@ -545,7 +545,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
             return (
               <div
                 key={i}
-                className='h-[6px] flex-1 rounded-[2px]'
+                className='h-[6px] flex-1 rounded-xs'
                 style={{
                   backgroundColor,
                   backgroundImage,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
index 49e0caf533..31a9eb854a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
@@ -41,7 +41,7 @@ function ColorGrid({
   hexInput,
   setHexInput,
   onColorChange,
-  buttonRefs,
+  buttonRefs: cellButtonRefs,
 }: {
   hexInput: string
   setHexInput: (color: string) => void
@@ -49,7 +49,6 @@ function ColorGrid({
   buttonRefs: RefObject<(HTMLButtonElement | null)[]>
 }) {
   const [focusedIndex, setFocusedIndex] = useState(-1)
-  const gridRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const selectedIndex = WORKFLOW_COLORS.findIndex(
@@ -58,9 +57,9 @@ function ColorGrid({
     const idx = selectedIndex >= 0 ? selectedIndex : 0
     setFocusedIndex(idx)
     requestAnimationFrame(() => {
-      buttonRefs.current[idx]?.focus()
+      cellButtonRefs.current[idx]?.focus()
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- initial roving focus when submenu content mounts
   }, [])
 
   const handleKeyDown = useCallback(
@@ -98,19 +97,19 @@ function ColorGrid({
 
       if (newIndex !== index) {
         setFocusedIndex(newIndex)
-        buttonRefs.current[newIndex]?.focus()
+        cellButtonRefs.current[newIndex]?.focus()
       }
     },
     [setHexInput, onColorChange]
   )
 
   return (
-    <div ref={gridRef} className='grid grid-cols-6 gap-[4px]' role='grid'>
+    <div className='grid grid-cols-6 gap-1' role='grid'>
       {WORKFLOW_COLORS.map(({ color, name }, index) => (
         <button
           key={color}
           ref={(el) => {
-            buttonRefs.current[index] = el
+            cellButtonRefs.current[index] = el
           }}
           type='button'
           role='gridcell'
@@ -123,7 +122,7 @@ function ColorGrid({
           onKeyDown={(e) => handleKeyDown(e, index)}
           onFocus={() => setFocusedIndex(index)}
           className={cn(
-            'h-[16px] w-[16px] rounded-[4px] border border-black/10 outline-none transition-shadow duration-150',
+            'h-[16px] w-[16px] rounded-sm border border-black/10 outline-none transition-shadow duration-150',
             (focusedIndex === index ||
               (focusedIndex === -1 && hexInput.toLowerCase() === color.toLowerCase())) &&
               'shadow-[0_0_0_1.5px_var(--bg),0_0_0_3px_var(--text-icon)]'
@@ -184,17 +183,17 @@ function ColorPickerSubmenu({
         <Palette />
         Change color
       </DropdownMenuSubTrigger>
-      <DropdownMenuSubContent className='p-[8px]' onPointerDownOutside={(e) => e.preventDefault()}>
-        <div className='flex w-[120px] flex-col gap-[8px] p-[2px]'>
+      <DropdownMenuSubContent className='p-2' onPointerDownOutside={(e) => e.preventDefault()}>
+        <div className='flex w-[120px] flex-col gap-2 p-0.5'>
           <ColorGrid
             hexInput={hexInput}
             setHexInput={setHexInput}
             onColorChange={onColorChange}
             buttonRefs={buttonRefs}
           />
-          <div className='flex items-center gap-[4px]'>
+          <div className='flex items-center gap-1'>
             <div
-              className='h-[16px] w-[16px] flex-shrink-0 rounded-[4px] border border-black/10'
+              className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border border-black/10'
               style={{
                 backgroundColor: isValidHex(hexInput) ? normalizeHex(hexInput) : '#ffffff',
               }}
@@ -206,7 +205,7 @@ function ColorPickerSubmenu({
               onKeyDown={handleHexKeyDown}
               onFocus={handleHexFocus}
               onClick={(e) => e.stopPropagation()}
-              className='h-[20px] min-w-0 flex-1 rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] font-medium text-[11px] text-[var(--text-primary)] uppercase transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-[20px] min-w-0 flex-1 rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 font-medium text-[var(--text-primary)] text-xs uppercase transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
             />
             <Button
               variant='primary'
@@ -340,6 +339,7 @@ export function ContextMenu({
 
   const handleHexKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation()
       if (e.key === 'Enter') {
         e.preventDefault()
         handleHexSubmit()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index f2263b3092..3b2efbff0f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -447,8 +447,8 @@ export function FolderItem({
         aria-expanded={isExpanded}
         aria-label={`${folder.name} folder, ${isExpanded ? 'expanded' : 'collapsed'}`}
         className={clsx(
-          'group mx-[2px] flex h-[30px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
-          !isAnyDragActive && 'hover:bg-[var(--surface-active)]',
+          'group mx-0.5 flex h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 text-sm',
+          !isAnyDragActive && 'hover-hover:bg-[var(--surface-active)]',
           isSelected ? 'bg-[var(--surface-active)]' : '',
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
@@ -485,7 +485,7 @@ export function FolderItem({
             onChange={(e) => setEditValue(e.target.value)}
             onKeyDown={handleRenameKeyDown}
             onBlur={handleInputBlur}
-            className='min-w-0 flex-1 border-0 bg-transparent p-0 font-base text-[14px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='min-w-0 flex-1 border-0 bg-transparent p-0 font-base text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
             maxLength={50}
             disabled={isRenaming}
             onClick={(e) => {
@@ -498,7 +498,7 @@ export function FolderItem({
             spellCheck='false'
           />
         ) : (
-          <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
             <span
               className='min-w-0 flex-1 truncate font-base text-[var(--text-body)]'
               onDoubleClick={handleDoubleClick}
@@ -511,7 +511,7 @@ export function FolderItem({
               onPointerDown={handleMorePointerDown}
               onClick={handleMoreClick}
               className={clsx(
-                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)]',
+                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity hover-hover:bg-[var(--surface-7)]',
                 !isAnyDragActive && 'group-hover:opacity-100'
               )}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index d602c4b558..a8020e2f83 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -385,9 +385,9 @@ export function WorkflowItem({
         href={`/workspace/${workspaceId}/w/${workflow.id}`}
         data-item-id={workflow.id}
         className={clsx(
-          'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
+          'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm',
           active && 'bg-[var(--surface-active)]',
-          !active && !isAnyDragActive && 'hover:bg-[var(--surface-active)]',
+          !active && !isAnyDragActive && 'hover-hover:bg-[var(--surface-active)]',
           isSelected && selectedWorkflows.size > 1 && !active && 'bg-[var(--surface-active)]',
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
@@ -398,7 +398,7 @@ export function WorkflowItem({
         onContextMenu={handleContextMenu}
       >
         <div
-          className='h-[16px] w-[16px] flex-shrink-0 rounded-[4px] border-[2.5px]'
+          className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
           style={{
             backgroundColor: workflow.color,
             borderColor: `${workflow.color}60`,
@@ -406,7 +406,7 @@ export function WorkflowItem({
           }}
         />
         <div className='min-w-0 flex-1'>
-          <div className='flex min-w-0 items-center gap-[8px]'>
+          <div className='flex min-w-0 items-center gap-2'>
             {isEditing ? (
               <input
                 ref={inputRef}
@@ -414,7 +414,7 @@ export function WorkflowItem({
                 onChange={(e) => setEditValue(e.target.value)}
                 onKeyDown={handleKeyDown}
                 onBlur={handleInputBlur}
-                className='w-full min-w-0 border-0 bg-transparent p-0 font-base text-[14px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                className='w-full min-w-0 border-0 bg-transparent p-0 font-base text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                 maxLength={100}
                 disabled={isRenaming}
                 onClick={(e) => {
@@ -445,7 +445,7 @@ export function WorkflowItem({
               onPointerDown={handleMorePointerDown}
               onClick={handleMoreClick}
               className={clsx(
-                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)]',
+                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity hover-hover:bg-[var(--surface-7)]',
                 !isAnyDragActive && 'group-hover:opacity-100'
               )}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
index ccde17e43b..6b4d5c180b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -451,7 +451,7 @@ export const WorkflowList = memo(function WorkflowList({
           <DropIndicatorLine show={showBefore} level={level} position='before' />
           <div
             className={clsx(
-              'pointer-events-none absolute inset-0 z-10 rounded-[4px]',
+              'pointer-events-none absolute inset-0 z-10 rounded-sm',
               showInside && isDragging ? 'bg-[var(--text-subtle)] opacity-10' : 'hidden'
             )}
           />
@@ -476,7 +476,7 @@ export const WorkflowList = memo(function WorkflowList({
                 className='pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--border)]'
                 style={{ left: `${level * TREE_SPACING.INDENT_PER_LEVEL + 12}px` }}
               />
-              <div className='mt-[2px] space-y-[2px] pl-[2px]'>
+              <div className='mt-0.5 space-y-0.5 pl-0.5'>
                 {childItems.map((item) =>
                   item.type === 'folder'
                     ? renderFolderSection(item.data as FolderTreeNode, level + 1, folder.id)
@@ -558,7 +558,7 @@ export const WorkflowList = memo(function WorkflowList({
       const target = e.target as HTMLElement
       const isOnEmptyArea =
         target === e.currentTarget ||
-        target.classList.contains('space-y-[2px]') ||
+        target.classList.contains('space-y-0.5') ||
         target.closest('[data-empty-area]')
       if (!isOnEmptyArea) return
       if (!onCreateWorkflow && !onCreateFolder) return
@@ -570,19 +570,19 @@ export const WorkflowList = memo(function WorkflowList({
   return (
     <SidebarDragContext.Provider value={dragContextValue}>
       <div
-        className='flex min-h-full flex-col pb-[8px]'
+        className='flex min-h-full flex-col pb-2'
         onClick={handleContainerClick}
         onContextMenu={handleContainerContextMenu}
         data-empty-area
       >
         <div
-          className={clsx('relative flex-1 rounded-[4px]', !hasRootItems && 'min-h-[26px]')}
+          className={clsx('relative flex-1 rounded-sm', !hasRootItems && 'min-h-[26px]')}
           {...rootDropZoneHandlers}
           data-empty-area
         >
           <div
             className={clsx(
-              'pointer-events-none absolute inset-0 z-10 rounded-[4px]',
+              'pointer-events-none absolute inset-0 z-10 rounded-sm',
               showRootInside && isDragging ? 'bg-[var(--text-subtle)] opacity-10' : 'hidden'
             )}
           />
@@ -592,7 +592,7 @@ export const WorkflowList = memo(function WorkflowList({
               {...createEdgeDropZone(firstItemId, 'before')}
             />
           )}
-          <div className='space-y-[2px]' data-empty-area>
+          <div className='space-y-0.5' data-empty-area>
             {rootItems.map((item) =>
               item.type === 'folder'
                 ? renderFolderSection(item.data as FolderTreeNode, 0, null)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
index aafe95c622..7cc22d6582 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -10,14 +10,14 @@ import type { UserPermissions } from './types'
 
 const PermissionsTableSkeleton = () => (
   <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
-    <div className='flex items-center justify-between gap-[8px] py-[8px]'>
+    <div className='flex items-center justify-between gap-2 py-2'>
       <div className='min-w-0 flex-1'>
-        <div className='flex items-center gap-[8px]'>
-          <Skeleton className='h-[14px] w-40 rounded-[4px]' />
+        <div className='flex items-center gap-2'>
+          <Skeleton className='h-[14px] w-40 rounded-sm' />
         </div>
       </div>
       <div className='flex flex-shrink-0 items-center'>
-        <div className='inline-flex gap-[2px]'>
+        <div className='inline-flex gap-0.5'>
           <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
           <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
           <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
@@ -141,17 +141,17 @@ export const PermissionsTable = ({
 
   if (isSaving) {
     return (
-      <div className='space-y-[12px]'>
-        <h3 className='font-medium text-[14px] text-[var(--text-primary)]'>Member Permissions</h3>
-        <div className='rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
-          <div className='flex items-center justify-center py-[48px]'>
-            <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+      <div className='space-y-3'>
+        <h3 className='font-medium text-[var(--text-primary)] text-sm'>Member Permissions</h3>
+        <div className='rounded-lg border border-[var(--border-1)] bg-[var(--surface-3)]'>
+          <div className='flex items-center justify-center py-12'>
+            <div className='flex items-center gap-2 text-[var(--text-secondary)]'>
               <Loader2 className='h-[16px] w-[16px] animate-spin' />
-              <span className='font-medium text-[13px]'>Saving permission changes...</span>
+              <span className='font-medium text-small'>Saving permission changes...</span>
             </div>
           </div>
         </div>
-        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)]'>
+        <p className='flex min-h-[2rem] items-start text-[var(--text-tertiary)] text-caption'>
           Please wait while we update the permissions.
         </p>
       </div>
@@ -191,14 +191,14 @@ export const PermissionsTable = ({
                 : `new-${user.email}`
 
             return (
-              <div key={uniqueKey} className='flex items-center justify-between gap-[8px] py-[8px]'>
+              <div key={uniqueKey} className='flex items-center justify-between gap-2 py-2'>
                 <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                  <div className='flex items-center gap-2'>
+                    <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {user.email}
                     </span>
                     {isPendingInvitation && (
-                      <Badge variant='default' className='gap-[4px] text-[12px]'>
+                      <Badge variant='default' className='gap-1 text-caption'>
                         {resendingInvitationIds &&
                         user.invitationId &&
                         resendingInvitationIds[user.invitationId] ? (
@@ -213,7 +213,7 @@ export const PermissionsTable = ({
                       </Badge>
                     )}
                     {hasChanges && (
-                      <Badge variant='default' className='text-[12px]'>
+                      <Badge variant='default' className='text-caption'>
                         Modified
                       </Badge>
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
index 117817f1c3..e9d3e713fb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
@@ -481,11 +481,11 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
           autoComplete='off'
         >
           <ModalBody>
-            <div className='space-y-[12px]'>
+            <div className='space-y-3'>
               <div>
                 <Label
                   htmlFor='invite-field'
-                  className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+                  className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
                 >
                   Email Addresses
                 </Label>
@@ -535,10 +535,10 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                 />
               </div>
               {errorMessage && (
-                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{errorMessage}</p>
+                <p className='mt-1 text-[var(--text-error)] text-caption'>{errorMessage}</p>
               )}
             </div>
-            <div className='mt-[8px]'>
+            <div className='mt-2'>
               <PermissionsTable
                 userPermissions={userPermissions}
                 onPermissionChange={handlePermissionChange}
@@ -561,7 +561,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
 
           <ModalFooter className='justify-between'>
             <div
-              className={`flex gap-[8px] ${hasPendingChanges && userPerms.canAdmin ? '' : 'pointer-events-none invisible'}`}
+              className={`flex gap-2 ${hasPendingChanges && userPerms.canAdmin ? '' : 'pointer-events-none invisible'}`}
               aria-hidden={!(hasPendingChanges && userPerms.canAdmin)}
             >
               <Button
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index c932493470..ccb25a67d5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -333,8 +333,8 @@ export function WorkspaceHeader({
                 type='button'
                 aria-label='Switch workspace'
                 className={cn(
-                  'group flex h-[32px] min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] pl-[5px] transition-colors hover:bg-[var(--surface-5)]',
-                  isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-[8px] pr-[8px]'
+                  'group flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-1.5 transition-colors hover-hover:bg-[var(--surface-5)]',
+                  isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-2 pr-2'
                 )}
                 title={activeWorkspace?.name || 'Loading...'}
                 onContextMenu={(e) => {
@@ -344,16 +344,16 @@ export function WorkspaceHeader({
                 }}
               >
                 <div
-                  className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] font-medium text-[12px] text-white leading-none'
+                  className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-caption text-white leading-none'
                   style={{
-                    backgroundColor: activeWorkspaceFull?.color || 'var(--brand-tertiary-2)',
+                    backgroundColor: activeWorkspaceFull?.color || 'var(--brand-accent)',
                   }}
                 >
                   {workspaceInitial}
                 </div>
                 {!isCollapsed && (
                   <>
-                    <span className='min-w-0 flex-1 truncate text-left font-base text-[14px] text-[var(--text-primary)]'>
+                    <span className='min-w-0 flex-1 truncate text-left font-base text-[var(--text-primary)] text-sm'>
                       {activeWorkspace?.name || 'Loading...'}
                     </span>
                     <ChevronDown className='sidebar-collapse-hide h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)] group-hover:text-[var(--text-secondary)]' />
@@ -381,36 +381,34 @@ export function WorkspaceHeader({
               onCloseAutoFocus={(e) => e.preventDefault()}
             >
               {isWorkspacesLoading ? (
-                <div className='px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption'>
                   Loading workspaces...
                 </div>
               ) : (
                 <>
-                  <div className='flex items-center gap-[8px] px-[2px] py-[2px]'>
+                  <div className='flex items-center gap-2 px-0.5 py-0.5'>
                     <div
-                      className='flex h-[32px] w-[32px] flex-shrink-0 items-center justify-center rounded-[6px] font-medium text-[12px] text-white'
+                      className='flex h-[32px] w-[32px] flex-shrink-0 items-center justify-center rounded-md font-medium text-caption text-white'
                       style={{
-                        backgroundColor: activeWorkspaceFull?.color || 'var(--brand-tertiary-2)',
+                        backgroundColor: activeWorkspaceFull?.color || 'var(--brand-accent)',
                       }}
                     >
                       {workspaceInitial}
                     </div>
                     <div className='flex min-w-0 flex-col'>
-                      <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                      <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                         {activeWorkspace?.name || 'Loading...'}
                       </span>
-                      <span className='text-[11px] text-[var(--text-tertiary)]'>
-                        {planDisplayName}
-                      </span>
+                      <span className='text-[var(--text-tertiary)] text-xs'>{planDisplayName}</span>
                     </div>
                   </div>
 
-                  <DropdownMenuGroup className='mt-[4px] min-h-0 flex-1'>
-                    <div className='flex max-h-[130px] flex-col gap-[2px] overflow-y-auto'>
+                  <DropdownMenuGroup className='mt-1 min-h-0 flex-1'>
+                    <div className='flex max-h-[130px] flex-col gap-0.5 overflow-y-auto'>
                       {workspaces.map((workspace) => (
                         <div key={workspace.id}>
                           {editingWorkspaceId === workspace.id ? (
-                            <div className='flex items-center gap-[8px] rounded-[5px] bg-[var(--surface-active)] px-[8px] py-[5px]'>
+                            <div className='flex items-center gap-2 rounded-[5px] bg-[var(--surface-active)] px-2 py-[5px]'>
                               <input
                                 ref={(el) => {
                                   if (el && !hasInputFocusedRef.current) {
@@ -450,7 +448,7 @@ export function WorkspaceHeader({
                                   }
                                   setEditingWorkspaceId(null)
                                 }}
-                                className='w-full border-0 bg-transparent p-0 font-medium text-[12px] text-[var(--text-primary)] outline-none selection:bg-[#add6ff] selection:text-[#1b1b1b] focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:selection:bg-[#264f78] dark:selection:text-white'
+                                className='w-full border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-caption outline-none selection:bg-[var(--selection-bg)] selection:text-[var(--bg)] focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'
                                 maxLength={100}
                                 autoComplete='off'
                                 autoCorrect='off'
@@ -465,7 +463,7 @@ export function WorkspaceHeader({
                           ) : (
                             <div
                               className={cn(
-                                'group flex cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors hover:bg-[var(--surface-active)]',
+                                'group flex cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]',
                                 workspace.id === workspaceId && 'bg-[var(--surface-active)]'
                               )}
                               onClick={() => onWorkspaceSwitch(workspace)}
@@ -484,7 +482,7 @@ export function WorkspaceHeader({
                                   const rect = e.currentTarget.getBoundingClientRect()
                                   openContextMenuAt(workspace, rect.right, rect.top)
                                 }}
-                                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)] group-hover:opacity-100'
+                                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity hover-hover:bg-[var(--surface-7)] group-hover:opacity-100'
                               >
                                 <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
                               </button>
@@ -495,10 +493,10 @@ export function WorkspaceHeader({
                     </div>
                   </DropdownMenuGroup>
 
-                  <div className='mt-[4px] flex flex-col gap-[2px]'>
+                  <div className='mt-1 flex flex-col gap-0.5'>
                     <button
                       type='button'
-                      className='flex w-full cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors hover:bg-[var(--surface-active)] disabled:pointer-events-none disabled:opacity-50'
+                      className='flex w-full cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)] disabled:pointer-events-none disabled:opacity-50'
                       onClick={(e) => {
                         e.stopPropagation()
                         setIsWorkspaceMenuOpen(false)
@@ -516,7 +514,7 @@ export function WorkspaceHeader({
                       <DropdownMenuSeparator />
                       <button
                         type='button'
-                        className='flex w-full cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors hover:bg-[var(--surface-active)]'
+                        className='flex w-full cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]'
                         onClick={() => {
                           setIsInviteModalOpen(true)
                           setIsWorkspaceMenuOpen(false)
@@ -536,21 +534,21 @@ export function WorkspaceHeader({
             type='button'
             aria-label='Switch workspace'
             className={cn(
-              'flex h-[32px] min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] pl-[5px]',
-              isCollapsed ? 'w-[32px]' : 'w-full gap-[8px] pr-[8px]'
+              'flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-[5px]',
+              isCollapsed ? 'w-[32px]' : 'w-full gap-2 pr-2'
             )}
             title={activeWorkspace?.name || 'Loading...'}
             disabled
           >
             <div
-              className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] font-medium text-[12px] text-white leading-none'
-              style={{ backgroundColor: activeWorkspaceFull?.color || 'var(--brand-tertiary-2)' }}
+              className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-caption text-white leading-none'
+              style={{ backgroundColor: activeWorkspaceFull?.color || 'var(--brand-accent)' }}
             >
               {workspaceInitial}
             </div>
             {!isCollapsed && (
               <>
-                <span className='min-w-0 flex-1 truncate text-left font-base text-[14px] text-[var(--text-primary)]'>
+                <span className='min-w-0 flex-1 truncate text-left font-base text-[var(--text-primary)] text-sm'>
                   {activeWorkspace?.name || 'Loading...'}
                 </span>
                 <ChevronDown className='sidebar-collapse-hide h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 8bdcf04126..407e47f034 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -98,8 +98,8 @@ const logger = createLogger('Sidebar')
 
 function SidebarItemSkeleton() {
   return (
-    <div className='sidebar-collapse-hide mx-[2px] flex h-[30px] items-center px-[8px]'>
-      <Skeleton className='h-[24px] w-full rounded-[4px]' />
+    <div className='sidebar-collapse-hide mx-0.5 flex h-[30px] items-center px-2'>
+      <Skeleton className='h-[24px] w-full rounded-sm' />
     </div>
   )
 }
@@ -133,7 +133,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
         <Link
           href={task.href}
           className={cn(
-            'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]',
+            'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-active)]',
             (isCurrentRoute || isSelected) && 'bg-[var(--surface-active)]'
           )}
           onClick={(e) => {
@@ -163,7 +163,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
                 <span className='absolute h-[7px] w-[7px] rounded-full bg-amber-400 group-hover:hidden' />
               )}
               {!isActive && isUnread && !isCurrentRoute && (
-                <span className='absolute h-[7px] w-[7px] rounded-full bg-[#33C482] group-hover:hidden' />
+                <span className='absolute h-[7px] w-[7px] rounded-full bg-[var(--brand-accent)] group-hover:hidden' />
               )}
               <button
                 type='button'
@@ -174,7 +174,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
                   e.stopPropagation()
                   onMoreClick(e, task.id)
                 }}
-                className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px] opacity-0 hover:bg-[var(--surface-7)] group-hover:opacity-100'
+                className='flex h-[18px] w-[18px] items-center justify-center rounded-sm opacity-0 hover-hover:bg-[var(--surface-7)] group-hover:opacity-100'
               >
                 <MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
               </button>
@@ -212,7 +212,7 @@ const SidebarNavItem = memo(function SidebarNavItem({
 }) {
   const Icon = item.icon
   const baseClasses =
-    'group flex h-[30px] items-center gap-[8px] rounded-[8px] mx-[2px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]'
+    'group flex h-[30px] items-center gap-2 rounded-lg mx-0.5 px-2 text-sm hover-hover:bg-[var(--surface-active)]'
   const activeClasses = active ? 'bg-[var(--surface-active)]' : ''
 
   const content = (
@@ -1101,13 +1101,13 @@ export const Sidebar = memo(function Sidebar() {
         aria-label='Workspace sidebar'
         onClick={handleSidebarClick}
       >
-        <div className='flex h-full flex-col pt-[12px]'>
+        <div className='flex h-full flex-col pt-3'>
           {/* Top bar: Logo + Collapse toggle */}
-          <div className='flex flex-shrink-0 items-center pr-[8px] pb-[8px] pl-[10px]'>
+          <div className='flex flex-shrink-0 items-center pr-2 pb-2 pl-2.5'>
             <div className='relative flex h-[30px] items-center'>
               <Link
                 href={`/workspace/${workspaceId}/home`}
-                className='sidebar-collapse-hide sidebar-collapse-remove flex h-[30px] items-center rounded-[8px] px-[6px] hover:bg-[var(--surface-active)]'
+                className='sidebar-collapse-hide sidebar-collapse-remove flex h-[30px] items-center rounded-[8px] px-1.5 hover:bg-[var(--surface-active)]'
                 tabIndex={isCollapsed ? -1 : 0}
               >
                 {brand.logoUrl ? (
@@ -1161,7 +1161,7 @@ export const Sidebar = memo(function Sidebar() {
                   type='button'
                   onClick={toggleCollapsed}
                   className={cn(
-                    'sidebar-collapse-btn ml-auto flex h-[30px] items-center justify-center overflow-hidden rounded-[8px] transition-all duration-200 hover:bg-[var(--surface-active)]',
+                    'sidebar-collapse-btn ml-auto flex h-[30px] items-center justify-center overflow-hidden rounded-lg transition-all duration-200 hover-hover:bg-[var(--surface-active)]',
                     isCollapsed ? 'w-0 opacity-0' : 'w-[30px] opacity-100'
                   )}
                   aria-label='Collapse sidebar'
@@ -1178,7 +1178,7 @@ export const Sidebar = memo(function Sidebar() {
           </div>
 
           {/* Workspace Header */}
-          <div className='flex-shrink-0 px-[10px]'>
+          <div className='flex-shrink-0 px-2.5'>
             <WorkspaceHeader
               activeWorkspace={activeWorkspace}
               workspaceId={workspaceId}
@@ -1210,7 +1210,7 @@ export const Sidebar = memo(function Sidebar() {
           ) : (
             <>
               {/* Top Navigation: Home, Search */}
-              <div className='mt-[10px] flex flex-shrink-0 flex-col gap-[2px] px-[8px]'>
+              <div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
                 {topNavItems.map((item) => (
                   <SidebarNavItem
                     key={`${item.id}-${isCollapsed}`}
@@ -1223,11 +1223,11 @@ export const Sidebar = memo(function Sidebar() {
               </div>
 
               {/* Workspace */}
-              <div className='mt-[14px] flex flex-shrink-0 flex-col pb-[8px]'>
-                <div className='px-[16px] pb-[6px]'>
+              <div className='mt-3.5 flex flex-shrink-0 flex-col pb-2'>
+                <div className='px-4 pb-1.5'>
                   <div className='font-base text-[var(--text-icon)] text-small'>Workspace</div>
                 </div>
-                <div className='flex flex-col gap-[2px] px-[8px]'>
+                <div className='flex flex-col gap-0.5 px-2'>
                   {workspaceNavItems.map((item) => (
                     <SidebarNavItem
                       key={`${item.id}-${isCollapsed}`}
@@ -1244,21 +1244,21 @@ export const Sidebar = memo(function Sidebar() {
               <div
                 ref={isCollapsed ? undefined : scrollContainerRef}
                 className={cn(
-                  'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-[9px] transition-colors duration-150',
+                  'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-2.5 transition-colors duration-150',
                   !hasOverflowTop && 'border-transparent'
                 )}
               >
                 {/* Tasks */}
                 <div className='tasks-section flex flex-shrink-0 flex-col' data-tour='nav-tasks'>
-                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-[16px]'>
+                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
                     <div className='font-base text-[var(--text-icon)] text-small'>All tasks</div>
                     {!isCollapsed && (
-                      <div className='flex items-center justify-center gap-[8px]'>
+                      <div className='flex items-center justify-center gap-2'>
                         <Tooltip.Root>
                           <Tooltip.Trigger asChild>
                             <Button
                               variant='ghost'
-                              className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                              className='h-[18px] w-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-active)]'
                               onClick={() => navigateToPage(`/workspace/${workspaceId}/home`)}
                             >
                               <Plus className='h-[16px] w-[16px]' />
@@ -1278,7 +1278,7 @@ export const Sidebar = memo(function Sidebar() {
                       }
                       hover={tasksHover}
                       ariaLabel='Tasks'
-                      className='mt-[6px]'
+                      className='mt-1.5'
                       primaryAction={{
                         label: 'New task',
                         onSelect: () => navigateToPage(`/workspace/${workspaceId}/home`),
@@ -1310,7 +1310,7 @@ export const Sidebar = memo(function Sidebar() {
                       )}
                     </CollapsedSidebarMenu>
                   ) : (
-                    <div className='mt-[6px] flex flex-col gap-[2px] px-[8px]'>
+                    <div className='mt-1.5 flex flex-col gap-0.5 px-2'>
                       {tasksLoading ? (
                         <SidebarItemSkeleton />
                       ) : (
@@ -1324,7 +1324,7 @@ export const Sidebar = memo(function Sidebar() {
                               return (
                                 <div
                                   key={task.id}
-                                  className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] bg-[var(--surface-active)] px-[8px] text-[14px]'
+                                  className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg bg-[var(--surface-active)] px-2 text-sm'
                                 >
                                   <Blimp className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
                                   <input
@@ -1359,7 +1359,7 @@ export const Sidebar = memo(function Sidebar() {
                             <button
                               type='button'
                               onClick={() => setVisibleTaskCount((prev) => prev + 5)}
-                              className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] text-[var(--text-icon)] hover:bg-[var(--surface-active)]'
+                              className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-[var(--text-icon)] text-sm hover-hover:bg-[var(--surface-active)]'
                             >
                               <MoreHorizontal className='h-[16px] w-[16px] flex-shrink-0' />
                               <span className='font-base'>See more</span>
@@ -1373,20 +1373,20 @@ export const Sidebar = memo(function Sidebar() {
 
                 {/* Workflows */}
                 <div
-                  className='workflows-section relative mt-[14px] flex flex-col'
+                  className='workflows-section relative mt-3.5 flex flex-col'
                   data-tour='nav-workflows'
                 >
-                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-[16px]'>
+                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
                     <div className='font-base text-[var(--text-icon)] text-small'>Workflows</div>
                     {!isCollapsed && (
-                      <div className='flex items-center justify-center gap-[8px]'>
+                      <div className='flex items-center justify-center gap-2'>
                         <DropdownMenu>
                           <Tooltip.Root>
                             <Tooltip.Trigger asChild>
                               <DropdownMenuTrigger asChild>
                                 <Button
                                   variant='ghost'
-                                  className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                                  className='h-[18px] w-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-active)]'
                                   disabled={!canEdit}
                                 >
                                   {isImporting || isCreatingFolder ? (
@@ -1426,7 +1426,7 @@ export const Sidebar = memo(function Sidebar() {
                           <Tooltip.Trigger asChild>
                             <Button
                               variant='ghost'
-                              className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                              className='h-[18px] w-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-active)]'
                               onClick={handleCreateWorkflow}
                               disabled={isCreatingWorkflow || !canEdit}
                             >
@@ -1454,7 +1454,7 @@ export const Sidebar = memo(function Sidebar() {
                       }
                       hover={workflowsHover}
                       ariaLabel='Workflows'
-                      className='mt-[6px]'
+                      className='mt-1.5'
                       primaryAction={{
                         label: 'New workflow',
                         onSelect: handleCreateWorkflow,
@@ -1507,7 +1507,7 @@ export const Sidebar = memo(function Sidebar() {
                       )}
                     </CollapsedSidebarMenu>
                   ) : (
-                    <div className='mt-[6px] px-[8px]'>
+                    <div className='mt-1.5 px-2'>
                       {workflowsLoading && regularWorkflows.length === 0 && <SidebarItemSkeleton />}
                       <WorkflowList
                         workspaceId={workspaceId}
@@ -1530,7 +1530,7 @@ export const Sidebar = memo(function Sidebar() {
               {/* Footer */}
               <div
                 className={cn(
-                  'flex flex-shrink-0 flex-col gap-[2px] border-t px-[8px] pt-[9px] pb-[8px] transition-colors duration-150',
+                  'flex flex-shrink-0 flex-col gap-0.5 border-t px-2 pt-[9px] pb-2 transition-colors duration-150',
                   !hasOverflowBottom && 'border-transparent'
                 )}
               >
@@ -1542,7 +1542,7 @@ export const Sidebar = memo(function Sidebar() {
                         <button
                           type='button'
                           data-item-id='help'
-                          className='group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]'
+                          className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-[8px] px-2 text-[14px] hover:bg-[var(--surface-active)]'
                         >
                           <HelpCircle className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
                           <span className='sidebar-collapse-hide truncate font-base text-[var(--text-body)]'>
diff --git a/apps/sim/blocks/blocks/agent.ts b/apps/sim/blocks/blocks/agent.ts
index a5585816a6..a7a0829c88 100644
--- a/apps/sim/blocks/blocks/agent.ts
+++ b/apps/sim/blocks/blocks/agent.ts
@@ -71,7 +71,7 @@ export const AgentBlock: BlockConfig<AgentResponse> = {
   category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['llm', 'agentic', 'automation'],
-  bgColor: 'var(--brand-primary-hex)',
+  bgColor: 'var(--brand)',
   icon: AgentIcon,
   subBlocks: [
     {
diff --git a/apps/sim/components/emcn/components/avatar/avatar.tsx b/apps/sim/components/emcn/components/avatar/avatar.tsx
index 9500f7ecbe..fe432a14f3 100644
--- a/apps/sim/components/emcn/components/avatar/avatar.tsx
+++ b/apps/sim/components/emcn/components/avatar/avatar.tsx
@@ -31,10 +31,10 @@ const avatarStatusVariants = cva(
   {
     variants: {
       status: {
-        online: 'bg-[#16a34a]',
+        online: 'bg-[var(--success)]',
         offline: 'bg-[var(--text-muted)]',
-        busy: 'bg-[#dc2626]',
-        away: 'bg-[#f59e0b]',
+        busy: 'bg-[var(--error)]',
+        away: 'bg-[var(--caution)]',
       },
       size: {
         xs: 'h-1.5 w-1.5 border',
@@ -122,7 +122,10 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn('aspect-square h-full w-full object-cover object-center', className)}
+    className={cn(
+      '-outline-offset-1 aspect-square h-full w-full object-cover object-center outline outline-1 outline-black/5',
+      className
+    )}
     {...props}
   />
 ))
diff --git a/apps/sim/components/emcn/components/badge/badge.tsx b/apps/sim/components/emcn/components/badge/badge.tsx
index 61d4b53530..91d7afa069 100644
--- a/apps/sim/components/emcn/components/badge/badge.tsx
+++ b/apps/sim/components/emcn/components/badge/badge.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 /** Shared base styles for status color badge variants */
-const STATUS_BASE = 'gap-[6px] rounded-[6px]'
+const STATUS_BASE = 'gap-1.5 rounded-md'
 
 const badgeVariants = cva(
   'inline-flex items-center font-medium focus:outline-none transition-colors',
@@ -11,27 +11,27 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover:text-[var(--text-primary)] hover:border-[var(--border-1)] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
+          'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]',
         outline:
-          'gap-[4px] rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-5)] dark:hover:bg-transparent dark:hover:border-[var(--surface-6)]',
-        type: 'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]',
-        green: `${STATUS_BASE} bg-[#bbf7d0] text-[#15803d] dark:bg-[rgba(34,197,94,0.2)] dark:text-[#86efac]`,
-        red: `${STATUS_BASE} bg-[#fecaca] text-[var(--text-error)] dark:bg-[#551a1a] dark:text-[var(--text-error)]`,
-        gray: `${STATUS_BASE} bg-[#e7e5e4] text-[#57534e] dark:bg-[var(--terminal-status-info-bg)] dark:text-[var(--terminal-status-info-color)]`,
-        blue: `${STATUS_BASE} bg-[#bfdbfe] text-[#1d4ed8] dark:bg-[rgba(59,130,246,0.2)] dark:text-[#93c5fd]`,
-        'blue-secondary': `${STATUS_BASE} bg-[#bae6fd] text-[#0369a1] dark:bg-[rgba(51,180,255,0.2)] dark:text-[var(--brand-secondary)]`,
-        purple: `${STATUS_BASE} bg-[#e9d5ff] text-[#7c3aed] dark:bg-[rgba(168,85,247,0.2)] dark:text-[#d8b4fe]`,
-        orange: `${STATUS_BASE} bg-[#fed7aa] text-[#c2410c] dark:bg-[rgba(249,115,22,0.2)] dark:text-[#fdba74]`,
-        amber: `${STATUS_BASE} bg-[#fde68a] text-[#a16207] dark:bg-[rgba(245,158,11,0.2)] dark:text-[#fcd34d]`,
-        teal: `${STATUS_BASE} bg-[#99f6e4] text-[#0f766e] dark:bg-[rgba(20,184,166,0.2)] dark:text-[#5eead4]`,
-        cyan: `${STATUS_BASE} bg-[var(--surface-4)] text-[#0891b2] dark:bg-[rgba(14,165,233,0.2)] dark:text-[#7dd3fc]`,
-        pink: `${STATUS_BASE} bg-[#fbcfe8] text-[#be185d] dark:bg-[rgba(236,72,153,0.2)] dark:text-[#f9a8d4]`,
+          'gap-1 rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:bg-transparent dark:hover-hover:border-[var(--surface-6)]',
+        type: 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]',
+        green: `${STATUS_BASE} bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]`,
+        red: `${STATUS_BASE} bg-[var(--badge-error-bg)] text-[var(--badge-error-text)]`,
+        gray: `${STATUS_BASE} bg-[var(--badge-gray-bg)] text-[var(--badge-gray-text)]`,
+        blue: `${STATUS_BASE} bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]`,
+        'blue-secondary': `${STATUS_BASE} bg-[var(--badge-blue-secondary-bg)] text-[var(--badge-blue-secondary-text)]`,
+        purple: `${STATUS_BASE} bg-[var(--badge-purple-bg)] text-[var(--badge-purple-text)]`,
+        orange: `${STATUS_BASE} bg-[var(--badge-orange-bg)] text-[var(--badge-orange-text)]`,
+        amber: `${STATUS_BASE} bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]`,
+        teal: `${STATUS_BASE} bg-[var(--badge-teal-bg)] text-[var(--badge-teal-text)]`,
+        cyan: `${STATUS_BASE} bg-[var(--badge-cyan-bg)] text-[var(--badge-cyan-text)]`,
+        pink: `${STATUS_BASE} bg-[var(--badge-pink-bg)] text-[var(--badge-pink-text)]`,
         'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
       },
       size: {
-        sm: 'px-[7px] py-[1px] text-[11px]',
-        md: 'px-[9px] py-[2px] text-[12px]',
-        lg: 'px-[9px] py-[2.25px] text-[12px]',
+        sm: 'px-[7px] py-[1px] text-xs',
+        md: 'px-[9px] py-0.5 text-caption',
+        lg: 'px-[9px] py-[2.25px] text-caption',
       },
     },
     defaultVariants: {
@@ -59,16 +59,16 @@ const STATUS_VARIANTS = [
 
 /** Dot sizes corresponding to badge size variants */
 const DOT_SIZES: Record<string, string> = {
-  sm: 'h-[5px] w-[5px]',
-  md: 'h-[6px] w-[6px]',
-  lg: 'h-[6px] w-[6px]',
+  sm: 'size-[5px]',
+  md: 'size-1.5',
+  lg: 'size-1.5',
 }
 
 /** Icon sizes corresponding to badge size variants */
 const ICON_SIZES: Record<string, string> = {
-  sm: 'h-[10px] w-[10px]',
-  md: 'h-[12px] w-[12px]',
-  lg: 'h-[12px] w-[12px]',
+  sm: 'size-2.5',
+  md: 'size-3',
+  lg: 'size-3',
 }
 
 export interface BadgeProps
@@ -107,7 +107,7 @@ function Badge({
   return (
     <div className={cn(badgeVariants({ variant, size }), className)} {...props}>
       {isStatusVariant && dot && (
-        <div className={cn('rounded-[2px] bg-current', DOT_SIZES[effectiveSize])} />
+        <div className={cn('rounded-xs bg-current', DOT_SIZES[effectiveSize])} />
       )}
       {Icon && <Icon className={ICON_SIZES[effectiveSize]} />}
       {children}
diff --git a/apps/sim/components/emcn/components/banner/banner.tsx b/apps/sim/components/emcn/components/banner/banner.tsx
index 98ebd0b778..452cfb928f 100644
--- a/apps/sim/components/emcn/components/banner/banner.tsx
+++ b/apps/sim/components/emcn/components/banner/banner.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { Button, type ButtonProps } from '@/components/emcn/components/button/button'
 import { cn } from '@/lib/core/utils/cn'
 
-const bannerVariants = cva('shrink-0 px-[24px] py-[10px]', {
+const bannerVariants = cva('shrink-0 px-6 py-2.5', {
   variants: {
     variant: {
       default: 'bg-[var(--surface-active)]',
@@ -52,7 +52,7 @@ export function Banner({
       {children ?? (
         <div
           className={cn(
-            'mx-auto flex max-w-[1400px] items-center justify-between gap-[12px]',
+            'mx-auto flex max-w-[1400px] items-center justify-between gap-3',
             contentClassName
           )}
         >
@@ -60,7 +60,7 @@ export function Banner({
           {actionLabel ? (
             <Button
               variant={actionVariant}
-              className={cn('h-[28px] shrink-0 px-[8px] text-[12px]', actionClassName)}
+              className={cn('h-[28px] shrink-0 px-2 text-[12px]', actionClassName)}
               onClick={onAction}
               disabled={actionDisabled}
               {...actionProps}
diff --git a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
index 747efbabeb..c247466091 100644
--- a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
+++ b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
@@ -17,27 +17,23 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
  */
 function Breadcrumb({ items, className, ...props }: BreadcrumbProps) {
   return (
-    <nav
-      aria-label='Breadcrumb'
-      className={cn('flex items-center gap-[6px]', className)}
-      {...props}
-    >
+    <nav aria-label='Breadcrumb' className={cn('flex items-center gap-1.5', className)} {...props}>
       {items.map((item, index) => {
         const isLast = index === items.length - 1
 
         return (
-          <div key={`${item.label}-${index}`} className='flex items-center gap-[6px]'>
+          <div key={`${item.label}-${index}`} className='flex items-center gap-1.5'>
             {item.href && !isLast ? (
               <Link
                 href={item.href}
-                className='block max-w-[200px] truncate font-medium text-[14px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                className='block max-w-[200px] truncate font-medium text-[var(--text-tertiary)] text-sm transition-colors hover-hover:text-[var(--text-primary)]'
               >
                 {item.label}
               </Link>
             ) : (
               <span
                 className={cn(
-                  'block max-w-[200px] truncate font-medium text-[14px]',
+                  'block max-w-[200px] truncate font-medium text-sm',
                   isLast ? 'text-[var(--text-primary)]' : 'text-[var(--text-tertiary)]'
                 )}
               >
diff --git a/apps/sim/components/emcn/components/button-group/button-group.tsx b/apps/sim/components/emcn/components/button-group/button-group.tsx
index a9c6f22474..9be9c842bc 100644
--- a/apps/sim/components/emcn/components/button-group/button-group.tsx
+++ b/apps/sim/components/emcn/components/button-group/button-group.tsx
@@ -17,7 +17,7 @@ const buttonGroupVariants = cva('inline-flex', {
   variants: {
     gap: {
       none: 'gap-0',
-      sm: 'gap-[2px]',
+      sm: 'gap-0.5',
     },
   },
   defaultVariants: {
@@ -100,13 +100,13 @@ function ButtonGroup({
 }
 
 const buttonGroupItemVariants = cva(
-  'inline-flex items-center justify-center font-medium transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-[8px] py-[4px] text-[12px] border',
+  'inline-flex items-center justify-center font-medium transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border',
   {
     variants: {
       active: {
-        true: 'bg-[#1D1D1D] text-[var(--text-inverse)] border-[#1D1D1D] hover:bg-[#2A2A2A] hover:border-[#2A2A2A] dark:bg-white dark:border-white dark:hover:bg-[#E0E0E0] dark:hover:border-[#E0E0E0]',
+        true: 'bg-[var(--text-primary)] text-[var(--text-inverse)] border-[var(--text-primary)] hover-hover:bg-[var(--surface-4)] hover-hover:border-[var(--border)] dark:bg-white dark:text-[var(--bg)] dark:border-white dark:hover-hover:bg-[var(--border-1)] dark:hover-hover:text-[var(--text-inverse)] dark:hover-hover:border-[var(--border-1)]',
         false:
-          'bg-[var(--surface-4)] text-[var(--text-secondary)] border-[var(--border)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-6)] hover:border-[var(--border-1)]',
+          'bg-[var(--surface-4)] text-[var(--text-secondary)] border-[var(--border)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-6)] hover-hover:border-[var(--border-1)]',
       },
       position: {
         only: 'rounded-[5px]',
diff --git a/apps/sim/components/emcn/components/button/button.tsx b/apps/sim/components/emcn/components/button/button.tsx
index 02de7fe269..e8608bff86 100644
--- a/apps/sim/components/emcn/components/button/button.tsx
+++ b/apps/sim/components/emcn/components/button/button.tsx
@@ -3,35 +3,37 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 const buttonVariants = cva(
-  'inline-flex items-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
+  'inline-flex items-center justify-center font-medium transition-colors active:scale-[0.97] disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
   {
     variants: {
       variant: {
         default:
-          'bg-[var(--surface-4)] hover:bg-[var(--surface-6)] border border-[var(--border)] hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]',
+          'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] bg-[var(--surface-4)] hover-hover:bg-[var(--surface-6)] border border-[var(--border)] hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]',
         active:
-          'bg-[var(--surface-5)] hover:bg-[var(--surface-7)] text-[var(--text-primary)] border border-[var(--border-1)] dark:hover:bg-[var(--border-1)]',
-        '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-1)] shadow-[0_2px_0_0_var(--border-1)] hover:shadow-[0_4px_0_0_var(--border-1)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)]',
+          'bg-[var(--surface-5)] hover-hover:bg-[var(--surface-7)] text-[var(--text-primary)] border border-[var(--border-1)] dark:hover-hover:bg-[var(--border-1)]',
+        '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-1)] shadow-[0_2px_0_0_var(--border-1)] hover-hover:shadow-[0_4px_0_0_var(--border-1)] transition-[transform,box-shadow,color] hover-hover:-translate-y-0.5 hover-hover:text-[var(--text-primary)]',
         outline:
-          'border border-[var(--text-muted)] bg-transparent hover:border-[var(--text-secondary)]',
+          'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] border border-[var(--text-muted)] bg-transparent hover-hover:border-[var(--text-secondary)]',
         primary:
-          'bg-[#1D1D1D] text-[var(--text-inverse)] hover:text-[var(--text-inverse)] hover:bg-[#2A2A2A] dark:bg-white dark:hover:bg-[#E0E0E0]',
-        destructive: 'bg-[var(--text-error)] text-white hover:text-white hover:brightness-106',
+          'bg-[var(--text-primary)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--text-body)] dark:bg-white dark:text-[var(--bg)] dark:hover-hover:bg-[var(--text-secondary)] dark:hover-hover:text-[var(--bg)]',
+        destructive:
+          'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
         secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
         tertiary:
-          '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!text-[var(--text-inverse)] hover:!bg-[#2DAC72] dark:!bg-[var(--brand-tertiary-2)] dark:hover:!bg-[#2DAC72] dark:!text-[var(--text-inverse)] dark:hover:!text-[var(--text-inverse)]',
-        ghost: '',
-        subtle: 'text-[var(--text-body)] hover:text-[var(--text-body)] hover:bg-[var(--surface-4)]',
-        'ghost-secondary': 'text-[var(--text-muted)]',
+          'bg-[var(--brand-accent)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[#2DAC72] dark:bg-[var(--brand-accent)] dark:hover-hover:bg-[#2DAC72] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]',
+        ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
+        subtle:
+          'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
+        'ghost-secondary': 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]',
         /** Branded button - requires branded-button-gradient or branded-button-custom class for colors */
         branded:
-          'rounded-[10px] border text-white hover:text-white text-[15px] transition-all duration-200',
+          'rounded-[10px] border text-white hover-hover:text-white text-base transition-[transform,background-color,color,border-color] duration-200',
       },
       size: {
-        sm: 'px-[6px] py-[4px] text-[11px]',
-        md: 'px-[8px] py-[6px] text-[12px]',
+        sm: 'px-1.5 py-1 text-[length:11px]',
+        md: 'px-2 py-1.5 text-[length:12px]',
         /** Branded size - matches login form button padding */
-        branded: 'py-[6px] pr-[10px] pl-[12px]',
+        branded: 'py-1.5 pr-2.5 pl-3',
       },
     },
     defaultVariants: {
diff --git a/apps/sim/components/emcn/components/checkbox/checkbox.tsx b/apps/sim/components/emcn/components/checkbox/checkbox.tsx
index 1a3c0d6fa9..6ce4b264c4 100644
--- a/apps/sim/components/emcn/components/checkbox/checkbox.tsx
+++ b/apps/sim/components/emcn/components/checkbox/checkbox.tsx
@@ -24,8 +24,9 @@ import { cn } from '@/lib/core/utils/cn'
  */
 const checkboxVariants = cva(
   [
-    'peer flex shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors',
+    'relative peer flex shrink-0 cursor-pointer items-center justify-center rounded-sm border transition-colors',
     'border-[var(--border-1)] bg-transparent',
+    'before:absolute before:inset-[-12px] before:content-[""]',
     'focus-visible:outline-none',
     'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
     'data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)]',
diff --git a/apps/sim/components/emcn/components/code/code.css b/apps/sim/components/emcn/components/code/code.css
index be90a337a4..e4ae11111c 100644
--- a/apps/sim/components/emcn/components/code/code.css
+++ b/apps/sim/components/emcn/components/code/code.css
@@ -3,149 +3,152 @@
  * Cursor/VS Code base colors with Sim's vibrant saturation.
  * Colors aligned to Sim brand where applicable.
  * Applied to elements with .code-editor-theme class.
+ *
+ * Uses double-class specificity (.code-editor-theme.code-editor-theme)
+ * to override PrismJS defaults without !important.
  */
 
 /**
  * Light mode token colors - Cursor style with Sim vibrancy
  */
-.code-editor-theme .token.comment,
-.code-editor-theme .token.block-comment,
-.code-editor-theme .token.prolog,
-.code-editor-theme .token.doctype,
-.code-editor-theme .token.cdata {
-  color: #16a34a !important;
+.code-editor-theme.code-editor-theme .token.comment,
+.code-editor-theme.code-editor-theme .token.block-comment,
+.code-editor-theme.code-editor-theme .token.prolog,
+.code-editor-theme.code-editor-theme .token.doctype,
+.code-editor-theme.code-editor-theme .token.cdata {
+  color: #16a34a;
 }
 
-.code-editor-theme .token.punctuation {
-  color: #383838 !important;
+.code-editor-theme.code-editor-theme .token.punctuation {
+  color: #383838;
 }
 
-.code-editor-theme .token.property,
-.code-editor-theme .token.attr-name,
-.code-editor-theme .token.variable {
-  color: #0891b2 !important;
+.code-editor-theme.code-editor-theme .token.property,
+.code-editor-theme.code-editor-theme .token.attr-name,
+.code-editor-theme.code-editor-theme .token.variable {
+  color: #0891b2;
 }
 
-.code-editor-theme .token.tag,
-.code-editor-theme .token.boolean,
-.code-editor-theme .token.number,
-.code-editor-theme .token.constant {
-  color: #16a34a !important;
+.code-editor-theme.code-editor-theme .token.tag,
+.code-editor-theme.code-editor-theme .token.boolean,
+.code-editor-theme.code-editor-theme .token.number,
+.code-editor-theme.code-editor-theme .token.constant {
+  color: #16a34a;
 }
 
-.code-editor-theme .token.string,
-.code-editor-theme .token.char,
-.code-editor-theme .token.builtin,
-.code-editor-theme .token.inserted {
-  color: #b45309 !important;
+.code-editor-theme.code-editor-theme .token.string,
+.code-editor-theme.code-editor-theme .token.char,
+.code-editor-theme.code-editor-theme .token.builtin,
+.code-editor-theme.code-editor-theme .token.inserted {
+  color: #b45309;
 }
 
-.code-editor-theme .token.operator,
-.code-editor-theme .token.entity,
-.code-editor-theme .token.url {
-  color: #383838 !important;
+.code-editor-theme.code-editor-theme .token.operator,
+.code-editor-theme.code-editor-theme .token.entity,
+.code-editor-theme.code-editor-theme .token.url {
+  color: #383838;
 }
 
-.code-editor-theme .token.atrule,
-.code-editor-theme .token.attr-value,
-.code-editor-theme .token.keyword {
-  color: #2f55ff !important;
+.code-editor-theme.code-editor-theme .token.atrule,
+.code-editor-theme.code-editor-theme .token.attr-value,
+.code-editor-theme.code-editor-theme .token.keyword {
+  color: #2f55ff;
 }
 
-.code-editor-theme .token.function,
-.code-editor-theme .token.class-name {
-  color: #ca8a04 !important;
+.code-editor-theme.code-editor-theme .token.function,
+.code-editor-theme.code-editor-theme .token.class-name {
+  color: #ca8a04;
 }
 
-.code-editor-theme .token.regex,
-.code-editor-theme .token.important {
-  color: #e11d48 !important;
+.code-editor-theme.code-editor-theme .token.regex,
+.code-editor-theme.code-editor-theme .token.important {
+  color: #e11d48;
 }
 
-.code-editor-theme .token.symbol {
-  color: #383838 !important;
+.code-editor-theme.code-editor-theme .token.symbol {
+  color: #383838;
 }
 
-.code-editor-theme .token.deleted {
-  color: #dc2626 !important;
+.code-editor-theme.code-editor-theme .token.deleted {
+  color: #dc2626;
 }
 
 /* Blue accents for <var> and {{ENV}} placeholders - light mode */
-.code-editor-theme .text-blue-500 {
-  color: #1d4ed8 !important;
+.code-editor-theme.code-editor-theme .text-blue-500 {
+  color: #1d4ed8;
 }
 
 /**
  * Dark mode token colors - Cursor style with Sim vibrancy
  */
-.dark .code-editor-theme .token.comment,
-.dark .code-editor-theme .token.block-comment,
-.dark .code-editor-theme .token.prolog,
-.dark .code-editor-theme .token.doctype,
-.dark .code-editor-theme .token.cdata {
-  color: #6ec97d !important;
+.dark .code-editor-theme.code-editor-theme .token.comment,
+.dark .code-editor-theme.code-editor-theme .token.block-comment,
+.dark .code-editor-theme.code-editor-theme .token.prolog,
+.dark .code-editor-theme.code-editor-theme .token.doctype,
+.dark .code-editor-theme.code-editor-theme .token.cdata {
+  color: #6ec97d;
 }
 
-.dark .code-editor-theme .token.punctuation {
-  color: #d4d4d4 !important;
+.dark .code-editor-theme.code-editor-theme .token.punctuation {
+  color: #d4d4d4;
 }
 
-.dark .code-editor-theme .token.property,
-.dark .code-editor-theme .token.attr-name,
-.dark .code-editor-theme .token.variable {
-  color: #4fc3f7 !important;
+.dark .code-editor-theme.code-editor-theme .token.property,
+.dark .code-editor-theme.code-editor-theme .token.attr-name,
+.dark .code-editor-theme.code-editor-theme .token.variable {
+  color: #4fc3f7;
 }
 
-.dark .code-editor-theme .token.tag,
-.dark .code-editor-theme .token.boolean,
-.dark .code-editor-theme .token.number,
-.dark .code-editor-theme .token.constant {
-  color: #a5d6a7 !important;
+.dark .code-editor-theme.code-editor-theme .token.tag,
+.dark .code-editor-theme.code-editor-theme .token.boolean,
+.dark .code-editor-theme.code-editor-theme .token.number,
+.dark .code-editor-theme.code-editor-theme .token.constant {
+  color: #a5d6a7;
 }
 
-.dark .code-editor-theme .token.string,
-.dark .code-editor-theme .token.char,
-.dark .code-editor-theme .token.builtin,
-.dark .code-editor-theme .token.inserted {
-  color: #f39c6b !important;
+.dark .code-editor-theme.code-editor-theme .token.string,
+.dark .code-editor-theme.code-editor-theme .token.char,
+.dark .code-editor-theme.code-editor-theme .token.builtin,
+.dark .code-editor-theme.code-editor-theme .token.inserted {
+  color: #f39c6b;
 }
 
-.dark .code-editor-theme .token.operator,
-.dark .code-editor-theme .token.entity,
-.dark .code-editor-theme .token.url {
-  color: #d4d4d4 !important;
+.dark .code-editor-theme.code-editor-theme .token.operator,
+.dark .code-editor-theme.code-editor-theme .token.entity,
+.dark .code-editor-theme.code-editor-theme .token.url {
+  color: #d4d4d4;
 }
 
-.dark .code-editor-theme .token.atrule,
-.dark .code-editor-theme .token.attr-value,
-.dark .code-editor-theme .token.keyword {
-  color: #2fa1ff !important;
+.dark .code-editor-theme.code-editor-theme .token.atrule,
+.dark .code-editor-theme.code-editor-theme .token.attr-value,
+.dark .code-editor-theme.code-editor-theme .token.keyword {
+  color: #2fa1ff;
 }
 
-.dark .code-editor-theme .token.function,
-.dark .code-editor-theme .token.class-name {
-  color: #fbbf24 !important;
+.dark .code-editor-theme.code-editor-theme .token.function,
+.dark .code-editor-theme.code-editor-theme .token.class-name {
+  color: #fbbf24;
 }
 
-.dark .code-editor-theme .token.regex,
-.dark .code-editor-theme .token.important {
-  color: #f87171 !important;
+.dark .code-editor-theme.code-editor-theme .token.regex,
+.dark .code-editor-theme.code-editor-theme .token.important {
+  color: #f87171;
 }
 
-.dark .code-editor-theme .token.symbol {
-  color: #d4d4d4 !important;
+.dark .code-editor-theme.code-editor-theme .token.symbol {
+  color: #d4d4d4;
 }
 
-.dark .code-editor-theme .token.deleted {
-  color: #f87171 !important;
+.dark .code-editor-theme.code-editor-theme .token.deleted {
+  color: #f87171;
 }
 
 /* Blue accents for <var> and {{ENV}} placeholders - dark mode */
-.dark .code-editor-theme .text-blue-500 {
-  color: #35b6ff !important;
+.dark .code-editor-theme.code-editor-theme .text-blue-500 {
+  color: #35b6ff;
 }
 
 /* Ensure transparent backgrounds */
-.code-editor-theme .token {
-  background: transparent !important;
+.code-editor-theme.code-editor-theme .token {
+  background: transparent;
 }
diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx
index 94f865b01e..32382465bd 100644
--- a/apps/sim/components/emcn/components/code/code.tsx
+++ b/apps/sim/components/emcn/components/code/code.tsx
@@ -329,7 +329,7 @@ const CollapseButton = memo(function CollapseButton({ isCollapsed, onClick }: Co
     <button
       type='button'
       onClick={onClick}
-      className='flex h-[21px] w-[12px] cursor-pointer items-center justify-center border-none bg-transparent p-0 text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+      className='relative flex h-[21px] w-[12px] cursor-pointer items-center justify-center border-none bg-transparent p-0 text-[var(--text-muted)] before:absolute before:inset-[-10px] before:content-[""] hover-hover:text-[var(--text-secondary)]'
       aria-label={isCollapsed ? 'Expand' : 'Collapse'}
     >
       <ChevronRight
@@ -376,9 +376,9 @@ function Container({ children, className, style, onDragOver, onDrop }: CodeConta
     <div
       className={cn(
         // Base container styling
-        'group relative min-h-[100px] rounded-[4px] border border-[var(--border-1)]',
+        'group relative min-h-[100px] rounded-sm border border-[var(--border-1)]',
         'bg-[var(--surface-1)] font-medium font-mono text-sm transition-colors',
-        'dark:bg-[#1F1F1F]',
+        'dark:bg-[var(--code-bg)]',
         // Overflow handling for long content
         'overflow-x-auto overflow-y-auto',
         className
@@ -441,7 +441,7 @@ export function getCodeEditorProps(options?: {
     className: cn(
       // Base editor classes
       'bg-transparent font-[inherit] text-[inherit] font-medium',
-      'text-[var(--text-primary)] dark:text-[#eeeeee]',
+      'text-[var(--text-primary)] dark:text-[var(--code-foreground)]',
       'leading-[21px] outline-none focus:outline-none',
       'min-h-[106px]',
       // Streaming/disabled states
@@ -452,8 +452,8 @@ export function getCodeEditorProps(options?: {
       'border-none bg-transparent outline-none resize-none',
       'focus:outline-none focus:ring-0',
       // Selection styling - light and dark modes
-      'selection:bg-[#add6ff] selection:text-[#1b1b1b]',
-      'dark:selection:bg-[#264f78] dark:selection:text-white',
+      'selection:bg-[var(--selection-bg)] selection:text-[var(--bg)]',
+      'dark:selection:bg-[var(--selection-dark)] dark:selection:text-white',
       // Caret color - adapts to mode
       'caret-[var(--text-primary)] dark:caret-white',
       // Font smoothing
@@ -488,7 +488,7 @@ function Gutter({ children, width, className, style }: CodeGutterProps) {
       className={cn(
         'absolute top-0 bottom-0 left-0',
         'flex select-none flex-col items-end overflow-hidden',
-        'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[#1F1F1F]',
+        'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[var(--code-bg)]',
         'pr-0.5',
         className
       )}
@@ -613,7 +613,7 @@ function CodeRow({ index, style, ...props }: RowComponentProps<CodeRowProps>) {
     <div style={style} className={cn('flex', wrapText && 'overflow-hidden')} data-row-index={index}>
       {showGutter && (
         <div
-          className='flex-shrink-0 select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
+          className='flex-shrink-0 select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[var(--code-line-number)]'
           style={{ width: gutterWidth, marginLeft: leftOffset, ...gutterStyle }}
         >
           {line.lineNumber}
@@ -634,7 +634,7 @@ function CodeRow({ index, style, ...props }: RowComponentProps<CodeRowProps>) {
       )}
       <pre
         className={cn(
-          'm-0 flex-1 pr-2 pl-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]',
+          'm-0 flex-1 pr-2 pl-2 font-mono text-[var(--text-primary)] text-small leading-[21px] dark:text-[var(--code-foreground)]',
           wrapText ? 'min-w-0 whitespace-pre-wrap break-words' : 'whitespace-pre'
         )}
         dangerouslySetInnerHTML={{ __html: line.html || '&nbsp;' }}
@@ -676,10 +676,10 @@ function applySearchHighlightingToLine(
         matchesInLine++
 
         const bgClass = isCurrentMatch
-          ? 'bg-[#F6AD55] text-[#1a1a1a] dark:bg-[#F6AD55] dark:text-[#1a1a1a]'
+          ? 'bg-[var(--highlight-search-active)] text-[var(--text-primary)]'
           : 'bg-[#FCD34D]/40 dark:bg-[#FCD34D]/30'
 
-        return `<mark class="${bgClass} rounded-[2px]" data-search-match>${match}</mark>`
+        return `<mark class="${bgClass} rounded-xs" data-search-match>${match}</mark>`
       })
     })
     .join('')
@@ -764,10 +764,10 @@ function applySearchHighlighting(
         matchCounter.count++
 
         const bgClass = isCurrentMatch
-          ? 'bg-[#F6AD55] text-[#1a1a1a] dark:bg-[#F6AD55] dark:text-[#1a1a1a]'
+          ? 'bg-[var(--highlight-search-active)] text-[var(--text-primary)]'
           : 'bg-[#FCD34D]/40 dark:bg-[#FCD34D]/30'
 
-        return `<mark class="${bgClass} rounded-[2px]" data-search-match>${match}</mark>`
+        return `<mark class="${bgClass} rounded-xs" data-search-match>${match}</mark>`
       })
     })
     .join('')
@@ -983,9 +983,9 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
     <div
       ref={setRefs}
       className={cn(
-        'code-editor-theme relative rounded-[4px] border border-[var(--border-1)]',
+        'code-editor-theme relative rounded-sm border border-[var(--border-1)]',
         'bg-[var(--surface-1)] font-medium font-mono text-sm',
-        'dark:bg-[#1F1F1F]',
+        'dark:bg-[var(--code-bg)]',
         className
       )}
       style={{ height: containerHeight }}
@@ -1135,7 +1135,7 @@ const ViewerInner = memo(function ViewerInner({
               return (
                 <Fragment key={idx}>
                   <div
-                    className='select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
+                    className='select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[var(--code-line-number)]'
                     style={gutterStyle}
                   >
                     {lineNumber}
@@ -1152,7 +1152,7 @@ const ViewerInner = memo(function ViewerInner({
                   )}
                   <pre
                     className={cn(
-                      'm-0 min-w-0 pr-2 pl-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]',
+                      'm-0 min-w-0 pr-2 pl-2 font-mono text-[var(--text-primary)] text-small leading-[21px] dark:text-[var(--code-foreground)]',
                       whitespaceClass
                     )}
                     dangerouslySetInnerHTML={{ __html: html }}
@@ -1173,7 +1173,7 @@ const ViewerInner = memo(function ViewerInner({
         <pre
           className={cn(
             whitespaceClass,
-            'p-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
+            'p-2 font-mono text-[var(--text-primary)] text-small leading-[21px] dark:text-[var(--code-foreground)]'
           )}
           style={{ paddingLeft: paddingLeft > 0 ? paddingLeft : undefined }}
           dangerouslySetInnerHTML={{ __html: highlightedCode }}
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index e9cbeebd85..0576085263 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -21,15 +21,15 @@ import { Input } from '../input/input'
 import { Popover, PopoverAnchor, PopoverContent, PopoverScrollArea } from '../popover/popover'
 
 const comboboxVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]',
   {
     variants: {
       variant: {
         default: '',
       },
       size: {
-        sm: 'py-[5px] text-[12px]',
-        md: 'py-[6px] text-sm',
+        sm: 'py-1.5 text-caption',
+        md: 'py-1.5 text-sm',
       },
     },
     defaultVariants: {
@@ -187,11 +187,19 @@ const Combobox = memo(
       const searchInputRef = useRef<HTMLInputElement>(null)
       const containerRef = useRef<HTMLDivElement>(null)
       const dropdownRef = useRef<HTMLDivElement>(null)
+      const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
       const internalInputRef = useRef<HTMLInputElement>(null)
       const inputRef = externalInputRef || internalInputRef
 
       const effectiveSelectedValue = selectedValue ?? value
 
+      // Cleanup blur timeout on unmount
+      useEffect(() => {
+        return () => {
+          if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current)
+        }
+      }, [])
+
       // Flatten groups into options if groups are provided
       const allOptions = useMemo(() => {
         if (groups) {
@@ -328,8 +336,10 @@ const Combobox = memo(
        * Handles blur for editable mode
        */
       const handleBlur = useCallback(() => {
+        // Clear any pending blur timeout
+        if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current)
         // Delay to allow dropdown clicks
-        setTimeout(() => {
+        blurTimeoutRef.current = setTimeout(() => {
           const activeElement = document.activeElement
           // Check if focus is in the container, dropdown, or search input
           const isInContainer = containerRef.current?.contains(activeElement)
@@ -510,9 +520,10 @@ const Combobox = memo(
                     <Input
                       ref={inputRef}
                       className={cn(
-                        'w-full pr-[40px] font-medium transition-colors hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+                        'w-full pr-10 font-medium transition-colors hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]',
                         (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
-                        SelectedIcon && !overlayContent && 'pl-[28px]',
+                        SelectedIcon && !overlayContent && 'pl-7',
+                        open && 'focus-visible:border-[var(--border-1)]',
                         className
                       )}
                       placeholder={placeholder}
@@ -527,7 +538,7 @@ const Combobox = memo(
                     {(overlayContent || SelectedIcon) && (
                       <div
                         className={cn(
-                          'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                          'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
                           disabled && 'opacity-50'
                         )}
                       >
@@ -536,7 +547,7 @@ const Combobox = memo(
                         ) : (
                           <>
                             {SelectedIcon && (
-                              <SelectedIcon className='mr-[8px] h-3 w-3 flex-shrink-0' />
+                              <SelectedIcon className='mr-2 h-3 w-3 flex-shrink-0' />
                             )}
                             <span className='truncate text-[var(--text-primary)]'>
                               {selectedOption?.label}
@@ -586,12 +597,12 @@ const Combobox = memo(
                     </span>
                     <ChevronDown
                       className={cn(
-                        'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
+                        'ml-2 h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
                         open && 'rotate-180'
                       )}
                     />
                     {overlayContent && (
-                      <div className='pointer-events-none absolute inset-y-0 right-[24px] left-0 flex items-center px-[8px]'>
+                      <div className='pointer-events-none absolute inset-y-0 right-[24px] left-0 flex items-center px-2'>
                         <div className='w-full truncate'>{overlayContent}</div>
                       </div>
                     )}
@@ -605,7 +616,7 @@ const Combobox = memo(
               align={align}
               sideOffset={4}
               className={cn(
-                'rounded-[6px] border border-[var(--border-1)] p-0',
+                'rounded-md border border-[var(--border-1)] p-0',
                 dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
               )}
               style={
@@ -629,11 +640,11 @@ const Combobox = memo(
               }}
             >
               {searchable && (
-                <div className='flex items-center px-[10px] pt-[8px] pb-[4px]'>
+                <div className='flex items-center px-2.5 pt-2 pb-1'>
                   <Search className='mr-[7px] ml-[1px] h-[13px] w-[13px] shrink-0 text-[var(--text-muted)]' />
                   <input
                     ref={searchInputRef}
-                    className='w-full bg-transparent font-base text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none'
+                    className='w-full bg-transparent font-base text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
                     placeholder={searchPlaceholder}
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
@@ -660,7 +671,7 @@ const Combobox = memo(
                 </div>
               )}
               <PopoverScrollArea
-                className='!flex-none p-[4px]'
+                className='!flex-none p-1'
                 style={{ maxHeight: `${maxHeight}px` }}
                 onWheelCapture={(e) => {
                   const target = e.currentTarget
@@ -677,18 +688,18 @@ const Combobox = memo(
               >
                 <div ref={dropdownRef} role='listbox' id={listboxId}>
                   {isLoading ? (
-                    <div className='flex items-center justify-center py-[14px]'>
+                    <div className='flex items-center justify-center py-3.5'>
                       <Loader2 className='h-[16px] w-[16px] animate-spin text-[var(--text-muted)]' />
-                      <span className='ml-[8px] font-base text-[12px] text-[var(--text-muted)]'>
+                      <span className='ml-2 font-base text-[var(--text-muted)] text-caption'>
                         Loading options...
                       </span>
                     </div>
                   ) : error ? (
-                    <div className='px-[6px] py-[14px] text-center font-base text-[12px] text-red-500'>
+                    <div className='px-1.5 py-3.5 text-center font-base text-caption text-red-500'>
                       {error}
                     </div>
                   ) : filteredOptions.length === 0 ? (
-                    <div className='py-[14px] text-center font-base text-[12px] text-[var(--text-muted)]'>
+                    <div className='py-3.5 text-center font-base text-[var(--text-muted)] text-caption'>
                       {emptyMessage ||
                         (searchQuery || (editable && value)
                           ? 'No matching options found'
@@ -696,13 +707,13 @@ const Combobox = memo(
                     </div>
                   ) : filteredGroups ? (
                     // Render grouped options with section headers
-                    <div className='space-y-[2px]'>
+                    <div className='space-y-0.5'>
                       {filteredGroups.map((group, groupIndex) => (
                         <div key={group.section || `group-${groupIndex}`}>
                           {group.sectionElement
                             ? group.sectionElement
                             : group.section && (
-                                <div className='px-[6px] py-[4px] font-base text-[11px] text-[var(--text-tertiary)] first:pt-[4px]'>
+                                <div className='px-1.5 py-1 font-base text-[var(--text-tertiary)] text-xs first:pt-1'>
                                   {group.section}
                                 </div>
                               )}
@@ -734,9 +745,9 @@ const Combobox = memo(
                                   !option.disabled && setHighlightedIndex(globalIndex)
                                 }
                                 className={cn(
-                                  'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
-                                  size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                                  'hover:bg-[var(--border-1)]',
+                                  'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-medium font-sans',
+                                  size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                                  'hover-hover:bg-[var(--border-1)]',
                                   (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
                                   option.disabled && 'cursor-not-allowed opacity-50'
                                 )}
@@ -751,7 +762,7 @@ const Combobox = memo(
                                 </span>
                                 {option.suffixElement}
                                 {multiSelect && isSelected && (
-                                  <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                                  <Check className='ml-2 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
                                 )}
                               </div>
                             )
@@ -761,7 +772,7 @@ const Combobox = memo(
                     </div>
                   ) : (
                     // Render flat options (no groups)
-                    <div className='space-y-[2px]'>
+                    <div className='space-y-0.5'>
                       {showAllOption && multiSelect && (
                         <div
                           role='option'
@@ -774,9 +785,9 @@ const Combobox = memo(
                           }}
                           onMouseEnter={() => setHighlightedIndex(-1)}
                           className={cn(
-                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[6px] font-medium font-sans',
-                            size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                            'hover:bg-[var(--border-1)]',
+                            'relative flex cursor-pointer select-none items-center rounded-sm px-1.5 font-medium font-sans',
+                            size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                            'hover-hover:bg-[var(--border-1)]',
                             !multiSelectValues?.length && 'bg-[var(--border-1)]'
                           )}
                         >
@@ -808,9 +819,9 @@ const Combobox = memo(
                             }}
                             onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
                             className={cn(
-                              'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
-                              size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                              'hover:bg-[var(--border-1)]',
+                              'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-medium font-sans',
+                              size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                              'hover-hover:bg-[var(--border-1)]',
                               (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
                               option.disabled && 'cursor-not-allowed opacity-50'
                             )}
@@ -825,7 +836,7 @@ const Combobox = memo(
                             </span>
                             {option.suffixElement}
                             {multiSelect && isSelected && (
-                              <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                              <Check className='ml-2 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
                             )}
                           </div>
                         )
diff --git a/apps/sim/components/emcn/components/date-picker/date-picker.tsx b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
index 0a597dec58..9ccbf7d45a 100644
--- a/apps/sim/components/emcn/components/date-picker/date-picker.tsx
+++ b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
@@ -40,15 +40,15 @@ import { cn } from '@/lib/core/utils/cn'
  * Matches the combobox and input styling patterns.
  */
 const datePickerVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]',
   {
     variants: {
       variant: {
         default: '',
       },
       size: {
-        default: 'py-[6px] text-sm',
-        sm: 'py-[5px] text-[12px]',
+        default: 'py-1.5 text-sm',
+        sm: 'py-[5px] text-caption',
       },
     },
     defaultVariants: {
@@ -381,11 +381,11 @@ function CalendarMonth({
   return (
     <div className='flex flex-col'>
       {/* Calendar Header */}
-      <div className='flex items-center justify-between border-[var(--border-1)] border-b px-[12px] py-[10px]'>
+      <div className='flex items-center justify-between border-[var(--border-1)] border-b px-3 py-2.5'>
         {showNavigation === 'left' || showNavigation === 'both' ? (
           <button
             type='button'
-            className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+            className='flex h-[24px] w-[24px] items-center justify-center rounded-sm text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
             onClick={onPrevMonth}
           >
             <ChevronLeft className='h-4 w-4' />
@@ -393,13 +393,13 @@ function CalendarMonth({
         ) : (
           <div className='h-[24px] w-[24px]' />
         )}
-        <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+        <span className='font-medium text-[var(--text-primary)] text-small'>
           {MONTHS[viewMonth]} {viewYear}
         </span>
         {showNavigation === 'right' || showNavigation === 'both' ? (
           <button
             type='button'
-            className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+            className='flex h-[24px] w-[24px] items-center justify-center rounded-sm text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
             onClick={onNextMonth}
           >
             <ChevronRight className='h-4 w-4' />
@@ -410,11 +410,11 @@ function CalendarMonth({
       </div>
 
       {/* Day Headers */}
-      <div className='grid grid-cols-7 px-[8px] pt-[8px]'>
+      <div className='grid grid-cols-7 px-2 pt-2'>
         {DAYS.map((day) => (
           <div
             key={day}
-            className='flex h-[28px] items-center justify-center text-[11px] text-[var(--text-muted)]'
+            className='flex h-[28px] items-center justify-center text-[var(--text-muted)] text-xs'
           >
             {day}
           </div>
@@ -422,7 +422,7 @@ function CalendarMonth({
       </div>
 
       {/* Calendar Grid */}
-      <div className='grid grid-cols-7 px-[8px] pb-[8px]'>
+      <div className='grid grid-cols-7 px-2 pb-2'>
         {calendarDays.map((day, index) => {
           const inRange = day !== null && isInRange(day)
           const isStart = day !== null && isRangeStart(day)
@@ -440,25 +440,25 @@ function CalendarMonth({
                 isRangeMode && isStart && 'before:left-[2px] before:rounded-l-[4px]',
                 isRangeMode && isEnd && 'before:right-[2px] before:rounded-r-[4px]',
                 isRangeMode && isStart && !rangeEnd && 'before:right-[2px] before:rounded-r-[4px]',
-                isRangeMode && isStart && isEnd && 'before:rounded-[4px]'
+                isRangeMode && isStart && isEnd && 'before:rounded-sm'
               )}
             >
               {day !== null && (
                 <button
                   type='button'
                   className={cn(
-                    'relative z-10 flex h-[28px] w-[28px] items-center justify-center rounded-[4px] text-[12px] transition-colors',
+                    'relative z-10 flex h-[28px] w-[28px] items-center justify-center rounded-sm text-caption transition-colors',
                     isRangeMode
                       ? isStart || isEnd
                         ? 'bg-[var(--brand-secondary)] text-[var(--bg)]'
                         : inRange
-                          ? 'text-[var(--text-primary)] hover:bg-[#60a5fa]/40'
-                          : 'text-[var(--text-primary)] hover:bg-[var(--surface-5)]'
+                          ? 'text-[var(--text-primary)] hover-hover:bg-[#60a5fa]/40'
+                          : 'text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)]'
                       : isSelected(day)
                         ? 'bg-[var(--brand-secondary)] text-[var(--bg)]'
                         : isToday(day)
                           ? 'bg-[var(--surface-5)] text-[var(--text-primary)]'
-                          : 'text-[var(--text-primary)] hover:bg-[var(--surface-5)]'
+                          : 'text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)]'
                   )}
                   onClick={() => onSelectDate(day)}
                   onMouseEnter={() => onHoverDate?.(day)}
@@ -755,17 +755,17 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       </div>
 
       {/* Actions */}
-      <div className='flex items-center justify-between border-[var(--border-1)] border-t px-[12px] py-[8px]'>
+      <div className='flex items-center justify-between border-[var(--border-1)] border-t px-3 py-2'>
         <Button
           variant='ghost'
           size='sm'
           onClick={handleClearRange}
           disabled={!rangeStart && !rangeEnd}
-          className='text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+          className='text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]'
         >
           Clear
         </Button>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <Button variant='outline' size='sm' onClick={handleCancelRange}>
             Cancel
           </Button>
@@ -787,7 +787,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       />
 
       {/* Today Button */}
-      <div className='border-[var(--border-1)] border-t px-[8px] py-[8px]'>
+      <div className='border-[var(--border-1)] border-t px-2 py-2'>
         <Button variant='active' className='w-full' onClick={handleSelectToday}>
           Today
         </Button>
@@ -802,7 +802,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       sideOffset={4}
       collisionPadding={16}
       className={cn(
-        'rounded-[6px] border border-[var(--border-1)] p-0',
+        'rounded-md border border-[var(--border-1)] p-0',
         isRangeMode ? 'w-auto' : 'w-[280px]'
       )}
     >
@@ -815,7 +815,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       <div
         ref={ref}
         className={cn(
-          'rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-2)]',
+          'rounded-md border border-[var(--border-1)] bg-[var(--surface-2)]',
           isRangeMode ? 'w-auto' : 'w-[280px]',
           className
         )}
@@ -861,7 +861,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
             </span>
             <ChevronDown
               className={cn(
-                'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
+                'ml-2 h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
                 open && 'rotate-180'
               )}
             />
diff --git a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
index ba3829a5af..787820b51b 100644
--- a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
+++ b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
@@ -26,7 +26,7 @@ import { Check, ChevronRight, Circle, Search } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 
 const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in'
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -38,7 +38,7 @@ const DropdownMenuGroup = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Group
     ref={ref}
-    className={cn('flex flex-col gap-[2px]', className)}
+    className={cn('flex flex-col gap-0.5', className)}
     {...props}
   />
 ))
@@ -59,8 +59,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex min-w-0 cursor-default select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)] [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
-      inset && 'pl-[28px]',
+      'flex min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] px-2 py-2 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)] [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
+      inset && 'pl-7',
       className
     )}
     {...props}
@@ -79,7 +79,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       ANIMATION_CLASSES,
-      'z-50 max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm',
+      'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[280px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm',
       className
     )}
     {...props}
@@ -97,7 +97,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         ANIMATION_CLASSES,
-        'z-50 max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm',
+        'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm',
         className
       )}
       {...props}
@@ -115,8 +115,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex min-w-0 cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
-      inset && 'pl-[28px]',
+      'relative flex min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
+      inset && 'pl-7',
       className
     )}
     {...props}
@@ -131,13 +131,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-[8px] pl-[28px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-2 pl-7 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className='absolute left-[8px] flex h-[14px] w-[14px] items-center justify-center'>
+    <span className='absolute left-2 flex h-[14px] w-[14px] items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className='h-[14px] w-[14px]' />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -154,12 +154,12 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-[8px] pl-[28px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-2 pl-7 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
   >
-    <span className='absolute left-[8px] flex h-[14px] w-[14px] items-center justify-center'>
+    <span className='absolute left-2 flex h-[14px] w-[14px] items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className='h-[6px] w-[6px] fill-current' />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -178,8 +178,8 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      'px-[8px] py-[5px] font-medium text-[11px] text-[var(--text-tertiary)]',
-      inset && 'pl-[28px]',
+      'px-2 py-1.5 font-medium text-[var(--text-tertiary)] text-xs',
+      inset && 'pl-7',
       className
     )}
     {...props}
@@ -193,7 +193,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-[6px] my-[6px] h-px bg-[var(--border-1)]', className)}
+    className={cn('-mx-1.5 my-1.5 h-px bg-[var(--border-1)]', className)}
     {...props}
   />
 ))
@@ -221,7 +221,7 @@ const DropdownMenuSearchInput = React.forwardRef<
   )
 
   return (
-    <div className='mx-[2px] mt-[2px] mb-[2px] flex shrink-0 items-center gap-[8px] rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] dark:bg-[var(--surface-4)]'>
+    <div className='mx-0.5 mt-0.5 mb-0.5 flex shrink-0 items-center gap-2 rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
       <Search className='h-[14px] w-[14px] shrink-0 text-[var(--text-muted)]' />
       <input
         ref={setRefs}
@@ -230,7 +230,7 @@ const DropdownMenuSearchInput = React.forwardRef<
           onKeyDown?.(e)
         }}
         className={cn(
-          'w-full bg-transparent py-[4px] font-medium text-[12px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none',
+          'w-full bg-transparent py-1 font-medium text-[var(--text-primary)] text-caption outline-none placeholder:text-[var(--text-muted)] focus:outline-none',
           className
         )}
         {...props}
@@ -243,7 +243,7 @@ DropdownMenuSearchInput.displayName = 'DropdownMenuSearchInput'
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn('ml-auto text-[11px] text-[var(--text-muted)] tracking-widest', className)}
+      className={cn('ml-auto text-[var(--text-muted)] text-xs tracking-widest', className)}
       {...props}
     />
   )
diff --git a/apps/sim/components/emcn/components/expandable/expandable.tsx b/apps/sim/components/emcn/components/expandable/expandable.tsx
new file mode 100644
index 0000000000..28d70b5dfc
--- /dev/null
+++ b/apps/sim/components/emcn/components/expandable/expandable.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import { cn } from '@/lib/core/utils/cn'
+
+/**
+ * Expandable root that controls the open/closed state.
+ * Wraps Radix Collapsible.Root with the `open` prop mapped from `expanded`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * <button onClick={() => setOpen(!open)}>Toggle</button>
+ * <Expandable expanded={open}>
+ *   <ExpandableContent>
+ *     <p>This content animates in/out smoothly.</p>
+ *   </ExpandableContent>
+ * </Expandable>
+ * ```
+ */
+interface ExpandableProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>, 'open'> {
+  /** Whether the content is expanded */
+  expanded: boolean
+}
+
+const Expandable = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Root>,
+  ExpandableProps
+>(({ expanded, className, ...props }, ref) => (
+  <CollapsiblePrimitive.Root
+    ref={ref}
+    open={expanded}
+    className={cn('w-full', className)}
+    {...props}
+  />
+))
+Expandable.displayName = 'Expandable'
+
+/**
+ * Animated content container for the Expandable.
+ * Uses Radix Collapsible.Content with CSS height animation via
+ * `--radix-collapsible-content-height` custom property.
+ */
+const ExpandableContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <CollapsiblePrimitive.Content
+    ref={ref}
+    className={cn(
+      'overflow-hidden transition-[height] duration-300 ease-in-out data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </CollapsiblePrimitive.Content>
+))
+ExpandableContent.displayName = 'ExpandableContent'
+
+export { Expandable, ExpandableContent }
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index 1d8afcef3f..f7a6fe5c82 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -56,6 +56,7 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from './dropdown-menu/dropdown-menu'
+export { Expandable, ExpandableContent } from './expandable/expandable'
 export { FormField, type FormFieldProps } from './form-field/form-field'
 export { Input, type InputProps, inputVariants } from './input/input'
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp'
diff --git a/apps/sim/components/emcn/components/input-otp/input-otp.tsx b/apps/sim/components/emcn/components/input-otp/input-otp.tsx
index 12edabec59..8951c41589 100644
--- a/apps/sim/components/emcn/components/input-otp/input-otp.tsx
+++ b/apps/sim/components/emcn/components/input-otp/input-otp.tsx
@@ -77,7 +77,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'relative flex h-12 w-12 items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] font-medium text-[var(--text-primary)] text-lg transition-colors',
+        'relative flex h-12 w-12 items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] font-medium text-[var(--text-primary)] text-lg transition-colors',
         isActive && 'z-10 border-[var(--text-muted)] ring-1 ring-[var(--text-muted)]',
         className
       )}
@@ -86,7 +86,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='h-6 w-px animate-caret-blink bg-[var(--text-primary)] duration-1000' />
+          <div className='h-6 w-px animate-caret-blink bg-[var(--text-primary)] duration-1000 motion-reduce:animate-none' />
         </div>
       )}
     </div>
diff --git a/apps/sim/components/emcn/components/input/input.tsx b/apps/sim/components/emcn/components/input/input.tsx
index 516e929315..b3649a34e8 100644
--- a/apps/sim/components/emcn/components/input/input.tsx
+++ b/apps/sim/components/emcn/components/input/input.tsx
@@ -26,7 +26,7 @@ import { cn } from '@/lib/core/utils/cn'
  * Currently supports a 'default' variant.
  */
 const inputVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/sim/components/emcn/components/label/label.tsx b/apps/sim/components/emcn/components/label/label.tsx
index a1e05d5c4a..aad8b54b38 100644
--- a/apps/sim/components/emcn/components/label/label.tsx
+++ b/apps/sim/components/emcn/components/label/label.tsx
@@ -25,7 +25,7 @@ function Label({ className, ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
       className={cn(
-        'inline-flex items-center font-medium text-[13px] text-[var(--text-primary)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        'inline-flex items-center font-medium text-[var(--text-primary)] text-small leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index d4f9269964..2932bb2d5c 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -48,14 +48,14 @@ import { Button } from '../button/button'
  * Mirrors the legacy `Modal` component to ensure consistent behavior.
  */
 const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
 /**
  * Modal content animation classes.
  * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects.
  */
 const CONTENT_ANIMATION_CLASSES =
-  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
+  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none'
 
 /**
  * Root modal component. Manages open state.
@@ -90,7 +90,7 @@ const ModalOverlay = React.forwardRef<
       <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-          'fixed inset-0 z-[500] bg-black/10 backdrop-blur-[2px]',
+          'fixed inset-0 z-[var(--z-modal)] bg-black/10 backdrop-blur-[2px]',
           ANIMATION_CLASSES,
           className
         )}
@@ -159,7 +159,7 @@ const ModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] z-[500] flex max-h-[84vh] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-[13px] ring-1 ring-foreground/10 duration-200',
+          'fixed top-[50%] z-[var(--z-modal)] flex max-h-[84vh] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-small ring-1 ring-foreground/10 duration-200',
           MODAL_SIZES[size],
           className
         )}
@@ -204,7 +204,10 @@ const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
         {children}
       </DialogPrimitive.Title>
       <DialogPrimitive.Close asChild>
-        <Button variant='ghost' className='h-[16px] w-[16px] flex-shrink-0 p-0'>
+        <Button
+          variant='ghost'
+          className='relative h-[16px] w-[16px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
+        >
           <X className='h-[16px] w-[16px]' />
           <span className='sr-only'>Close</span>
         </Button>
@@ -296,19 +299,19 @@ const ModalTabsList = React.forwardRef<
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        'relative flex gap-[16px] px-4 pt-1',
+        'relative flex gap-4 px-4 pt-1',
         disabled && 'pointer-events-none opacity-50',
         className
       )}
       {...props}
     >
-      <div ref={listRef} className='flex gap-[16px]'>
+      <div ref={listRef} className='flex gap-4'>
         {children}
       </div>
       <span
         className={cn(
           'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
-          ready && 'transition-all duration-200 ease-out'
+          ready ? 'opacity-100 transition-[left,width,opacity] duration-200 ease-out' : 'opacity-0'
         )}
         style={{ left: indicator.left, width: indicator.width }}
       />
@@ -328,8 +331,8 @@ const ModalTabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
-      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
+      'px-1 pb-2 font-medium text-[var(--text-secondary)] text-small transition-colors',
+      'hover-hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
       className
     )}
     {...props}
@@ -346,7 +349,7 @@ const ModalTabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn('pb-[10px]', className)} {...props} />
+  <TabsPrimitive.Content ref={ref} className={cn('pb-2.5', className)} {...props} />
 ))
 
 ModalTabsContent.displayName = 'ModalTabsContent'
@@ -370,7 +373,7 @@ const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={ref}
       className={cn(
-        'flex justify-end gap-2 rounded-b-xl border-t bg-muted/50 px-4 py-3',
+        'flex justify-end gap-2 rounded-b-xl border-[var(--border)] border-t bg-[color-mix(in_srgb,var(--surface-3)_50%,transparent)] px-4 py-3',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index f837325d30..9209a1c8be 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -67,25 +67,25 @@ type PopoverVariant = 'default' | 'secondary'
 const STYLES = {
   /** Base classes shared by all interactive items */
   itemBase:
-    'flex min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] font-medium disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed',
+    'flex min-w-0 cursor-pointer items-center gap-2 rounded-md px-1.5 font-medium disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed',
 
   /** Content container */
-  content: 'px-[6px] py-[6px] rounded-[6px]',
+  content: 'px-1.5 py-1.5 rounded-md',
 
   /** Size variants */
   size: {
-    sm: { item: 'h-[22px] text-[11px]', icon: 'h-3 w-3', section: 'px-[6px] py-[4px] text-[11px]' },
+    sm: { item: 'h-[22px] text-xs', icon: 'h-3 w-3', section: 'px-1.5 py-1 text-xs' },
     md: {
-      item: 'h-[26px] text-[12px]',
+      item: 'h-[26px] text-caption',
       icon: 'h-3.5 w-3.5',
-      section: 'px-[6px] py-[4px] text-[11px]',
+      section: 'px-1.5 py-1 text-xs',
     },
   } satisfies Record<PopoverSize, { item: string; icon: string; section: string }>,
 
   /** Color scheme variants */
   colorScheme: {
     default: {
-      text: 'text-[var(--text-primary)]',
+      text: 'text-[var(--text-body)]',
       section: 'text-[var(--text-tertiary)]',
       search: 'text-[var(--text-muted)]',
       searchInput: 'text-[var(--text-primary)] placeholder:text-[var(--text-muted)]',
@@ -98,8 +98,8 @@ const STYLES = {
       search: 'text-[var(--text-muted-inverse)] dark:text-[var(--text-muted)]',
       searchInput:
         'text-white placeholder:text-[var(--text-muted-inverse)] dark:text-[var(--text-primary)] dark:placeholder:text-[var(--text-muted)]',
-      content: 'bg-[#1b1b1b] text-white dark:bg-[var(--surface-3)] dark:text-foreground',
-      divider: 'border-[#363636] dark:border-[var(--border-1)]',
+      content: 'bg-[var(--bg)] text-white dark:bg-[var(--surface-3)] dark:text-foreground',
+      divider: 'border-[var(--surface-5)] dark:border-[var(--border-1)]',
     },
   } satisfies Record<
     PopoverColorScheme,
@@ -116,19 +116,19 @@ const STYLES = {
   /** Interactive state styles: default, secondary (brand), inverted (dark bg in light mode) */
   states: {
     default: {
-      active: 'bg-[var(--border-1)] text-[var(--text-primary)] [&_svg]:text-[var(--text-primary)]',
-      hover:
-        'hover:bg-[var(--border-1)] hover:text-[var(--text-primary)] hover:[&_svg]:text-[var(--text-primary)]',
+      active: 'bg-[var(--border-1)]',
+      hover: 'hover-hover:bg-[var(--border-1)]',
     },
     secondary: {
       active: 'bg-[var(--brand-secondary)] text-white [&_svg]:text-white',
-      hover: 'hover:bg-[var(--brand-secondary)] hover:text-white hover:[&_svg]:text-white',
+      hover:
+        'hover-hover:bg-[var(--brand-secondary)] hover-hover:text-white hover-hover:[&_svg]:text-white',
     },
     inverted: {
       active:
-        'bg-[#363636] text-white [&_svg]:text-white dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]',
+        'bg-[var(--surface-5)] text-white [&_svg]:text-white dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]',
       hover:
-        'hover:bg-[#363636] hover:text-white hover:[&_svg]:text-white dark:hover:bg-[var(--surface-5)] dark:hover:text-[var(--text-primary)] dark:hover:[&_svg]:text-[var(--text-primary)]',
+        'hover-hover:bg-[var(--surface-5)] hover-hover:text-white hover-hover:[&_svg]:text-white dark:hover-hover:bg-[var(--surface-5)] dark:hover-hover:text-[var(--text-primary)] dark:hover-hover:[&_svg]:text-[var(--text-primary)]',
     },
   },
 } as const
@@ -606,7 +606,7 @@ const PopoverContent = React.forwardRef<
         onCloseAutoFocus={handleCloseAutoFocus}
         {...restProps}
         className={cn(
-          'z-[10000200] flex flex-col outline-none will-change-transform',
+          'z-[var(--z-popover)] flex flex-col outline-none',
           showArrow ? 'overflow-visible' : 'overflow-auto',
           STYLES.colorScheme[colorScheme].content,
           STYLES.content,
@@ -630,7 +630,10 @@ const PopoverContent = React.forwardRef<
         }}
       >
         {showArrow ? (
-          <div data-popover-scroll className='min-h-0 flex-1 overflow-auto'>
+          <div
+            className='flex flex-1 flex-col overflow-auto'
+            style={{ maxHeight: `${maxHeight || 400}px` }}
+          >
             {children}
           </div>
         ) : (
@@ -647,7 +650,7 @@ const PopoverContent = React.forwardRef<
                 arrowClassName ??
                 cn(
                   colorScheme === 'inverted'
-                    ? 'fill-[#242424] stroke-[#363636] dark:fill-[var(--surface-3)] dark:stroke-[var(--border-1)]'
+                    ? 'fill-[#242424] stroke-[var(--surface-5)] dark:fill-[var(--surface-3)] dark:stroke-[var(--border-1)]'
                     : 'fill-[var(--surface-3)] stroke-[var(--border-1)] dark:fill-[var(--surface-3)]'
                 )
               }
@@ -678,7 +681,7 @@ const PopoverScrollArea = React.forwardRef<HTMLDivElement, PopoverScrollAreaProp
     <div
       className={cn(
         'min-h-0 overflow-auto overscroll-contain',
-        '[&>div:has([data-popover-section]):not(:first-child)]:mt-[6px]',
+        '[&>div:has([data-popover-section]):not(:first-child)]:mt-1.5',
         className
       )}
       ref={ref}
@@ -791,7 +794,7 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
           STYLES.colorScheme[colorScheme].text,
           STYLES.size[size].item,
           getItemStateClasses(variant, colorScheme, !!isActive),
-          suppressHover && 'hover:!bg-transparent',
+          suppressHover && 'hover-hover:!bg-transparent',
           disabled && 'pointer-events-none cursor-not-allowed opacity-50',
           className
         )}
@@ -830,7 +833,7 @@ const PopoverSection = React.forwardRef<HTMLDivElement, PopoverSectionProps>(
     return (
       <div
         className={cn(
-          'mt-[6px] min-w-0 font-medium first:mt-0 first:pt-0',
+          'mt-1.5 min-w-0 font-medium first:mt-0 first:pt-0',
           STYLES.colorScheme[colorScheme].section,
           STYLES.size[size].section,
           className
@@ -985,7 +988,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
             STYLES.colorScheme[colorScheme].text,
             STYLES.size[size].item,
             getItemStateClasses(variant, colorScheme, isActive || isHoverOpen),
-            suppressHover && 'hover:!bg-transparent',
+            suppressHover && 'hover-hover:!bg-transparent',
             className
           )}
           role='menuitem'
@@ -1007,7 +1010,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
           createPortal(
             <DismissableLayerBranch
               className={cn(
-                'fixed z-[10000201] min-w-[120px]',
+                'fixed z-[calc(var(--z-popover)+1)] min-w-[120px]',
                 STYLES.content,
                 STYLES.colorScheme[colorScheme].content,
                 'shadow-lg'
@@ -1139,7 +1142,7 @@ const PopoverSearch = React.forwardRef<HTMLDivElement, PopoverSearchProps>(
     }, [setSearchQuery, onValueChange])
 
     return (
-      <div ref={ref} className={cn('flex items-center px-[8px] py-[6px]', className)} {...props}>
+      <div ref={ref} className={cn('flex items-center px-2 py-1.5', className)} {...props}>
         <Search
           className={cn(
             'mr-2 shrink-0',
@@ -1152,7 +1155,7 @@ const PopoverSearch = React.forwardRef<HTMLDivElement, PopoverSearchProps>(
           className={cn(
             'w-full bg-transparent font-medium focus:outline-none',
             STYLES.colorScheme[colorScheme].searchInput,
-            size === 'sm' ? 'text-[11px]' : 'text-[12px]'
+            size === 'sm' ? 'text-xs' : 'text-caption'
           )}
           placeholder={placeholder}
           value={searchQuery}
@@ -1183,7 +1186,7 @@ const PopoverDivider = React.forwardRef<HTMLDivElement, PopoverDividerProps>(
     return (
       <div
         ref={ref}
-        className={cn('my-[6px] border-t', STYLES.colorScheme[colorScheme].divider, className)}
+        className={cn('my-1.5 border-t', STYLES.colorScheme[colorScheme].divider, className)}
         role='separator'
         {...props}
       />
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
index 0eada188ff..9ed6172c27 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -33,10 +33,10 @@ import { Button } from '../button/button'
 import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal/modal'
 
 const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
 const CONTENT_ANIMATION_CLASSES =
-  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
+  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none'
 
 /**
  * Root sidebar modal component.
@@ -75,7 +75,7 @@ const SModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] z-[500] flex h-[min(calc(100vh-8rem),900px)] min-h-[400px] w-[min(calc(100vw-8rem),1080px)] min-w-[520px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          'fixed top-[50%] z-[var(--z-modal)] flex h-[min(calc(100vh-8rem),900px)] min-h-[400px] w-[min(calc(100vw-8rem),1080px)] min-w-[520px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-lg border bg-[var(--bg)] shadow-sm duration-200',
           className
         )}
         style={{
@@ -112,7 +112,7 @@ const SModalSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex min-h-0 w-[166px] flex-col overflow-y-auto py-[12px]', className)}
+      className={cn('flex min-h-0 w-[166px] flex-col overflow-y-auto py-3', className)}
       {...props}
     />
   )
@@ -127,10 +127,7 @@ const SModalSidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttribute
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        'mb-[16px] px-[12px] font-medium text-[16px] text-[var(--text-primary)]',
-        className
-      )}
+      className={cn('mb-4 px-3 font-medium text-[var(--text-primary)] text-md', className)}
       {...props}
     />
   )
@@ -143,11 +140,7 @@ SModalSidebarHeader.displayName = 'SModalSidebarHeader'
  */
 const SModalSidebarSection = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex flex-col gap-[4px] px-[12px] [&+&]:mt-[12px]', className)}
-      {...props}
-    />
+    <div ref={ref} className={cn('flex flex-col gap-1 px-3 [&+&]:mt-3', className)} {...props} />
   )
 )
 
@@ -162,7 +155,7 @@ const SModalSidebarSectionTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('mb-[2px] font-medium text-[12px] text-[var(--text-muted)]', className)}
+    className={cn('mb-0.5 font-medium text-[var(--text-muted)] text-caption', className)}
     {...props}
   />
 ))
@@ -190,9 +183,9 @@ function SModalSidebarItem({
     <Button
       variant={active ? 'active' : 'ghost'}
       className={cn(
-        'w-full justify-start gap-[8px] rounded-[6px] border-0 text-[13px]',
+        'w-full justify-start gap-2 rounded-md border-0 text-small',
         !active &&
-          'text-[var(--text-tertiary)] hover:bg-[var(--surface-6)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--border)]',
+          'text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-6)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--border)]',
         className
       )}
       {...props}
@@ -215,7 +208,7 @@ const SModalMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
     <div
       ref={ref}
       className={cn(
-        'flex min-w-0 flex-1 flex-col gap-[16px] overflow-hidden rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
+        'flex min-w-0 flex-1 flex-col gap-4 overflow-hidden rounded-lg border-l bg-[var(--surface-2)] p-3.5',
         className
       )}
       {...props}
@@ -231,9 +224,12 @@ SModalMain.displayName = 'SModalMain'
 const SModalMainHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => (
     <div ref={ref} className={cn('flex items-center justify-between', className)} {...props}>
-      <span className='font-base text-[14px] text-[var(--text-muted)]'>{children}</span>
+      <span className='font-base text-[var(--text-muted)] text-sm'>{children}</span>
       <DialogPrimitive.Close asChild>
-        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
+        <Button
+          variant='ghost'
+          className='relative h-[16px] w-[16px] p-0 before:absolute before:inset-[-14px] before:content-[""]'
+        >
           <X className='h-[16px] w-[16px]' />
           <span className='sr-only'>Close</span>
         </Button>
@@ -316,19 +312,19 @@ const SModalTabsList = React.forwardRef<
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        'relative flex gap-[16px] px-4',
+        'relative flex gap-4 px-4',
         disabled && 'pointer-events-none opacity-50',
         className
       )}
       {...props}
     >
-      <div ref={listRef} className='flex gap-[16px]'>
+      <div ref={listRef} className='flex gap-4'>
         {children}
       </div>
       <span
         className={cn(
           'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
-          ready && 'transition-all duration-200 ease-out'
+          ready ? 'opacity-100 transition-[left,width,opacity] duration-200 ease-out' : 'opacity-0'
         )}
         style={{ left: indicator.left, width: indicator.width }}
       />
@@ -348,8 +344,8 @@ const SModalTabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
-      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
+      'px-1 pb-2 font-medium text-[var(--text-secondary)] text-small transition-colors',
+      'hover-hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
       className
     )}
     {...props}
@@ -365,7 +361,7 @@ const SModalTabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn('pb-[10px]', className)} {...props} />
+  <TabsPrimitive.Content ref={ref} className={cn('pb-2.5', className)} {...props} />
 ))
 
 SModalTabsContent.displayName = 'SModalTabsContent'
@@ -379,7 +375,7 @@ const SModalTabsBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
     <div
       ref={ref}
       className={cn(
-        'min-h-0 flex-1 overflow-y-auto border-[var(--border)] border-t pt-[10px]',
+        'min-h-0 flex-1 overflow-y-auto border-[var(--border)] border-t pt-2.5',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/skeleton/skeleton.tsx b/apps/sim/components/emcn/components/skeleton/skeleton.tsx
index 59a4393d20..7dbee5edc0 100644
--- a/apps/sim/components/emcn/components/skeleton/skeleton.tsx
+++ b/apps/sim/components/emcn/components/skeleton/skeleton.tsx
@@ -7,7 +7,10 @@ import { cn } from '@/lib/core/utils/cn'
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-[var(--surface-active)]', className)}
+      className={cn(
+        'animate-pulse rounded-md bg-[var(--surface-active)] motion-reduce:animate-none',
+        className
+      )}
       {...props}
     />
   )
diff --git a/apps/sim/components/emcn/components/slider/slider.tsx b/apps/sim/components/emcn/components/slider/slider.tsx
index 71a84a9120..021fe9c056 100644
--- a/apps/sim/components/emcn/components/slider/slider.tsx
+++ b/apps/sim/components/emcn/components/slider/slider.tsx
@@ -30,7 +30,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors'>
         <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className='block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors focus-visible:outline-none' />
+      <SliderPrimitive.Thumb className='relative block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
     </SliderPrimitive.Root>
   )
 )
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
index c61ae0e69a..0db43d0702 100644
--- a/apps/sim/components/emcn/components/switch/switch.tsx
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -16,7 +16,7 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors focus-visible:outline-none data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/table/table.tsx b/apps/sim/components/emcn/components/table/table.tsx
index d5f3c996a9..5b41806316 100644
--- a/apps/sim/components/emcn/components/table/table.tsx
+++ b/apps/sim/components/emcn/components/table/table.tsx
@@ -25,7 +25,7 @@ import { cn } from '@/lib/core/utils/cn'
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
     <div className='relative w-full overflow-auto'>
-      <table ref={ref} className={cn('w-full caption-bottom text-[13px]', className)} {...props} />
+      <table ref={ref} className={cn('w-full caption-bottom text-small', className)} {...props} />
     </div>
   )
 )
@@ -54,7 +54,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'border-t bg-[var(--surface-3)]/50 font-medium [&>tr]:last:border-b-0',
+      'border-t bg-[color-mix(in_srgb,var(--surface-3)_50%,transparent)] font-medium [&>tr]:last:border-b-0',
       className
     )}
     {...props}
@@ -80,7 +80,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-[12px] py-[8px] text-left align-middle font-medium text-[var(--text-secondary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'h-10 px-3 py-2 text-left align-middle font-medium text-[var(--text-secondary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
@@ -95,7 +95,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'px-[12px] py-[8px] align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'px-3 py-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
diff --git a/apps/sim/components/emcn/components/tag-input/tag-input.tsx b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
index 461f5e1013..ad1f59f46b 100644
--- a/apps/sim/components/emcn/components/tag-input/tag-input.tsx
+++ b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
@@ -49,15 +49,14 @@ import { cn } from '@/lib/core/utils/cn'
  * Uses colored badge-style variants (blue for valid, red for invalid).
  */
 const tagVariants = cva(
-  'flex w-auto cursor-default items-center gap-[3px] rounded-[4px] px-[4px] font-medium font-sans text-[13px] leading-[20px] transition-colors',
+  'flex w-auto cursor-default items-center gap-[3px] rounded-sm px-1 font-medium font-sans text-small leading-[20px] transition-colors',
   {
     variants: {
       variant: {
-        default: 'bg-[#bfdbfe] text-[#1d4ed8] dark:bg-[rgba(59,130,246,0.2)] dark:text-[#93c5fd]',
+        default: 'bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]',
         secondary:
-          'border border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]',
-        invalid:
-          'bg-[#fecaca] text-[var(--text-error)] dark:bg-[#551a1a] dark:text-[var(--text-error)]',
+          'border border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
+        invalid: 'bg-[var(--badge-error-bg)] text-[var(--text-error)]',
       },
     },
     defaultVariants: {
@@ -102,16 +101,16 @@ const Tag = React.memo(function Tag({
           type='button'
           onClick={onRemove}
           className={cn(
-            'flex-shrink-0 opacity-80 transition-opacity hover:opacity-100 focus:outline-none',
+            'relative flex-shrink-0 opacity-80 transition-opacity before:absolute before:inset-[-8px] before:content-[""] hover-hover:opacity-100 focus:outline-none',
             variant === 'invalid'
               ? 'text-[var(--text-error)]'
               : variant === 'secondary'
                 ? 'text-[var(--text-tertiary)]'
-                : 'text-[#1d4ed8] dark:text-[#93c5fd]'
+                : 'text-[var(--badge-blue-text)]'
           )}
           aria-label={`Remove ${value}`}
         >
-          <X className='h-[12px] w-[12px] translate-y-[0.5px]' />
+          <X className='h-3 w-3 translate-y-[0.5px]' />
         </button>
       )}
     </div>
@@ -123,7 +122,7 @@ const Tag = React.memo(function Tag({
  * Matches the Input component styling exactly for consistent height.
  */
 const tagInputVariants = cva(
-  'scrollbar-hide flex w-full cursor-text flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] transition-colors focus-within:outline-none dark:bg-[var(--surface-5)]',
+  'scrollbar-hide flex w-full cursor-text flex-wrap items-center gap-x-2 gap-y-1 overflow-y-auto rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 transition-colors focus-within:outline-none dark:bg-[var(--surface-5)]',
   {
     variants: {
       variant: {
@@ -382,7 +381,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           tagInputVariants({ variant }),
           maxHeight,
           'relative',
-          fileInputEnabled && 'pr-[28px]',
+          fileInputEnabled && 'pr-7',
           isDragging && 'border-[var(--border)] border-dashed bg-[var(--surface-5)]',
           className
         )}
@@ -401,8 +400,8 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           />
         )}
         {isDragging && (
-          <div className='absolute inset-0 flex items-center justify-center rounded-[4px] bg-[var(--surface-5)]/90'>
-            <span className='text-[13px] text-[var(--text-tertiary)]'>Drop file here</span>
+          <div className='absolute inset-0 flex items-center justify-center rounded-sm bg-[color-mix(in_srgb,var(--surface-5)_90%,transparent)]'>
+            <span className='text-[var(--text-tertiary)] text-small'>Drop file here</span>
           </div>
         )}
         {items.map((item, index) => (
@@ -419,13 +418,13 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           className={cn(
             'flex items-center',
             inputValue.trim() &&
-              cn(tagVariants({ variant: tagVariant }), 'gap-0 py-0 pr-0 pl-[4px] opacity-80')
+              cn(tagVariants({ variant: tagVariant }), 'gap-0 py-0 pr-0 pl-1 opacity-80')
           )}
         >
           <div className='relative inline-flex'>
             {inputValue.trim() && (
               <span
-                className='invisible whitespace-pre font-medium font-sans text-[13px] leading-[20px]'
+                className='invisible whitespace-pre font-medium font-sans text-small leading-[20px]'
                 aria-hidden='true'
               >
                 {inputValue}
@@ -449,7 +448,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
               className={cn(
                 'border-none bg-transparent font-medium font-sans outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50',
                 inputValue.trim()
-                  ? 'absolute top-0 left-0 h-full w-full p-0 text-[13px] text-inherit leading-[20px]'
+                  ? 'absolute top-0 left-0 h-full w-full p-0 text-inherit text-small leading-[20px]'
                   : 'w-auto min-w-0 p-0 text-foreground text-sm',
                 inputClassName
               )}
@@ -474,11 +473,11 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                   inputRef.current?.focus()
                 }
               }}
-              className='flex items-center px-[3px] opacity-80 transition-opacity hover:opacity-100 focus:outline-none'
+              className='relative flex items-center px-[3px] opacity-80 transition-opacity before:absolute before:inset-[-10px] before:content-[""] hover-hover:opacity-100 focus:outline-none'
               disabled={disabled}
               aria-label='Add tag'
             >
-              <Plus className='h-[12px] w-[12px]' />
+              <Plus className='h-3 w-3' />
             </button>
           )}
         </div>
@@ -491,10 +490,10 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                   e.stopPropagation()
                   fileInputRef.current?.click()
                 }}
-                className='absolute right-[8px] bottom-[9px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]'
+                className='-m-1.5 absolute right-2 bottom-[9px] p-1.5 text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-secondary)]'
                 aria-label={fileInputOptions?.tooltip ?? 'Upload file'}
               >
-                <FileIcon className='h-[14px] w-[14px]' strokeWidth={2} />
+                <FileIcon className='h-3.5 w-3.5' strokeWidth={2} />
               </button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx
index de56797c8e..a92cee7edf 100644
--- a/apps/sim/components/emcn/components/textarea/textarea.tsx
+++ b/apps/sim/components/emcn/components/textarea/textarea.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 const textareaVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/sim/components/emcn/components/time-picker/time-picker.tsx b/apps/sim/components/emcn/components/time-picker/time-picker.tsx
index 4bc776b347..a73ae17a67 100644
--- a/apps/sim/components/emcn/components/time-picker/time-picker.tsx
+++ b/apps/sim/components/emcn/components/time-picker/time-picker.tsx
@@ -40,15 +40,15 @@ import { cn } from '@/lib/core/utils/cn'
  * Matches the input and combobox styling patterns.
  */
 const timePickerVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)] transition-colors',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)] transition-colors',
   {
     variants: {
       variant: {
         default: '',
       },
       size: {
-        default: 'py-[6px] text-sm',
-        sm: 'py-[5px] text-[12px]',
+        default: 'py-1.5 text-sm',
+        sm: 'py-[5px] text-caption',
       },
     },
     defaultVariants: {
@@ -240,7 +240,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
               </span>
               <ChevronDown
                 className={cn(
-                  'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
+                  'ml-2 h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
                   open && 'rotate-180'
                 )}
               />
@@ -251,12 +251,12 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
             side='bottom'
             align='start'
             sideOffset={4}
-            className='w-auto rounded-[6px] border border-[var(--border-1)] p-[8px]'
+            className='w-auto rounded-md border border-[var(--border-1)] p-2'
           >
-            <div className='flex items-center gap-[6px]'>
+            <div className='flex items-center gap-1.5'>
               <input
                 ref={hourInputRef}
-                className='w-[40px] rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[5px] text-center font-medium font-sans text-[13px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none focus-visible:ring-0'
+                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-medium font-sans text-[var(--text-primary)] text-small outline-none transition-colors placeholder:text-[var(--text-muted)] focus-visible:border-[var(--text-muted)]'
                 value={hour}
                 onChange={handleHourChange}
                 onBlur={handleHourBlur}
@@ -266,9 +266,9 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
                 maxLength={2}
                 autoComplete='off'
               />
-              <span className='font-medium text-[13px] text-[var(--text-muted)]'>:</span>
+              <span className='font-medium text-[var(--text-muted)] text-small'>:</span>
               <input
-                className='w-[40px] rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[5px] text-center font-medium font-sans text-[13px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none focus-visible:ring-0'
+                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-medium font-sans text-[var(--text-primary)] text-small outline-none transition-colors placeholder:text-[var(--text-muted)] focus-visible:border-[var(--text-muted)]'
                 value={minute}
                 onChange={handleMinuteChange}
                 onBlur={handleMinuteBlur}
@@ -278,7 +278,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
                 maxLength={2}
                 autoComplete='off'
               />
-              <div className='ml-[2px] flex overflow-hidden rounded-[4px] border border-[var(--border-1)]'>
+              <div className='ml-0.5 flex overflow-hidden rounded-sm border border-[var(--border-1)]'>
                 {(['AM', 'PM'] as const).map((period) => (
                   <button
                     key={period}
@@ -288,10 +288,10 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
                       updateTime(undefined, undefined, period)
                     }}
                     className={cn(
-                      'px-[8px] py-[5px] font-medium font-sans text-[12px] transition-colors',
+                      'px-2 py-[5px] font-medium font-sans text-caption transition-colors',
                       ampm === period
                         ? 'bg-[var(--brand-secondary)] text-[var(--bg)]'
-                        : 'bg-[var(--surface-5)] text-[var(--text-secondary)] hover:bg-[var(--surface-7)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-5)]'
+                        : 'bg-[var(--surface-5)] text-[var(--text-secondary)] hover-hover:bg-[var(--surface-7)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--surface-5)]'
                     )}
                   >
                     {period}
diff --git a/apps/sim/components/emcn/components/toast/toast.tsx b/apps/sim/components/emcn/components/toast/toast.tsx
index e20334ef4e..e90acb9a59 100644
--- a/apps/sim/components/emcn/components/toast/toast.tsx
+++ b/apps/sim/components/emcn/components/toast/toast.tsx
@@ -14,7 +14,7 @@ import { X } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import { cn } from '@/lib/core/utils/cn'
 
-const AUTO_DISMISS_MS = 0
+const AUTO_DISMISS_MS = 5000
 const EXIT_ANIMATION_MS = 200
 const MAX_VISIBLE = 20
 
@@ -23,6 +23,12 @@ const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS
 
 type ToastVariant = 'default' | 'success' | 'error'
 
+const VARIANT_STYLES: Record<ToastVariant, string> = {
+  default: 'border-[var(--border)] bg-[var(--bg)]',
+  success: 'border-[var(--border)] bg-[var(--bg)]',
+  error: 'border-[var(--border)] bg-[var(--bg)]',
+}
+
 interface ToastAction {
   label: string
   onClick: () => void
@@ -31,6 +37,7 @@ interface ToastAction {
 interface ToastData {
   id: string
   message: string
+  description?: string
   variant: ToastVariant
   action?: ToastAction
   duration: number
@@ -38,6 +45,7 @@ interface ToastData {
 
 type ToastInput = {
   message: string
+  description?: string
   variant?: ToastVariant
   action?: ToastAction
   duration?: number
@@ -160,48 +168,52 @@ function ToastItem({ toast: t, onDismiss }: { toast: ToastData; onDismiss: (id:
       onMouseEnter={hasDuration ? handleMouseEnter : undefined}
       onMouseLeave={hasDuration ? handleMouseLeave : undefined}
       className={cn(
-        'pointer-events-auto w-[240px] overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm',
+        'pointer-events-auto flex w-[min(100vw-2rem,320px)] flex-col gap-2 overflow-hidden rounded-lg border px-3 py-2.5 shadow-md transition-[transform,opacity]',
+        VARIANT_STYLES[t.variant],
         exiting
-          ? 'animate-[toast-exit_200ms_ease-in_forwards]'
-          : 'animate-[toast-enter_200ms_ease-out_forwards]'
+          ? 'animate-[toast-exit_200ms_ease-in_forwards] motion-reduce:animate-none'
+          : 'animate-[toast-enter_200ms_ease-out_forwards] motion-reduce:animate-none'
       )}
     >
-      <div className='flex flex-col gap-[8px] p-[8px]'>
-        <div className='flex items-start gap-[8px]'>
-          <div className='line-clamp-2 min-w-0 flex-1 font-medium text-[12px] text-[var(--text-body)]'>
+      <div className='flex items-start gap-2'>
+        <div className='min-w-0 flex-1'>
+          <div className='line-clamp-2 font-medium text-[var(--text-body)] text-small leading-[18px]'>
             {t.variant === 'error' && (
-              <span className='mr-[8px] mb-[2px] inline-block h-[8px] w-[8px] rounded-[2px] bg-[var(--text-error)] align-middle' />
+              <span className='mr-2 mb-0.5 inline-block h-2 w-2 rounded-[2px] bg-[var(--text-error)] align-middle' />
             )}
             {t.variant === 'success' && (
-              <span className='mr-[8px] mb-[2px] inline-block h-[8px] w-[8px] rounded-[2px] bg-[var(--text-success)] align-middle' />
+              <span className='mr-2 mb-0.5 inline-block h-2 w-2 rounded-[2px] bg-[var(--text-success)] align-middle' />
             )}
             {t.message}
           </div>
-          <div className='flex shrink-0 items-start gap-[2px]'>
-            {t.duration > 0 && <CountdownRing duration={t.duration} />}
-            <button
-              type='button'
-              onClick={dismiss}
-              aria-label='Dismiss notification'
-              className='-m-[2px] shrink-0 rounded-[5px] p-[4px] hover:bg-[var(--surface-active)]'
-            >
-              <X className='h-[14px] w-[14px] text-[var(--text-icon)]' />
-            </button>
-          </div>
+          {t.description ? (
+            <p className='mt-0.5 text-caption leading-4 opacity-80'>{t.description}</p>
+          ) : null}
         </div>
-        {t.action && (
+        <div className='flex shrink-0 items-start gap-0.5'>
+          {t.duration > 0 ? <CountdownRing duration={t.duration} /> : null}
           <button
             type='button'
-            onClick={() => {
-              t.action!.onClick()
-              dismiss()
-            }}
-            className='w-full rounded-[5px] bg-[var(--surface-active)] px-[8px] py-[4px] font-medium text-[12px] hover:bg-[var(--surface-hover)]'
+            onClick={dismiss}
+            aria-label='Dismiss notification'
+            className='-m-0.5 relative shrink-0 rounded-sm p-1 text-[var(--text-icon)] before:absolute before:inset-[-8px] before:content-[""] hover:bg-[var(--surface-active)]'
           >
-            {t.action.label}
+            <X className='h-[14px] w-[14px]' />
           </button>
-        )}
+        </div>
       </div>
+      {t.action ? (
+        <button
+          type='button'
+          onClick={() => {
+            t.action!.onClick()
+            dismiss()
+          }}
+          className='w-full rounded-md bg-[var(--surface-active)] px-2 py-1 font-medium text-small hover:bg-[var(--surface-hover)]'
+        >
+          {t.action.label}
+        </button>
+      ) : null}
     </div>
   )
 }
@@ -228,6 +240,7 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
     const data: ToastData = {
       id,
       message: input.message,
+      description: input.description,
       variant: input.variant ?? 'default',
       action: input.action,
       duration: input.duration ?? AUTO_DISMISS_MS,
@@ -263,7 +276,7 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
           <div
             aria-live='polite'
             aria-label='Notifications'
-            className='pointer-events-none fixed right-[16px] bottom-[16px] z-[10000400] flex flex-col-reverse items-end gap-[8px]'
+            className='pointer-events-none fixed right-[16px] bottom-4 z-[var(--z-toast)] flex flex-col-reverse items-end gap-2'
           >
             {toasts.map((t) => (
               <ToastItem key={t.id} toast={t} onDismiss={dismissToast} />
diff --git a/apps/sim/components/emcn/components/tooltip/tooltip.tsx b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
index ab9012a357..75ca1b7acb 100644
--- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx
+++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
@@ -50,13 +50,13 @@ const Content = React.forwardRef<
       collisionPadding={8}
       avoidCollisions={true}
       className={cn(
-        'z-[10000300] max-w-[260px] rounded-[4px] bg-[#1b1b1b] px-[8px] py-[3.5px] font-base text-white text-xs shadow-sm dark:bg-[#fdfdfd] dark:text-black',
+        'z-[var(--z-tooltip)] max-w-[260px] rounded-[4px] bg-[#1b1b1b] px-2 py-[3.5px] font-base text-white text-xs shadow-sm dark:bg-[#fdfdfd] dark:text-black',
         className
       )}
       {...props}
     >
       {props.children}
-      <TooltipPrimitive.Arrow className='fill-[#1b1b1b] dark:fill-[#fdfdfd]' />
+      <TooltipPrimitive.Arrow className='fill-[var(--bg)] dark:fill-[#fdfdfd]' />
     </TooltipPrimitive.Content>
   </TooltipPrimitive.Portal>
 ))
@@ -82,7 +82,7 @@ interface ShortcutProps {
  * ```
  */
 const Shortcut = ({ keys, className, children }: ShortcutProps) => (
-  <span className={cn('flex items-center gap-[8px]', className)}>
+  <span className={cn('flex items-center gap-2', className)}>
     {children && <span>{children}</span>}
     <span className='opacity-70'>{keys}</span>
   </span>
@@ -122,9 +122,7 @@ const Preview = ({ src, alt = '', width = 240, height, loop = true, className }:
   const isVideo = VIDEO_EXTENSIONS.some((ext) => pathname.endsWith(ext))
 
   return (
-    <div
-      className={cn('-mx-[8px] -mb-[3.5px] mt-[4px] overflow-hidden rounded-b-[4px]', className)}
-    >
+    <div className={cn('-mx-2 -mb-[3.5px] mt-1 overflow-hidden rounded-b-[4px]', className)}>
       {isVideo ? (
         <video
           src={src}
diff --git a/apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx b/apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx
index a6af693464..678d1749ba 100644
--- a/apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx
+++ b/apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx
@@ -67,7 +67,7 @@ function TourCard({
         <span className='text-[11px] text-[var(--text-muted)] [font-variant-numeric:tabular-nums]'>
           {step} / {totalSteps}
         </span>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <div className={cn(isFirst && 'invisible')}>
             <Button
               variant='default'
diff --git a/apps/sim/components/emcn/icons/animate/copy.module.css b/apps/sim/components/emcn/icons/animate/copy.module.css
index 7b652378d8..e3d52509b9 100644
--- a/apps/sim/components/emcn/icons/animate/copy.module.css
+++ b/apps/sim/components/emcn/icons/animate/copy.module.css
@@ -65,3 +65,10 @@
   animation: segment-cycle 2s ease-in-out infinite;
   transform-box: fill-box;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-copy-svg .rect-bottom-right,
+  .animated-copy-svg .rect-top-left {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/download.module.css b/apps/sim/components/emcn/icons/animate/download.module.css
index 0f279d3ff0..3c1cc6c140 100644
--- a/apps/sim/components/emcn/icons/animate/download.module.css
+++ b/apps/sim/components/emcn/icons/animate/download.module.css
@@ -20,3 +20,9 @@
   animation: arrow-pulse 1.5s ease-in-out infinite;
   transform-origin: center center;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-download-svg {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/layout.module.css b/apps/sim/components/emcn/icons/animate/layout.module.css
index 4230456a9e..364d4a3028 100644
--- a/apps/sim/components/emcn/icons/animate/layout.module.css
+++ b/apps/sim/components/emcn/icons/animate/layout.module.css
@@ -177,3 +177,12 @@
 .animated-layout-svg.clockwise .block-bottom-left {
   animation: move-bottom-left-cw 2.5s ease-in-out infinite;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-layout-svg .block-top-left,
+  .animated-layout-svg .block-top-right,
+  .animated-layout-svg .block-bottom-right,
+  .animated-layout-svg .block-bottom-left {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/loader.module.css b/apps/sim/components/emcn/icons/animate/loader.module.css
index c18e027f57..ebe4f368f5 100644
--- a/apps/sim/components/emcn/icons/animate/loader.module.css
+++ b/apps/sim/components/emcn/icons/animate/loader.module.css
@@ -18,3 +18,9 @@
   transform-origin: center center;
   will-change: transform;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-loader-svg {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/pills-ring.module.css b/apps/sim/components/emcn/icons/animate/pills-ring.module.css
index 20e46e6fd4..5ba8831729 100644
--- a/apps/sim/components/emcn/icons/animate/pills-ring.module.css
+++ b/apps/sim/components/emcn/icons/animate/pills-ring.module.css
@@ -20,3 +20,9 @@
   animation: pill-fade 1.2s ease-in-out infinite;
   will-change: opacity;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-pills-ring-svg .pill {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/arrow-down.tsx b/apps/sim/components/emcn/icons/arrow-down.tsx
index d419ea8962..e1cbbd8559 100644
--- a/apps/sim/components/emcn/icons/arrow-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-down.tsx
@@ -16,6 +16,7 @@ export function ArrowDown(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M4 11.25L10.25 17.5L16.5 11.25' />
diff --git a/apps/sim/components/emcn/icons/arrow-left.tsx b/apps/sim/components/emcn/icons/arrow-left.tsx
index adf57187cf..729fd5547a 100644
--- a/apps/sim/components/emcn/icons/arrow-left.tsx
+++ b/apps/sim/components/emcn/icons/arrow-left.tsx
@@ -16,6 +16,7 @@ export function ArrowLeft(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M9.25 4L3 10.25L9.25 16.5' />
diff --git a/apps/sim/components/emcn/icons/arrow-right.tsx b/apps/sim/components/emcn/icons/arrow-right.tsx
index 992adacd54..2d98246046 100644
--- a/apps/sim/components/emcn/icons/arrow-right.tsx
+++ b/apps/sim/components/emcn/icons/arrow-right.tsx
@@ -16,6 +16,7 @@ export function ArrowRight(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M11.25 4L17.5 10.25L11.25 16.5' />
diff --git a/apps/sim/components/emcn/icons/arrow-up-down.tsx b/apps/sim/components/emcn/icons/arrow-up-down.tsx
index 86729d1534..012511c209 100644
--- a/apps/sim/components/emcn/icons/arrow-up-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up-down.tsx
@@ -16,6 +16,7 @@ export function ArrowUpDown(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M1.5 8L5.5 4L9.5 8' />
diff --git a/apps/sim/components/emcn/icons/arrow-up.tsx b/apps/sim/components/emcn/icons/arrow-up.tsx
index 24430bd4bc..f4272c4fa4 100644
--- a/apps/sim/components/emcn/icons/arrow-up.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up.tsx
@@ -16,6 +16,7 @@ export function ArrowUp(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M4 9.25L10.25 3L16.5 9.25' />
diff --git a/apps/sim/components/emcn/icons/asterisk.tsx b/apps/sim/components/emcn/icons/asterisk.tsx
index e443ff6f34..d6bc5a5292 100644
--- a/apps/sim/components/emcn/icons/asterisk.tsx
+++ b/apps/sim/components/emcn/icons/asterisk.tsx
@@ -16,6 +16,7 @@ export function Asterisk(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 3V17.5' />
diff --git a/apps/sim/components/emcn/icons/bell.tsx b/apps/sim/components/emcn/icons/bell.tsx
index d9d4b0f2b9..ebbf72ad84 100644
--- a/apps/sim/components/emcn/icons/bell.tsx
+++ b/apps/sim/components/emcn/icons/bell.tsx
@@ -16,6 +16,7 @@ export function Bell(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M15.25 6.75C15.25 5.35761 14.6969 4.02226 13.7123 3.03769C12.7277 2.05312 11.3924 1.5 10 1.5C8.60761 1.5 7.27226 2.05312 6.28769 3.03769C5.30312 4.02226 4.75 5.35761 4.75 6.75C4.75 12.75 2.25 14.5 2.25 14.5H17.75C17.75 14.5 15.25 12.75 15.25 6.75Z' />
diff --git a/apps/sim/components/emcn/icons/blimp.tsx b/apps/sim/components/emcn/icons/blimp.tsx
index d361451ea9..8c3b34d750 100644
--- a/apps/sim/components/emcn/icons/blimp.tsx
+++ b/apps/sim/components/emcn/icons/blimp.tsx
@@ -15,6 +15,7 @@ export function Blimp(props: SVGProps<SVGSVGElement>) {
       strokeWidth='0.75'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/book-open.tsx b/apps/sim/components/emcn/icons/book-open.tsx
index 2981f290e8..f83e0922a4 100644
--- a/apps/sim/components/emcn/icons/book-open.tsx
+++ b/apps/sim/components/emcn/icons/book-open.tsx
@@ -16,6 +16,7 @@ export function BookOpen(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 2.75C0.75 2.75 3.25 0.75 6.25 0.75C9.25 0.75 10.25 2.75 10.25 2.75V18.75C10.25 18.75 9.25 17.25 6.25 17.25C3.25 17.25 0.75 18.75 0.75 18.75V2.75Z' />
diff --git a/apps/sim/components/emcn/icons/bubble-chat-close.tsx b/apps/sim/components/emcn/icons/bubble-chat-close.tsx
index a8792b2ab0..db8e7c2cf2 100644
--- a/apps/sim/components/emcn/icons/bubble-chat-close.tsx
+++ b/apps/sim/components/emcn/icons/bubble-chat-close.tsx
@@ -12,6 +12,7 @@ export function BubbleChatClose(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/bubble-chat-preview.tsx b/apps/sim/components/emcn/icons/bubble-chat-preview.tsx
index 54c6a7a1b1..b3eae3e1b2 100644
--- a/apps/sim/components/emcn/icons/bubble-chat-preview.tsx
+++ b/apps/sim/components/emcn/icons/bubble-chat-preview.tsx
@@ -12,6 +12,7 @@ export function BubbleChatPreview(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/bug.tsx b/apps/sim/components/emcn/icons/bug.tsx
index 912274a3f9..1f64918e47 100644
--- a/apps/sim/components/emcn/icons/bug.tsx
+++ b/apps/sim/components/emcn/icons/bug.tsx
@@ -16,6 +16,7 @@ export function Bug(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M6.25 4.75L4.25 2.75' />
diff --git a/apps/sim/components/emcn/icons/calendar.tsx b/apps/sim/components/emcn/icons/calendar.tsx
index d1b4c25d1a..d986f323d9 100644
--- a/apps/sim/components/emcn/icons/calendar.tsx
+++ b/apps/sim/components/emcn/icons/calendar.tsx
@@ -16,6 +16,7 @@ export function Calendar(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 5.25C0.75 3.86929 1.86929 2.75 3.25 2.75H17.25C18.6307 2.75 19.75 3.86929 19.75 5.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V5.25Z' />
diff --git a/apps/sim/components/emcn/icons/card.tsx b/apps/sim/components/emcn/icons/card.tsx
index 74d1c4ea8b..fe546a578b 100644
--- a/apps/sim/components/emcn/icons/card.tsx
+++ b/apps/sim/components/emcn/icons/card.tsx
@@ -12,6 +12,7 @@ export function Card(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 15 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/check.tsx b/apps/sim/components/emcn/icons/check.tsx
index bae60bf4b0..6d26915e20 100644
--- a/apps/sim/components/emcn/icons/check.tsx
+++ b/apps/sim/components/emcn/icons/check.tsx
@@ -16,6 +16,7 @@ export function Check(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M18.25 2.75L7.25 15.75L1.75 10.25' />
diff --git a/apps/sim/components/emcn/icons/chevron-down.tsx b/apps/sim/components/emcn/icons/chevron-down.tsx
index a52666136c..56dc176d2c 100644
--- a/apps/sim/components/emcn/icons/chevron-down.tsx
+++ b/apps/sim/components/emcn/icons/chevron-down.tsx
@@ -12,6 +12,7 @@ export function ChevronDown(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 10 6'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/clipboard-list.tsx b/apps/sim/components/emcn/icons/clipboard-list.tsx
index d5fd088ebc..5ca14380e7 100644
--- a/apps/sim/components/emcn/icons/clipboard-list.tsx
+++ b/apps/sim/components/emcn/icons/clipboard-list.tsx
@@ -16,6 +16,7 @@ export function ClipboardList(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.75 4.25C3.75 2.86929 4.86929 1.75 6.25 1.75H14.25C15.6307 1.75 16.75 2.86929 16.75 4.25V17.25C16.75 18.6307 15.6307 19.75 14.25 19.75H6.25C4.86929 19.75 3.75 18.6307 3.75 17.25V4.25Z' />
diff --git a/apps/sim/components/emcn/icons/columns2.tsx b/apps/sim/components/emcn/icons/columns2.tsx
index 5672efeb19..fb697639bc 100644
--- a/apps/sim/components/emcn/icons/columns2.tsx
+++ b/apps/sim/components/emcn/icons/columns2.tsx
@@ -16,6 +16,7 @@ export function Columns2(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/columns3.tsx b/apps/sim/components/emcn/icons/columns3.tsx
index d4213bf36d..9c041cef65 100644
--- a/apps/sim/components/emcn/icons/columns3.tsx
+++ b/apps/sim/components/emcn/icons/columns3.tsx
@@ -16,6 +16,7 @@ export function Columns3(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/connections.tsx b/apps/sim/components/emcn/icons/connections.tsx
index 5baed70040..a9d4d24841 100644
--- a/apps/sim/components/emcn/icons/connections.tsx
+++ b/apps/sim/components/emcn/icons/connections.tsx
@@ -12,6 +12,7 @@ export function Connections(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 13 13'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/copy.tsx b/apps/sim/components/emcn/icons/copy.tsx
index e331aab9c6..ee18707e53 100644
--- a/apps/sim/components/emcn/icons/copy.tsx
+++ b/apps/sim/components/emcn/icons/copy.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/copy.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface CopyProps extends SVGProps<SVGSVGElement> {
   /**
@@ -16,9 +17,7 @@ export interface CopyProps extends SVGProps<SVGSVGElement> {
  * @param props - SVG properties including className, animate, etc.
  */
 export function Copy({ animate = false, className, ...props }: CopyProps) {
-  const svgClassName = animate
-    ? `${styles['animated-copy-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-copy-svg'], className)
 
   return (
     <svg
@@ -32,6 +31,7 @@ export function Copy({ animate = false, className, ...props }: CopyProps) {
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <rect
diff --git a/apps/sim/components/emcn/icons/cursor.tsx b/apps/sim/components/emcn/icons/cursor.tsx
index 313731f0fd..039cbb7d0d 100644
--- a/apps/sim/components/emcn/icons/cursor.tsx
+++ b/apps/sim/components/emcn/icons/cursor.tsx
@@ -8,6 +8,7 @@ export function Cursor(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/database-x.tsx b/apps/sim/components/emcn/icons/database-x.tsx
index e6f955de8e..93a66829e0 100644
--- a/apps/sim/components/emcn/icons/database-x.tsx
+++ b/apps/sim/components/emcn/icons/database-x.tsx
@@ -16,6 +16,7 @@ export function DatabaseX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
diff --git a/apps/sim/components/emcn/icons/database.tsx b/apps/sim/components/emcn/icons/database.tsx
index ed1423016b..40d29d35d8 100644
--- a/apps/sim/components/emcn/icons/database.tsx
+++ b/apps/sim/components/emcn/icons/database.tsx
@@ -16,6 +16,7 @@ export function Database(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
diff --git a/apps/sim/components/emcn/icons/document-attachment.tsx b/apps/sim/components/emcn/icons/document-attachment.tsx
index 5b54d0e1fa..fea7b7f209 100644
--- a/apps/sim/components/emcn/icons/document-attachment.tsx
+++ b/apps/sim/components/emcn/icons/document-attachment.tsx
@@ -12,6 +12,7 @@ export function DocumentAttachment(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 13'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/download.tsx b/apps/sim/components/emcn/icons/download.tsx
index 74737dbd70..dc3418b194 100644
--- a/apps/sim/components/emcn/icons/download.tsx
+++ b/apps/sim/components/emcn/icons/download.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/download.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface DownloadProps extends SVGProps<SVGSVGElement> {
   /**
@@ -17,9 +18,7 @@ export interface DownloadProps extends SVGProps<SVGSVGElement> {
  * @param props - SVG properties including className, animate, etc.
  */
 export function Download({ animate = false, className, ...props }: DownloadProps) {
-  const svgClassName = animate
-    ? `${styles['animated-download-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-download-svg'], className)
 
   return (
     <svg
@@ -33,6 +32,7 @@ export function Download({ animate = false, className, ...props }: DownloadProps
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <path d='M12 5v14' />
diff --git a/apps/sim/components/emcn/icons/duplicate.tsx b/apps/sim/components/emcn/icons/duplicate.tsx
index 4278a4e446..6c9a888e8e 100644
--- a/apps/sim/components/emcn/icons/duplicate.tsx
+++ b/apps/sim/components/emcn/icons/duplicate.tsx
@@ -12,6 +12,7 @@ export function Duplicate(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 15 15'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/expand.tsx b/apps/sim/components/emcn/icons/expand.tsx
index c6939685b4..45d86e2dce 100644
--- a/apps/sim/components/emcn/icons/expand.tsx
+++ b/apps/sim/components/emcn/icons/expand.tsx
@@ -8,6 +8,7 @@ export function Expand(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/eye.tsx b/apps/sim/components/emcn/icons/eye.tsx
index 78ab41c283..f95e152b92 100644
--- a/apps/sim/components/emcn/icons/eye.tsx
+++ b/apps/sim/components/emcn/icons/eye.tsx
@@ -12,6 +12,7 @@ export function Eye(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 11'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/file-x.tsx b/apps/sim/components/emcn/icons/file-x.tsx
index 0717501471..634bb68933 100644
--- a/apps/sim/components/emcn/icons/file-x.tsx
+++ b/apps/sim/components/emcn/icons/file-x.tsx
@@ -16,6 +16,7 @@ export function FileX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.25 12.5V2.75C3.25 1.64543 4.14543 0.75 5.25 0.75H12.25L17.25 5.75V16.75C17.25 17.8546 16.3546 18.75 15.25 18.75H9.5' />
diff --git a/apps/sim/components/emcn/icons/file.tsx b/apps/sim/components/emcn/icons/file.tsx
index 03dfa8dd1a..a7d738cff1 100644
--- a/apps/sim/components/emcn/icons/file.tsx
+++ b/apps/sim/components/emcn/icons/file.tsx
@@ -16,6 +16,7 @@ export function File(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M12.25 0.75H5.25C4.14543 0.75 3.25 1.64543 3.25 2.75V16.75C3.25 17.8546 4.14543 18.75 5.25 18.75H15.25C16.3546 18.75 17.25 17.8546 17.25 16.75V5.75L12.25 0.75Z' />
diff --git a/apps/sim/components/emcn/icons/fingerprint.tsx b/apps/sim/components/emcn/icons/fingerprint.tsx
index ed0fc0642c..09a0cb5c41 100644
--- a/apps/sim/components/emcn/icons/fingerprint.tsx
+++ b/apps/sim/components/emcn/icons/fingerprint.tsx
@@ -16,6 +16,7 @@ export function Fingerprint(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4' />
diff --git a/apps/sim/components/emcn/icons/folder-code.tsx b/apps/sim/components/emcn/icons/folder-code.tsx
index 1f0ee590d6..c957fe3918 100644
--- a/apps/sim/components/emcn/icons/folder-code.tsx
+++ b/apps/sim/components/emcn/icons/folder-code.tsx
@@ -12,6 +12,7 @@ export function FolderCode(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 15 13'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/folder-plus.tsx b/apps/sim/components/emcn/icons/folder-plus.tsx
index 77358832dc..eec8607afc 100644
--- a/apps/sim/components/emcn/icons/folder-plus.tsx
+++ b/apps/sim/components/emcn/icons/folder-plus.tsx
@@ -12,6 +12,7 @@ export function FolderPlus(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/hammer.tsx b/apps/sim/components/emcn/icons/hammer.tsx
index 1be9331d93..ba2954ca1c 100644
--- a/apps/sim/components/emcn/icons/hammer.tsx
+++ b/apps/sim/components/emcn/icons/hammer.tsx
@@ -16,6 +16,7 @@ export function Hammer(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M7 6.75L10.25 3.5L16.75 10L13.5 13.25Z' />
diff --git a/apps/sim/components/emcn/icons/hand.tsx b/apps/sim/components/emcn/icons/hand.tsx
index 9197f1e10b..d57c9304bc 100644
--- a/apps/sim/components/emcn/icons/hand.tsx
+++ b/apps/sim/components/emcn/icons/hand.tsx
@@ -8,6 +8,7 @@ export function Hand(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/help-circle.tsx b/apps/sim/components/emcn/icons/help-circle.tsx
index 0a2d5166fc..1e81e3eda8 100644
--- a/apps/sim/components/emcn/icons/help-circle.tsx
+++ b/apps/sim/components/emcn/icons/help-circle.tsx
@@ -16,6 +16,7 @@ export function HelpCircle(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='12' cy='12' r='10' />
diff --git a/apps/sim/components/emcn/icons/hex-simple.tsx b/apps/sim/components/emcn/icons/hex-simple.tsx
index fb8c7cf036..84c806d7c1 100644
--- a/apps/sim/components/emcn/icons/hex-simple.tsx
+++ b/apps/sim/components/emcn/icons/hex-simple.tsx
@@ -12,6 +12,7 @@ export function HexSimple(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/home.tsx b/apps/sim/components/emcn/icons/home.tsx
index 95b0628916..d80197776f 100644
--- a/apps/sim/components/emcn/icons/home.tsx
+++ b/apps/sim/components/emcn/icons/home.tsx
@@ -16,6 +16,7 @@ export function Home(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 9.5L10.25 1L19.75 9.5V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V9.5Z' />
diff --git a/apps/sim/components/emcn/icons/integration.tsx b/apps/sim/components/emcn/icons/integration.tsx
index 8dffca68c3..1fa3e0cb1b 100644
--- a/apps/sim/components/emcn/icons/integration.tsx
+++ b/apps/sim/components/emcn/icons/integration.tsx
@@ -16,6 +16,7 @@ export function Integration(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1' y='6.5' width='7' height='7' rx='1.5' />
diff --git a/apps/sim/components/emcn/icons/key-square.tsx b/apps/sim/components/emcn/icons/key-square.tsx
index 566c00c46d..53fbedde97 100644
--- a/apps/sim/components/emcn/icons/key-square.tsx
+++ b/apps/sim/components/emcn/icons/key-square.tsx
@@ -16,6 +16,7 @@ export function KeySquare(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1.25' y='0.75' width='18' height='18' rx='2.5' />
diff --git a/apps/sim/components/emcn/icons/key.tsx b/apps/sim/components/emcn/icons/key.tsx
index 02dffdf376..11950dfbd9 100644
--- a/apps/sim/components/emcn/icons/key.tsx
+++ b/apps/sim/components/emcn/icons/key.tsx
@@ -16,6 +16,7 @@ export function Key(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='6.75' cy='10.25' r='3.5' />
diff --git a/apps/sim/components/emcn/icons/layout.tsx b/apps/sim/components/emcn/icons/layout.tsx
index 649de0124c..163a8944bc 100644
--- a/apps/sim/components/emcn/icons/layout.tsx
+++ b/apps/sim/components/emcn/icons/layout.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/layout.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export type LayoutAnimationVariant = 'clockwise' | 'counterclockwise'
 
@@ -28,9 +29,11 @@ export function Layout({
   className,
   ...props
 }: LayoutProps) {
-  const svgClassName = animate
-    ? `${styles['animated-layout-svg']} ${variant === 'clockwise' ? styles.clockwise : ''} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(
+    animate && styles['animated-layout-svg'],
+    animate && variant === 'clockwise' && styles.clockwise,
+    className
+  )
 
   return (
     <svg
@@ -44,6 +47,7 @@ export function Layout({
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <rect
diff --git a/apps/sim/components/emcn/icons/library.tsx b/apps/sim/components/emcn/icons/library.tsx
index 7411e6e342..16f19208f8 100644
--- a/apps/sim/components/emcn/icons/library.tsx
+++ b/apps/sim/components/emcn/icons/library.tsx
@@ -16,6 +16,7 @@ export function Library(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 4.75C0.75 3.34987 0.75 2.6498 1.02248 2.11502C1.26217 1.64462 1.64462 1.26217 2.11502 1.02248C2.6498 0.75 3.34987 0.75 4.75 0.75C6.15013 0.75 6.8502 0.75 7.38498 1.02248C7.85538 1.26217 8.23783 1.64462 8.47752 2.11502C8.75 2.6498 8.75 3.34987 8.75 4.75V14.75C8.75 16.1501 8.75 16.8502 8.47752 17.385C8.23783 17.8554 7.85538 18.2378 7.38498 18.4775C6.8502 18.75 6.15013 18.75 4.75 18.75C3.34987 18.75 2.6498 18.75 2.11502 18.4775C1.64462 18.2378 1.26217 17.8554 1.02248 17.385C0.75 16.8502 0.75 16.1501 0.75 14.75V4.75Z' />
diff --git a/apps/sim/components/emcn/icons/list-filter.tsx b/apps/sim/components/emcn/icons/list-filter.tsx
index f50b54f04b..9d883ef33c 100644
--- a/apps/sim/components/emcn/icons/list-filter.tsx
+++ b/apps/sim/components/emcn/icons/list-filter.tsx
@@ -16,6 +16,7 @@ export function ListFilter(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M1.5 4.5H19' />
diff --git a/apps/sim/components/emcn/icons/loader.tsx b/apps/sim/components/emcn/icons/loader.tsx
index 362cd37042..1f91b4fb71 100644
--- a/apps/sim/components/emcn/icons/loader.tsx
+++ b/apps/sim/components/emcn/icons/loader.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/loader.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
@@ -17,9 +18,7 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
  * @param props - SVG properties including className, animate, etc.
  */
 export function Loader({ animate = false, className, ...props }: LoaderProps) {
-  const svgClassName = animate
-    ? `${styles['animated-loader-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-loader-svg'], className)
 
   return (
     <svg
@@ -33,6 +32,7 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74' />
diff --git a/apps/sim/components/emcn/icons/lock.tsx b/apps/sim/components/emcn/icons/lock.tsx
index d43cff5c2b..60bad9b33a 100644
--- a/apps/sim/components/emcn/icons/lock.tsx
+++ b/apps/sim/components/emcn/icons/lock.tsx
@@ -16,6 +16,7 @@ export function Lock(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
diff --git a/apps/sim/components/emcn/icons/log-in.tsx b/apps/sim/components/emcn/icons/log-in.tsx
index dff8045ecd..43c0da5ccc 100644
--- a/apps/sim/components/emcn/icons/log-in.tsx
+++ b/apps/sim/components/emcn/icons/log-in.tsx
@@ -16,6 +16,7 @@ export function LogIn(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M11.75 0.75H16.25C17.3546 0.75 18.25 1.64543 18.25 2.75V16.75C18.25 17.8546 17.3546 18.75 16.25 18.75H11.75' />
diff --git a/apps/sim/components/emcn/icons/log-out.tsx b/apps/sim/components/emcn/icons/log-out.tsx
index 57f333cfcb..b9a0da87c4 100644
--- a/apps/sim/components/emcn/icons/log-out.tsx
+++ b/apps/sim/components/emcn/icons/log-out.tsx
@@ -16,6 +16,7 @@ export function LogOut(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M8.75 0.75H3.75C2.64543 0.75 1.75 1.64543 1.75 2.75V16.75C1.75 17.8546 2.64543 18.75 3.75 18.75H8.75' />
diff --git a/apps/sim/components/emcn/icons/mail.tsx b/apps/sim/components/emcn/icons/mail.tsx
index 84ea279f17..59f76e53ee 100644
--- a/apps/sim/components/emcn/icons/mail.tsx
+++ b/apps/sim/components/emcn/icons/mail.tsx
@@ -16,6 +16,7 @@ export function Mail(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='0.75' y='2.75' width='19' height='14' rx='2' />
diff --git a/apps/sim/components/emcn/icons/more-horizontal.tsx b/apps/sim/components/emcn/icons/more-horizontal.tsx
index d30562f5fc..06a08d1aaa 100644
--- a/apps/sim/components/emcn/icons/more-horizontal.tsx
+++ b/apps/sim/components/emcn/icons/more-horizontal.tsx
@@ -12,6 +12,7 @@ export function MoreHorizontal(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 3'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/no-wrap.tsx b/apps/sim/components/emcn/icons/no-wrap.tsx
index 26d9a3fc8a..01e62e1ca6 100644
--- a/apps/sim/components/emcn/icons/no-wrap.tsx
+++ b/apps/sim/components/emcn/icons/no-wrap.tsx
@@ -16,6 +16,7 @@ export function NoWrap(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 8h18' />
diff --git a/apps/sim/components/emcn/icons/palette.tsx b/apps/sim/components/emcn/icons/palette.tsx
index 49e71507f4..e33264e28c 100644
--- a/apps/sim/components/emcn/icons/palette.tsx
+++ b/apps/sim/components/emcn/icons/palette.tsx
@@ -16,6 +16,7 @@ export function Palette(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 0.75C5.56 0.75 0.75 4.25 0.75 9.75C0.75 14.97 5.03 18.75 10.25 18.75C11.08 18.75 11.75 18.08 11.75 17.25C11.75 16.87 11.6 16.52 11.35 16.26C11.1 15.99 10.95 15.64 10.95 15.25C10.95 14.42 11.62 13.75 12.45 13.75H14.25C17.01 13.75 19.75 11.51 19.75 8.75C19.75 4.47 15.45 0.75 10.25 0.75Z' />
diff --git a/apps/sim/components/emcn/icons/panel-left.tsx b/apps/sim/components/emcn/icons/panel-left.tsx
index 0f9ab71dc5..4b3cc6b9c6 100644
--- a/apps/sim/components/emcn/icons/panel-left.tsx
+++ b/apps/sim/components/emcn/icons/panel-left.tsx
@@ -16,6 +16,7 @@ export function PanelLeft(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/pause.tsx b/apps/sim/components/emcn/icons/pause.tsx
index b06fd7169a..c5ed4b1062 100644
--- a/apps/sim/components/emcn/icons/pause.tsx
+++ b/apps/sim/components/emcn/icons/pause.tsx
@@ -16,6 +16,7 @@ export function Pause(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M6.25 2.75V16.75' />
diff --git a/apps/sim/components/emcn/icons/pencil.tsx b/apps/sim/components/emcn/icons/pencil.tsx
index fa05bfd975..7f521c3618 100644
--- a/apps/sim/components/emcn/icons/pencil.tsx
+++ b/apps/sim/components/emcn/icons/pencil.tsx
@@ -16,6 +16,7 @@ export function Pencil(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M14.75 1.25L19.25 5.75L7.25 17.75H2.75V13.25L14.75 1.25Z' />
diff --git a/apps/sim/components/emcn/icons/pills-ring.tsx b/apps/sim/components/emcn/icons/pills-ring.tsx
index 94167283fc..f77bf7d52e 100644
--- a/apps/sim/components/emcn/icons/pills-ring.tsx
+++ b/apps/sim/components/emcn/icons/pills-ring.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/pills-ring.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface PillsRingProps extends SVGProps<SVGSVGElement> {
   /**
@@ -19,9 +20,7 @@ const DURATION_S = 1.2
  * @param props - SVG properties including className, animate, etc.
  */
 export function PillsRing({ animate = false, className, ...props }: PillsRingProps) {
-  const svgClassName = animate
-    ? `${styles['animated-pills-ring-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-pills-ring-svg'], className)
 
   return (
     <svg
@@ -31,6 +30,7 @@ export function PillsRing({ animate = false, className, ...props }: PillsRingPro
       viewBox='0 0 24 24'
       fill='currentColor'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       {Array.from({ length: PILL_COUNT }).map((_, i) => (
diff --git a/apps/sim/components/emcn/icons/play.tsx b/apps/sim/components/emcn/icons/play.tsx
index 2e4a30d9c9..cf22598ba0 100644
--- a/apps/sim/components/emcn/icons/play.tsx
+++ b/apps/sim/components/emcn/icons/play.tsx
@@ -12,6 +12,7 @@ export function Play(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 10 10'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
@@ -38,6 +39,7 @@ export function PlayOutline(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M7.5 3.5C7.5 2.672 8.452 2.18 9.128 2.66L18.128 9.16C18.72 9.58 18.72 10.46 18.128 10.88L9.128 17.38C8.452 17.86 7.5 17.368 7.5 16.54V3.5Z' />
diff --git a/apps/sim/components/emcn/icons/plus.tsx b/apps/sim/components/emcn/icons/plus.tsx
index f2bcfbb030..48fb9d84b7 100644
--- a/apps/sim/components/emcn/icons/plus.tsx
+++ b/apps/sim/components/emcn/icons/plus.tsx
@@ -16,6 +16,7 @@ export function Plus(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 3V17.5' />
diff --git a/apps/sim/components/emcn/icons/redo.tsx b/apps/sim/components/emcn/icons/redo.tsx
index f5c57f0fa5..754b008cba 100644
--- a/apps/sim/components/emcn/icons/redo.tsx
+++ b/apps/sim/components/emcn/icons/redo.tsx
@@ -12,6 +12,7 @@ export function Redo(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/rocket.tsx b/apps/sim/components/emcn/icons/rocket.tsx
index 7cb13d15d9..1e6f4621e7 100644
--- a/apps/sim/components/emcn/icons/rocket.tsx
+++ b/apps/sim/components/emcn/icons/rocket.tsx
@@ -16,6 +16,7 @@ export function Rocket(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M11 1.75C8.5 4.75 7.25 8.75 7.25 12.75V15.75H14.75V12.75C14.75 8.75 13.5 4.75 11 1.75Z' />
diff --git a/apps/sim/components/emcn/icons/rows3.tsx b/apps/sim/components/emcn/icons/rows3.tsx
index 56e7698467..84a5f4ea77 100644
--- a/apps/sim/components/emcn/icons/rows3.tsx
+++ b/apps/sim/components/emcn/icons/rows3.tsx
@@ -16,6 +16,7 @@ export function Rows3(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/search.tsx b/apps/sim/components/emcn/icons/search.tsx
index d90687351f..75ab4694a3 100644
--- a/apps/sim/components/emcn/icons/search.tsx
+++ b/apps/sim/components/emcn/icons/search.tsx
@@ -16,6 +16,7 @@ export function Search(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='8.5' cy='8.5' r='7.5' />
diff --git a/apps/sim/components/emcn/icons/send.tsx b/apps/sim/components/emcn/icons/send.tsx
index 87546abb80..ef7c3b904f 100644
--- a/apps/sim/components/emcn/icons/send.tsx
+++ b/apps/sim/components/emcn/icons/send.tsx
@@ -16,6 +16,7 @@ export function Send(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M19.5 1.5L9 12' />
diff --git a/apps/sim/components/emcn/icons/server.tsx b/apps/sim/components/emcn/icons/server.tsx
index 6d47d0b27b..05413e5ad5 100644
--- a/apps/sim/components/emcn/icons/server.tsx
+++ b/apps/sim/components/emcn/icons/server.tsx
@@ -16,6 +16,7 @@ export function Server(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1.75' y='0.75' width='17' height='7.5' rx='1.5' />
diff --git a/apps/sim/components/emcn/icons/settings.tsx b/apps/sim/components/emcn/icons/settings.tsx
index c174d3109e..04ab7788f2 100644
--- a/apps/sim/components/emcn/icons/settings.tsx
+++ b/apps/sim/components/emcn/icons/settings.tsx
@@ -16,6 +16,7 @@ export function Settings(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='12' cy='12' r='3' />
diff --git a/apps/sim/components/emcn/icons/shield-check.tsx b/apps/sim/components/emcn/icons/shield-check.tsx
index 7f36905e0c..4dea50ea79 100644
--- a/apps/sim/components/emcn/icons/shield-check.tsx
+++ b/apps/sim/components/emcn/icons/shield-check.tsx
@@ -16,6 +16,7 @@ export function ShieldCheck(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 1.25L2.25 5.25V10.25C2.25 15.25 5.65 19.85 10.25 20.75C14.85 19.85 18.25 15.25 18.25 10.25V5.25L10.25 1.25Z' />
diff --git a/apps/sim/components/emcn/icons/sim.tsx b/apps/sim/components/emcn/icons/sim.tsx
index 6d8206765b..9ba70e8e87 100644
--- a/apps/sim/components/emcn/icons/sim.tsx
+++ b/apps/sim/components/emcn/icons/sim.tsx
@@ -12,6 +12,7 @@ export function Sim(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 222 222'
       fill='#33C482'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
index a29ce86a54..898a22f5b3 100644
--- a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
+++ b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
@@ -16,6 +16,7 @@ export function SquareArrowUpRight(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1.25' y='0.75' width='18' height='18' rx='2.5' />
diff --git a/apps/sim/components/emcn/icons/table-x.tsx b/apps/sim/components/emcn/icons/table-x.tsx
index 4418df7c46..8880b586b1 100644
--- a/apps/sim/components/emcn/icons/table-x.tsx
+++ b/apps/sim/components/emcn/icons/table-x.tsx
@@ -16,6 +16,7 @@ export function TableX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 12.5V3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H7.5' />
diff --git a/apps/sim/components/emcn/icons/table.tsx b/apps/sim/components/emcn/icons/table.tsx
index 4aa54c8484..1b38aa9383 100644
--- a/apps/sim/components/emcn/icons/table.tsx
+++ b/apps/sim/components/emcn/icons/table.tsx
@@ -16,6 +16,7 @@ export function Table(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/tag.tsx b/apps/sim/components/emcn/icons/tag.tsx
index 8f988387a8..57ac6c8ed9 100644
--- a/apps/sim/components/emcn/icons/tag.tsx
+++ b/apps/sim/components/emcn/icons/tag.tsx
@@ -16,6 +16,7 @@ export function TagIcon(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 9.75V3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H9.75L19.25 10.25L10.25 19.25L0.75 9.75Z' />
diff --git a/apps/sim/components/emcn/icons/terminal-window.tsx b/apps/sim/components/emcn/icons/terminal-window.tsx
index 670c8c83c7..38e5e796bc 100644
--- a/apps/sim/components/emcn/icons/terminal-window.tsx
+++ b/apps/sim/components/emcn/icons/terminal-window.tsx
@@ -12,6 +12,7 @@ export function TerminalWindow(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 16 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/trash-outline.tsx b/apps/sim/components/emcn/icons/trash-outline.tsx
index 075574ae4b..fef836dcbc 100644
--- a/apps/sim/components/emcn/icons/trash-outline.tsx
+++ b/apps/sim/components/emcn/icons/trash-outline.tsx
@@ -16,6 +16,7 @@ export function TrashOutline(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 6h18' />
diff --git a/apps/sim/components/emcn/icons/trash.tsx b/apps/sim/components/emcn/icons/trash.tsx
index 07e191b2cf..88c1a3dd87 100644
--- a/apps/sim/components/emcn/icons/trash.tsx
+++ b/apps/sim/components/emcn/icons/trash.tsx
@@ -12,6 +12,7 @@ export function Trash(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/trash2.tsx b/apps/sim/components/emcn/icons/trash2.tsx
index b23eaea4bb..fbf62e6391 100644
--- a/apps/sim/components/emcn/icons/trash2.tsx
+++ b/apps/sim/components/emcn/icons/trash2.tsx
@@ -12,6 +12,7 @@ export function Trash2(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 15'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/type-boolean.tsx b/apps/sim/components/emcn/icons/type-boolean.tsx
index 60f93befab..099d3f48cc 100644
--- a/apps/sim/components/emcn/icons/type-boolean.tsx
+++ b/apps/sim/components/emcn/icons/type-boolean.tsx
@@ -16,6 +16,7 @@ export function TypeBoolean(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='2.5' y='2.75' width='15.5' height='15.5' rx='2.5' />
diff --git a/apps/sim/components/emcn/icons/type-json.tsx b/apps/sim/components/emcn/icons/type-json.tsx
index bb9988199b..f7f481f2b7 100644
--- a/apps/sim/components/emcn/icons/type-json.tsx
+++ b/apps/sim/components/emcn/icons/type-json.tsx
@@ -16,6 +16,7 @@ export function TypeJson(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M5.75 1.25C3.54086 1.25 1.75 3.04086 1.75 5.25V7.75C1.75 9.13071 0.630712 10.25 -0.75 10.25C0.630712 10.25 1.75 11.3693 1.75 12.75V15.25C1.75 17.4591 3.54086 19.25 5.75 19.25' />
diff --git a/apps/sim/components/emcn/icons/type-number.tsx b/apps/sim/components/emcn/icons/type-number.tsx
index 706c874678..cb19203855 100644
--- a/apps/sim/components/emcn/icons/type-number.tsx
+++ b/apps/sim/components/emcn/icons/type-number.tsx
@@ -16,6 +16,7 @@ export function TypeNumber(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.25 7.25H17.75' />
diff --git a/apps/sim/components/emcn/icons/type-text.tsx b/apps/sim/components/emcn/icons/type-text.tsx
index 4d81dfcc0d..65e53fc03c 100644
--- a/apps/sim/components/emcn/icons/type-text.tsx
+++ b/apps/sim/components/emcn/icons/type-text.tsx
@@ -16,6 +16,7 @@ export function TypeText(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.25 2.25H17.25' />
diff --git a/apps/sim/components/emcn/icons/undo.tsx b/apps/sim/components/emcn/icons/undo.tsx
index 3e0f4fe622..a2352d0ee8 100644
--- a/apps/sim/components/emcn/icons/undo.tsx
+++ b/apps/sim/components/emcn/icons/undo.tsx
@@ -12,6 +12,7 @@ export function Undo(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/unlock.tsx b/apps/sim/components/emcn/icons/unlock.tsx
index 0c6e42beb2..09af49b936 100644
--- a/apps/sim/components/emcn/icons/unlock.tsx
+++ b/apps/sim/components/emcn/icons/unlock.tsx
@@ -16,6 +16,7 @@ export function Unlock(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
diff --git a/apps/sim/components/emcn/icons/upload.tsx b/apps/sim/components/emcn/icons/upload.tsx
index 444cf7a383..626d6ad8b8 100644
--- a/apps/sim/components/emcn/icons/upload.tsx
+++ b/apps/sim/components/emcn/icons/upload.tsx
@@ -16,6 +16,7 @@ export function Upload(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 14V3.5' />
diff --git a/apps/sim/components/emcn/icons/user-plus.tsx b/apps/sim/components/emcn/icons/user-plus.tsx
index ab55c2af80..c551815c8d 100644
--- a/apps/sim/components/emcn/icons/user-plus.tsx
+++ b/apps/sim/components/emcn/icons/user-plus.tsx
@@ -16,6 +16,7 @@ export function UserPlus(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' />
diff --git a/apps/sim/components/emcn/icons/user.tsx b/apps/sim/components/emcn/icons/user.tsx
index 57cb2eb1f9..9476790760 100644
--- a/apps/sim/components/emcn/icons/user.tsx
+++ b/apps/sim/components/emcn/icons/user.tsx
@@ -16,6 +16,7 @@ export function User(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='10.25' cy='6.25' r='4' />
diff --git a/apps/sim/components/emcn/icons/users.tsx b/apps/sim/components/emcn/icons/users.tsx
index 29e19dfff1..8f3f9545fd 100644
--- a/apps/sim/components/emcn/icons/users.tsx
+++ b/apps/sim/components/emcn/icons/users.tsx
@@ -16,6 +16,7 @@ export function Users(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='8.25' cy='5.75' r='3.5' />
diff --git a/apps/sim/components/emcn/icons/workflow-x.tsx b/apps/sim/components/emcn/icons/workflow-x.tsx
index 9ae1f4c470..354b046a34 100644
--- a/apps/sim/components/emcn/icons/workflow-x.tsx
+++ b/apps/sim/components/emcn/icons/workflow-x.tsx
@@ -16,6 +16,7 @@ export function WorkflowX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='10.25' cy='3.5' r='2.75' />
diff --git a/apps/sim/components/emcn/icons/wrap.tsx b/apps/sim/components/emcn/icons/wrap.tsx
index 0814f0e4f8..b36a455559 100644
--- a/apps/sim/components/emcn/icons/wrap.tsx
+++ b/apps/sim/components/emcn/icons/wrap.tsx
@@ -16,6 +16,7 @@ export function Wrap(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 6h18' />
diff --git a/apps/sim/components/emcn/icons/wrench.tsx b/apps/sim/components/emcn/icons/wrench.tsx
index 5b2a7dfbb2..3eae7c8162 100644
--- a/apps/sim/components/emcn/icons/wrench.tsx
+++ b/apps/sim/components/emcn/icons/wrench.tsx
@@ -16,6 +16,7 @@ export function Wrench(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M15.09 1.41C13.78 0.74 12.25 0.63 10.85 1.11C9.45 1.59 8.3 2.62 7.68 3.96C7.06 5.3 7.02 6.84 7.57 8.2L1.25 14.52C0.86 14.91 0.86 15.54 1.25 15.93L3.57 18.25C3.96 18.64 4.59 18.64 4.98 18.25L11.3 11.93C12.66 12.48 14.2 12.44 15.54 11.82C16.88 11.2 17.91 10.05 18.39 8.65C18.87 7.25 18.76 5.72 18.09 4.41L14.87 7.63L12.25 7.25L11.87 4.63L15.09 1.41Z' />
diff --git a/apps/sim/components/emcn/icons/x.tsx b/apps/sim/components/emcn/icons/x.tsx
index abc16a198b..d5bc45a5ba 100644
--- a/apps/sim/components/emcn/icons/x.tsx
+++ b/apps/sim/components/emcn/icons/x.tsx
@@ -16,6 +16,7 @@ export function X(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M15.25 4.75L4.75 15.25' />
diff --git a/apps/sim/components/emcn/icons/zoom-in.tsx b/apps/sim/components/emcn/icons/zoom-in.tsx
index 12561e39c8..50e7240ee5 100644
--- a/apps/sim/components/emcn/icons/zoom-in.tsx
+++ b/apps/sim/components/emcn/icons/zoom-in.tsx
@@ -12,6 +12,7 @@ export function ZoomIn(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle
diff --git a/apps/sim/components/emcn/icons/zoom-out.tsx b/apps/sim/components/emcn/icons/zoom-out.tsx
index aca3a24826..45dcdcb266 100644
--- a/apps/sim/components/emcn/icons/zoom-out.tsx
+++ b/apps/sim/components/emcn/icons/zoom-out.tsx
@@ -12,6 +12,7 @@ export function ZoomOut(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle
diff --git a/apps/sim/components/ui/button.tsx b/apps/sim/components/ui/button.tsx
index 735d5d909e..a5606a7cb0 100644
--- a/apps/sim/components/ui/button.tsx
+++ b/apps/sim/components/ui/button.tsx
@@ -8,12 +8,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default: 'bg-primary text-primary-foreground hover-hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover-hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover-hover:bg-accent hover-hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover-hover:bg-secondary/80',
+        ghost: 'hover-hover:bg-accent hover-hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover-hover:underline',
       },
       size: {
         default: 'h-10 px-4 py-2',
diff --git a/apps/sim/components/ui/search-highlight.tsx b/apps/sim/components/ui/search-highlight.tsx
index 0c9e7cf175..050ffc87b8 100644
--- a/apps/sim/components/ui/search-highlight.tsx
+++ b/apps/sim/components/ui/search-highlight.tsx
@@ -32,7 +32,7 @@ export function SearchHighlight({ text, searchQuery, className = '' }: SearchHig
         return isMatch ? (
           <span
             key={index}
-            className='bg-[#bae6fd] text-[#0369a1] dark:bg-[rgba(51,180,255,0.2)] dark:text-[var(--brand-secondary)]'
+            className='bg-[var(--highlight-match-bg)] text-[var(--highlight-match-text)]'
           >
             {part}
           </span>
diff --git a/apps/sim/components/ui/select.tsx b/apps/sim/components/ui/select.tsx
index bf6e2ece62..22c1b1c095 100644
--- a/apps/sim/components/ui/select.tsx
+++ b/apps/sim/components/ui/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-[8px] border border-input bg-input-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-input-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -43,7 +43,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className='h-4 w-4 opacity-70 transition-opacity hover:opacity-100' />
+    <ChevronUp className='h-4 w-4 opacity-70 transition-opacity hover-hover:opacity-100' />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -60,7 +60,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className='h-4 w-4 opacity-70 transition-opacity hover:opacity-100' />
+    <ChevronDown className='h-4 w-4 opacity-70 transition-opacity hover-hover:opacity-100' />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
diff --git a/apps/sim/ee/access-control/components/access-control.tsx b/apps/sim/ee/access-control/components/access-control.tsx
index 083b7be68d..7cb378b8a7 100644
--- a/apps/sim/ee/access-control/components/access-control.tsx
+++ b/apps/sim/ee/access-control/components/access-control.tsx
@@ -123,21 +123,21 @@ function AddMembersModal({
     >
       <ModalContent size='sm'>
         <ModalHeader>Add Members</ModalHeader>
-        <ModalBody className='!pb-[16px]'>
+        <ModalBody className='!pb-4'>
           {availableMembers.length === 0 ? (
-            <p className='text-[14px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-sm'>
               All organization members are already in this group.
             </p>
           ) : (
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex items-center gap-[8px]'>
-                <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+            <div className='flex flex-col gap-3'>
+              <div className='flex items-center gap-2'>
+                <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                   <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                   <BaseInput
                     placeholder='Search members...'
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
-                    className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                   />
                 </div>
                 <Button variant='primary' onClick={handleToggleAll}>
@@ -147,7 +147,7 @@ function AddMembersModal({
 
               <div className='max-h-[280px] overflow-y-auto'>
                 {filteredMembers.length === 0 ? (
-                  <p className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                  <p className='py-4 text-center text-[var(--text-muted)] text-sm'>
                     No members found matching "{searchTerm}"
                   </p>
                 ) : (
@@ -163,7 +163,7 @@ function AddMembersModal({
                           key={member.userId}
                           type='button'
                           onClick={() => handleToggleMember(member.userId)}
-                          className='flex items-center gap-[10px] rounded-[4px] px-[8px] py-[6px] hover:bg-[var(--surface-2)]'
+                          className='flex items-center gap-2.5 rounded-sm px-2 py-1.5 hover:bg-[var(--surface-2)]'
                         >
                           <Checkbox checked={isSelected} />
                           <Avatar size='sm'>
@@ -172,18 +172,16 @@ function AddMembersModal({
                             )}
                             <AvatarFallback
                               style={{ background: getUserColor(member.userId || email) }}
-                              className='border-0 text-[10px] text-white'
+                              className='border-0 text-micro text-white'
                             >
                               {avatarInitial}
                             </AvatarFallback>
                           </Avatar>
                           <div className='min-w-0 flex-1 text-left'>
-                            <div className='truncate text-[14px] text-[var(--text-primary)]'>
+                            <div className='truncate text-[var(--text-primary)] text-sm'>
                               {name}
                             </div>
-                            <div className='truncate text-[11px] text-[var(--text-muted)]'>
-                              {email}
-                            </div>
+                            <div className='truncate text-[var(--text-muted)] text-xs'>{email}</div>
                           </div>
                         </button>
                       )
@@ -219,18 +217,18 @@ function AddMembersModal({
 
 function AccessControlSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex flex-col gap-[8px]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[100px]' />
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='h-9 w-9 rounded-[6px]' />
-            <div className='flex flex-col gap-[4px]'>
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-9 w-9 rounded-md' />
+            <div className='flex flex-col gap-1'>
               <Skeleton className='h-[14px] w-[120px]' />
               <Skeleton className='h-[12px] w-[80px]' />
             </div>
           </div>
-          <Skeleton className='h-[32px] w-[60px] rounded-[6px]' />
+          <Skeleton className='h-[32px] w-[60px] rounded-md' />
         </div>
       </div>
     </div>
@@ -713,10 +711,10 @@ export function AccessControl() {
   if (viewingGroup) {
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
-          <div className='flex flex-col gap-[4px]'>
+        <div className='flex h-full flex-col gap-4.5'>
+          <div className='flex flex-col gap-1'>
             <div className='flex items-center justify-between'>
-              <h3 className='font-medium text-[15px] text-[var(--text-primary)]'>
+              <h3 className='font-medium text-[var(--text-primary)] text-base'>
                 {viewingGroup.name}
               </h3>
               <Button variant='default' onClick={handleOpenConfigModal}>
@@ -724,16 +722,16 @@ export function AccessControl() {
               </Button>
             </div>
             {viewingGroup.description && (
-              <p className='text-[14px] text-[var(--text-muted)]'>{viewingGroup.description}</p>
+              <p className='text-[var(--text-muted)] text-sm'>{viewingGroup.description}</p>
             )}
           </div>
 
           <div className='flex items-center justify-between'>
-            <div className='flex flex-col gap-[2px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+            <div className='flex flex-col gap-0.5'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>
                 Auto-add new members
               </span>
-              <span className='text-[13px] text-[var(--text-muted)]'>
+              <span className='text-[var(--text-muted)] text-small'>
                 Automatically add new organization members to this group
               </span>
             </div>
@@ -745,24 +743,22 @@ export function AccessControl() {
           </div>
 
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <div className='flex items-center justify-between'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Members
-                </span>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>Members</span>
                 <Button variant='primary' onClick={handleOpenAddMembersModal}>
-                  <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                  <Plus className='mr-1.5 h-[13px] w-[13px]' />
                   Add
                 </Button>
               </div>
 
               {membersLoading ? (
-                <div className='flex flex-col gap-[18px]'>
+                <div className='flex flex-col gap-4.5'>
                   {[1, 2].map((i) => (
                     <div key={i} className='flex items-center justify-between'>
-                      <div className='flex items-center gap-[12px]'>
+                      <div className='flex items-center gap-3'>
                         <Skeleton className='h-8 w-8 rounded-full' />
-                        <div className='flex flex-col gap-[4px]'>
+                        <div className='flex flex-col gap-1'>
                           <Skeleton className='h-[14px] w-[100px]' />
                           <Skeleton className='h-[12px] w-[150px]' />
                         </div>
@@ -771,18 +767,18 @@ export function AccessControl() {
                   ))}
                 </div>
               ) : members.length === 0 ? (
-                <p className='text-[14px] text-[var(--text-muted)]'>
+                <p className='text-[var(--text-muted)] text-sm'>
                   No members yet. Click "Add" to get started.
                 </p>
               ) : (
-                <div className='flex flex-col gap-[18px]'>
+                <div className='flex flex-col gap-4.5'>
                   {members.map((member) => {
                     const name = member.userName || 'Unknown'
                     const avatarInitial = name.charAt(0).toUpperCase()
 
                     return (
                       <div key={member.id} className='flex items-center justify-between'>
-                        <div className='flex flex-1 items-center gap-[12px]'>
+                        <div className='flex flex-1 items-center gap-3'>
                           <Avatar size='md'>
                             {member.userImage && <AvatarImage src={member.userImage} alt={name} />}
                             <AvatarFallback
@@ -796,12 +792,12 @@ export function AccessControl() {
                           </Avatar>
 
                           <div className='min-w-0'>
-                            <div className='flex items-center gap-[8px]'>
-                              <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                            <div className='flex items-center gap-2'>
+                              <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                                 {name}
                               </span>
                             </div>
-                            <div className='truncate text-[13px] text-[var(--text-muted)]'>
+                            <div className='truncate text-[var(--text-muted)] text-small'>
                               {member.userEmail}
                             </div>
                           </div>
@@ -856,15 +852,15 @@ export function AccessControl() {
 
               <ModalTabsContent value='providers'>
                 <ModalBody className='h-[400px]'>
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='flex items-center gap-[8px]'>
-                      <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                         <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                         <BaseInput
                           placeholder='Search providers...'
                           value={providerSearchTerm}
                           onChange={(e) => setProviderSearchTerm(e.target.value)}
-                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                         />
                       </div>
                       <Button
@@ -884,14 +880,14 @@ export function AccessControl() {
                           : 'Select All'}
                       </Button>
                     </div>
-                    <div className='grid max-h-[340px] grid-cols-3 gap-[8px] overflow-y-auto'>
+                    <div className='grid max-h-[340px] grid-cols-3 gap-2 overflow-y-auto'>
                       {filteredProviders.map((providerId) => {
                         const ProviderIcon = PROVIDER_DEFINITIONS[providerId]?.icon
                         const providerName =
                           PROVIDER_DEFINITIONS[providerId]?.name ||
                           providerId.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
                         return (
-                          <div key={providerId} className='flex items-center gap-[8px]'>
+                          <div key={providerId} className='flex items-center gap-2'>
                             <Checkbox
                               checked={isProviderAllowed(providerId)}
                               onCheckedChange={() => toggleProvider(providerId)}
@@ -899,7 +895,7 @@ export function AccessControl() {
                             <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                               {ProviderIcon && <ProviderIcon className='!h-[16px] !w-[16px]' />}
                             </div>
-                            <span className='truncate font-medium text-[14px]'>{providerName}</span>
+                            <span className='truncate font-medium text-sm'>{providerName}</span>
                           </div>
                         )
                       })}
@@ -910,15 +906,15 @@ export function AccessControl() {
 
               <ModalTabsContent value='blocks'>
                 <ModalBody className='h-[400px]'>
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='flex items-center gap-[8px]'>
-                      <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                         <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                         <BaseInput
                           placeholder='Search blocks...'
                           value={integrationSearchTerm}
                           onChange={(e) => setIntegrationSearchTerm(e.target.value)}
-                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                         />
                       </div>
                       <Button
@@ -943,24 +939,24 @@ export function AccessControl() {
                           : 'Select All'}
                       </Button>
                     </div>
-                    <div className='grid max-h-[340px] grid-cols-3 gap-[8px] overflow-y-auto'>
+                    <div className='grid max-h-[340px] grid-cols-3 gap-2 overflow-y-auto'>
                       {filteredBlocks.map((block) => {
                         const BlockIcon = block.icon
                         return (
-                          <div key={block.type} className='flex items-center gap-[8px]'>
+                          <div key={block.type} className='flex items-center gap-2'>
                             <Checkbox
                               checked={isIntegrationAllowed(block.type)}
                               onCheckedChange={() => toggleIntegration(block.type)}
                             />
                             <div
-                              className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                              className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
                               style={{ background: block.bgColor }}
                             >
                               {BlockIcon && (
                                 <BlockIcon className='!h-[10px] !w-[10px] text-white' />
                               )}
                             </div>
-                            <span className='truncate font-medium text-[14px]'>{block.name}</span>
+                            <span className='truncate font-medium text-sm'>{block.name}</span>
                           </div>
                         )
                       })}
@@ -971,15 +967,15 @@ export function AccessControl() {
 
               <ModalTabsContent value='platform'>
                 <ModalBody className='h-[400px]'>
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='flex items-center gap-[8px]'>
-                      <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                         <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                         <BaseInput
                           placeholder='Search features...'
                           value={platformSearchTerm}
                           onChange={(e) => setPlatformSearchTerm(e.target.value)}
-                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                         />
                       </div>
                       <Button
@@ -1053,15 +1049,15 @@ export function AccessControl() {
                           : 'Select All'}
                       </Button>
                     </div>
-                    <div className='grid max-h-[340px] grid-cols-3 gap-x-[24px] gap-y-[16px] overflow-y-auto'>
+                    <div className='grid max-h-[340px] grid-cols-3 gap-x-6 gap-y-4 overflow-y-auto'>
                       {Object.entries(platformCategories).map(([category, features]) => (
-                        <div key={category} className='flex flex-col gap-[8px]'>
-                          <span className='font-medium text-[11px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                        <div key={category} className='flex flex-col gap-2'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-xs uppercase tracking-wide'>
                             {category}
                           </span>
-                          <div className='flex flex-col gap-[8px]'>
+                          <div className='flex flex-col gap-2'>
                             {features.map((feature) => (
-                              <div key={feature.id} className='flex items-center gap-[8px]'>
+                              <div key={feature.id} className='flex items-center gap-2'>
                                 <Checkbox
                                   id={feature.id}
                                   checked={!editingConfig?.[feature.configKey]}
@@ -1075,7 +1071,7 @@ export function AccessControl() {
                                 />
                                 <Label
                                   htmlFor={feature.id}
-                                  className='cursor-pointer font-normal text-[14px]'
+                                  className='cursor-pointer font-normal text-sm'
                                 >
                                   {feature.label}
                                 </Label>
@@ -1167,9 +1163,9 @@ export function AccessControl() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1182,38 +1178,38 @@ export function AccessControl() {
             />
           </div>
           <Button variant='primary' onClick={() => setShowCreateModal(true)}>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Create
           </Button>
         </div>
 
         <div className='relative min-h-0 flex-1 overflow-y-auto'>
           {filteredGroups.length === 0 && searchTerm.trim() ? (
-            <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+            <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
               No results found matching "{searchTerm}"
             </div>
           ) : permissionGroups.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Create" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredGroups.map((group) => (
                 <div key={group.id} className='flex items-center justify-between'>
                   <div className='flex flex-col'>
-                    <div className='flex items-center gap-[8px]'>
-                      <span className='font-medium text-[15px]'>{group.name}</span>
+                    <div className='flex items-center gap-2'>
+                      <span className='font-medium text-base'>{group.name}</span>
                       {group.autoAddNewMembers && (
-                        <span className='rounded-[4px] bg-[var(--surface-3)] px-[6px] py-[2px] text-[10px] text-[var(--text-muted)]'>
+                        <span className='rounded-sm bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                           Auto-enrolls
                         </span>
                       )}
                     </div>
-                    <span className='text-[14px] text-[var(--text-muted)]'>
+                    <span className='text-[var(--text-muted)] text-sm'>
                       {group.memberCount} member{group.memberCount !== 1 ? 's' : ''}
                     </span>
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     <Button variant='default' onClick={() => setViewingGroup(group)}>
                       Details
                     </Button>
@@ -1236,8 +1232,8 @@ export function AccessControl() {
         <ModalContent size='sm'>
           <ModalHeader>Create Permission Group</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex flex-col gap-[4px]'>
+            <div className='flex flex-col gap-3'>
+              <div className='flex flex-col gap-1'>
                 <Label>Name</Label>
                 <Input
                   value={newGroupName}
@@ -1248,7 +1244,7 @@ export function AccessControl() {
                   placeholder='e.g., Marketing Team'
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
+              <div className='flex flex-col gap-1'>
                 <Label>Description (optional)</Label>
                 <Input
                   value={newGroupDescription}
@@ -1256,7 +1252,7 @@ export function AccessControl() {
                   placeholder='e.g., Limited access for marketing users'
                 />
               </div>
-              <div className='flex items-center gap-[8px]'>
+              <div className='flex items-center gap-2'>
                 <Checkbox
                   id='auto-add-members'
                   checked={newGroupAutoAdd}
@@ -1266,7 +1262,7 @@ export function AccessControl() {
                   Auto-add new organization members
                 </Label>
               </div>
-              {createError && <p className='text-[13px] text-[var(--text-error)]'>{createError}</p>}
+              {createError && <p className='text-[var(--text-error)] text-small'>{createError}</p>}
             </div>
           </ModalBody>
           <ModalFooter>
diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
index 586b922f58..0caab5603d 100644
--- a/apps/sim/ee/sso/components/sso-auth.tsx
+++ b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -97,18 +97,18 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--text-primary)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'>
                   SSO Authentication
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   This chat requires SSO authentication
                 </p>
               </div>
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 8e8ee3e0be..9e4aeb0341 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -134,8 +134,12 @@ export default function SSOForm() {
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className={'font-[500] text-[#ECECEC] text-[32px] tracking-tight'}>Sign in with SSO</h1>
-        <p className={'font-[380] text-[#999] text-[16px]'}>Enter your work email to continue</p>
+        <h1 className={'font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'}>
+          Sign in with SSO
+        </h1>
+        <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
+          Enter your work email to continue
+        </p>
       </div>
 
       <form onSubmit={onSubmit} className={'mt-8 space-y-8'}>
@@ -186,10 +190,12 @@ export default function SSOForm() {
         <>
           <div className='relative my-6 font-light'>
             <div className='absolute inset-0 flex items-center'>
-              <div className='w-full border-[#2A2A2A] border-t' />
+              <div className='w-full border-[var(--landing-bg-elevated)] border-t' />
             </div>
             <div className='relative flex justify-center text-sm'>
-              <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or</span>
+              <span className='bg-[var(--landing-bg)] px-4 font-[340] text-[var(--landing-text-muted)]'>
+                Or
+              </span>
             </div>
           </div>
 
@@ -207,24 +213,24 @@ export default function SSOForm() {
 
       {/* Only show signup link if email/password signup is enabled */}
       {!isFalsy(env.NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED) && (
-        <div className='pt-6 text-center font-light text-[15px]'>
+        <div className='pt-6 text-center font-light text-base'>
           <span className='font-normal'>Don't have an account? </span>
           <Link
             href={`/signup${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
-            className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+            className='font-medium text-[var(--text-primary)] underline-offset-4 transition hover:text-white hover:underline'
           >
             Sign up
           </Link>
         </div>
       )}
 
-      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[14px] leading-relaxed sm:px-8 md:px-[44px]'>
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[var(--text-subtle)] text-sm leading-relaxed sm:px-8 md:px-[44px]'>
         By signing in, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--text-primary)] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -233,7 +239,7 @@ export default function SSOForm() {
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--text-primary)] hover:underline'
         >
           Privacy Policy
         </Link>
diff --git a/apps/sim/ee/sso/components/sso-settings.tsx b/apps/sim/ee/sso/components/sso-settings.tsx
index e4dcd4c28e..7c1eec013e 100644
--- a/apps/sim/ee/sso/components/sso-settings.tsx
+++ b/apps/sim/ee/sso/components/sso-settings.tsx
@@ -96,7 +96,7 @@ export function SSO() {
   if (isBillingEnabled) {
     if (!activeOrganization) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           You must be part of an organization to configure Single Sign-On.
         </div>
       )
@@ -104,7 +104,7 @@ export function SSO() {
 
     if (!hasEnterprisePlan) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           Single Sign-On is available on Enterprise plans only.
         </div>
       )
@@ -112,7 +112,7 @@ export function SSO() {
 
     if (!canManageSSO) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           Only organization owners and admins can configure Single Sign-On settings.
         </div>
       )
@@ -120,7 +120,7 @@ export function SSO() {
   } else {
     if (!isLoadingProviders && isSSOProviderOwner === false && providers.length > 0) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           Only the user who configured SSO can manage these settings.
         </div>
       )
@@ -378,54 +378,48 @@ export function SSO() {
     const providerCallbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${existingProvider.providerId}`
 
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         {/* Scrollable Content */}
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             {/* Provider Info */}
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Provider ID
-              </span>
-              <p className='text-[15px] text-[var(--text-primary)]'>
-                {existingProvider.providerId}
-              </p>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Provider ID</span>
+              <p className='text-[var(--text-primary)] text-base'>{existingProvider.providerId}</p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>
                 Provider Type
               </span>
-              <p className='text-[15px] text-[var(--text-primary)]'>
+              <p className='text-[var(--text-primary)] text-base'>
                 {existingProvider.providerType.toUpperCase()}
               </p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Domain</span>
-              <p className='text-[15px] text-[var(--text-primary)]'>{existingProvider.domain}</p>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Domain</span>
+              <p className='text-[var(--text-primary)] text-base'>{existingProvider.domain}</p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Issuer URL
-              </span>
-              <p className='break-all font-mono text-[14px] text-[var(--text-primary)]'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Issuer URL</span>
+              <p className='break-all font-mono text-[var(--text-primary)] text-sm'>
                 {existingProvider.issuer}
               </p>
             </div>
 
             {/* Callback URL */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <div className='flex items-center justify-between'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Callback URL
                 </span>
                 <Button
                   type='button'
                   variant='ghost'
                   onClick={() => copyToClipboard(providerCallbackUrl)}
-                  className='h-[22px] w-[22px] rounded-[4px] p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='h-[22px] w-[22px] rounded-sm p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                 >
                   {copied ? (
                     <Check className='h-[13px] w-[13px]' />
@@ -436,7 +430,7 @@ export function SSO() {
                 </Button>
               </div>
               <Input value={providerCallbackUrl} readOnly className='h-9' />
-              <p className='text-[14px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-sm'>
                 Configure this in your identity provider
               </p>
             </div>
@@ -454,7 +448,7 @@ export function SSO() {
   }
 
   return (
-    <form onSubmit={handleSubmit} autoComplete='off' className='flex h-full flex-col gap-[18px]'>
+    <form onSubmit={handleSubmit} autoComplete='off' className='flex h-full flex-col gap-4.5'>
       {/* Hidden dummy inputs to prevent browser password manager autofill */}
       <input
         type='text'
@@ -484,12 +478,10 @@ export function SSO() {
 
       {/* Scrollable Content */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[18px]'>
+        <div className='flex flex-col gap-4.5'>
           {/* Provider Type Selection */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Provider Type
-            </span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Provider Type</span>
             <Combobox
               value={formData.providerType}
               onChange={(value: string) =>
@@ -503,7 +495,7 @@ export function SSO() {
               editable={false}
               className='h-9'
             />
-            <p className='text-[14px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-sm'>
               {formData.providerType === 'oidc'
                 ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
                 : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
@@ -511,10 +503,8 @@ export function SSO() {
           </div>
 
           {/* Provider ID */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Provider ID
-            </span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Provider ID</span>
             <Combobox
               value={formData.providerId}
               onChange={(value: string) => handleInputChange('providerId', value)}
@@ -532,15 +522,15 @@ export function SSO() {
               )}
             />
             {showErrors && errors.providerId.length > 0 && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {errors.providerId.join(' ')}
               </p>
             )}
           </div>
 
           {/* Issuer URL */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Issuer URL</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Issuer URL</span>
             <Input
               type='url'
               placeholder='https://your-identity-provider.com/oauth2/default'
@@ -560,15 +550,15 @@ export function SSO() {
               )}
             />
             {showErrors && errors.issuerUrl.length > 0 && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {errors.issuerUrl.join(' ')}
               </p>
             )}
           </div>
 
           {/* Domain */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Domain</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Domain</span>
             <Input
               type='text'
               placeholder='your-domain.identityprovider.com'
@@ -588,7 +578,7 @@ export function SSO() {
               )}
             />
             {showErrors && errors.domain.length > 0 && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {errors.domain.join(' ')}
               </p>
             )}
@@ -597,10 +587,8 @@ export function SSO() {
           {/* Provider-specific fields */}
           {formData.providerType === 'oidc' ? (
             <>
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Client ID
-                </span>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>Client ID</span>
                 <Input
                   type='text'
                   placeholder='Enter Client ID'
@@ -620,14 +608,14 @@ export function SSO() {
                   )}
                 />
                 {showErrors && errors.clientId.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.clientId.join(' ')}
                   </p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Client Secret
                 </span>
                 <div className='relative'>
@@ -652,7 +640,7 @@ export function SSO() {
                         : undefined
                     }
                     className={cn(
-                      'h-9 pr-[36px]',
+                      'h-9 pr-9',
                       showErrors &&
                         errors.clientSecret.length > 0 &&
                         'border-[var(--text-error)] focus:border-[var(--text-error)]'
@@ -673,14 +661,14 @@ export function SSO() {
                   </Button>
                 </div>
                 {showErrors && errors.clientSecret.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.clientSecret.join(' ')}
                   </p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Scopes</span>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>Scopes</span>
                 <Input
                   type='text'
                   placeholder='openid,profile,email'
@@ -697,19 +685,19 @@ export function SSO() {
                   )}
                 />
                 {showErrors && errors.scopes.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.scopes.join(' ')}
                   </p>
                 )}
-                <p className='text-[14px] text-[var(--text-muted)]'>
+                <p className='text-[var(--text-muted)] text-sm'>
                   Comma-separated list of OIDC scopes to request
                 </p>
               </div>
             </>
           ) : (
             <>
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Entry Point URL
                 </span>
                 <Input
@@ -728,14 +716,14 @@ export function SSO() {
                   )}
                 />
                 {showErrors && errors.entryPoint.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.entryPoint.join(' ')}
                   </p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Identity Provider Certificate
                 </span>
                 <Textarea
@@ -754,20 +742,20 @@ export function SSO() {
                   rows={3}
                 />
                 {showErrors && errors.cert.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.cert.join(' ')}
                   </p>
                 )}
               </div>
 
               {/* Advanced SAML Options */}
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <button
                   type='button'
                   onClick={() =>
                     handleInputChange('showAdvanced', formData.showAdvanced ? 'false' : 'true')
                   }
-                  className='flex w-fit items-center gap-[6px] text-[14px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='flex w-fit items-center gap-1.5 text-[var(--text-muted)] text-sm hover:text-[var(--text-primary)]'
                 >
                   <ChevronDown
                     className={cn(
@@ -779,9 +767,9 @@ export function SSO() {
                 </button>
 
                 {formData.showAdvanced && (
-                  <div className='flex flex-col gap-[18px] pt-[8px]'>
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                  <div className='flex flex-col gap-4.5 pt-2'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         Audience (Entity ID)
                       </span>
                       <Input
@@ -796,8 +784,8 @@ export function SSO() {
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         Callback URL Override
                       </span>
                       <Input
@@ -812,8 +800,8 @@ export function SSO() {
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         Require signed SAML assertions
                       </span>
                       <Switch
@@ -824,8 +812,8 @@ export function SSO() {
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         IDP Metadata XML
                       </span>
                       <Textarea
@@ -846,16 +834,14 @@ export function SSO() {
           )}
 
           {/* Callback URL display */}
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <div className='flex items-center justify-between'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Callback URL
-              </span>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Callback URL</span>
               <Button
                 type='button'
                 variant='ghost'
                 onClick={() => copyToClipboard(callbackUrl)}
-                className='h-[22px] w-[22px] rounded-[4px] p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                className='h-[22px] w-[22px] rounded-sm p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
               >
                 {copied ? (
                   <Check className='h-[13px] w-[13px]' />
@@ -866,7 +852,7 @@ export function SSO() {
               </Button>
             </div>
             <Input value={callbackUrl} readOnly className='h-9' />
-            <p className='text-[14px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-sm'>
               Configure this in your identity provider
             </p>
           </div>
@@ -874,8 +860,8 @@ export function SSO() {
       </div>
 
       {/* Footer */}
-      <div className='mt-auto flex items-center justify-end gap-[8px]'>
-        {error && <p className='mr-auto text-[13px] text-[var(--text-error)]'>{error}</p>}
+      <div className='mt-auto flex items-center justify-end gap-2'>
+        {error && <p className='mr-auto text-[var(--text-error)] text-small'>{error}</p>}
         <Button
           type='submit'
           variant='primary'
@@ -896,32 +882,32 @@ export function SSO() {
 
 function SsoSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* Form fields skeleton */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[18px]'>
-          <div className='flex flex-col gap-[8px]'>
+        <div className='flex flex-col gap-4.5'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[80px]' />
             <Skeleton className='h-9 w-full' />
             <Skeleton className='h-[13px] w-[200px]' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[70px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[60px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[50px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[60px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[80px]' />
             <Skeleton className='h-9 w-full' />
           </div>
diff --git a/apps/sim/ee/whitelabeling/inject-theme.ts b/apps/sim/ee/whitelabeling/inject-theme.ts
index b5e7900cf3..c906178755 100644
--- a/apps/sim/ee/whitelabeling/inject-theme.ts
+++ b/apps/sim/ee/whitelabeling/inject-theme.ts
@@ -14,26 +14,24 @@ export function generateThemeCSS(): string {
   const cssVars: string[] = []
 
   if (process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR) {
-    cssVars.push(`--brand-primary-hex: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
-    // Override tertiary-2 so Run/Deploy buttons and other tertiary-styled elements use the brand color
-    cssVars.push(`--brand-tertiary-2: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
+    cssVars.push(`--brand: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
+    // Override brand-accent so Run/Deploy buttons and other accent-styled elements use the brand color
+    cssVars.push(`--brand-accent: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
   }
 
   if (process.env.NEXT_PUBLIC_BRAND_PRIMARY_HOVER_COLOR) {
-    cssVars.push(`--brand-primary-hover-hex: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_HOVER_COLOR};`)
+    cssVars.push(`--brand-hover: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_HOVER_COLOR};`)
   }
 
   if (process.env.NEXT_PUBLIC_BRAND_ACCENT_COLOR) {
-    cssVars.push(`--brand-accent-hex: ${process.env.NEXT_PUBLIC_BRAND_ACCENT_COLOR};`)
+    cssVars.push(`--brand-link: ${process.env.NEXT_PUBLIC_BRAND_ACCENT_COLOR};`)
   }
 
   if (process.env.NEXT_PUBLIC_BRAND_ACCENT_HOVER_COLOR) {
-    cssVars.push(`--brand-accent-hover-hex: ${process.env.NEXT_PUBLIC_BRAND_ACCENT_HOVER_COLOR};`)
+    cssVars.push(`--brand-link-hover: ${process.env.NEXT_PUBLIC_BRAND_ACCENT_HOVER_COLOR};`)
   }
 
   if (process.env.NEXT_PUBLIC_BRAND_BACKGROUND_COLOR) {
-    cssVars.push(`--brand-background-hex: ${process.env.NEXT_PUBLIC_BRAND_BACKGROUND_COLOR};`)
-
     // Add dark theme class when background is dark
     const isDark = isDarkBackground(process.env.NEXT_PUBLIC_BRAND_BACKGROUND_COLOR)
     if (isDark) {
diff --git a/apps/sim/ee/whitelabeling/metadata.ts b/apps/sim/ee/whitelabeling/metadata.ts
index e6bc3cccb8..a3c58182b4 100644
--- a/apps/sim/ee/whitelabeling/metadata.ts
+++ b/apps/sim/ee/whitelabeling/metadata.ts
@@ -90,12 +90,12 @@ export function generateBrandedMetadata(override: Partial<Metadata> = {}): Metad
         { url: '/favicon/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
         { url: '/favicon/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
         {
-          url: '/favicon/favicon-192x192.png',
+          url: '/favicon/android-chrome-192x192.png',
           sizes: '192x192',
           type: 'image/png',
         },
         {
-          url: '/favicon/favicon-512x512.png',
+          url: '/favicon/android-chrome-512x512.png',
           sizes: '512x512',
           type: 'image/png',
         },
@@ -117,7 +117,7 @@ export function generateBrandedMetadata(override: Partial<Metadata> = {}): Metad
       'apple-mobile-web-app-capable': 'yes',
       'mobile-web-app-capable': 'yes',
       'msapplication-TileColor': '#701FFC', // Default Sim brand primary color
-      'msapplication-config': '/favicon/browserconfig.xml',
+      'msapplication-config': 'none',
     },
     ...override,
   }
diff --git a/apps/sim/hooks/queries/chats.ts b/apps/sim/hooks/queries/chats.ts
index 94a5eb1947..fbb3daca93 100644
--- a/apps/sim/hooks/queries/chats.ts
+++ b/apps/sim/hooks/queries/chats.ts
@@ -106,7 +106,7 @@ function buildChatPayload(
     title: formData.title.trim(),
     description: formData.description.trim(),
     customizations: {
-      primaryColor: 'var(--brand-primary-hover-hex)',
+      primaryColor: 'var(--brand-hover)',
       welcomeMessage: formData.welcomeMessage.trim(),
       ...(imageUrl && { imageUrl }),
     },
diff --git a/apps/sim/hooks/use-branded-button-class.ts b/apps/sim/hooks/use-branded-button-class.ts
index bc42da139a..7039857ffe 100644
--- a/apps/sim/hooks/use-branded-button-class.ts
+++ b/apps/sim/hooks/use-branded-button-class.ts
@@ -16,7 +16,7 @@ export function useBrandedButtonClass(): BrandedButtonClass {
   useEffect(() => {
     const checkCustomBrand = () => {
       const computedStyle = getComputedStyle(document.documentElement)
-      const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
+      const brandAccent = computedStyle.getPropertyValue('--brand-link').trim()
 
       if (brandAccent && brandAccent !== DEFAULT_BRAND_ACCENT) {
         setButtonClass('branded-button-custom')
diff --git a/apps/sim/lib/blog/code.tsx b/apps/sim/lib/blog/code.tsx
index 412a256655..78854b73b3 100644
--- a/apps/sim/lib/blog/code.tsx
+++ b/apps/sim/lib/blog/code.tsx
@@ -7,7 +7,7 @@ interface CodeBlockProps {
 
 export function CodeBlock({ code, language }: CodeBlockProps) {
   return (
-    <div className='dark w-full overflow-hidden rounded-md border border-[#2a2a2a] bg-[#1F1F1F] text-sm'>
+    <div className='dark w-full overflow-hidden rounded-md border border-[var(--landing-bg-elevated)] bg-[var(--code-bg)] text-sm'>
       <Code.Viewer
         code={code}
         showGutter
diff --git a/apps/sim/lib/blog/faq.tsx b/apps/sim/lib/blog/faq.tsx
index 4e6fa5c0fe..5c92d4d640 100644
--- a/apps/sim/lib/blog/faq.tsx
+++ b/apps/sim/lib/blog/faq.tsx
@@ -2,12 +2,12 @@ export function FAQ({ items }: { items: { q: string; a: string }[] }) {
   if (!items || items.length === 0) return null
   return (
     <section className='mt-12'>
-      <h2 className='mb-4 font-medium text-[#ECECEC] text-[24px]'>FAQ</h2>
+      <h2 className='mb-4 font-medium text-[24px] text-[var(--landing-text)]'>FAQ</h2>
       <div className='space-y-6'>
         {items.map((it, i) => (
           <div key={i}>
-            <h3 className='mb-2 font-medium text-[#ECECEC] text-[20px]'>{it.q}</h3>
-            <p className='text-[#999] text-[19px] leading-relaxed'>{it.a}</p>
+            <h3 className='mb-2 font-medium text-[20px] text-[var(--landing-text)]'>{it.q}</h3>
+            <p className='text-[19px] text-[var(--text-subtle)] leading-relaxed'>{it.a}</p>
           </div>
         ))}
       </div>
diff --git a/apps/sim/lib/blog/mdx.tsx b/apps/sim/lib/blog/mdx.tsx
index 67302696f5..53eee7d086 100644
--- a/apps/sim/lib/blog/mdx.tsx
+++ b/apps/sim/lib/blog/mdx.tsx
@@ -20,7 +20,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <h2
       {...props}
       style={{ fontSize: '30px', marginTop: '3rem', marginBottom: '1.5rem' }}
-      className={clsx('font-medium text-[#ECECEC] leading-tight', className)}
+      className={clsx('font-medium text-[var(--landing-text)] leading-tight', className)}
     >
       {children}
     </h2>
@@ -29,7 +29,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <h3
       {...props}
       style={{ fontSize: '24px', marginTop: '1.5rem', marginBottom: '0.75rem' }}
-      className={clsx('font-medium text-[#ECECEC] leading-tight', className)}
+      className={clsx('font-medium text-[var(--landing-text)] leading-tight', className)}
     >
       {children}
     </h3>
@@ -38,7 +38,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <h4
       {...props}
       style={{ fontSize: '19px', marginTop: '1.5rem', marginBottom: '0.75rem' }}
-      className={clsx('font-medium text-[#ECECEC] leading-tight', className)}
+      className={clsx('font-medium text-[var(--landing-text)] leading-tight', className)}
     >
       {children}
     </h4>
@@ -47,14 +47,17 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <p
       {...props}
       style={{ fontSize: '19px', marginBottom: '1.5rem', fontWeight: '400' }}
-      className={clsx('text-[#999] leading-relaxed', props.className)}
+      className={clsx('text-[var(--text-subtle)] leading-relaxed', props.className)}
     />
   ),
   ul: (props: any) => (
     <ul
       {...props}
       style={{ fontSize: '19px', marginBottom: '1rem', fontWeight: '400' }}
-      className={clsx('list-outside list-disc pl-6 text-[#999] leading-relaxed', props.className)}
+      className={clsx(
+        'list-outside list-disc pl-6 text-[var(--text-subtle)] leading-relaxed',
+        props.className
+      )}
     />
   ),
   ol: (props: any) => (
@@ -62,14 +65,17 @@ export const mdxComponents: MDXRemoteProps['components'] = {
       {...props}
       style={{ fontSize: '19px', marginBottom: '1rem', fontWeight: '400' }}
       className={clsx(
-        'list-outside list-decimal pl-6 text-[#999] leading-relaxed',
+        'list-outside list-decimal pl-6 text-[var(--text-subtle)] leading-relaxed',
         props.className
       )}
     />
   ),
   li: (props: any) => <li {...props} className={clsx('mb-1', props.className)} />,
   strong: (props: any) => (
-    <strong {...props} className={clsx('font-semibold text-[#ECECEC]', props.className)} />
+    <strong
+      {...props}
+      className={clsx('font-semibold text-[var(--landing-text)]', props.className)}
+    />
   ),
   em: (props: any) => <em {...props} className={clsx('text-[#bbb] italic', props.className)} />,
   a: (props: any) => {
@@ -80,7 +86,10 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     return (
       <a
         {...props}
-        className={clsx('font-medium text-[#ECECEC] underline hover:text-white', props.className)}
+        className={clsx(
+          'font-medium text-[var(--landing-text)] underline hover:text-white',
+          props.className
+        )}
       />
     )
   },
@@ -90,7 +99,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
   hr: (props: any) => (
     <hr
       {...props}
-      className={clsx('my-8 border-[#2A2A2A]', props.className)}
+      className={clsx('my-8 border-[var(--landing-bg-elevated)]', props.className)}
       style={{ marginBottom: '1.5rem' }}
     />
   ),
@@ -134,7 +143,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
         <code
           {...props}
           className={clsx(
-            'rounded bg-[#2A2A2A] px-1.5 py-0.5 font-mono font-normal text-[#ECECEC] text-[0.9em]',
+            'rounded bg-[var(--surface-4)] px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-[var(--landing-text)]',
             props.className
           )}
           style={{ fontWeight: 400 }}
diff --git a/apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/deploy.ts b/apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/deploy.ts
index 0e25d9cce7..1d830cdfd3 100644
--- a/apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/deploy.ts
+++ b/apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/deploy.ts
@@ -156,7 +156,7 @@ export async function executeDeployChat(
         primaryColor:
           params.customizations?.primaryColor ||
           existingCustomizations.primaryColor ||
-          'var(--brand-primary-hover-hex)',
+          'var(--brand-hover)',
         welcomeMessage:
           params.customizations?.welcomeMessage ||
           existingCustomizations.welcomeMessage ||
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index fd6a8bf29d..64682d1f2d 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -37,9 +37,15 @@ export default {
         ],
       },
       fontSize: {
+        micro: '10px',
         xs: '11px',
-        small: '13px', // Override default 14px to 13px
-        base: '15px', // Override default 16px to 15px
+        caption: '12px',
+        small: '13px',
+        base: '15px',
+        md: '16px',
+      },
+      spacing: {
+        '4.5': '18px',
       },
       colors: {
         background: 'hsl(var(--background))',
@@ -106,9 +112,19 @@ export default {
         semibold: 'var(--font-weight-semibold)',
       },
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
+        xs: '2px',
         sm: 'calc(var(--radius) - 4px)',
+        md: 'calc(var(--radius) - 2px)',
+        lg: 'var(--radius)',
+      },
+      boxShadow: {
+        subtle: 'var(--shadow-subtle)',
+        medium: 'var(--shadow-medium)',
+        overlay: 'var(--shadow-overlay)',
+        kbd: 'var(--shadow-kbd)',
+        'kbd-sm': 'var(--shadow-kbd-sm)',
+        'brand-inset': 'var(--shadow-brand-inset)',
+        card: 'var(--shadow-card)',
       },
       transitionProperty: {
         width: 'width',
@@ -184,6 +200,14 @@ export default {
           from: { opacity: '0', transform: 'scale(0.96) translateY(4px)' },
           to: { opacity: '1', transform: 'scale(1) translateY(0)' },
         },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
       },
       animation: {
         'caret-blink': 'caret-blink 1.25s ease-out infinite',
@@ -198,8 +222,18 @@ export default {
         'slide-in-right': 'slide-in-right 350ms ease-out forwards',
         'slide-in-bottom': 'slide-in-bottom 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         'tour-tooltip-in': 'tour-tooltip-in 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+        'collapsible-down': 'collapsible-down 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+        'collapsible-up': 'collapsible-up 300ms cubic-bezier(0.4, 0, 0.2, 1)',
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [
+    require('tailwindcss-animate'),
+    require('@tailwindcss/typography'),
+    require('tailwindcss/plugin')(
+      ({ addVariant }: { addVariant: (name: string, definition: string) => void }) => {
+        addVariant('hover-hover', '@media (hover: hover) and (pointer: fine) { &:hover }')
+      }
+    ),
+  ],
 } satisfies Config