Solid Work
Digital first
How do you renew a successful brand? In reality, it does so itself: after all, a successful brand is always ahead of its time. So let’s simply let it breathe more freely and adopt a new perspective. In other words: let’s approach it from a digital angle. The visual appearance is no longer a static structure: it’s a living interface that interacts with human beings.
This platform provides a direct, straightforward path to approaching the design of the Audi brand. It offers lots of examples and instructions that convey the essentials and provide inspiration for ideas – and it’s structured in such a way that you can get started right away
Simply click your way in. Enjoy!

Latest Updates
-
User Interface / UI Introduction
10. Apr 2018Updated Sketch Kit 1.2
-
User Interface / UI Introduction
05. Feb 2018Introducing video for User Interface
-
Basics / Illustration
14. Nov 2017New Basic for Illustrations

Code preview
The digital components are shown in an interactive code preview and provided with a link to the development platform GitHub.
<svg class="audiicon"><use xlink:href="#adblue-small"
class="audiicon-small"></use><use
xlink:href="#adblue-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-adblue"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#adblue-alert-small"
class="audiicon-small"></use><use
xlink:href="#adblue-alert-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-adblue-alert"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#address-book-small"
class="audiicon-small"></use><use
xlink:href="#address-book-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-address-book"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#administrator-small"
class="audiicon-small"></use><use
xlink:href="#administrator-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-administrator"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#announcements-small"
class="audiicon-small"></use><use
xlink:href="#announcements-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-announcements"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#anti-theft-alarm-system-small"
class="audiicon-small"></use><use
xlink:href="#anti-theft-alarm-system-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-anti-theft-alarm-system"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#anti-theft-alarm-system-alert-small"
class="audiicon-small"></use><use
xlink:href="#anti-theft-alarm-system-alert-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-anti-theft-alarm-system-alert"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#apps-small"
class="audiicon-small"></use><use
xlink:href="#apps-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-apps"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-down-small"
class="audiicon-small"></use><use
xlink:href="#arrow-down-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-down"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-left-light-small"
class="audiicon-small"></use><use
xlink:href="#arrow-left-light-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-left-light"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-left-normal-small"
class="audiicon-small"></use><use
xlink:href="#arrow-left-normal-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-left-normal"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-left-sharp-small"
class="audiicon-small"></use><use
xlink:href="#arrow-left-sharp-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-left-sharp"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-left-u-turn-small"
class="audiicon-small"></use><use
xlink:href="#arrow-left-u-turn-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-left-u-turn"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-narrow-down-small"
class="audiicon-small"></use><use
xlink:href="#arrow-narrow-down-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-narrow-down"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-narrow-up-small"
class="audiicon-small"></use><use
xlink:href="#arrow-narrow-up-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-narrow-up"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-right-light-small"
class="audiicon-small"></use><use
xlink:href="#arrow-right-light-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-right-light"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-right-normal-small"
class="audiicon-small"></use><use
xlink:href="#arrow-right-normal-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-right-normal"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-right-sharp-small"
class="audiicon-small"></use><use
xlink:href="#arrow-right-sharp-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-right-sharp"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-right-u-turn-small"
class="audiicon-small"></use><use
xlink:href="#arrow-right-u-turn-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-right-u-turn"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-straight-down-small"
class="audiicon-small"></use><use
xlink:href="#arrow-straight-down-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-straight-down"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-straight-up-small"
class="audiicon-small"></use><use
xlink:href="#arrow-straight-up-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-straight-up"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#arrow-up-small"
class="audiicon-small"></use><use
xlink:href="#arrow-up-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-arrow-up"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#audio-volume-small"
class="audiicon-small"></use><use
xlink:href="#audio-volume-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-audio-volume"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#aupeo-small"
class="audiicon-small"></use><use
xlink:href="#aupeo-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-aupeo"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#back-small"
class="audiicon-small"></use><use
xlink:href="#back-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-back"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#blog-post-small"
class="audiicon-small"></use><use
xlink:href="#blog-post-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-blog-post"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#bookmark-small"
class="audiicon-small"></use><use
xlink:href="#bookmark-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-bookmark"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#brake-pad-small"
class="audiicon-small"></use><use
xlink:href="#brake-pad-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-brake-pad"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#brake-pad-alert-small"
class="audiicon-small"></use><use
xlink:href="#brake-pad-alert-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-brake-pad-alert"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#business-address-small"
class="audiicon-small"></use><use
xlink:href="#business-address-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-business-address"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#calculator-small"
class="audiicon-small"></use><use
xlink:href="#calculator-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-calculator"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#calendar-events-small"
class="audiicon-small"></use><use
xlink:href="#calendar-events-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-calendar-events"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#camera-small"
class="audiicon-small"></use><use
xlink:href="#camera-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-camera"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#cancel-small"
class="audiicon-small"></use><use
xlink:href="#cancel-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-cancel"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#car-small"
class="audiicon-small"></use><use
xlink:href="#car-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-car"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#car-handover-small"
class="audiicon-small"></use><use
xlink:href="#car-handover-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-car-handover"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#car-search-small"
class="audiicon-small"></use><use
xlink:href="#car-search-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-car-search"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#catalogue-small"
class="audiicon-small"></use><use
xlink:href="#catalogue-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-catalogue"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#caution-small"
class="audiicon-small"></use><use
xlink:href="#caution-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-caution"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#charge-level-small"
class="audiicon-small"></use><use
xlink:href="#charge-level-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-charge-level"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#charging-small"
class="audiicon-small"></use><use
xlink:href="#charging-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-charging"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#charging-station-small"
class="audiicon-small"></use><use
xlink:href="#charging-station-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-charging-station"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#climate-small"
class="audiicon-small"></use><use
xlink:href="#climate-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-climate"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#climate-auto-small"
class="audiicon-small"></use><use
xlink:href="#climate-auto-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-climate-auto"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#climate-electric-small"
class="audiicon-small"></use><use
xlink:href="#climate-electric-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-climate-electric"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#co2-emission-small"
class="audiicon-small"></use><use
xlink:href="#co2-emission-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-co2-emission"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#code-small"
class="audiicon-small"></use><use
xlink:href="#code-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-code"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#connect-key-small"
class="audiicon-small"></use><use
xlink:href="#connect-key-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-connect-key"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#consumption-small"
class="audiicon-small"></use><use
xlink:href="#consumption-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-consumption"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#content-activities-small"
class="audiicon-small"></use><use
xlink:href="#content-activities-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-content-activities"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#cubic-capacity-small"
class="audiicon-small"></use><use
xlink:href="#cubic-capacity-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-cubic-capacity"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#dashboard-small"
class="audiicon-small"></use><use
xlink:href="#dashboard-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-dashboard"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#dealer-request-small"
class="audiicon-small"></use><use
xlink:href="#dealer-request-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-dealer-request"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#dealer-search-small"
class="audiicon-small"></use><use
xlink:href="#dealer-search-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-dealer-search"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#direct-mail-small"
class="audiicon-small"></use><use
xlink:href="#direct-mail-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-direct-mail"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#discussion-small"
class="audiicon-small"></use><use
xlink:href="#discussion-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-discussion"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#distance-small"
class="audiicon-small"></use><use
xlink:href="#distance-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-distance"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#document-pdf-small"
class="audiicon-small"></use><use
xlink:href="#document-pdf-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-document-pdf"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#document-pricelist-dollar-small"
class="audiicon-small"></use><use
xlink:href="#document-pricelist-dollar-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-document-pricelist-dollar"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#document-pricelist-euro-small"
class="audiicon-small"></use><use
xlink:href="#document-pricelist-euro-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-document-pricelist-euro"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#document-taxation-small"
class="audiicon-small"></use><use
xlink:href="#document-taxation-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-document-taxation"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#documents-small"
class="audiicon-small"></use><use
xlink:href="#documents-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-documents"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#download-small"
class="audiicon-small"></use><use
xlink:href="#download-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-download"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#edit-small"
class="audiicon-small"></use><use
xlink:href="#edit-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-edit"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#editorial-small"
class="audiicon-small"></use><use
xlink:href="#editorial-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-editorial"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#electric-range-small"
class="audiicon-small"></use><use
xlink:href="#electric-range-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-electric-range"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#engine-small"
class="audiicon-small"></use><use
xlink:href="#engine-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-engine"
aria-hidden="true"></i>
<svg class="audiicon"><use xlink:href="#erase-small"
class="audiicon-small"></use><use
xlink:href="#erase-large" class="audiicon-large"></use></svg>
<i class="audiglyph audiglyph-erase"
aria-hidden="true"></i>