roger.

Core Interactions

The feel of a clear transmission. Every tap is decisive, every response is received.

Every colour has one job. Consistent across every screen.

Orange — Action & Signal

CTAs, recording states, the "roger." moment, primary progress. Orange means do something or something happened. Used sparingly so it always commands attention.

Blue — Information & Context

ATC content, frequency data, informational badges, secondary stats, links, airspace references. Blue means read this or this is context. The calm counterweight to orange.

Ink — Structure & Text

Body text, UI chrome, dark surfaces, secondary controls. Ink is the backbone — always present, never competing.

Green — Success

Correct answers, completed states, passed exams. Only appears after a positive result.

Red — Retry

Incorrect answers, errors, connection issues. Never punitive — always paired with a path forward. (Augenhöhe)

Press and hold to transmit. Release to send.

Zum Sprechen halten

For text-input fallback mode: tap to start, tap to stop.

Every button press sends a signal. The orange flash is the "roger." — transmission received.

PRIMARY — THE SIGNAL

SECONDARY — CALM ACTIONS

FULL-WIDTH — DASHBOARD CTA

DISABLED

The voice of air traffic control. Plays with radio-quality audio styling.

«Delta Echo Alpha Bravo Charlie, München Tower, Piste zwei sechs Links, Wind zwei vier null Grad acht Knoten, Landung frei.»

Funk

Augenhöhe: never punish, always guide. The animations reward action, not just correctness.

Readback korrekt — Piste, Freigabe und Callsign stimmen.

Fast richtig

Die Pistenbezeichnung fehlt im Readback.

Erwartet: Piste 26 Links, Landung frei, D-EABC

Nochmal — kein Stress

Das Readback weicht vom Standard ab. Hör dir die Anweisung nochmal an.

After you release PTT, this shows what's happening with your recording.

Senden

Empfangen

Bewerten

Fertig

Blue carries information. It never competes with orange for attention.

Readbacks müssen die Pistenbezeichnung und die Freigabe enthalten.

TWR 118.700

ATIS 128.025

GND 121.725

TAGS: BLUE = INFO, ORANGE = ACTION

MODUL 3 12 FRAGEN ~8 MIN FÄLLIG NEU

STATS: BLUE = INFORMATIONAL METRICS

86% Genauigkeit

12 Fragen

8m Dauer

LINKS & SECONDARY ACTIONS

Was ist ein Readback? BZF-Prüfungsordnung

Brief, calm confirmations. Never interrupt the flow.

Foundations

Design tokens and brand primitives for the roger. design system.

Orange — Primary

Accents, CTAs, highlights, the period. The signal colour.

100%#FC4C07

90%#FC5E20

80%#FD7039

70%#FD8251

60%#FD946A

50%#FEA683

40%#FEB79C

30%#FEC9B5

20%#FEDBCD

10%#FFEDE6

Ink — Black

Text, contrast, UI elements, dark surfaces.

100%#1E1E1E

90%#343434

80%#4B4B4B

70%#626262

60%#787878

50%#8F8F8F

40%#A5A5A5

30%#BCBCBC

20%#D2D2D2

10%#E9E9E9

Blue — Secondary

Luftraum / airspace — information, links, zones.

100%#33A6CD

90%#47AFD2

80%#5CB8D7

70%#70C1DC

80%#85CAE1

50%#99D3E6

40%#ADDBEB

30%#C2E4F0

20%#D6EDF5

10%#EBF6FA

White — Surface

Cards, surfaces, negative space.

100%#FFFFFF

Nunito Sans + Bevan · Major Third (1.250) · Base 16 px

Display · Bevan 400 · 61/68 Display

H1 · Bevan 400 · 49/56 Heading 1

H2 · Nunito Sans 600 · 39/48 Heading 2

H3 · Nunito Sans 600 · 31/40 Heading 3

H4 · Nunito Sans 600 · 25/32 Heading 4

H5 · Nunito Sans 600 · 20/28 Heading 5

H6 / Eyebrow · Nunito Sans 500 · 16/24 · +1% Heading 6 — Eyebrow

Body L · Nunito Sans 400 · 20/30 Body Large — for introductions and lead paragraphs.

Body · Nunito Sans 400 · 16/24 Body — the standard running text for all content.

Body S · Nunito Sans 400 · 14/20 Body Small — secondary text and dense UI.

Button · Nunito Sans 600 · 16/16 · +1% Button Label

Tag / Overline · Nunito Sans 500 · 12/16 · +8% · Caps TAG · OVERLINE · FLUGFUNK

Caption · Nunito Sans 400 · 12/16 · +2% Caption — image captions, footnotes & legal

Quote · Nunito Sans 200 · 31/42 «Quote — Lorem ipsum dolor sit amet.»

4px xs

8px sm

12px md

16px base

24px lg

32px xl

48px 2xl

Border Radius

8px

12px

16px

pill

Atoms

Single-purpose building blocks.

FLUGFUNK BZF I INFO EXPERT BESTANDEN OPTIONAL

3 12 99+

Callsign

Frequency Tower frequency — read only

Your Readback

Difficulty

Voice input enabled Radio noise simulation

BZF II (Deutsch) BZF I (Deutsch) BZF E (English)

Quick Round Module Training Exam Prep

BZF II Progress72%

Session Score5 / 8

Weak Spots Reviewed100%

Processing readback...

Molecules

Composed components combining atoms into functional units.

BZF II MODUL 3 Frage 4 / 12

ATC

München Tower

«Delta Echo Alpha Bravo Charlie, München Tower, Piste 26 Links, Wind 240 Grad 8 Knoten, Landung frei.»

Your Readback

Korrekt!

Dein Readback war vollständig und korrekt. Piste, Landefreigabe und Callsign stimmen.

Fast richtig

Dir fehlt die Pistenbezeichnung im Readback. Bei Landefreigaben muss die Piste immer bestätigt werden.

Erwartet: Piste 26 Links, Landung frei, D-EABC

Nicht ganz

Dein Readback weicht deutlich vom erwarteten Standard ab. Versuch es nochmal — kein Stress!

Anflug & Landung

Approach and landing phraseology

Rollverkehr

Taxi and ground movement

Notverfahren

Emergency procedures

142 Sessions

86% Accuracy

7 Day Streak

23m Avg. Session

Core Interactions

Colour Roles in UI

Push-to-Talk — The Heart of roger.

Inline Recording Button

Transmission-Grade CTAs

ATC Transmission Bubble

Grading Responses

roger.

Fast richtig

Nochmal — kein Stress

Voice Processing Pipeline

Blue in Action — Info & Context

Notifications

Foundations

Colour Palette

Orange — Primary

Ink — Black

Blue — Secondary

White — Surface

Type Scale

Spacing & Radius

Border Radius

Atoms

Button Variants

Tags & Badges

Form Elements

Toggles & Checks

Progress Indicators

Molecules

Exercise Card

Feedback Card

Korrekt!

Fast richtig

Nicht ganz

Module Selector

Anflug & Landung

Rollverkehr

Notverfahren

Stats & Metrics

Organisms

Top Navigation

Bottom Navigation

Session Complete

Session abgeschlossen

Empty & Loading States

Noch keine Sessions

Screens

Dashboard / Home Screen

Guten Morgen, Jan.

Anflug & Landung

Rollverkehr

Figma Reference

Colour System

Typography System

Asset Library

UI Elements

Brand Identity Sheet

Social Media Post

Instagram Post

Mobile App

Flyer Front