/* ============================================================ Component Library — the atomic vocabulary Shows the 31 atomic elements grouped by category, using real screenshots from the actual design system. ============================================================ */ /* Inline SVG icons — rendered on dark background to match their actual context */ const ICON_SVGS = [ { name: "Turn Right", svg: ( ), }, { name: "Turn Left", svg: ( ), }, { name: "Turn Around", svg: ( ), }, { name: "Warning", svg: ( ), }, { name: "Star", svg: ( ), }, { name: "Flag", svg: ( ), }, { name: "Leaves", svg: ( ), }, { name: "Cloud", svg: ( ), }, { name: "Calendar", svg: ( ), }, { name: "Accident", svg: ( ), }, { name: "Food", svg: ( ), }, { name: "Gas Station", svg: ( ), }, { name: "WiFi", svg: ( ), }, { name: "Parking", svg: ( ), }, { name: "WC", svg: ( ), }, ] function Prototype() { const groups = [ { label: "Typography · 8 styles", desc: "Text styles the LLM can assign to any content it generates. Weight, size, and color are fixed per style to maintain visual hierarchy.", items: [ { name: "HeadlineText", img: "/case-study/assets/elements/type-headline.png", }, { name: "SecondaryNumText", img: "/case-study/assets/elements/type-secondary-num.png", }, { name: "SecondaryContinuousMultilineText", img: "/case-study/assets/elements/type-continuous-multiline.png", }, { name: "TertiaryContinuousDemiText", img: "/case-study/assets/elements/type-continuous-demi.png", }, { name: "TertiaryContinuousLightText", img: "/case-study/assets/elements/type-continuous-light.png", }, { name: "TertiarySingleLineDemiText", img: "/case-study/assets/elements/type-single-line.png", }, { name: "TertiarySingleLineLightText", img: null }, { name: "SyncText", img: "/case-study/assets/elements/type-sync.png" }, ], }, { label: "Icons · 15 glyphs", desc: "A fixed icon set. The LLM references icons by name. No custom icons can be generated.", custom: "icons", }, { label: "Containers · 2", desc: "The two screen regions the LLM can target. It decides which container each piece of content goes into based on priority and information type.", items: [ { name: "AppPanel (vertical content area)", img: "/case-study/assets/elements/app-panel.png", note: "Left side of the screen. Holds primary content like navigation, alerts, and lists.", }, { name: "ZeroLayerPanel (bottom bar)", img: "/case-study/assets/elements/app-panel.png", note: "Horizontal strip at the bottom. Shows glanceable summaries like fuel, weather, and media. Same visual treatment, different region.", }, ], }, { label: "Layout Skeletons · 2", desc: "Empty but styled containers. The LLM decides what content goes inside and how to arrange it. Think of them as flexible slots with no predetermined content.", custom: "skeletons", }, { label: "Navigation · 2", desc: "Turn-by-turn and supplementary route info. Structure is fixed; the LLM populates distances, street names, and icons.", items: [ { name: "Navigation", img: "/case-study/assets/elements/navigation.png", note: "Primary turn instruction with distance, street, and directional icon.", }, { name: "AdditionalNavigation", img: "/case-study/assets/elements/additional-nav.png", note: "ETA, remaining distance, and delay info in a compact row.", }, ], }, { label: "Content · 7 elements", desc: "The building blocks the LLM arranges inside containers. Each has a fixed visual structure; the LLM provides the data.", items: [ { name: "ListItemWithNoImage", img: "/case-study/assets/elements/list-item.png", note: "Numbered list row with title and description.", }, { name: "ListItemWithImage", img: "/case-study/assets/elements/list-item-image.png", note: "List row with a thumbnail (fetched via Pixabay API).", }, { name: "HorizontalList", img: "/case-study/assets/elements/horizontal-list.png", note: "Scrollable card row for recommendations.", }, { name: "Carousel", img: null, note: "Swipeable content cards." }, { name: "Divider", img: "/case-study/assets/elements/divider.png" }, { name: "Image (via Pixabay)", img: null, note: "Dynamic image fetched by keyword.", }, { name: "ActivityIndicator", img: null, note: "Loading spinner shown while content is being generated.", }, ], }, ] const total = 31 const [expanded, setExpanded] = useState(null) return (

The LLM doesn't draw from scratch. It picks from this fixed set of brand-compliant, safety-validated components and fills them with contextual content. The structure of each element is locked; the AI controls which ones appear, where they go, and what data they carry.

{groups.map((g, gi) => (
{g.custom === "icons" ? ( ) : g.custom === "skeletons" ? ( ) : (
{g.items.map((item) => (
{item.img ? ( {item.name} ) : (
PREVIEW Replace with screenshot
)}
{item.name}
{item.note && (
{item.note}
)}
))}
)}
))}
) } /* Icon grid — inline SVGs on dark background (their native context) */ function IconGrid() { return (
{ICON_SVGS.map((icon) => (
{icon.svg}
{icon.name}
))}
) } /* Skeleton layout previews (abstract visual) */ function SkeletonPreview() { return (
VerticalStackSkeleton
A vertical container. The LLM fills it with text, icons, or lists and decides the order and spacing.
HorizontalStackSkeleton
A horizontal container. Used for side-by-side content like ETA + distance pairs or compact info blocks.
) } window.Prototype = Prototype