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. Whilst the MVP is now available, Audi will continue to develop and add to this library.

The use of the different type weights enables content to be clearly structured and pages to be showcased in an effective, diversified manner. The text formats provided here are based on the typography basics.

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 for highlights
  • Audi Type for footnotes and reference text

In the interests of reduced page weight, it is possible to do without using the type weight Audi Type Wide Bold, depending on the project.

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)

Line spacing and other vertical spacings between elements can be defined using the multiple of a basic unit. It is derived from the base font size Using basic unit in this way ensures text elements maintain a vertical rhythm.

 

Formula:

Basic unit = base font size/4
Spacing = basic unit × X

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 Light
    
Type size index: 0

    Line height: 1.75×

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

    Type weight: Audi Type Wide Light

    Type size index: 0
    
Line height: 1.5×

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

    Type weight: Audi Type Wide
    Light
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
    Light
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. <a class="aui-textlink" href="#">Where are those transmissions you intercepted?</a> 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 <a class="aui-textlink" href="#">Your Highness</a>, we will discuss the location of your hidden <strong>Rebel base</strong>.
</p>
<p class="aui-big">
  This <a class="aui-textlink" href="#">little</a> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-small">
  This <a class="aui-textlink" href="#">little</a> 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 <a class="aui-textlink" href="#">battle station</a> 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 Light
    
Type size index: -1
    
Line height: 1.5×
    
Color: #333333 / #f2f2f2

Audi UI Kit – Integration into Sketch library

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

 

Examples

Your CI-Support
May we help you?