GitHub

Themes and brands

Documentation and examples for themes usage guidelines.

On this page

The OUDS Web design system is provided with three independent themes, Orange, Orange compact, and Sosh, covering two different brands, Orange and Sosh. Each theme of OUDS Web is applied to all the elements of the design system. It has its own color scheme, typography, grid, logo, etc. The themes are designed to be used in different contexts and for different purposes, and must not be mixed together on the same project. Each project must choose one theme and apply it consistently across all its screens.

In this documentation, we present the three themes of OUDS Web. You can switch between them by using the menu at the top of the page.

Using multiple themes on the same project

OUDS Web is designed to be used with a single theme per project. However, in this page, as a demo, we use multiple themes. This must not be reproduced on projects, as it can lead to confusion and inconsistency in the design.

Orange

The Orange theme covers the default Orange brand for OUDS Web. It is designed to be used in a wide range of contexts and for a variety of purposes. The Orange brand features a vibrant color scheme, modern typography, and a distinctive logo.

Error

Success

Info

Warning

0

1

  • One
  • Two
  • Three
  • Positive
  • Info
  • Warning
  • Negative

Logo for Orange theme

OUDS Web provides a SVG file for the logo, which can be displayed in several sizes:

Orange logo 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46"><path fill="#ff7900" d="M0 0h283.46v283.46H0z" id="a"/><path fill="#fff" d="M40.51 202.47h202.47v40.5H40.51z" id="c"/></svg>

Download(SVG, 0.193ko)

Orange compact

The Orange compact theme covers the Orange brand for OUDS Web in a more compact way. It is designed to be used in contexts where a lot of information has to be displayed on each screen, such as business tools or operating interfaces. The Orange compact theme uses the same color scheme, typography, and logo as the Orange theme.

Error

Success

Info

Warning

0

1

  • One
  • Two
  • Three
  • Positive
  • Info
  • Warning
  • Negative

Logo for Orange compact theme

OUDS Web provides a SVG file for the logo, which can be displayed in several sizes. It is the same logo as the one used in the Orange theme:

Orange logo 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46"><path fill="#ff7900" d="M0 0h283.46v283.46H0z" id="a"/><path fill="#fff" d="M40.51 202.47h202.47v40.5H40.51z" id="c"/></svg>

Download(SVG, 0.193ko)

Sosh

The Sosh theme covers the default Sosh brand for OUDS Web. It is a more playful and youthful brand, defined as more casual and fun, like on social media or in marketing materials. The Sosh brand features a bright color scheme, playful typography, and a distinctive logo.

Error

Success

Info

Warning

0

1

  • One
  • Two
  • Three
  • Positive
  • Info
  • Warning
  • Negative

Logo for Sosh theme

OUDS Web provides a SVG file for the logo, which can be displayed in several sizes:

Sosh logo 
<svg viewBox="0 -66 269 269" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
    <path d="m0 98.645-260.051 18.733L-268.514.001-8.457-18.733 0 98.645Zm-208.555-55.819a528.665 528.665 0 0 0-7.799-3.1c-3.694-1.41-8.144-2.757-8.144-6.536 0-3.742 2.67-6.325 7.202-6.325 6.935 0 14.461 5.731 14.461 5.731l7.28-13.988c-5.14-3.416-13.669-7.74-22.97-7.74-12.717 0-24.585 8.553-24.585 22.849 0 10.127 4.964 16.576 14.033 20.733 3.118 1.36 8.427 3.459 10.675 4.275 7.038 2.646 7.491 4.064 7.491 7.065 0 3.817-5.119 5.567-10.408 5.567-6.847 0-13.391-3.838-16.827-6.904-1.595 2.724-7.511 14.533-7.511 14.533 7.511 4.674 14.641 8.887 24.724 8.887 14.41 0 28.67-8.069 28.67-23.42 0-10.77-5.54-17.301-16.292-21.627m51.393-16.19c-17.718 0-31.484 12.91-31.484 30.106 0 16.047 13.478 30.454 31.046 30.454 18.752 0 31.381-13.203 31.381-30.707 0-17.326-13.576-29.853-30.943-29.853m50.045 17.404c0-2.267 1.723-3.439 4.562-3.439 5.048 0 7.126 4.463 7.126 4.463l13.19-5.806c-3.555-8.051-10.623-12.622-18.813-12.622-12.717 0-21.993 7.563-21.993 18.731 0 20.192 25.743 16.473 25.743 23.572 0 2.688-3.364 4.02-6.194 4.02-5.154 0-8.051-5.059-8.051-5.059l-13.401 6.754c4.496 8.44 11.621 12.005 21.277 12.005 12.167 0 23.073-6.693 23.073-19.14 0-19.657-26.519-17.01-26.519-23.479m64.711-17.404c-11.225 0-16.77 8.571-16.77 8.571V13.538H-76.58v71.706h17.614V52.351c0-5.484 4.662-10.096 10.32-10.096 7.671 0 8.946 4.493 8.946 9.28v33.709h17.934V45.733c0-10.868-9.224-19.097-20.64-19.097M-25.861 29h.926v-5.929h1.497v-.89h-3.905v.89h1.482V29Zm8.709-6.932-2.34 5.201-2.403-5.258-1.43 6.989h.962l.705-4.293 2.166 4.486 1.985-4.486.844 4.293h.9l-1.389-6.932Z" style="fill:#00a1ab;fill-rule:nonzero" transform="translate(268.514 18.733)"/>
</svg>

Download(SVG, 1.805ko)