Grundlegende Designwerte & -elemente der Phoenix Reisen GmbH in Bonn
Dokumentation (mehr als weniger automatisch generiert)
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.
- KSS Knyle Style Sheets - CSS Dokumentationsgenerator für in der Haube
- Tachyons - funktionales CSS Framework für unter der Haube
- Animate.css - Animationssammlung für auf der Haube
- Fort Awesome - hippe Icon Schriftart
- Driver - smoothe Page Tour
- Pikaday - cooler Datepicker
- Swiper - fancy touch Slider
Selbstentwickelte Komponenten werden natürlich auch - so gut es geht - wiederverwendet.
- Phoenix Slider | Mithril | React
- Phoenix Modal | Mithril | React
- Phoenix Loader | Mithril | React
- Phoenix Footer | Mithril | React
- Phoenix Header | Mithril | React
- Phoenix Banners | Mithril | React
- Phoenix Web Tabs | Mithril | React
- Phoenix Dropdown | Mithril | React
- Phoenix Akkordeon | Mithril | React
- Phoenix Notifications | Mithril | React
- Phoenix Tooltip | Mithril | React
- Phoenix Fuzzy-Suche | Mithril
- Phoenix Timeline | Mithril | React
- Phoenix Navigation
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;
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
Ü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
- Nummerierter Listenpunkt
- Nummerierter Listenpunkt
Preformatted
Zitat