Phoenix Reisen Styleguide

Grundlegende Designwerte & -elemente der Phoenix Reisen GmbH in Bonn
Dokumentation (mehr als weniger automatisch generiert)

www.phoenixreisen.com

Prinzipien

Neue & bestehende Frontends werden inhouse auf Basis folgender Prinzipien entwickelt.

  • mobile first
  • Open Source Welcome
  • weniger ist mehr, außer es ist zu wenig
  • wie sieht das in Türkis aus?

Anwendung

Das Design-System kommt für die Entwicklung der Reiseverwaltung Mein Phoenix zum Einsatz als auch zur Entwicklung diverser Intranetanwendungen.


Open Source to the rescue!

Folgende designprägende 3rd party Styles werden customized ins Design-System importiert, erleichtern das Leben und verkürzen die Entwicklungszeit.

Selbstentwickelte Komponenten werden natürlich auch - so gut es geht - wiederverwendet.


Typografie

Grundschriftart ist Titillium Web (Website)
mit einer Basisgröße von 16px (18px ab großen Auflösungen).

Für Icons aller Art kommt Fort Awesome (Website) zum Einsatz.
SVG-Icons nur, wenn sie nicht durch Fort Awesome abgedeckt sind.


Responsivität

Folgende Breakpoints werden für grundsätzliche gerätespezifische Responsivität eingesetzt. Darüber hinaus werden aber auch Breakpoints so gesetzt, wie es für die jeweilige Designstelle optimal ist.

  • $XS: 320px;
  • $S: 480px;
  • $M: 640px;
  • $L: 960px;
  • $XL: 1400px;

Weitere Variablen


Farben

Corporate Identity (CI)

CI Phoenix Blau (primary)

$primary
#009EB4

CI Phoenix Blau (primary dark)

$primary-dark
#00377A

Links

Hyperlink

$link
$primary

Hyperlink - hovered

$link--hover
darken($link, 5%)

Hyperlink - active

$link--active
darken($link, 15%)

Grautöne & -abstufungen

Grau I

$gray1
#333333

Grau II

$gray2
#666666

Grau III

$gray3
#7d7d7e

Grau IIII

$gray4
#cdcdce

Grau V

$gray5
#DCE0E7

Grau VI

$gray6
#EEEEF4

Weiß-Grau

$whitegray
#fafafa

Grau-Weiß

$graywhite
#edf1f5

Status-Farben

Erfolg

$success
#1CB841

Info

$info
#1F8DD6

Warnung

$warning
#FF6700

Krasse Warnung / Fehler

$danger
#CA3C3C

Sonstige Farben

Schwarz

$black
#000000

Weiß

$white
#ffffff

Gelb

$yellow
#face49

Weitere Variablen


Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6

Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Kopfzelle Kopfzelle
Tabellenzelle Tabellenzelle

  • Unnummerierter Listenpunkt
  • Unnummerierter Listenpunkt

  1. Nummerierter Listenpunkt
  2. Nummerierter Listenpunkt

  Preformatted

Zitat