<div
  style={{
    height: 50,
    width: 50,
    background: useColor().background.brandAccent,
  }}
/>

Development considerations

Retrieves the semantic colour palette of the current theme from context.
const { background } = useColor();

return (
  <div
    style={{
      width: 50,
      height: 50,
      backgroundColor: background.brandAccent,
    }}
  />
);

Alternatives

  • Box For custom layouts.
Branch preview: