Adopting Core Components

We have added new React components to the Audi CI to ensure a uniform appearance on the web. All existing React components can be found in the Audi React Library. Audi will continue to develop and add to this library.

Audi Type provides the basis for flexible use of typography. By using the various styles, content can be clearly structured, guaranteeing rapid comprehensibility. 

In addition to the predefined styles, Audi Type Variable can also be used. Audi Type Variable is an infinitely variable font in terms of weighting and width. Its reduced scope compared to individual files provides benefits such as shorter loading times. 

Several file packages with the Audi Type Variable and predefined styles are available.

Type Weights 

The following font styles are available:

  • Audi Type Extended Bold to Normal for headlines and subheadlines
  • Audi Type Wide and/or Audi Type for body copy
  • Audi Type Wide for interactive text and buttons
    (text links, form fields, navigation, etc.)
  • Audi Type Bold, Audi Type Wide Bold, Audi Type Extended Bold (in headlines) for emphasis
  • Audi Type for footnotes and reference text

Type Sizes and Line Spacing

Type sizes can be selected based on project, end device and viewport width.
The Audi user interface comprises an adaptable type size system based on a modular scale. It can help designers and developers to …

  • create a consistent, harmonious typographical style even in large-scale projects,
  • handle different end devices and viewport widths flexibly
  • maintain a vertical rhythm

An individually adapted type size system can be compiled using a formula. The basis for this is a modular scale with two parameters which can be determined depending on the project concerned: base font size and ratio.

The base font size determines the size of the reading text. The ratio determines the extent of the type size contrast between formats at lower and higher hierarchy levels. The hierarchy level is defined by the type size index assigned to a format.

Both parameters can be determined for different viewport widths in order to create an optimum reading experience on every size of device.

 

Formula:


Type size = Base font size * (ratio^type size index)

SASS mixin: aui-responsive-type(typesizeindex, relativelineheight)

Pre-defined Typeface Styles

Headings

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>
  • Page title and article heading (.aui-headline-1)

    Type weight: Audi Type Extended Bold

    Type size index: 8

    Line height: 1.1×

    Letter spacing: -0.015em
    Color: #000000 / #ffffff
  • Chapter heading (.aui-headline-2)
    Type weight: Audi Type Extended Normal

    Type size index: 5

    Line height: 1.2×
    Letter spacing: -0.015em

    Color: #333333 / #f2f2f2
  • Section heading (.aui-headline-3)

    Type weight: Audi Type Extended Normal

    Type size index: 2

    Line height: 1.2×

    Letter spacing: -0.015em

    Color: #333333 / #f2f2f2
  • Information box heading (.aui-headline-4)
    
Type weight: Audi Type Extended Normal

    Type size index: 1
    
Line height: 1.2×

    Letter spacing: -0.015em

    Color: #333333 / #f2f2f2
  • Teaser and card title (.aui-headline-5)

    Type weight: Audi Type Extended Normal

    Type size index: 0
    
Line height: 1.33×

    Letter spacing: -0.015em
    
Color: #333333 / #f2f2f2
  • Paragraph heading (.aui-headline-6)
    
Type weight: Audi Type Wide Bold
    
Type size index: 0

    Line height: 1.5×
    
Color: #333333 / #f2f2f2

Body copy

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>
  • Lengthier sections of body copy (p)

    Type weight: Audi Type Wide
    
Type size index: 0

    Line height: 1.75×

    Color: #333333 / #f2f2f2
  • Shorter sections of body copy (.aui-shortread)

    Type weight: Audi Type Wide
    Type size index: 0
    
Line height: 1.5×

    Color: #333333 / #f2f2f2
  • Small print (.aui-small)

    Type weight: Audi Type Wide
    
Type size index: -2
    
Line height: 1.5×

    Color: #000000 / #ffffff

    Opacity: 40%
  • Reading body copy in portals with compact base font size (p.big)
    
Type weight: Audi Type Wide
    
Type size index: 1
    
Line height: 1.75×
    
Color: #333333 / #f2f2f2

Highlights

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>
  • Highlighted paragraph in body copy .aui-accentuated
    
Roof line (black, 1px)
  • Excerpts, highlighted quotation blocks (.aui-blockquote)
    
Type weight: Audi Type Wide Normal
    
Type size index: 1
    
Line height: 1.5×

    Color: #333333 / #f2f2f2
  • Highlighted words within a section of body copy (strong)

    Type weight: Audi Type Wide Bold

Lists

  • 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>
  • List with arrows as bullet points (aui-list–arrow)
  • Numbered list (aui-list–number)

The spacing between list elements is 1 x base font size.
The color of the bullet points and numbering is #000000/#ffffff with 30% opacity.

Other

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 body copy (.aui-textlink)

    Type weight: Audi Type Wide Normal

    Underlining with border-bottom: 1px
  • :hover
Color: #000000/#ffffff
  • :visited
Opacity: 60%
  • Caption and figure legends (.aui-caption)
    
Type weight: Audi Type Wide
    
Type size index: -1
    
Line height: 1.5×
    
Color: #333333 / #f2f2f2

Super- and Subscript

For superscript and subscript characters, the CSS font-feature-setting <sub> and <sup> is used.

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>

Use these font CSS specifications for a typographically correct display of superscript <sup> and subscripts <sub>.

}
  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 into Sketch library

(supported until 30.06.2023)

To ensure designers are using the most up-to-date components and icons in their products, the Audi UI Kit was created as a sketch library. Integrate these UI Kits to get the latest Audi Sketch Libraries. Updates will be made regularly and users will be informed when new versions of the Librarys are available.

 

The current Audi Sketch UI kit will only be supported until June 30, 2023. In order to enable the development of digital products in the future, we provide and update UI libraries for Figma.

Audi UI Kit for Figma

To enable as many designers as possible to work with the Audi user interface components the UI Kit and icons is also offered for Figma. Updates are made regularly and all changes are documented for users in the changelog.

We strongly recommend to join the Audi Figma Workspace for being always up-to-date and to collaborate with others.The Audi Design Kits are already included into the Figma teams in the Audi Workspace. To get access to a team or project please reach out to us here.

In case you are not working directly in the Audi Figma workspace you find the latest version as download below.

Audi Figma UI-Kit and Icons
Figma Files for UI-Komponents, Icon Library and a Readme-file to get started and how to proceed with updating the files.
ZIP
19.9 MB

Examples

Your CI-Support
May we help you?