01Product
rgba(28, 27, 24, .91)Frame cards, product views and try-on controls.
THEIA · Design system / 01
Noir
minéral.
A portrait interface for choosing and trying on eyewear, shaped by the light of Constellation V2.
Explore light and materials
01 / Light study
A pool of light behind the frame.
Compare the same frame with and without the halo. Try Black to see how the light separates a dark frame from its background.
The halo peaks behind the bridge and fades toward the edges. Its three stops use 100%, 55% and 18% of the centre opacity, then reach zero at 73% of the ellipse. The grain backdrop helps inspect the silhouette. The live Constellation weave is in the Motion section.
02 / Colour and surfaces
Four materials, four jobs.
See how the actual surface tokens read over a flat field or a brighter patch of grain.
02Editorial
rgba(48, 48, 45, .96)Visit guidance and order summary. Look highlights use a separate gradient.
03Data
rgba(58, 58, 53, .98)Prescription values and verification status.
04Dialog
rgba(27, 27, 25, .98)Focused decisions such as consent or ending a visit.
- Primary text
- #E8E4DA
- Secondary text
- #C4C0B6
- Structural rule
- #77746C
- Quiet rule
- #4B4943
- Scene token
- #050505
Use colour swatches for the actual frame finishes. Keep the label and selection ring visible on every finish. Check text over the brightest part of the weave, where translucent surfaces have the least contrast.
03 / Typography and reach
From eye level to hand level.
32 / 38.4Your frames
30 / highlightYour style
24 / 33.6Choose a frame
21 / tabYour looks
18 / noteVisit details
Arial for the kiosk. Values are logical pixels. The wordmark uses the supplied artwork.
- Canvas
- 900 × 1,600 logical px, scaled uniformly in portrait.
- Margins
- 44 px on each side. Main content begins 132 px from the top.
- Placement
- Face or product above the choices. Contextual back action at the top. Visit controls stay within reach.
- Touch sizes
- 64 px compact controls, 72 px product actions and 76 px confirmation. About 28, 32 and 34 mm respectively on the full display.
- Keyboard focus
- 2 px outline with 4 px offset. Selected and focused can be read independently.
04 / Component states
Touch the state you want to inspect.
LOOK HIGHLIGHTYour styleNeutral tones · Rounded lines
PRESCRIPTIONFound in your accountValues checked by you
← BackConfirm my selection
- Frame card
- Show the model, colour and save control. Add up to two attributes that answer the visitor’s request. An outline marks the selected frame.
- Highlights
- The editorial panel uses a translucent gradient and a fine bottom rule. Its text stays in place while the 3D models prepare.
- Try-on
- Keep the finish swatches by the face. Show measurements in a separate panel and keep comparison details with each frame.
- Prescription
- Group source, status and values in the data panel. Keep it separate from the lens choice.
- Confirmation
- Use the light filled action for final confirmation. Put the total and the purchase link action on separate lines.
05 / Constellation V2
See how the weave responds.
Load the actual 32-inch preview to compare listening, thinking and speaking. Speaking is simulated in the review.
Logo dissolution
The logo turns into the weave over five seconds. Replay it on demand.
Conversation
Listening, thinking and speaking share one weave. The live speaking state follows the audio signal.
Reflection
The featured frame turns, then a reflection passes across the left temple. The card halo stays behind the frame.
Reduced motion
Reduce movement, dim the weave or raise the visit controls in Settings.
06 / Reference screens
Follow the visit.
Each link opens the corresponding state in the screen review.