// Civic Modern — shared primitives: logo, section scaffolding, generic helpers. function GPMark({ size = 40, hollow = 'currentColor', solid = 'currentColor', style }) { return ( ); } function GPWordmark({ height = 28, hollow = 'currentColor', solid = 'currentColor', style }) { return ( ); } // A labelled band — "TYPOGRAPHY", "PALETTE", etc. Uses the orange accent bar. function Band({ label, code, children, pad = '48px 56px', border = true }) { const t = window.tokens; return (
{label && (
{label}
{code &&
{code}
}
)} {children}
); } // Small mono caption used as a sub-label. function Caption({ children, color, style }) { const t = window.tokens; return (
{children}
); } // Subtitle caption — plain sans, small, muted. function SubLabel({ children, style }) { const t = window.tokens; return (
{children}
); } // Component showcase tile — each component sits in one of these so spacing is uniform. function Tile({ label, children, style, pad = 24, minHeight = 160 }) { const t = window.tokens; return (
{label && (
{label}
)}
{children}
); } // Icon placeholder — real SVGs to be supplied later. // Renders a mono-glyph in a subtle box so you can tell where an icon belongs. function IconSlot({ label = 'icon', size = 16, color }) { const t = window.tokens; return ( {/* deliberately blank — the dashed box is the placeholder */} ); } Object.assign(window, { GPMark, GPWordmark, Band, Caption, SubLabel, Tile, IconSlot });