{"name":"Design System Explorer","doctrine":"Confident + Glass","tagline":"Squared, flat, hairline, one electric-yellow accent; depth from glass and motion, not rounding.","accent":"#FFE600","themes":["light","dark"],"typography":{"sans":"Arial, \"Helvetica Neue\", Helvetica, \"Liberation Sans\", sans-serif","mono":"\"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, monospace"},"theming":{"mechanism":"data-theme attribute (\"light\" | \"dark\")","note":"All tokens are CSS variables read by Tailwind utilities; set data-theme on any element to scope a theme to that subtree."},"principles":[{"key":"squared","title":"Squared","body":"Zero radius everywhere; only avatars and dots round."},{"key":"flat","title":"Flat & hairline","body":"1px borders carry structure; a yellow keyline marks state."},{"key":"accent","title":"Electric-yellow accent","body":"One accent, #FFE600. Meaning comes from state colour and icons."},{"key":"type","title":"Arial type","body":"Arial, bold and tight. No web fonts; mono for numbers."},{"key":"depth","title":"Glass & aurora depth","body":"Depth from glass, an aurora wash, and a soft glow — not shadows."},{"key":"signature","title":"Signature motifs","body":"The eyebrow and spectrum keyline make every surface recognizable."}],"rules":[{"group":"Shape & structure","items":[{"kind":"do","text":"Keep corners square — every rounded-* utility resolves to 0 radius. Use hairline 1px borders to separate surfaces."},{"kind":"do","text":"Round only true circles: avatars, status dots, scrollbar thumbs (rounded-full)."},{"kind":"dont","text":"Add border-radius, drop shadows for elevation, or chunky 2px+ borders to ‘soften’ the UI."}]},{"group":"Colour","items":[{"kind":"do","text":"Use exactly one brand accent — electric yellow (--accent). Carry meaning with state colour (info/ok/severity) and icons."},{"kind":"do","text":"Use --accent for fills/borders/keylines and --accent-fg for accent text/icons (it stays readable on light surfaces)."},{"kind":"do","text":"Reference tokens only (bg-surface, text-text2, border-border…) so everything re-skins for light and dark automatically."},{"kind":"dont","text":"Introduce a second brand hue, hard-code hex values, or put bright-yellow text on a light background."}]},{"group":"Typography","items":[{"kind":"do","text":"Use Arial (the sans stack) with tight negative tracking on headings; make headings bold and large."},{"kind":"do","text":"Use the mono stack with tabular-nums for numbers, codes, IDs, and timestamps."},{"kind":"dont","text":"Load a custom web font or use light/thin weights for headings."}]},{"group":"Depth & elevation","items":[{"kind":"do","text":"Build depth from frosted glass (.panel/.glass), the aurora wash (.bg-aurora), and the accent glow (.glow-accent)."},{"kind":"do","text":"Use .glass-chrome for bars/nav, .glass-modal for dialogs, .popover for opaque menus over busy content."},{"kind":"dont","text":"Reach for large box-shadows or coloured glows other than the accent halo."}]},{"group":"Motion","items":[{"kind":"do","text":"Use the provided keyframes (card-in, row-in, fade-rise, pulse-accent) and spring transitions for overlays."},{"kind":"do","text":"Respect prefers-reduced-motion — it is already honoured globally; don't override it."},{"kind":"dont","text":"Add long, bouncy, or attention-grabbing animations to routine state changes."}]},{"group":"Layout & spacing","items":[{"kind":"do","text":"Use the default Tailwind spacing scale; lean on flex and grid layouts with consistent gaps."},{"kind":"do","text":"Design up to the 3xl/4xl breakpoints so wide desktop consoles fill the canvas."},{"kind":"dont","text":"Strand content at a narrow max-width on large screens."}]},{"group":"Components & states","items":[{"kind":"do","text":"Compose from the primitive library (Button, Field, Panel, Card, Chip, Stat…) before writing new markup."},{"kind":"do","text":"Signal hover/active with the yellow keyline (border-accent / left keyline), not a fill change."},{"kind":"do","text":"Mark provenance and state with chips and status dots; use skeletons for loading."},{"kind":"dont","text":"Re-implement a primitive's look with ad-hoc classes when a component already exists."}]},{"group":"Accessibility","items":[{"kind":"do","text":"Keep the accent focus keyline visible; ensure interactive targets are at least ~28px tall."},{"kind":"do","text":"Pair colour with an icon or text label so meaning never relies on hue alone."},{"kind":"dont","text":"Remove focus styles or rely on the yellow accent as text colour on light surfaces."}]}],"tokens":{"groups":[{"id":"surfaces","label":"Canvas & surfaces","desc":"The stack of surfaces from the page canvas up to elevated menus. Warm near-black in dark, cool off-white in light.","tokens":[{"name":"--bg","light":"#F1F1F5","dark":"#0B0B0F","desc":"Page canvas","tailwind":"bg-bg"},{"name":"--surface","light":"#FFFFFF","dark":"#16161D","desc":"Primary surface","tailwind":"bg-surface"},{"name":"--surface-2","light":"#FAFAFC","dark":"#1C1C25","desc":"Raised surface (controls)","tailwind":"bg-surface2"},{"name":"--surface-hover","light":"#F1F1F5","dark":"#23232E","desc":"Hover wash","tailwind":"bg-surfaceHover"},{"name":"--surface-sunk","light":"#F6F6FA","dark":"#101016","desc":"Inset / recessed","tailwind":"bg-sunk"},{"name":"--elevated","light":"#FFFFFF","dark":"#23232E","desc":"Elevated (menus)","tailwind":"bg-elevated"}]},{"id":"borders","label":"Borders & dividers","desc":"Hairlines carry all structure — there are three weights and nothing heavier.","tokens":[{"name":"--border","light":"#E4E4EA","dark":"#2A2A34","desc":"Default hairline","tailwind":"border-border"},{"name":"--border-strong","light":"#CFCFD8","dark":"#3A3A47","desc":"Strong border","tailwind":"border-borderStrong"},{"name":"--hair","light":"#ECECF1","dark":"#22222B","desc":"Faint divider","tailwind":"border-hair"}]},{"id":"text","label":"Text","desc":"Three levels of emphasis. Primary for content, secondary for support, tertiary for muted meta.","tokens":[{"name":"--text","light":"#1A1A24","dark":"#F7F7F8","desc":"Primary text","tailwind":"text-text"},{"name":"--text-2","light":"#5A5A63","dark":"#A7A7B2","desc":"Secondary text","tailwind":"text-text2"},{"name":"--text-3","light":"#8C8C96","dark":"#6C6C78","desc":"Tertiary / muted","tailwind":"text-text3"}]},{"id":"accent","label":"Accent — electric yellow","desc":"One primary accent. Use the fill for borders/swatches, accent-fg for readable text/icons (it darkens to gold on light surfaces).","tokens":[{"name":"--accent","light":"#FFE600","dark":"#FFE600","desc":"Primary accent (fills, borders)","tailwind":"bg-accent"},{"name":"--accent-2","light":"#FFD000","dark":"#FFD000","desc":"Accent deep (gradients)","tailwind":"bg-accent-2"},{"name":"--accent-press","light":"#E6CF00","dark":"#FFEF4D","desc":"Accent pressed","tailwind":"bg-accent-press"},{"name":"--accent-ink","light":"#1A1A24","dark":"#1A1A24","desc":"Text on accent fill","tailwind":"text-accent-ink"},{"name":"--accent-soft","light":"#FBF6CC","dark":"#2A2810","desc":"Soft accent wash","tailwind":"bg-accent-soft"},{"name":"--accent-fg","light":"#8A7400","dark":"#FFE600","desc":"Accent text / icon (readable)","tailwind":"text-accent-fg"},{"name":"--accent-glow","light":"rgba(255,230,0,0.28)","dark":"rgba(255,230,0,0.16)","desc":"Accent glow halo","tailwind":null}]},{"id":"state","label":"State — info & success","desc":"Each state has a foreground, a wash background, and a border line so chips and banners re-skin per theme.","tokens":[{"name":"--info","light":"#0E8C88","dark":"#2EC5C0","desc":"Info foreground","tailwind":"text-info"},{"name":"--info-bg","light":"#E2F3F2","dark":"#0E2422","desc":"Info wash","tailwind":"bg-info-bg"},{"name":"--info-line","light":"#B8E0DE","dark":"#1C463F","desc":"Info border","tailwind":"border-info-line"},{"name":"--ok","light":"#157F35","dark":"#39D98A","desc":"Success foreground","tailwind":"text-ok"},{"name":"--ok-bg","light":"#E6F2E9","dark":"#11241A","desc":"Success wash","tailwind":"bg-ok-bg"},{"name":"--ok-line","light":"#BFE0C8","dark":"#1E4030","desc":"Success border","tailwind":"border-ok-line"}]},{"id":"severity","label":"Severity","desc":"A four-step severity ramp — critical, high, medium, low — each with foreground, wash, and line.","tokens":[{"name":"--sev-critical","light":"#CC2A1E","dark":"#FF5263","desc":"Critical","tailwind":"text-sev-critical"},{"name":"--sev-critical-bg","light":"#FBE9E7","dark":"#2A1318","desc":"Critical wash","tailwind":"bg-sev-critical-bg"},{"name":"--sev-critical-line","light":"#F2C4BE","dark":"#52222B","desc":"Critical line","tailwind":"border-sev-critical-line"},{"name":"--sev-high","light":"#D9620A","dark":"#FF9A4D","desc":"High","tailwind":"text-sev-high"},{"name":"--sev-high-bg","light":"#FCEFE2","dark":"#271C10","desc":"High wash","tailwind":"bg-sev-high-bg"},{"name":"--sev-high-line","light":"#F2D4B6","dark":"#4D3415","desc":"High line","tailwind":"border-sev-high-line"},{"name":"--sev-medium","light":"#A06A00","dark":"#E8B43A","desc":"Medium","tailwind":"text-sev-medium"},{"name":"--sev-medium-bg","light":"#F8F1DC","dark":"#23200F","desc":"Medium wash","tailwind":"bg-sev-medium-bg"},{"name":"--sev-medium-line","light":"#EAD8A6","dark":"#473C18","desc":"Medium line","tailwind":"border-sev-medium-line"},{"name":"--sev-low","light":"#5A5A63","dark":"#9A9AA6","desc":"Low","tailwind":"text-sev-low"},{"name":"--sev-low-bg","light":"#ECECF0","dark":"#20202A","desc":"Low wash","tailwind":"bg-sev-low-bg"},{"name":"--sev-low-line","light":"#D8D8DE","dark":"#34343F","desc":"Low line","tailwind":"border-sev-low-line"}]},{"id":"glass","label":"Glass & ambient","desc":"Translucent fills for frosted surfaces plus the aurora wash and dotted texture. Shown over each theme's canvas so the alpha reads.","tokens":[{"name":"--glass-1","light":"rgba(255,255,255,0.86)","dark":"rgba(28,28,37,0.72)","desc":"Glass top","tailwind":null},{"name":"--glass-2","light":"rgba(248,248,252,0.70)","dark":"rgba(16,16,22,0.55)","desc":"Glass bottom","tailwind":null},{"name":"--glass-chrome","light":"rgba(255,255,255,0.78)","dark":"rgba(18,18,24,0.62)","desc":"Chrome (bars/nav)","tailwind":null},{"name":"--glass-modal-1","light":"rgba(255,255,255,0.985)","dark":"rgba(30,30,40,0.975)","desc":"Modal top","tailwind":null},{"name":"--glass-modal-2","light":"rgba(250,250,253,0.975)","dark":"rgba(20,20,28,0.965)","desc":"Modal bottom","tailwind":null},{"name":"--aurora-1","light":"rgba(255,230,0,0.12)","dark":"rgba(255,230,0,0.10)","desc":"Aurora yellow","tailwind":null},{"name":"--aurora-2","light":"rgba(46,197,192,0.06)","dark":"rgba(46,197,192,0.07)","desc":"Aurora teal","tailwind":null},{"name":"--aurora-3","light":"rgba(255,208,0,0.06)","dark":"rgba(255,208,0,0.06)","desc":"Aurora amber","tailwind":null},{"name":"--dot","light":"rgba(0,0,0,0.04)","dark":"rgba(255,255,255,0.04)","desc":"Dotted texture","tailwind":null}]}],"scalars":[{"name":"--blur","light":"14px","dark":"16px","desc":"Backdrop blur radius for glass"}]},"components":[{"slug":"button","name":"Button","category":"Actions","summary":"Squared, bold action. Primary inverts to a yellow keyline on hover; ghost and danger carry the same shape.","props":[{"name":"variant","type":"\"primary\" | \"ghost\" | \"danger\"","default":"\"primary\"","desc":"Visual emphasis."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","desc":"Control height."},{"name":"block","type":"boolean","default":"false","desc":"Full-width."},{"name":"disabled","type":"boolean","default":"false","desc":"Non-interactive, dimmed."}],"usage":{"do":["Use one primary button per view for the main action.","Pair an icon with the label for frequent actions."],"dont":["Stack several primary buttons together — demote the rest to ghost."]},"code":"<Button>Primary</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"danger\">Danger</Button>\n<Button size=\"sm\">Small</Button>","related":["input","overlay"]},{"slug":"input","name":"Input & Field","category":"Inputs","summary":"Hairline form controls that focus to the accent, with a labelled Field wrapper for inputs, textareas, and selects.","props":[{"name":"label","type":"ReactNode","desc":"Field label (Field wrapper)."},{"name":"hint","type":"ReactNode","desc":"Optional right-aligned hint."},{"name":"...props","type":"input/textarea/select attrs","desc":"Standard native attributes."}],"usage":{"do":["Always pair a control with a Field label.","Use the hint slot for optional/format guidance."],"dont":["Rely on placeholder text as the only label."]},"code":"<Field label=\"Email\">\n  <Input placeholder=\"you@example.com\" />\n</Field>\n<Field label=\"Message\" hint=\"optional\">\n  <Textarea placeholder=\"Type here…\" />\n</Field>","related":["button"]},{"slug":"panel","name":"Panel","category":"Surfaces","summary":"The workhorse surface — a frosted glass panel with an optional eyebrow header and actions.","props":[{"name":"title","type":"ReactNode","desc":"String renders as an eyebrow header."},{"name":"actions","type":"ReactNode","desc":"Right side of the header."},{"name":"ring","type":"boolean","default":"false","desc":"Gradient hairline border."},{"name":"noPadding","type":"boolean","default":"false","desc":"Remove body padding."}],"usage":{"do":["Group related content in a panel with a clear eyebrow title."],"dont":["Nest panels more than one level deep."]},"code":"<Panel title=\"Panel title\" actions={<Button size=\"sm\" variant=\"ghost\">Action</Button>}>\n  Frosted glass surface with an eyebrow header.\n</Panel>","related":["card","overlay"]},{"slug":"card","name":"Card","category":"Surfaces","summary":"An interactive surface whose hairline lights to the accent on hover — for grids of clickable items.","props":[{"name":"interactive","type":"boolean","default":"true","desc":"Accent-on-hover border."}],"usage":{"do":["Use for clickable tiles in a grid."],"dont":["Use for static content — reach for Panel instead."]},"code":"<Card>\n  <h3 className=\"text-[14px] font-bold\">Interactive card</h3>\n  <p className=\"mt-1 text-[12.5px] text-text2\">Hover me.</p>\n</Card>","related":["panel"]},{"slug":"popover","name":"Popover & Menu","category":"Surfaces","summary":"A click popover over an opaque surface; fill it with MenuItems for dropdown menus. Closes on outside click or Escape.","props":[{"name":"trigger","type":"ReactNode","desc":"Element that toggles the popover."},{"name":"align","type":"\"start\" | \"end\"","default":"\"start\"","desc":"Horizontal alignment."}],"usage":{"do":["Use for row actions and overflow menus."],"dont":["Put long forms inside a popover."]},"code":"<Popover trigger={<Button variant=\"ghost\" size=\"sm\">Menu</Button>}>\n  <MenuItem icon={<Pencil size={14} />}>Edit</MenuItem>\n  <MenuItem icon={<Trash2 size={14} />}>Delete</MenuItem>\n</Popover>","related":["overlay","button"]},{"slug":"overlay","name":"Overlay (Modal & Drawer)","category":"Surfaces","summary":"A modal or edge drawer over a frosted scrim, animated with a spring. Escape and scrim-click dismiss it.","props":[{"name":"open","type":"boolean","desc":"Controlled visibility."},{"name":"onClose","type":"() => void","desc":"Dismiss handler."},{"name":"placement","type":"\"right\" | \"center\"","default":"\"right\"","desc":"Drawer or modal."},{"name":"label","type":"string","desc":"Header eyebrow + close button."}],"usage":{"do":["Use center for confirmations, right for detail inspectors."],"dont":["Stack multiple overlays at once."]},"code":"const [open, setOpen] = useState(false);\n<Button onClick={() => setOpen(true)}>Open</Button>\n<Overlay open={open} onClose={() => setOpen(false)} placement=\"center\" label=\"Confirm\">\n  …\n</Overlay>","related":["popover","panel"]},{"slug":"chip","name":"Chip","category":"Data display","summary":"A palette-aware pill. Meaning is carried by state colour; each variant re-skins per theme. Optional dot and pulse.","props":[{"name":"variant","type":"\"neutral\" | \"accent\" | \"info\" | \"ok\" | \"warn\" | \"danger\"","default":"\"neutral\"","desc":"State colour."},{"name":"dot","type":"boolean","default":"false","desc":"Leading colour dot."},{"name":"pulse","type":"boolean","default":"false","desc":"Pulse for active states."},{"name":"mono","type":"boolean","default":"false","desc":"Monospace + tabular."}],"usage":{"do":["Use the variant that matches the meaning (ok/warn/danger)."],"dont":["Invent new colours for chips."]},"code":"<Chip variant=\"accent\" dot>Accent</Chip>\n<Chip variant=\"ok\" dot>Healthy</Chip>\n<Chip variant=\"danger\" pulse>Critical</Chip>","related":["tag","severity-pill","status-dot"]},{"slug":"tag","name":"Tag","category":"Data display","summary":"An uppercase monospace tag for codes, IDs, and versions.","props":[],"usage":{},"code":"<Tag>RULE-204</Tag>\n<Tag>v1.2.0</Tag>","related":["chip"]},{"slug":"severity-pill","name":"Severity pill","category":"Data display","summary":"An inline severity chip — icon + band label, with an optional count. Backed by the four-step severity ramp.","props":[{"name":"band","type":"\"critical\" | \"high\" | \"medium\" | \"low\"","desc":"Severity level."},{"name":"count","type":"number","desc":"Optional trailing count."}],"usage":{"do":["Always pair the colour with the band icon + label."],"dont":["Use severity colours for non-severity meaning."]},"code":"<SeverityPill band=\"critical\" count={12} />\n<SeverityPill band=\"high\" count={38} />","related":["chip","stat"]},{"slug":"stat","name":"Stat","category":"Data display","summary":"A severity stat card with a top accent rule and a big tabular number.","props":[{"name":"band","type":"\"critical\" | \"high\" | \"medium\" | \"low\"","desc":"Top-rule colour + icon."},{"name":"value","type":"number | string","desc":"The headline number."},{"name":"label","type":"string","desc":"What it counts."},{"name":"sub","type":"string","desc":"Optional sub-line."}],"usage":{},"code":"<Stat band=\"critical\" value={12} label=\"Critical\" sub=\"+3 today\" />","related":["stat-pill","severity-pill"]},{"slug":"stat-pill","name":"Stat pill","category":"Data display","summary":"A compact KPI cell — a labelled value with a tone keyline down the left edge.","props":[{"name":"label","type":"string","desc":"Uppercase micro-label."},{"name":"value","type":"ReactNode","desc":"The value."},{"name":"suffix","type":"string","desc":"Dim unit after the value."},{"name":"tone","type":"\"neutral\" | \"accent\" | \"ok\" | \"warn\" | \"danger\" | \"info\"","default":"\"neutral\"","desc":"Keyline colour."}],"usage":{},"code":"<StatPill label=\"Processed\" value=\"12,847\" />\n<StatPill label=\"Escalated\" value={42} tone=\"danger\" />","related":["stat"]},{"slug":"status-dot","name":"Status dot","category":"Data display","summary":"A small status dot in a tone, with an optional pulse for live states.","props":[{"name":"tone","type":"\"neutral\" | \"accent\" | \"ok\" | \"info\" | \"warn\" | \"danger\"","default":"\"neutral\"","desc":"Colour."},{"name":"pulse","type":"boolean","default":"false","desc":"Pulse for live/active."}],"usage":{},"code":"<StatusDot tone=\"ok\" pulse /> Live\n<StatusDot tone=\"danger\" /> Down","related":["chip"]},{"slug":"skeleton","name":"Skeleton","category":"Feedback","summary":"Shimmering placeholders for loading states — single blocks, text lines, rows, or a whole panel.","props":[],"usage":{},"code":"<Skeleton />\n<SkeletonText lines={3} />\n<SkeletonPanel />","related":["spinner"]},{"slug":"spinner","name":"Spinner","category":"Feedback","summary":"An inline loading ring that inherits the current colour, so it shows on any surface — including the yellow button.","props":[{"name":"label","type":"string","desc":"Optional text beside the ring."}],"usage":{},"code":"<Spinner label=\"Loading…\" />\n<Button><Spinner /> Saving</Button>","related":["skeleton"]},{"slug":"empty-state","name":"Empty state","category":"Feedback","summary":"A centered placeholder with an icon, title, optional sub-line, and an action — for empty lists and zero states.","props":[{"name":"icon","type":"LucideIcon","desc":"Leading glyph."},{"name":"title","type":"string","desc":"Headline."},{"name":"sub","type":"string","desc":"Supporting line."},{"name":"action","type":"ReactNode","desc":"Optional CTA."}],"usage":{},"code":"<EmptyState icon={Inbox} title=\"Nothing here yet\"\n  sub=\"Items you create will appear in this list.\"\n  action={<Button size=\"sm\">Create</Button>} />","related":["skeleton"]},{"slug":"tooltip","name":"Tooltip","category":"Feedback","summary":"A minimal hover/focus tooltip over an opaque surface.","props":[{"name":"label","type":"ReactNode","desc":"Tooltip content."}],"usage":{},"code":"<Tooltip label=\"Copy to clipboard\">\n  <Button variant=\"ghost\" size=\"sm\">Hover me</Button>\n</Tooltip>","related":["popover"]},{"slug":"eyebrow","name":"Eyebrow","category":"Signatures","summary":"The signature kicker — a yellow square plus an uppercase micro-label. The system's most recognizable mark.","props":[{"name":"accent","type":"boolean","default":"false","desc":"Accent-coloured label."}],"usage":{},"code":"<Eyebrow>Section label</Eyebrow>\n<Eyebrow accent>Accent label</Eyebrow>","related":["spectrum-line"]},{"slug":"spectrum-line","name":"Spectrum line","category":"Signatures","summary":"A thin gradient keyline — used as a rule or divider only, never as a fill.","props":[{"name":"thin","type":"boolean","default":"false","desc":"2px instead of 3px."},{"name":"warm","type":"boolean","default":"false","desc":"Warm gradient variant."}],"usage":{},"code":"<SpectrumLine />\n<SpectrumLine thin />\n<SpectrumLine warm />","related":["eyebrow"]},{"slug":"nav-item","name":"Nav item","category":"Navigation","summary":"A vertical nav row with a glass hover and a yellow keyline when active.","props":[{"name":"active","type":"boolean","default":"false","desc":"Active state + keyline."},{"name":"icon","type":"ReactNode","desc":"Leading icon."}],"usage":{},"code":"<NavItem active icon={<Boxes size={15} />}>Components</NavItem>\n<NavItem icon={<Palette size={15} />}>Foundations</NavItem>","related":[]},{"slug":"prose","name":"Prose","category":"Typography","summary":"A typographic container that styles nested headings, paragraphs, lists, code, and links to the system scale.","props":[],"usage":{},"code":"<Prose>\n  <h3>Heading</h3>\n  <p>Body with <strong>bold</strong>, a <a href=\"#\">link</a>, and <code>code</code>.</p>\n</Prose>","related":[]},{"slug":"tabs","name":"Tabs","category":"Navigation","summary":"Squared tabs with a yellow underline keyline marking the active tab.","props":[{"name":"tabs","type":"{ value, label, content }[]","desc":"Tab definitions."},{"name":"defaultValue","type":"string","desc":"Initially active tab value."}],"usage":{},"code":"<Tabs tabs={[\n  { value: \"a\", label: \"Overview\", content: <p>…</p> },\n  { value: \"b\", label: \"Specs\", content: <p>…</p> },\n]} />","related":["nav-item","breadcrumb"]},{"slug":"switch","name":"Switch","category":"Inputs","summary":"A squared on/off toggle — on is a filled yellow track. Controlled or uncontrolled.","props":[{"name":"checked","type":"boolean","desc":"Controlled state."},{"name":"defaultChecked","type":"boolean","default":"false","desc":"Uncontrolled initial state."},{"name":"onChange","type":"(v: boolean) => void","desc":"Change handler."},{"name":"label","type":"string","desc":"Inline label."}],"usage":{},"code":"<Switch defaultChecked label=\"Notifications\" />","related":["input"]},{"slug":"avatar","name":"Avatar","category":"Data display","summary":"A round avatar — one of the few rounded shapes — with an image or initials fallback.","props":[{"name":"name","type":"string","desc":"Used for initials + alt text."},{"name":"src","type":"string","desc":"Optional image URL."},{"name":"size","type":"number","default":"32","desc":"Pixel size."}],"usage":{},"code":"<Avatar name=\"Avery Quinn\" />\n<Avatar name=\"Sam Lee\" size={40} />","related":[]},{"slug":"breadcrumb","name":"Breadcrumb","category":"Navigation","summary":"A hairline breadcrumb trail; the final item is the current page.","props":[{"name":"items","type":"{ label, href? }[]","desc":"Trail, current page last."}],"usage":{},"code":"<Breadcrumb items={[\n  { label: \"Home\", href: \"/\" },\n  { label: \"Components\", href: \"/components\" },\n  { label: \"Breadcrumb\" },\n]} />","related":["nav-item","tabs"]},{"slug":"toast","name":"Toast","category":"Feedback","summary":"Transient notifications that spring in from the corner. Fire them with useToast(); mount ToastProvider once.","props":[{"name":"toast()","type":"({ title, tone }) => void","desc":"From useToast(); tone: neutral | ok | info | warn | danger."}],"usage":{"do":["Use for brief confirmations and errors that don't need a decision."],"dont":["Put critical choices in a toast — use an Overlay instead."]},"code":"const { toast } = useToast();\ntoast({ title: \"Changes saved\", tone: \"ok\" });","related":["overlay","spinner"]}],"starters":["/starter/globals.css","/starter/tailwind.config.ts","/starter/cn.ts"]}