Component · 01
Article Card
Photo, kicker, title, read link — EN and AR
Photo, kicker, title, read link — EN and AR. No excerpt and no date on cards. Kicker = series · reading time.
.msz-card.msz-label.msz-h4.msz-btn
View markup
Copy <div class="row" style="align-items:stretch">
<div class="msz-card" style="width:300px">
<div class="media" style="background-image:var(--p-large-office-north90);background-position:50% 55%;background-size:cover;background-repeat:no-repeat;"></div>
<div class="body">
<div class="msz-label" style="color:#6B6B6B">Growth notes · 5 min</div>
<div class="msz-h4" style="margin-top:8px">How SMEs scale without moving office</div>
<a class="msz-btn text" style="margin-top:12px">Read →</a>
</div>
</div>
<div class="msz-card" dir="rtl" style="width:300px;font-family:var(--font-arabic)">
<div class="media" style="background-image:var(--p-office-10th-b);background-position:55% 50%;background-size:cover;background-repeat:no-repeat;"></div>
<div class="body">
<div class="msz-label" style="color:#6B6B6B">مقالات النمو · 4 دقائق</div>
<div class="msz-h4" style="margin-top:8px">متى تنتقل إلى مكتب خاص؟</div>
<a class="msz-btn text" style="margin-top:12px">اقرأ ←</a>
</div>
</div>
</div>
Component · 02
Branch Card
Photo, market label, name, live status
Photo, market label, name, live status. 4:3 photo from that branch only. Status reflects live availability.
.msz-card.msz-label.msz-h4.msz-status
View markup
Copy <div class="msz-card" style="width:300px">
<div class="media" style="background-image:var(--p-exterior-10th);background-position:50% 50%;background-size:cover;background-repeat:no-repeat;"></div>
<div class="body">
<div class="msz-label" style="color:#6B6B6B">Branch · Egypt</div>
<div class="msz-h4" style="margin-top:6px">10th of Ramadan</div>
<div style="margin-top:10px">
<span class="msz-status available">Offices available</span>
</div>
</div>
</div>
Information chips: default, active, available, unavailable, Arabic
Information chips: default, active, available, unavailable, Arabic. Chips carry facts that are true for that branch. Max 4 on a photo. Radius 2 px. The red square inside a chip is the surface’s one marker.
.msz-chip.msz-marker
View markup
Copy <div class="row">
<span class="msz-chip">Furnished</span>
<span class="msz-chip active">Private office</span>
<span class="msz-chip">
<span class="msz-marker"></span>Available now
</span>
<span class="msz-chip" style="color:#A6A6A6;border-color:#D9D9D9">Unavailable</span>
<span class="msz-chip" dir="rtl">مجهّز</span>
<div style="background:#1C1C1C;padding:10px">
<span class="msz-chip on-photo">On photo</span>
</div>
</div>
Component · 07
Empty State
Plan drawing, message, one action
Plan drawing, message, one action. Explain what will appear and offer the one action that fills it.
.msz-h4.msz-small.msz-btn
View markup
Copy <div style="max-width:560px;border:1px dashed #A6A6A6;padding:28px;display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center">
<div style="height:110px"><svg viewBox="0 0 200 160" width="140" height="110" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#A6A6A6" stroke-width="1.2" stroke-linecap="square" /><rect x="55" y="58.0" width="90" height="44" fill="none" stroke="#A6A6A6" stroke-width="0.96" /><circle cx="66" cy="46.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><circle cx="66" cy="114.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><circle cx="89" cy="46.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><circle cx="89" cy="114.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><circle cx="112" cy="46.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><circle cx="112" cy="114.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><circle cx="135" cy="46.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><circle cx="135" cy="114.0" r="7" fill="none" stroke="#A6A6A6" stroke-width="0.96"/><path d="M178 50.0V110.0" fill="none" stroke="#A6A6A6" stroke-width="1.2" stroke-linecap="square" stroke-width="3.5999999999999996"/><rect x="94" y="74.0" width="12" height="12" fill="#F05C49"/></svg>
</div>
<div>
<div class="msz-h4">No bookings yet.</div>
<div class="msz-small" style="color:#404040;margin-top:6px">Meeting rooms in every branch, by the hour.</div>
<button class="msz-btn" style="margin-top:14px">Book a room</button>
</div>
</div>
Video end cards A brand · B service · C branch · D lead · E social
Video end cards A brand · B service · C branch · D lead · E social. Duration 2.5–3.5 s: build 500 ms, hold ≥ 2 s, cut. Off-white is the default ground. The master logo sits only on off-white (or an off-white plate/base on black or red) — no recoloured logo; an official white master is an owner asset. Red only for lead generation, with off-white type.
.msz-label
View markup
Copy <!-- Logo/symbol sprite: see assets/Logo (masters) -->
<div class="row" style="gap:14px;align-items:flex-start">
<div style="width:150px;height:267px;background:var(--paper);display:grid;place-items:center"><svg class="lg " viewBox="0 0 3247 677" style="width:110px;height:22.94px;" aria-label="MSPACEZ"><use href="#msz-logo" width="3247" height="677"/></svg>
</div>
<div style="width:150px;height:267px;background:var(--paper);position:relative;padding:18px 14px">
<div class="msz-label" style="font-size:8px;color:#000">Private offices</div>
<div style="font:300 19px/1.1 var(--font-sans);margin-top:8px">Your office, <b style="font-weight:700">ready on day one.</b>
</div>
<div style="position:absolute;left:14px;right:14px;bottom:44px;background:#000;color:#fff;font:600 8px var(--font-sans);letter-spacing:.06em;padding:8px">BOOK A TOUR →</div>
<div style="position:absolute;left:14px;bottom:18px"><svg class="lg " viewBox="0 0 3247 677" style="width:70px;height:14.6px;" aria-label="MSPACEZ"><use href="#msz-logo" width="3247" height="677"/></svg>
</div>
</div>
<div style="width:150px;height:267px;background:var(--paper);position:relative">
<div style="height:125px;background-image:var(--p-reception-north90);background-position:50% 55%;background-size:cover;background-repeat:no-repeat;"></div>
<div style="padding:10px 14px;font:300 24px var(--font-sans)">North 90</div>
<div style="position:absolute;left:14px;right:14px;bottom:44px;background:#000;color:#fff;font:600 8px var(--font-sans);padding:8px">BOOK A TOUR →</div>
<div style="position:absolute;left:14px;bottom:18px"><svg class="lg " viewBox="0 0 3247 677" style="width:70px;height:14.6px;" aria-label="MSPACEZ"><use href="#msz-logo" width="3247" height="677"/></svg>
</div>
</div>
<div style="width:150px;height:267px;background:var(--brand-red);position:relative;padding:18px 14px">
<div style="font:300 19px/1.1 var(--font-sans);color:var(--paper)">An official address, <b style="font-weight:700">without walls.</b>
</div>
<div style="position:absolute;left:14px;right:14px;bottom:70px;background:var(--paper);font:600 8px var(--font-sans);padding:8px">GET STARTED →</div>
<div style="position:absolute;left:0;right:0;bottom:0;height:56px;background:var(--paper);display:flex;align-items:center;padding-left:14px"><svg class="lg " viewBox="0 0 3247 677" style="width:70px;height:14.6px;" aria-label="MSPACEZ"><use href="#msz-logo" width="3247" height="677"/></svg>
</div>
</div>
<div style="width:150px;height:267px;background:#000;display:grid;place-items:center">
<div style="background:var(--paper);padding:6px 9px;line-height:0"><svg class="lg " viewBox="0 0 3247 677" style="width:100px;height:20.85px;" aria-label="MSPACEZ"><use href="#msz-logo" width="3247" height="677"/></svg>
</div>
</div>
</div>
Label, input, focus, error, disabled, Arabic
Label, input, focus, error, disabled, Arabic. Error = 2 px red border + black message with red “!” square. Never red text.
.msz-field.msz-label.msz-input
View markup
Copy <div style="display:grid;grid-template-columns:repeat(3,260px);gap:6px 24px">
<label class="msz-field">
<span class="msz-label">Default</span>
<input class="msz-input" placeholder="Company name">
</label>
<label class="msz-field">
<span class="msz-label">Focus</span>
<input class="msz-input focus" value="MSPACEZ">
</label>
<label class="msz-field">
<span class="msz-label">Error</span>
<input class="msz-input error" value="salma@">
<span class="msg">Enter a full email address</span>
</label>
<label class="msz-field">
<span class="msz-label">Disabled</span>
<input class="msz-input" disabled value="North 90" style="background:#EFEEEB;color:#6B6B6B;border-color:#D9D9D9">
</label>
<label class="msz-field" dir="rtl">
<span class="msz-label">الاسم</span>
<input class="msz-input" style="font-family:var(--font-arabic)" value="سلمى حسن">
</label>
</div>
Component · 12
Lower Third
Video lower-third family — person, branch, service, location, info, price
Video lower-third family — person, branch, service, location, info, price. Marker bar (12 px @1080) + plate. Plates: off-white (default on footage), black (dark footage), clean (no plate, soft shadow, calm footage). Width auto (360–820 px @1080); one or two lines. Motion: marker 150 ms → plate expands 250 ms → text reveals 300 ms · hold 3–4 s · slide out 250 ms. RTL mirrors fully. Zone y 1180–1330 on 9:16.
View markup
Copy <div class="row" style="background:#6B6B6B;padding:22px;gap:22px">
<div style="display:flex;align-items:stretch">
<div style="width:4px;background:var(--brand-red)"></div>
<div style="background:var(--paper);padding:8px 12px 9px">
<div style="font:600 15px/1.2 var(--font-sans);color:#000;white-space:nowrap">Salma H.</div>
<div class=msz-label style=font-size:9px;margin-top:4px;color:var(--gray)>Founder · sample</div>
</div>
</div>
<div style="display:flex;align-items:stretch">
<div style="width:4px;background:var(--brand-red)"></div>
<div style="background:#000;padding:8px 12px 9px">
<div style="font:600 15px/1.2 var(--font-sans);color:#fff;white-space:nowrap">North 90</div>
<div class=msz-label style=font-size:9px;margin-top:4px;color:var(--silver)>New Cairo · Egypt</div>
</div>
</div>
<div style="display:flex;align-items:stretch">
<div style="width:4px;background:var(--brand-red)"></div>
<div style="background:var(--paper);padding:8px 12px 9px">
<div style="font:600 15px/1.2 var(--font-sans);color:#000;white-space:nowrap">Private office</div>
<div class=msz-label style=font-size:9px;margin-top:4px;color:var(--gray)>Teams of 1–20+</div>
</div>
</div>
<div style="display:flex;align-items:stretch">
<div style="width:4px;background:var(--brand-red)"></div>
<div style="background:#000;padding:8px 12px 9px">
<div style="font:600 15px/1.2 var(--font-sans);color:#fff;white-space:nowrap">Road 90 · New Cairo</div>
</div>
</div>
<div style="display:flex;align-items:stretch">
<div style="width:4px;background:var(--brand-red)"></div>
<div style="background:var(--paper);padding:8px 12px 9px">
<div style="font:300 15px/1.2 var(--font-sans);color:#000;white-space:nowrap">EGP 0,000 / month</div>
<div class=msz-label style=font-size:9px;margin-top:4px;color:var(--gray)>Sample</div>
</div>
</div>
<div style="display:flex;align-items:stretch" dir=rtl>
<div style="width:4px;background:var(--brand-red)"></div>
<div style="background:#000;padding:8px 12px 9px">
<div style="font:600 15px/1.2 var(--font-arabic);color:#fff;white-space:nowrap">North 90</div>
<div class=msz-label style=font-size:9px;margin-top:4px;color:var(--silver)>القاهرة الجديدة</div>
</div>
</div>
</div>
Component · 15
Pricing Module
Price, basis, inclusions, action
Price, basis, inclusions, action. Prices only from Finance; placeholders marked. Currency before the number (EGP / SAR).
.msz-label.msz-marker.msz-num.msz-caption.msz-small.msz-btn
View markup
Copy <div style="width:340px;border-top:1.5px solid #000;background:var(--paper);padding:22px">
<div style="display:flex;justify-content:space-between">
<span class="msz-label" style="color:#6B6B6B">Private office · 2 people</span>
<span class="msz-marker"></span>
</div>
<div class="msz-num" style="font-size:48px;margin-top:12px">EGP 0,000</div>
<div class="msz-caption">per month · placeholder (N-11)</div>
<div style="border-top:1px solid #D9D9D9;padding:9px 0;display:flex;justify-content:space-between" class="msz-small">
<span>Furniture</span>
<span>Included</span>
</div>
<div style="border-top:1px solid #D9D9D9;padding:9px 0;display:flex;justify-content:space-between" class="msz-small">
<span>Internet</span>
<span>Included</span>
</div>
<div style="border-top:1px solid #D9D9D9;padding:9px 0;display:flex;justify-content:space-between" class="msz-small">
<span>Setup fees</span>
<span>None</span>
</div>
<button class="msz-btn" style="width:100%;justify-content:center;margin-top:10px">Get a quote</button>
</div>
Component · 16
Service Card
Plan, label, title, fact chips, link
Plan, label, title, fact chips, link. White card, 1.5 px black top rule, 1 px line inset. No shadow, no radius.
.msz-card.msz-label.msz-h4.msz-chip.msz-btn
View markup
Copy <div class="row" style="align-items:stretch">
<div class="msz-card" style="width:260px;padding:20px">
<div style="height:110px"><svg viewBox="0 0 200 160" width="220" height="110" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H120 M80 140H20V20" fill="none" stroke="#000" stroke-width="1.2222222222222223" stroke-linecap="square" /><path d="M80 140 A40 40 0 0 1 120 100" fill="none" stroke="#000" stroke-width="1.2222222222222223" stroke-linecap="square" stroke-dasharray="3 3"/><path d="M60 20H140" fill="none" stroke="#000" stroke-width="1.2222222222222223" stroke-linecap="square" stroke-width="3.666666666666667"/><rect x="40" y="45" width="50" height="26" fill="none" stroke="#000" stroke-width="0.9777777777777779" /><circle cx="65" cy="83" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><rect x="110" y="45" width="50" height="26" fill="none" stroke="#000" stroke-width="0.9777777777777779" /><circle cx="135" cy="83" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><rect x="40" y="95" width="50" height="26" fill="none" stroke="#000" stroke-width="0.9777777777777779" /><circle cx="65" cy="133" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><rect x="110" y="95" width="50" height="26" fill="none" stroke="#000" stroke-width="0.9777777777777779" /><circle cx="135" cy="133" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><rect x="154" y="50" width="12" height="12" fill="#F05C49"/></svg>
</div>
<div class="msz-label" style="color:#6B6B6B;margin-top:14px">Service</div>
<div class="msz-h4" style="margin-top:6px">Private offices</div>
<div style="display:flex;gap:6px;margin-top:12px">
<span class="msz-chip">1–20+</span>
<span class="msz-chip">24/7</span>
</div>
<a class="msz-btn text" style="margin-top:14px">Explore →</a>
</div>
<div class="msz-card" style="width:260px;padding:20px">
<div style="height:110px"><svg viewBox="0 0 200 160" width="220" height="110" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#000" stroke-width="1.2222222222222223" stroke-linecap="square" stroke-dasharray="6 6"/><path d="M100 106.0c0 0 22-19 22-37a22 22 0 0 0-44 0c0 18 22 37 22 37z" fill="none" stroke="#000" stroke-width="1.2222222222222223"/><circle cx="100" cy="69.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><rect x="36" y="102" width="34" height="24" fill="none" stroke="#000" stroke-width="0.9777777777777779" /><path d="M36 102 53 116 70 102" fill="none" stroke="#000" stroke-width="1.2222222222222223" stroke-linecap="square" /><rect x="130" y="100" width="30" height="28" fill="none" stroke="#000" stroke-width="0.9777777777777779" /></svg>
</div>
<div class="msz-label" style="color:#6B6B6B;margin-top:14px">Service</div>
<div class="msz-h4" style="margin-top:6px">Virtual office</div>
<div style="display:flex;gap:6px;margin-top:12px">
<span class="msz-chip">Address</span>
<span class="msz-chip">Mail</span>
</div>
<a class="msz-btn text" style="margin-top:14px">Explore →</a>
</div>
<div class="msz-card" style="width:260px;padding:20px">
<div style="height:110px"><svg viewBox="0 0 200 160" width="220" height="110" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#000" stroke-width="1.2222222222222223" stroke-linecap="square" /><rect x="55" y="58.0" width="90" height="44" fill="none" stroke="#000" stroke-width="0.9777777777777779" /><circle cx="66" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><circle cx="66" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><circle cx="89" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><circle cx="89" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><circle cx="112" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><circle cx="112" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><circle cx="135" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><circle cx="135" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.9777777777777779"/><path d="M178 50.0V110.0" fill="none" stroke="#000" stroke-width="1.2222222222222223" stroke-linecap="square" stroke-width="3.666666666666667"/></svg>
</div>
<div class="msz-label" style="color:#6B6B6B;margin-top:14px">Service</div>
<div class="msz-h4" style="margin-top:6px">Meeting rooms</div>
<div style="display:flex;gap:6px;margin-top:12px">
<span class="msz-chip">4–20</span>
<span class="msz-chip">Hourly</span>
</div>
<a class="msz-btn text" style="margin-top:14px">Explore →</a>
</div>
</div>
Component · 17
Service Plan
Top-down plan pictograms, one per service
Top-down plan pictograms, one per service. Line weight = canvas width / 180. Explains a service without photography. Red only on the one element that matters (and only if no other marker).
View markup
Copy <div class="row">
<div>
<div class="lbl">Office</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H120 M80 140H20V20" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><path d="M80 140 A40 40 0 0 1 120 100" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" stroke-dasharray="3 3"/><path d="M60 20H140" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" stroke-width="3.5999999999999996"/><rect x="40" y="45" width="50" height="26" fill="none" stroke="#000" stroke-width="0.96" /><circle cx="65" cy="83" r="7" fill="none" stroke="#000" stroke-width="0.96"/><rect x="110" y="45" width="50" height="26" fill="none" stroke="#000" stroke-width="0.96" /><circle cx="135" cy="83" r="7" fill="none" stroke="#000" stroke-width="0.96"/><rect x="40" y="95" width="50" height="26" fill="none" stroke="#000" stroke-width="0.96" /><circle cx="65" cy="133" r="7" fill="none" stroke="#000" stroke-width="0.96"/><rect x="110" y="95" width="50" height="26" fill="none" stroke="#000" stroke-width="0.96" /><circle cx="135" cy="133" r="7" fill="none" stroke="#000" stroke-width="0.96"/><rect x="154" y="50" width="12" height="12" fill="#F05C49"/></svg>
</div>
</div>
<div>
<div class="lbl">Meeting</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><rect x="55" y="58.0" width="90" height="44" fill="none" stroke="#000" stroke-width="0.96" /><circle cx="66" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="66" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="89" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="89" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="112" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="112" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="135" cy="46.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="135" cy="114.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><path d="M178 50.0V110.0" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" stroke-width="3.5999999999999996"/></svg>
</div>
</div>
<div>
<div class="lbl">Virtual</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" stroke-dasharray="6 6"/><path d="M100 106.0c0 0 22-19 22-37a22 22 0 0 0-44 0c0 18 22 37 22 37z" fill="none" stroke="#000" stroke-width="1.2"/><circle cx="100" cy="69.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/><rect x="36" y="102" width="34" height="24" fill="none" stroke="#000" stroke-width="0.96" /><path d="M36 102 53 116 70 102" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><rect x="130" y="100" width="30" height="28" fill="none" stroke="#000" stroke-width="0.96" /></svg>
</div>
</div>
<div>
<div class="lbl">Training</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><path d="M60 30H140" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" stroke-width="3.5999999999999996"/><rect x="85" y="42" width="30" height="14" fill="none" stroke="#000" stroke-width="0.96" /><rect x="34" y="64" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="62" y="64" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="90" y="64" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="118" y="64" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="146" y="64" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="34" y="84" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="62" y="84" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="90" y="84" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="118" y="84" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="146" y="84" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="34" y="104" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="62" y="104" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="90" y="104" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="118" y="104" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="146" y="104" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="34" y="124" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="62" y="124" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="90" y="124" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="118" y="124" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /><rect x="146" y="124" width="20" height="8" fill="none" stroke="#000" stroke-width="0.96" /></svg>
</div>
</div>
<div>
<div class="lbl">Desks</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><rect x="40" y="42" width="120" height="26" fill="none" stroke="#000" stroke-width="0.96" /><path d="M100 42V68" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><circle cx="55" cy="33" r="6" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="85" cy="77" r="6" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="115" cy="33" r="6" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="145" cy="77" r="6" fill="none" stroke="#000" stroke-width="0.96"/><rect x="40" y="94" width="120" height="26" fill="none" stroke="#000" stroke-width="0.96" /><path d="M100 94V120" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><circle cx="55" cy="85" r="6" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="85" cy="129" r="6" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="115" cy="85" r="6" fill="none" stroke="#000" stroke-width="0.96"/><circle cx="145" cy="129" r="6" fill="none" stroke="#000" stroke-width="0.96"/></svg>
</div>
</div>
<div>
<div class="lbl">Address</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><rect x="40" y="40" width="120" height="80" fill="none" stroke="#000" stroke-width="0.96" /><path d="M40 40 100 80.0 160 40" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /></svg>
</div>
</div>
<div>
<div class="lbl">Building</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M40 140V40H160V140" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><path d="M20 140H180" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><rect x="52" y="52" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="79" y="52" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="106" y="52" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="133" y="52" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="52" y="80" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="79" y="80" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="106" y="80" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="133" y="80" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="52" y="108" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="79" y="108" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="106" y="108" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /><rect x="133" y="108" width="16" height="18" fill="none" stroke="#000" stroke-width="0.96" /></svg>
</div>
</div>
<div>
<div class="lbl">Route</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M30 48.0 C 80 48.0, 90 112.0, 170 112.0" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" stroke-dasharray="5 5"/><circle cx="30" cy="48.0" r="7" fill="none" stroke="#000" stroke-width="0.96"/></svg>
</div>
</div>
<div>
<div class="lbl">Lounge</div>
<div style="width:150px;height:120px"><svg viewBox="0 0 200 160" width="150" height="120" preserveAspectRatio="xMidYMid meet" style="display:block;overflow:visible"><path d="M20 20H180V140H20Z" fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="square" /><rect x="40" y="40" width="70" height="26" fill="none" stroke="#000" stroke-width="0.96" /><rect x="40" y="40" width="14" height="60" fill="none" stroke="#000" stroke-width="0.96" /><circle cx="140" cy="70" r="16" fill="none" stroke="#000" stroke-width="0.96"/><rect x="120" y="100" width="50" height="24" fill="none" stroke="#000" stroke-width="0.96" /></svg>
</div>
</div>
</div> 
