The colours, type, shapes and pictures of Brio in one place.
Brand
BrioBrioSaaS & Software - Modern and focused: indigo, violet and blue, the product on screen.
Palette Vivid Azure · Editorial style · pictures: App screens with saas & software subjects · fonts Crimson Pro and Karla
Colours
Every colour is a token in assets/css/theme.css (--wt-primary ...). The contrast of the text colours is shown against the page; WCAG AA needs 4.5:1 for text.
Light mode
Dark mode
Type
Crimson Pro
Headings
Karla
Text, buttons and forms (Google Fonts)
Replace three tools with one workspace
Everything a busy team needs
How to choose the right plan
Product, engineering and support see the same roadmap, deadlines and numbers, updated the second anything changes.
Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads. Real-time dashboards show what is on track and what needs attention.
Friendly people answer your questions quickly, by phone, chat or email.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
App screens in the template colours, with saas & software subjects. Every product picture shows its product. Replace them with your own photos of the same size (see PHOTOS.md for the photos of the live demo).
Design files
design-tokens/tokens.json- every token in the W3C Design Tokens format: in Figma, install the Tokens Studio plugin and load the file; Style Dictionary turns it into code for other platforms.design-tokens/style-guide.svg- this page as a board: drag it into Figma, Sketch or Illustrator and every swatch, text and shape stays editable.design-tokens/tokens.css- the same values as CSS variables for other projects in the brand.