Luma Light / DESIGN SYSTEM

Form, light & interaction.

A carbon exhibition surface for an original object. Chalk type, precise framing and warm light make the controls part of the display.

Layout schematic of the implemented website

This book belongs to Luma Light. The catalogue website has a separate interface guide. Samples below reuse the components from this demo.

01 / FOUNDATIONS

Color, type & form

Fine frames. Dark material surfaces. Explicit spatial controls.

Carbon#171c1b

Chalk#f0eee5

Ember#e6a775

Jost / DISPLAY

FORM & LIGHT.

Inter Tight / READING & INTERFACE

Change finish and light, then rotate and zoom the original 3D object.

02 / LIVE COMPONENTS

Change finish and light, then rotate and zoom the original 3D object.

L / 01
Form studyILLUSTRATED VIEW

Choose a finish, change the light, or inspect the form in 3D.

03 / INTERFACE DETAILS

Try the select, focus the help button, and scroll the inventory. The popup and tooltip retain this theme’s character.

Inspect a component

Jost sets account h1/h2 headings and wordmarks; Inter Tight carries reading text, fields and smaller headings.

Component inventory (scroll to inspect)

01
Account typography
Jost sets account h1/h2 headings and wordmarks; Inter Tight carries reading text, fields and smaller headings.
02
Your brand on account pages
The name and logo replace the wordmark. Main and second colours become readable ink and accent across account surfaces, inputs, actions, focus and reset dialogs. Backgrounds, artwork, lamp finishes and the dark Wayfinder fascia stay authored. Name-only brands and Show originals keep the authored colours.
03
Identity
Luma Light uses its own wordmark, independent of the catalogue.
04
Selection
Change finish and light, then rotate and zoom the original 3D object.
05
Select menu
A keyboard-operated popup with this theme’s borders, type, focus and selected states.
06
Tooltip
Contextual help opens on hover or keyboard focus and closes with Escape.
07
Scroll area
A bounded region with a themed track and thumb. Wheel, touch and keyboard scrolling remain available.
08
Focus & motion
Visible focus and short, input-driven transitions. Reduced motion removes movement.
09
Forms & validation
The settings below use labeled inputs, radios, a switch and checkbox. Saving changes this theme’s actual local dashboard preferences.
10
Dialog & feedback
The reset dialog keeps this theme in its portal, returns focus, and makes the background inert. State tabs expose empty, error, loading and success transitions.

These are the working settings and state components used by this theme’s essential pages.