Reference

Source Material

The designer's originals that this system was built from. They are here so the system can be checked, extended and argued with without needing the full 194 MB archive — when the implementation and the manual disagree, this is where you look.

These are references, not assets. Nothing on this page ships to control-f.de. The manual plates are compressed renders of the original PDFs; the illustration files are the real vectors and are meant to be opened in a vector editor, not linked from a page.

Colour

Implemented in Foundations · Colour.

Manual plate: tint and shade ramps — **Schattierungen**tint and shade ramps

Manual plate: colour dosage — **Dosierung**how much of each

Manual plate: colour in application — **Anwendung**colour with type and angles

The Schattierungen plate has one misprint. On the neutral column the 70 %-white row is painted #F1F1F1 but labelled #D9D9D9. Every other swatch on the plate — all four accent columns, all seven rows — matches its label. The system follows the paint, because it is the value the arithmetic gives. Reasoning in Foundations · Colour.

Typography

Implemented in Foundations · Typography.

Manual plate: the three typefaces and their roles — **Übersicht**three typefaces, three jobs

Manual plate: Publica Sans — **Publica Sans**primary — 9 weights

Manual plate: Geist — **Geist**secondary — 9 weights

Manual plate: Geist Mono — **Geist Mono**tertiary — 9 weights

Grid

Implemented in Foundations · Layout & Grid and Geometry & Lines. The Isometrie-Raster plate draws the lattice as a ground with objects standing on it, and that half of it is Foundations · The Field.

Winkelraster63.43° / 45° / 26.57° / 90°

Manual plate: the recursive subdivision grid — **Teilungsraster**recursive halving

Manual plate: the subdivision grid applied to an article list — **Anwendungsbeispiel**the blog grid, in the manual

The last plate is the origin of the blog grid. The subdivision system was already drawn against an article list in the manual — the component in Blog Grid is that plate turned into markup, not a new idea.

The first plate makes a claim the drawing cannot show. Its caption says the recursive system "kann als Konzept für interaktive UI-Elemente oder Menüstrukturen genutzt werden" — a use no plate in the manual illustrates, because a book cannot draw a layout that answers to a reader. Subdivision Field is that sentence built: the same halving series, with which cell stands at its head handed over to whoever is looking at it.

Shape language

Implemented in Geometry & Lines, Materials and — for the last two plates — Illustration.

Manual plate: the four line types — **Linien**solid, 2-1, 1-2, 1-4 — and, in the lower half, one object drawn at all four: the presence ladder

Manual plate: fills and stroke weights — **Füllung und Linien**1 / 2 / 4 / 8 pt

Manual plate: the six material layers — **Materialien**the six layers

Icon Systemfoundations/iconography.html

Manual plate: contour illustrations — **Kontur-Illustrationen**foundations/illustration.html

Manual plate: illustration example with construction angles — **Illustration (Bsp.)**foundations/illustration.html

The last two plates now have a chapter of their own. They set the illustration vocabulary — the lattice, the contour, the single light — and Foundations · Illustration is where that vocabulary is stated as rules and checked against the four objects that ship.

The icon plate is implemented in full. All four of its rows — the solid weight, the line weight, the eight objects and the nine instruments — are drawn in assets/js/cf-icons.js and laid out against the plate row by row on Foundations · Iconography. Two glyphs in the set are not on the plate, cf-plus and cf-minus, and they are named there. Do not import a third-party icon library: if a mark is missing, this plate is the brief.

Logo

Implemented in Foundations · Logo. Production SVGs are in assets/img/logo/.

Konstruktionthe X unit, 8X and 10X

Variantensymbol, wordmark, lockups

Schutzzone2X critical, 4X recommended

Rahmensquare, isometric, app icon, circle

Page mockups

The two designed pages, full length. These are what Landing Page and Über uns are measured against — open both side by side when changing a component that appears in them.

Landing Page

Über uns

Process illustrations — source vectors

The four process cards as Figma exported them, text outlined, at the original 1440 × 912. This is the geometry the final illustrations should be cut from: the isometric construction, the gradient stops and the dash patterns are all in here at full precision. Path coordinates have been rounded to two decimals to keep the files manageable — visually identical, roughly 10 % smaller.

Card	File	Object
01 Discovery	`01-discovery.svg`	stacked cuboids
02 Datenfundament	`02-datenfundament.svg`	layered diamonds
03 Weniger Ausfälle	`03-weniger-ausfaelle.svg`	solid of revolution
04 Mehr Leistung	`04-mehr-leistung.svg`	sphere with orbit

Figma spec dump

figma-process-card-spec.css.txt — the raw CSS Figma emits for the process card: every padding, gap, font size and gradient stop as the designer set them. This is the tie-breaker for exact values, and it is where the 132.36° gradient angle and the 11 px label size come from.

The full archive

Everything else lives outside the repo in control_f_website_new_design/, next to this checkout. It is gitignored — 194 MB of manual PDFs, the master logo artwork, uncompressed mockups, the original photography and the hero video.

control_f_website_new_design/
├── 01-brand-manual/     41 plates in 7 chapters
├── 02-logo/             8 production SVGs + master PDF
├── 03-mockups/          full PNG + SVG exports, process cards
├── 04-photography/      portraits / casual / group, each colour + b/w
├── 05-motion/           control-f_pattern-motion-2k.mp4/.mov (master)
└── 99-archive/          superseded prototypes

Its README.md indexes the whole thing and maps each chapter to the page here that implements it.