# Site Components — Contract for Page Subagents

## Imports

```ts
import { Nav, Footer, StatusTerminal, GridOverlay, Button, TechChip } from "@/components/site";
```

## Rules

- **Do NOT** redefine `<Nav>` or `<Footer>` in page files. They are wired in `src/app/(frontend)/layout.tsx`.
- `<StatusTerminal>` reads `NEXT_PUBLIC_BUILD_SHA` and `NEXT_PUBLIC_BUILD_REV` at build time. Accept `location` and `status` props to override defaults.
- `<GridOverlay>` is `position: absolute` — wrap parent in `relative overflow-hidden`.

## Color Token Classes

| Token | Tailwind class |
|---|---|
| Background | `bg-background` |
| Primary accent | `text-primary`, `bg-primary` |
| Secondary | `text-secondary` |
| Tertiary (terminal green) | `text-tertiary` |
| Surface base | `bg-surface-container` |
| Surface low | `bg-surface-container-low` |
| Surface high | `bg-surface-container-high` |
| Surface highest | `bg-surface-container-highest` |
| Surface lowest | `bg-surface-container-lowest` |
| Underscore aliases | `bg-surface_container_high`, `text-on_surface`, `text-outline_variant` |
| Text default | `text-on-surface` |
| Text muted | `text-on-surface-variant` |
| Border ghost | `border-outline-variant/15` |

## Typography Utility Classes

| Class | Usage |
|---|---|
| `.display-lg` | Hero headline (H1) |
| `.display-md` | Sub-hero or section hero |
| `.display-sm` | Large section titles |
| `.headline-lg` | Section headings (H2) |
| `.title-lg` | Card / module titles (H3) |
| `.body-lg` | Primary body copy |
| `.body-md` | Secondary / card body |
| `.label-md` | ALL CAPS metadata labels |
| `.label-sm` | Tiny ALL CAPS technical labels, chips |

## Button Variants

```tsx
<Button variant="primary">CTA Label</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
```

## Design Rules (from DESIGN.md)

- No `border-1 solid` at 100% opacity. Use `border-outline-variant/15` or tonal shifts.
- No `rounded-full` on cards. Use `rounded-md` (0.375rem) or `rounded-sm`.
- No drop shadows on cards sitting on `bg-background`. Use `bg-surface-container-high` lift.
- Glass surfaces: add class `glass` (backdrop-blur-24px + semi-transparent surface_bright).