Corporate Design

Im Folgenden definieren wir das Erscheinungsbild von alphaNEXT.

alphaNEXT Brand toolkit

Enthält die Logo-Varianten von alphaNEXT in unterschiedlichen Formaten.

Bitte beachte bei der Verwendung unserer Marke die Hinweise zum Corporate Design.

429_an-brand-toolkot.zip [0.81 MB]

Slogan

Der alphaNEXT Slogan soll wie folgt dargestellt werden:

Genau. Richtig.

Logo

Das Logo von alphaNEXT darf ausschließlich in den folgenden Varianten abgebildet werden, wobei ausschließlich die im CD definierten Farben genutzt werden sollen:

  • weiß auf blau mit grünem X
  • weiß auf blau mit weißem X
  • blau auf weiß mit grünem X
  • blau auf weiß mit blauem X
  • als Quadrat: weißes X auf blauem Hintergrund

Unzulässige Logo-Varianten

Farbe

Die alphaNEXT-Farbwelt

Weiß

CMYK:
0C 0M 0Y 0K

RGB:
255R 255G 255B

Web:
#FFFFFF

Schwarz

CMYK:
91C 79M 62Y 97K

RGB:
0R 0G 0B

Web:
#000000

Blau

CMYK:
85C 45M 0Y 0K

RGB:
5R 120G 190B

Web:
#0578BE

Grün

CMYK:
25C 0M 89Y 0K

RGB:
212R 217G 46B

Web:
#D4D92E

Sprachliche Normen


Name und Abkürzung

Die korrekte Bezeichnung unserer Software lautet:
alphaNEXT

Auf diesen Namen kann mit der offiziellen Abkürzung aN (erster Buchstabe klein, zweiter Buchstabe groß) Bezug genommen werden. In längeren Texten wird vor der erstmaligen Verwendung der Abkürzung die volle Form mit gleichzeitiger Verwendung der Abkürzung in Klammer verwendet:

« alphaNEXT (aN) ist ein Content-Management-System, mit dem Sie Ihre Website gestalten und verwalten können. »

Die Abkürzung aN wird nie hoch- oder tiefgestellt abgebildet.

alphaNEXT im Backend


Buttons und Schaltflächen

Für Icon-Buttons dürfen ausschließlich Icons aus dem derzeit im Backend von alphaNEXT eingebundenen FontAwesome-Set genutzt werden. Buttons können dabei je nach Funktion und Platzierung aus Text, Icons oder einer Icon-Text-Kombination bestehen.




Hinzufügen, Erstellen oder Speichern

Definition:

padding: 6px 12px;
background-color: #87b87f;
border: 5px solid #87b87f;
color: #ffffff;
font-size: 15px;
font-weight: 400;




Abbrechen, Zurück oder Seite wechseln

Definition:

padding: 6px 12px;
background-color: #e7e7e7;
border: 5px solid #e7e7e7;
color: #888888;
font-size: 15px;
font-weight: 400;





Löschen oder andere kritische Aktion

Definition:

padding: 6px 12px;
background-color: #d15b47;
border: 5px solid #d15b47;
color: #ffffff;
font-size: 15px;
font-weight: 400;

Funktions-Icons

Definition:

font-family: FontAwesome;
background-color: transparent;
border: none;
color: #0578BE;
font-size: 160%;
font-weight: 400;




Informationen ansehen oder Einstellungen ändern

Definition:

padding: 6px 12px;
background-color: #abbac3;
border: 5px solid #abbac3;
color: #ffffff;
font-size: 15px;
font-weight: 400;

aktiv

inaktiv


Icon-Buttons

Allgemeine Definition:

Positive Funktionen z.B. speichern: background-color: #87B87F; color: #FFFFFF;

Info Funktionen z.B. Info-Fenster öffnen: background-color: #777777; color: #FFFFFF;

Kritische Funktionen z.B. löschen: background-color: #D15B47; color: #FFFFFF;



Funktionsfenster öffnen

Definition:

padding: 6px 12px;
background-color: #6fb3e0;
border: 5px solid #6fb3e0;
color: #ffffff;
font-size: 15px;
font-weight: 400;

Rotes Alert Fenster
Vorbehalten für: Fehler- und Warnmeldungen

Definition
CSS-Class: alert alert-danger
Gelbes Alert Fenster
Vorbehalten für: -

Definition
CSS-Class: alert alert-warning
Blaues Alert Fenster
Vorbehalten für: Informationen und Einstellungen

Definition
CSS-Class: alert alert-info
Grünes Alert Fenster
Vorbehalten für: SEO

Definition
CSS-Class: alert alert-success