Transilvania Rail · 2026
A timetable people can read on a platform
Ticket questions at stations down by a third in six months.
Work grid
Selected projects for an agency or portfolio in mixed sizes: the image, client, what was made and the outcome, each tile one link.
Selected work
Selected work
Muzeul Satului · 2025
An archive of 300 houses
Opened to schools across Romania.
Halden Audio · 2025
Identity for a speaker maker
Launched in 11 countries.
Orto · 2024
Ordering for 140 farms
Orders placed a week earlier on average.
<section class="mn-section" aria-labelledby="work-h"><div class="mn-container">
<div class="mn-section-head"><h2 class="mn-title" id="work-h">Selected work</h2></div>
<div class="mn-work">
<article class="mn-work-item mn-work-wide"><div class="mn-work-media"><svg viewBox="0 0 640 360" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<rect width="640" height="360" fill="var(--mn-surface-2)"/>
<rect y="250" width="640" height="110" fill="color-mix(in srgb, var(--mn-primary) 16%, var(--mn-surface-2))"/>
<g stroke="color-mix(in srgb, var(--mn-primary) 30%, transparent)" stroke-width="2"><path d="M40 280h40"/><path d="M150 310h60"/><path d="M260 280h80"/><path d="M370 310h40"/><path d="M480 280h60"/><path d="M590 310h80"/></g>
<path d="M0 150h640" stroke="var(--mn-fg)" stroke-width="8"/>
<path d="M60 250c60-160 460-160 520 0" fill="none" stroke="var(--mn-primary)" stroke-width="10"/>
<g stroke="var(--mn-fg)" stroke-width="3"><path d="M100.0 150V212.5"/><path d="M136.6 150V183.7"/><path d="M173.2 150V160.1"/><path d="M209.8 150V150.0"/><path d="M246.4 150V150.0"/><path d="M283.0 150V150.0"/><path d="M319.6 150V150.0"/><path d="M356.2 150V150.0"/><path d="M392.8 150V150.0"/><path d="M429.4 150V150.0"/><path d="M466.0 150V159.6"/><path d="M502.6 150V183.1"/><path d="M539.2 150V211.8"/></g>
<path d="M40 250V150M600 250V150" stroke="var(--mn-fg)" stroke-width="10"/>
<circle cx="520" cy="70" r="22" fill="var(--mn-accent)" opacity=".8"/></svg></div><p class="mn-work-client">Transilvania Rail · 2026</p><h3 class="mn-work-title"><a href="#">A timetable people can read on a platform</a></h3><p class="mn-work-outcome">Ticket questions at stations down by a third in six months.</p></article>
<article class="mn-work-item mn-work-narrow"><div class="mn-work-media"><svg viewBox="0 0 400 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="480" fill="var(--mn-surface-2)"/>
<path d="M80 460V200a120 120 0 0 1 240 0v260Z" fill="color-mix(in srgb, var(--mn-accent) 16%, var(--mn-surface))"/>
<circle cx="250" cy="190" r="28" fill="var(--mn-accent)" opacity=".7"/>
<path d="M80 330c50-30 100-40 150-22s70 10 90 0v152H80Z" fill="color-mix(in srgb, var(--mn-primary) 35%, var(--mn-surface))"/>
<path d="M80 380c60-20 120-24 170-8s50 6 70 0v108H80Z" fill="color-mix(in srgb, var(--mn-primary) 60%, var(--mn-surface))"/>
<path d="M80 460V200a120 120 0 0 1 240 0v260" fill="none" stroke="var(--mn-fg)" stroke-width="6"/>
<path d="M200 80v380M80 300h240" stroke="var(--mn-fg)" stroke-width="3"/>
<rect x="60" y="456" width="280" height="14" fill="var(--mn-fg)"/></svg></div><p class="mn-work-client">Muzeul Satului · 2025</p><h3 class="mn-work-title"><a href="#">An archive of 300 houses</a></h3><p class="mn-work-outcome">Opened to schools across Romania.</p></article>
<article class="mn-work-item"><div class="mn-work-media"><svg viewBox="0 0 600 450" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><rect width="600" height="450" fill="var(--mn-fg)"/><path d="M0 330 300 90l300 240Z" fill="var(--mn-accent)"/><circle cx="300" cy="300" r="40" fill="var(--mn-bg)"/></svg></div><p class="mn-work-client">Halden Audio · 2025</p><h3 class="mn-work-title"><a href="#">Identity for a speaker maker</a></h3><p class="mn-work-outcome">Launched in 11 countries.</p></article>
<article class="mn-work-item"><div class="mn-work-media"><svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="hills-sky-3" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="var(--mn-surface-2)"/><stop offset="1" stop-color="var(--mn-surface)"/></linearGradient></defs>
<rect width="600" height="400" fill="url(#hills-sky-3)"/>
<circle cx="430" cy="120" r="46" fill="var(--mn-accent)" opacity=".85"/>
<path d="M0 250c80-40 150-70 230-40s140 20 210-20 120-10 160 10v200H0Z" fill="color-mix(in srgb, var(--mn-primary) 30%, var(--mn-surface))"/>
<path d="M0 300c90-30 170-40 250-10s170 10 230-10 90 0 120 10v110H0Z" fill="color-mix(in srgb, var(--mn-primary) 55%, var(--mn-surface))"/>
<path d="M0 350c120-20 220-24 320-6s200 4 280-6v62H0Z" fill="var(--mn-primary)"/></svg></div><p class="mn-work-client">Orto · 2024</p><h3 class="mn-work-title"><a href="#">Ordering for 140 farms</a></h3><p class="mn-work-outcome">Orders placed a week earlier on average.</p></article>
</div>
</div></section>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/work-grid.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-work | The grid: one column, then two, then six tracks. |
| mn-work-item | A project (<article>); the title link covers it. Spans 3 of 6. |
| mn-work-wide · mn-work-narrow · mn-work-full | Span 4, 2 or 6 of 6 tracks. Pair a wide tile with a narrow one. |
| mn-work-media | The image in a fixed ratio. |
| mn-work-client | Client and year, small. |
| mn-work-outcome | One line of result, in plain words. |
Accessibility
- Each project is an article whose heading is the link, so the list of links reads as project names.
- The image is decorative when the title says the same; otherwise give it alt text describing the work.
- Do not rely on hover to reveal the title or client.