roger.

ATC Trainer · Design System

STANDBY

Markenkompass — Antrieb · Augenhöhe · Expertise

Colour System

Orange — action. Blue — information. Ink — structure.

Orange — Action & Signal

100%#FC4C07

90%#FC5E20

80%#FD7039

70%#FD8251

60%#FD946A

50%#FEA683

40%#FEB79C

30%#FEC9B5

20%#FEDBCD

10%#FFEDE6

Ink — Structure & Text

100%#1E1E1E

90%#343434

80%#4B4B4B

70%#626262

60%#787878

50%#8F8F8F

40%#A5A5A5

30%#BCBCBC

20%#D2D2D2

10%#E9E9E9

Blue — Information & Context

100%#33A6CD

90%#47AFD2

80%#5CB8D7

70%#70C1DC

60%#85CAE1

50%#99D3E6

40%#ADDBEB

30%#C2E4F0

20%#D6EDF5

10%#EBF6FA

Semantic Colours

Success #2ECC71

Error #DC2626

Warning #F59E0B

White #FFFFFF

Colour Roles

Orange

CTAs, recording states, progress, primary actions. "Do something."

Blue

ATC content, frequency data, info badges, links. "Read this."

Ink

Body text, UI chrome, surfaces, secondary controls. The backbone.

Green

Correct answers, completed states. Only after positive results.

Red

Errors, incorrect answers. Never punitive — always paired with a path forward.

Typography

Bevan for display. Nunito Sans for everything else. Major Third scale (1.250).

Display

Bevan 400 · 3.0625rem / 68px

Heading 1

Bevan 400 · 3.0625rem / 56px

Heading 2

Nunito Sans 600 · 2.4375rem / 48px

Heading 3

Nunito Sans 600 · 1.9375rem / 40px

Heading 4

Nunito Sans 600 · 1.5625rem / 32px

Heading 5

Nunito Sans 600 · 1.25rem / 28px

Heading 6 — Eyebrow

Nunito Sans 500 · 1rem / 24px · +1%

Body Large — introductions, key paragraphs, onboarding copy

Nunito Sans 400 · 1.25rem / 30px

Body — standard running text for instructions, descriptions, and general content

Nunito Sans 400 · 1rem / 24px

Body Small — secondary text, helper lines, metadata

Nunito Sans 400 · 0.875rem / 20px

Button Label

Nunito Sans 600 · 1rem · +1%

TAG · OVERLINE

Nunito Sans 600 · 0.75rem caps · +8%

Caption — footnotes & legal

Nunito Sans 400 · 0.75rem · +2%

Spacing & Layout

4px base grid. Consistent rhythm across all components.

Spacing Scale

xs4px

sm8px

md12px

base16px

lg24px

xl32px

2xl48px

Border Radius

8px

12px

16px

pill

9999px

Shadow

card-shadow

Buttons

Five variants. Tactile depth on press.

Variants

Primary

Secondary

Ghost

Outline

Danger

<button class="btn btn--primary">Senden</button>

States

Variant	Default	Hover	Active	Focus	Disabled
Primary
Secondary
Outline
Danger

Sizes

Small

Default

Large

Special

Block (full width)

Icon button

Icon + label

<button class="btn btn--primary btn--icon-only" aria-label="Play">...svg...</button>

Form Elements

Clean, accessible inputs with clear focus states.

Rufzeichen Dein Flugzeug-Callsign

Frequenz (Focus-Zustand)

Readback (Fehler) Schreibfehler im Readback erkannt

ATIS Information (Readonly)

Gesperrt (Disabled)

Notizen

Modul

Sprachausgabe aktiviert

Vibration bei Aufnahme

Pflichtfunkverkehr (TWR) Beratungsfunkverkehr (INFO)

BZF II (deutsch) BZF I (englisch)

Readback mit Mikrofon

<input class="input" type="text" placeholder="...">
<label class="toggle-row"><input type="checkbox" class="toggle"><span class="toggle__track"></span> Label</label>

Tags & Badges

Compact labels for status, categories, and counts.

Badges

Orange3

Blue12

Ink99+

<span class="badge">3</span>
<span class="badge badge--blue">12</span>

Cards

The primary content container.

Basis-Karte

Standardcontainer mit abgerundeten Ecken, subtilen Schatten und 1px Rahmen.

Interaktive Karte

Hover hebt die Karte an. Nutze diese Variante bei klickbaren Elementen.

Info-Karte

Blauer linker Rand signalisiert informellen Inhalt wie ATIS-Daten oder Hinweise.

Strukturierte Karte mit Header, Body und Footer. Ideal bei Listen oder Detailansichten.

87% Trefferquote

<div class="gl-card gl-card--interactive">
  <div class="gl-card__header">...</div>
  <div class="gl-card__body">...</div>
  <div class="gl-card__footer">...</div>
</div>

Feedback

Three grading levels: correct, partial, wrong.

Readback korrekt — Piste, Freigabe und Callsign stimmen.

Fast richtig

Die Pistenbezeichnung fehlt im Readback.

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

Nochmal

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

<div class="fb" data-fb="correct">
  <div class="fb__glow"></div>
  <div class="fb__icon">...svg...</div>
  <div class="fb__body"><h4>roger.</h4><p>...</p></div>
</div>

Push-to-Talk

Press to transmit, release to receive.

State Machine

Idle

Outline circle, mic icon, dashed orbit

Recording

Orange fill, bars animation, orbit rotates

Processing

Subtle fill, spinner, slower orbit

Done

Solid orange fill, checkmark, "roger."

Interactive Demo

Press and hold the button to simulate the full transmit cycle.

Zum Sprechen halten

Compact Variant (44px inline)

Idle

Recording

Specifications

Property	Idle	Recording	Processing	Done
Size	128px	128px	128px (scale .97)	128px
Border	`2.5px ink-20`	`2.5px orange`	`2.5px orange-40`	`2.5px orange`
Fill	none	orange (scale in)	orange 12%	orange 100%
Icon	mic	bars	spinner	check
Orbit	dashed, static	dashed, 8s rotate	dashed, 12s	solid, static
Shadow	none	`0 0 0 4px orange/12%`	none	none

<div class="ptt-stage" data-state="idle">
  <button class="ptt" data-ptt="main">
    <span class="ptt__fill"></span>
    <svg class="ptt__icon--mic">...</svg>
    <span class="ptt__bars"><span>x5</span></span>
    <span class="ptt__spinner"></span>
    <svg class="ptt__icon--check">...</svg>
    <svg class="ptt__orbit">...</svg>
  </button>
  <span class="ptt-label"></span>
</div>

Radio UI

ATC transmission display and playback.

D-EABC, Piste 26 Links, Landung frei, Wind 240 Grad, 8 Knoten.

Frequency Badges

TWR 118.700 ATIS 128.025 GND 121.725

Waveform Visualization

<div class="radio-transmission">
  <div class="radio-transmission__header">...</div>
  <div class="radio-transmission__body">
    <div class="radio-transmission__waveform">...</div>
    <p class="radio-transmission__text">...</p>
  </div>
</div>