Find the right example.
Read the color, typography, and layout rules. Then use the Studio, deck, or document composition as your starting point.
See application examplesA single system,
from the sensor to the slide.
Lattice 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.
01
Engineered
Shared geometry, aligned data,
and the original Lattice mark.
02
Restrained
Near-black surfaces. Flat layers.
Blue only where it has a job.
03
Readable
Clear hierarchy, useful feedback,
and explicit implementation rules.
↗
Practical use
Using this guide
Read the visual rules here. For an AI task, attach the guide and JSON contract. For implementation, start from the supplied example and tokens.
Attach the context.
Attach lattice-ai-guide.md and lattice-system.json to your task. Add your content and the screen or artifact you want built.
Open a working starter.
The starter includes the fonts, tokens, logo, and a responsive session form. Open it in a browser, then edit its HTML and CSS.
Using the separate CSS files in an existing project
From 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.
<html lang="en" data-theme="dark"> <!-- dark = Graphite (default) · void = Void · light = Paper --> <link rel="stylesheet" href="lattice-fonts.css"> <link rel="stylesheet" href="lattice-tokens.css"> <link rel="stylesheet" href="lattice-components.css"> <button class="btn btn-primary">Start capture</button>
CSS supplies appearance. Implement your product’s actions and state using the component contracts. The standalone starter demonstrates a working local form.
01
Point of view
An instrument with a human side.
Lattice 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.
The creative direction
Engineered.
Restrained.
Readable.
Keep 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.
A / Structure
Make the important thing obvious.
A capture deserves the largest area. An error deserves a next step. A headline deserves evidence. Size, alignment, and proximity make that priority visible.
B / Identity
Keep the original character.
Use 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.
C / Expression
Let the subject bring the character.
Actual captures, measured diagrams, aligned type, and precise information give Lattice its identity. Include a visual only when it explains the subject.
D / Care
Help people keep moving.
Show 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.
What 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.
LT-PRINCIPLES-01 MUST
Start with the task
Identify the audience, current task, most important content, primary action, and failure recovery before composing a screen.
LT-PRINCIPLES-02 MUST
Make structure visible
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.
LT-PRINCIPLES-03 MUST
Keep people in control
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.
LT-PRINCIPLES-04 MUST
Use the two registers
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.
02
Identity
A familiar mark. A stronger world around it.
The original Lattice mark and Plex wordmark remain the anchor. Their six-part geometry already has character; the surrounding system gives it room and purpose.
The mark stays flat, intact, and upright, and is offset 12% right when it stands alone. Color fields may change; its construction does not.
LT-IDENTITY-01 MUST
Preserve the master
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.
LT-IDENTITY-02 MUST
Give the mark room
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.
LT-IDENTITY-03 MUST
Use approved lockups
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.
LT-IDENTITY-04 MUST
Color the mark deliberately
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.
LT-IDENTITY-05 MUST
Centre the mark optically
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.
03
Color & tokens
Black does the work. Blue is the accent.
Graphite, 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.
Select a swatch to copy its value. These are fixed brand colors; components use the semantic tokens below.
Three appearances. The same relationships.
Graphite · default✓ Ready
Studio session
Choose a source to begin a new capture.
Void · OLED✓ Ready
Studio session
Choose a source to begin a new capture.
Paper · light✓ Ready
Studio session
Choose a source to begin a new capture.
Color 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.
| CSS token | Graphite | Void | Paper | Purpose |
|---|---|---|---|---|
--lt-canvas | #101113 | #070708 | #ECEBE7 | Page background |
--lt-surface | #181A1E | #0E0E10 | #F6F5F2 | Grouped content |
--lt-subtle | #21242A | #141416 | #E1E0DB | Recessed/context area |
--lt-raised | #292D34 | #1A1A1D | #FAF9F7 | Floating surfaces |
--lt-text | #ECEDEF | #EDEDEF | #1A1D22 | Primary content |
--lt-secondary | #B9BDC5 | #B6B9BF | #454B55 | Supporting copy |
--lt-muted | #A0A6B0 | #9BA0A8 | #565D68 | Annotations |
--lt-action | #3560A8 | #3560A8 | #27509A | Primary action fill |
--lt-on-action | #F4F5F7 | #F4F5F7 | #FFFFFF | Text on action fill |
--lt-accent-text | #9DBBF0 | #9DBBF0 | #27509A | Links and selected text |
--lt-border | #30343B | #222226 | #CBCAC5 | Decorative separators |
--lt-control-border | #6C7583 | #646870 | #6B7380 | Essential control boundaries |
Inspect the complete theme contract
{
"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"
}
}LT-COLOR-01 MUST
Use roles in code
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.
LT-COLOR-02 MUST
Keep color subordinate
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.
LT-COLOR-03 MUST
Give every accent a purpose
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.
LT-COLOR-04 MUST
Default to Graphite; offer Void and Paper
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.
LT-COLOR-05 MUST
Preserve the original restraint
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.
04
Typography
Plex gives us a voice.
Human in its curves, technical in its details. Sans carries the story and the interface. Mono makes measurements, identifiers, and system context easy to recognize.
IBM Plex Sans / 400 · 500 · 600
Complexity, brought into focus.
Use a confident regular weight for display and a clear medium weight for interface headings.
IBM Plex Mono / 400 · 500
0123456789
84.2 ms
84.2 ms
Tabular figures. Visible units. Stable alignment. Technical language that reads at a glance.
Illustrative value; not a performance claim.
| Role | Size | Line height | Weight | Application |
|---|---|---|---|---|
| Display | 48–72 | 1.05 | 400 | Editorial opening; fluid, down to 40px on small screens |
| Heading 1 | 40 | 1.15 | 500 | Page title; 32px on small screens |
| Heading 2 | 28 | 1.2 | 500 | Section heading |
| Heading 3 | 20 | 1.3 | 500 | Task group |
| Body | 16 | 1.6 | 400 | Reading and explanation |
| Interface | 14 | 1.5 | 400 / 500 | Controls and navigation |
| Annotation | 12 | 1.5 | 400 / 500 | Units, captions, metadata; Mono only for technical content |
Optical 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.
LT-TYPE-01 MUST
Two families, one hierarchy
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.
LT-TYPE-02 MUST
Make reading comfortable
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.
LT-TYPE-03 MUST
Use weight as information
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.
LT-TYPE-04 MUST
Format measurement carefully
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.
05
Space & composition
A rhythm, not an expanse.
Space 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.
4
8
12
16
24
32
48
64
96
Editorial register
An idea and its evidence.
Asymmetry, generous display type, one expressive field, and a comfortable reading measure. Useful for the website, a deck, or a technical brief.
Instrument register
A task and its controls.
Stable regions, persistent state, aligned readouts, and a clear action hierarchy. Useful for capture, calibration, inspection, and streaming.
A shared grid, adapted to the content.
Main task / 8 columns
The content that earns most of the attention.
Context / 4 columns
A related explanation or inspector.
Below 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.
LT-LAYOUT-01 MUST
Space communicates relationships
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.
LT-LAYOUT-02 MUST
Use the available screen
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.
LT-LAYOUT-03 MUST
Keep the guide compact
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.
LT-LAYOUT-04 MUST
Density is a preference
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.
LT-LAYOUT-05 MUST
Adapt without losing work
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.
LT-LAYOUT-06 MUST
Scroll without permanent chrome
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.
06
Shape & graphic language
Square corners. Flat surfaces.
Retain 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.
0
Controls / 0px
Buttons, fields, tabs, and small interactive elements.
0
Panels / 0px
Bounded task groups, previews, and content containers.
0
Dialogs / 0px
A centered decision, a thin border, and no shadow.
Measured diagrams
Graphics explain the subject.
Use 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.
FIG. 01 / SPATIAL FIELDIllustrative diagram ↗
LT-MATERIAL-01 MUST
Use square corners
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.
LT-MATERIAL-02 MUST
Keep layers flat
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.
LT-MATERIAL-03 MUST
Keep graphics functional
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.
07
Components
Care you can interact with.
These 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.
Interactive specimens
HIERARCHY / one primary action in this task group
Simulated session. No device is connected.
Available after a capture has been saved.
Sample capture
take_004 · simulated asset
IMMEDIATE SETTINGS / explicit state
Show capture guidesOn
This specimen changes the guides in the Studio preview below.
FORM OPTIONS / independently selectable
✓ Ready△ Degraded× Offline↻ Processing
Icons share the same construction.
Capture
Layers
Calibrate
Stream
Export
Continue
24px 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.
LT-COMPONENTS-01 MUST
Give actions a restrained hierarchy
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.
LT-COMPONENTS-02 MUST
Define every interaction state
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.
LT-COMPONENTS-03 MUST
Keep fields self-explanatory
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.
LT-COMPONENTS-04 MUST
Use native controls first
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.
LT-COMPONENTS-05 MUST
Dialogs are interruptions
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.
LT-COMPONENTS-06 MUST
Use platform-neutral labels
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.
08
States & feedback
Every state deserves a design.
The 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.
Connection state explorer
SimulatedNo sources connected
Connect a camera to see its preview and status here.
Calibration progress
A finite task with a known number of sample frames.
Simulated · 0 of 100 sample frames checked.
LT-FEEDBACK-01 MUST
Show state where it matters
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.
LT-FEEDBACK-02 MUST
Report real progress
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.
LT-FEEDBACK-03 MUST
Make recovery local
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.
LT-FEEDBACK-04 MUST
Be honest about live data
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.
09
Data & visualization
Make the numbers tell the truth.
Stable readouts, explicit units, comparable scales, and plain status. Use color when it carries information. Keep the evidence attached to the claim.
Glass-to-glass latency
84.2 ms
Simulated · median of 6 samplesPreview frame rate
30 fps
Simulated · selected presetSources available
3 / 4
△ One source offlineLatency over 50 seconds
Simulated · six samples at 10-second intervals · 0–120ms scale
Read chart data
| Time (seconds) | Latency (ms) |
|---|---|
| 0 | 78.0 |
| 10 | 82.0 |
| 20 | 84.0 |
| 30 | 94.0 |
| 40 | 84.4 |
| 50 | 89.0 |
Source table
| Status | Frame rate | Latency | Last sample | |
|---|---|---|---|---|
| Camera 01 / front | ✓ Ready | 30 fps | 82.0 ms | 14:32:10 |
| Camera 02 / left | ✓ Ready | 30 fps | 84.4 ms | 14:32:10 |
| Camera 03 / right | △ Degraded | 24 fps | 94.0 ms | 14:32:09 |
| Camera 04 / rear | × Offline | — | — | 14:30:02 |
Click Source to reverse the sort order. Compact mode changes row spacing; touch targets retain their comfortable size.
A consistent palette for categorical data.
Assign 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.
Series 1
Dark #9BB0CE
--lt-data-1Light #4A6285Dark #9BB0CE
Series 2
Dark #9EBAC0
--lt-data-2Light #3F6870Dark #9EBAC0
Series 3
Dark #B4A6C8
--lt-data-3Light #6D5D83Dark #B4A6C8
Series 4
Dark #C4AE96
--lt-data-4Light #826044Dark #C4AE96
Series 5
Dark #96B8A4
--lt-data-5Light #3F6250Dark #96B8A4
Series 6
Dark #C0A6B7
--lt-data-6Light #7A5B70Dark #C0A6B7
LT-DATA-01 MUST
Make numbers comparable
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.
LT-DATA-02 MUST
Label the plot
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.
LT-DATA-03 MUST
Use a stable series order
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.
LT-DATA-04 MUST
Distinguish a scene from evidence
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.
10
Motion
A little movement. A clear reason.
Motion 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.
Position transition / 200ms
Position: start
120 ms
Respond
Hover, pressed, and local feedback.
200 ms
Connect
Panel movement and state transitions.
360 ms
Introduce
Maximum for a one-time editorial reveal.
LT-MOTION-01 MUST
Motion explains a change
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.
LT-MOTION-02 MUST
Avoid ambient activity
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.
LT-MOTION-03 MUST
Respect reduced motion
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.
11
Accessibility
Clarity is something we verify.
Readable 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.
Text contrast
4.5:1
Minimum for normal text. Large text can use 3:1.
Touch target
44 × 44px
Lattice’s minimum web touch target in CSS pixels.
Focus indicator
2 + 3px
A 2px outline with 3px offset, visible on every surface.
| Pair | Graphite | Void | Paper | Minimum |
|---|---|---|---|---|
| Primary / canvas | 16.13:1 | 17.22:1 | 14.17:1 | 4.5:1 |
| Secondary / surface | 9.25:1 | 9.81:1 | 8.06:1 | 4.5:1 |
| Annotation / subtle | 6.35:1 | 7.00:1 | 5.03:1 | 4.5:1 |
| Action label / action | 5.68:1 | 5.68:1 | 7.78:1 | 4.5:1 |
| Selected text / selected | 7.39:1 | 8.56:1 | 5.97:1 | 4.5:1 |
| Success text / success fill | 7.02:1 | 8.19:1 | 5.75:1 | 4.5:1 |
| Warning text / warning fill | 7.81:1 | 9.25:1 | 5.81:1 | 4.5:1 |
| Error text / error fill | 7.08:1 | 8.27:1 | 5.30:1 | 4.5:1 |
| Control boundary / surface | 3.74:1 | 3.45:1 | 4.39:1 | 3:1 |
| Action label / hover | 4.52:1 | 4.52:1 | 9.54:1 | 4.5:1 |
| Action label / pressed | 7.62:1 | 7.62:1 | 12.00:1 | 4.5:1 |
Try 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.
LT-ACCESSIBILITY-01 MUST
Contrast is a release gate
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.
LT-ACCESSIBILITY-02 MUST
Keyboard is a complete path
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.
LT-ACCESSIBILITY-03 MUST
Design for zoom and touch
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.
LT-ACCESSIBILITY-04 MUST
Support different perceptions
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.
12
System in use
From the capture to the conversation.
One 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.
Lattice Studio
/ North studioPERSPECTIVE / 01SIMULATED
＋ Origin 0, 0, 0Illustrative spatial field
Instrument register · task first, persistent state, stable controls. Try changing the view or playing the three-frame illustration.
Editorial expression has more range.
Technical brief
Layout specimen
Layout specimen
A clearer view of
the capture pipeline.
Use 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.
Support each measured claim with its method, hardware, network conditions, and source. Keep the conclusion proportional to the evidence.
Use a recipe, then compose.
Website. One idea, a relevant visual, and an action. Alternate content-led layouts with purposeful color fields.
Operator console. Keep the scene, state, and current task visible. Diagnostics belong beside the work they explain.
Deck. Make a sequence of claims. Vary background only when the story changes. Give numbers a source and context.
Technical brief. Explain the mechanism. Use readable text and diagrams. Make it work on paper and in grayscale.
Spatial interfaces. This release covers web, displays, decks, and documents. Headset layout and input need their own validated platform specification.
LT-APPLICATIONS-01 MUST
Compose editorial pages
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.
LT-APPLICATIONS-02 MUST
Compose operator tools
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.
LT-APPLICATIONS-03 MUST
Compose decks
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.
LT-APPLICATIONS-04 MUST
Compose documents
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.
LT-APPLICATIONS-05 MUST
Keep spatial use distinct
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.
13
Voice & content
Precise enough to trust. Human enough to help.
Write for someone trying to understand or accomplish something. Give them the mechanism when it matters, and a useful next step when something goes wrong.
Too vague
“Connection error.
Please try again.”
The person cannot tell what was affected or how to recover.
Specific and useful
“Camera 04 disconnected.
Your saved captures are safe.”
Check the cable, then reconnect the camera. The other three sources are still available.
| Name | Use |
|---|---|
| Lattice | The company and platform. |
| Lattice Studio | The operator console and web viewer. Singular. |
| Lattice Studios | Full legal/entity lockup only. |
| volumetric capture | The category. Lowercase. |
| surfel | A surface element; explain on first use for general audiences. |
| glass-to-glass latency | Elapsed time from camera input to displayed output. Include method and units. |
LT-VOICE-01 MUST
Be exact and human
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.
LT-VOICE-02 MUST
Use the right names
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.
LT-VOICE-03 MUST
Make claims traceable
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.
14
Build with Lattice
One source. Clear instructions.
The 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.
A useful starting prompt
Use Lattice Design System 2.2.0. Read the attached lattice-ai-guide.md and lattice-system.json before designing. Context: Lattice builds real-time volumetric capture and streaming. Preserve the original Lattice mark, IBM Plex Sans, and IBM Plex Mono. First state: audience, primary task, editorial or instrument register, theme, density, required states, and which content is evidence versus illustrative. Preserve 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. Follow the relevant LT-* rules. Include responsive behavior, accessible names, keyboard/focus behavior, and recovery from failure. Do not invent capabilities or performance claims. Deliver the interface and a brief rule-based review listing checks actually performed, assumptions, and unresolved exceptions. Task: [describe the interface or artifact to create]
Resolve a design decision in this order
| Priority | Authority | What it means |
|---|---|---|
| 01 | Task constraints & applicable requirements | Follow the user’s actual brief and accessibility obligations. |
| 02 | Normative rules | MUST rules define required behavior and appearance. |
| 03 | Tokens & component contracts | Use the supplied values and interaction patterns. |
| 04 | Guidance & examples | Adapt the composition to the task; examples do not overrule requirements. |
Release review
Use this checklist on the interface you build. These boxes are a working aid, not a certification of this guide.
0 of 10 review checks marked.
LT-HANDOFF-01 MUST
Resolve conflicts in order
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.
LT-HANDOFF-02 MUST
Build from the contract
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.
LT-HANDOFF-03 MUST
Review the complete experience
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.
LT-HANDOFF-04 MUST
Keep one versioned source
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.
LT-HANDOFF-05 MUST
Start from the supplied files
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.
15
Moving forward
Refine the original. Keep its character.
This revision restores the original restraint and full-width workspace. Improvements to reading, behavior, and implementation guidance stay within that visual foundation.
| Earlier behavior | Current standard | Migration action |
|---|---|---|
| Green- or blue-heavy page surfaces | Near-black canvas with charcoal layers | Map backgrounds, layers, text, and borders to the new semantic roles. |
| Large saturated blue fields | Small, purposeful blue/navy accents | Identify the meaning of each colored element before assigning a token. |
| Rounded components | 0px radius throughout the interface | Keep all rectangular controls, panels, tags, and overlays square. |
| Centered, capped page frame | Edge-to-edge shell and fluid content column | Group related content and give each region a reason to exist. |
| Light-weight type throughout | Regular display, medium hierarchy | Increase essential text legibility; preserve Plex Sans and Mono. |
| Promotional color fields and decorative framing | Clear headings, thin rules, and relevant diagrams | Remove large decorative areas and let the content establish hierarchy. |
| Spec-sheet voice | Precise explanation with helpful recovery | Add consequences and next steps to errors; source measurable claims. |
| Color/style specimens | Working states and explicit behavior | Implement keyboard, focus, busy, disabled, validation, and recovery states. |
| Separate CSS and JSON examples | Exports generated from shared definitions | Rebuild all artifacts from the versioned source package. |
Keep 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.
Legacy token migration map
| Legacy token | New role |
|---|---|
--bg | --lt-canvas |
--layer-01 | --lt-surface |
--layer-02 | --lt-subtle or --lt-raised, according to hierarchy |
--text-primary / secondary | --lt-text / --lt-secondary |
--interactive / --text-on-color | --lt-action / --lt-on-action as a pair |
--border-subtle / strong | --lt-border / --lt-control-border |
--support-error / success / warning | --lt-danger / --lt-success / --lt-warning with matching background tokens |
--radius | Choose --lt-radius-control / panel / dialog; all are 0px |
16
References & scope
Borrow the principles. Own the expression.
The 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.
Clear feedback, familiar behavior, recovery, and user control. Adapted as Lattice interaction rules, not an Apple visual skin.
Visible hierarchy and adaptable composition. Lattice retains its own grid, typography, and opaque surfaces.
Color differentiates important actions while preserving legibility. Lattice keeps predominantly near-black surfaces and restrained blue/navy accents across both themes.
Multiple ways to perceive and operate the interface; contrast, scaling, and input needs are explicit release checks.
Purposeful and optional motion. Lattice uses measured transitions and has no ambient brand animation.
An 8px principal unit, alignment, and shared geometry. Lattice uses its own documented responsive column counts.
IBM Plex and distinct editorial/product uses. Lattice owns its role scale and legibility constraints.
Source 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.