{ "schema": "lattice.design-system/v2", "version": "2.2.0", "date": "2026-09-12", "title": "Lattice Design System · Design reference", "status": "Current minimal design and implementation reference; restores the original near-black and square visual foundation.", "appearance": { "default": "dark", "options": [ "dark", "void", "light", "system" ], "names": { "dark": "Graphite", "void": "Void", "light": "Paper" }, "notes": { "dark": "The default. Near-black with a slight cool tint and charcoal layers.", "void": "Almost pitch black for OLED and dark rooms. Same accents, deeper layers.", "light": "Soft off-white paper, not pure white. For daylight and print previews." }, "color_scheme": { "dark": "dark", "void": "dark", "light": "light" }, "canvas": "#101113", "void_canvas": "#070708", "paper_canvas": "#ECEBE7", "accent_navy": "#1B2A44", "brand_blue": "#3560A8", "persistence_key": "lattice-v22-theme", "legacy_preferences": "Prior experimental theme preferences are not migrated; this correction opens in near-black. New explicit selections are remembered." }, "context": { "company": "Lattice", "product": "Lattice Studio", "domain": "Real-time volumetric capture and streaming", "audiences": [ "Capture operators", "Technical evaluators", "Developers", "Customers and investors" ], "direction": "Engineered. Restrained. Readable.", "preserve": [ "Original six-path logo and orientation", "IBM Plex Sans", "IBM Plex Mono", "Technical accuracy" ], "scope": [ "Web", "Operator displays", "Decks", "Documents" ], "spatial_interface_scope": "A separate validated platform specification is required for headsets and 3D input." }, "precedence": [ "Task-specific user instructions and applicable requirements", "Normative MUST rules", "Semantic tokens and component contracts", "Guidance and examples" ], "token_format": { "description": "Custom Lattice schema, not DTCG. Every key maps directly to a --lt-{key} CSS variable. Colors are sRGB hex. Lengths retain their CSS unit. Shadow and font stacks are CSS values.", "foundation": { "font-sans": "\"IBM Plex Sans\", \"Segoe UI\", Arial, sans-serif", "font-mono": "\"IBM Plex Mono\", Consolas, monospace", "space-1": "0.25rem", "space-2": "0.5rem", "space-3": "0.75rem", "space-4": "1rem", "space-6": "1.5rem", "space-8": "2rem", "space-12": "3rem", "space-16": "4rem", "space-24": "6rem", "radius-control": "0px", "radius-panel": "0px", "radius-dialog": "0px", "duration-fast": "120ms", "duration-standard": "200ms", "duration-expressive": "360ms", "ease-standard": "cubic-bezier(.2,0,0,1)", "target": "44px", "target-compact": "32px", "brand-black": "#101113", "brand-void": "#070708", "brand-blue": "#3560A8", "brand-paper": "#F4F4F3", "brand-navy": "#1B2A44", "brand-midnight": "#08090B", "brand-sky": "#9DBBF0", "mark-optical-shift": "12%", "scene-ink": "#11141A", "scene-text": "#DDE0E5", "scene-muted": "#98A2B1", "scene-line": "#39475B", "scene-point": "#818995", "scene-highlight": "#627EA4" }, "themes": { "dark": { "canvas": "#101113", "surface": "#181A1E", "subtle": "#21242A", "raised": "#292D34", "text": "#ECEDEF", "secondary": "#B9BDC5", "muted": "#A0A6B0", "border": "#30343B", "control-border": "#6C7583", "action": "#3560A8", "action-hover": "#4570B8", "action-active": "#2A4D8A", "on-action": "#F4F5F7", "action-border": "#3560A8", "accent-text": "#9DBBF0", "selected": "#1B2A44", "focus": "#A9C4F2", "success": "#96B8A4", "success-bg": "#1D2823", "warning": "#D0BB92", "warning-bg": "#2D281F", "danger": "#D8A3A3", "danger-bg": "#302124", "info": "#9DBBF0", "info-bg": "#1B2A44", "disabled": "#949AA4", "disabled-bg": "#25282E", "shadow": "none", "overlay": "#000000B3", "data-1": "#9BB0CE", "data-2": "#9EBAC0", "data-3": "#B4A6C8", "data-4": "#C4AE96", "data-5": "#96B8A4", "data-6": "#C0A6B7" }, "void": { "canvas": "#070708", "surface": "#0E0E10", "subtle": "#141416", "raised": "#1A1A1D", "text": "#EDEDEF", "secondary": "#B6B9BF", "muted": "#9BA0A8", "border": "#222226", "control-border": "#646870", "action": "#3560A8", "action-hover": "#4570B8", "action-active": "#2A4D8A", "on-action": "#F4F5F7", "action-border": "#3560A8", "accent-text": "#9DBBF0", "selected": "#131E33", "focus": "#A9C4F2", "success": "#96B8A4", "success-bg": "#111A15", "warning": "#D0BB92", "warning-bg": "#1E1A11", "danger": "#D8A3A3", "danger-bg": "#221315", "info": "#9DBBF0", "info-bg": "#131E33", "disabled": "#8F949D", "disabled-bg": "#17181B", "shadow": "none", "overlay": "#000000CC" }, "light": { "canvas": "#ECEBE7", "surface": "#F6F5F2", "subtle": "#E1E0DB", "raised": "#FAF9F7", "text": "#1A1D22", "secondary": "#454B55", "muted": "#565D68", "border": "#CBCAC5", "control-border": "#6B7380", "action": "#27509A", "action-hover": "#1E4386", "action-active": "#173569", "on-action": "#FFFFFF", "action-border": "#27509A", "accent-text": "#27509A", "selected": "#DCE2EB", "focus": "#27509A", "success": "#3B5D4C", "success-bg": "#DCE6DF", "warning": "#6A5228", "warning-bg": "#EBE4D3", "danger": "#84474B", "danger-bg": "#EBDCDD", "info": "#27509A", "info-bg": "#DCE2EB", "disabled": "#565D68", "disabled-bg": "#D6D5D0", "shadow": "none", "overlay": "#00000099", "data-1": "#4A6285", "data-2": "#3F6870", "data-3": "#6D5D83", "data-4": "#826044", "data-5": "#3F6250", "data-6": "#7A5B70" } } }, "type_scale": [ { "role": "Display", "size": "48–72", "line": "1.05", "weight": "400", "use": "Editorial opening; fluid, down to 40px on small screens" }, { "role": "Heading 1", "size": "40", "line": "1.15", "weight": "500", "use": "Page title; 32px on small screens" }, { "role": "Heading 2", "size": "28", "line": "1.2", "weight": "500", "use": "Section heading" }, { "role": "Heading 3", "size": "20", "line": "1.3", "weight": "500", "use": "Task group" }, { "role": "Body", "size": "16", "line": "1.6", "weight": "400", "use": "Reading and explanation" }, { "role": "Interface", "size": "14", "line": "1.5", "weight": "400 / 500", "use": "Controls and navigation" }, { "role": "Annotation", "size": "12", "line": "1.5", "weight": "400 / 500", "use": "Units, captions, metadata; Mono only for technical content" } ], "data_palettes": { "light": [ "#4A6285", "#3F6870", "#6D5D83", "#826044", "#3F6250", "#7A5B70" ], "dark": [ "#9BB0CE", "#9EBAC0", "#B4A6C8", "#C4AE96", "#96B8A4", "#C0A6B7" ] }, "vector_assets": { "mark_svg": " ", "lockup_svg": "LATTICE", "lockup_symbol": " ", "icons": { "capture": "", "layers": "", "calibrate": "", "stream": "", "export": "", "arrow": "", "search": "", "close": "" }, "usage": "The mark SVG is standalone. When it is centred alone, offset it right by 12% of its rendered width so the hub of its three wings is centred; never offset the lockup. The lockup uses the supplied lattice-mark symbol and IBM Plex Sans. Icons inherit currentColor and need an accessible label on their containing control.", "mark_optical_shift": "12% of rendered mark width, to the right, when centred alone" }, "layout": { "principal_unit_px": 8, "spacing_px": [ 4, 8, 12, 16, 24, 32, 48, 64, 96 ], "breakpoints": [ { "min_px": 0, "columns": 4, "gutter_px": 16 }, { "min_px": 640, "columns": 8, "gutter_px": 24 }, { "min_px": 1024, "columns": 12, "gutter_px": 24 } ], "documentation_max_px": null, "shell_width": "100vw", "shell_alignment": "left", "sidebar_px": 268, "sidebar_intermediate_px": 240, "sidebar_collapses_below_px": 1024 }, "rules": [ { "id": "LT-PRINCIPLES-01", "section": "principles", "level": "MUST", "title": "Start with the task", "requirement": "Identify the audience, current task, most important content, primary action, and failure recovery before composing a screen." }, { "id": "LT-PRINCIPLES-02", "section": "principles", "level": "MUST", "title": "Make structure visible", "requirement": "Give a view one main heading and a clear task area. Use alignment, scale, and grouped spacing before adding containers. A panel needs a reason: a separate task, selectable entity, or independent data group." }, { "id": "LT-PRINCIPLES-03", "section": "principles", "level": "MUST", "title": "Keep people in control", "requirement": "Preserve input after errors. Let people cancel long operations where technically possible; explain any non-cancelable stage before it begins. Offer undo for reversible changes and confirmation for irreversible destructive actions." }, { "id": "LT-PRINCIPLES-04", "section": "principles", "level": "MUST", "title": "Use the two registers", "requirement": "Use the editorial register for websites, decks, and reading; use the instrument register for operation, inspection, and data. Both share fonts, semantic colors, logo, and spacing. Register is independent of light or dark theme." }, { "id": "LT-IDENTITY-01", "section": "identity", "level": "MUST", "title": "Preserve the master", "requirement": "Use the original six-path Lattice mark, unmodified, in its supplied orientation and aspect ratio. Do not redraw, rotate, stretch, crop, animate its geometry, add outlines, or apply gradients." }, { "id": "LT-IDENTITY-02", "section": "identity", "level": "MUST", "title": "Give the mark room", "requirement": "Reserve clear space on all sides equal to at least one quarter of the visible mark height. Minimum visible standalone mark height is 24 CSS px on screen or 6 mm in print; minimum horizontal lockup width is 120 CSS px or 30 mm. If space is tighter, use the wordmark as text." }, { "id": "LT-IDENTITY-03", "section": "identity", "level": "MUST", "title": "Use approved lockups", "requirement": "Set LATTICE in IBM Plex Sans Medium with tracking of 0.06em. Use the supplied lockup SVG for composition. Mark-to-wordmark gap is 0.4 times mark height. Mark height is 1.35 times the visible capital height of the wordmark. Typeset Lattice Studio normally in interface titles. Lattice Studios is reserved for the full legal/entity lockup inherited from v1." }, { "id": "LT-IDENTITY-04", "section": "identity", "level": "MUST", "title": "Color the mark deliberately", "requirement": "Use the original mark in near-white on black, dark ink on light, or Lattice blue where a small identity accent is needed. Keep logo specimens monochrome. Do not place the logo on decorative full-blue fields or over an image without an opaque backing and clear space." }, { "id": "LT-IDENTITY-05", "section": "identity", "level": "MUST", "title": "Centre the mark optically", "requirement": "The mark's ink sits left of its bounding box: its two long wings point back while the tip points forward. When the mark stands alone in a centred position (a tile, an icon, an app launcher, an empty state), offset it to the right by 12% of its rendered width (--lt-mark-optical-shift) so the hub where its three wings meet, not its bounding box, sits on the centre line. At icon sizes of 32 CSS px and below, halve the offset to 6%, because the tip would otherwise crowd the edge of the square. Measure clear space from that optical placement, so the mark reads centred inside its clear-space frame. Do not offset the horizontal lockup; the wordmark balances it." }, { "id": "LT-COLOR-01", "section": "color", "level": "MUST", "title": "Use roles in code", "requirement": "Reference --lt-* semantic tokens in components. Raw hex values belong only in token definitions, fixed brand artwork, and explicitly documented data palettes. Theme changes must preserve each role's meaning." }, { "id": "LT-COLOR-02", "section": "color", "level": "MUST", "title": "Keep color subordinate", "requirement": "The interface is predominantly near-black and charcoal, with neutral off-white text. Lattice blue and navy are small accents for links, focus, selection, key actions, or a measured graphic. Green, amber, and red belong only to labeled status. Additional data-series hues belong only in the plot, never in the page background." }, { "id": "LT-COLOR-03", "section": "color", "level": "MUST", "title": "Give every accent a purpose", "requirement": "Use one Lattice-blue primary action per independent task group. Keep headings, prose, cards, toolbars, and navigation mostly neutral. Use a thin blue rule or a small selected region where it communicates state. Do not fill hero areas, slide backgrounds, callouts, or general panels with saturated blue." }, { "id": "LT-COLOR-04", "section": "color", "level": "MUST", "title": "Default to Graphite; offer Void and Paper", "requirement": "Lattice has three appearances that share one semantic map. Graphite (data-theme=dark, canvas #101113) is the default: near-black with a slight cool tint and charcoal layers; the HTML root and bare CSS token defaults both select it. Void (data-theme=void, canvas #070708) is an almost pitch-black appearance for OLED and dark rooms with the same accents and deeper layers. Paper (data-theme=light, canvas #ECEBE7) is a soft off-white light appearance, never pure white on screen. Void, Paper, and system remain explicit user choices. Use the complete semantic map in each appearance; navy is an accent surface, not a canvas." }, { "id": "LT-TYPE-01", "section": "type", "level": "MUST", "title": "Two families, one hierarchy", "requirement": "Use IBM Plex Sans for headings, body, labels, and navigation. Use IBM Plex Mono for values, units, IDs, code, and technical annotations. No serif exception. Use sentence case for interface text; uppercase mono is reserved for short annotations." }, { "id": "LT-TYPE-02", "section": "type", "level": "MUST", "title": "Make reading comfortable", "requirement": "Body is 16px/1.6 at the default root; interface text is 14px/1.5; essential labels are at least 12px/1.5. Express sizes in rem so user scaling works. Keep prose near 60–70 characters per line. Do not reduce type to solve crowding." }, { "id": "LT-TYPE-03", "section": "type", "level": "MUST", "title": "Use weight as information", "requirement": "Use 400 for body and display, 500 for headings and labels, and 600 for strong emphasis. Weight 300 is allowed only for nonessential editorial display at 48px or larger. Avoid weight 300 in controls, captions, and metrics." }, { "id": "LT-TYPE-04", "section": "type", "level": "MUST", "title": "Format measurement carefully", "requirement": "Set measurements in tabular figures with visible units and a nonbreaking space between number and unit. Align comparable values to the end of their column. Use a dash with an accessible 'unavailable' label for missing data, never a fabricated zero." }, { "id": "LT-LAYOUT-01", "section": "layout", "level": "MUST", "title": "Space communicates relationships", "requirement": "Use 4, 8, 12, 16, 24, 32, 48, 64, or 96px spacing at the default root. Use 8px as the principal unit and 4px for fine relationships. Use 8px between label and control, 16–24px within task groups, and 32–48px between groups. Borders and optical corrections may use 1–2px." }, { "id": "LT-LAYOUT-02", "section": "layout", "level": "MUST", "title": "Use the available screen", "requirement": "The application shell spans the full viewport and starts at the left edge; do not center it inside a maximum-width page frame. Desktop documentation uses a 268px sidebar plus a fluid main column. Keep prose near 60–70 characters per line, but let tables, diagrams, and example groups use the available main width. Use 4/8/12 content columns across small/medium/large layouts with 16–24px gutters." }, { "id": "LT-LAYOUT-03", "section": "layout", "level": "MUST", "title": "Keep the guide compact", "requirement": "Use 48–64px section padding and 16–24px within related groups. Use content-height examples and avoid large promotional banners, decorative hero artwork, or repeated oversized cards. Preserve generous reading line height without adding empty full-width panels." }, { "id": "LT-LAYOUT-04", "section": "layout", "level": "MUST", "title": "Density is a preference", "requirement": "Comfortable controls are at least 44px tall and table rows at least 48px. Compact mode may use 32px controls and 36px rows only with fine pointers; coarse pointers retain 44px targets. Never reduce text contrast or essential font size in compact mode." }, { "id": "LT-LAYOUT-05", "section": "layout", "level": "MUST", "title": "Adapt without losing work", "requirement": "On narrow screens, stack content in reading order, collapse navigation behind a labeled control, and move secondary inspectors below the main task. Only genuinely two-dimensional content such as data tables may scroll horizontally inside a labeled keyboard-accessible region. Preserve current state during resizing." }, { "id": "LT-MATERIAL-01", "section": "material", "level": "MUST", "title": "Use square corners", "requirement": "All interface rectangles use 0px corner radius: buttons, fields, selects, cards, tables, dialogs, tags, progress tracks, and toggles. Do not round containers or use pill controls. Circles may appear only when intrinsic to an icon, data marker, or the original logo geometry." }, { "id": "LT-MATERIAL-02", "section": "material", "level": "MUST", "title": "Keep layers flat", "requirement": "Use opaque near-black/charcoal layers and 1px borders to distinguish surfaces. Do not use drop shadows, decorative inset shadows, glows, backdrop blur, glass, or translucent panels. Dialogs use a flat backdrop and a visible border. Center blocking dialogs within the viewport; align anchored menus with their trigger." }, { "id": "LT-MATERIAL-03", "section": "material", "level": "MUST", "title": "Keep graphics functional", "requirement": "Use actual captures, simple diagrams, and measured annotations where they explain the subject. Keep most geometry neutral, with a small blue accent where useful. Do not add decorative field frames, large color ribbons, or a hero illustration to every page." }, { "id": "LT-COMPONENTS-01", "section": "components", "level": "MUST", "title": "Give actions a restrained hierarchy", "requirement": "Use one Lattice-blue primary action per task group, neutral outlined secondary actions, and low-emphasis text actions. Keep rectangular edges square. Use a verb and object such as Start capture. Destructive actions use labeled danger styling. Center button labels and icons vertically; align selects and inputs to the same control height." }, { "id": "LT-COMPONENTS-02", "section": "components", "level": "MUST", "title": "Define every interaction state", "requirement": "A reusable control specifies default, hover, pressed, focus-visible, disabled, and busy states. Selection adds aria-pressed or the native selected/checked semantic as appropriate. Disabled actions have an adjacent reason if it is not obvious. Busy controls retain their width, prevent duplicate submission, and announce progress." }, { "id": "LT-COMPONENTS-03", "section": "components", "level": "MUST", "title": "Keep fields self-explanatory", "requirement": "Every field has a persistent label. Helper text explains constraints before input. Show a specific error beside the field, associate it with aria-describedby, and set aria-invalid after validation. Placeholders are examples, never the sole label. Validate at submission or after a meaningful edit, not on every keystroke." }, { "id": "LT-COMPONENTS-04", "section": "components", "level": "MUST", "title": "Use native controls first", "requirement": "Use native buttons, links, inputs, selects, checkboxes, and dialogs where possible. Tabs require tablist/tab/tabpanel semantics, arrow-key navigation, Home/End, one tab stop, and a selected state independent of color. Toggles describe an immediately applied setting; checkboxes select items or form values." }, { "id": "LT-COMPONENTS-05", "section": "components", "level": "MUST", "title": "Dialogs are interruptions", "requirement": "Use a dialog only when a decision blocks the task. Give it a specific title, concise consequence, explicit cancel action, and clear completion action. Trap focus while open, support Escape when cancel is allowed, and return focus to the opener. For destructive confirmation, put initial focus on Cancel." }, { "id": "LT-FEEDBACK-01", "section": "feedback", "level": "MUST", "title": "Show state where it matters", "requirement": "Every data surface covers initial/empty, loading, ready, partial/degraded, error, stale/offline, and success where applicable. State includes a plain description and a relevant next step. Stale data displays its last-updated time; do not color it as live." }, { "id": "LT-FEEDBACK-02", "section": "feedback", "level": "MUST", "title": "Report real progress", "requirement": "Use determinate progress only when the denominator is known. Otherwise show the named stage and an indeterminate indicator without a fabricated percentage or countdown. Pair progress with text, announce stage changes politely, and allow cancellation where supported." }, { "id": "LT-FEEDBACK-03", "section": "feedback", "level": "MUST", "title": "Make recovery local", "requirement": "Put actionable errors next to the failed operation and preserve entered values. Use a persistent banner for lost connectivity or a blocked workflow. Use a toast only for low-risk confirmations that do not require reading before work can continue. Critical errors never auto-dismiss." }, { "id": "LT-FEEDBACK-04", "section": "feedback", "level": "MUST", "title": "Be honest about live data", "requirement": "A Live label requires an active connection and recent data according to a defined product freshness threshold. Show Paused, Reconnecting, or Offline when applicable. Keep example data visibly labeled 'Simulated' and never promote illustrative metrics into product or investor claims." }, { "id": "LT-DATA-01", "section": "data", "level": "MUST", "title": "Make numbers comparable", "requirement": "Tables have a descriptive caption, scoped headers, stable units, and end-aligned numeric columns. Sort controls announce their direction with aria-sort. Hover reveals no essential information. When selectable, expose selection through native checkboxes or equivalent accessible semantics." }, { "id": "LT-DATA-02", "section": "data", "level": "MUST", "title": "Label the plot", "requirement": "Charts include a title, axes or explicit scale, units, time window, and a text summary or accessible data equivalent. Never rely on hue alone: add markers, dash patterns, direct labels, or a table. Disclose nonzero baselines and avoid decorative perspective in quantitative charts." }, { "id": "LT-DATA-03", "section": "data", "level": "MUST", "title": "Use a stable series order", "requirement": "Use the documented six-color data palette in order for categorical series; these extra hues are data-only and must not become brand surfaces. Use blue with ordered lightness for magnitude. Series-to-color mapping remains stable across a workflow. Status colors must not change the identity of an unrelated series. More than six series require grouping or direct labeling, not an improvised rainbow." }, { "id": "LT-DATA-04", "section": "data", "level": "MUST", "title": "Distinguish a scene from evidence", "requirement": "Use actual captures with source/context for product evidence. Generative geometry is allowed as explicitly illustrative brand artwork. Do not present a generated scene as an actual reconstruction, customer capture, benchmark, or production capability." }, { "id": "LT-MOTION-01", "section": "motion", "level": "MUST", "title": "Motion explains a change", "requirement": "Use 120ms for local hover/pressed feedback, 200ms for panels and state transitions, and up to 360ms for a one-time editorial reveal. Use cubic-bezier(.2,0,0,1). Animate opacity and transform where possible; do not animate document layout, telemetry values, or text width." }, { "id": "LT-MOTION-02", "section": "motion", "level": "MUST", "title": "Avoid ambient activity", "requirement": "Do not continuously animate brand artwork, decorative scan lines, logos, or backgrounds. An active progress indicator may move only while a real task is running. No parallax, spring overshoot, or flashing status indicators." }, { "id": "LT-MOTION-03", "section": "motion", "level": "MUST", "title": "Respect reduced motion", "requirement": "Honor prefers-reduced-motion with instant state changes, no spatial movement, and no smooth scrolling. Retain the same information with static labels and progress values. Stopping animation must not stop the underlying operation or feedback." }, { "id": "LT-ACCESSIBILITY-01", "section": "accessibility", "level": "MUST", "title": "Contrast is a release gate", "requirement": "Normal text needs at least 4.5:1 contrast; large text (24px regular or about 18.7px bold) needs 3:1. Essential control boundaries, graphical objects, and state indicators need 3:1 against adjacent colors. Decorative separators are exempt. Measure final rendered pairs in both themes, including hover, selected, and error states." }, { "id": "LT-ACCESSIBILITY-02", "section": "accessibility", "level": "MUST", "title": "Keyboard is a complete path", "requirement": "Every operation works without a pointer. Maintain logical DOM order, visible focus, a skip link for repeated navigation, accessible names, and focus return after overlays. A focus ring is at least 2px with 3px separation from the control; test it against each adjacent surface. Never remove focus without an equivalent." }, { "id": "LT-ACCESSIBILITY-03", "section": "accessibility", "level": "MUST", "title": "Design for zoom and touch", "requirement": "Support 200% text resizing and reflow at 320 CSS px; do not clip labels or hide essential functions. Use a Lattice minimum 44×44 CSS px touch target. This is a web product decision, not a claim that CSS px and Apple's platform points are identical. Space adjacent targets so activation is unambiguous." }, { "id": "LT-ACCESSIBILITY-04", "section": "accessibility", "level": "MUST", "title": "Support different perceptions", "requirement": "Pair color with words and shape. Provide meaningful text alternatives for informative images and hide purely decorative graphics from assistive technology. Respect reduced motion, test forced colors, and use polite live regions for status without repeatedly announcing changing telemetry." }, { "id": "LT-APPLICATIONS-01", "section": "applications", "level": "MUST", "title": "Compose editorial pages", "requirement": "Lead with a clear heading, explanatory text, and relevant evidence. Retain the near-black, square, flat Lattice language. Use Lattice blue only for a small action, annotation, or selected detail. Avoid oversized marketing heroes, decorative color fields, repeated card grids, and unsupported superlatives." }, { "id": "LT-APPLICATIONS-02", "section": "applications", "level": "MUST", "title": "Compose operator tools", "requirement": "Prioritize the capture/viewer canvas, session state, then task controls and diagnostics. Keep the state and stop/pause controls in stable positions. Separate recording, preview, and connection status. A preview pause must not silently stop recording. Show units, freshness, and the scope of each action." }, { "id": "LT-APPLICATIONS-03", "section": "applications", "level": "MUST", "title": "Compose decks", "requirement": "Use a 1920×1080 frame with 96px safe margins and a 12-column grid. Titles are 72–96px, body 32–40px, annotations at least 24px. These are frame pixels, not web UI sizes. Prefer near-black slides with off-white text and a small blue annotation or rule. A light slide may serve a document or comparison; do not use saturated blue slide backgrounds." }, { "id": "LT-APPLICATIONS-04", "section": "applications", "level": "MUST", "title": "Compose documents", "requirement": "Use A4 or Letter with 18–22mm margins, white print background, dark ink, 10.5–12pt Plex Sans body, 1.45–1.6 line height, and at least 9pt annotations. Include document title, date/version, source notes for claims, and page numbers. Links and charts must remain understandable in grayscale." }, { "id": "LT-APPLICATIONS-05", "section": "applications", "level": "MUST", "title": "Keep spatial use distinct", "requirement": "This release governs web, operator displays, decks, and documents. Headset interaction, angular sizing, depth, comfort, and spatial input require a separate validated platform specification. Preserve the identity there, but do not transplant web pixel sizes into 3D space." }, { "id": "LT-VOICE-01", "section": "voice", "level": "MUST", "title": "Be exact and human", "requirement": "Use plain, direct sentences with an actionable next step when needed. Use sentence case and familiar verbs. Explain a technical term on first use when the audience may not know it. Avoid hype, blame, unexplained error codes, and cheerful language during failure." }, { "id": "LT-VOICE-02", "section": "voice", "level": "MUST", "title": "Use the right names", "requirement": "Lattice is the company/platform; Lattice Studio is the operator console and web viewer. Lattice Studios is only the inherited full legal/entity lockup. Use lowercase 'volumetric capture' and 'surfel'. Do not rename the brand 'Lattice AI' or call volumetric capture a hologram." }, { "id": "LT-VOICE-03", "section": "voice", "level": "MUST", "title": "Make claims traceable", "requirement": "Attach date, method, workload, hardware/network context, and source to performance claims. If evidence is absent, label the value illustrative or omit it. Prefer a measured statement over an unqualified promise. Use error structure: what happened, effect on work, next action." }, { "id": "LT-HANDOFF-01", "section": "handoff", "level": "MUST", "title": "Resolve conflicts in order", "requirement": "Follow task-specific user instructions and applicable accessibility requirements first; then this release's MUST rules, semantic tokens and component contracts, SHOULD guidance, and examples. Examples do not override rules. Report a material conflict; do not silently create a third style. Product-specific exceptions must be documented with scope and rationale." }, { "id": "LT-HANDOFF-02", "section": "handoff", "level": "MUST", "title": "Build from the contract", "requirement": "Before generating an interface, read this release's context, rules, tokens, and relevant recipe. State the audience, register, theme, density, primary task, states, and evidence status. Reuse the supplied vocabulary and tokens. If a capability is unknown, label it an assumption instead of inventing product facts." }, { "id": "LT-HANDOFF-03", "section": "handoff", "level": "MUST", "title": "Review the complete experience", "requirement": "Verify relevant rules, both themes, keyboard interaction, 320px reflow, text resizing, reduced motion, contrast, empty/loading/error/success states, and truth of any claims. Record actual checks and limitations; never claim full accessibility or production readiness from a screenshot." }, { "id": "LT-HANDOFF-04", "section": "handoff", "level": "MUST", "title": "Keep one versioned source", "requirement": "This package's system.py defines tokens and normative rules; content.html defines explanatory guidance and visual recipes; system.css and interactions.js implement examples. Rebuild with build.py after changes. Generated HTML, JSON, CSS tokens, and AI Markdown share one version. Do not independently edit an export and let it drift." }, { "id": "LT-COLOR-05", "section": "color", "level": "MUST", "title": "Preserve the original restraint", "requirement": "Refine the original IBM-like Lattice identity: near-black surfaces, square geometry, IBM Plex, flat layers, and occasional blue/navy accents. Preserve the original logo. Do not interpret accessibility or usability guidance as permission to adopt another platform’s visual identity." }, { "id": "LT-HANDOFF-05", "section": "handoff", "level": "MUST", "title": "Start from the supplied files", "requirement": "For an AI task, attach lattice-ai-guide.md and lattice-system.json, then add the actual audience, task, content, and dimensions. For implementation, load lattice-fonts.css, lattice-tokens.css, and lattice-components.css in that order and start from lattice-starter.html. For visual work, read the color, type, and layout rules, then select the relevant application recipe. The guide defines the system; it does not automatically restyle an existing product." }, { "id": "LT-LAYOUT-06", "section": "layout", "level": "MUST", "title": "Scroll without permanent chrome", "requirement": "Hide visible scrollbar tracks in this guide while retaining wheel, touch, trackpad, and keyboard scrolling. Keep overflowing two-dimensional tables in labeled, focusable regions. Do not set overflow:hidden on the page or prevent scrolling just to hide a scrollbar." }, { "id": "LT-COMPONENTS-06", "section": "components", "level": "MUST", "title": "Use platform-neutral labels", "requirement": "Use text labels and the supplied simple icons. Do not display Apple Command/Option key glyphs or another operating system’s visual conventions. Search remains reachable by its labeled control. Keep dropdown chevrons vertically centered and consistently inset from the right edge." } ], "guidance": [ { "id": "overview", "text": "00 / Lattice design system2.2 / September 2026\n\n# A single system,\nfrom the sensor to the slide.\n\nLattice builds real-time volumetric capture and streaming. This guide gives the operator console, web viewer, decks, and documents one consistent language: mostly black, IBM Plex, square geometry, and restrained blue/navy accents.\n\nDesign principlesUsing this guide\n\n01\n\n### Engineered\n\nShared geometry, aligned data,\nand the original Lattice mark.\n\n02\n\n### Restrained\n\nNear-black surfaces. Flat layers.\nBlue only where it has a job.\n\n03\n\n### Readable\n\nClear hierarchy, useful feedback,\nand explicit implementation rules." }, { "id": "start", "text": "↗\n\nPractical use\n\n## Using this guide\n\nRead the visual rules here. For an AI task, attach the guide and JSON contract. For implementation, start from the supplied example and tokens.\n\n01 / Design visually\n\n### Find the right example.\n\nRead the color, typography, and layout rules. Then use the Studio, deck, or document composition as your starting point.\n\nSee application examples ↗\n\n02 / Work with an AI\n\n### Attach the context.\n\nAttach lattice-ai-guide.md and lattice-system.json to your task. Add your content and the screen or artifact you want built.\n\nGet the AI files & prompt ↓\n\n03 / Build a page\n\n### Open a working starter.\n\nThe starter includes the fonts, tokens, logo, and a responsive session form. Open it in a browser, then edit its HTML and CSS.\n\n [Example control: Download starter HTML ↓] \n\nUsing the separate CSS files in an existing project\n\nFrom the kit’s dist folder, copy the three CSS files into your project. Load them in this order, set the root theme to dark, and replace existing component values with the matching --lt-* roles.\n\n \n\n\n\n\n\n\nCSS supplies appearance. Implement your product’s actions and state using the component contracts. The standalone starter demonstrates a working local form." }, { "id": "principles", "text": "01\n\nPoint of view\n\n## An instrument with a human side.\n\nLattice builds real-time volumetric capture and streaming. Its design language must help someone operate a capture, understand a pipeline, or tell its story—with the same recognizable character.\n\nThe creative direction\n\n### Engineered.\nRestrained.\nReadable.\n\nKeep the original IBM-like foundation: typography, alignment, square corners, and a predominantly dark interface. Improve hierarchy, feedback, and recovery within that language. Use color sparingly and make every component’s behavior explicit.\n\nA / Structure\n\n### Make the important thing obvious.\n\nA capture deserves the largest area. An error deserves a next step. A headline deserves evidence. Size, alignment, and proximity make that priority visible.\n\nB / Identity\n\n### Keep the original character.\n\nUse black and charcoal for screens, light paper for print, and a small navy or Lattice-blue accent when it helps. Keep the original mark and IBM Plex. Improve comfort through spacing and legibility.\n\nC / Expression\n\n### Let the subject bring the character.\n\nActual captures, measured diagrams, aligned type, and precise information give Lattice its identity. Include a visual only when it explains the subject.\n\nD / Care\n\n### Help people keep moving.\n\nShow what changed. Preserve their work. Explain the unexpected. Make it easy to try again. The quality of a system is visible in its difficult moments.\n\nWhat comes from where. This is an independent Lattice system inspired by IBM’s grid and selected Apple interaction principles. Its palette, rules, components, and expressive language are Lattice decisions. No liquid glass is used." }, { "id": "identity", "text": "02\n\nIdentity\n\n## A familiar mark. A stronger world around it.\n\nThe original Lattice mark and Plex wordmark remain the anchor. Their six-part geometry already has character; the surrounding system gives it room and purpose.\n\nPrimary horizontal lockup · near-white on black\n\nClear space on every side: ¼ of the visible mark height. The mark sits at its optical centre, offset 12% right so the hub of its three wings is on the centre line (LT-IDENTITY-05); clear space is measured from that placement.\n\nThe mark stays flat, intact, and upright, and is offset 12% right when it stands alone. Color fields may change; its construction does not." }, { "id": "color", "text": "03\n\nColor & tokens\n\n## Black does the work. Blue is the accent.\n\nGraphite, the default, is near-black with charcoal layers and neutral text. Void takes the same map almost to pitch black for OLED screens; Paper is a soft off-white, never pure white. In all three, Lattice blue marks the key action, links, and focus, and navy marks a selected surface. Keep both small. The page should read as black at a glance.\n\n [Example control: Graphite black#101113] [Example control: Void black#070708] [Example control: Navy surface#1B2A44] [Example control: Lattice blue#3560A8] [Example control: Off-white#F4F4F3] \n\nSelect a swatch to copy its value. These are fixed brand colors; components use the semantic tokens below.\n\n### Three appearances. The same relationships.\n\nGraphite · default✓ Ready\n\n### Studio session\n\nChoose a source to begin a new capture.\n\n [Example control: Choose source ↗] \n\nVoid · OLED✓ Ready\n\n### Studio session\n\nChoose a source to begin a new capture.\n\n [Example control: Choose source ↗] \n\nPaper · light✓ Ready\n\n### Studio session\n\nChoose a source to begin a new capture.\n\n [Example control: Choose source ↗] \n\nColor has a limited role. Keep large areas black or charcoal. Reserve Lattice blue for one action per task group, links, and focus, and navy for a selected surface. Status and chart colors communicate information; they are not decorative page accents.\n\nCore semantic roles · select the complete contract for every token\n | CSS token | Graphite | Void | Paper | Purpose\n | --lt-canvas | #101113 | #070708 | #ECEBE7 | Page background\n | --lt-surface | #181A1E | #0E0E10 | #F6F5F2 | Grouped content\n | --lt-subtle | #21242A | #141416 | #E1E0DB | Recessed/context area\n | --lt-raised | #292D34 | #1A1A1D | #FAF9F7 | Floating surfaces\n | --lt-text | #ECEDEF | #EDEDEF | #1A1D22 | Primary content\n | --lt-secondary | #B9BDC5 | #B6B9BF | #454B55 | Supporting copy\n | --lt-muted | #A0A6B0 | #9BA0A8 | #565D68 | Annotations\n | --lt-action | #3560A8 | #3560A8 | #27509A | Primary action fill\n | --lt-on-action | #F4F5F7 | #F4F5F7 | #FFFFFF | Text on action fill\n | --lt-accent-text | #9DBBF0 | #9DBBF0 | #27509A | Links and selected text\n | --lt-border | #30343B | #222226 | #CBCAC5 | Decorative separators\n | --lt-control-border | #6C7583 | #646870 | #6B7380 | Essential control boundaries\n\nInspect the complete theme contract\n\n{\n \"dark\": {\n \"canvas\": \"#101113\",\n \"surface\": \"#181A1E\",\n \"subtle\": \"#21242A\",\n \"raised\": \"#292D34\",\n \"text\": \"#ECEDEF\",\n \"secondary\": \"#B9BDC5\",\n \"muted\": \"#A0A6B0\",\n \"border\": \"#30343B\",\n \"control-border\": \"#6C7583\",\n \"action\": \"#3560A8\",\n \"action-hover\": \"#4570B8\",\n \"action-active\": \"#2A4D8A\",\n \"on-action\": \"#F4F5F7\",\n \"action-border\": \"#3560A8\",\n \"accent-text\": \"#9DBBF0\",\n \"selected\": \"#1B2A44\",\n \"focus\": \"#A9C4F2\",\n \"success\": \"#96B8A4\",\n \"success-bg\": \"#1D2823\",\n \"warning\": \"#D0BB92\",\n \"warning-bg\": \"#2D281F\",\n \"danger\": \"#D8A3A3\",\n \"danger-bg\": \"#302124\",\n \"info\": \"#9DBBF0\",\n \"info-bg\": \"#1B2A44\",\n \"disabled\": \"#949AA4\",\n \"disabled-bg\": \"#25282E\",\n \"shadow\": \"none\",\n \"overlay\": \"#000000B3\",\n \"data-1\": \"#9BB0CE\",\n \"data-2\": \"#9EBAC0\",\n \"data-3\": \"#B4A6C8\",\n \"data-4\": \"#C4AE96\",\n \"data-5\": \"#96B8A4\",\n \"data-6\": \"#C0A6B7\"\n },\n \"void\": {\n \"canvas\": \"#070708\",\n \"surface\": \"#0E0E10\",\n \"subtle\": \"#141416\",\n \"raised\": \"#1A1A1D\",\n \"text\": \"#EDEDEF\",\n \"secondary\": \"#B6B9BF\",\n \"muted\": \"#9BA0A8\",\n \"border\": \"#222226\",\n \"control-border\": \"#646870\",\n \"action\": \"#3560A8\",\n \"action-hover\": \"#4570B8\",\n \"action-active\": \"#2A4D8A\",\n \"on-action\": \"#F4F5F7\",\n \"action-border\": \"#3560A8\",\n \"accent-text\": \"#9DBBF0\",\n \"selected\": \"#131E33\",\n \"focus\": \"#A9C4F2\",\n \"success\": \"#96B8A4\",\n \"success-bg\": \"#111A15\",\n \"warning\": \"#D0BB92\",\n \"warning-bg\": \"#1E1A11\",\n \"danger\": \"#D8A3A3\",\n \"danger-bg\": \"#221315\",\n \"info\": \"#9DBBF0\",\n \"info-bg\": \"#131E33\",\n \"disabled\": \"#8F949D\",\n \"disabled-bg\": \"#17181B\",\n \"shadow\": \"none\",\n \"overlay\": \"#000000CC\"\n },\n \"light\": {\n \"canvas\": \"#ECEBE7\",\n \"surface\": \"#F6F5F2\",\n \"subtle\": \"#E1E0DB\",\n \"raised\": \"#FAF9F7\",\n \"text\": \"#1A1D22\",\n \"secondary\": \"#454B55\",\n \"muted\": \"#565D68\",\n \"border\": \"#CBCAC5\",\n \"control-border\": \"#6B7380\",\n \"action\": \"#27509A\",\n \"action-hover\": \"#1E4386\",\n \"action-active\": \"#173569\",\n \"on-action\": \"#FFFFFF\",\n \"action-border\": \"#27509A\",\n \"accent-text\": \"#27509A\",\n \"selected\": \"#DCE2EB\",\n \"focus\": \"#27509A\",\n \"success\": \"#3B5D4C\",\n \"success-bg\": \"#DCE6DF\",\n \"warning\": \"#6A5228\",\n \"warning-bg\": \"#EBE4D3\",\n \"danger\": \"#84474B\",\n \"danger-bg\": \"#EBDCDD\",\n \"info\": \"#27509A\",\n \"info-bg\": \"#DCE2EB\",\n \"disabled\": \"#565D68\",\n \"disabled-bg\": \"#D6D5D0\",\n \"shadow\": \"none\",\n \"overlay\": \"#00000099\",\n \"data-1\": \"#4A6285\",\n \"data-2\": \"#3F6870\",\n \"data-3\": \"#6D5D83\",\n \"data-4\": \"#826044\",\n \"data-5\": \"#3F6250\",\n \"data-6\": \"#7A5B70\"\n }\n}" }, { "id": "type", "text": "04\n\nTypography\n\n## Plex gives us a voice.\n\nHuman in its curves, technical in its details. Sans carries the story and the interface. Mono makes measurements, identifiers, and system context easy to recognize.\n\nIBM Plex Sans / 400 · 500 · 600\n\nAa Bb Gg\n\n### Complexity, brought into focus.\n\nUse a confident regular weight for display and a clear medium weight for interface headings.\n\nIBM Plex Mono / 400 · 500\n\n0123456789\n84.2 ms\n\nTabular figures. Visible units. Stable alignment. Technical language that reads at a glance.\n\nIllustrative value; not a performance claim.\n\nScreen type scale · pixel equivalents at a 16px root · implement in rem\n | Role | Size | Line height | Weight | Application\n | Display | 48–72 | 1.05 | 400 | Editorial opening; fluid, down to 40px on small screens\n | Heading 1 | 40 | 1.15 | 500 | Page title; 32px on small screens\n | Heading 2 | 28 | 1.2 | 500 | Section heading\n | Heading 3 | 20 | 1.3 | 500 | Task group\n | Body | 16 | 1.6 | 400 | Reading and explanation\n | Interface | 14 | 1.5 | 400 / 500 | Controls and navigation\n | Annotation | 12 | 1.5 | 400 / 500 | Units, captions, metadata; Mono only for technical content\n\nOptical care. Letter spacing is slightly tight for large headings (−0.035em to −0.045em) and normal for reading and controls. Mono annotations may use +0.08em tracking. Keep essential labels at 12px or larger." }, { "id": "layout", "text": "05\n\nSpace & composition\n\n## A rhythm, not an expanse.\n\nSpace should explain what belongs together. Use a compact rhythm inside a task and a larger pause between ideas. Varied composition gives the page energy without adding decoration.\n\n4\n\n8\n\n12\n\n16\n\n24\n\n32\n\n48\n\n64\n\n96\n\nEditorial register\n\n### An idea and its evidence.\n\nAsymmetry, generous display type, one expressive field, and a comfortable reading measure. Useful for the website, a deck, or a technical brief.\n\nInstrument register\n\n### A task and its controls.\n\nStable regions, persistent state, aligned readouts, and a clear action hierarchy. Useful for capture, calibration, inspection, and streaming.\n\n### A shared grid, adapted to the content.\n\nMain task / 8 columns\n\nThe content that earns most of the attention.\n\nContext / 4 columns\n\nA related explanation or inspector.\n\nBelow 640px: 4 columns, 16px gutters. 640–1023px: 8 columns, 24px gutters. From 1024px: 12 columns, 24px gutters. Nested diagrams may use tighter internal grid subdivisions." }, { "id": "material", "text": "06\n\nShape & graphic language\n\n## Square corners. Flat surfaces.\n\nRetain the original square geometry. Separate groups with alignment, a slight layer change, or a thin rule. Use borders for overlays and keep them correctly positioned. No rounded containers or drop shadows.\n\n0\n\n### Controls / 0px\n\nButtons, fields, tabs, and small interactive elements.\n\n0\n\n### Panels / 0px\n\nBounded task groups, previews, and content containers.\n\n0\n\n### Dialogs / 0px\n\nA centered decision, a thin border, and no shadow.\n\nMeasured diagrams\n\n### Graphics explain the subject.\n\nUse a short annotation and simple geometry when they explain capture or spatial data. Keep the drawing neutral and add only a small blue accent. Avoid repeated decorative frames.\n\nFIG. 01 / SPATIAL FIELDIllustrative diagram ↗" }, { "id": "components", "text": "07\n\nComponents\n\n## Care you can interact with.\n\nThese specimens are working controls. Try the fields, change a setting, or open a confirmation. Their states are part of the design—not a detail left for later.\n\n [Example control: Actions] [Example control: Fields] [Example control: Selection] \n\nInteractive specimens\n\nHIERARCHY / one primary action in this task group\n\n [Example control: Start capture ↗] [Example control: Save draft] [Example control: Reset demo] \n\nSimulated session. No device is connected.\n\n [Example control: Export capture] Available after a capture has been saved.\n\nSample capture\n\ntake_004 · simulated asset\n\n [Example control: Delete capture] \n\nSession name (required)Use 3–40 characters. Give the session a name you can recognize.\n\nPreview qualityBalancedDetailLow bandwidthChanges the simulated preview preset.\n\n [Example control: Create session] \n\nForm specimen. Values stay on this page.\n\nIMMEDIATE SETTINGS / explicit state\n\n [Example control: ] Show capture guidesOn\n\nThis specimen changes the guides in the Studio preview below.\n\nFORM OPTIONS / independently selectable\n\nInclude camera metadataInclude diagnostic log\n\n✓ Ready△ Degraded× Offline↻ Processing\n\n### Icons share the same construction.\n\nCapture\n\nLayers\n\nCalibrate\n\nStream\n\nExport\n\nContinue\n\n24px master grid · 1.5px stroke at 24px · square line caps · miter joins. Use 16, 20, 24, or 32px sizes; optically inspect each size. Keep a visible label unless the icon is universal in its context; always give an icon-only control an accessible name. This small custom set is supplied; a larger product may adopt Carbon icons consistently." }, { "id": "feedback", "text": "08\n\nStates & feedback\n\n## Every state deserves a design.\n\nThe ideal path is only part of the product. Loading, partial results, missing data, and failed connections should each explain what is happening and what someone can do next.\n\n### Connection state explorer\n\nSimulated\n\n [Example control: Empty] [Example control: Loading] [Example control: Ready] [Example control: Degraded] [Example control: Error] [Example control: Stale] \n\n### No sources connected\n\nConnect a camera to see its preview and status here.\n\n [Example control: Connect sample source] \n\n### Calibration progress\n\nA finite task with a known number of sample frames.\n\n○ Idle\n\nSimulated · 0 of 100 sample frames checked.\n\n [Example control: Run calibration] [Example control: Cancel]" }, { "id": "data", "text": "09\n\nData & visualization\n\n## Make the numbers tell the truth.\n\nStable readouts, explicit units, comparable scales, and plain status. Use color when it carries information. Keep the evidence attached to the claim.\n\nGlass-to-glass latency\n\n84.2 ms\n\nSimulated · median of 6 samples\n\nPreview frame rate\n\n30 fps\n\nSimulated · selected preset\n\nSources available\n\n3 / 4\n\n△ One source offline\n\n### Latency over 50 seconds\n\nSimulated · six samples at 10-second intervals · 0–120ms scale\n\n○ Median 84.2ms\n\nSampled latency ranges from 78.0 to 94.0ms. The vertical axis starts at zero. These values demonstrate presentation, not product performance.\n\nRead chart data\n\nSimulated latency values\n | Time (seconds) | Latency (ms)\n | 0 | 78.0\n | 10 | 82.0\n | 20 | 84.0\n | 30 | 94.0\n | 40 | 84.4\n | 50 | 89.0\n\n### Source table\n\n Compact rows\n\nSimulated source health · snapshot at 14:32:10\n | [Example control: Source ↑] | Status | Frame rate | Latency | Last sample\n | Camera 01 / front | ✓ Ready | 30 fps | 82.0 ms | 14:32:10\n | Camera 02 / left | ✓ Ready | 30 fps | 84.4 ms | 14:32:10\n | Camera 03 / right | △ Degraded | 24 fps | 94.0 ms | 14:32:09\n | Camera 04 / rear | × Offline | — | — | 14:30:02\n\nClick Source to reverse the sort order. Compact mode changes row spacing; touch targets retain their comfortable size.\n\n### A consistent palette for categorical data.\n\nAssign series in this order. Theme values change together; the identity of a series stays fixed. Direct labels and distinct markers carry the meaning alongside color.\n\nSeries 1--lt-data-1Light #4A6285\nDark #9BB0CE\n\nSeries 2--lt-data-2Light #3F6870\nDark #9EBAC0\n\nSeries 3--lt-data-3Light #6D5D83\nDark #B4A6C8\n\nSeries 4--lt-data-4Light #826044\nDark #C4AE96\n\nSeries 5--lt-data-5Light #3F6250\nDark #96B8A4\n\nSeries 6--lt-data-6Light #7A5B70\nDark #C0A6B7" }, { "id": "motion", "text": "10\n\nMotion\n\n## A little movement. A clear reason.\n\nMotion connects an action to its result. A panel arrives from its point of origin. A state changes without a jolt. Nothing moves just to keep the screen busy.\n\nPosition transition / 200ms\n\nPosition: start\n\n [Example control: Move to end →] \n\n120 ms\n\n### Respond\n\nHover, pressed, and local feedback.\n\n200 ms\n\n### Connect\n\nPanel movement and state transitions.\n\n360 ms\n\n### Introduce\n\nMaximum for a one-time editorial reveal." }, { "id": "accessibility", "text": "11\n\nAccessibility\n\n## Clarity is something we verify.\n\nReadable colors, reachable controls, flexible text, and keyboard access belong in the foundation. A clean-looking screen still needs to be tested in the ways people actually use it.\n\nText contrast\n\n4.5:1\n\nMinimum for normal text. Large text can use 3:1.\n\nTouch target\n\n44 × 44px\n\nLattice’s minimum web touch target in CSS pixels.\n\nFocus indicator\n\n2 + 3px\n\nA 2px outline with 3px offset, visible on every surface.\n\nCalculated from this release’s sRGB token values · not a complete accessibility audit\n | Pair | Graphite | Void | Paper | Minimum\n | Primary / canvas | 16.13:1 | 17.22:1 | 14.17:1 | 4.5:1\n | Secondary / surface | 9.25:1 | 9.81:1 | 8.06:1 | 4.5:1\n | Annotation / subtle | 6.35:1 | 7.00:1 | 5.03:1 | 4.5:1\n | Action label / action | 5.68:1 | 5.68:1 | 7.78:1 | 4.5:1\n | Selected text / selected | 7.39:1 | 8.56:1 | 5.97:1 | 4.5:1\n | Success text / success fill | 7.02:1 | 8.19:1 | 5.75:1 | 4.5:1\n | Warning text / warning fill | 7.81:1 | 9.25:1 | 5.81:1 | 4.5:1\n | Error text / error fill | 7.08:1 | 8.27:1 | 5.30:1 | 4.5:1\n | Control boundary / surface | 3.74:1 | 3.45:1 | 4.39:1 | 3:1\n | Action label / hover | 4.52:1 | 4.52:1 | 9.54:1 | 4.5:1\n | Action label / pressed | 7.62:1 | 7.62:1 | 12.00:1 | 4.5:1\n\nTry it here. Press Tab to reach the skip link and controls. Use the Search control to find a rule. Use arrow keys inside the component tabs. Escape closes a dialog and returns focus. The appearance selector supports your system theme; reduced motion follows your device setting." }, { "id": "applications", "text": "12\n\nSystem in use\n\n## From the capture to the conversation.\n\nOne identity can serve different levels of attention. The operator needs focus and control. The reader needs an argument and evidence. The system provides a composition for each.\n\n### Lattice Studio\n\n/ North studio\n\n○ Preview ready\n\nPERSPECTIVE / 01SIMULATED\n\n＋ Origin 0, 0, 0Illustrative spatial field\n\nPreview settings\n\nViewPerspectiveTop\n\nSourceSample field\n\nFrame rate30 fps\n\nRecordingOff\n\nThe illustration and values are simulated. Preview playback is separate from recording.\n\nPreview ready · Recording is off.\n\n [Example control: Reset view] [Example control: Play preview ▷] \n\nInstrument register · task first, persistent state, stable controls. Try changing the view or playing the three-frame illustration.\n\n### Editorial expression has more range.\n\n### Space, captured.\nContext, preserved.\n\nReal-time volumetric capture and streaming.\n\nOpening slide · one idea, shared alignment, familiar mark\n\nA connected pipeline\n\n### From a physical scene\nto a shared view.\n\nCapture → reconstruct → stream → view\n\nNarrative specimen / no benchmark claims\n\nNarrative transition · a near-black background with a small blue annotation\n\nTechnical brief\nLayout specimen\n\n### A clearer view of\nthe capture pipeline.\n\nUse the opening paragraph to explain the system, who it serves, and the problem it solves. Place the mechanism next to a diagram the reader can follow.\n\nCaptureProcessDeliver\n\nSupport each measured claim with its method, hardware, network conditions, and source. Keep the conclusion proportional to the evidence.\n\nV2.2 / 202601\n\nDocument register · Plex Sans, dark ink, useful structure\n\n### Use a recipe, then compose.\n\nWebsite. One idea, a relevant visual, and an action. Alternate content-led layouts with purposeful color fields.\n\nOperator console. Keep the scene, state, and current task visible. Diagnostics belong beside the work they explain.\n\nDeck. Make a sequence of claims. Vary background only when the story changes. Give numbers a source and context.\n\nTechnical brief. Explain the mechanism. Use readable text and diagrams. Make it work on paper and in grayscale.\n\nSpatial interfaces. This release covers web, displays, decks, and documents. Headset layout and input need their own validated platform specification." }, { "id": "voice", "text": "13\n\nVoice & content\n\n## Precise enough to trust. Human enough to help.\n\nWrite for someone trying to understand or accomplish something. Give them the mechanism when it matters, and a useful next step when something goes wrong.\n\nToo vague\n\n“Connection error.\nPlease try again.”\n\nThe person cannot tell what was affected or how to recover.\n\nSpecific and useful\n\n“Camera 04 disconnected.\nYour saved captures are safe.”\n\nCheck the cable, then reconnect the camera. The other three sources are still available.\n\nNames and meanings inherited from the original system\n | Name | Use\n | Lattice | The company and platform.\n | Lattice Studio | The operator console and web viewer. Singular.\n | Lattice Studios | Full legal/entity lockup only.\n | volumetric capture | The category. Lowercase.\n | surfel | A surface element; explain on first use for general audiences.\n | glass-to-glass latency | Elapsed time from camera input to displayed output. Include method and units." }, { "id": "handoff", "text": "14\n\nBuild with Lattice\n\n## One source. Clear instructions.\n\nThe same decisions that shape this page are available as a complete Markdown guide, a structured JSON contract, and CSS tokens. Every normative rule has a stable ID and an explicit requirement.\n\nFor people and AI\n\n### Carry the context\ninto the next thing you build.\n\nThe AI guide includes brand context, all 61 rules, token values, recipes, interaction expectations, and review criteria. Attach it to a design or implementation task.\n\n [Example control: Download complete AI guide ↓] [Example control: Copy starter prompt ↗] \n\n [Example control: Machine-readable contract ↓lattice-system.json] [Example control: Theme & foundation tokens ↓lattice-tokens.css] [Example control: Original vector mark ↓lattice-mark.svg] \n\n### A useful starting prompt\n\nUse Lattice Design System 2.2.0. Read the attached lattice-ai-guide.md and lattice-system.json before designing.\n\nContext: Lattice builds real-time volumetric capture and streaming. Preserve the original Lattice mark, IBM Plex Sans, and IBM Plex Mono.\n\nFirst state: audience, primary task, editorial or instrument register, theme, density, required states, and which content is evidence versus illustrative.\n\nPreserve the original minimal IBM-like language. Default to near-black (#101113) and charcoal, with small blue/navy accents. Use a full-width, left-aligned shell, IBM Plex, square corners (0px everywhere), thin borders, and no drop shadows. Keep large areas neutral. Hide scrollbar tracks while preserving scrolling. Use platform-neutral labels and correctly aligned native controls.\n\nFollow the relevant LT-* rules. Include responsive behavior, accessible names, keyboard/focus behavior, and recovery from failure. Do not invent capabilities or performance claims.\n\nDeliver the interface and a brief rule-based review listing checks actually performed, assumptions, and unresolved exceptions.\n\nTask: [describe the interface or artifact to create]\n\n### Resolve a design decision in this order\n\n | Priority | Authority | What it means\n | 01 | Task constraints & applicable requirements | Follow the user’s actual brief and accessibility obligations.\n | 02 | Normative rules | MUST rules define required behavior and appearance.\n | 03 | Tokens & component contracts | Use the supplied values and interaction patterns.\n | 04 | Guidance & examples | Adapt the composition to the task; examples do not overrule requirements.\n\n### Release review\n\nUse this checklist on the interface you build. These boxes are a working aid, not a certification of this guide.\n\n- Audience, task, and primary action are clear\n- Semantic tokens used; exceptions documented\n- Both light and dark themes reviewed\n- All controls have complete states\n- Keyboard path and focus return checked\n- 320px reflow and 200% text sizing checked\n- Final contrast pairs measured\n- Reduced motion and forced colors reviewed\n- Empty, loading, error, and recovery covered\n- Claims have sources; examples labeled\n\n0 of 10 review checks marked." }, { "id": "migration", "text": "15\n\nMoving forward\n\n## Refine the original. Keep its character.\n\nThis revision restores the original restraint and full-width workspace. Improvements to reading, behavior, and implementation guidance stay within that visual foundation.\n\n | Earlier behavior | Current standard | Migration action\n | Green- or blue-heavy page surfaces | Near-black canvas with charcoal layers | Map backgrounds, layers, text, and borders to the new semantic roles.\n | Large saturated blue fields | Small, purposeful blue/navy accents | Identify the meaning of each colored element before assigning a token.\n | Rounded components | 0px radius throughout the interface | Keep all rectangular controls, panels, tags, and overlays square.\n | Centered, capped page frame | Edge-to-edge shell and fluid content column | Group related content and give each region a reason to exist.\n | Light-weight type throughout | Regular display, medium hierarchy | Increase essential text legibility; preserve Plex Sans and Mono.\n | Promotional color fields and decorative framing | Clear headings, thin rules, and relevant diagrams | Remove large decorative areas and let the content establish hierarchy.\n | Spec-sheet voice | Precise explanation with helpful recovery | Add consequences and next steps to errors; source measurable claims.\n | Color/style specimens | Working states and explicit behavior | Implement keyboard, focus, busy, disabled, validation, and recovery states.\n | Separate CSS and JSON examples | Exports generated from shared definitions | Rebuild all artifacts from the versioned source package.\n\nKeep these anchors. The original logo geometry, IBM Plex families, technical accuracy, aligned data, and the Lattice / Lattice Studio naming remain. The old file is retained as a reference; this release replaces its visual and interaction guidance.\n\nLegacy token migration map\n\n | Legacy token | New role\n | --bg | --lt-canvas\n | --layer-01 | --lt-surface\n | --layer-02 | --lt-subtle or --lt-raised, according to hierarchy\n | --text-primary / secondary | --lt-text / --lt-secondary\n | --interactive / --text-on-color | --lt-action / --lt-on-action as a pair\n | --border-subtle / strong | --lt-border / --lt-control-border\n | --support-error / success / warning | --lt-danger / --lt-success / --lt-warning with matching background tokens\n | --radius | Choose --lt-radius-control / panel / dialog; all are 0px" }, { "id": "sources", "text": "16\n\nReferences & scope\n\n## Borrow the principles. Own the expression.\n\nThe references below informed this redesign. Their guidance is adapted to Lattice’s audience and medium. The specific palette, sizes, recipes, and rule IDs in this guide are Lattice decisions.\n\nApple · Design principles ↗\n\nClear feedback, familiar behavior, recovery, and user control. Adapted as Lattice interaction rules, not an Apple visual skin.\n\nApple · Layout ↗\n\nVisible hierarchy and adaptable composition. Lattice retains its own grid, typography, and opaque surfaces.\n\nApple · Color ↗\n\nColor differentiates important actions while preserving legibility. Lattice keeps predominantly near-black surfaces and restrained blue/navy accents across both themes.\n\nApple · Accessibility ↗\n\nMultiple ways to perceive and operate the interface; contrast, scaling, and input needs are explicit release checks.\n\nApple · Motion ↗\n\nPurposeful and optional motion. Lattice uses measured transitions and has no ambient brand animation.\n\nIBM Carbon · 2x Grid ↗\n\nAn 8px principal unit, alignment, and shared geometry. Lattice uses its own documented responsive column counts.\n\nIBM Carbon · Typography ↗\n\nIBM Plex and distinct editorial/product uses. Lattice owns its role scale and legibility constraints.\n\nSource record. Prepared 12 September 2026 from the supplied lattice-design-system (8).html and the primary references above. The original product description and nomenclature are retained as provided. All scenes and telemetry in the new examples are illustrative. This guide defines the design standard. Product scenes and telemetry remain labeled illustrations." } ], "review_checklist": [ "Audience, task, and primary action are clear", "Semantic tokens used; exceptions documented", "Both light and dark themes reviewed", "All controls have complete states", "Keyboard path and focus return checked", "320px reflow and 200% text sizing checked", "Final contrast pairs measured", "Reduced motion and forced colors reviewed", "Empty, loading, error, and recovery covered", "Claims have sources; examples labeled" ], "contrast_checks": [ { "pair": "Primary / canvas", "foreground": "text", "background": "canvas", "minimum": 4.5, "dark": 16.13, "void": 17.22, "light": 14.17 }, { "pair": "Secondary / surface", "foreground": "secondary", "background": "surface", "minimum": 4.5, "dark": 9.25, "void": 9.81, "light": 8.06 }, { "pair": "Annotation / subtle", "foreground": "muted", "background": "subtle", "minimum": 4.5, "dark": 6.35, "void": 7, "light": 5.03 }, { "pair": "Action label / action", "foreground": "on-action", "background": "action", "minimum": 4.5, "dark": 5.68, "void": 5.68, "light": 7.78 }, { "pair": "Selected text / selected", "foreground": "accent-text", "background": "selected", "minimum": 4.5, "dark": 7.39, "void": 8.56, "light": 5.97 }, { "pair": "Success text / success fill", "foreground": "success", "background": "success-bg", "minimum": 4.5, "dark": 7.02, "void": 8.19, "light": 5.75 }, { "pair": "Warning text / warning fill", "foreground": "warning", "background": "warning-bg", "minimum": 4.5, "dark": 7.81, "void": 9.25, "light": 5.81 }, { "pair": "Error text / error fill", "foreground": "danger", "background": "danger-bg", "minimum": 4.5, "dark": 7.08, "void": 8.27, "light": 5.3 }, { "pair": "Control boundary / surface", "foreground": "control-border", "background": "surface", "minimum": 3, "dark": 3.74, "void": 3.45, "light": 4.39 }, { "pair": "Action label / hover", "foreground": "on-action", "background": "action-hover", "minimum": 4.5, "dark": 4.52, "void": 4.52, "light": 9.54 }, { "pair": "Action label / pressed", "foreground": "on-action", "background": "action-active", "minimum": 4.5, "dark": 7.62, "void": 7.62, "light": 12 } ], "sources": [ { "title": "Apple · Design principles", "url": "https://developer.apple.com/design/human-interface-guidelines/design-principles", "application": "Clear feedback, familiar behavior, recovery, and user control. Adapted as Lattice interaction rules, not an Apple visual skin." }, { "title": "Apple · Layout", "url": "https://developer.apple.com/design/human-interface-guidelines/layout", "application": "Visible hierarchy and adaptable composition. Lattice retains its own grid, typography, and opaque surfaces." }, { "title": "Apple · Color", "url": "https://developer.apple.com/design/human-interface-guidelines/color", "application": "Color differentiates important actions while preserving legibility. Lattice keeps predominantly near-black surfaces and restrained blue/navy accents across both themes." }, { "title": "Apple · Accessibility", "url": "https://developer.apple.com/design/human-interface-guidelines/accessibility", "application": "Multiple ways to perceive and operate the interface; contrast, scaling, and input needs are explicit release checks." }, { "title": "Apple · Motion", "url": "https://developer.apple.com/design/human-interface-guidelines/motion", "application": "Purposeful and optional motion. Lattice uses measured transitions and has no ambient brand animation." }, { "title": "IBM Carbon · 2x Grid", "url": "https://carbondesignsystem.com/elements/2x-grid/overview/", "application": "An 8px principal unit, alignment, and shared geometry. Lattice uses its own documented responsive column counts." }, { "title": "IBM Carbon · Typography", "url": "https://carbondesignsystem.com/elements/typography/overview/", "application": "IBM Plex and distinct editorial/product uses. Lattice owns its role scale and legibility constraints." } ], "provenance": { "original_filename": "lattice-design-system (8).html", "original_sha256": "1cb7755955877b188792b2581959ad3aab65a875a019694ab66c41294895d9b7", "logo": "Original six-path SVG geometry preserved", "fonts": "IBM Plex, SIL Open Font License 1.1; license files included", "illustration": "Deterministic procedural geometry; not actual capture data" }, "source_files": { "definitions": "system.py", "explanatory_content": "content.html", "styles": "system.css", "behavior": "interactions.js", "build": "build.py" } }