Solid Work
Codesnippets

Solid Work

Codesnippets

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

Highlights

 

Size calculator

The size calculator helps to define the correct ratio of rings to typography.

 

Code preview

The digital components are shown in an interactive code preview and provided with a link to the development platform GitHub.

 

HTML
<button class="aui-button aui-button--primary aui-js-response" type="button">Primary Button</button>
 

Icon library

In the Icon Library there is a wide range of icons available for all applications, each in two sizes. All Audi icons are available as SVG and icon font for digital applications, as EPS for print applications and as PNG for digital applications and MS Office.

  • NFC
  • NFC-inactive
  • adblue
  • adblue-alert
  • address-book
  • administrator
  • announcements
  • anti-theft-alarm-system
  • anti-theft-alarm-system-alert
  • apps
  • arrow-down
  • arrow-left-light
  • arrow-left-normal
  • arrow-left-sharp
  • arrow-left-u-turn
  • arrow-narrow-down
  • arrow-narrow-up
  • arrow-right-light
  • arrow-right-normal
  • arrow-right-sharp
  • arrow-right-u-turn
  • arrow-straight-down
  • arrow-straight-up
  • arrow-up
  • audio-volume
    audio-volume
    audio-volume
  • aupeo
  • back
  • blog-post
  • bookmark
  • break-pad
  • break-pad-alert
  • business-address
  • calendar-events
  • camera
  • cancel
  • car
  • car-handover
  • car-search
  • caution
  • charging
  • climate
  • climate-auto
  • climate-electric
  • co2-emission
  • code
  • connect-key
  • consumption
  • content-activities
  • cubic-capacity
  • dashboard
  • dealer-request
  • dealer-search
  • decrease-size
  • direct-mail
  • discussion
  • distance
  • documents
  • edit
  • editorial
  • electric-charge-level-empty
  • electric-charge-level-full
  • electric-charge-level-half
  • electric-charge-level-onequarter
  • electric-charge-level-threequarter
  • electric-range
  • engine
  • erase
  • facebook
  • favorite
  • feed
  • filter
    filter
    filter
  • forward
  • fuel
  • fuel-range
  • fuel-tank-level-empty
  • fuel-tank-level-full
  • fuel-tank-level-half
  • fuel-tank-level-onequarter
  • fuel-tank-level-threequarters
  • gas-range
  • gas-tank-level-empty
  • gas-tank-level-full
  • gas-tank-level-half
  • gas-tank-level-onequarter
  • gas-tank-level-threequarters
  • geofence
  • geofence-alert
  • google-plus
  • gps
  • grab
  • group-discussion
  • groups
  • home
  • honk
  • honk-and-flash
  • hotline
  • increase-size
  • indicators
  • inspection
  • instagram
  • interior-configuration
  • languages
  • lights-day
  • lights-dim
  • lights-full-beam
  • lights-led
  • lights-xenon
  • line
  • linkedin
  • list
  • lock
  • logbook
  • login
  • main-user
  • mileage
  • mobile-phone
  • more
  • motor
  • my-dealer
  • myAudi-destinations
  • napster
  • news
  • notepad
  • off-canvas
  • offline-maps
  • parking
  • parking-in-left
  • parking-in-left-long
  • parking-in-right
  • parking-in-right-long
  • parking-in-straight
  • parking-out-left
  • parking-out-left-long
  • parking-out-right
  • parking-out-right-long
  • parking-out-straight
  • parking-pilot
  • pause
  • photo
  • pinterest
  • play
  • poi
  • poi-calendar
  • poi-car
  • poi-contact
  • poi-favorite
  • poi-home
  • poi-last-destination
  • poi-search
  • poi-work
  • pois
  • polls
  • power
  • pre-heating
  • print
  • profile
  • projects
  • public-transport
  • quattro
  • range
  • receive-e-mail-notification
  • recommended-destination
  • replay
  • results-list
  • rotate-image-left
  • rotate-image-right
  • rotate-left
  • rotate-right
  • roundabout-left
  • roundabout-long-left
  • roundabout-long-right
  • roundabout-right
  • roundabout-sharp-left
  • roundabout-sharp-right
  • roundabout-straight
  • rss-feed
  • search
  • select
  • select-all
  • send-to-vehicle
  • settings
    settings
    settings
  • share
  • shopping-basket
  • shuffle
  • skip-next
    skip-next
    skip-next
  • skip-previous
    skip-previous
    skip-previous
  • social-reader
  • status-update
  • sync
  • tag
  • test-drive
  • time
  • time-climate1
  • time-climate2
  • time-long
  • time-middle
  • time-short
  • top-speed
  • torque
  • tour
  • traffic
  • traffic-sign-recognition
  • traffic-sign-recognition-alert
  • train
  • transmission
  • tube
  • twitter
  • unlock
  • used-car-search
  • used-cars
  • user
  • user-whole-body
  • valet-parking
  • vehicle-signal
  • vehicle-wi-fi-1
  • vehicle-wi-fi-2
  • vehicle-wi-fi-3
  • vehicle-wi-fi-4
  • velocity
  • velocity-alert
  • video
  • view-360
  • vimeo
  • voice-call
  • voice-call-1
  • voice-call-2
  • voice-call-3
  • walk
  • weblink
  • wechat
    wechat
    wechat
  • weibo
    weibo
    weibo
  • work
  • xing
  • youku
    youku
    youku
  • youtube
  • zhihu
    zhihu
    zhihu
  • system-add
  • system-audio-off
  • system-audio-on
  • system-cancel
  • system-download
  • system-facebook
  • system-favorites
  • system-follow
  • system-google-plus
  • system-help
  • system-info
  • system-instagram
  • system-linkedin
  • system-paragraph
  • system-pause
  • system-pinterest
  • system-play
  • system-play-backwards
  • system-remove
  • system-replay
  • system-save-as
  • system-search
  • system-select
  • system-settings
  • system-share
  • system-size-decrease
  • system-size-increase
  • system-skip-next
  • system-skip-previous
  • system-twitter
  • system-upload
  • system-vimeo
  • system-wechat
    system-wechat
    system-wechat
  • system-weibo
    system-weibo
    system-weibo
  • system-xing
  • system-youku
    system-youku
    system-youku
  • system-youtube
  • system-zhihu
    system-zhihu
    system-zhihu