Phone frame explorer · v2

Marvel iPhone X — line-art

Pivots from v1's solid-fill direction to a pure line-art treatment. Three concentric outlines (outer case, inner bezel, screen), notch as outline only, side buttons as solid 3px lines. All fills transparent. Stroke is --royal-7 at 1.5px to match the existing portfolio frame and the diagram-aesthetic rule. The iframe shows directly through the screen outline.

v1 (solid fill, rejected) preserved at /v1.html

Frames · live the-weekly V3 in each

Control · current portfolio frame

300 × 600 · 1.5px royal-7 stroke · top notch + home pill via chrome bars

A · line-art, standard bezel

427 × 864 · bezel inset 36px · same stroke + colour as control · screen 355 × 740

B · line-art, 25% thinner bezel

427 × 864 · bezel inset 27px · same outer dimensions as A · screen 373 × 810

What changed from v1

Case body fill removed — was var(--royal-3), now transparent. The page background shows through.
Inner bezel band — was a solid var(--royal-7) rectangle on the case, now a 1.5px outline at the same inset.
Screen now has its own 1.5px outline (was borderless inside the solid case body in v1).
Notch — was solid var(--royal-1) with curved-corner radial-gradient pseudo-elements. Now outline only, transparent fill, no corner gradients.
Side buttons stay as 3px solid lines (too thin to outline meaningfully).
Inner darkening variant dropped — line-art only.

Variant A vs B

A — bezel inset 36px from outer edge to screen (matches Marvel's spec). Screen 355 × 740.
B — bezel inset 27px (75% of A). Screen 373 × 810. Outer dimensions unchanged at 427 × 864. Notch height also scales 30 → 24px to keep proportion.

Stroke convention

Stroke colour var(--royal-7) and weight 1.5px match the existing portfolio frame and the imagery-standards diagram rule (1.5px node outlines). If the lines still feel too quiet against the dark background, the next escalation is var(--royal-8) (the primary, brighter blue) or 2px stroke. Flag for v3.