SECTION
One project: a shot, then a title, a description and a spec table underneath.
Stack a few inside .work-list, which spaces them further apart than anything within a single entry.
A pixel editor that turns 2D artwork into game-ready extruded geometry. Seven drawing tools, a live depth model and a single-binary export path.
<article class="work-entry">
<div class="placeholder work-entry-shot" style="--ratio:16/9">
<span class="placeholder-kicker">PLACEHOLDER</span>
<span class="placeholder-note">Editor, mid-stroke — 16:9</span>
</div>
<div class="work-entry-body">
<div class="work-entry-head">
<div style="display:flex; align-items:baseline; gap:14px">
<span class="work-entry-index">01</span>
<h3 class="work-entry-title"><a href="#">Flatty</a></h3>
</div>
<span class="work-entry-role">DESIGN · ENGINEERING · SHIPPED</span>
</div>
<p class="work-entry-text">A pixel editor that turns 2D artwork into game-ready extruded geometry. Seven drawing tools, a live depth model and a single-binary export path.</p>
<div class="rule-stack">
<div class="rule-row rule-row-spec"><span class="rule-row-key">ROLE</span><span class="rule-row-value">Sole engineer</span></div>
<div class="rule-row rule-row-spec"><span class="rule-row-key">STACK</span><span class="rule-row-value">Go, OpenGL</span></div>
<div class="rule-row rule-row-spec"><span class="rule-row-key">SHIPPED</span><span class="rule-row-value">2026</span></div>
</div>
</div>
</article>Read from sections/work-entry.css when this page was built, so it cannot fall behind the stylesheet.
.work-entry.work-entry-shot.work-entry-body.work-entry-head.work-entry-index.work-entry-title.work-entry-role.work-entry-text.work-list--ds-accent--ds-arrow--ds-arrow-gap--ds-font-body--ds-font-display--ds-gap-loose--ds-hit-min--ds-ink--ds-ink-faint--ds-ink-soft--ds-measure-wide--ds-shot-max-h--ds-text-chip--ds-text-h3--ds-text-label--ds-text-small--ds-track-key--ds-track-snug--ds-weight-display--ds-work-col--ds-work-gap--ds-work-list-gapOn a medium screen you get the title and the text side by side with the spec table beneath; on a phone all three stack. There is no breakpoint and no intermediate rule — auto-fit is doing all of it.
--ds-shot-max-h is what stops a 21:9 hero becoming six hundred pixels tall on a wide screen. The aspect ratio sets the shape; the cap sets the limit.
A project usually has a page of its own, so the title is usually an a. It keeps the heading's ink rather than taking the accent every other link gets: a heading that repaints itself when it becomes clickable stops being a heading and starts being interface. The ledger's rows do the same thing for the same reason.
The affordance is a north-east arrow after the text, and it appears only when the title is a link. There is no modifier to switch it off: the same block draws a project as a row in a list, where the title links to the case study, and at the head of that case study, where it is an h1 that links nowhere. One has an a inside and the other does not, so the selector is the condition — a flag would be a second way of saying what the markup already says, and the kind that gets forgotten on the page where it matters.
It is drawn as a mask rather than typed as a ↗ character, because this library ships no fonts: a glyph would come from whatever face a consumer brought, present in one and silently replaced by a fallback in the next. It carries no colour of its own and takes the text's, and it is invisible to a screen reader — the link's accessible name is the project title and nothing else, where a character would have added "north east arrow" to every row in the list.
It takes the global focus ring from the base layer unchanged, rather than stating a second one here that would drift from it.