Geometry & Lines — Control-F Design System

2:1 isometry

A square rotated 45° and squashed to exactly 50 % of its height. Mathematically a dimetry, practically the standard for digital graphics: every edge lands on a whole pixel, so nothing shimmers.

Square

+ rotate(45deg)

+ scaleY(.5) = the tile

The 2:1 is the tile's width to height, not the ratio of its edges. All four edges stay equal — a rhombus, not a slab — and each of them lands on 26.57°, which is where the brand angles in the next section come from. On a 200 px square: four edges of 158.11 px, a bounding box of 200 × 100.

--iso-transform: scaleY(0.5) rotate(45deg);

/* as a utility */
.iso { transform: var(--iso-transform); transform-origin: center; }

The order is the whole transform, and it was the wrong way round.

A CSS transform list composes right to left in the element's own axes, so rotate(45deg) scaleY(0.5) squashes first — along the square's own vertical, turning it into a 2:1 rectangle — and then tilts that rectangle 45°. What came out was a slab with two long edges and two short ones, which is what this demo used to show. An isometric projection squashes along the screen's vertical, so the rotation has to happen first.

Order	Edges	Edge angles	Bounding box
`rotate() scaleY()`	200 / 100 / 200 / 100	±45°	1:1
`scaleY() rotate()`	158.11 × 4	±26.57° / 63.43°	2:1

The giveaway is the third column of the first row. The old value produced no 26.57° anywhere on the shape, while the section below it says the 2:1 ratio is exactly where that angle comes from — a token contradicting its own documentation two headings later.

The four angles

The 2:1 ratio produces two brand angles; 45° and 90° are the neutral complements. Every diagonal on the site — illustration line, gradient axis, cut edge — uses one of these four values.

Token	Value	Where it comes from
`--angle-b`	26.57°	the tilt of the isometry (arctan 0.5)
`--angle-a`	63.43°	its complement (90° − 26.57°)
`--angle-neutral`	45°	neutral diagonal
`--angle-square`	90°	right angle — the default for layout edges

Isometric objects

The brand's standard building block: stacked cuboids, top faces in CF-Grau, edges as 1 px contours, corners marked with dots. Exactly one element carries the lime gradient — it is the place where something happens.

The four process illustrations on the landing page are variations of the same principle: a stack (Discovery), layers (Datenfundament), a solid of revolution (Predictive Maintenance), a sphere (Asset Performance). They ship as SVG, not as images — the contour has to stay 1 px at every width.

Line types

Four defined types. Within one context the stroke weight stays constant; on screen 1–2 px is the recommendation.

solid · .rule · default divider, frames

dashed 2-1 · .rule--dashed-2-1 · secondary axes

dashed 1-2 · .rule--dashed-1-2 · construction lines

dashed 1-4 · .rule--dashed-1-4 · dividers inside panels

The plate reads twice. The four above are the top half of Formsprache > Linien: four specimens, equals, each with a use. Its lower half draws one object four times on a single axis, solid and small at the left and 1-4 and huge at the right — the same four types read as one axis of presence rather than as a set. That second register is the presence ladder, and it only becomes legible when one object is drawn more than once: a thing that is not here yet is the thing that is, one rung down. → tokens.css 8a

Why not border-style: dashed. CSS does not control the dash-to-gap ratio — every browser draws its own. The four types are therefore built with repeating-linear-gradient, and with stroke-dasharray in SVG.

A type is a ratio and a period, and in an illustration the period is device pixels. .cf-iso puts non-scaling-stroke on every contour, so a stroke-dasharray there is measured on the screen and not in the drawing — which is what keeps a ghost's 1-4 dash a 1-4 dash at any size, and what makes the three token values the whole of the rule: --dash-2-1 4px 2px, --dash-1-2 2px 4px, --dash-1-4 1px 4px. Getting the ratio right at another unit is not the type: 1 2 and 3 1.5 are the 1-2 and 2-1 ratios at periods this system does not have, and both shipped inside a drawing on a designed page until scripts/check-line-types.py counted them. Where a stroke is not non-scaling the numbers belong to the frame instead — the icon keylines are drawn at 0.25 units in a 24-unit box — and only the ratio is held.

Stroke weights

1 px · --stroke-1 · the default for all UI contours

2 px · --stroke-2 · focus ring, emphasis

4 px · --stroke-4 · diagrams, accent edges

8 px · --stroke-8 · large format only, never in UI

Where a line may go

The four types above say what a line looks like. This says where it is allowed to be, which turns out to matter more — a system this dependent on hairlines gets generic the moment one of them is drawn for effect rather than for a reason.

Every line in this system is one of exactly three things.

Kind	Is	Examples
Edge	the boundary of a surface — it closes something	grid and table cells, a figure's frame, a button contour, every contour in an illustration
Division	one thing ends and another begins, with content on both sides	the rule under an `h2`, ruled table rows, `.cf-prose hr`
Label rule	a mono label with the hairline running out of it to the far edge — the line and the word are one mark	`.cf-section-header`, the article index title, `.cf-prose__note-tag`, `.cf-info-card__ask-tag`

A line that is none of the three is decoration, and there is one piece of decoration that turns up again and again because every UI kit ships it: the bar beside a block — a rule down the left side of a quote, a callout, a note.

It fails all three tests at once. It is not an edge, because the block has three other sides and none of them is drawn. It is not a division, because there is nothing on the other side of it. And it carries no label, so it says only "this bit is different" without saying how. It is the one mark on a page that belongs to no structure — which is exactly why it is the default in generated interfaces, and why a page that uses it reads as generic however carefully everything else is drawn.

Faustregel. Wenn sich der Zustand einer Anlage nicht aus dem Rohdatenstrom rekonstruieren lässt, rekonstruiert ihn auch kein Zwilling.

Don't · a bar beside the block. No edge, no division, no label.

Faustregel

Wenn sich der Zustand einer Anlage nicht aus dem Rohdatenstrom rekonstruieren lässt, rekonstruiert ihn auch kein Zwilling.

Do · a label rule. Marks the block and names it in one mark.

Both blocks above are the same aside on the same sunken surface. The difference is whether the mark that distinguishes it is doing any work. This is not a preference between two looks: the left one could be any site, and the right one is the same construction as every section header on this one.

The same test applies to objects

A lone mark parked at one side of a block fails for the same reason a bar does — an icon in a note's left gutter, a single glyph beside a heading, one small drawing set into the margin of a paragraph. If it is not an edge, a division or a label, it is decoration, and decoration in a technical drawing is noise. The system's objects earn their place a different way: they are the subject of a figure (Illustration), or they are a number (Plot), or they are a control's own glyph (Iconography).

What changed when this rule was written down. Three components were breaking it. .cf-prose__note carried a 2 px bar down its left side and now opens with a label rule instead. .cf-quote carried a 1 px one and now has no rule of its own at all — the words go one step up the scale and the attribution closes the block under a hairline, which is what every other caption in an article already does. → Article & Prose

The third was found later and is the reason this note is worth re-reading rather than filing: .cf-info-card__ask, the question on each Expertise card, carried the same 2 px bar with the same rationale written into its own comment — ruled rather than boxed. Both halves of that sentence sounded like this system and only one of them was: not boxed is right, and a bar is not the rule that replaces the box. It opens with the label rule now, like the other two. → Info Card

Two-of-four borders on a grid are an edge, not a bar. .cf-blog-grid, .cf-team-grid and .cf-subdiv each set border-top + border-left on the container and the other two on the cells, so the finished field carries exactly one hairline everywhere instead of a doubled 2 px seam down the shared edges. Those declarations look like the thing this section bans and are the opposite of it: every one of them is closing a surface. The test is what the finished drawing does, not what a single declaration says.

Corners

Two corners, and neither of them is a pill. Structure is square (--radius-none); anything that reads as an object of its own takes a 2 px corner (--radius-sm). Round avatars (--radius-full) are the single curve in the system, because a circle cannot be expressed as 2 px.

--radius-sm · 2 px · objects

--radius-none · 0 · structure

--radius-full · avatars

Where the 2 px comes from

Counted off the Figma export rather than read off the mockup JPGs. Across landing-page-full.svg and ueber-uns-full.svg there are 170 <rect> elements. Ten carry a radius. Every one of those ten is rx="2":

Element	Drawn at	Radius	A pill would be
Logo lockup	152.09 × 35.25	`rx="2"`	17.6
Navigation bar	417 × 41	`rx="2"`	20.5
Hero CTA	189 × 48	`rx="2"`	24
Footer CTA	396 × 46	`rx="2"`	23
Über-uns CTA	228 × 46	`rx="2"`	23
Team portrait ×5	200 × 300	`rx="2"`	100
Blog container	1277 × 524	`rx="2"`	262

The other 160 rects are square. So the split is not a matter of taste: what carries the 2 px is a control, a plate, a photo — something with a body of its own. What stays square is structure — hairline frames, section rules, and the grid cells that are drawn by their neighbours' borders rather than by a box of their own.

There was a --radius-pill and it was wrong. It sat at 999 px and was applied to the logo lockup and the nav bar. That was a reading of the compressed mockup JPGs, where a 41 px-tall black bar with 2 px corners genuinely does look like a capsule. The vectors settle it, and the token is gone. Do not reintroduce it: if a control needs a corner, the corner is 2 px.

2 px is small enough that it does not read as “rounded” at all. It reads as a corner that has been cut rather than left raw, which is the whole intent — and it is why the system can describe itself as rectangular while nothing in it is actually sharp.

The one exception in the implementation

The blog container is rx="2" in the export and square in the code. The grid has no outer box to round: it is drawn as border-top + border-left on the container with the other two edges on the cells, so the four corners belong to four different elements and a radius on the container would round one of them. Documented rather than faked.