MODULE

Platform card

One machine's builds, with what to do after the download. A download page's real question is not which file — it is and then what, and every card carries the answer for its own machine right next to the button.

Two machines, two answers

Each card draws its own edge and its own corner, so it sits in a split rather than a hairline mesh: these are self-contained offers, not cells of one table. Three fit on a line at --split-min: 280px and stack in source order when they cannot.

Linux

YOUR SYSTEM

x86_64 · glibc 2.28 or newer

AppImage 62 MB tar.gz 58 MB

THEN, IN A TERMINAL

chmod +x Flatty.AppImage
./Flatty.AppImage

No terminal? Right-click the file, Properties, Permissions, allow executing. Same thing.

Windows

Windows 10 and 11 · x64

Portable .zip 71 MB Installer soon

THEN, THREE CLICKS

Extract the folder, run the program inside it, and keep the folder wherever you like. Nothing is written outside it.

HTML

<div class="split" style="--split-min:280px; width:100%">
  <div class="platform-card">
    <div class="platform-card-head">
      <h3 class="platform-card-name">Linux</h3>
      <span class="chip chip-open">YOUR SYSTEM</span>
    </div>
    <p class="platform-card-spec">x86_64 · glibc 2.28 or newer</p>

    <a class="platform-card-get" href="#">AppImage <span class="platform-card-size">62 MB</span></a>
    <a class="platform-card-get platform-card-get-quiet" href="#">tar.gz <span class="platform-card-size">58 MB</span></a>

    <div class="platform-card-steps">
      <span class="platform-card-steps-label">THEN, IN A TERMINAL</span>
      <pre class="code-block code-block-sunk"><code>chmod +x Flatty.AppImage
./Flatty.AppImage</code></pre>
      <p class="platform-card-note">No terminal? Right-click the file, Properties, Permissions, allow executing. Same thing.</p>
    </div>
  </div>

  <div class="platform-card">
    <div class="platform-card-head">
      <h3 class="platform-card-name">Windows</h3>
    </div>
    <p class="platform-card-spec">Windows 10 and 11 · x64</p>

    <a class="platform-card-get" href="#">Portable .zip <span class="platform-card-size">71 MB</span></a>
    <span class="platform-card-get btn-soon">Installer <span class="platform-card-size">soon</span></span>

    <div class="platform-card-steps">
      <span class="platform-card-steps-label">THEN, THREE CLICKS</span>
      <p class="platform-card-note">Extract the folder, run the program inside it, and keep the folder wherever you like. Nothing is written outside it.</p>
    </div>
  </div>
</div>

Reference

Read from modules/platform-card.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.platform-card.platform-card-head.platform-card-name.platform-card-spec.platform-card-get.platform-card-size.platform-card-get-quiet.platform-card-steps.platform-card-steps-label.platform-card-note

SETTINGSSet the first on one element; a theme sets the second for all of them.--platform-card-pad — falls back to --ds-pad-card

READS--ds-action--ds-font-body--ds-font-display--ds-gap--ds-gap-loose--ds-gap-tight--ds-hairline--ds-hit-min--ds-ink--ds-ink-faint--ds-ink-on-action--ds-ink-read--ds-ink-soft--ds-muted-on-cream--ds-pad-control--ds-radius--ds-radius-control--ds-raised--ds-rule--ds-rule-strong--ds-text-caption--ds-text-h3--ds-text-meta--ds-text-ui--ds-track-button--ds-track-meta--ds-track-note--ds-track-snug--ds-weight-display

Notes

THE ROW THAT IS NOT READY IS INERT, NOT ABSENT

The row is a <span> wearing btn-soon, so there is nothing to focus and nothing to press. It still holds its place, keeps the card level with its neighbours, and says what is coming. Drop it instead and the row re-lays out, sliding the next card's real button under a cursor already on its way down.

It is dashed rather than merely dimmed, and that is the one thing on the card drawn differently instead of quieter. "Coming" is not the same claim as "you may not have this".

That dash is the button's, not this module's. There was a -get-soon here for one morning, which was the same edge spelled twice. It composes because of the layer order rather than by luck: a module is ds-modules and a component is ds-components, so the button paints the edge and the row keeps the geometry.

NO RESTING SHADOW ON A DOWNLOAD ROW

A deliberate omission rather than a plain style. Every focus ring in this library is a box-shadow drawn in @layer base, and any component layer outranks it — so a row that grows a resting shadow and no focus rule of its own drops its ring entirely, silently. Depth here comes from the fill, so there is nothing to swallow.

THE SIZE IS THE SECOND QUESTION

A reader picks the format first and checks the weight second, so the two go to opposite ends of the row rather than running together. On the filled row the size is muted and the label is not, for the same reason.