{
"name": "Lumen",
"description": "Lumen is Desklight’s design system. Say what you want in plain words, and your coding agent builds it from the same parts we ship.",
"url": "https://lumen.desklight.ai",
"version": "2.0.0-rc.3",
"release": {
"version": "2.0.0-rc.3",
"date": "2026-09-29",
"status": "release-candidate",
"note": "Conversation polish: one composer focus ring and shared notices with responsive recovery actions. Orbit and Signal geometry now respects native Scene precision, with a 720-combination regression check. Local release candidate; this version is not a deployment receipt."
},
"generatedAt": "2026-10-25T06:51:12.742Z",
"scope": "Inventory generated from the built Studio. Simulations are local; this file is not a deployment receipt or accessibility certification.",
"counts": {
"foundations": 14,
"components": 38,
"patterns": 4
},
"rules": [
"Compose from the components below before writing new UI; extend a component's props rather than forking it.",
"Colors are CSS variables. Prefer the semantic roles: var(--surfaceCanvas|surfacePanel|surfaceInset|surfaceRaised|surfaceOverlay), var(--textPrimary|textSecondary|textMuted), var(--actionPrimary|actionOnPrimary|actionLink), var(--focusRing), var(--success|warning|error|info). Never a raw hex.",
"Spacing, type size, line height, weight, radius, height and motion are keys of SPACE, TYPE, LH, W, RADIUS, HEIGHT and MOTION in src/design-tokens.js. A missing key is undefined and the browser drops the style silently.",
"Use only the props and values listed for a component. Legacy props are listed so you recognise them; do not write them.",
"Check your work: node scripts/contract-tests/run.mjs --only 14 fails on any token key or CSS variable that does not exist."
],
"pages": [
"https://lumen.desklight.ai/",
"https://lumen.desklight.ai/start",
"https://lumen.desklight.ai/spacing",
"https://lumen.desklight.ai/surfaces",
"https://lumen.desklight.ai/identity",
"https://lumen.desklight.ai/principles",
"https://lumen.desklight.ai/foundations",
"https://lumen.desklight.ai/components",
"https://lumen.desklight.ai/patterns",
"https://lumen.desklight.ai/motion",
"https://lumen.desklight.ai/response",
"https://lumen.desklight.ai/agent-studio",
"https://lumen.desklight.ai/chat",
"https://lumen.desklight.ai/composition",
"https://lumen.desklight.ai/tokens",
"https://lumen.desklight.ai/quality",
"https://lumen.desklight.ai/agents",
"https://lumen.desklight.ai/roadmap",
"https://lumen.desklight.ai/changelog"
],
"principles": [
{
"id": "intent",
"title": "One clear next step",
"body": "What can someone finish here, and which action moves them forward?"
},
{
"id": "space",
"title": "Space expresses relationships",
"body": "Are related controls closer than separate groups? Are nested radii derived from the inset?"
},
{
"id": "surface",
"title": "Depth explains ownership",
"body": "Can someone tell what is editable, what is selected, and what temporarily sits above the page?"
},
{
"id": "reading",
"title": "Hierarchy survives stress",
"body": "Does the longest label still work on a narrow screen, in both themes?"
},
{
"id": "feedback",
"title": "Acknowledge, then do the work",
"body": "Is input acknowledged immediately? Does motion explain a state change?"
},
{
"id": "recovery",
"title": "Preserve progress",
"body": "Can someone correct a failure or reverse a destructive local action without starting over?"
},
{
"id": "reuse",
"title": "Reuse the smallest useful part",
"body": "Does an existing component already solve this? Is a new abstraction supported by a second use?"
},
{
"id": "agency",
"title": "Authority stays legible",
"body": "Are scope, permission, and the boundary between a proposal and an external action explicit?"
}
],
"groups": [
{
"id": "g-principles",
"label": "Principles",
"blurb": "What the system believes. Everything below this point is these rules, compiled into components.",
"sections": [
{
"id": "principles",
"title": "The eight rules",
"code": null,
"status": "stable",
"purpose": "The calls every component on this page has already made. When a surface argues with one of these, the surface is wrong.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/principles#principles"
},
{
"id": "versioning",
"title": "Versioning & status",
"code": null,
"status": "new",
"purpose": "The version moves when the rules or the surface area move — new primitives, published principles, token changes — not on polish passes. Component maturity is tracked per section.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/principles#versioning"
}
]
},
{
"id": "g-foundations",
"label": "Foundations",
"blurb": "Colour, type, space, and motion — the raw tokens every primitive reads from. Pull from these; never hard-code a value.",
"sections": [
{
"id": "color",
"title": "Colour",
"code": null,
"status": "stable",
"purpose": "Surfaces, text tiers, the active brand accent, and borders — the whole palette, recoloured live by the theme toggle above. Each swatch shows the active hex plus the other theme's value; click to copy the CSS var.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#color"
},
{
"id": "type",
"title": "Type scale",
"code": null,
"status": "stable",
"purpose": "Eight sizes, 10–24px. Every fontSize in the app pulls a TYPE key — half-pixel sizes were dropped.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#type"
},
{
"id": "weight",
"title": "Font weight",
"code": null,
"status": "stable",
"purpose": "The weight ladder — 600 headings down to 300 labels — that carries every hierarchy. Geist only.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#weight"
},
{
"id": "spacing",
"title": "Spacing",
"code": null,
"status": "stable",
"purpose": "The pixel-keyed spacing scale — 2 through 48. There is no SPACE[14] or [18]; they render as 0 and break layouts.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#spacing"
},
{
"id": "radius",
"title": "Border radius",
"code": null,
"status": "stable",
"purpose": "Five radii — chip to pill — that collapse 17 ad-hoc values into one ladder.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#radius"
},
{
"id": "height",
"title": "Interactive heights",
"code": null,
"status": "stable",
"purpose": "The click-target height ladder so buttons, inputs, and selects line up.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#height"
},
{
"id": "lineheight",
"title": "Line height",
"code": null,
"status": "stable",
"purpose": "Four line-heights covering headings through long-form copy.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#lineheight"
},
{
"id": "motion",
"title": "Motion",
"code": null,
"status": "stable",
"purpose": "Ease-out timings plus one spring (press) for tactile controls. Colour fades always ease out; nothing loops at rest.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#motion"
},
{
"id": "border",
"title": "Border states",
"code": null,
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#border"
},
{
"id": "focus",
"title": "Focus state",
"code": null,
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#focus"
},
{
"id": "shadow",
"title": "Shadow",
"code": null,
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#shadow"
},
{
"id": "zindex",
"title": "Stacking layers",
"code": null,
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#zindex"
},
{
"id": "icons",
"title": "Icons",
"code": "@phosphor-icons/react",
"status": "stable",
"purpose": "One icon set, one weight: Phosphor duotone. No other weights, no hand-drawn SVG, and never an emoji in chrome — that single discipline is most of what makes the UI read as a product, not an LLM draft.",
"whenToUse": "Every icon in the product — nav, buttons, chips, empty states. Browse phosphoricons.com and pick the closest match; never approximate with another set or invent a path.",
"url": "https://lumen.desklight.ai/foundations#icons"
},
{
"id": "naming",
"title": "Token naming",
"code": null,
"status": "stable",
"purpose": "The names are built so a value tells you how to use it — bracket scales are literal pixels, semantic keys are named for the job.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/foundations#naming"
}
]
},
{
"id": "g-patterns",
"label": "Patterns & surfaces",
"blurb": "Primitives composed into real Desklight surfaces. Composition is the point — the atoms above only matter once they stack into a product.",
"sections": [
{
"id": "pattern-spotlight",
"title": "Spotlight",
"code": null,
"status": "new",
"purpose": "The sidebar's rotating announcement card. A crossfade stage dissolves messages into each other (opacity only — no reflow, no positional jump); the dot→pill pagination's active pill carries an accent progress-fill that IS the auto-advance timer — onAnimationEnd advances, so hover-pause stays perfectly in sync with zero timers. The lead card plays a muted, looping clip behind the message under a legibility veil — how a real generated video becomes the pitch to try the model (the media over-covers the rounded corners by 1px so there's never a corner seam). Hover to pause; reduced-motion drops the autoplay + crossfade and the dots stay as manual controls. The minus MINIMIZES it — never a permanent dismiss — to SpotlightMinimized, a twin of the sidebar Credits row (muted glyph · label · pill count chip) that restores the card on click. Try the round-trip in the demo.",
"whenToUse": "A small, recurring surface with 2–4 things worth surfacing over time — new capabilities, upgrade nudges, team invites. Keep the restraint: the CTA is the primary accent; the minimized count pill stays CALM/neutral since it's just rotating news — status color there requires a named condition. A closable ambient card should MINIMIZE to an obvious restore affordance, not vanish — an accidental close is one tap from coming back.",
"url": "https://lumen.desklight.ai/patterns#pattern-spotlight"
},
{
"id": "pattern-config",
"title": "Configuration panel",
"code": null,
"status": "beta",
"purpose": "A settings cluster — the Card + CardRow + Toggle pattern used across Settings and brand config, with a commit row.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/patterns#pattern-config"
},
{
"id": "pattern-composer",
"title": "Agent action row",
"code": null,
"status": "beta",
"purpose": "How Allie closes a turn — a message, suggestion chips, a model picker, and a send button. The flagship chat pattern, distilled.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/patterns#pattern-composer"
},
{
"id": "pattern-publish",
"title": "Publish status rows",
"code": null,
"status": "beta",
"purpose": "The per-platform publish list from the calendar — a recognizable surface built from three primitives.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/patterns#pattern-publish"
}
]
},
{
"id": "g-controls",
"label": "Controls & inputs",
"blurb": "The things people click and type into. Buttons, fields, pickers, and segmented switches.",
"sections": [
{
"id": "btn",
"title": "Button",
"code": "Btn",
"status": "stable",
"purpose": "Every button in the app is this one. It comes in eleven variants and four sizes. Each variant is shown below.",
"whenToUse": "State-changing actions — save, delete, submit, generate. One primary (accent) button per surface.",
"url": "https://lumen.desklight.ai/components/btn#btn"
},
{
"id": "input",
"title": "Text input",
"code": "Input · Textarea",
"status": "stable",
"purpose": "Single-line (Input) and multi-line (Textarea) free text — names, slugs, captions, descriptions. Both share the height ladder and the border-only focus pattern.",
"whenToUse": "Free text the user types — anything not a fixed set of options.",
"url": "https://lumen.desklight.ai/components/input#input"
},
{
"id": "select",
"title": "Select",
"code": "Select",
"status": "stable",
"purpose": "Pick one value from a flat list. Portals its menu to to escape overflow; inline sizes the trigger to its content for toolbars.",
"whenToUse": "One choice from a flat list of options.",
"url": "https://lumen.desklight.ai/components/select#select"
},
{
"id": "toggle",
"title": "Toggle",
"code": "Toggle",
"status": "stable",
"purpose": "An immediate, persistent on/off — the setting takes effect the moment it flips. Pill track with a sliding knob.",
"whenToUse": "A setting that applies instantly when switched.",
"url": "https://lumen.desklight.ai/components/toggle#toggle"
},
{
"id": "pickerpill",
"title": "Picker pill",
"code": "PickerPill",
"status": "stable",
"purpose": null,
"whenToUse": "Reach for this over Select when the popover needs more than a flat list — thumbnail grids, colour dots, live controls.",
"url": "https://lumen.desklight.ai/components/pickerpill#pickerpill"
},
{
"id": "segmented",
"title": "Segmented toggle",
"code": "SegmentedToggle",
"status": "stable",
"purpose": "Flat segmented control for switching a view or mode between 2–4 mutually exclusive options.",
"whenToUse": "Switching a view/mode between a few options. For an on/off, use Toggle; for many options, use Select.",
"url": "https://lumen.desklight.ai/components/segmented#segmented"
},
{
"id": "pilltoggle",
"title": "Pill toggle",
"code": "PillToggle",
"status": "stable",
"purpose": "Sliding-pill segmented toggle — the billing-cycle style, with an optional per-option badge.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/pilltoggle#pilltoggle"
},
{
"id": "suggestion-chips",
"title": "Suggestion chips",
"code": "SuggestionChips",
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/suggestion-chips#suggestion-chips"
}
]
},
{
"id": "g-navigation",
"label": "Navigation & status",
"blurb": "Moving between surfaces and signalling state — tabs, nav rows, badges, presence, and pace.",
"sections": [
{
"id": "tabstrip",
"title": "Tab strip",
"code": "TabStrip",
"status": "stable",
"purpose": "Underlined tab bar for switching sections inside one surface.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/tabstrip#tabstrip"
},
{
"id": "navrow",
"title": "Nav row",
"code": "NavRow",
"status": "stable",
"purpose": "The sidebar nav row — icon + label, with active, collapsed (icon-only), and danger states.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/navrow#navrow"
},
{
"id": "navbadge",
"title": "Nav badge",
"code": "NavBadge",
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/navbadge#navbadge"
},
{
"id": "badge",
"title": "Badge & status",
"code": "Badge · Status",
"status": "stable",
"purpose": "Content-type badges and the four presence status dots.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/badge#badge"
},
{
"id": "cadence-meter",
"title": "Cadence meter",
"code": "CadenceMeter",
"status": "stable",
"purpose": "The on-pace / behind-pace posting cadence meter for a brand's week.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/cadence-meter#cadence-meter"
},
{
"id": "cadence-banner",
"title": "Cadence banner",
"code": "CadenceBanner",
"status": "stable",
"purpose": "The behind-pace catch-up banner Allie surfaces on the dashboard.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/cadence-banner#cadence-banner"
},
{
"id": "misc",
"title": "Avatar & keyboard key",
"code": "Avatar · Kbd",
"status": "stable",
"purpose": "Circular avatars in three sizes and keyboard-key chips.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/misc#misc"
},
{
"id": "infotip",
"title": "Info tip",
"code": "InfoTip",
"status": "stable",
"purpose": "The hover info tooltip for field labels and dense metadata.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/infotip#infotip"
},
{
"id": "alliethinking",
"title": "Allie thinking",
"code": "AllieThinking",
"status": "stable",
"purpose": "The live “Allie is at it” indicator, with two modes so she reads alive. mode=\"thinking\" bounces three accent dots while she composes a reply; mode=\"working\" sweeps an accent bar in a pill while a tool runs. One primitive, shared by ChatWidget + OnboardingChat — never hand-mirrored per surface.",
"whenToUse": "Show while a chat / agent turn is in flight. Pick mode=\"working\" when a tool is actually running (reading a site, pulling colours, designing a post); mode=\"thinking\" otherwise. The accent is the active/working signal per the colour budget; it honours prefers-reduced-motion.",
"url": "https://lumen.desklight.ai/components/alliethinking#alliethinking"
},
{
"id": "allie",
"title": "Allie",
"code": "AllieOrb · AllieTurnMark · AllieStatusLabel · SparkGlyph",
"status": "new",
"purpose": "Allie is the four-point sparkle cut out of the Desklight D. Her orb, a flat accent disc with the sparkle in onAccent, is her face and appears once on screen: the chat launcher, the empty-chat hero, the chat header, or her picker row. The bare sparkle opens each of her turns: accent on the newest, muted on every older one. While she works, a comet orbits that sparkle; when her reply lands it spirals into the star, which springs into the bright mark in the same place.",
"whenToUse": "AllieOrb wherever Allie herself is identified. AllieTurnMark at the start of every Allie turn, and in the slot where her next reply will begin while she works, with AllieStatusLabel on the same line in the text column. Derive the phase in render so working goes straight to resolving. think / work and the comet run only while a request is in flight, and the orb carries them only when the thread can't show them. Nothing loops at rest; every loop stops under reduced motion.",
"url": "https://lumen.desklight.ai/components/allie#allie"
},
{
"id": "progressring",
"title": "Progress ring",
"code": "ProgressRing",
"status": "stable",
"purpose": "A compact radial meter for 0–100 values — the premium alternative to a bar when the value IS the story. Sweeps in from 12 o'clock on mount (reduced-motion safe), hairline track, round caps, optional centre content. Powers Allie's brand-understanding read on the Desk brand page and the Home journey card.",
"whenToUse": "Scores and readiness values that deserve a glanceable shape (brand understanding, setup progress). Accent while the value is still climbing; switch to var(--success) once it crosses its \"dialed in\" threshold so it reads as a live signal. Not for task/loading progress — that's ProgressMeter's job.",
"url": "https://lumen.desklight.ai/components/progressring#progressring"
}
]
},
{
"id": "g-layout",
"label": "Layout & containers",
"blurb": "The neutral surfaces that hold everything else — cards, tiles, zero-states, platform pills.",
"sections": [
{
"id": "layout",
"title": "Stack & cluster",
"code": "Stack · Cluster",
"status": "stable",
"purpose": "Layout without hand-rolled flexbox: a column with one gap, and a row that wraps when space runs out.",
"whenToUse": "Any vertical group (Stack) or toolbar, chip group, button group or list row (Cluster). Gaps are SPACE keys. In a list row, wrap the main content in Cluster.Fill so actions drop below it on a narrow screen instead of squeezing it.",
"url": "https://lumen.desklight.ai/components/layout#layout"
},
{
"id": "card",
"title": "Card & row",
"code": "Card · CardRow",
"status": "stable",
"purpose": "The neutral container and its labeled value rows.",
"whenToUse": "The default container for grouped settings or value rows. Never tint it — colour lives on the content, not the surface.",
"url": "https://lumen.desklight.ai/components/card#card"
},
{
"id": "empty",
"title": "Empty state",
"code": "Empty",
"status": "stable",
"purpose": "The zero-state — icon, title, one line, and a single primary action.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/empty#empty"
},
{
"id": "tilecard",
"title": "Tile card",
"code": "TileCard",
"status": "stable",
"purpose": "Action tiles for dashboards — icon, title, sub, optional badge, with active + disabled states.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/tilecard#tilecard"
},
{
"id": "platformpill",
"title": "Platform pill",
"code": "PlatformPill",
"status": "stable",
"purpose": "Per-platform social pills with brand marks — inactive, active, sizes, and icon-only.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/platformpill#platformpill"
}
]
},
{
"id": "g-assets",
"label": "Assets & media",
"blurb": "Thumbnails, type chips, and the shared picker — the chrome around generated photos, graphics, and video.",
"sections": [
{
"id": "mediatile",
"title": "Media tile",
"code": "MediaTile",
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/mediatile#mediatile"
},
{
"id": "typechip",
"title": "Type chip",
"code": "TypeChip",
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/typechip#typechip"
},
{
"id": "asset-picker-modal",
"title": "Asset picker",
"code": "AssetPickerModal",
"status": "stable",
"purpose": "The shared file / image / video / doc picker — opens over any flow that attaches an existing asset.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/asset-picker-modal#asset-picker-modal"
}
]
},
{
"id": "g-modals",
"label": "Overlays & modals",
"blurb": "The one dialog stack. Compose every overlay from these — never hand-roll a scrim or focus trap.",
"sections": [
{
"id": "modal-chrome",
"title": "Modal & dialog",
"code": "ModalShell · ModalHeader · ActionBar",
"status": "stable",
"purpose": null,
"whenToUse": "Every centered dialog, confirm, picker, or full-screen editor. ModalShell owns the scrim, focus trap, scroll-lock, and mobile 100dvh — never hand-roll position:fixed.",
"url": "https://lumen.desklight.ai/components/modal-chrome#modal-chrome"
},
{
"id": "confirm-modal",
"title": "Confirm dialog",
"code": "ConfirmModal",
"status": "stable",
"purpose": "The calm, branded replacement for window.confirm() — title, body, and actions separated by whitespace, never banded.",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/confirm-modal#confirm-modal"
},
{
"id": "first-post-moment",
"title": "First-post moment",
"code": "FirstPostMoment",
"status": "stable",
"purpose": "The one designed celebration in the product — fires ONCE when a workspace's first post reaches scheduled/posted (the third journey milestone). The artifact is the reward, centered over the house radar ping in the accent. Deliberately un-gamified: no confetti, no badges, no points.",
"whenToUse": "Never mount it ad hoc — CalendarPage (live 0→1 transition) and the Home JourneyCard (fresh after-the-fact catch) own the trigger, gated by the one-shot celebratedFirstPost flag in lib/journey.js. Reduced motion collapses the pings to a static glow.",
"url": "https://lumen.desklight.ai/components/first-post-moment#first-post-moment"
}
]
},
{
"id": "g-editor",
"label": "Editor primitives",
"blurb": "Figma-grade inspector + timeline chrome that powers the canvas editor and Video Studio.",
"sections": [
{
"id": "canvas-primitives",
"title": "Canvas editor",
"code": "RailSection · Swatch · MiniSlider · ToggleRow",
"status": "stable",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/canvas-primitives#canvas-primitives"
},
{
"id": "video-studio",
"title": "Video studio",
"code": "Scrubber · TransportBar · TimelineTrack · RangeTrim",
"status": "beta",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/video-studio#video-studio"
},
{
"id": "editor-chrome",
"title": "Editor chrome",
"code": null,
"status": "new",
"purpose": "The scene editor's shell chrome — the split save button, the aspect status chip, menu popovers, the scrubby number field, and the deviation dot + reset affordance. Static specimens on the editor's real class names; scoped styles keep the page self-contained (no editor-package import).",
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/editor-chrome#editor-chrome"
}
]
},
{
"id": "g-conversation",
"label": "Conversation",
"blurb": "The shared pieces behind Allie's chat. Transport-free surfaces with real working, reply, stop and recovery states.",
"sections": [
{
"id": "chat-surface",
"title": "Chat surface",
"code": "ChatSurface · ConversationDemo",
"status": "new",
"purpose": "A complete conversation surface with a bounded transcript, identity, composer and host-owned actions. The interactive specimen uses local scripted replies.",
"whenToUse": "Compose an assistant interface without coupling visual components to authentication, billing or a particular model.",
"url": "https://lumen.desklight.ai/components/chat-surface#chat-surface"
},
{
"id": "chat-brand",
"title": "Brand attachment",
"code": "ChatBrandCard · ChatPalette · ChatAttachment",
"status": "new",
"purpose": "A controlled, editable brand read in the conversation. Palette, actual type, voice and audience remain visible while secondary details stay behind a reveal.",
"whenToUse": "Review an inferred identity or an uploaded guide. The host persists edits and submits the complete approved snapshot.",
"url": "https://lumen.desklight.ai/components/chat-brand#chat-brand"
},
{
"id": "chat-composer",
"title": "Chat composer & actions",
"code": "ChatComposerSurface · ChatAction",
"status": "new",
"purpose": "The actual composer surface and action ladder extracted from ChatWidget: warm focus, busy edge, stable send/stop geometry and touch-aware targets.",
"whenToUse": "Use the surface as a slot around your textarea and tool row. ChatAction owns action metrics; the host owns onSend, cancellation and error state.",
"url": "https://lumen.desklight.ai/components/chat-composer#chat-composer"
},
{
"id": "inline-notice",
"title": "Notice & action",
"code": "InlineNotice",
"status": "new",
"purpose": "A message and its next step share one surface. Semantic colour marks the condition; a neutral, visible action keeps recovery distinct from danger.",
"whenToUse": "Use a short title, one supporting sentence and one useful action. The action sits beside the message on wide surfaces and under the text on narrow ones. Buttons retain visible keyboard focus.",
"url": "https://lumen.desklight.ai/components/inline-notice#inline-notice"
},
{
"id": "chat-message",
"title": "Message & turn",
"code": "ChatUserBubble · AllieTurnMark · AllieStatusLabel",
"status": "new",
"purpose": "Grouped user bubbles and a shared assistant turn mark. Keep the newest assistant mark bright, past turns quiet, and motion tied to a real in-flight request.",
"whenToUse": "Build a transcript with source text rendered as text, an accessible log and suggestion chips that belong to a specific turn.",
"url": "https://lumen.desklight.ai/components/chat-message#chat-message"
}
]
}
],
"components": [
{
"name": "Status",
"import": "import { Status } from \"src/components/ui\";",
"file": "src/components/ui/Status.jsx",
"purpose": "Content-type badges and the four presence status dots.",
"props": [
{
"name": "s",
"values": [
"active",
"paused",
"off"
]
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/badge#badge"
},
{
"name": "Toggle",
"import": "import { Toggle } from \"src/components/ui\";",
"file": "src/components/ui/Toggle.jsx",
"purpose": "An immediate, persistent on/off — the setting takes effect the moment it flips. Pill track with a sliding knob.",
"props": [
{
"name": "on"
},
{
"name": "color"
},
{
"name": "onClick",
"shape": "function"
},
{
"name": "disabled"
},
{
"name": "ariaLabel"
},
{
"name": "style"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"md",
"sm"
]
}
],
"whenToUse": "A setting that applies instantly when switched.",
"url": "https://lumen.desklight.ai/components/toggle#toggle"
},
{
"name": "Avatar",
"import": "import { Avatar } from \"src/components/ui\";",
"file": "src/components/ui/Avatar.jsx",
"purpose": "Circular avatars in three sizes and keyboard-key chips.",
"props": [
{
"name": "name"
},
{
"name": "initials"
},
{
"name": "color"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm",
"md",
"lg"
]
},
{
"name": "status",
"values": [
"off"
]
},
{
"name": "src"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/misc#misc"
},
{
"name": "Badge",
"import": "import { Badge } from \"src/components/ui\";",
"file": "src/components/ui/Badge.jsx",
"purpose": "Content-type badges and the four presence status dots.",
"props": [
{
"name": "kind",
"values": [
"task",
"vault",
"system",
"brand"
]
},
{
"name": "children"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/badge#badge"
},
{
"name": "Kbd",
"import": "import { Kbd } from \"src/components/ui\";",
"file": "src/components/ui/Kbd.jsx",
"purpose": "Circular avatars in three sizes and keyboard-key chips.",
"props": [
{
"name": "children"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/misc#misc"
},
{
"name": "Input",
"import": "import { Input } from \"src/components/ui\";",
"file": "src/components/ui/Input.jsx",
"purpose": "Single-line (Input) and multi-line (Textarea) free text — names, slugs, captions, descriptions. Both share the height ladder and the border-only focus pattern.",
"props": [
{
"name": "label",
"shape": "node"
},
{
"name": "value"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "placeholder"
},
{
"name": "mono"
},
{
"name": "type",
"default": "\"text\""
},
{
"name": "hint",
"shape": "node"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm",
"md",
"lg"
]
},
{
"name": "disabled",
"default": "false"
},
{
"name": "autoFocus"
},
{
"name": "onKeyDown"
},
{
"name": "onBlur",
"shape": "function"
},
{
"name": "name"
},
{
"name": "id"
},
{
"name": "flush",
"default": "false"
},
{
"name": "style"
}
],
"whenToUse": "Free text the user types — anything not a fixed set of options.",
"url": "https://lumen.desklight.ai/components/input#input"
},
{
"name": "Textarea",
"import": "import { Textarea } from \"src/components/ui\";",
"file": "src/components/ui/Textarea.jsx",
"purpose": "Single-line (Input) and multi-line (Textarea) free text — names, slugs, captions, descriptions. Both share the height ladder and the border-only focus pattern.",
"props": [
{
"name": "label",
"shape": "node"
},
{
"name": "value"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "placeholder"
},
{
"name": "rows",
"default": "4"
},
{
"name": "hint",
"shape": "node"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "style"
}
],
"whenToUse": "Free text the user types — anything not a fixed set of options.",
"url": "https://lumen.desklight.ai/components/input#input"
},
{
"name": "Select",
"import": "import { Select } from \"src/components/ui\";",
"file": "src/components/ui/Select.jsx",
"purpose": "Pick one value from a flat list. Portals its menu to to escape overflow; inline sizes the trigger to its content for toolbars.",
"props": [
{
"name": "label",
"shape": "node"
},
{
"name": "value"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "options",
"shape": "array of { value, disabled, label, description, tier, chip }"
},
{
"name": "inline",
"default": "false"
},
{
"name": "prefixIcon"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "placeholder",
"default": "\"Select…\""
},
{
"name": "size",
"default": "\"md\"",
"values": [
"xs",
"sm",
"md",
"lg",
"xl"
]
},
{
"name": "style"
},
{
"name": "className",
"default": "\"\""
},
{
"name": "ariaLabel"
},
{
"name": "description",
"shape": "node"
}
],
"whenToUse": "One choice from a flat list of options.",
"url": "https://lumen.desklight.ai/components/select#select"
},
{
"name": "Btn",
"import": "import { Btn } from \"src/components/ui\";",
"file": "src/components/ui/Btn.jsx",
"purpose": "Every button in the app is this one. It comes in eleven variants and four sizes. Each variant is shown below.",
"props": [
{
"name": "children"
},
{
"name": "onClick"
},
{
"name": "variant",
"values": [
"primary",
"success",
"danger",
"warning",
"subtle",
"link",
"quiet",
"imageOverlay",
"glass",
"menuItem",
"ghost"
],
"note": "new canonical prop"
},
{
"name": "primary",
"note": "legacy alias → variant=\"primary\"",
"legacy": true
},
{
"name": "danger",
"note": "legacy alias → variant=\"danger\"",
"legacy": true
},
{
"name": "success",
"note": "legacy alias → variant=\"success\"",
"legacy": true
},
{
"name": "outline",
"default": "false"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm",
"md",
"lg",
"xl"
]
},
{
"name": "small",
"note": "legacy alias → size=\"sm\"",
"legacy": true
},
{
"name": "disabled",
"default": "false"
},
{
"name": "loading",
"default": "false"
},
{
"name": "icon"
},
{
"name": "iconRight"
},
{
"name": "iconOnly",
"default": "false"
},
{
"name": "block",
"default": "false"
},
{
"name": "title"
},
{
"name": "type",
"default": "\"button\""
},
{
"name": "style"
},
{
"name": "ariaLabel"
},
{
"name": "className",
"default": "\"\""
},
{
"name": "press",
"default": "false"
},
{
"name": "...buttonProps",
"rest": true
}
],
"whenToUse": "State-changing actions — save, delete, submit, generate. One primary (accent) button per surface.",
"url": "https://lumen.desklight.ai/components/btn#btn"
},
{
"name": "SectionLabel",
"import": "import { SectionLabel } from \"src/components/ui\";",
"file": "src/components/ui/SectionLabel.jsx",
"purpose": null,
"props": [
{
"name": "children"
}
],
"whenToUse": null,
"url": null
},
{
"name": "Card",
"import": "import { Card } from \"src/components/ui\";",
"file": "src/components/ui/Card.jsx",
"purpose": "The neutral container and its labeled value rows.",
"props": [
{
"name": "children"
},
{
"name": "style"
},
{
"name": "...rest",
"rest": true
}
],
"whenToUse": "The default container for grouped settings or value rows. Never tint it — colour lives on the content, not the surface.",
"url": "https://lumen.desklight.ai/components/card#card"
},
{
"name": "CardRow",
"import": "import { CardRow } from \"src/components/ui\";",
"file": "src/components/ui/Card.jsx",
"purpose": "The neutral container and its labeled value rows.",
"props": [
{
"name": "label",
"shape": "node"
},
{
"name": "children"
},
{
"name": "last"
}
],
"whenToUse": "The default container for grouped settings or value rows. Never tint it — colour lives on the content, not the surface.",
"url": "https://lumen.desklight.ai/components/card#card"
},
{
"name": "Stack",
"import": "import { Stack } from \"src/components/ui\";",
"file": "src/components/ui/Layout.jsx",
"purpose": "Layout without hand-rolled flexbox: a column with one gap, and a row that wraps when space runs out.",
"props": [
{
"name": "gap",
"default": "12",
"values": [
"2",
"4",
"6",
"8",
"10",
"12",
"16",
"20",
"24",
"32",
"40",
"48"
]
},
{
"name": "align",
"default": "\"stretch\""
},
{
"name": "as",
"default": "\"div\""
},
{
"name": "style"
},
{
"name": "children"
},
{
"name": "...rest",
"rest": true
}
],
"whenToUse": "Any vertical group (Stack) or toolbar, chip group, button group or list row (Cluster). Gaps are SPACE keys. In a list row, wrap the main content in Cluster.Fill so actions drop below it on a narrow screen instead of squeezing it.",
"url": "https://lumen.desklight.ai/components/layout#layout"
},
{
"name": "Cluster",
"import": "import { Cluster } from \"src/components/ui\";",
"file": "src/components/ui/Layout.jsx",
"purpose": "Layout without hand-rolled flexbox: a column with one gap, and a row that wraps when space runs out.",
"props": [
{
"name": "gap",
"default": "8",
"values": [
"2",
"4",
"6",
"8",
"10",
"12",
"16",
"20",
"24",
"32",
"40",
"48"
]
},
{
"name": "align",
"default": "\"center\""
},
{
"name": "justify",
"default": "\"flex-start\""
},
{
"name": "wrap",
"default": "true"
},
{
"name": "as",
"default": "\"div\""
},
{
"name": "style"
},
{
"name": "children"
},
{
"name": "...rest",
"rest": true
}
],
"whenToUse": "Any vertical group (Stack) or toolbar, chip group, button group or list row (Cluster). Gaps are SPACE keys. In a list row, wrap the main content in Cluster.Fill so actions drop below it on a narrow screen instead of squeezing it.",
"url": "https://lumen.desklight.ai/components/layout#layout"
},
{
"name": "PageHeader",
"import": "import { PageHeader } from \"src/components/ui\";",
"file": "src/components/ui/PageHeader.jsx",
"purpose": "PageHeader — the strip every tool-page (Calendar, Connectors, Team, Knowledge, BrandsPage, Assets) renders at the top.",
"props": [
{
"name": "title",
"shape": "node"
},
{
"name": "subtitle",
"shape": "node"
},
{
"name": "action",
"shape": "node"
}
],
"whenToUse": null,
"url": null
},
{
"name": "Toast",
"import": "import { Toast } from \"src/components/ui\";",
"file": "src/components/ui/Toast.jsx",
"purpose": null,
"props": [
{
"name": "msg"
},
{
"name": "type",
"default": "\"success\""
},
{
"name": "duration",
"default": "2500"
},
{
"name": "onClose",
"shape": "function"
}
],
"whenToUse": null,
"url": null
},
{
"name": "Empty",
"import": "import { Empty } from \"src/components/ui\";",
"file": "src/components/ui/Empty.jsx",
"purpose": "The zero-state — icon, title, one line, and a single primary action.",
"props": [
{
"name": "icon",
"shape": "node"
},
{
"name": "title",
"shape": "node"
},
{
"name": "desc",
"shape": "node"
},
{
"name": "action",
"shape": "node"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/empty#empty"
},
{
"name": "ErrorBoundary",
"file": "src/components/ui/ErrorBoundary.jsx",
"props": [],
"note": "Not a function component.",
"purpose": null,
"whenToUse": null,
"url": null
},
{
"name": "TableSkeleton",
"import": "import { TableSkeleton } from \"src/components/ui\";",
"file": "src/components/ui/Skeleton.jsx",
"purpose": null,
"props": [
{
"name": "cols",
"default": "4"
},
{
"name": "rows",
"default": "6"
}
],
"whenToUse": null,
"url": null
},
{
"name": "FeedSkeleton",
"import": "import { FeedSkeleton } from \"src/components/ui\";",
"file": "src/components/ui/Skeleton.jsx",
"purpose": "tile: draw a rounded icon tile of that size instead of the dot, and sit flush (no gutters or hairlines), for feeds whose real rows are tile + text lines laid out edge to edge.",
"props": [
{
"name": "rows",
"default": "6"
},
{
"name": "tile"
}
],
"whenToUse": null,
"url": null
},
{
"name": "CardSkeleton",
"import": "import { CardSkeleton } from \"src/components/ui\";",
"file": "src/components/ui/Skeleton.jsx",
"purpose": null,
"props": [],
"whenToUse": null,
"url": null
},
{
"name": "MediaLightbox",
"import": "import { MediaLightbox } from \"src/components/ui\";",
"file": "src/components/ui/MediaLightbox.jsx",
"purpose": "Public API.",
"props": [
{
"name": "open"
},
{
"name": "onClose"
},
{
"name": "items",
"default": "[]"
},
{
"name": "index",
"default": "0"
},
{
"name": "onIndexChange",
"shape": "function"
},
{
"name": "onDelete",
"shape": "function"
},
{
"name": "onGoToPost",
"shape": "function"
},
{
"name": "onEdit",
"shape": "function"
},
{
"name": "onLab",
"shape": "function"
},
{
"name": "onReedit",
"shape": "function"
}
],
"whenToUse": null,
"url": null
},
{
"name": "InfoTip",
"import": "import { InfoTip } from \"src/components/ui\";",
"file": "src/components/ui/InfoTip.jsx",
"purpose": "The hover info tooltip for field labels and dense metadata.",
"props": [
{
"name": "text",
"shape": "node"
},
{
"name": "size",
"default": "14"
},
{
"name": "maxWidth",
"default": "260"
},
{
"name": "side",
"default": "\"bottom\"",
"values": [
"top"
]
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/infotip#infotip"
},
{
"name": "AllieThinking",
"import": "import { AllieThinking } from \"src/components/ui\";",
"file": "src/components/ui/AllieThinking.jsx",
"purpose": "The live “Allie is at it” indicator, with two modes so she reads alive. mode=\"thinking\" bounces three accent dots while she composes a reply; mode=\"working\" sweeps an accent bar in a pill while a tool runs. One primitive, shared by ChatWidget + OnboardingChat — never hand-mirrored per surface.",
"props": [
{
"name": "mode",
"default": "\"thinking\"",
"values": [
"working"
]
},
{
"name": "size",
"default": "7"
}
],
"whenToUse": "Show while a chat / agent turn is in flight. Pick mode=\"working\" when a tool is actually running (reading a site, pulling colours, designing a post); mode=\"thinking\" otherwise. The accent is the active/working signal per the colour budget; it honours prefers-reduced-motion.",
"url": "https://lumen.desklight.ai/components/alliethinking#alliethinking"
},
{
"name": "SparkGlyph",
"file": "src/components/ui/AllieSpark.jsx",
"props": [],
"note": "Not a function component.",
"purpose": "Allie is the four-point sparkle cut out of the Desklight D. Her orb, a flat accent disc with the sparkle in onAccent, is her face and appears once on screen: the chat launcher, the empty-chat hero, the chat header, or her picker row. The bare sparkle opens each of her turns: accent on the newest, muted on every older one. While she works, a comet orbits that sparkle; when her reply lands it spirals into the star, which springs into the bright mark in the same place.",
"whenToUse": "AllieOrb wherever Allie herself is identified. AllieTurnMark at the start of every Allie turn, and in the slot where her next reply will begin while she works, with AllieStatusLabel on the same line in the text column. Derive the phase in render so working goes straight to resolving. think / work and the comet run only while a request is in flight, and the orb carries them only when the thread can't show them. Nothing loops at rest; every loop stops under reduced motion.",
"url": "https://lumen.desklight.ai/components/allie#allie"
},
{
"name": "AllieOrb",
"file": "src/components/ui/AllieSpark.jsx",
"props": [],
"note": "Not a function component.",
"purpose": "Allie is the four-point sparkle cut out of the Desklight D. Her orb, a flat accent disc with the sparkle in onAccent, is her face and appears once on screen: the chat launcher, the empty-chat hero, the chat header, or her picker row. The bare sparkle opens each of her turns: accent on the newest, muted on every older one. While she works, a comet orbits that sparkle; when her reply lands it spirals into the star, which springs into the bright mark in the same place.",
"whenToUse": "AllieOrb wherever Allie herself is identified. AllieTurnMark at the start of every Allie turn, and in the slot where her next reply will begin while she works, with AllieStatusLabel on the same line in the text column. Derive the phase in render so working goes straight to resolving. think / work and the comet run only while a request is in flight, and the orb carries them only when the thread can't show them. Nothing loops at rest; every loop stops under reduced motion.",
"url": "https://lumen.desklight.ai/components/allie#allie"
},
{
"name": "AllieTurnMark",
"import": "import { AllieTurnMark } from \"src/components/ui\";",
"file": "src/components/ui/AllieTurnMark.jsx",
"purpose": "Grouped user bubbles and a shared assistant turn mark. Keep the newest assistant mark bright, past turns quiet, and motion tied to a real in-flight request.",
"props": [
{
"name": "phase",
"default": "\"latest\"",
"values": [
"working",
"resolving"
]
},
{
"name": "progress",
"default": "false"
},
{
"name": "onContact"
},
{
"name": "className",
"default": "\"\""
},
{
"name": "style"
}
],
"whenToUse": "Build a transcript with source text rendered as text, an accessible log and suggestion chips that belong to a specific turn.",
"url": "https://lumen.desklight.ai/components/chat-message#chat-message"
},
{
"name": "AllieStatusLabel",
"import": "import { AllieStatusLabel } from \"src/components/ui\";",
"file": "src/components/ui/AllieTurnMark.jsx",
"purpose": "Grouped user bubbles and a shared assistant turn mark. Keep the newest assistant mark bright, past turns quiet, and motion tied to a real in-flight request.",
"props": [
{
"name": "text"
},
{
"name": "leaving",
"default": "false"
},
{
"name": "className",
"default": "\"\""
},
{
"name": "style"
}
],
"whenToUse": "Build a transcript with source text rendered as text, an accessible log and suggestion chips that belong to a specific turn.",
"url": "https://lumen.desklight.ai/components/chat-message#chat-message"
},
{
"name": "Tooltip",
"import": "import { Tooltip } from \"src/components/ui\";",
"file": "src/components/ui/Tooltip.jsx",
"purpose": "Portal-based hover tooltip — wraps any trigger element.",
"props": [
{
"name": "text",
"shape": "node"
},
{
"name": "children"
},
{
"name": "side",
"default": "\"bottom\"",
"values": [
"top"
]
},
{
"name": "maxWidth",
"default": "240"
}
],
"whenToUse": null,
"url": null
},
{
"name": "ConfirmModal",
"import": "import { ConfirmModal } from \"src/components/ui\";",
"file": "src/components/ui/ConfirmModal.jsx",
"purpose": "The calm, branded replacement for window.confirm() — title, body, and actions separated by whitespace, never banded.",
"props": [
{
"name": "open"
},
{
"name": "onClose"
},
{
"name": "onConfirm",
"shape": "function"
},
{
"name": "title",
"default": "\"Are you sure?\"",
"shape": "node"
},
{
"name": "body",
"shape": "node"
},
{
"name": "confirmLabel",
"default": "\"Confirm\"",
"shape": "node"
},
{
"name": "cancelLabel",
"default": "\"Cancel\"",
"shape": "node"
},
{
"name": "tone",
"default": "\"danger\"",
"values": [
"danger",
"caution",
"info"
]
},
{
"name": "confirmLoading",
"default": "false"
},
{
"name": "confirmDisabled",
"default": "false"
},
{
"name": "width",
"default": "440"
},
{
"name": "children"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/confirm-modal#confirm-modal"
},
{
"name": "AssetPickerModal",
"import": "import { AssetPickerModal } from \"src/components/ui\";",
"file": "src/components/ui/AssetPickerModal.jsx",
"purpose": "The shared file / image / video / doc picker — opens over any flow that attaches an existing asset.",
"props": [
{
"name": "open"
},
{
"name": "onClose",
"shape": "function"
},
{
"name": "onPick",
"shape": "function"
},
{
"name": "tenantId"
},
{
"name": "accept",
"default": "[\"photo\", \"graphic\"]",
"shape": "array"
},
{
"name": "title",
"default": "\"Select from library\"",
"shape": "node"
},
{
"name": "emptyText",
"default": "\"No assets to choose from yet.\""
},
{
"name": "multi",
"default": "false"
},
{
"name": "existingUrls",
"default": "[]"
},
{
"name": "pickLabel",
"default": "\"Add\"",
"shape": "node"
},
{
"name": "allowUpload",
"default": "false"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/asset-picker-modal#asset-picker-modal"
},
{
"name": "ModalShell",
"import": "import { ModalShell } from \"src/components/ui\";",
"file": "src/components/ui/ModalShell.jsx",
"purpose": "══════════════════════════════════════════════════════════════════ ModalShell — the one responsive + accessible dialog container.",
"props": [
{
"name": "open"
},
{
"name": "onClose",
"shape": "function"
},
{
"name": "children"
},
{
"name": "width",
"default": "\"min(560px, 100%)\""
},
{
"name": "height",
"note": "optional clamped height"
},
{
"name": "maxWidth",
"default": "\"calc(100vw - 32px)\""
},
{
"name": "maxHeight",
"default": "\"calc(100dvh - 48px)\""
},
{
"name": "mobileFullscreen",
"default": "false"
},
{
"name": "zIndex",
"default": "Z.modal"
},
{
"name": "closeOnBackdrop",
"default": "true"
},
{
"name": "closeOnEsc",
"default": "true"
},
{
"name": "padding",
"note": "backdrop padding (desktop)"
},
{
"name": "ariaLabel"
},
{
"name": "ariaLabelledby"
},
{
"name": "background",
"default": "\"var(--bg1)\""
},
{
"name": "column",
"default": "true"
},
{
"name": "boxStyle"
}
],
"whenToUse": "Every centered dialog, confirm, picker, or full-screen editor. ModalShell owns the scrim, focus trap, scroll-lock, and mobile 100dvh — never hand-roll position:fixed.",
"url": "https://lumen.desklight.ai/components/modal-chrome#modal-chrome"
},
{
"name": "ModalHeader",
"import": "import { ModalHeader } from \"src/components/ui\";",
"file": "src/components/ui/ModalHeader.jsx",
"purpose": "ModalHeader — the standard responsive header band for a ModalShell.",
"props": [
{
"name": "leading",
"default": "null",
"shape": "node"
},
{
"name": "title",
"default": "null",
"shape": "node"
},
{
"name": "tools",
"default": "null",
"shape": "node"
},
{
"name": "actions",
"default": "null",
"shape": "node"
},
{
"name": "isMobile"
},
{
"name": "id"
},
{
"name": "background",
"default": "\"var(--bg2)\""
},
{
"name": "borderless",
"default": "false"
},
{
"name": "style"
}
],
"whenToUse": "Every centered dialog, confirm, picker, or full-screen editor. ModalShell owns the scrim, focus trap, scroll-lock, and mobile 100dvh — never hand-roll position:fixed.",
"url": "https://lumen.desklight.ai/components/modal-chrome#modal-chrome"
},
{
"name": "ActionBar",
"import": "import { ActionBar } from \"src/components/ui\";",
"file": "src/components/ui/ActionBar.jsx",
"purpose": "ActionBar — the standard responsive footer band for a ModalShell.",
"props": [
{
"name": "left",
"default": "null"
},
{
"name": "right",
"default": "null"
},
{
"name": "isMobile"
},
{
"name": "stackOnMobile",
"default": "true"
},
{
"name": "background",
"default": "\"var(--bg2)\""
},
{
"name": "borderless",
"default": "false"
},
{
"name": "style"
}
],
"whenToUse": "Every centered dialog, confirm, picker, or full-screen editor. ModalShell owns the scrim, focus trap, scroll-lock, and mobile 100dvh — never hand-roll position:fixed.",
"url": "https://lumen.desklight.ai/components/modal-chrome#modal-chrome"
},
{
"name": "ChipRail",
"import": "import { ChipRail } from \"src/components/ui\";",
"file": "src/components/ui/ChipRail.jsx",
"purpose": "ChipRail — a wrapping row of chips / pills (PickerPill, FilterChip, …).",
"props": [
{
"name": "children"
},
{
"name": "gap",
"default": "SPACE[8]"
},
{
"name": "align",
"default": "\"center\""
},
{
"name": "style"
}
],
"whenToUse": null,
"url": null
},
{
"name": "DatePicker",
"import": "import { DatePicker } from \"src/components/ui\";",
"file": "src/components/ui/DatePicker.jsx",
"purpose": "DatePicker — design-system replacement for .",
"props": [
{
"name": "value",
"note": "ISO 'yyyy-MM-dd' string or empty"
},
{
"name": "onChange",
"shape": "function",
"note": "(isoString) => void"
},
{
"name": "placeholder",
"default": "\"Pick a date\""
},
{
"name": "disabled",
"default": "false"
},
{
"name": "today",
"note": "Optional calendar day in the caller’s timezone."
},
{
"name": "clearable",
"default": "true"
}
],
"whenToUse": null,
"url": null
},
{
"name": "TimePicker",
"import": "import { TimePicker } from \"src/components/ui\";",
"file": "src/components/ui/TimePicker.jsx",
"purpose": "TimePicker — design-system replacement for .",
"props": [
{
"name": "value",
"note": "24h 'HH:mm' string or empty"
},
{
"name": "onChange",
"shape": "function",
"note": "(storedString) => void"
},
{
"name": "placeholder",
"default": "\"Pick a time\""
},
{
"name": "disabled",
"default": "false"
}
],
"whenToUse": null,
"url": null
},
{
"name": "ColorPickerPopover",
"import": "import { ColorPickerPopover } from \"src/components/ui\";",
"file": "src/components/ui/ColorPickerPopover.jsx",
"purpose": "Modern color picker popover — react-colorful saturation/value box + hue slider, plus a hex input that accepts \"FFBA49\", \"#FFBA49\", or \"#FBA\" (short hex auto-expanded), plus R/G/B numeric inputs that stay synced.",
"props": [
{
"name": "value",
"shape": "{ start }"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "onClose",
"shape": "function"
},
{
"name": "anchorRef",
"shape": "{ current }"
},
{
"name": "allowGradient",
"default": "false"
}
],
"whenToUse": null,
"url": null
},
{
"name": "ProgressMeter",
"import": "import { ProgressMeter } from \"src/components/ui\";",
"file": "src/components/ui/ProgressMeter.jsx",
"purpose": "Minimal progress bar (no badge — label + ETA now live in the centered overlay status text; see the calendar preview).",
"props": [
{
"name": "percent",
"default": "0"
},
{
"name": "variant",
"default": "'overlay'",
"values": [
"overlay"
]
},
{
"name": "indeterminate",
"default": "false"
},
{
"name": "color"
},
{
"name": "height",
"default": "2.5"
}
],
"whenToUse": null,
"url": null
},
{
"name": "ProgressRing",
"import": "import { ProgressRing } from \"src/components/ui\";",
"file": "src/components/ui/ProgressRing.jsx",
"purpose": "A compact radial meter for 0–100 values — the premium alternative to a bar when the value IS the story. Sweeps in from 12 o'clock on mount (reduced-motion safe), hairline track, round caps, optional centre content. Powers Allie's brand-understanding read on the Desk brand page and the Home journey card.",
"props": [
{
"name": "value",
"default": "0"
},
{
"name": "size",
"default": "44"
},
{
"name": "stroke",
"default": "4"
},
{
"name": "color",
"default": "\"var(--accent)\""
},
{
"name": "trackColor",
"default": "\"var(--border)\""
},
{
"name": "animate",
"default": "true"
},
{
"name": "title"
},
{
"name": "style"
},
{
"name": "children"
}
],
"whenToUse": "Scores and readiness values that deserve a glanceable shape (brand understanding, setup progress). Accent while the value is still climbing; switch to var(--success) once it crosses its \"dialed in\" threshold so it reads as a live signal. Not for task/loading progress — that's ProgressMeter's job.",
"url": "https://lumen.desklight.ai/components/progressring#progressring"
},
{
"name": "CadenceMeter",
"import": "import { CadenceMeter } from \"src/components/ui\";",
"file": "src/components/ui/CadenceMeter.jsx",
"purpose": "The on-pace / behind-pace posting cadence meter for a brand's week.",
"props": [
{
"name": "count",
"default": "0",
"shape": "node"
},
{
"name": "target",
"default": "0",
"shape": "node"
},
{
"name": "label",
"default": "\"\"",
"shape": "node"
},
{
"name": "note",
"default": "\"\""
},
{
"name": "size",
"default": "\"sm\"",
"values": [
"sm",
"md"
]
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/cadence-meter#cadence-meter"
},
{
"name": "CadenceBanner",
"import": "import { CadenceBanner } from \"src/components/ui\";",
"file": "src/components/ui/CadenceBanner.jsx",
"purpose": "The behind-pace catch-up banner Allie surfaces on the dashboard.",
"props": [
{
"name": "behindCount",
"shape": "node"
},
{
"name": "brandName",
"shape": "node"
},
{
"name": "onDraft"
},
{
"name": "onDismiss"
},
{
"name": "loading",
"default": "false"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/cadence-banner#cadence-banner"
},
{
"name": "UpgradeNudge",
"import": "import { UpgradeNudge } from \"src/components/ui\";",
"file": "src/components/ui/UpgradeNudge.jsx",
"purpose": null,
"props": [
{
"name": "feature",
"default": "\"graphic_generation\"",
"values": [
"graphic_generation",
"video_generation"
]
},
{
"name": "used",
"shape": "node"
},
{
"name": "cap",
"shape": "node"
},
{
"name": "requiredTier",
"default": "\"solo\"",
"values": [
"team"
]
},
{
"name": "onDismiss"
},
{
"name": "compact",
"default": "false"
}
],
"whenToUse": null,
"url": null
},
{
"name": "Spotlight",
"import": "import { Spotlight } from \"src/components/ui\";",
"file": "src/components/ui/Spotlight.jsx",
"purpose": null,
"props": [
{
"name": "items",
"default": "[]",
"shape": "array of { id, title }"
},
{
"name": "interval",
"default": "6500"
},
{
"name": "onDismiss"
},
{
"name": "height",
"default": "DEFAULT_H"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": null
},
{
"name": "SpotlightMinimized",
"import": "import { SpotlightMinimized } from \"src/components/ui\";",
"file": "src/components/ui/Spotlight.jsx",
"purpose": "SpotlightMinimized — what the Spotlight collapses to when minimized.",
"props": [
{
"name": "onExpand"
},
{
"name": "count",
"default": "0",
"shape": "node"
},
{
"name": "urgent",
"default": "false"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": null
},
{
"name": "TabStrip",
"import": "import { TabStrip } from \"src/components/ui\";",
"file": "src/components/ui/TabStrip.jsx",
"purpose": "Underlined tab bar for switching sections inside one surface.",
"props": [
{
"name": "tabs",
"shape": "array of { id, label }"
},
{
"name": "value"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "padding",
"default": "\"0 24px\""
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm"
]
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/tabstrip#tabstrip"
},
{
"name": "NavRow",
"import": "import { NavRow } from \"src/components/ui\";",
"file": "src/components/ui/NavRow.jsx",
"purpose": "The sidebar nav row — icon + label, with active, collapsed (icon-only), and danger states.",
"props": [
{
"name": "icon",
"shape": "node"
},
{
"name": "label",
"shape": "node"
},
{
"name": "active"
},
{
"name": "onClick"
},
{
"name": "collapsed",
"default": "false"
},
{
"name": "danger",
"default": "false"
},
{
"name": "title"
},
{
"name": "trailing",
"default": "null"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/navrow#navrow"
},
{
"name": "NavBadge",
"import": "import { NavBadge } from \"src/components/ui\";",
"file": "src/components/ui/NavBadge.jsx",
"purpose": null,
"props": [
{
"name": "count",
"default": "0",
"shape": "node"
},
{
"name": "label"
},
{
"name": "mode",
"default": "\"inline\"",
"values": [
"corner"
]
},
{
"name": "showCount",
"default": "false"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/navbadge#navbadge"
},
{
"name": "SegmentedToggle",
"import": "import { SegmentedToggle } from \"src/components/ui\";",
"file": "src/components/ui/SegmentedToggle.jsx",
"purpose": "Flat segmented control for switching a view or mode between 2–4 mutually exclusive options.",
"props": [
{
"name": "options",
"shape": "array of { value, title, buttonProps, label }"
},
{
"name": "value"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "ariaLabel"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm"
]
},
{
"name": "fill",
"default": "false"
},
{
"name": "style"
}
],
"whenToUse": "Switching a view/mode between a few options. For an on/off, use Toggle; for many options, use Select.",
"url": "https://lumen.desklight.ai/components/segmented#segmented"
},
{
"name": "PillToggle",
"import": "import { PillToggle } from \"src/components/ui\";",
"file": "src/components/ui/PillToggle.jsx",
"purpose": "Sliding-pill segmented toggle — the billing-cycle style, with an optional per-option badge.",
"props": [
{
"name": "options",
"shape": "array of { value, label, badge }"
},
{
"name": "value"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm"
]
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/pilltoggle#pilltoggle"
},
{
"name": "TileCard",
"import": "import { TileCard } from \"src/components/ui\";",
"file": "src/components/ui/TileCard.jsx",
"purpose": "Action tiles for dashboards — icon, title, sub, optional badge, with active + disabled states.",
"props": [
{
"name": "icon",
"shape": "node"
},
{
"name": "title",
"shape": "node"
},
{
"name": "sub",
"shape": "node"
},
{
"name": "badge",
"shape": "node"
},
{
"name": "badgeColor"
},
{
"name": "onClick"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "active",
"default": "false"
},
{
"name": "horizontal",
"default": "true"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/tilecard#tilecard"
},
{
"name": "MediaTile",
"import": "import { MediaTile } from \"src/components/ui\";",
"file": "src/components/ui/MediaTile.jsx",
"purpose": "MediaTile — one square asset thumbnail used by every \"pick an asset\" surface: the AssetPickerModal grid and the Video editor's media bin.",
"props": [
{
"name": "thumbUrl"
},
{
"name": "fallbackIcon",
"shape": "node"
},
{
"name": "type"
},
{
"name": "chip",
"shape": "node"
},
{
"name": "label",
"shape": "node"
},
{
"name": "selected",
"default": "false"
},
{
"name": "draggable",
"default": "false"
},
{
"name": "onDragStart"
},
{
"name": "onClick"
},
{
"name": "title"
},
{
"name": "ariaLabel"
},
{
"name": "aspect",
"default": "\"1 / 1\""
},
{
"name": "lazyPaint",
"default": "false"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/mediatile#mediatile"
},
{
"name": "TypeChip",
"import": "import { TypeChip } from \"src/components/ui\";",
"file": "src/components/ui/TypeChip.jsx",
"purpose": "The ONE content-type chip for asset tiles.",
"props": [
{
"name": "type"
},
{
"name": "label"
},
{
"name": "icon"
},
{
"name": "expanded",
"default": "false"
},
{
"name": "positioned",
"default": "true"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/typechip#typechip"
},
{
"name": "PlatformPill",
"import": "import { PlatformPill } from \"src/components/ui\";",
"file": "src/components/ui/PlatformPill.jsx",
"purpose": "Per-platform social pills with brand marks — inactive, active, sizes, and icon-only.",
"props": [
{
"name": "platform",
"values": [
"facebook",
"instagram",
"linkedin",
"twitter",
"x",
"tiktok",
"youtube",
"youtube_short",
"threads",
"pinterest"
]
},
{
"name": "active"
},
{
"name": "onClick"
},
{
"name": "showLabel",
"default": "true"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm"
]
},
{
"name": "style"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/platformpill#platformpill"
},
{
"name": "EditorialTitle",
"import": "import { EditorialTitle } from \"src/components/ui\";",
"file": "src/components/ui/EditorialTitle.jsx",
"purpose": null,
"props": [
{
"name": "children"
},
{
"name": "size",
"default": "\"lg\"",
"values": [
"lg",
"md"
]
},
{
"name": "accent",
"shape": "node"
},
{
"name": "period",
"default": "true"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": null
},
{
"name": "FilterChip",
"import": "import { FilterChip } from \"src/components/ui\";",
"file": "src/components/ui/FilterChip.jsx",
"purpose": "Filter pill — toolbar chip for slicing a list (kind, status, etc).",
"props": [
{
"name": "label"
},
{
"name": "children"
},
{
"name": "icon",
"shape": "node"
},
{
"name": "on"
},
{
"name": "active"
},
{
"name": "onClick"
},
{
"name": "disabled"
},
{
"name": "minHeight"
}
],
"whenToUse": null,
"url": null
},
{
"name": "SuggestionChips",
"import": "import { SuggestionChips } from \"src/components/ui\";",
"file": "src/components/ui/SuggestionChips.jsx",
"purpose": null,
"props": [
{
"name": "items"
},
{
"name": "onAction"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "size",
"default": "\"sm\"",
"values": [
"lg",
"xl"
]
},
{
"name": "variant",
"default": "\"default\"",
"values": [
"followup"
]
},
{
"name": "enterClass",
"default": "null"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/suggestion-chips#suggestion-chips"
},
{
"name": "IconToggle",
"import": "import { IconToggle } from \"src/components/ui\";",
"file": "src/components/ui/IconToggle.jsx",
"purpose": null,
"props": [
{
"name": "icon",
"shape": "function"
},
{
"name": "active",
"default": "false"
},
{
"name": "onClick"
},
{
"name": "title"
},
{
"name": "size",
"default": "\"md\"",
"values": [
"sm",
"md",
"lg"
]
},
{
"name": "disabled",
"default": "false"
},
{
"name": "style"
},
{
"name": "...buttonProps",
"rest": true
}
],
"whenToUse": null,
"url": null
},
{
"name": "ToggleRow",
"import": "import { ToggleRow } from \"src/components/ui\";",
"file": "src/components/ui/ToggleRow.jsx",
"purpose": "Labeled on/off row for edit-control surfaces (inspector panels).",
"props": [
{
"name": "icon"
},
{
"name": "label",
"shape": "node"
},
{
"name": "on"
},
{
"name": "onChange"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "ariaLabel"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/canvas-primitives#canvas-primitives"
},
{
"name": "Section",
"import": "import { Section } from \"src/components/ui\";",
"file": "src/components/ui/Section.jsx",
"purpose": null,
"props": [
{
"name": "id"
},
{
"name": "title",
"shape": "node"
},
{
"name": "hint",
"shape": "node"
},
{
"name": "defaultOpen",
"default": "false"
},
{
"name": "children"
}
],
"whenToUse": null,
"url": null
},
{
"name": "RailSection",
"import": "import { RailSection } from \"src/components/ui\";",
"file": "src/components/ui/RailSection.jsx",
"purpose": null,
"props": [
{
"name": "id"
},
{
"name": "icon"
},
{
"name": "title",
"shape": "node"
},
{
"name": "count",
"shape": "node"
},
{
"name": "defaultOpen",
"default": "false"
},
{
"name": "children"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/canvas-primitives#canvas-primitives"
},
{
"name": "MiniSlider",
"import": "import { MiniSlider } from \"src/components/ui\";",
"file": "src/components/ui/MiniSlider.jsx",
"purpose": null,
"props": [
{
"name": "icon"
},
{
"name": "value"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "min",
"default": "-50"
},
{
"name": "max",
"default": "50"
},
{
"name": "step",
"default": "1"
},
{
"name": "format",
"default": "defaultFormat",
"shape": "function"
},
{
"name": "ariaLabel",
"default": "\"Adjust\""
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/canvas-primitives#canvas-primitives"
},
{
"name": "ScrubTrack",
"import": "import { ScrubTrack } from \"src/components/ui\";",
"file": "src/components/ui/ScrubTrack.jsx",
"purpose": null,
"props": [
{
"name": "label",
"shape": "node"
},
{
"name": "value"
},
{
"name": "min"
},
{
"name": "max"
},
{
"name": "step",
"default": "1"
},
{
"name": "unit",
"default": "\"\""
},
{
"name": "format",
"shape": "function"
},
{
"name": "renderedAt"
},
{
"name": "bipolar",
"default": "false"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "onInput"
},
{
"name": "onCommit"
}
],
"whenToUse": null,
"url": null
},
{
"name": "Swatch",
"import": "import { Swatch } from \"src/components/ui\";",
"file": "src/components/ui/Swatch.jsx",
"purpose": "Small color-swatch button.",
"props": [
{
"name": "color"
},
{
"name": "selected",
"default": "false"
},
{
"name": "title"
},
{
"name": "variant",
"default": "\"color\"",
"values": [
"eyedropper"
]
},
{
"name": "onClick"
},
{
"name": "size",
"default": "22"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/canvas-primitives#canvas-primitives"
},
{
"name": "SwatchDivider",
"import": "import { SwatchDivider } from \"src/components/ui\";",
"file": "src/components/ui/Swatch.jsx",
"purpose": "Thin divider between groups of swatches — e.g. brand palette | photo palette | eyedropper.",
"props": [],
"whenToUse": null,
"url": null
},
{
"name": "AnimatedCaret",
"import": "import { AnimatedCaret } from \"src/components/ui\";",
"file": "src/components/ui/AnimatedCaret.jsx",
"purpose": "Shared rotating caret indicator used by collapsible sections and Select triggers — single source of truth for the \"click to open/close\" affordance.",
"props": [
{
"name": "open"
},
{
"name": "size",
"default": "10"
},
{
"name": "closedRotation",
"default": "-90"
},
{
"name": "openRotation",
"default": "0"
},
{
"name": "openColor",
"default": "\"var(--accent)\""
},
{
"name": "closedColor",
"default": "\"var(--textMut)\""
},
{
"name": "pill",
"default": "false"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": null
},
{
"name": "PickerPill",
"import": "import { PickerPill } from \"src/components/ui\";",
"file": "src/components/ui/PickerPill.jsx",
"purpose": "Pill-shaped dropdown trigger with a custom popover body.",
"props": [
{
"name": "leading",
"default": "null",
"shape": "node"
},
{
"name": "label",
"shape": "node"
},
{
"name": "title"
},
{
"name": "popoverWidth",
"default": "280"
},
{
"name": "popoverAlign",
"default": "\"left\"",
"values": [
"right"
]
},
{
"name": "popoverSide",
"default": "\"bottom\"",
"values": [
"top"
]
},
{
"name": "glass",
"default": "false"
},
{
"name": "popoverHeader",
"default": "null",
"shape": "node"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "size",
"values": [
"lg",
"xl"
]
},
{
"name": "chrome",
"values": [
"ghost"
]
},
{
"name": "labelMaxWidth"
},
{
"name": "radius"
},
{
"name": "popoverFill"
},
{
"name": "popoverTopReserve"
},
{
"name": "popoverBounds"
},
{
"name": "children"
}
],
"whenToUse": "Reach for this over Select when the popover needs more than a flat list — thumbnail grids, colour dots, live controls.",
"url": "https://lumen.desklight.ai/components/pickerpill#pickerpill"
},
{
"name": "PickerPillContext",
"file": "src/components/ui/picker-pill-context.js",
"props": [],
"note": "Not a function component.",
"purpose": null,
"whenToUse": null,
"url": null
},
{
"name": "AspectPicker",
"import": "import { AspectPicker } from \"src/components/ui\";",
"file": "src/components/ui/AspectPicker.jsx",
"purpose": null,
"props": [
{
"name": "value",
"values": [
"auto"
]
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "allowAuto",
"default": "false"
},
{
"name": "publishTargets",
"default": "[]"
},
{
"name": "isMobile"
},
{
"name": "disabled"
}
],
"whenToUse": null,
"url": null
},
{
"name": "Spinner",
"import": "import { Spinner } from \"src/components/ui\";",
"file": "src/components/ui/Spinner.jsx",
"purpose": null,
"props": [
{
"name": "size",
"default": "16"
},
{
"name": "speed",
"default": "\"900ms\""
},
{
"name": "color",
"default": "\"var(--accent)\""
},
{
"name": "trackColor",
"default": "\"var(--accentMut)\""
},
{
"name": "stroke"
},
{
"name": "style"
}
],
"whenToUse": null,
"url": null
},
{
"name": "Scrubber",
"import": "import { Scrubber } from \"src/components/ui\";",
"file": "src/components/ui/Scrubber.jsx",
"purpose": "Scrubber — a media seek bar.",
"props": [
{
"name": "value",
"default": "0"
},
{
"name": "duration",
"default": "0"
},
{
"name": "onSeek",
"shape": "function"
},
{
"name": "marks",
"default": "[]",
"shape": "array"
},
{
"name": "height",
"default": "6"
},
{
"name": "ariaLabel",
"default": "\"Seek\""
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/video-studio#video-studio"
},
{
"name": "TransportBar",
"import": "import { TransportBar } from \"src/components/ui\";",
"file": "src/components/ui/TransportBar.jsx",
"purpose": "TransportBar — playback controls for any media surface: skip-to-start, play/pause (primary), skip-to-end, and a tabular m:ss / m:ss readout.",
"props": [
{
"name": "playing",
"default": "false"
},
{
"name": "onPlayPause"
},
{
"name": "onSkipStart"
},
{
"name": "onSkipEnd"
},
{
"name": "current",
"default": "0"
},
{
"name": "total",
"default": "0"
},
{
"name": "disabled",
"default": "false"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/video-studio#video-studio"
},
{
"name": "TimelineTrack",
"file": "src/components/ui/TimelineTrack.jsx",
"props": [],
"note": "Not a function component.",
"purpose": null,
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/video-studio#video-studio"
},
{
"name": "RangeTrim",
"import": "import { RangeTrim } from \"src/components/ui\";",
"file": "src/components/ui/RangeTrim.jsx",
"purpose": null,
"props": [
{
"name": "duration",
"default": "0"
},
{
"name": "start",
"default": "0"
},
{
"name": "end",
"default": "0"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "poster"
},
{
"name": "height",
"default": "44"
}
],
"whenToUse": null,
"url": "https://lumen.desklight.ai/components/video-studio#video-studio"
},
{
"name": "VideoGenControls",
"import": "import { VideoGenControls } from \"src/components/ui\";",
"file": "src/components/ui/VideoGenControls.jsx",
"purpose": "─── VideoGenControls — the inline pill row ─── Props: value {model,durationSec,audio,aspect}, onChange(patch), compact. compact (editor inspector) hides the aspect picker — the clip inherits the timeline aspect — and …",
"props": [
{
"name": "value"
},
{
"name": "onChange"
},
{
"name": "compact",
"default": "false"
}
],
"whenToUse": null,
"url": null
},
{
"name": "VideoFramesRow",
"import": "import { VideoFramesRow } from \"src/components/ui\";",
"file": "src/components/ui/VideoGenControls.jsx",
"purpose": "eslint-disable react-refresh/only-export-components -- intentional: this file re-exports VIDEO_MODEL_CAPS, VIDEO_MODEL_ORDER, and modelDisplayName alongside the components so the editor slice and ChatWidget share one …",
"props": [
{
"name": "value",
"shape": "{ startFrameUrl, endFrameUrl }"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "onAttachStartFrame"
},
{
"name": "onAttachEndFrame"
}
],
"whenToUse": null,
"url": null
},
{
"name": "VoiceGenControls",
"import": "import { VoiceGenControls } from \"src/components/ui\";",
"file": "src/components/ui/VoiceGenControls.jsx",
"purpose": "─── VoiceGenControls — the inline pill row ─── Props: value {model, voiceId, emotion, speed, brief}, onChange(patch), compact.",
"props": [
{
"name": "value"
},
{
"name": "onChange"
},
{
"name": "compact",
"default": "false"
}
],
"whenToUse": null,
"url": null
},
{
"name": "MusicGenControls",
"import": "import { MusicGenControls } from \"src/components/ui\";",
"file": "src/components/ui/MusicGenControls.jsx",
"purpose": "─── MusicGenControls — the inline pill row ─── Props: value {model, durationSec}, onChange(patch), compact. compact (editor inspector) allows the two pills to wrap.",
"props": [
{
"name": "value"
},
{
"name": "onChange"
},
{
"name": "compact",
"default": "false"
}
],
"whenToUse": null,
"url": null
},
{
"name": "AudioPlayer",
"import": "import { AudioPlayer } from \"src/components/ui\";",
"file": "src/components/ui/AudioPlayer.jsx",
"purpose": null,
"props": [
{
"name": "src"
},
{
"name": "filename",
"default": "\"\""
},
{
"name": "variant",
"default": "\"inline\"",
"values": [
"full"
]
},
{
"name": "active",
"default": "true"
}
],
"whenToUse": null,
"url": null
},
{
"name": "InlineNotice",
"import": "import { InlineNotice } from \"src/components/ui\";",
"file": "src/components/ui/InlineNotice.jsx",
"purpose": "A message and its next step share one surface. Semantic colour marks the condition; a neutral, visible action keeps recovery distinct from danger.",
"props": [
{
"name": "tone",
"default": "\"info\"",
"values": [
"error",
"warning",
"info",
"success"
]
},
{
"name": "title",
"shape": "node"
},
{
"name": "children"
},
{
"name": "action"
},
{
"name": "secondaryAction"
},
{
"name": "announce",
"default": "true"
},
{
"name": "className",
"default": "\"\""
}
],
"whenToUse": "Use a short title, one supporting sentence and one useful action. The action sits beside the message on wide surfaces and under the text on narrow ones. Buttons retain visible keyboard focus.",
"url": "https://lumen.desklight.ai/components/inline-notice#inline-notice"
},
{
"name": "ChatAttachment",
"import": "import { ChatAttachment } from \"src/components/ui\";",
"file": "src/components/ui/chat/ChatAttachments.jsx",
"purpose": "A controlled, editable brand read in the conversation. Palette, actual type, voice and audience remain visible while secondary details stay behind a reveal.",
"props": [
{
"name": "children"
},
{
"name": "className",
"default": "\"\""
},
{
"name": "label"
}
],
"whenToUse": "Review an inferred identity or an uploaded guide. The host persists edits and submits the complete approved snapshot.",
"url": "https://lumen.desklight.ai/components/chat-brand#chat-brand"
},
{
"name": "ChatBrandCard",
"import": "import { ChatBrandCard } from \"src/components/ui\";",
"file": "src/components/ui/chat/ChatAttachments.jsx",
"purpose": "A controlled, editable brand read in the conversation. Palette, actual type, voice and audience remain visible while secondary details stay behind a reveal.",
"props": [
{
"name": "data",
"shape": "{ headline_font, body_font, typography, headline_weight, body_weight, logo_preview, name, use_extracted_logo, tagline, colors, voice, audience, product_story }"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "disabled"
},
{
"name": "source",
"default": "\"Allie’s read\"",
"shape": "node"
},
{
"name": "onConfirm"
},
{
"name": "confirmLabel",
"default": "\"Create my first draft\""
},
{
"name": "onLogoFile",
"shape": "function"
},
{
"name": "children"
}
],
"whenToUse": "Review an inferred identity or an uploaded guide. The host persists edits and submits the complete approved snapshot.",
"url": "https://lumen.desklight.ai/components/chat-brand#chat-brand"
},
{
"name": "ChatPalette",
"import": "import { ChatPalette } from \"src/components/ui\";",
"file": "src/components/ui/chat/ChatAttachments.jsx",
"purpose": "A controlled, editable brand read in the conversation. Palette, actual type, voice and audience remain visible while secondary details stay behind a reveal.",
"props": [
{
"name": "colors",
"default": "[]",
"shape": "array"
},
{
"name": "onChange",
"shape": "function"
},
{
"name": "disabled",
"default": "false"
},
{
"name": "label",
"default": "\"Brand colors\""
}
],
"whenToUse": "Review an inferred identity or an uploaded guide. The host persists edits and submits the complete approved snapshot.",
"url": "https://lumen.desklight.ai/components/chat-brand#chat-brand"
}
],
"changelog": [
{
"version": "2.0.0-rc.3",
"date": "2026-09-29",
"status": "release-candidate",
"note": "Conversation polish: one composer focus ring and shared notices with responsive recovery actions. Orbit and Signal geometry now respects native Scene precision, with a 720-combination regression check. Local release candidate; this version is not a deployment receipt."
},
{
"version": "2.0.0-rc.2",
"date": "2026-09-29",
"note": "Native composition studies, protected portraits, shared chat components, and an Allie SOP with real Sonnet trials and regression guards."
},
{
"version": "2.0.0-rc.1",
"date": "2026-09-26",
"note": "Studio becomes the main Lumen site, with spatial recipes, semantic colour roles, practical tools and agent configuration."
},
{
"version": "1.1",
"date": "2026-09-03",
"note": "Routed documentation site — overview with an inspectable live specimen, one page per group, a motion page, a token browser, quality gates, agent surface, roadmap · accent moves from amber to Sulphur (#E8E04A dark / #D9CF1C light) with --accentInk and --onAccent · --successInk / --warningInk added: the light success and warning fills failed AA as text · SHADOW.glow re-derived from the accent."
},
{
"version": "1.0",
"date": "2026-07-03",
"note": "Principles and versioning published · live hero specimen · contrast pass — navigation and data raised to the AA floor · llms.txt + machine manifest for agents."
},
{
"version": "0.9",
"date": "2026-07-01",
"note": "Spotlight pattern · standalone public site at lumen.desklight.ai with CI deploy."
},
{
"version": "0.8",
"date": "2026-06-21",
"note": "Grouped doc shell — scroll-spy nav, hero, on-page dark/light theming. Benchmarked against Geist, Polaris, Carbon, Primer."
}
],
"changes": [
{
"title": "A spatial recipe that travels",
"detail": "Compact, Comfortable, and Touch modes derive related gaps, group gaps, control height, and concentric corners from one recipe.",
"url": "/spacing"
},
{
"title": "The approved identities, preserved",
"detail": "Lumen and Desklight marks and outlined wordmarks are shared vector assets. Citron is the default; the studio offers three additional accents.",
"url": "/identity"
},
{
"title": "Quieter native scrolling",
"detail": "Thin neutral scrollbars and transparent tracks keep native wheel and keyboard behavior. Forced-color settings retain the system treatment.",
"url": "/response"
},
{
"title": "Sections now produce useful work",
"detail": "Readability experiments, working pattern simulations, token exports, decision records, live checks, agent briefs, and migration plans use the current studio configuration.",
"url": "/foundations"
}
],
"composition": {
"status": "local release candidate; contract and working method, not a production preset",
"reflowLab": "https://lumen.desklight.ai/composition",
"contract": "https://lumen.desklight.ai/composition-allie.json",
"sop": "https://lumen.desklight.ai/composition-sop.md",
"evidence": "https://lumen.desklight.ai/composition/evaluation.json",
"sopVersion": "1.0.0",
"steps": [
"Read the Desk and lock the brief",
"Choose a reasoned direction",
"Render the native Scene",
"Check every target format",
"Inspect the actual previews",
"Repair one visible defect",
"Compare with the previous candidate",
"Offer the work with an honest receipt"
]
},
"tokens": {
"font": "'Geist', -apple-system, BlinkMacSystemFont, sans-serif",
"type": {
"micro": 10,
"label": 11,
"ui": 12,
"body": 13,
"h3": 14,
"h2": 16,
"h1": 20,
"hero": 24
},
"weights": {
"heading": 600,
"nav": 500,
"body": 400,
"label": 300,
"logo": 600
},
"lineHeights": {
"heading": 1.2,
"ui": 1.4,
"body": 1.5,
"long": 1.6
},
"space": {
"2": 2,
"4": 4,
"6": 6,
"8": 8,
"10": 10,
"12": 12,
"16": 16,
"20": 20,
"24": 24,
"32": 32,
"40": 40,
"48": 48
},
"radius": {
"chip": 4,
"input": 6,
"card": 8,
"dialog": 12,
"surface": 32,
"control": 12,
"inner": 8,
"pill": 999
},
"heights": {
"xs": 24,
"sm": 28,
"md": 32,
"lg": 40,
"xl": 44
},
"motion": {
"hover": "100ms cubic-bezier(0.22, 1, 0.36, 1)",
"state": "150ms cubic-bezier(0.22, 1, 0.36, 1)",
"layout": "200ms cubic-bezier(0.22, 1, 0.36, 1)",
"reveal": "360ms cubic-bezier(0.16, 1, 0.3, 1)",
"press": "280ms cubic-bezier(0.34, 1.45, 0.64, 1)"
},
"borders": {
"idle": "var(--hair)",
"hover": "var(--hairHov)",
"focus": "var(--accent)"
},
"shadows": {
"sm": "var(--shadowSm)",
"md": "var(--shadowMd)",
"lg": "var(--shadowPop)",
"xl": "var(--shadowPanel)",
"glow": "0 0 12px rgba(255,120,82,0.30)"
},
"z": {
"base": 0,
"raised": 1,
"sticky": 50,
"dropdown": 100,
"popover": 200,
"modal": 1000,
"toast": 9999,
"dialog": 11000
},
"colors": {
"dark": {
"bg0": "#03080a",
"bg1": "#0c1417",
"bg2": "#121b1e",
"bg3": "#182125",
"bg4": "#212c30",
"text": "#eff3f5",
"textSec": "#a7b2b7",
"textTer": "#929ea3",
"textMut": "#76848a",
"textFaint": "#76848a",
"cream": "#eff3f5",
"border": "#212c30",
"borderHov": "#334046",
"borderStr": "#334046",
"borderHot": "#54666d",
"hair": "rgba(239,243,245,0.07)",
"hairHov": "rgba(239,243,245,0.14)",
"ring": "rgba(239,243,245,0.22)",
"accent": "#ff7852",
"accentHot": "#ff8867",
"accentInk": "#ff9071",
"accentMut": "#211513",
"accentStr": "#4f2a20",
"onAccent": "#03080a",
"success": "#80cfac",
"successHot": "#99ddbd",
"successInk": "#80cfac",
"successMut": "rgba(128,207,172,.12)",
"onSuccess": "#03080a",
"warning": "#f4c66b",
"warningInk": "#f4c66b",
"warningMut": "rgba(244,198,107,.12)",
"onWarning": "#03080a",
"error": "#f68a97",
"errorInk": "#f68a97",
"errorMut": "rgba(246,138,151,.12)",
"onError": "#220c12",
"info": "#80baff",
"infoMut": "rgba(128,186,255,.12)",
"shadowPanel": "0 24px 80px rgba(0,0,0,.5)",
"shadowPop": "0 12px 40px rgba(0,0,0,.45)",
"shadowComposer": "none",
"shadowFloat": "0 6px 20px rgba(0,0,0,.28)",
"shadowSm": "0 1px 3px rgba(0,0,0,.25)",
"shadowMd": "0 8px 24px rgba(0,0,0,.3)",
"surfaceCanvas": "#03080a",
"surfacePanel": "#0c1417",
"surfaceInset": "#03080a",
"surfaceRaised": "#121b1e",
"surfaceOverlay": "#182125",
"textPrimary": "#eff3f5",
"textSecondary": "#a7b2b7",
"textMuted": "#929ea3",
"actionPrimary": "#ff7852",
"actionPrimaryHover": "#ff8867",
"actionOnPrimary": "#03080a",
"actionLink": "#ff9071",
"selectionFill": "#211513",
"selectionText": "#ff9071",
"selectionBorder": "#ff7852",
"focusRing": "#ff9071",
"infoInk": "#80baff",
"onInfo": "#03080a"
},
"light": {
"bg0": "#fbfbfa",
"bg1": "#ffffff",
"bg2": "#f3f2f1",
"bg3": "#edece9",
"bg4": "#e4e3e0",
"text": "#121210",
"textSec": "#4b4a47",
"textTer": "#62605b",
"textMut": "#6d6c67",
"textFaint": "#6d6c67",
"cream": "#fbfbfa",
"border": "#e4e3e0",
"borderHov": "#cfceca",
"borderStr": "#cfceca",
"borderHot": "#a09e9a",
"hair": "rgba(18,18,16,0.1)",
"hairHov": "rgba(18,18,16,0.18)",
"ring": "rgba(18,18,16,0.3)",
"accent": "#c94321",
"accentHot": "#b13b1d",
"accentInk": "#b13b1d",
"accentMut": "#f7eae6",
"accentStr": "#eecbc2",
"onAccent": "#ffffff",
"success": "#277452",
"successHot": "#1e6143",
"successInk": "#216346",
"successMut": "rgba(39,116,82,.09)",
"onSuccess": "#ffffff",
"warning": "#9c6500",
"warningInk": "#805200",
"warningMut": "rgba(156,101,0,.09)",
"onWarning": "#ffffff",
"error": "#b82e46",
"errorInk": "#b82e46",
"errorMut": "rgba(184,46,70,.09)",
"onError": "#ffffff",
"info": "#075bc6",
"infoMut": "rgba(7,91,198,.09)",
"shadowPanel": "0 24px 56px rgba(18,18,16,.10), 0 2px 6px rgba(18,18,16,.05)",
"shadowPop": "0 12px 32px rgba(18,18,16,.12)",
"shadowComposer": "0 2px 8px rgba(18,18,16,.04)",
"shadowFloat": "0 6px 20px rgba(18,18,16,.16)",
"shadowSm": "0 1px 2px rgba(18,18,16,.08)",
"shadowMd": "0 8px 24px rgba(18,18,16,.10)",
"surfaceCanvas": "#fbfbfa",
"surfacePanel": "#ffffff",
"surfaceInset": "#f3f2f1",
"surfaceRaised": "#ffffff",
"surfaceOverlay": "#ffffff",
"textPrimary": "#121210",
"textSecondary": "#4b4a47",
"textMuted": "#62605b",
"actionPrimary": "#c94321",
"actionPrimaryHover": "#b13b1d",
"actionOnPrimary": "#ffffff",
"actionLink": "#b13b1d",
"selectionFill": "#f7eae6",
"selectionText": "#b13b1d",
"selectionBorder": "#c94321",
"focusRing": "#b13b1d",
"infoInk": "#075bc6",
"onInfo": "#ffffff"
}
},
"accents": [
{
"id": "ember",
"label": "Ember",
"note": "Warm. Clear. A little unexpected.",
"dark": "#ff7852",
"light": "#c94321",
"themes": {
"dark": {
"bg0": "#03080a",
"bg1": "#0c1417",
"bg2": "#121b1e",
"bg3": "#182125",
"bg4": "#212c30",
"text": "#eff3f5",
"textSec": "#a7b2b7",
"textTer": "#929ea3",
"textMut": "#76848a",
"textFaint": "#76848a",
"cream": "#eff3f5",
"border": "#212c30",
"borderHov": "#334046",
"borderStr": "#334046",
"borderHot": "#54666d",
"hair": "rgba(239,243,245,0.07)",
"hairHov": "rgba(239,243,245,0.14)",
"ring": "rgba(239,243,245,0.22)",
"accent": "#ff7852",
"accentHot": "#ff8867",
"accentInk": "#ff9071",
"accentMut": "#211513",
"accentStr": "#4f2a20",
"onAccent": "#03080a",
"success": "#80cfac",
"successHot": "#99ddbd",
"successInk": "#80cfac",
"successMut": "rgba(128,207,172,.12)",
"onSuccess": "#03080a",
"warning": "#f4c66b",
"warningInk": "#f4c66b",
"warningMut": "rgba(244,198,107,.12)",
"onWarning": "#03080a",
"error": "#f68a97",
"errorInk": "#f68a97",
"errorMut": "rgba(246,138,151,.12)",
"onError": "#220c12",
"info": "#80baff",
"infoMut": "rgba(128,186,255,.12)",
"shadowPanel": "0 24px 80px rgba(0,0,0,.5)",
"shadowPop": "0 12px 40px rgba(0,0,0,.45)",
"shadowComposer": "none",
"shadowFloat": "0 6px 20px rgba(0,0,0,.28)",
"shadowSm": "0 1px 3px rgba(0,0,0,.25)",
"shadowMd": "0 8px 24px rgba(0,0,0,.3)",
"surfaceCanvas": "#03080a",
"surfacePanel": "#0c1417",
"surfaceInset": "#03080a",
"surfaceRaised": "#121b1e",
"surfaceOverlay": "#182125",
"textPrimary": "#eff3f5",
"textSecondary": "#a7b2b7",
"textMuted": "#929ea3",
"actionPrimary": "#ff7852",
"actionPrimaryHover": "#ff8867",
"actionOnPrimary": "#03080a",
"actionLink": "#ff9071",
"selectionFill": "#211513",
"selectionText": "#ff9071",
"selectionBorder": "#ff7852",
"focusRing": "#ff9071",
"infoInk": "#80baff",
"onInfo": "#03080a"
},
"light": {
"bg0": "#fbfbfa",
"bg1": "#ffffff",
"bg2": "#f3f2f1",
"bg3": "#edece9",
"bg4": "#e4e3e0",
"text": "#121210",
"textSec": "#4b4a47",
"textTer": "#62605b",
"textMut": "#6d6c67",
"textFaint": "#6d6c67",
"cream": "#fbfbfa",
"border": "#e4e3e0",
"borderHov": "#cfceca",
"borderStr": "#cfceca",
"borderHot": "#a09e9a",
"hair": "rgba(18,18,16,0.1)",
"hairHov": "rgba(18,18,16,0.18)",
"ring": "rgba(18,18,16,0.3)",
"accent": "#c94321",
"accentHot": "#b13b1d",
"accentInk": "#b13b1d",
"accentMut": "#f7eae6",
"accentStr": "#eecbc2",
"onAccent": "#ffffff",
"success": "#277452",
"successHot": "#1e6143",
"successInk": "#216346",
"successMut": "rgba(39,116,82,.09)",
"onSuccess": "#ffffff",
"warning": "#9c6500",
"warningInk": "#805200",
"warningMut": "rgba(156,101,0,.09)",
"onWarning": "#ffffff",
"error": "#b82e46",
"errorInk": "#b82e46",
"errorMut": "rgba(184,46,70,.09)",
"onError": "#ffffff",
"info": "#075bc6",
"infoMut": "rgba(7,91,198,.09)",
"shadowPanel": "0 24px 56px rgba(18,18,16,.10), 0 2px 6px rgba(18,18,16,.05)",
"shadowPop": "0 12px 32px rgba(18,18,16,.12)",
"shadowComposer": "0 2px 8px rgba(18,18,16,.04)",
"shadowFloat": "0 6px 20px rgba(18,18,16,.16)",
"shadowSm": "0 1px 2px rgba(18,18,16,.08)",
"shadowMd": "0 8px 24px rgba(18,18,16,.10)",
"surfaceCanvas": "#fbfbfa",
"surfacePanel": "#ffffff",
"surfaceInset": "#f3f2f1",
"surfaceRaised": "#ffffff",
"surfaceOverlay": "#ffffff",
"textPrimary": "#121210",
"textSecondary": "#4b4a47",
"textMuted": "#62605b",
"actionPrimary": "#c94321",
"actionPrimaryHover": "#b13b1d",
"actionOnPrimary": "#ffffff",
"actionLink": "#b13b1d",
"selectionFill": "#f7eae6",
"selectionText": "#b13b1d",
"selectionBorder": "#c94321",
"focusRing": "#b13b1d",
"infoInk": "#075bc6",
"onInfo": "#ffffff"
}
}
},
{
"id": "citron",
"label": "Citron",
"note": "Electric energy with a precise edge.",
"dark": "#cef265",
"light": "#667d00",
"themes": {
"dark": {
"bg0": "#03080a",
"bg1": "#0c1417",
"bg2": "#121b1e",
"bg3": "#182125",
"bg4": "#212c30",
"text": "#eff3f5",
"textSec": "#a7b2b7",
"textTer": "#929ea3",
"textMut": "#76848a",
"textFaint": "#76848a",
"cream": "#eff3f5",
"border": "#212c30",
"borderHov": "#334046",
"borderStr": "#334046",
"borderHot": "#54666d",
"hair": "rgba(239,243,245,0.07)",
"hairHov": "rgba(239,243,245,0.14)",
"ring": "rgba(239,243,245,0.22)",
"accent": "#cef265",
"accentHot": "#d4f477",
"accentInk": "#d7f481",
"accentMut": "#1b2415",
"accentStr": "#404e25",
"onAccent": "#03080a",
"success": "#80cfac",
"successHot": "#99ddbd",
"successInk": "#80cfac",
"successMut": "rgba(128,207,172,.12)",
"onSuccess": "#03080a",
"warning": "#f4c66b",
"warningInk": "#f4c66b",
"warningMut": "rgba(244,198,107,.12)",
"onWarning": "#03080a",
"error": "#f68a97",
"errorInk": "#f68a97",
"errorMut": "rgba(246,138,151,.12)",
"onError": "#220c12",
"info": "#80baff",
"infoMut": "rgba(128,186,255,.12)",
"shadowPanel": "0 24px 80px rgba(0,0,0,.5)",
"shadowPop": "0 12px 40px rgba(0,0,0,.45)",
"shadowComposer": "none",
"shadowFloat": "0 6px 20px rgba(0,0,0,.28)",
"shadowSm": "0 1px 3px rgba(0,0,0,.25)",
"shadowMd": "0 8px 24px rgba(0,0,0,.3)",
"surfaceCanvas": "#03080a",
"surfacePanel": "#0c1417",
"surfaceInset": "#03080a",
"surfaceRaised": "#121b1e",
"surfaceOverlay": "#182125",
"textPrimary": "#eff3f5",
"textSecondary": "#a7b2b7",
"textMuted": "#929ea3",
"actionPrimary": "#cef265",
"actionPrimaryHover": "#d4f477",
"actionOnPrimary": "#03080a",
"actionLink": "#d7f481",
"selectionFill": "#1b2415",
"selectionText": "#d7f481",
"selectionBorder": "#cef265",
"focusRing": "#d7f481",
"infoInk": "#80baff",
"onInfo": "#03080a"
},
"light": {
"bg0": "#fbfbfa",
"bg1": "#ffffff",
"bg2": "#f3f2f1",
"bg3": "#edece9",
"bg4": "#e4e3e0",
"text": "#121210",
"textSec": "#4b4a47",
"textTer": "#62605b",
"textMut": "#6d6c67",
"textFaint": "#6d6c67",
"cream": "#fbfbfa",
"border": "#e4e3e0",
"borderHov": "#cfceca",
"borderStr": "#cfceca",
"borderHot": "#a09e9a",
"hair": "rgba(18,18,16,0.1)",
"hairHov": "rgba(18,18,16,0.18)",
"ring": "rgba(18,18,16,0.3)",
"accent": "#667d00",
"accentHot": "#5a6e00",
"accentInk": "#5a6e00",
"accentMut": "#eef0e4",
"accentStr": "#d4dab9",
"onAccent": "#ffffff",
"success": "#277452",
"successHot": "#1e6143",
"successInk": "#216346",
"successMut": "rgba(39,116,82,.09)",
"onSuccess": "#ffffff",
"warning": "#9c6500",
"warningInk": "#805200",
"warningMut": "rgba(156,101,0,.09)",
"onWarning": "#ffffff",
"error": "#b82e46",
"errorInk": "#b82e46",
"errorMut": "rgba(184,46,70,.09)",
"onError": "#ffffff",
"info": "#075bc6",
"infoMut": "rgba(7,91,198,.09)",
"shadowPanel": "0 24px 56px rgba(18,18,16,.10), 0 2px 6px rgba(18,18,16,.05)",
"shadowPop": "0 12px 32px rgba(18,18,16,.12)",
"shadowComposer": "0 2px 8px rgba(18,18,16,.04)",
"shadowFloat": "0 6px 20px rgba(18,18,16,.16)",
"shadowSm": "0 1px 2px rgba(18,18,16,.08)",
"shadowMd": "0 8px 24px rgba(18,18,16,.10)",
"surfaceCanvas": "#fbfbfa",
"surfacePanel": "#ffffff",
"surfaceInset": "#f3f2f1",
"surfaceRaised": "#ffffff",
"surfaceOverlay": "#ffffff",
"textPrimary": "#121210",
"textSecondary": "#4b4a47",
"textMuted": "#62605b",
"actionPrimary": "#667d00",
"actionPrimaryHover": "#5a6e00",
"actionOnPrimary": "#ffffff",
"actionLink": "#5a6e00",
"selectionFill": "#eef0e4",
"selectionText": "#5a6e00",
"selectionBorder": "#667d00",
"focusRing": "#5a6e00",
"infoInk": "#075bc6",
"onInfo": "#ffffff"
}
}
},
{
"id": "glacier",
"label": "Glacier",
"note": "Cool clarity, with more life than blue.",
"dark": "#55d7e8",
"light": "#007d91",
"themes": {
"dark": {
"bg0": "#03080a",
"bg1": "#0c1417",
"bg2": "#121b1e",
"bg3": "#182125",
"bg4": "#212c30",
"text": "#eff3f5",
"textSec": "#a7b2b7",
"textTer": "#929ea3",
"textMut": "#76848a",
"textFaint": "#76848a",
"cream": "#eff3f5",
"border": "#212c30",
"borderHov": "#334046",
"borderStr": "#334046",
"borderHot": "#54666d",
"hair": "rgba(239,243,245,0.07)",
"hairHov": "rgba(239,243,245,0.14)",
"ring": "rgba(239,243,245,0.22)",
"accent": "#55d7e8",
"accentHot": "#69dceb",
"accentInk": "#74deec",
"accentMut": "#0d2125",
"accentStr": "#1c464d",
"onAccent": "#03080a",
"success": "#80cfac",
"successHot": "#99ddbd",
"successInk": "#80cfac",
"successMut": "rgba(128,207,172,.12)",
"onSuccess": "#03080a",
"warning": "#f4c66b",
"warningInk": "#f4c66b",
"warningMut": "rgba(244,198,107,.12)",
"onWarning": "#03080a",
"error": "#f68a97",
"errorInk": "#f68a97",
"errorMut": "rgba(246,138,151,.12)",
"onError": "#220c12",
"info": "#80baff",
"infoMut": "rgba(128,186,255,.12)",
"shadowPanel": "0 24px 80px rgba(0,0,0,.5)",
"shadowPop": "0 12px 40px rgba(0,0,0,.45)",
"shadowComposer": "none",
"shadowFloat": "0 6px 20px rgba(0,0,0,.28)",
"shadowSm": "0 1px 3px rgba(0,0,0,.25)",
"shadowMd": "0 8px 24px rgba(0,0,0,.3)",
"surfaceCanvas": "#03080a",
"surfacePanel": "#0c1417",
"surfaceInset": "#03080a",
"surfaceRaised": "#121b1e",
"surfaceOverlay": "#182125",
"textPrimary": "#eff3f5",
"textSecondary": "#a7b2b7",
"textMuted": "#929ea3",
"actionPrimary": "#55d7e8",
"actionPrimaryHover": "#69dceb",
"actionOnPrimary": "#03080a",
"actionLink": "#74deec",
"selectionFill": "#0d2125",
"selectionText": "#74deec",
"selectionBorder": "#55d7e8",
"focusRing": "#74deec",
"infoInk": "#80baff",
"onInfo": "#03080a"
},
"light": {
"bg0": "#fbfbfa",
"bg1": "#ffffff",
"bg2": "#f3f2f1",
"bg3": "#edece9",
"bg4": "#e4e3e0",
"text": "#121210",
"textSec": "#4b4a47",
"textTer": "#62605b",
"textMut": "#6d6c67",
"textFaint": "#6d6c67",
"cream": "#fbfbfa",
"border": "#e4e3e0",
"borderHov": "#cfceca",
"borderStr": "#cfceca",
"borderHot": "#a09e9a",
"hair": "rgba(18,18,16,0.1)",
"hairHov": "rgba(18,18,16,0.18)",
"ring": "rgba(18,18,16,0.3)",
"accent": "#007d91",
"accentHot": "#006e80",
"accentInk": "#006e80",
"accentMut": "#e4f0f1",
"accentStr": "#badadf",
"onAccent": "#ffffff",
"success": "#277452",
"successHot": "#1e6143",
"successInk": "#216346",
"successMut": "rgba(39,116,82,.09)",
"onSuccess": "#ffffff",
"warning": "#9c6500",
"warningInk": "#805200",
"warningMut": "rgba(156,101,0,.09)",
"onWarning": "#ffffff",
"error": "#b82e46",
"errorInk": "#b82e46",
"errorMut": "rgba(184,46,70,.09)",
"onError": "#ffffff",
"info": "#075bc6",
"infoMut": "rgba(7,91,198,.09)",
"shadowPanel": "0 24px 56px rgba(18,18,16,.10), 0 2px 6px rgba(18,18,16,.05)",
"shadowPop": "0 12px 32px rgba(18,18,16,.12)",
"shadowComposer": "0 2px 8px rgba(18,18,16,.04)",
"shadowFloat": "0 6px 20px rgba(18,18,16,.16)",
"shadowSm": "0 1px 2px rgba(18,18,16,.08)",
"shadowMd": "0 8px 24px rgba(18,18,16,.10)",
"surfaceCanvas": "#fbfbfa",
"surfacePanel": "#ffffff",
"surfaceInset": "#f3f2f1",
"surfaceRaised": "#ffffff",
"surfaceOverlay": "#ffffff",
"textPrimary": "#121210",
"textSecondary": "#4b4a47",
"textMuted": "#62605b",
"actionPrimary": "#007d91",
"actionPrimaryHover": "#006e80",
"actionOnPrimary": "#ffffff",
"actionLink": "#006e80",
"selectionFill": "#e4f0f1",
"selectionText": "#006e80",
"selectionBorder": "#007d91",
"focusRing": "#006e80",
"infoInk": "#075bc6",
"onInfo": "#ffffff"
}
}
},
{
"id": "blue",
"label": "Electric blue",
"note": "The original Studio direction.",
"dark": "#258bff",
"light": "#0865d9",
"themes": {
"dark": {
"bg0": "#03080a",
"bg1": "#0c1417",
"bg2": "#121b1e",
"bg3": "#182125",
"bg4": "#212c30",
"text": "#eff3f5",
"textSec": "#a7b2b7",
"textTer": "#929ea3",
"textMut": "#76848a",
"textFaint": "#76848a",
"cream": "#eff3f5",
"border": "#212c30",
"borderHov": "#334046",
"borderStr": "#334046",
"borderHot": "#54666d",
"hair": "rgba(239,243,245,0.07)",
"hairHov": "rgba(239,243,245,0.14)",
"ring": "rgba(239,243,245,0.22)",
"accent": "#258bff",
"accentHot": "#3f99ff",
"accentInk": "#4ca0ff",
"accentMut": "#071827",
"accentStr": "#0d2f54",
"onAccent": "#03080a",
"success": "#80cfac",
"successHot": "#99ddbd",
"successInk": "#80cfac",
"successMut": "rgba(128,207,172,.12)",
"onSuccess": "#03080a",
"warning": "#f4c66b",
"warningInk": "#f4c66b",
"warningMut": "rgba(244,198,107,.12)",
"onWarning": "#03080a",
"error": "#f68a97",
"errorInk": "#f68a97",
"errorMut": "rgba(246,138,151,.12)",
"onError": "#220c12",
"info": "#80baff",
"infoMut": "rgba(128,186,255,.12)",
"shadowPanel": "0 24px 80px rgba(0,0,0,.5)",
"shadowPop": "0 12px 40px rgba(0,0,0,.45)",
"shadowComposer": "none",
"shadowFloat": "0 6px 20px rgba(0,0,0,.28)",
"shadowSm": "0 1px 3px rgba(0,0,0,.25)",
"shadowMd": "0 8px 24px rgba(0,0,0,.3)",
"surfaceCanvas": "#03080a",
"surfacePanel": "#0c1417",
"surfaceInset": "#03080a",
"surfaceRaised": "#121b1e",
"surfaceOverlay": "#182125",
"textPrimary": "#eff3f5",
"textSecondary": "#a7b2b7",
"textMuted": "#929ea3",
"actionPrimary": "#258bff",
"actionPrimaryHover": "#3f99ff",
"actionOnPrimary": "#03080a",
"actionLink": "#4ca0ff",
"selectionFill": "#071827",
"selectionText": "#4ca0ff",
"selectionBorder": "#258bff",
"focusRing": "#4ca0ff",
"infoInk": "#80baff",
"onInfo": "#03080a"
},
"light": {
"bg0": "#fbfbfa",
"bg1": "#ffffff",
"bg2": "#f3f2f1",
"bg3": "#edece9",
"bg4": "#e4e3e0",
"text": "#121210",
"textSec": "#4b4a47",
"textTer": "#62605b",
"textMut": "#6d6c67",
"textFaint": "#6d6c67",
"cream": "#fbfbfa",
"border": "#e4e3e0",
"borderHov": "#cfceca",
"borderStr": "#cfceca",
"borderHot": "#a09e9a",
"hair": "rgba(18,18,16,0.1)",
"hairHov": "rgba(18,18,16,0.18)",
"ring": "rgba(18,18,16,0.3)",
"accent": "#0865d9",
"accentHot": "#0759bf",
"accentInk": "#0759bf",
"accentMut": "#e5eef7",
"accentStr": "#bcd4f1",
"onAccent": "#ffffff",
"success": "#277452",
"successHot": "#1e6143",
"successInk": "#216346",
"successMut": "rgba(39,116,82,.09)",
"onSuccess": "#ffffff",
"warning": "#9c6500",
"warningInk": "#805200",
"warningMut": "rgba(156,101,0,.09)",
"onWarning": "#ffffff",
"error": "#b82e46",
"errorInk": "#b82e46",
"errorMut": "rgba(184,46,70,.09)",
"onError": "#ffffff",
"info": "#075bc6",
"infoMut": "rgba(7,91,198,.09)",
"shadowPanel": "0 24px 56px rgba(18,18,16,.10), 0 2px 6px rgba(18,18,16,.05)",
"shadowPop": "0 12px 32px rgba(18,18,16,.12)",
"shadowComposer": "0 2px 8px rgba(18,18,16,.04)",
"shadowFloat": "0 6px 20px rgba(18,18,16,.16)",
"shadowSm": "0 1px 2px rgba(18,18,16,.08)",
"shadowMd": "0 8px 24px rgba(18,18,16,.10)",
"surfaceCanvas": "#fbfbfa",
"surfacePanel": "#ffffff",
"surfaceInset": "#f3f2f1",
"surfaceRaised": "#ffffff",
"surfaceOverlay": "#ffffff",
"textPrimary": "#121210",
"textSecondary": "#4b4a47",
"textMuted": "#62605b",
"actionPrimary": "#0865d9",
"actionPrimaryHover": "#0759bf",
"actionOnPrimary": "#ffffff",
"actionLink": "#0759bf",
"selectionFill": "#e5eef7",
"selectionText": "#0759bf",
"selectionBorder": "#0865d9",
"focusRing": "#0759bf",
"infoInk": "#075bc6",
"onInfo": "#ffffff"
}
}
}
],
"spatial": {
"defaultRecipe": {
"density": "comfortable",
"inset": 24,
"radius": 12
},
"values": {
"unit": 4,
"label": 6,
"cluster": 8,
"related": 12,
"group": 24,
"section": 48,
"inset": 24,
"control": 40,
"inner": 12,
"outer": 36
},
"densities": {
"compact": {
"label": "Compact",
"related": 8,
"group": 16,
"inset": 16,
"control": 32
},
"comfortable": {
"label": "Comfortable",
"related": 12,
"group": 24,
"inset": 24,
"control": 40
},
"touch": {
"label": "Touch",
"related": 16,
"group": 32,
"inset": 24,
"control": 48
}
}
}
}
}