This is the core styles for the Urbanity Premium Detailing website, defining the typography, colours, links, buttons, styled elements and more. When making changes to these website styles, keep in mind that these will be applied across the entire site, so be mindful of what you are updating.
Below are all of the core Urbanity Premium Detailing brand assets in various colours and layouts.
Our design system leverages a purposeful set of typographic styles. We’ve stress-tested this typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any Urbanity Premium Detailing project, while remaining as accessible as possible for everyone.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
This is an example of a Block Quote
Our design system leverages a purposeful set of colour styles as the perfect starting point for any brand or project. When it comes to colour, contrast is critical for ensuring text is legible.
These are the base black and white colour styles.
These are the main colours that make up the majority of the colours used in the design system.
There are three core primary colours for Urbanity Premium Detailing. This first collection is the Primary Navy, used in conjunction with the other primary colours for all core assets.
There are three core primary colours for Urbanity Premium Detailing. This next collection is the Primary Blue, used in conjunction with the other primary colours for all core assets. This is the brighter variant compared to the Primary Navy.
Grey is a neutral colour and is the foundation of the colour system. Almost everything in the UI design — text, form fields, backgrounds, dividers — are usually grey.
Error colours are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
Warning colours can communicate that an action is potentially destructive or "on-hold". These colours are commonly used in confirmations to grab the users' attention.
Success colours communicate a positive action, positive trend, or a successful confirmation.
Along with primary colours, it's helpful to have a selection of secondary colours to use in components such as pills, alerts and labels. These secondary colours should be used sparingly or as accents, while the primary colours should take precedence.
