Ricardo styleguide

Make (auto.)ricardo.ch easy and exciting

The styleguide is a code repository that provides engineers with a toolset to build Ricardo-like web applications easy and fast. It's the single source of truth for both engineers and designers for the user experience on products from the ricardo Group. The styleguide is a showcase of the styles itself as well.



  • fast to integrate for engineers
  • to maintain for designers
  • single source of truth for both engineers and designers
  • consumer of itself (showcase)

Design principles

All elements and components are designed and should be used in conformity with the following principles:

Interactive dynamic content personnalized
Seamless one page flow
Emotional exciting experience
Any suggestions to improve this styleguide are highly appreciated.

Quick start

We recommend using the CDN version like so:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <style href="http://ricstyle-6a38.kxcdn.com/1.1.2/lib/ricardo.min.css">
  <script src="http://ricstyle-6a38.kxcdn.com/1.1.2/lib/ricardo.min.js">


Github repository