Every option below is the same step, changed in exactly one way, so the only thing being compared is the thing its caption names. A node's contrast is a figure-and-ground problem, not a node problem, so the canvas behind them switches at the top: judge each option on all three. Section 9 answers the separate order about tinted alert boxes.
Stated before the options so you can disagree with the diagnosis rather than only with the drawings.
#D4D4D8 hairline sitting on a
#FAFAFA canvas. White on near-white, separated by a light grey line, is about as
weak as figure and ground can get, and the dotted grid runs right up to the border and competes
with it. Then the type is small twice over: a 13px title and a 12px body, so the message the
whole node exists to show reads as caption text. ManyChat has none of these problems and does it
by removing the border entirely and leaning on a real shadow, with the body text at reading size.
That is the whole difference, and it is not one thing, which is why "literally everything" is a
fair description.
What separates the node from the canvas. This is the contrast complaint, and it is the axis that matters most.
Each step kind has a colour. Where it sits changes how loud the canvas is when twenty nodes are on it.
Channel, step kind, and which one leads.
The node exists to show what the contact receives, so this is the part that has to read first.
A wider node fits fewer steps on screen but needs less zooming to read.
Each button owns an outlet, so whatever shape it takes has to leave room for the dot on its right edge.
One option is easy to like alone. This is the same choice applied across the whole set, which is where a node look usually falls apart.
Your order: the tinted background with a border matching the text colour goes, across the whole app.
bg-card text-destructive over the shared
rounded-lg border base. Both the ordinary and the error alert sit on the plain card
surface with the same neutral border. Severity is carried by the text and icon colour only
([&>svg]:text-current), never by a tint and never by a coloured border. Source:
registry/new-york-v4/ui/alert.tsx in shadcn-ui/ui. ManyChat is consistent with this
in the one place the walk captured it: system events render as plain centred grey text inside the
message stream, not as tinted boxes (EVIDENCE 21).
Where it lives, so one edit covers the app:
components/ui/ui.css owns .cm-banner--bad/--warn/--info and
.cm-toast--success. QueryState.tsx is the error state of every screen
in the app and uses the banner, so removing the tint there removes it everywhere at once. Four
local copies of the same pattern exist outside the primitive and are listed in
ANNOTATIONS.md.
Not touched by this: the status pill (Live, Shadow, Off). A pill is a soft fill with no border and it is a label, not a box competing with the page. Say the word if you want those flattened too.