TerminalComponent {
  renders: "own UI (buttons, inputs, cards, text, etc.)"
  contains: "CSS for appearance"
  never: "contain any external margin"
  role: "leaves of the component tree; own visual styling and content"
}

LayoutComponent {
  doesNotRender: "any UI themselves"
  composedOf: "other layout or terminal components only"
  responsibleFor: "interior gaps between children"
  never: "contain any external margin"
  css: "Should not need CSS 90% of the time or more — use standard layout tokens"
  reRender: "Generally no business logic; should never re-render — keeps re-renders at terminal levels"
  exception: "Some layout components explicitly manage state (animating, tabs, accordions) — those have logic and may re-render"
}

fn whenCreatingOrModifyingUIComponent() {
  Constraints {
    Classify as terminal or layout; no overlap
    Terminal: owns UI and CSS; never external margin
    Layout: no own UI; only layout/terminal children; owns interior gaps; never external margin
    Prefer standard layout tokens for layout components; avoid custom CSS when possible
    Keep layout components free of business logic unless they explicitly manage layout state (tabs, accordions, animations)
  }
}