GitHub

Themes and brands

Documentation and examples for themes usage guidelines.

On this page

OUDS Web offers three distinct themes: Orange, Orange Compact, and Sosh, representing two brands—Orange and Sosh. Each theme is applied consistently across all elements of the design system, featuring its own color scheme, typography, grid, logo, and more. These themes are intended for use in different contexts and for various purposes, and they should not be mixed within the same project. Each project must select one theme and apply it uniformly across all screens.

This page showcases the three OUDS Web themes. Throughout the rest of the documentation, you can switch themes using the menu in the header.

Do not use multiple themes in the same project

OUDS Web is designed for use with a single theme per project. This page displays a themes showcase and should not be replicated in actual projects, as it can create confusion and inconsistency in design.

Orange

The Orange theme represents the default Orange brand for OUDS Web. It is suitable for a wide range of contexts and purposes, featuring Orange’s vibrant color scheme, modern typography, and distinctive logo.

Success

Warning

Previous Next

0

1

Link with chevron Link with icon
  • Success
  • Info
  • Warning
  • Error

Logo for Orange theme

OUDS Web provides a single SVG file for both master and small Orange logos, since it’s lightweight and easily made responsive. Here is the unminified SVG content:

Orange logos 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <defs>
    <style>@media(max-width:49.98px){#b{display:none}}@media(min-width:50px){#c{display:none}}</style>
  </defs>
  <path fill="#ff7900" d="M0 0h50v50H0z"/>
  <path fill="#fff" id="c" d="M7 35h35v7H7z"/>
  <path fill="#fff" id="b" stroke-width=".18" d="M19.61 45.16a4.1 4.1 0 01-2.29.69c-1.3 0-2.06-.87-2.06-2.02 0-1.56 1.43-2.39 4.38-2.72v-.39c0-.5-.39-.8-1.1-.8a2.07 2.07 0 00-1.69.8l-1.23-.7q.97-1.36 2.96-1.36c1.82 0 2.83.78 2.83 2.06v5.05h-1.63zm-2.56-1.47c0 .47.3.9.82.9.58 0 1.14-.23 1.7-.73v-1.64c-1.71.21-2.52.65-2.52 1.48zm5.8-4.7l1.51-.2.17.82c.86-.63 1.54-.96 2.4-.96 1.42 0 2.16.76 2.16 2.27v4.84h-1.83v-4.52c0-.86-.22-1.24-.88-1.24-.55 0-1.1.25-1.71.77v5h-1.82zm18.37 6.9c-2.05 0-3.27-1.31-3.27-3.6 0-2.3 1.23-3.64 3.24-3.64 2.01 0 3.2 1.28 3.2 3.54l-.01.36h-4.64c.02 1.31.57 1.98 1.64 1.98.7 0 1.15-.28 1.58-.88l1.34.74c-.59.99-1.65 1.5-3.08 1.5zm1.37-4.52c0-.93-.53-1.48-1.4-1.48-.82 0-1.34.53-1.41 1.48zm-36.44 4.6c-1.8 0-3.44-1.15-3.44-3.67s1.63-3.67 3.44-3.67c1.82 0 3.45 1.16 3.45 3.67 0 2.52-1.64 3.67-3.45 3.67zm0-5.8c-1.36 0-1.62 1.24-1.62 2.12 0 .88.26 2.13 1.62 2.13 1.37 0 1.63-1.24 1.63-2.13 0-.9-.26-2.12-1.63-2.12zm4.7-1.36h1.74v.81a2.7 2.7 0 011.92-.96 1.52 1.52 0 01.24.02v1.71h-.09c-.8 0-1.67.13-1.94.75v4.62h-1.87zm22.72 5.46c1.4 0 1.51-1.42 1.51-2.34 0-1.09-.53-1.98-1.52-1.98-.66 0-1.39.48-1.39 2.05 0 .86.06 2.28 1.4 2.27zm3.27-5.48v6.58c0 1.17-.09 3.08-3.4 3.1-1.37 0-2.64-.54-2.9-1.73l1.81-.3c.08.35.29.7 1.31.7.95 0 1.41-.46 1.41-1.55v-.81l-.02-.03c-.3.52-.73 1.02-1.8 1.02-1.62 0-2.9-1.13-2.9-3.48 0-2.33 1.32-3.63 2.8-3.63 1.39 0 1.9.63 2.02.96h-.02l.15-.83zm8.27-2.31h-.72v1.99h-.38v-2h-.72v-.3h1.82zm3 1.99h-.38v-1.92h-.01l-.75 1.92h-.24l-.76-1.92v1.92h-.39v-2.3h.59l.68 1.75.68-1.74h.58z"/>
</svg>

Download(SVG, 1.79ko)

Orange compact

The Orange Compact theme presents the Orange brand in a more condensed format. It is intended for contexts where a significant amount of information needs to be displayed on each screen, such as business tools or operational interfaces. The Orange Compact theme shares the same color scheme, typography, and logo as the Orange theme.

Success

Warning

Previous Next

0

1

Link with chevron Link with icon
  • Success
  • Info
  • Warning
  • Error

Logo for Orange compact theme

OUDS Web provides a single SVG file for both master and small Orange logos, since it’s lightweight and easily made responsive. It is the same logos as the ones used in the Orange theme. Here is the unminified SVG content:

Orange logos 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <defs>
    <style>@media(max-width:49.98px){#b{display:none}}@media(min-width:50px){#c{display:none}}</style>
  </defs>
  <path fill="#ff7900" d="M0 0h50v50H0z"/>
  <path fill="#fff" id="c" d="M7 35h35v7H7z"/>
  <path fill="#fff" id="b" stroke-width=".18" d="M19.61 45.16a4.1 4.1 0 01-2.29.69c-1.3 0-2.06-.87-2.06-2.02 0-1.56 1.43-2.39 4.38-2.72v-.39c0-.5-.39-.8-1.1-.8a2.07 2.07 0 00-1.69.8l-1.23-.7q.97-1.36 2.96-1.36c1.82 0 2.83.78 2.83 2.06v5.05h-1.63zm-2.56-1.47c0 .47.3.9.82.9.58 0 1.14-.23 1.7-.73v-1.64c-1.71.21-2.52.65-2.52 1.48zm5.8-4.7l1.51-.2.17.82c.86-.63 1.54-.96 2.4-.96 1.42 0 2.16.76 2.16 2.27v4.84h-1.83v-4.52c0-.86-.22-1.24-.88-1.24-.55 0-1.1.25-1.71.77v5h-1.82zm18.37 6.9c-2.05 0-3.27-1.31-3.27-3.6 0-2.3 1.23-3.64 3.24-3.64 2.01 0 3.2 1.28 3.2 3.54l-.01.36h-4.64c.02 1.31.57 1.98 1.64 1.98.7 0 1.15-.28 1.58-.88l1.34.74c-.59.99-1.65 1.5-3.08 1.5zm1.37-4.52c0-.93-.53-1.48-1.4-1.48-.82 0-1.34.53-1.41 1.48zm-36.44 4.6c-1.8 0-3.44-1.15-3.44-3.67s1.63-3.67 3.44-3.67c1.82 0 3.45 1.16 3.45 3.67 0 2.52-1.64 3.67-3.45 3.67zm0-5.8c-1.36 0-1.62 1.24-1.62 2.12 0 .88.26 2.13 1.62 2.13 1.37 0 1.63-1.24 1.63-2.13 0-.9-.26-2.12-1.63-2.12zm4.7-1.36h1.74v.81a2.7 2.7 0 011.92-.96 1.52 1.52 0 01.24.02v1.71h-.09c-.8 0-1.67.13-1.94.75v4.62h-1.87zm22.72 5.46c1.4 0 1.51-1.42 1.51-2.34 0-1.09-.53-1.98-1.52-1.98-.66 0-1.39.48-1.39 2.05 0 .86.06 2.28 1.4 2.27zm3.27-5.48v6.58c0 1.17-.09 3.08-3.4 3.1-1.37 0-2.64-.54-2.9-1.73l1.81-.3c.08.35.29.7 1.31.7.95 0 1.41-.46 1.41-1.55v-.81l-.02-.03c-.3.52-.73 1.02-1.8 1.02-1.62 0-2.9-1.13-2.9-3.48 0-2.33 1.32-3.63 2.8-3.63 1.39 0 1.9.63 2.02.96h-.02l.15-.83zm8.27-2.31h-.72v1.99h-.38v-2h-.72v-.3h1.82zm3 1.99h-.38v-1.92h-.01l-.75 1.92h-.24l-.76-1.92v1.92h-.39v-2.3h.59l.68 1.75.68-1.74h.58z"/>
</svg>

Download(SVG, 1.79ko)

Sosh

The Sosh theme represents the default Sosh brand for OUDS Web. It embodies a more playful and youthful spirit, akin to social media or marketing materials. The Sosh brand features a bright color scheme, playful typography, and a distinctive logo.

Success

Warning

Previous Next

0

1

Link with chevron Link with icon
  • Success
  • Info
  • Warning
  • Error

Logo for Sosh theme

OUDS Web provides an SVG file for the logo. Here is the unminified SVG content:

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:#0173c1;fill-rule:nonzero" transform="translate(268.514 18.733)"/>
</svg>

Download(SVG, 1.799ko)