Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/components/ApplicableScopeField.tsx

@@ -117,7 +117,7 @@ function ApplicableScopeFieldComponent({
           <button
             type="button"
             onClick={() => setIsAdding(true)}
-            className="inline-flex items-center gap-[var(--measures-spacing-050,2px)] rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)]  text-x-small-label text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+            className="inline-flex items-center gap-[var(--space-050)] rounded-[var(--radius-full)] px-[var(--space-250)] py-[var(--space-200)]  text-x-small-label text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
           >
             <AddGlyph />
             {addLabel}

app/(app)/create/components/CreateFlowLockupCardStepShell.tsx

@@ -32,7 +32,7 @@ export function CreateFlowLockupCardStepShell({
       className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
     >
       <div
-        className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
+        className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--space-1200)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
       >
         <div
           className={`flex min-w-0 flex-col justify-start md:justify-center ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}

app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx

@@ -60,14 +60,14 @@ export function CreateFlowTwoColumnSelectShell({
     >
       <div
         className={
-          "flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] " +
+          "flex w-full min-w-0 flex-col items-start gap-[var(--space-400)] " +
           "max-lg:flex-none lg:max-h-full lg:min-h-0 lg:flex-1 lg:flex-row lg:flex-nowrap " +
-          `${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)] lg:overflow-hidden ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`
+          `${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--space-1200)] lg:overflow-hidden ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`
         }
       >
         <div
           className={
-            `flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--measures-spacing-200,8px)] ` +
+            `flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--space-200)] ` +
             `lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
           }
         >
@@ -75,7 +75,7 @@ export function CreateFlowTwoColumnSelectShell({
         </div>
         <div
           className={
-            `relative flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-800,32px)] ` +
+            `relative flex w-full min-w-0 flex-col items-start gap-[var(--space-800)] ` +
             `overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto ${CREATE_FLOW_SCROLL_END_PAD_CLASS} ` +
             `${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
           }

app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx

@@ -134,7 +134,7 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
                         block.blockTitle ||
                         noFileChosen
                       }
-                      className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
+                      className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
                     />
                   ) : (
                     <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">

app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardUploadBlockRow.view.tsx

@@ -71,7 +71,7 @@ function CustomMethodCardUploadBlockRowViewComponent({
           <img
             src={assetUrlTrimmed}
             alt={uploadPreviewImageAlt}
-            className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
+            className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
           />
         </div>
       ) : (

app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx

@@ -57,7 +57,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
             key={block.id}
             draggable
             aria-grabbed={isDragging ? true : undefined}
-            className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--measures-radius-medium,8px)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${
+            className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--radius-400)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${
               isDropTarget
                 ? "relative z-10 border-[var(--color-border-invert-primary)]"
                 : isDragging
@@ -74,7 +74,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
               tabIndex={0}
               aria-label={dragHandleAriaLabel}
               onPointerDown={onHandlePointerDown}
-              className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--measures-radius-200,8px)] px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]"
+              className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--radius-200)] px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]"
             >
               <DragHandleGlyph />
             </span>
@@ -82,7 +82,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
               type="button"
               aria-label={title}
               onClick={() => onEditBlock(block)}
-              className="flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--measures-radius-200,8px)] border-0 bg-transparent px-0 text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)]"
+              className="flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--radius-200)] border-0 bg-transparent px-0 text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)]"
             >
             <span className="flex h-8 w-8 shrink-0 items-center justify-center self-center">
               <Icon

app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx

@@ -46,7 +46,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
 
   if (fieldType === "text") {
     return (
-      <div className="flex flex-col gap-[var(--spacing-scale-024)]">
+      <div className="flex flex-col gap-[var(--space-600)]">
         <InputWithCounter
           label={copy.text.blockTitleLabel}
           placeholder={copy.text.blockTitlePlaceholder}
@@ -80,7 +80,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
 
   if (fieldType === "badges") {
     return (
-      <div className="flex flex-col gap-[var(--spacing-scale-024)]">
+      <div className="flex flex-col gap-[var(--space-600)]">
         <div className="flex flex-col gap-2">
           <InputLabel
             label={copy.badges.blockTitleLabel}
@@ -114,7 +114,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
 
   if (fieldType === "upload") {
     return (
-      <div className="flex flex-col gap-[var(--spacing-scale-024)]">
+      <div className="flex flex-col gap-[var(--space-600)]">
         <input
           ref={fileInputRef}
           type="file"
@@ -154,7 +154,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
             <img
               src={uploadPreviewTrimmed}
               alt={copy.upload.uploadPreviewImageAlt}
-              className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
+              className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
             />
           </div>
         ) : (
@@ -184,7 +184,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
   }
 
   return (
-    <div className="flex flex-col gap-[var(--spacing-scale-024)]">
+    <div className="flex flex-col gap-[var(--space-600)]">
       <InputWithCounter
         label={copy.proportion.blockTitleLabel}
         placeholder={copy.proportion.blockTitlePlaceholder}

app/(app)/create/components/FinalReviewChipEditModal.tsx

@@ -1112,7 +1112,7 @@ export function FinalReviewChipEditModal({
       }
       ariaLabel={target?.chipLabel || "Edit chip details"}
     >
-      <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+      <div className="flex flex-col gap-[var(--space-600)] pb-2">
         {draft?.groupKey === "coreValues" &&
           target &&
           (modalUsesWizardFieldBlocksBody ? (

app/(app)/create/components/ModalTextAreaField.tsx

@@ -107,13 +107,13 @@ function ModalTextAreaFieldComponent({
           <button
             type="button"
             onClick={() => onChange(draftSource)}
-            className="flex shrink-0 items-center justify-center gap-[var(--measures-spacing-050,2px)] overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] text-x-small-label text-[color:var(--color-content-default-primary,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+            className="flex shrink-0 items-center justify-center gap-[var(--space-050)] overflow-clip rounded-[var(--radius-full)] px-[var(--space-250)] py-[var(--space-200)] text-x-small-label text-[color:var(--color-content-default-primary,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
           >
             <PlusGlyph />
             {generateDraftLabel}
           </button>
           {generateDraftHint ? (
-            <p className="text-[length:var(--sizing-300,12px)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
+            <p className="text-[length:var(--sizing-300)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
               {generateDraftHint}
             </p>
           ) : null}

app/(app)/create/components/createFlowLayoutTokens.ts

@@ -48,7 +48,7 @@ export const CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS =
 export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
   "w-full min-w-0 lg:mx-auto lg:max-w-[640px]";
 
-/** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */
+/** Two 640px columns + `--space-1200` (48px) gutter. */
 export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS =
   "w-full min-w-0 lg:max-w-[1328px]";
 

app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx

@@ -42,7 +42,7 @@ function CoreValueEditFieldsComponent({
   );
 
   return (
-    <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+    <div className="flex flex-col gap-[var(--space-600)] pb-2">
       <ModalTextAreaField
         label={t.meaningLabel}
         value={value.meaning}

app/(app)/create/screens/completed/CompletedScreen.tsx

@@ -165,7 +165,7 @@ export function CompletedScreen() {
     <>
       <div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-[var(--color-teal-teal50,#c9fef9)] md:h-full">
         <div
-          className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
+          className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--space-1200)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
         >
           <div
             className={`flex flex-col justify-start max-md:min-h-min max-md:overflow-visible min-h-0 overflow-hidden md:justify-center md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}

app/(app)/create/screens/informational/InformationalScreen.tsx

@@ -36,7 +36,7 @@ export function InformationalScreen() {
       contentTopBelowMd="space-1400"
     >
       <div
-        className={`flex flex-col items-center gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
+        className={`flex flex-col items-center gap-[var(--space-1200)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
       >
         <CreateFlowHeaderLockup
           title={copy.title}

app/(app)/create/screens/review/CommunityReviewScreen.tsx

@@ -133,7 +133,7 @@ export function CommunityReviewScreen() {
       contentTopBelowMd="space-1400"
     >
       <div
-        className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--measures-spacing-1200,48px)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
+        className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--space-1200)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
       >
         <div
           className={`flex flex-col justify-center lg:min-h-[212px] ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}

app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx

@@ -190,7 +190,7 @@ export function ConfirmStakeholdersScreen() {
             hasLeadingIcon={false}
             hasBodyText={false}
             onClose={() => setToastDismissed(true)}
-            className="w-full !px-[var(--space-600,24px)] !py-[var(--space-400,16px)] md:!py-4"
+            className="w-full !px-[var(--space-600)] !py-[var(--space-400)] md:!py-4"
           />
         </div>
       )}

app/(app)/create/screens/upload/CommunityUploadScreen.tsx

@@ -241,7 +241,7 @@ export function CommunityUploadScreen() {
               <img
                 src={displaySrc ?? ""}
                 alt={u.previewAlt}
-                className="max-h-[200px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
+                className="max-h-[200px] max-w-full rounded-[var(--radius-200)] object-contain"
               />
             </div>
           ) : (

app/(app)/create/utils/createFlowFooterClassNames.ts

@@ -12,8 +12,8 @@
  */
 export const CREATE_FLOW_FOOTER_BUTTON_CLASS =
   "!text-x-small-label md:!text-small-label " +
-  "!px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] " +
-  "!py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]";
+  "!px-[var(--space-200)] md:!px-[var(--space-250)] " +
+  "!py-[var(--space-200)] md:!py-[var(--space-250)]";
 
 /**
  * Template-review "Use without changes" (ghost variant) renders on a dark

app/(app)/login/page.tsx

@@ -8,7 +8,7 @@ import Login from "../../components/modals/Login";
 import LoginForm from "../../components/modals/Login/LoginForm";
 
 const loginPageBgClass =
-  "min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]";
+  "min-h-[100dvh] bg-[var(--color-surface-invert-brand-primary)]";
 
 function LoginLoadingFallback() {
   const t = useTranslation("pages.login");

app/(app)/profile/_components/ProfilePage.view.tsx

@@ -510,7 +510,8 @@ export function ProfilePageView({
             <Button
               type="button"
               size="medium"
-              buttonType="danger"
+              buttonType="outline"
+              danger
               palette="default"
               onClick={onConfirmDeleteAccount}
               disabled={accountDeleteBusy}
@@ -576,7 +577,7 @@ export function ProfilePageView({
       >
         {emailChangeRequestSent ? (
           <div className="flex flex-col gap-3 pt-2">
-            <div className="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-inverse-brand-primary)]">
+            <div className="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-invert-brand-primary)]">
               <Icon name="mail" size={22} aria-hidden />
             </div>
           </div>