The Laws of Jarvis

A component (`.c-card`, `.c-button`) must never define its position in the broader page. It must not contain `margin-top`, `width: 300px`, `position: absolute`, or `grid-column`.

Enforcement: All external spacing and grid placements are handled strictly by Layout primitives (`.l-section`) or Utility classes (`.u-w-full`). Components dictate their *internal* geometry only (padding, internal flex direction).

Hardcoded hex codes, pixel font sizes, or raw spacing values (`padding: 16px`, `color: #FF5F00`) are strictly forbidden anywhere outside of `tokens.css`.

Enforcement: Every color, space, typography, transition speed, and radius must reference a `var(--token-name)`. If a token does not exist for a specific need, the system must be evaluated to see if a new token logic is required, or if the design request is violating system integrity.

Do not create a new CSS class for a unique layout combination or a one-off visual tweak. If you need a container to be `display: flex; justify-content: space-between; margin-bottom: 24px;`, you construct it in HTML.

Enforcement: E.g., ` <div class="u-flex u-justify-between u-mb-l">`. Utility classes are immutable and prefixed with `u-`.

Using the `style=""` attribute in HTML is a critical violation of separation of concerns and bypasses the token system entirely.

Enforcement: If a style cannot be achieved via existing components or utilities, the utility layer or token layer is incomplete and must be formally amended. *(Exception: JavaScript-driven dynamic calculations like progress bars `style="width: 45%;"`).*

Naked classes (`.card`, `.btn`) are forbidden due to conflict risk. Every class must declare its structural intent via its prefix.

• .l-* = Layout (Structural page definitions)
• .u-* = Utility (Atomic, single-purpose classes)
• .c-* = Component (The base structural DNA)
• .pb-* = Prebuilt / Pattern (Visual variants applying tokens to a component)

A component must adapt to any container it is placed within. We favor modern Container Queries (`@container`) over rigid Media Queries (`@media`) for component-level responsiveness.

Enforcement: A `.c-card` placed in a 300px sidebar must look as deliberately designed as when it is placed in an 800px main content area. Only Layout primitives (`.l-*`) are permitted to use Viewport Media Queries.

A base component (`.c-button`) should only have minimal structural styling. Visual identity (brand colors, outline styles, ghost states) is applied via a Prebuilt hook (`.pb-btn-primary`).

Enforcement: `.pb-*` classes extend `.c-*` classes. A `.pb-*` class can change `background`, `border-color`, and `opacity`, but it should almost never change `padding` or `display`, which belong to `.c-*`.

Pages must begin with layout primitives: l-section → l-container → l-stack or l-grid. Tables and forms belong directly in layout primitives; cards only for entity previews, summaries, metrics. No cards wrapping tables, forms, or entire sections.

All color usage must meet WCAG 2.1/2.2 contrast. Normal text 4.5:1 minimum; large text 3:1. Focus states visible and 3:1 minimum. Semantic tokens in tokens.css must meet contrast ratios.

Navbar, header, footer, hero, sidebar, page shell MUST use prebuilt components (pb-*). No semantic HTML as system structure unless instructed. Use pb-navbar-* and official prebuilts only.

All adaptive behavior MUST use container queries. Prebuilts include container-type: inline-size; use @container rules. No viewport media queries unless required. No inline styles or raw flex/grid in page HTML.

FABs are mobile-only, container-query driven. Primary FAB = global Add; icon rotates + to × when expanded. Expanded actions = Add-type only. View-details pages have a three-dot menu. Row actions become icon-only on mobile. All FAB styling token-driven (pb-floating-action-*).