Informationen zu Core Components

Für ein einheitliches Erscheinungsbild im Web haben wir das Audi CI um neue React-Komponenten ergänzt. Alle bisherigen React-Komponenten sind in der Audi React Bibliothek zu finden. Diese werden stetig weiterentwickelt.

Die Audi Type schafft die Grundlage für einen flexiblen Einsatz von Typografie. Durch den Einsatz der unterschiedlichen Schriftschnitte können Inhalte klar gegliedert werden, sodass eine schnelle Erfassbarkeit gewährleistet wird. 

Zusätzlich zu den vordefinierten Schriftschnitten kann die Audi Type Variable verwendet werden. Die Audi Type Variable ist eine in Schriftstärke und -breite stufenlos verstellbare Schrift. Durch ihren reduzierte Umfang im Vergleich zu Einzeldateien ermöglicht sie z. B. kürzere Ladezeiten. 

Es stehen mehrere Dateipakete (Link zum Typografie Guide) mit der Audi Type Variable und vordefinierten Schriftschnitten zur Verfügung.

Schriftschnitte

Folgende Schriftschnitte  stehen zur Verfügung:

 

  • Audi Type Extended Bold bis Normal für Headlines  und Zwischenüberschriften
  • Audi Type Wide und/oder Audi Type für Fließtexte
  • Audi Type Wide für interaktive Texte und Buttons (Textlinks, Formularfelder, Navigationspunkte, etc.)
  • Audi Type Bold, Audi Type Wide Bold, Audi Type Extended Bold (innerhalb Headlines) für Hervorhebungen
  • Audi Type für Fußnoten und Hinweistexte

Schriftgrößen und Zeilenabstände

Schriftgrößen können abhängig von Projekt, Endgerät und Viewportbreite gewählt werden.

Das Audi User Interface beinhaltet eine anpassbare Schriftgrößen-Systematik, basierend auf einer modularen Skala. Sie kann Designern und Entwicklern dabei helfen …

  • auch bei umfangreichen Projekten ein konsistentes, stimmiges Schriftbild zu erzeugen,
  • flexibel mit unterschiedlichen Endgeräten und Viewportbreiten umzugehen
  • und einen vertikalen Rhythmus einzuhalten.

Eine individuell angepasste Schriftgrößen-Systematik lässt sich mit Hilfe einer Formel erstellen. Grundlage dafür ist eine modulare Skala aus zwei Parametern, die projektabhängig festgelegt werden können: Basisschriftgröße und Ratio.

Die Basisschriftgröße bestimmt die Größe des Lesetexts. Die Ratio bestimmt die Stärke des Schriftgrößenkontrasts zwischen Formaten geringerer und höherer Hierarchieebene. Die Hierarchiebene wird durch den Schriftgrößenindex definiert, der einem Format zugewiesen ist.

Beide Parameter können für unterschiedliche Viewportbreiten festgelegt werden, um auf jeder Gerätegröße ein optimales Leseerlebnis zu schaffen.

Formel:

Schriftgröße = Basisschriftgröße * (Ratio^Schriftgrößenindex)
SASS-Mixin: aui-responsive-type(schriftgroessenindex, relativezeilenhoehe)

Vordefinierte Schriftstile

Überschriften

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6
HTML
<h1 class="aui-headline-1">Headline 1</h1>
<h2 class="aui-headline-2">Headline 2</h2>
<h3 class="aui-headline-3">Headline 3</h3>
<h4 class="aui-headline-4">Headline 4</h4>
<h5 class="aui-headline-5">Headline 5</h5>
<h6 class="aui-headline-6">Headline 6</h6>
  • Seitentitel und Artikelüberschrift (.aui-headline-1)
    Schriftschnitt: Audi Type Extended Bold
    Schriftgrößenindex: 8
    Zeilenhöhe: 1,1×
    Zeichenabstand: -0.015em
    Farbe: #000000 / #ffffff

  • Kapitelüberschrift (.aui-headline-2)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 5
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Sektionsüberschrift (.aui-headline-3)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 2
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2
  • Infoboxüberschrift (.aui-headline-4)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Teaser- und Cardtitel (.aui-headline-5)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,33×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Absatzüberschrift (.aui-headline-6)
    Schriftschnitt: Audi Type Wide Bold
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2

Fließtexte

Hello, sir. I am See-Threepio, human-cyborg relations. My facilities are at your... Well, really! What's wrong with the Falcon? Hyperdrive. I'll get my people to work on it. Good. You know, that ship saved my life quite a few times. She's the fastest hunk of junk in the galaxy. How's the gas mine? Is it paying off for you? Oh, not as well as I'd like. We're a small outpost and not very self-sufficient. And I've had supply problems of every kind. I've had labor difficulties... What's so funny? You. Listen to you - you sound like a businessman, a responsible leader. Who'd have thought that, huh? You know, seeing you sure brings back a few things. Yeah. Yeah, I'm responsible these days. It's the price you pay for being successful.

HTML
<p>Hello, sir. I am See-Threepio, human-cyborg relations. My facilities are at your... Well, really! What's wrong with the Falcon? Hyperdrive. I'll get my people to work on it. Good. You know, that ship saved my life quite a few times. She's the fastest hunk of junk in the galaxy. How's the gas mine? Is it paying off for you? Oh, not as well as I'd like. We're a small outpost and not very self-sufficient. And I've had supply problems of every kind. I've had labor difficulties... What's so funny? You. Listen to you - you sound like a businessman, a responsible leader. Who'd have thought that, huh? You know, seeing you sure brings back a few things. Yeah. Yeah, I'm responsible these days. It's the price you pay for being successful.</p>
  • Längere Fließtexte (p)
    Schriftschnitt: Audi Type Wide
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,75×
    Farbe: #333333 / #f2f2f2 

  • Kürzere Fließtexte (.aui-shortread)
    Schriftschnitt: Audi Type Wide
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
  • Kleingedrucktes (.aui-small)
    Schriftschnitt: Audi Type Wide
    Schriftgrößenindex: -2
    Zeilenhöhe: 1,5×
    Farbe: #000000 / #ffffff
    Opazität: 40%

  • Lese-Fließtexte innerhalb von Portalen mit kompakter Basisschriftgröße (p.big)
    Schriftschnitt: Audi Type Wide
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,75×
    Farbe: #333333 / #f2f2f2

Hervorhebungen

The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah… This is a consular ship. Were on a diplomatic mission. If this is a consular ship… were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.

And, now Your Highness, we will discuss the location of your hidden Rebel base.

This little one isn't worth the effort. Come let me buy you something.

This little one isn't worth the effort. Come let me buy you something.

The second Death Star, was a massive battle station with enough firepower to destroy an entire planet.

HTML
<p class="aui-accentuated">
  The Death Star plans are not in the main computer. <strong>Where are those transmissions you intercepted?</strong> What have you done with those plans? We intercepted no transmissions. Aaah… This is a consular ship. Were on a diplomatic mission. If this is a consular ship… were is the <strong>Ambassador</strong>? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.
</p>
<p class="aui-shortread">
  And, now <strong>Your Highness</strong>, we will discuss the location of your hidden <strong>Rebel base</strong>.
</p>
<p class="aui-big">
  This <strong>little</strong> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-small">
  This <strong>little</strong> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-caption">
  The second <strong>Death Star</strong>, was a massive <strong>battle station</strong> with enough firepower to destroy an entire planet.
</p>
  • Exzerpte, hervorgehobene Zitatblöcke (.aui-blockquote)
    Schriftschnitt: Audi Type Wide Normal
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
  • Hervorgehobene Worte innerhalb eines Fließtextes (strong)
    Schriftschnitt: Audi Type Wide Bold

Listen

  • List with arrow
  • Second topic
  • Third topic
  1. List numbered
  2. Second topic
  3. Third topic
HTML
<ul class="aui-list aui-list--arrow">
  <li class="aui-list__item">List with arrow</li>
  <li class="aui-list__item">Second topic</li>
  <li class="aui-list__item">Third topic</li>
</ul>
<ol class="aui-list aui-list--number">
  <li class="aui-list__item">List numbered</li>
  <li class="aui-list__item">Second topic</li>
  <li class="aui-list__item">Third topic</li>
</ol>
  • Liste mit Pfeilen als Aufzählungszeichen (aui-list–arrow)
  • Nummerierte Liste (aui-list–number)

Abstand zwischen Listenelementen beträgt 1 x Basisschriftgröße.

Die Aufzählungszeichen sowie die Nummerierung haben eine Farbe von #000000/#ffffff bei 30% Opazität.

Sonstige

The second Death Star, was a massive battle station with enough firepower to destroy an entire planet.

HTML
<p class="aui-caption">
  The second <strong>Death Star</strong>, was a massive <a class="aui-textlink" href="#">battle station</a> with enough firepower to destroy an entire planet.
</p>
  • Links in Fließtexten (.aui-textlink)
    Schriftschnitt: Audi Type Wide Normal
    Unterstreichung mit border-bottom: 1px
  • :hover
    Farbe: #000000/#ffffff 
  • :visited
    Opacity: 60% 
  • Bildunterschrift und Abbildungslegenden (.aui-caption)
    Schriftschnitt: Audi Type Wide
    Schriftgrößenindex: -1
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2

Super- und Subscript

Für hoch und tiefgestellten Zeichen wird das CSS font-feature-setting <sub> und <sup> verwendet.

This text contains a superscript text.


This text contains a subscript text.

HTML
<div>
  <p>
    This text contains a <sup>superscript</sup> text.
  </p>
  <br />
  <p>
    This text contains a <sub>subscript</sub> text.
  </p>
</div>
<style>
.abp-pattern__superscript-subscript {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}
</style>

Folgende Schrift-CSS-Spezifikationen werden würden für die korrekte typografische Darstellung von hochgestellten <sup> und tiefgestellten <sub> verwendet.

}
  sub, sup {
      font-size: 53.8%;
      font-variation-settings: "wdth" 108, "wght" 660;
      position: relative;
      vertical-align: baseline;
      bottom: -0.275em;
 }
  sup {
      top: -0.68em;
}

Audi UI Kit – Integration in die Sketch library

(Supported bis 30.06.2023)

Um sicherzustellen, dass Designer die aktuellsten Komponenten und Icons in ihren Produkten verwenden, wurde das Audi UI Kit als Sketch library erstellt. Integrieren Sie diese UI-Kits, um die neuesten Audi Sketch libraries zu erhalten. Die UI Kits werden regelmäßig aktualisiert und die User informiert, sobald eine neue Versionen der Bibliotheken verfügbar ist.

 

Das aktuelle Audi Sketch UI-Kit wird nur noch bis zum 30.06.2023 unterstützt. Um die Entwicklung digitaler Produkte in der Zukunft zu ermöglichen, stellen wir UI-Bibliotheken für Figma bereit und aktualisieren diese.

Audi UI Kit für Figma

Um möglichst vielen Designern die Arbeit mit den Audi User Interface Komponenten zu ermöglichen, wird das UI Kit und die Icons auch für Figma angeboten. Updates werden regelmäßig durchgeführt und alle Änderungen werden im Changelog dokumentiert.

Wir empfehlen dem Audi Figma Workspace beizutreten, um regelmäßig über Updates informiert zu werden und mit anderen zu kollaborieren.
Die Audi Design Kits sind bereits in den Figma Teams, innerhalb des Audi Workspace, integriert. Um Zugang zu einem Team oder Projekt zu erhalten, können Sie uns hier direkt kontaktieren.

Falls Sie nicht direkt im Audi Figma Workspace arbeiten, finden Sie die neueste Version unten als Download.

Audi Figma UI-Kit und Icons
Figma-Dateien für UI-Komponenten, Icon Library und eine Readme-Datei für den Einstieg und das Vorgehen bei der Aktualisierung der Dateien.
ZIP
20.2 MB

Anwendungsbeispiele

Ihr CI-Support
Können wir Ihnen helfen?