fix(workflow): floor header-only card height, adopt brand tag palette

The Start card intermittently collapsed after load, squashing the
action-menu tab so its icon row sat over the card.

`.workflow-drag-handle` is the host the border renderer measures, and both
it and the header row took their height from `blockHeight && blockHeight >
0`. `blockHeight` comes from the deterministic-dimensions pass and is
already floored at MIN_PAINTED_HEIGHT (48), but it is absent on the first
frames — and with no floor the host collapsed to its natural content
height (25.5px for a header-only trigger, exactly the title's line box).
The border builds its perimeter from `host.offsetHeight`, so that window
painted a sub-floor card: too little straight edge remained on the
vertical runs for the action-menu tab, which collapsed into the corner
arcs. Whether you saw it depended purely on whether the dimension publish
had landed, which is why it reproduced on one workflow and not another.

Floor all three: the host, the header row (so `items-center` centres the
title and type tag rather than pinning them to the top), and the border's
own `offsetHeight` read.

Also raise ACTION_MENU_CONTENT_READY_THRESHOLD to 0.9. At 0.8 the 24px
icon row was revealed while the swell had only reached 22.4px of its 28px
— shorter than the row it contains. Secondary to the above, but a real
overflow window on its own. The test now pins the ratio rather than the
constant.

Tag palette moves to fixed brand values (hex, not derived oklch) with two
inks — #F8F8F8 on dark fills, #1A1A1A on light. Tones are renamed to match
what they render. `green` (2.55:1) and `orange` (3.15:1) sit under WCAG AA
against their paired ink; both are deliberate brand decisions and are
documented in the component.

Deploy and Run take two new Button variants rather than className
overrides, so `tertiary` stays green everywhere else.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx

@@ -127,7 +127,11 @@ export function Deploy({
             <Button
               className='h-[30px] gap-1.5 px-2.5'
               variant={
-                isRegistryLoading ? 'active' : changeDetected || !isDeployed ? 'tertiary' : 'active'
+                isRegistryLoading
+                  ? 'active'
+                  : changeDetected || !isDeployed
+                    ? 'graphiteSubtle'
+                    : 'active'
               }
               onClick={onDeployClick}
               disabled={isRegistryLoading || isDisabled}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -742,7 +742,7 @@ export const Panel = memo(function Panel() {
               />
               <Button
                 className='h-[30px] gap-2 px-2.5'
-                variant={isExecuting ? 'active' : 'tertiary'}
+                variant={isExecuting ? 'active' : 'graphite'}
                 onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
                 disabled={!isExecuting && isButtonDisabled}
               >

apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx

@@ -165,10 +165,17 @@ describe('WorkflowBlockBorder mount', () => {
     expect(getWorkflowBorderFrameDeltaSeconds(10_000, 100)).toBeCloseTo(1 / 30)
   })
 
-  it('reveals action-menu content only after the opening swell is ready', () => {
-    expect(isActionMenuSwellReady(1, 0.79)).toBe(false)
-    expect(isActionMenuSwellReady(1, 0.8)).toBe(true)
+  it('reveals action-menu content only once the swell can contain it', () => {
+    /* The row clips to the swell, so revealing it while the swell is shorter
+       than the buttons collides the icons with the card's top edge. Pin the
+       ratio, not the threshold constant — 24px of buttons in a 28px swell. */
+    const ACTION_ROW_HEIGHT_PX = 24
+    const OPEN_SWELL_HEIGHT_PX = 28
+    const minimumSafeFraction = ACTION_ROW_HEIGHT_PX / OPEN_SWELL_HEIGHT_PX
+
+    expect(isActionMenuSwellReady(1, minimumSafeFraction - 0.001)).toBe(false)
     expect(isActionMenuSwellReady(1, 1)).toBe(true)
+    /* Never reveal while retracting, however far open the swell still is. */
     expect(isActionMenuSwellReady(0, 1)).toBe(false)
   })
 

packages/emcn/src/components/button/button.tsx

@@ -21,6 +21,13 @@ const buttonVariants = cva(
         secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
         tertiary:
           'bg-[var(--brand-accent)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--brand-accent-hover)] dark:bg-[var(--brand-accent)] dark:hover-hover:bg-[var(--brand-accent-hover)] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]',
+        /* Fixed brand pairs, matching the workflow type tags rather than the
+           theme tokens — `graphite` is the Agent tag's fill and ink. Both hold
+           one value across modes, so neither takes a `dark:` override. */
+        graphite:
+          'bg-[#3B3B3B] text-[#F8F8F8] hover-hover:text-[#F8F8F8] hover-hover:brightness-125',
+        graphiteSubtle:
+          'bg-[#E6E6E6] text-[#3B3B3B] hover-hover:text-[#3B3B3B] hover-hover:brightness-[0.96]',
         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)]',

packages/emcn/src/components/chip-tag/chip-tag.tsx

@@ -20,8 +20,26 @@ import { cn } from '../../lib/cn'
  *   inverse-surface convention one step softer than near-black. For eyebrow
  *   kickers and emphasis labels that should read as a solid chip rather than a
  *   bordered one.
- * - `workflow` — a restrained type cue for workflow cards. Pair with `tone`;
- *   the icon remains the non-color identifier.
+ * - `workflow` — the brand type cue for workflow cards. Pair with `tone`; the
+ *   icon inherits the label colour and remains the non-colour identifier.
+ *
+ *   These are fixed brand values, not derived ones — do not "correct" a hex
+ *   for contrast or gamut. Every label is one of two inks: `#F8F8F8` when the
+ *   fill is dark, `#1A1A1A` when it is light. `#3B3B3B` appears only as
+ *   `inverse`'s fill, never as text. One value serves both modes; the tones
+ *   carry no `dark:` overrides.
+ *
+ *   Contrast against the paired ink varies, and two pairs sit under WCAG AA
+ *   (4.5:1) for normal text: `green` at 3.98:1 and `orange` at 3.15:1. These
+ *   are brand decisions rather than oversights. Because the label is short and
+ *   always duplicated by an icon and the block name beside it, the tag is a
+ *   redundant cue rather than the sole carrier of the information — but do not
+ *   reuse either pairing anywhere the label stands alone.
+ *
+ *   `neutral` is the only tone that is not a solid fill — an unmapped block
+ *   type reads as a white, outlined slot rather than as one more colour in the
+ *   set. Every other tone is fill-only, so it is also the only one whose edge
+ *   depends on the ring rather than on the fill itself.
  * - `invite` — recipient pill used in invite/sharing flows. Borrows the chip
  *   family's icon gap (`gap-1.5`), `--text-body` label, and `--text-icon`
  *   leading/trailing icons; pairs with the `invalid` boolean to flip to an
@@ -43,11 +61,11 @@ const chipTagVariants = cva(
       tone: {
         neutral: '',
         inverse: '',
-        teal: '',
-        indigo: '',
-        indigoStrong: '',
-        violet: '',
-        amber: '',
+        ash: '',
+        orange: '',
+        blue: '',
+        green: '',
+        yellow: '',
       },
     },
     compoundVariants: [
@@ -59,45 +77,18 @@ const chipTagVariants = cva(
       {
         variant: 'workflow',
         tone: 'neutral',
-        className:
-          'bg-[oklch(0.91_0.012_230)] text-[oklch(0.29_0.015_230)] dark:bg-[oklch(0.32_0.012_230)] dark:text-[oklch(0.9_0.015_230)]',
-      },
-      {
-        variant: 'workflow',
-        tone: 'inverse',
-        className:
-          'bg-[oklch(0.4386_0_0)] text-[oklch(1_0_0)] dark:bg-[oklch(1_0_0)] dark:text-[oklch(0.4386_0_0)]',
-      },
-      {
-        variant: 'workflow',
-        tone: 'teal',
-        className:
-          'bg-[oklch(0.91_0.025_190)] text-[oklch(0.3_0.045_190)] dark:bg-[oklch(0.31_0.035_190)] dark:text-[oklch(0.9_0.035_190)]',
-      },
-      {
-        variant: 'workflow',
-        tone: 'indigo',
-        className:
-          'bg-[oklch(0.91_0.03_270)] text-[oklch(0.3_0.05_270)] dark:bg-[oklch(0.31_0.04_270)] dark:text-[oklch(0.9_0.035_270)]',
-      },
-      {
-        variant: 'workflow',
-        tone: 'indigoStrong',
-        className:
-          'bg-[oklch(0.88_0.065_270)] text-[oklch(0.28_0.075_270)] dark:bg-[oklch(0.33_0.065_270)] dark:text-[oklch(0.92_0.05_270)]',
-      },
-      {
-        variant: 'workflow',
-        tone: 'violet',
-        className:
-          'bg-[oklch(0.91_0.028_305)] text-[oklch(0.3_0.045_305)] dark:bg-[oklch(0.31_0.04_305)] dark:text-[oklch(0.9_0.035_305)]',
-      },
-      {
-        variant: 'workflow',
-        tone: 'amber',
-        className:
-          'bg-[oklch(0.92_0.032_80)] text-[oklch(0.32_0.055_70)] dark:bg-[oklch(0.32_0.04_80)] dark:text-[oklch(0.91_0.04_80)]',
+        /* The only outlined tone. An unmapped block type reads as an empty
+           slot rather than a colour, so the fill is plain white and an inset
+           ring — not a border — carries the edge, keeping the tag the same
+           size as every filled sibling. */
+        className: 'bg-[#FFFFFF] text-[#1A1A1A] shadow-[inset_0_0_0_1px_#C3C3C3]',
       },
+      { variant: 'workflow', tone: 'inverse', className: 'bg-[#3B3B3B] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'ash', className: 'bg-[#E6E6E6] text-[#1A1A1A]' },
+      { variant: 'workflow', tone: 'orange', className: 'bg-[#FF4C00] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'blue', className: 'bg-[#0062FF] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'green', className: 'bg-[#188F00] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'yellow', className: 'bg-[#FFEF08] text-[#1A1A1A]' },
     ],
     defaultVariants: {
       variant: 'mono',
@@ -162,7 +153,13 @@ export function ChipTag({
   rightIconDisabled,
   ...props
 }: ChipTagProps) {
-  const iconClass = cn('size-[14px] flex-shrink-0', !invalid && 'text-[var(--text-icon)]')
+  /* `workflow` icons inherit the tone's tinted label colour. The shared
+     `--text-icon` gray is tuned for this component's light surfaces and would
+     all but disappear on a tone's deep fill. */
+  const iconClass = cn(
+    'size-[14px] flex-shrink-0',
+    !invalid && variant !== 'workflow' && 'text-[var(--text-icon)]'
+  )
   const interactive = RightIcon != null && onRightIconClick != null
 
   return (

packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx

@@ -5,6 +5,7 @@ import {
   type PositionedSourceHandleSide,
   type WorkflowCardSide,
 } from '@sim/workflow-types/workflow'
+import { BLOCK_DIMENSIONS } from '../dimensions'
 
 const BORDER_PADDING_PX = 36
 const SAMPLE_SPACING_PX = 1
@@ -70,7 +71,14 @@ const SPRING_STIFFNESS = 300
 const SPRING_DAMPING = 32
 const ACTION_MENU_SPRING_STIFFNESS = 480
 const ACTION_MENU_SPRING_DAMPING = 38
-const ACTION_MENU_CONTENT_READY_THRESHOLD = 0.8
+/**
+ * Must stay above the action row's own height as a fraction of the fully-open
+ * swell (24px of buttons in a 28px swell = 0.857). Below that the row is
+ * revealed while the swell is still shorter than it is, and because the row
+ * clips to the swell height the icons collide with the card's top edge for the
+ * remainder of the opening spring.
+ */
+const ACTION_MENU_CONTENT_READY_THRESHOLD = 0.9
 /** Quick deswell when the swell hands off to a hovered knob. */
 const CURSOR_SNAP_SPRING_STIFFNESS = 560
 const CURSOR_SNAP_SPRING_DAMPING = 42
@@ -867,7 +875,11 @@ export function WorkflowBlockBorder({
       /* offsetWidth/Height, not getBoundingClientRect: the card sits inside
          the canvas' zoom transform and a scaled rect would drift the geometry. */
       const width = host.offsetWidth
-      const nextHeight = host.offsetHeight
+      /* Clamped: below MIN_PAINTED_HEIGHT the perimeter has no straight run
+         left on the vertical edges and the action-menu tab collapses into the
+         corner arcs. The host carries the same floor; this keeps the geometry
+         correct even if a caller sizes one some other way. */
+      const nextHeight = Math.max(host.offsetHeight, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT)
       if (Number.isFinite(width) && Number.isFinite(nextHeight) && width > 0 && nextHeight > 0) {
         setSize((current) =>
           current.width === width && current.height === nextHeight

packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx

@@ -102,14 +102,14 @@ export function getNearestBranchCursorHandleId(
 
 const WORKFLOW_TYPE_ACCENTS = {
   agent: { variant: 'workflow', tone: 'inverse' },
-  api: { variant: 'workflow', tone: 'indigo' },
-  condition: { variant: 'workflow', tone: 'violet' },
-  credential: { variant: 'workflow', tone: 'amber' },
-  file: { variant: 'workflow', tone: 'indigo' },
-  file_v5: { variant: 'workflow', tone: 'indigo' },
-  function: { variant: 'workflow', tone: 'violet' },
-  router_v2: { variant: 'workflow', tone: 'indigoStrong' },
-  table: { variant: 'workflow', tone: 'teal' },
+  api: { variant: 'workflow', tone: 'orange' },
+  condition: { variant: 'workflow', tone: 'ash' },
+  credential: { variant: 'workflow', tone: 'yellow' },
+  file: { variant: 'workflow', tone: 'orange' },
+  file_v5: { variant: 'workflow', tone: 'orange' },
+  function: { variant: 'workflow', tone: 'ash' },
+  router_v2: { variant: 'workflow', tone: 'blue' },
+  table: { variant: 'workflow', tone: 'green' },
 } as const
 
 const DEFAULT_WORKFLOW_TYPE_ACCENT = { variant: 'workflow', tone: 'neutral' } as const
@@ -796,7 +796,15 @@ export function WorkflowBlockView({
         className={cn(
           'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-2xl [&:active]:cursor-grabbing'
         )}
-        style={blockHeight && blockHeight > 0 ? { minHeight: blockHeight } : undefined}
+        /* Never let the host fall below the shortest silhouette the border can
+           paint. `blockHeight` arrives from the deterministic-dimensions pass
+           and is already floored at MIN_PAINTED_HEIGHT, but it is absent on the
+           first frames — and with no floor the host collapses to its natural
+           content height (~25px for a header-only trigger). The border builds
+           its perimeter from `host.offsetHeight`, so that window paints a
+           sub-floor card: the action-menu tab is squashed and its icon row
+           spills onto the card. */
+        style={{ minHeight: Math.max(blockHeight ?? 0, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT) }}
       >
         <WorkflowBlockBorder
           nodeId={id}
@@ -868,9 +876,14 @@ export function WorkflowBlockView({
             'flex items-center justify-between px-2',
             hasContentBelowHeader && 'h-[40px]'
           )}
+          /* Header-only cards stretch the header to the full card so its
+             `items-center` centres the title and type tag. Floored for the
+             same reason the host is: without it the row collapses to its
+             natural height on the frames before `blockHeight` arrives and the
+             content pins to the top of the card. */
           style={
-            !hasContentBelowHeader && blockHeight && blockHeight > 0
-              ? { height: blockHeight }
+            !hasContentBelowHeader
+              ? { height: Math.max(blockHeight ?? 0, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT) }
               : undefined
           }
         >