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.

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