Contents Purpose Anatomy Variants States Tokens Used Accessibility Behavior Standard layout Compact layout Platform Notes Component: title-block Purpose Display structured project metadata in a grid layout inspired by architectural drawing title blocks. Shows a project name and drawing title alongside a metadata grid of labeled fields and prominent sheet/revision badges. Anatomy title-block — outer grid container, 2px border title-block-main — left area: project name + drawing title title-block-name — project name heading title-block-title — drawing/document title title-block-meta — right metadata grid, 2-column title-block-field — individual metadata cell title-block-label — field label, uppercase sans title-block-value — field value, mono title-block-footer — bottom-right badge area title-block-badge — individual badge cell title-block-badge-label — badge label title-block-badge-value — badge value, large mono Variants Class Visual Usage title-block Standard — side-by-side layout Default for wider contexts title-block-compact Stacked — single column Narrower contexts, mobile States Non-interactive component. No hover, focus, or active states. Tokens Used --space-1, --space-2, --space-3, --space-4, --space-5 --text-xs, --text-sm, --text-base, --text-md, --text-lg --leading-tight, --leading-normal --font-serif, --font-sans, --font-mono --color-neutral-900 --color-surface-primary --color-text-primary, --color-text-secondary, --color-text-tertiary --color-border-default Accessibility Non-interactive; no ARIA roles or keyboard behavior required. Use semantic headings for project name if appropriate in context (e.g. <h2> for title-block-name). Ensure sufficient contrast between label and value text (tertiary vs primary). Behavior Standard layout Container: display: grid, grid-template-columns: 1fr auto, grid-template-rows: auto auto. Main area spans the full left column height, vertically centers its content. Meta area is a 2-column sub-grid for label/value field pairs. Footer is a 2-column sub-grid for sheet/revision badges, separated by a 2px top border. All internal dividers use 1px --color-border-default; outer border and structural dividers use 2px --color-neutral-900. Compact layout Single column: grid-template-columns: 1fr. Main stacks on top with border-bottom instead of border-right. Meta and footer span the full width below. Platform Notes Web: CSS in @layer components. One file: title-block.css. macOS: Map to a structured SwiftUI Grid or LazyVGrid.