Control-F GmbH · Version 1.0 · 2026

Design System

The web implementation of Brand Design Review 2. Colour, typography, grid, shape language and every component of the new Landing Page and Über uns page — as tokens, CSS classes and copy-paste markup.

The idea in four sentences

Control-F should look like a technical drawing, not like an agency website. The site stands on CF-Grau, not on white — a data space, not a sheet of paper. Everything is drawn with 1 px contours and constructed in 2:1 isometry; corners are square, never rounded. Lime is light — not a surface, and not ink: it marks the one place where something happens, and nothing else.

If you take away one rule: less fill, more contour. When in doubt use a line instead of a box, a mono label instead of a heading, and lime once per screen.

Foundations

01 Colour 7 core colours, 4 ramps of 7 steps, a 9-step neutral scale and the dosage rule. 02 Typography Publica Sans, Geist, Geist Mono — who does what, plus the full scale. 03 Layout & Grid 1280 container, 12 columns, a 4 px space scale and the recursive subdivision grid. 04 Geometry & Lines 2:1 isometry, the four brand angles, four line types, four stroke weights. 05 Iconography 43 glyphs on the isometric keyline in two weights, one sprite, a contour that stays 1 px. 06 Materials The six layers from base grey to light layer, and the order they stack in. 07 Illustration The lattice, the five layers, one light per object — and how to draw the next one. 08 Logo Variants, clear space, frames, and the arrow glyph derived from the symbol. 09 Photography Studio portraits, colour and b/w treatment, crops. 10 Motion Four durations, three curves, and what is allowed to move at all. 11 Mobile One layout narrowed: what happens at every width down to 320, measured. 12 Page Transitions Navigation drawn rather than swapped: one raked edge, the foil riding it, the chrome holding still. 13 The Field The isometric lattice as a surface, lit where the reader is — and the wallpaper it makes. 14 The Found State The brand is named after find-in-page. A match is a lattice cell in contour; the one you are standing on has the light on. 15 The Line of Sight A foil is head-on only when you are square to it. The system read one of those two axes; this is the other, and the rule for what may move with it.

Components

Buttons Primary with the lime gradient, glass, outline, solid, ghost. Navigation Logo plate left, link plate right, mono labels, 2 px corners. Breadcrumb Where the page sits, in mono. The separator is a hairline on the steep isometric, not a slash. Section Header Label + counter + hairline. The connective tissue of every page. Statement & Value Table One claim beside an object, several in a ruled field, a number, an aside. Plot A number drawn in space. Contoured columns on the isometric lattice. Annotation Naming a part of a drawing. A leader that is one lattice step, a note on its own rule. Process Card The four-part “what we do” sequence. Info Card A field of copy on a plate of glass. The material calms the lattice under it; the title takes the ink foil. Accordion / FAQ Ruled rows on <details>, works without JS. Blog Grid The subdivision grid as an editorial layout, with a timeline axis. Subdivision Field The same grid with its hierarchy handed to the reader. Point at a cell and it takes the half. Search & Results The surface the company is named after. Every answer in contour, and the light waiting on the page you land on. Vacancy One open position on a hairline, with the four facts every candidate asks for. The search result's drawing, declared once. Pagination The section header read backwards: rule on top, counter left, controls right. Error & Empty State 404, 410, 500 and the filter that matched nothing — one block, and a ruled list of ways out. Arrival & Progress Content on its way, drawn as itself one rung down the presence ladder — and the rail that climbs back up. Scroll Cue A label, a hairline and the keep-reading chevron, for the one hero that ends in air. Three passes of ink, and then it stops. Article & Prose The reading page: index, byline, and running text set by element. Table Ruled rows, nothing vertical, tabular figures. A scroll box you can reach with a keyboard. Team A strip for the landing page, a grid for Über uns. Forms Underlined fields, mono labels, no boxes. Footer Black, isometric logo object, one CTA. Consent The banner and the settings dialog, built for TDDDG § 25.

Patterns

Landing Page Hero → statement → process → partners → FAQ → blog → team → footer. Expertise Vier Felder, vier isometrische Objekte: Maschinenbau, Großanlagen, Erneuerbare, Flotten. Über uns page Title → values table → team grid → footer. News overview Header → topic filter → the archive grid → pagination → footer. News — topic filter The same archive one chip narrower: »Alle« turns back into a link, and every pagination step stays inside the filter. One page per topic is generated from this one. Suche — results Six answers standing on six rules. Follow one and the phrase lights up where it lives. Suche — 0 Treffer The same route with an empty answer: a 200, not an error — the typo kept in the field, the corrected term one press from the six results. Blog article Header → index + prose → tail → related → footer. Karriere page Header → why here + the frame → the register of openings → what an application needs and what it doesn't → footer. Stellenanzeige One opening, one URL: breadcrumb → task + the fifth and sixth fact → requirements → apply → the other three. The page the JobPosting markup is allowed to sit on. Karriere — 0 Stellen The same route between two openings: the zero where the four stands, the register's empty block carrying the page's one lime action, and the sections that never read the list unchanged. Kontakt page Header → form + contact list → what happens next → footer. Kontakt — Bestätigung Where the form's 303 lands: what arrived and when, what happens next, and the phone for what cannot wait. noindex. Bewerbung page The application form: header → CV, cover letter and one trace of the applicant's work, with three file fields → procedure → footer. Answered by the same Worker as Kontakt. Bewerbung — Bestätigung Where the application form's 303 lands: what happens next, and what becomes of the documents that were just uploaded. noindex. Datenschutz page The address the consent banner sends people to. Header → index + twelve sections → the entry inventory at #cookies → footer. Impressum page The provider identification § 5 DDG asks for, as a list of named facts rather than a block of prose. 404 page The error, the object with one unit missing, and four ways out. Site furniture unchanged.
The documentation is English, the page copy is German. Landing Page and Über uns carry the real marketing copy from the Figma mockups, which is the language the site actually ships in. Translating it here would invent content that does not exist. The other thirteen pages have no mockup — the designer drew two — so their copy is written in the same voice and marked as placeholder. Everything that explains the system — headings, labels, rules, comments — is English.
Every one of the sixteen ships twice. patterns/en/ is the English edition, and it is generated: scripts/build-i18n.py builds each page from the German pattern beside it and replaces only the words, from i18n/en.json. Markup, classes, comments, ids and the page-local <style> and <script> come through byte for byte, so a specimen and its translation are the same specimen — which is the point: an edition hand-written a second time would be a generation behind by lunchtime, with five routines editing the landing pattern hourly. Do not edit a page under en/; edit the German page or the catalogue and rebuild. The reader's way between the two is the EN / DE plate at the top right of the bar — Navigation.

Reference

Source Material The designer's originals — manual plates, page mockups and the illustration source vectors — next to the pages that implement them.

Including it

Three stylesheets, in this order. docs.css is not one of them — that is this documentation only.

<link rel="stylesheet" href="/design-system/assets/css/tokens.css">
<link rel="stylesheet" href="/design-system/assets/css/base.css">
<link rel="stylesheet" href="/design-system/assets/css/components.css">

And two scripts. Both ship, both are dependency-free and neither creates any markup of its own — the page is still HTML and CSS, and each file only decides when something already in it is shown. This list used to be empty, which is how a page built from the system arrived with a menu button that did nothing. 

<!-- in the <head>: it writes the attribute that folds the nav, and it has to
     be there before the first paint -->
<script src="/design-system/assets/js/cf-nav.js"></script>

<!-- at the foot of the body -->
<script src="/design-system/assets/js/cf-consent.js"></script>

cf-nav.js is the menu disclosure on the phone layout; cf-consent.js is the consent banner and its settings dialog, which the site cannot legally do without. Three more — cf-icons.js, cf-stream.js and cf-sight.js — are optional and additive; the README says what each one adds and what is lost by leaving it out.

Open before launch