News · GRIDD Design System v1.0

What it is made of

GdCard flush interactive — the post
GdImage radius="none" — the cover, where the post has one
GdCardMedia horizontal size="40%" — the drawn media, where it does not
GdChip — the category, and the filter set above the feed
The date beside the chip, in --gd-ink-muted

The block

Three translucent constraint planes floating at different heights above a single parcel. — The featured post, with a cover40% picture, 60% words. The image carries no radius of its own — the flush card clips it, and rounding both leaves the card's fill showing in four corners.

Data update28 July 2026

Northbank's building-height overlay is now mapped

Every building-height layer the council publishes is now joined to the cadastre. Source: Northbank Regional Council planning scheme, read 28 July 2026.

Read the note →

The same post, with nothing to showA post with no cover keeps the drawn panel. It is a first-class outcome, not a placeholder — a feed that manufactures a picture for every item will one day manufacture the wrong one.

Code

<GdCard flush interactive class="post">
  <GdCardMedia horizontal size="40%" tint="accent" :plaque="64">
    <GdIcon d="M4 4h16v16H4zM12 4v16M4 12h8" :size="36" :stroke="1.6" />
  </GdCardMedia>

  <div class="post__body">
    <GdChip tone="accent" size="sm">Data update</GdChip>
    <span class="post__date">28 July 2026</span>

    <h3>Northbank's building-height overlay is now mapped</h3>
    <p>Source: Northbank Regional Council planning scheme,
       read 28 July 2026.</p>

    <span class="post__more">Read the note →</span>
  </div>
</GdCard>

Rules

Name the register and the sync date in every data-refresh post. Without both it is an announcement, not a refresh.
Filters are chips; the category is an accent chip on the card; the date sits beside it in the muted ink.
Use the horizontal split card for the featured post only — 40% media, 60% words. Everything else is the standard media card.
Set articles at the measure and use the quiet callout for asides. The docs typography, exactly.
A cover is the product's own work, or there is no cover. Artwork, a diagram, a real screenshot — never stock photography, which decorates a post instead of showing what it is about. A post with nothing to show uses the drawn panel and loses nothing.
One ratio for the whole feed. Cards whose images disagree about shape never line up, and the disagreement is inside the card where no grid CSS can reach it.
Introduce no new card shape. If a post does not fit, the post is wrong, not the feed.

Behavior & Anatomy

For GRIDD the news often IS the data

A data-refresh post always names the register and the sync date. The reader's question is never “what did you ship” but “is the answer I got yesterday still the answer” — and that question is answered by two facts, both of which are cheap to include and impossible to infer.

No new shapes, no photography

Every post is a card the system already has. A feed is the surface most likely to accrete one-off layouts, one per campaign, until it is its own small design system; holding it to the existing cards means a post's design decision is which card, and nothing else. The media is drawn on a tinted ground for the same reason the landing carries no raster hero: a photograph is the largest request on the page and says nothing a lot cannot.

Articles read at the measure

A news article is a document, so it gets the document treatment — the reading column, the quiet callout for asides, the docs typography exactly. Two prose systems in one product is one prose system nobody maintains.