Statement & Value Table

Statement

The "Tausende Sensoren erzeugen Daten" moment on the landing page. A field spanning the whole block and a claim standing inside it, nothing around them. It is the one place in the system where a claim gets a whole section to itself, so it is used once per page at most.

It was a claim beside a square object until the square was measured. At 1280 the figure cell was 608 × 608 — to carry five hairlines, a 14 px dot and a small grey mark — while the claim it existed to support filled 168 px of the 608 px row next to it. Seventy-two per cent of the component was reserved for nothing, and the section stood 848 px tall on a 900 px viewport to say one sentence. It is 688 px now, with more drawing in it, because the figure is a band the claim sits inside rather than a column the claim sits next to.

The drawing changed for a second reason, and it is the one worth keeping. The old figure was a symmetric star with a lit lime centre — which is the picture of an answer found, next to a sentence whose whole shape is many signals in, nothing out. The illustration contradicted the copy.

What replaces it is built out of Illustration rather than by eye, because a first attempt that was not broke two of its rules at once and looked fine doing it. It had 186 sources, which is a scatter — and the manual says of nodes, in as many words, that they are "not a scatter" and that "twelve is too many". Each of those sources aimed a tick straight at the centre, which put 186 distinct angles in a drawing where every diagonal on the site is 0°, 26.57°, 45° or 63.43°. Both were invisible in a screenshot. Both were wrong.

The version after that drew five traces on brand angles, each with the chevron head the manual specifies, each stopping short of the void with nothing to land on. It was correct by every rule in the manual and it was still the wrong drawing: five arrowheads pointing at an empty circle is a picture of arrival, and arrival is the half of the sentence that does not happen. The arrows are gone.

What is left is what the sentence actually needs. The lattice is both 2:1 families and the level step, at 1-4, the line type the manual assigns to a lattice. Standing on its vertices is the sensor field: sixty-nine glows, wider than the spacing so they merge where they crowd. Each is a hot core in a cool halo — which is this system's one ramp used as a glow rather than as a surface: lime is the centre, Glas is the pale ring, CF-Grau is what both fall away to. Two ramps serve all of them, the hot one carrying the full lime leg with the oklab waypoint at 19 % of it; which one a sensor gets is its own intensity, and radius and opacity do the rest.

The middle is quiet, not missing. A hole was cut here once — first a ring and a nucleus, then a disc of nothing — and it read as a white circle laid over the drawing. An edge is the one thing a field of glows must not have. The instruments in the middle are floored rather than culled now: small, cool, halo only, rising to hot as the field spreads and falling away again at its rim. The sentence still gets what it needs — nothing is found at the centre — out of intensity instead of out of absence, and nothing in the drawing is cut. scripts/check-void-departure.py holds it as a measurement rather than as a shape: the root must leave from the quietest fifth of the field, and it leaves from 0.00 of ink against a bar of 0.10.

On the landing page the field then collapses into the line: every glow travels to the root's departure and goes out as it arrives, nearest first, while the root grows downward out of the point they are arriving at. The measurement becomes the measurement's route.

The figure also takes itself apart on the way out. The same view timeline that assembles it on entry runs the mirror on its exit phase, in reverse order of arrival: the sensor field collapses into the departure point, and the lattice, which is ground and does not scatter, goes dark last. One rule at every scale, which is what keeps the scatter the same drawing coming apart rather than debris. Each part's exit vector and slot live in the markup as --sx/--sy/--scat-in; the component only says that parts scatter. Scrubbed, not played: scroll back up and it reassembles. On the landing page the scroll that runs this is the same scroll that draws the process frame in below, so the section hands off to the one that answers it.

<div class="cf-statement">
  <div class="cf-statement__figure">
    <svg class="cf-iso" viewBox="0 0 1200 288"
         preserveAspectRatio="xMidYMid slice" aria-hidden="true">…</svg>
  </div>
  <div class="cf-statement__text">
    <h2 class="cf-statement__title">Tausende Sensoren erzeugen Daten…</h2>
    <p class="cf-statement__body">Wir machen mehr aus Ihren Daten…</p>
  </div>
</div>

Value table

The "wer wir sind" block on Über uns. A ruled field, one row per idea, each row an isometric figure beside a short run of paragraphs. The figure cell is a fixed 15 rem once there is room; below that the row folds and the figure sits above the copy with the divider turning from vertical to horizontal.

The figure cell is square, and that is what sets the row height. 15 rem across and 15 rem down, so a row is 240 px tall unless its copy needs more — which is how the mockup draws it: three rows of very unequal copy, all three 240 px to the pixel. One custom property, --value-figure on .cf-value-table, carries both numbers, because they are one decision and two literals would drift. The minimum applies only inside the container query; below 48 rem the figure is a band above the copy rather than a column, and 240 px of it there would be a wall.

<ul class="cf-value-table" role="list">
  <li class="cf-value-row">
    <div class="cf-value-row__figure">
      <svg class="cf-iso" viewBox="0 0 160 120" width="140" aria-hidden="true">…</svg>
    </div>
    <div class="cf-value-row__body">
      <p>Als echte Daten-Nerds bauen wir seit 2022…</p>
      <p>Wir sind eine Datenboutique aus Konstanz…</p>
    </div>
  </li>
</ul>

Stat

One value set large in mono with its unit underneath: "10 Mitarbeiter", "seit 2022". Usually a number — the tabular figures exist for that case — but a short token like a region code sets the same way. Used for a fact worth stopping on, not for decoration: a row of four invented metrics reads as filler, and the brand does not do filler.

It is the smallest of the four blocks and the one most likely to outgrow this page. If the system gains charts, comparisons or a diagram language, this section is where that work starts — extend it rather than opening a second page beside it.

<div class="cluster">
  <p class="cf-stat">
    <span class="cf-stat__value">10</span>
    <span class="cf-stat__label">Mitarbeiter</span>
  </p>
  <p class="cf-stat">…</p>
</div>

Hint

The mono parenthetical from the mockups — "( klick um scroll zu simulieren )". It is an instruction about the interface, not a piece of the content, and it is the only place the system uses brackets as ornament. Centred, secondary, small.

<p class="cf-hint">Klick um Scroll zu simulieren</p>

Choosing between them