Layout and styling
Position layers with ordinary CSS while keeping geometry and design controls editable in Studio.
The canvas is a fixed coordinate system. Each layer is an ordinary positioned HTML element. Store shared design rules in css; reserve inline styles for values that should be especially easy to inspect or patch.
Brand material board
A still composition combining editorial media, a palette system and deliberately aligned typography.
Editable layout
<section id="board" data-jc-clip data-jc-kind="group"
data-jc-start="0" data-jc-duration="1" data-jc-track="0">
<img id="photo" data-jc-clip data-jc-kind="image"
data-jc-start="0" data-jc-duration="1" data-jc-track="1"
src="jsoncut-media://media_brand_photo" alt="" />
<h1 id="headline" data-jc-clip data-jc-kind="text"
data-jc-start="0" data-jc-duration="1" data-jc-track="4">
WARM / PRECISE / HUMAN
</h1>
</section>#board { position:absolute; inset:0; overflow:hidden; background:#ffeee7; }
#photo { position:absolute; left:70px; top:70px; width:520px; height:940px;
object-fit:cover; border-radius:32px; }
#headline { position:absolute; left:650px; top:250px; width:350px; height:420px;
display:flex; align-items:center; margin:0; color:#171418;
font:800 78px/.93 Inter,sans-serif; letter-spacing:-.05em; }Supported visual controls
- position, size, rotation, radius and opacity;
- flex/grid layout inside HTML and group layers;
- font family, size, weight, line height, letter spacing and wrapping;
- horizontal and vertical text alignment;
- solid and multi-stop gradient fills;
- per-side borders, shadows, blur, brightness, saturation and hue;
object-fit, crop and object position for media.
Use explicit width and height for text that may be replaced by a variable. Center text with display:flex, align-items and justify-content when it must remain centered inside a badge or button.
Property guide
| Concern | Public source | Notes |
|---|---|---|
| Position and size | left, top, width, height or equivalent CSS layout | Studio resolves numeric geometry for direct manipulation |
| Rotation and opacity | transform, opacity | Time-based changes belong in data-jc-animation |
| Text | font family, size, weight, line height, letter spacing, alignment, white space | Keep replacement bounds explicit |
| Media crop | object-fit, object-position and Studio crop data | Preview every aspect variant |
| Border | width, color, style and individual radii | Property bindings support width, color and each radius |
| Image filters | blur, brightness, saturation and hue | All four can be animated; brightness, saturation and blur stay non-negative |
| Fill | CSS color or supported deterministic gradient | Palette references include a literal fallback |
Deterministic CSS
The project rejects document-level tags, executable elements, inline event handlers, JavaScript URLs, CSS imports and browser-specific executable CSS. Pin media through the media API instead of loading an undeclared remote dependency from CSS.
Layout can use flex and grid inside the fixed canvas. The final output still has a known pixel size, so test long text and narrow aspect variants rather than relying on a browser viewport outside the canvas.