TaxonAir — CI Design System

01 — Brand

Brand Identity

TaxonAir ist ein Steuertransparenz-System. Keine Meinung, keine Wertung. Fakten, Daten, Echtzeit. Die Marke spiegelt das wider.

Name

TAXONAIR

TAXON in White — AIR in Sky (#3d8fff). Immer Grossbuchstaben, immer Barlow 900.

Mission

Groesstes freies Steuertransparenz-System der Welt. 127 Steuerarten, 162 Laender, Echtzeit-Alerts wenn es ernst wird.

Tonalitaet

STIL

Faktisch, sachlich

ZDF-Standard

PRINZIP

Daten statt Meinungen

Keine Adjektive

VERBOTEN

Emotionale Sprache

Wertungen, Spekulation

02 — Brand

Logo & Wordmark

Das Wordmark ist die Primaer-Identitaet. Es gibt kein separates Icon. Der Name IST das Logo.

Groessen

HERO — 56PX

TAXONAIR

NAV — 17PX

TAXONAIR

FOOTER — 14PX

TAXONAIR

Dark + Light Background

TAXONAIR

DARK MODE

TAXONAIR

LIGHT MODE

Schutzzone

Mindestens 1x Hoehe des Wordmarks als Abstand zu allen Seiten. Kein Element darf die Schutzzone verletzen.

TAXONAIR

Gestrichelte Linie = Schutzzone (1x Hoehe)

<!-- Wordmark HTML -->
<a class="nav-logo">TAXON<span>AIR</span></a>

/* CSS */
.nav-logo {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.nav-logo span { color: var(--sky); }

03 — Brand

Claim & Voice

Jeder Satz muss dem ZDF-Standard standhalten. Keine Meinung, keine Emotionen — reine Information.

Hauptclaim

Die Luft gehoert noch allen.

Sekundaerclaim

127 Steuerarten. 162 Laender. Echtzeit.

Voice Guidelines

Regel	Beispiel
Sachlich, direkt	"Deutschland erhebt 47 Steuerarten."
Keine Adjektive	Nicht "erstaunliche 47 Steuerarten"
Daten statt Meinungen	"CO2-Steuer: 45 EUR/Tonne" statt "hohe CO2-Steuer"
Verboten: Emotionen	"Schockierend" / "Unglaublich" / "Wahnsinn"
Verboten: Spekulation als Fakt	"Die Atemsteuer wird kommen" (ohne Quelle)

04 — Foundation

Farbsystem

Alle Farben werden ueber CSS Custom Properties gesteuert. Dark Mode ist Default, Light Mode ueber html.light Klasse.

Dark Mode Palette

Background

#04090f

--bg

Haupt-Hintergrund

Background 2

#070f1c

--bg2

Sections, Panels

Navy

#0b1829

--navy

Ticker, Timeline

Sky

#3d8fff

--sky

Primaerfarbe, CTAs

Sky Light

#72b3ff

--skylt

Hover-States

Cyan

#00cfff

--cyan

Akzent, Gradients

White

#eaf2ff

--white

Primaer-Text

Dim

rgba(234,242,255,0.52)

--dim

Sekundaer-Text

Faint

rgba(…,0.10)

--faint

Borders, Dividers

Ghost

rgba(…,0.04)

--ghost

Card Backgrounds

Border

rgba(61,143,255,0.15)

--border

Alle Borders

Semantische Farben

Success

#22c55e

--success

Positiv, Online

Error

#ff4d4d

--error

Fehler, Verboten

Warning

#f59e0b

--warning

Warnung, Achtung

Info

#3d8fff

--info (= --sky)

Information

Light Mode Overrides

html.light {
  --bg:        #f0f5ff;
  --bg2:       #e4eeff;
  --navy:      #dce8ff;
  --sky:       #1a6fd4;
  --skylt:     #3d8fff;
  --cyan:      #0099cc;
  --white:     #0d1a2e;
  --dim:       rgba(13,26,46,0.60);
  --faint:     rgba(13,26,46,0.10);
  --ghost:     rgba(13,26,46,0.04);
  --border:    rgba(26,111,212,0.18);
  --card-bg:   rgba(255,255,255,0.7);
}

05 — Foundation

Typografie

Zwei Schriften, klare Hierarchie. Barlow fuer alles Menschliche, IBM Plex Mono fuer alles Technische.

Font Stack

Rolle	Font	Gewichte	Variable
Display / Headlines	Barlow	900	--body
Body / Fliesstext	Barlow	300, 400	--body
Code / Labels / Daten	IBM Plex Mono	300, 400, 500	--mono

Typo Scale — Live Preview

Hero H1 Barlow 900 / clamp(56px, 9vw, 122px) / -3px tracking

Tax on Air

Section H2 Barlow 900 / clamp(40px, 5.5vw, 72px) / -2px tracking

Steuertransparenz

Feature Title Barlow 700 / 17-20px

Globale Steuer-Datenbank

Body Barlow 300 / 16px / 1.8 line-height

TaxonAir ueberwacht Steuergesetze weltweit — von CO2-Abgaben bis zur moeglichen Atemsteuer. 127 Steuerarten, 162 Laender, Echtzeit-Alerts.

Eyebrow IBM Plex Mono 400 / 12px / uppercase / 3px tracking

// Steuerarten

Labels IBM Plex Mono 500 / 11px / uppercase / 2px tracking

Steuerarten erfasst

Small / Micro IBM Plex Mono 400 / 10px / uppercase

Letzte Aktualisierung: 09.04.2026

06 — Foundation

Spacing & Grid

8px Grid-Basis. Alle Abstaende sind Vielfache von 8. Konsistente Vertikale durch Section Padding.

Kern-Werte

Token	Wert	Verwendung
Basis-Grid	8px	Alle Abstaende
--pad (Desktop)	96px	Section Horizontal Padding
--pad (Mobile)	24px	Mobile Padding
Section Vertical	110px	Oben + Unten
--max-w	1440px	Container max-width
Card Padding	36px	feat-card, calc-card
Card Gap	16px	Grid Gaps
About Col Gap	80px	2-Col Layouts

Spacing Scale

8px

1 unit

16px

2 units

24px

3 units

36px

Card Padding

48px

6 units

64px

Margin-top grids

80px

About gap

96px

--pad Desktop

110px

Section Padding

07 — Foundation

Schatten & Elevation

Minimal, fast flat. Schatten nur fuer Dropdowns, Modals und Hover-States.

Level 0

none (flat)

Level 1

0 1px 3px rgba(0,0,0,0.08)

Level 2

0 8px 28px rgba(0,0,0,0.12)

Level 3

0 20px 60px rgba(0,0,0,0.3)

Glow (Buttons)

0 16px 48px rgba(61,143,255,0.3)

08 — Components

Navigation

68px Hoehe, fixed, backdrop-filter blur. Logo links, Links mittig, Theme + CTA rechts.

Live Preview

TAXONAIR

Themen Steuerarten News

nav {
  height: 68px;
  background: var(--nav-bg);          /* rgba(4,9,15,0.6) */
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
nav.scrolled { background: var(--nav-bg-s); }

09 — Components

Buttons

Drei Button-Varianten: Fill (primaer), Line (sekundaer), Nav-Button (Outline mit Arrow).

Live Preview

Spezifikation

Klasse	Background	Border	Radius	Padding
.btn-fill	var(--sky)	none	100px	16px 40px
.btn-line	transparent	1px solid var(--faint)	100px	16px 40px
.nav-btn	transparent	1px solid var(--border)	100px	10px 22px

.btn-fill {
  background: var(--sky);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  padding: 16px 40px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn-fill:hover {
  background: var(--skylt);
  box-shadow: 0 16px 48px rgba(61,143,255,.3);
  transform: translateY(-2px);
}

10 — Components

Cards

Feature-Cards mit Icon, Label, Title und Body. Hover-Effekt: translateY(-4px) + border-color sky.

Live Preview

Global

162 Laender in Echtzeit

Jede Steueraenderung wird dokumentiert und in den globalen Kontext eingeordnet.

Monitoring

Echtzeit-Alerts

Wenn sich Steuergesetze aendern, wissen Sie es als Erster.

.feat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
}
.feat-card:hover {
  border-color: rgba(61,143,255,.35);
  transform: translateY(-4px);
}

11 — Components

Stats Bar

Horizontale Statistik-Leiste mit Flex-Items, getrennt durch Borders. Zahlen in 900/44px, Labels in Mono/11px.

Live Preview

127+

Steuerarten

162

Laender

24/7

Monitoring

2024

Seit

12 — Components

Sections

Jede Section folgt dem gleichen Pattern: Eyebrow, Headline, Description, Content.

Live Preview

Steuerarten

Die Steuerlogik
der Zukunft

Von der Einkommensteuer zur Atemsteuer — eine systematische Analyse des Steuerpfads.

.sec { padding: 110px var(--pad); }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sky);
}
.eyebrow::before { content: '//'; opacity: .4; }
.sec-h {
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
}
.sec-h .sky { color: var(--sky); }
.sec-h .outline { -webkit-text-stroke: 1.5px var(--sky); color: transparent; }

13 — Components

Tables

Steuerarten-Tabellen verwenden Mono-Header, leichte Borders und Hover-Highlighting.

Live Preview

Steuerart	Land	Satz	Seit
CO2-Steuer	Deutschland	45 EUR/t	2021
Mehrwertsteuer	Deutschland	19%	1968
Einkommensteuer	Deutschland	14-45%	1920
Hundesteuer	Deutschland	variabel	1809

14 — Components

Timeline

3-Column Grid mit Year-Numbers, Chips (done/now/next) und Dot-Points.

Live Preview

1992

Done

Rio Earth Summit

Erste globale Klimarahmenkonvention. CO2 wird offiziell als Problem definiert.

UNFCCC gegruendet

154 Staaten unterzeichnen

2024

Jetzt

CO2-Steuer Eskalation

Steigende CO2-Preise weltweit. EU ETS, nationale Steuern, Carbon Border Adjustment.

EU: 45-90 EUR/t

CBAM aktiv

20XX

Naechste

Atemsteuer?

Logische Konsequenz der CO2-Besteuerung: Jeder Mensch atmet 0.9kg CO2/Tag aus.

0.9 kg CO2/Tag/Person

328 kg CO2/Jahr

15 — Components

Tags & Badges

Pill-foermige Tags mit Mono-Font, verschiedene Varianten fuer Status und Kategorien.

Live Preview

Live Monitoring

Done Aktiv Geplant

CO2 Policy Science Warning

16 — Components

Forms & Inputs

Inputs mit ghost-Background, border-radius 10px, Focus-State mit sky-Border.

Live Preview

Jahreseinkommen

Land

CO2-Ausstoss (t/Jahr)

8.4

.ccontrol {
  background: var(--ghost);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--white);
  font-size: 16px;
  padding: 13px 16px;
}
.ccontrol:focus { border-color: rgba(61,143,255,.5); }

17 — Components

Icons

Inline SVG, stroke-basiert, 24x24px, stroke-width 1.5. Keine Fill-Icons, immer outline.

Icon Set

Globe

Activity

Grid

Search

Bell

Dollar

Currency

Settings

Download

Close

<!-- Icon Stil -->
<svg viewBox="0 0 24 24"
     width="24" height="24"
     stroke="var(--sky)" fill="none" stroke-width="1.5">
  ...
</svg>

18 — Patterns

Hero Pattern

Vollbild-Hero mit Tag, H1, Subtitle, Buttons und Scroll-Cue. Linksbuendig, min-height: 100vh.

Mini Preview

Live Monitoring

Tax on
Air

Die Luft gehoert noch allen. Aber wie lange noch?

19 — Patterns

Feature Grid

2x2 Grid aus feat-cards. Responsive wird es auf Mobile zu 1 Spalte.

Live Preview

Global

162 Laender

Jedes Land, jede Steuer, in Echtzeit dokumentiert.

Monitoring

Echtzeit-Alerts

Sofortige Benachrichtigung bei Steuer-Aenderungen.

Datenbank

127 Steuerarten

Von CO2 ueber Hundesteuer bis zur moeglichen Atemsteuer.

Kalkulator

Persoenliche Projektion

Berechne deine individuelle Steuerlast-Prognose.

20 — Patterns

About Layout

2-Column Grid mit 80px Gap. Links Eyebrow + Headline, rechts Body-Text in Paragraphen.

Live Preview

Ueber TaxonAir

Warum
Transparenz
zaehlt.

TaxonAir dokumentiert den logischen Pfad von der CO2-Steuer zur Atemsteuer. Keine Meinung, keine Wertung — reine Fakten und Daten.

Wir glauben: Wenn Steuern auf CO2 erhoben werden, und jeder Mensch CO2 ausatmet, dann ist die Atemsteuer eine mathematische Konsequenz — keine Verschwoerungstheorie.

21 — Patterns

Calculator

2-Column Layout: Links Eyebrow + H2 + Description, rechts die Calc-Card mit Inputs und Result-Block.

Referenz

Kalkulator

Deine Projektion

Berechne auf Basis aktueller CO2-Steuersaetze, wie sich deine persoenliche Steuerlast entwickeln koennte.

Land

Deutschland

CO2/Jahr (Tonnen)

8.4

Deine CO2-Steuer / Jahr

378 EUR

22 — Patterns

Evidence Grid

3-Column Grid aus Evidence-Cards mit Source, Headline, Body und Datum.

Live Preview

Bundesregierung

CO2-Preis steigt auf 55 EUR

Ab 2025 wird der nationale CO2-Preis auf 55 EUR pro Tonne angehoben.

EU Kommission

CBAM tritt in Kraft

Carbon Border Adjustment Mechanism soll CO2-Leakage verhindern.

WHO

Mensch atmet 0.9kg CO2/Tag

Wissenschaftlich belegt: Jeder Mensch produziert ca. 328 kg CO2 pro Jahr allein durch Atmung.

23 — Patterns

Footer Mega

5-Column Grid, fixed am unteren Rand, slide-up Animation. Ticker-Bar oben, Sponsor-Bar unten.

Referenz Preview

Plattform

Steuerarten

Laender-Ranking

CO2-Tracker

Kalkulator

Wissen

Timeline

Fakten

Quellen

Community

Twitter/X

Legal

Impressum

Datenschutz

Agent Contract

Projekt

Manifest

Open Source

Spenden

24 — Motion

Animationen

Subtile, performante Animationen. Kein Bounce, kein Spring — ease und ease-in-out.

Keyframes

@keyframes up

@keyframes blobPulse

tagPulse

Keyframe	Verwendung	Dauer
@keyframes up	Fade in from bottom (reveal)	.7s - .8s ease
@keyframes blobPulse	Hero Blob pulsiert	9s ease-in-out infinite
@keyframes tagPulse	Pulsierender Dot in Tags	2s ease-in-out infinite
@keyframes tick	Ticker horizontal scroll	45s linear infinite

Transition Standards

Element	Duration	Easing
Hover States	.2s - .25s	ease
Card Transforms	.3s - .35s	ease
Theme Switch	.4s	ease
Panel Slide	.45s	cubic-bezier(.4,0,.2,1)

25 — Motion & Rules

Responsive

Mobile-first Breakpoints. Der primaere Breakpoint ist 768px.

Breakpoints

768px Primaer (Mobile/Desktop)

1024px Tablet-Anpassungen

Property	Desktop	Mobile (<768px)
--pad	96px	20px
Nav Height	68px	60px
Feature Grid	2 Spalten	1 Spalte
Timeline Grid	3 Spalten	1 Spalte
Evidence Grid	3 Spalten	1 Spalte
Footer Grid	5 Spalten	2 Spalten
Stats Row	Inline	2x2 Wrap
Nav Links	Sichtbar	Hidden

26 — Motion & Rules

Dark / Light Mode

Dark ist Default. Light wird ueber html.light Klasse aktiviert. Alle Farben wechseln ueber CSS Variables.

Mechanik

// Theme Toggle
function toggleTheme() {
  const isLight = document.documentElement.classList.toggle('light');
  localStorage.setItem('taxonair-theme', isLight ? 'light' : 'dark');
}

// Init (kein FOUC)
(function(){
  if(localStorage.getItem('taxonair-theme') !== 'dark'){
    document.documentElement.classList.add('light');
  }
})();

Side-by-Side

DARK MODE (DEFAULT)

Tax on Air

Die Luft gehoert noch allen.

LIGHT MODE

Tax on Air

Die Luft gehoert noch allen.

27 — Rules

Do's & Don'ts

Verbindliche Regeln fuer die konsistente Anwendung des Design Systems.

Do's

CSS Variables verwenden (--sky, --bg, --white, ...)

Barlow + IBM Plex Mono — immer

Light + Dark Mode parallel testen

8px Grid-System fuer Abstaende

Stroke-basierte SVG Icons (24x24, 1.5)

Sachlich, faktisch, ZDF-Standard

Quellenangaben bei allen Daten

Don'ts

Eigene Farben erfinden (#xyz hardcoded)

Andere Fonts verwenden

Hardcoded Colors statt CSS Variables

UI-Entscheidungen ohne Rueckfrage

Emotionale Sprache / Adjektive

Fill-Icons statt Stroke-Icons

Spekulation als Fakt darstellen

28 — Export

Design Tokens Export

Alle Tokens als CSS Variables oder JSON. Copy-Button fuer schnellen Export.

Format

/* TaxonAir Design Tokens — Dark Mode */
:root {
  /* Colors */
  --bg:        #04090f;
  --bg2:       #070f1c;
  --navy:      #0b1829;
  --sky:       #3d8fff;
  --skylt:     #72b3ff;
  --cyan:      #00cfff;
  --white:     #eaf2ff;
  --dim:       rgba(234,242,255,0.52);
  --faint:     rgba(234,242,255,0.10);
  --ghost:     rgba(234,242,255,0.04);
  --border:    rgba(61,143,255,0.15);
  --card-bg:   rgba(234,242,255,0.04);

  /* Semantic */
  --success:   #22c55e;
  --error:     #ff4d4d;
  --warning:   #f59e0b;

  /* Typography */
  --body:      'Barlow', sans-serif;
  --mono:      'IBM Plex Mono', monospace;

  /* Spacing */
  --pad:       96px;
  --max-w:     1440px;
}

TaxonAirDesign System

Brand Identity

Name

Mission

Tonalitaet

Logo & Wordmark

Groessen

Dark + Light Background

Schutzzone

Claim & Voice

Hauptclaim

Sekundaerclaim

Voice Guidelines

Farbsystem

Dark Mode Palette

Semantische Farben

Light Mode Overrides

Typografie

Font Stack

Typo Scale — Live Preview

Spacing & Grid

Kern-Werte

Spacing Scale

Schatten & Elevation

Navigation

Live Preview

Buttons

Live Preview

Spezifikation

Cards

Live Preview

Stats Bar

Live Preview

Sections

Live Preview

Tables

Live Preview

Timeline

Live Preview

Tags & Badges

Live Preview

Forms & Inputs

Live Preview

Icons

Icon Set

Hero Pattern

Mini Preview

Feature Grid

Live Preview

About Layout

Live Preview

Calculator

Referenz

Evidence Grid

Live Preview

Footer Mega

Referenz Preview

Animationen

Keyframes

Transition Standards

Responsive

Breakpoints

Dark / Light Mode

Mechanik

Side-by-Side

Do's & Don'ts

Design Tokens Export

Format

TaxonAir
Design System