Layouts

approved

A layout is the overall shape of a player instance. There are exactly two: landscape and portrait. The hosting page chooses the layout explicitly in configuration; the player never guesses from media dimensions or viewport.

What a layout is

• A layout defines the arrangement and sizing model of the player surface and how core controls and capability surfaces are presented.
• A layout is not a feature set. The capability set is layout-independent; what differs is presentation.
• A layout is fixed for the lifetime of a player instance: a configuration update cannot change it. Modules that stream configurations into an instance (the shorts feed) enforce a single layout at their own boundary as well.

Sizing and framing

Shared by both layouts; values extracted from the LT Player v4 design file.

• Fluid, fixed-ratio surface. The player fills the host element's width and derives its own height from the layout's aspect ratio: 16:9 in landscape, 9:16 in portrait. The host controls width only; the player owns its height. Video inside the media area letterboxes with object-fit: contain on a black ground.
• Container-relative units. Each layout shell is a named CSS size container (container: ltp-player / inline-size); every fluid measurement below uses container-query units (cqi), so each instance responds to its own width, never the viewport.
• Proportional scaling between grades. Every measurement that varies across the donor's size grades interpolates continuously with clamp(min, base + Ncqi, max): the smallest grade's value is the lower bound, the largest grade's value is the upper bound, and the cqi coefficient is derived so the intermediate grades fall on the interpolation line (the frame-padding entry below shows the pattern). A measurement the grades keep constant stays fixed, expressed in rem unless it is hairline or fixed panel geometry. Player sizing never uses discrete breakpoint jumps and never uses viewport media queries.
• Landscape frame padding. The inset of every landscape control layer from the player edges is the playground controls inset, clamp(0.625rem, -0.0543rem + 2.8986cqi, 1.25rem). Portrait uses its own edge inset documented below.
• Corner radius. The player root clips to a 0 0 0 1.875rem radius (bottom-left corner only). In fullscreen the radius is 0.
• Control insets. Control layers use the layout frame padding consistently, including in fullscreen.
• Fractional geometry. Percentage-derived timeline fill, buffer-range, thumb, and chapter-segment edges that can leave a visible seam use round(nearest, ..., 1px). Fluid type and spacing are not rounded.
• Landscape readability scrims. Two gradients from Surface black (#27282a) to transparent back the control layers: a bottom scrim 180px tall and a top scrim 115px tall, each capped at one third of the player height. Portrait uses its own shared top-and-bottom scrim formula documented below. Scrims show and hide together with the control layers they back (visibility rules in the core document).

Landscape

Horizontal media at 16:9. The timeline is the spatial anchor of the control surface. Typical use: publication pages, embeds, talks.

Regions

Layered bottom-to-top: media, scrims, the media overlay stack, then the control layers.

Region	Placement
Top row	Full width at the top, inset by the frame padding, one fluid control tall
Media overlay stack	The media area between the top row and the bottom control block
Captions region	Centered above the timeline using the same gap as the controls-to-timeline spacing
Information region	Above the timeline, inset horizontally by frame padding + 8px
Timeline	Full width minus frame padding + 8px per side, 6px baseline height, fluidly above the bar
Control row	Full width at the bottom, inset by the frame padding, one fluid control tall
Menu anchor	Directly above the control row, spanning its width; menus open upward from triggers

When the landscape controls auto-hide, captions transition down to the control-row bottom offset plus one control gap. They return above the controls when the control chrome becomes visible again. The configured logo remains visible while the rest of the control chrome fades.

Core control placement

Standard controls use clamp(1.875rem, 0.4545rem + 6.0606cqi, 2.5rem) with 0.5rem gaps between elements.

Group	Order, left to right
Left	Play/pause; volume (mute toggle, with a clamp(3.5rem, 0.55rem + 11cqi, 5.5rem) slider); controlBarLeft; then time display
Right	The controlBarRight capability slot; then fullscreen as the rightmost element

Control-row text uses the playground's shared clamp(1.125rem, 0.75rem + 0.8333cqi, 1.25rem) medium label scale; compact speed values use 1.25rem semibold at every rate. Family and colors come from the theming tokens — Nunito Sans supersedes every family in the design file.

The logo renders at the left end of the top row, mirroring its portrait placement. The refreshed landscape frames show no separate logo element only because the reference footage carries the mark inside the content; pages embedding such footage disable the control (controls.logo: false) rather than the layout omitting the surface. When enabled, the logo appears after the cover and remains visible throughout playback.

At compact landscape widths, the timeline bottom starts at 50px. Its gap above the buttons grows with the same clamp(1.875rem, 0.4545rem + 6.0606cqi, 2.5rem) control-size scale, then gains its final 4px while the frame inset finishes growing. The gap therefore progresses from 10px to the standard 24px without moving independently of the controls.

Below 530px, opening the volume slider hides the time separator and full duration. At 470px and below, the same hover state hides the complete time display. Without volume hover, widths through 470px show only the current time, and widths below 400px hide the complete time display. The chapter label remains shrinkable, and a standard control gap separates the left group from the fixed right group. Below 400px, volume hover lets the controlBarLeft capability grow into the remaining left-group space; it returns to its content width when the slider closes.

Slot map

Slot	Landscape region
timeline	The timeline region (composition per architecture)
controlBarLeft	End of the left control group
controlBarCenter	Omitted
controlBarRight	Right control group, before fullscreen
topIcons	Right end of the top row
captions	Captions region
overlay	Media overlay stack
menu	Menu anchor region
fullscreen	Rightmost control-row position
triggerRail	Omitted (parity rule below)
contextPanel	Omitted (parity rule below)

Portrait

Vertical media at 9:16. Compact, overlay-style surfaces optimized for narrow width and touch. Typical use: vertical video on the Latest Thinking website and as the building block of the shorts feed. A portrait instance is a complete standalone player; feed behavior around it belongs to the shorts module, not to the layout.

Portrait arrangement and measurements are bound by its implementation story from the refreshed portrait frames of the LT Player v4 design file, not from older master-file mockups.

Design provenance

• LT Player v4, node 4015-13289 is the binding source for portrait geometry, sizing, and component placement. Its seven portrait size grades remain valid for player v3.
• LT-Master-File, node 2655-16463 is the portrait usage reference for glyph artwork. The canonical glyph source is documented under Shared behavior below; no measurement from this frame binds the portrait shell.

Reference grades and interpolation

The v4 file defines seven 9:16 reference grades:

Grade	Width	Height
XXS	320px	568.89px
XS	375px	666.67px
SM	410px	728.89px
MD	640px	1137.78px
LG	768px	1365.33px
XL	960px	1706.67px
XXL	1080px	1920px

The component variants contain discrete grade jumps. The player follows the shared continuous-scaling rule instead: XXS and XXL supply the clamp bounds, and the MD proportional value supplies the cqi coefficient. No breakpoint or viewport query reproduces the discrete jumps.

Values below are the raw Figma measurements in grade order XXS through XXL, rounded from subpixel coordinates, followed by their binding continuous value:

Measurement	Raw grade values	Binding CSS value
Portrait edge inset	Playground fluid padding	clamp(1rem, 5cqi, 2.5rem)
Top and bottom scrim height	115, 115, 115, 180, 220, 280, 280	clamp(115px, 28.125cqi, 280px)
Standard control and trigger size	Playground control scale	clamp(1.875rem, 0.4545rem + 6.0606cqi, 2.5rem)
Center play size	Playground portrait center control	clamp(2.5rem, 13cqi, 3.5rem)
Bottom-group gap	Playground portrait group gap	clamp(0.5rem, 2.8571cqi + 2.2857px, 1rem)
Trigger-rail vertical gap	16px minimum, 32px from 480px	clamp(1rem, 6.6667cqi, 2rem)
Center play bottom	20, 20, 20, 29, 37, 41, 41	clamp(20px, 5.75cqi - 7.6px, 41px)
Side-control bottom	25.8, 29.4, 30.6, 37.2, 44.6, 49, 49	Vertically centered against the center play control
Timeline bottom	95, 99, 99, 141, 162, 173, 181	Center-play stack plus reduced portrait edge inset
Timeline height	6, 6, 6, 10, 16, 16, 16	clamp(6px, 1.5625cqi, 16px)
Captions-to-timeline gap	Mirrors the play-to-timeline gap	clamp(14px, 5cqi - 2px, 38px)
Identity bottom baseline	Derived continuously	Timeline top plus the reduced portrait edge inset
Caption presentation	Playground caption overlay	Defined by the captions capability
Cover identity title size	Playground portrait cover title	clamp(1rem, 0.402rem + 3.415cqi, 4.5rem)
Cover identity author size	Playground portrait cover author	clamp(1rem, 0.723rem + 1.585cqi, 2.625rem)
Chapter label size	Playground shared label scale	clamp(1.125rem, 0.75rem + 0.8333cqi, 1.25rem)
Speed label size	Playground rate label	1.25rem at every rate
Vertical volume-slider length	Larger than the landscape slider	clamp(4rem, 1.05rem + 11cqi, 6rem)
Identity text gap	8 at every grade	Fixed 8px

The timeline bottom is deliberately derived from the center play control instead of interpolating its raw grade measurements. Its gap above the control uses the portrait edge inset reduced by 2px, keeping the timeline and controls moving together at every player size while giving the timeline a subtle downward adjustment.

The captions sit above the timeline using the same fluid gap that separates the timeline from the center play control. This keeps the three elements visually balanced as the portrait player grows.

The side-control bottom is derived from the center play bottom plus half the difference between the center-play and standard-control sizes. This keeps every side control vertically centered against the play button throughout the fluid range.

The source frames declare Open Sans, but that family is not authoritative. The player uses its shipped Nunito Sans family while retaining the bound sizes, weights, and line heights.

The portrait player retains the shared 9:16 ratio, contained media on a black ground, safe-area additions, and 1.875rem bottom-left radius. Both portrait scrims use the formula above and remain capped at one third of player height. That cap engages below approximately 194px player width, or 345px player height.

Below 300px player width, the active portrait control surface retains share, chapters, the complete metadata trigger rail, top-left region, play/pause, volume, and the timeline. Speed, the captions toggle, and center capabilities are hidden. Both scrims, caption cues, and identity content remain available; the chapter menu and capability dialogs continue to work. The chapters button remains available as an icon-only control with its visible title hidden.

Regions and control geometry

Region	Placement
Top-left controls	Top and left portrait inset; the logo position collapses when empty
Top-right controls	Top and right portrait inset; contains the share trigger
Trigger rail	Right-aligned above the Identity region; contains the vertically spaced context triggers
Media overlay	Full media surface
Captions	Horizontally centered above the timeline using the bound fluid gap
Identity	Left and right portrait inset, above the timeline by the same fluid gap used below it
Timeline	Edge-to-edge at the bound bottom offset and height
Bottom-left group	controlBarLeft; chapter titles remain content-sized
Bottom-center group	Core play position followed by controlBarCenter contents
Bottom-right group	controlBarRight contents, then the volume control as the rightmost element
Menu anchor	Above the bottom controls, derived from the timeline position
Context panel	Dedicated contextPanel region, never part of overlay

The standard control size and bottom-group gap bind every side control. The center play uses its larger bound size and its own bottom offset; side controls remain vertically centered against it. Trigger-rail items use the standard control size and the bound vertical gap. Identity title, identity author, chapter and speed labels, and identity text gap use their respective values from the measurement table. Portrait renders no time display.

During playback, the Identity region renders content.author followed by content.title whenever either value is present. This surface is independent of the cover's author and title visibility switches, which configure only the pre-playback cover. The Identity region is hidden while subtitles are enabled so it does not compete with caption content. The configured portrait logo appears after the cover and remains visible throughout playback.

The portrait volume position is the rightmost element of the bottom-right group. LT-1620 renders the desktop volume compound or the mobile mute toggle there according to device input capability; the top-left region contains only the logo.

Slot map

Slot	Portrait region
timeline	Edge-to-edge timeline region
controlBarLeft	Bottom-left control group
controlBarCenter	Bottom-center control group
controlBarRight	Bottom-right control group
topIcons	Top-right share control
captions	Centered captions region
overlay	Media overlay stack
menu	Menu anchor above the bottom controls
triggerRail	Metadata triggers above Identity
contextPanel	Dedicated panel/dialog region
fullscreen	Omitted

Shared behavior

• Core control configuration resolves identically, but portrait omits the time and fullscreen surfaces.
• The same capabilities exist in both layouts.
• One canonical icon set serves both layouts, sourced from the LT Context Window Source, node 3711-34826. Portrait uses only that set. Landscape uses it except for play and pause, seek backward and forward, and fullscreen enter and exit; those six glyphs come from the LT Player v4 landscape source, node 4019-13290.

Cover composition

The cover is a full-surface core layer over the media. It does not reuse the normal playback information region or the playPause control slot. One semantic target spans the whole cover; the identity and visible play affordance inside it are presentation, so activation anywhere follows the same playback path.

• Landscape places the cover identity at the upper left and its affordance group at the lower left, using the landscape frame padding.
• Portrait places the identity above the lower-left affordance group, using the portrait edge inset and lower geometry.
• Identity order is author followed by title. Author text uses weight 400 with 1.5 line height. Title text uses the shipped maximum weight 600 with 1.4 line height.
• Portrait retains the responsive title and author sizes and fixed 8px identity gap bound above. Landscape uses its bound control and typography sizing.
• The play icon uses the layout's control size. A labeled affordance places a primary button beside it with a fixed 5px visual gap.
• Portrait uses the canonical play glyph. Landscape uses the play-landscape exception.

Nunito Sans, the theme colors, safe-area additions, and continuous size scaling remain authoritative for every cover surface.

Parity rule, confirmed against the final designs: every core control and every capability exists in both layouts with layout-specific surfaces, with these exceptions, expressed through layout surface omission. Configuration resolves identically for both layouts; a layout silently ignores configured functions whose surfaces it does not own:

• Portrait omits the fullscreen surface.
• Portrait omits the time surface.
• Landscape omits the controlBarCenter surface.
• Landscape omits the context-panel and trigger-rail surfaces at this stage; a landscape surface for the panel is deliberately deferred.

The capability catalog's surface slot targeting and the internal LAYOUT_SLOT_OWNERSHIP map encode capability omissions. Core surface omissions remain explicit in each layout's composition; neither kind is re-derived from configuration.

Surfaces may also adapt to the device rather than the layout: the volume control is the canonical example (full control on desktop, mute toggle on mobile devices, where volume belongs to the hardware buttons).

Capability surfaces per layout

Each capability document specifies its two surfaces in its "Surface in landscape" and "Surface in portrait" sections. This document only fixes the rule: capability configuration is layout-agnostic, and each layout renders only the supported surfaces named by the capability catalog.