The page as
a circulatory system.
Systole is the demo website of a fictional cardiology practice in Frankfurt am Main. The page is red and the type is white; in front of the name beats a heart of glass through which the blood in the chambers can be seen. Its aorta and vena cava leave the cover and continue as an artery and a vein over the whole page, and with every beat a pulse runs down the artery.
A demo, not a client
Systole is not a real practice and has no patients, so we publish no outcome figures for it. Like our other demos, every page carries the bar “Demo-Website von FIB Consulting · fiktive Praxis”, search engines do not index it, and the legal notice names the actual operator, FIB Consulting. The address, Beispielallee 3 in Frankfurt, is fictional, and the phone number is a drama number from the range the Bundesnetzagentur reserves for media productions, so it is assigned to no one. The name comes from systole, the phase of the heartbeat in which the ventricles contract and push the blood into the arteries.
Red, white and a heart of glass
The brief was a red page, white type, a beating heart of glass and panels of liquid glass. The cover therefore works like Fimbria's: the name across the whole width and, in front of it, an object instead of a photograph, here a heart of glass that beats 60 times a minute and refracts the letters behind it, our own model computed in the browser. Through the glass you see the blood in the atria and ventricles, red in the left heart and blue in the right, and the chambers contracting with every beat. The aorta and the vena cava leave the cover downwards and go on as glass vessels over the whole page: an artery down the right edge, a vein up the left edge, a capillary bed above the sections of the home page and several sub-pages, and with every beat a pulse runs down the artery. An ECG strip and the pressure curve of an artery, between 120 and 80 mmHg, run in time with the heart. Panels, appointment slots and secondary buttons are translucent glass on the red; the main buttons are white. The text is set in Instrument Sans, the headings condensed to 87.5% of their width, the labels in IBM Plex Mono, both under the SIL Open Font License and served from our own server. No serif and no italics in headings.


The heart in 3D
On the 3D page the model has three views. Aufbau: labels with the Latin names, from the aorta to the ventriculus sinister; move the pointer over the model and the part under it is named. Blutweg: blood cells travel through both circuits, blue from the venae cavae through the right heart into the pulmonary artery, red from the pulmonary veins through the left heart into the aorta; the aortic valve opens with every beat, and a round inset shows it from above. Erkrankungen: six conditions that change the model; for the heart attack and atrial fibrillation the ECG strip below it changes too. Heart attack: a plaque tears, a clot closes the anterior branch of the left coronary artery, the anterior wall turns grey, and the ST segment rises in the ECG. Coronary heart disease: plaques narrow the coronary arteries, visible as constrictions. Atrial fibrillation: the atria quiver, the ventricles beat irregularly, the P waves are missing. Aortic valve stenosis: the calcified valve opens only a slit and the wall of the left ventricle thickens. Heart failure: a dilated, weakly beating left ventricle. High blood pressure: the wall of the left ventricle thickens. Each condition has its sources, and the page says plainly that the model is schematic and explains rather than diagnoses; anyone who suspects a heart attack is sent straight to 112.
Facts with sources
Every page with medical content lists its sources at the foot, among them the current ESC guidelines on atrial fibrillation and blood pressure (2024), valvular heart disease (ESC/EACTS 2025) and heart failure (2026). Blood pressure is classified according to the 2024 ESC guideline, for readings taken in the practice: below 120/70 mmHg non-elevated, 120–139/70–89 “elevated” (a category of its own since 2024), from 140/90 hypertension; at home the threshold is 135/85, averaged over seven days of morning and evening readings. Each examination comes with its duration and practical advice, from the echocardiogram (10 to 20 minutes, no radiation) to the long-term ECG (most recorders are not waterproof, so patients shower beforehand). The emergency page puts 112 first, lists the warning signs named by the Deutsche Herzstiftung, says plainly that it is not a test and replaces no call, and shows the three steps of resuscitation taught by the German Resuscitation Council: check, call, compress, 100 to 120 times a minute, 5 to 6 centimetres deep. Costs: statutory insurance with the card, private patients billed under the GOÄ, costs in text form before self-pay services (§ 630c BGB) and no check-up packages without a reason. No superlatives, no promises of results and no symptom checker.
Booking that ends with a ticket
Patients choose the reason, from the first appointment (45 minutes) to fitting a long-term ECG or blood pressure recorder, then the day and the time, and leave only contact details; the form asks them not to mention complaints, findings or medication. The confirmation is a holographic ticket, white with a rose-and-violet sheen on the red page, whose stub tears off into a calendar entry with a neutral title. In the demo nothing is sent.
The same standard as the live sites
Systole has the same foundation as our other websites: an absence notice worded like the sign on the practice door (here for a training course, with 112 and 116 117 for the days the practice is closed), opening hours with a live status and forms without health data. Without a capable graphics chip the cover shows a still image of the heart and the 3D page a still image per view; the vessels and the ECG strips do not need one and run in every browser. If the system is set to reduced motion, the heart, the vessels and the strips stand still. The site sets no cookies and does no visitor tracking, and the automated accessibility check (axe) finds no errors on the pages.
Try it (in German): Systole · the 3D model · blood pressure · booking with the ticket.
Planning a website for your practice? See what our websites for doctors include, or get in touch.
A website that explains more than text.
Clear, factual and within the rules for healthcare advertising. Tell us what your practice needs.
Get in touch →