Section 01

Brand Identity.

The official GDDC 2026 visual identity. Click a variant below to preview it.

Section 02

COLOR system.

Manage the foundational color palette. Click any swatch to edit its value for light and dark modes.

Settings

Select a swatch to configure.

Section 03

Typography Systems

[SYS_TYPO_01] Fine Typo
H1

Innovation
Unbound.

Body Large

The horizon of dynamic drone centering technology demands an interface that breathes clarity.

01_CORE
H2

System Architecture

DATA_STREAM_ACTIVE
Body Small

By abstracting the physical constraints of rotor dynamics into pure digital logic, we achieve a synchronicity rarely seen in terrestrial computing. It is a symphony of mathematics and material.

[SYS_TYPO_02] & CODES Dashboard Tech

System Global Status

ONLINE
Network Latency
12ms
Rotor Sync Rate
99.8%
Z-INDEX: WEBGL_RENDERER
3D CORRIDOR
px
%
em
size: 48px
weight: 900
line: 1.1
track: -0.02em
width: 100%
Quick: H1
GDDC

Section 04

Components & Forms

Typography scale, form elements, alerts, and data display patterns.

Typography Scale

Headings font-sans
H1

Display XL

H2

Section Title

H3

Card Header

H4

Subsection

H5
Label Large
H6
Label Standard
Body & Utility mixed
Body Large

Präzise Flugsteuerung durch intelligente Sensorik und Echtzeit-Datenverarbeitung.

Body Default

Standard paragraph text for descriptions, explanations, and general content across all interfaces.

Body Small

Caption text for metadata, timestamps, and secondary information.

Code / Mono GDDC-SYS-INIT_001
Overline System Protocol Active

Mission Directory Section 05

Brand code identifiers for each GDDC operational division.

GDDC Air
Flugoperationen
AIR GDDC-AIR-[FN]
GDDC Drones
Hardware
DRN GDDC-DRN-[FN]
GDDC Academy
Training
ACM GDDC-ACM-[FN]
GDDC Licensing
Lizenzmanagement
LIC GDDC-LIC-[FN]
GDDC Grid
Docknetzwerk
GRD GDDC-GRD-[FN]
GDDC Link
Softwareplattform
LNK GDDC-LNK-[FN]
GDDC Systems
Technik & Integration
SYS GDDC-SYS-[FN]
GDDC Insight
Datenanalyse
INS GDDC-INS-[FN]
24px
8px
32px
80px

Form Elements

Text Inputs
Coordinates out of range
Selects & Dropdowns
Selection Controls
Checkboxes
Radio Buttons
Toggle Switches

Data Display

Telemetry Panels
System Nominal

GPS lock fixed on 12 satellites.

Wind Shear

Altitude comp engaged.

Info Notice

New firmware available.

Active Units
  • Alpha-1 RTB 02:40
  • Bravo-7 IN_ZONE
  • Delta-4 BATT_LOW
Altitude Profile
0m
120m
Badges & Tags
Status
Active Online Pending
Categories
Surveillance C2
Pills
GDDC-AIR v2.4.1

Section 05

Button System

All interactive button variants, sizes, and style systems. Fully configurable via the settings panel below.

Sizes

Variants

Default context

Dark context

Style Variants

Glass

Glass Highlight

Neon

Token Reference

Heights

px
px
px
px

Typography

px
px
px

Effects & Geometry

px
px
px
--btn-radius: 6px
--glass-blur: 16px
--btn-neon-glow: 10px

Actions

Live Preview

Button tokens are included in all exports:
JSON · CSS · JSX · VBA · XML

Section 04b

Interactive UI Patterns

Navigation bars, drone-launch buttons, and Apple Dock-style interactions with configurable animations.

Navigation Patterns

Fri, Mar 21 · 14:32:08
LIVE
3D MAP VIEW
09:41
Website Main Nav · Horizontal
Admin Micronav · Supabase Style
Project Dashboard
Content Structure · Filesystem
|

EU-Drohnenverordnung

KAPITEL 01

Grundlagen der Betriebskategorien

Die europäische Drohnenverordnung definiert drei Betriebskategorien: Open, Specific und Certified. Jede Kategorie hat unterschiedliche Anforderungen.

Open Category (Offene Kategorie)

Die offene Kategorie erlaubt Flüge ohne vorherige Genehmigung, sofern bestimmte Bedingungen eingehalten werden. Der Pilot muss jederzeit Sichtkontakt zur Drohne haben und darf nicht höher als 120 Meter fliegen.

Unterkategorien A1, A2, A3

Die offene Kategorie unterteilt sich in drei Unterkategorien (A1, A2, A3), die sich durch den erlaubten Abstand zu Menschen und die maximale Startmasse der Drohne unterscheiden.

GDDC-AIR-001 :: Betriebsgenehmigung
STATUS: ACTIVE | ZONE: DEU-SH-FL
PILOT: [AUTHORIZED] | EXP: 2025-12-31
ERFORDERLICHE DOKUMENTE

Abbildung 1.2 — Übersicht der Betriebskategorien nach EU-VO 2019/947. Stand: März 2024.

WEITERFÜHRENDE LINKS

Drone Launch Buttons

Buttons mit Ghost-Launch-Effekt: Beim Hover schweben sie auf, beim Klick steigt ein Geist empor waehrend der Button sanft landet.

LAUNCH ZONE
Animation Configuration

Adjust the drone-launch animation parameters in real-time.

500ms
200px
8px
0.3
Generated CSS Variables
--drone-duration: 500ms;
--drone-launch-dist: 200px;
--drone-hover-float: 8px;
--drone-shadow: 0.3;
--drone-easing: cubic-bezier(...);

Section 06

Iconography.

Multiple icon libraries curated for drone/aviation interfaces. Switch between sets to find the best fit for your use case.

Adjust icon styles globally. Weight changes stroke thickness for Phosphor icons.

24px
Regular
2px

Tip: Use Weight buttons to change Phosphor icon stroke thickness (thin → bold).

Phosphor Selection

187 icons

Curated Phosphor icons for GDDC. Local SVG files in icons/phosphor-selection/

Flight Tower / Aviation
air-traffic-control
cell-tower
crane-tower
drone
airplane
in-flight
takeoff
landing
taxiing
broadcast
navigation
compass
compass-rose
gps
gps-fix
crosshair
target
map-pin
Security
shield-check
shield-chevron
lock
lock-key
lock-open
key
keyhole
eye
eye-slash
scan
binoculars
warning
warning-octagon
warning-circle
Interface
gear
gear-six
gear-fine
sliders
sliders-h
toggle-left
toggle-right
grid-four
grid-nine
layout
monitor
terminal
terminal-window
cursor
cursor-click
app-window
browser
command
Numbers
number-one
number-circle-one
number-square-one
Telemetry & Signals
waveform
cell-signal
map-trifold
gauge
speedometer
pulse
Academy / Education
graduation-cap
student
certificate
medal
trophy
book
book-open
books
chalkboard
presentation
presentation-chart
Shop / Commerce
storefront
shopping-cart
shopping-bag
bag
tag
barcode
receipt
package
gift
percent
credit-card
wallet
Business / Users
user
users
user-circle
user-plus
user-check
id-card
id-badge
briefcase
building
buildings
office
handshake
Power & Battery
battery-full
battery-high
battery-medium
battery-low
charging
battery-warning
lightning
plug
power
Weather & Environment
sun
moon
cloud
cloud-sun
cloud-rain
wind
thermometer
thermo-hot
drop
Media & Recording
video-camera
camera
camera-rotate
film-strip
play
play-circle
pause
stop
record
screencast
Status & Actions
check
check-circle
x
x-circle
plus
plus-circle
minus
info
question
prohibit
Tools & Maintenance
wrench
hammer
screwdriver
toolbox
Calendar & Time
calendar
calendar-check
clock
timer
alarm
hourglass
Communication
bell
bell-ringing
envelope
envelope-open
chat
chat-circle
phone
phone-call
globe
link
share
download
upload
cloud-up
cloud-down
UAS Class Labels

EU drone classification. Schengen font circled numbers ⓪-⑥ (U+24EA, U+2460-2465)

<250g
<900g
<4kg
<25kg
<25kg
STS-01
STS-02

Mac: Edit → Emoji & Symbols (⌃⌘Space) | Win: Win+. | HTML: &#9312; (①)

Section 09

API & Integration.

Design tokens available as REST API — consume in web, mobile, and print workflows.

Endpoints

GET /api/tokens
GET /api/tokens/colors ?theme=
GET /api/tokens/typography
GET /api/tokens/spacing
GET /api/fonts
GET /api/logos-2026
UI /api/docs Swagger

Integration Snippets

// Fetch active color palette
const res = await fetch('/api/tokens/colors?theme=dark');
const colors = await res.json();

// Apply as CSS custom properties
Object.entries(colors).forEach(([key, val]) => {
  document.documentElement.style
    .setProperty(`--color-${key}`, val);
});