A line-by-line read of a real block, and why each part is shaped the way it is.
Here is marketing/cta-banner in full. It is representative: about eighty
lines, no props, no local state.
Every block opens with <Box as="section"> carrying only vertical padding, and
a <Container> setting the horizontal bound. Nothing else touches page-level
spacing, so blocks stack in any order without margins colliding.
The responsive padding pair — py={{ base: "16", md: "24" }} — is the house
rhythm. Marketing sections use 16/24; application blocks use 10/16 because
they usually sit inside a shell that already has padding.
solid and contrast are a guaranteed-legible pair, in both colour modes and
for every palette. This is why blocks never write bg="teal.500" color="white" — that combination fails for yellow.
The banner is already accent-coloured, so an accent button would disappear.
Naming gray here scopes the palette to that one button — the rest of the
block still follows the global accent.
This is the only place a block is allowed to name a palette, and it is always because the element sits on an accent surface.
textStyle={{ base: "2xl", md: "4xl" }} sets size, line height and letter
spacing together. Blocks never set fontSize and lineHeight separately —
textStyle keeps the vertical rhythm consistent across every block that uses
the same step.