Skip to content

Style guide

The colours, type, shapes and pictures of Aeroora in one place.

Brand

Aeroora
On a light page
Aeroora
On a dark page

SaaS & Software - Modern and focused: indigo, violet and blue, the product on screen.

Palette Bright Indigo · Soft Modern style · pictures: Gradient mesh with saas & software subjects · fonts Outfit and Nunito

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

Primary
#2114f5
text on it 8.5:1
Secondary
#ad2efa
 
Accent
#79ed1d
text on it 11.8:1
Page
#f7f7ff
 
Surface
#ffffff
 
Surface 2
#f0efff
 
Text
#1e2430
14.6:1 on the page
Muted text
#4f5867
6.7:1 on the page
Border
#d9daec
 
Links and brand text
#2114f5
7.9:1 on the page

Dark mode

Primary
#2114f5
text on it 8.5:1
Secondary
#ad2efa
 
Accent
#79ed1d
text on it 11.8:1
Page
#030219
 
Surface
#06042c
 
Surface 2
#121137
 
Text
#e5e9f0
16.8:1 on the page
Muted text
#9aa4b5
8.1:1 on the page
Border
#29274a
 
Links and brand text
#b4b0fc
10.3:1 on the page

Type

Outfit

Headings

Nunito

Text, buttons and forms (Google Fonts)

Fewer meetings, more finished work

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.

Your data is encrypted, backed up daily and hosted in the region you choose. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many customers come back and tell their friends. Our team has done this many times, so you never have to guess.

Clear reports turn weekly numbers into decisions in minutes, not days.

Corners and depth

Corners
0.625rem
Large corners
1.25rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

NewPaidPendingOverdue12
Friendly people answer your questions quickly, by phone, chat or email.

Pictures

Gradient mesh 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).

SaaS & Software picture 1
SaaS & Software picture 2
SaaS & Software picture 3
Starter plan
Starter plan
Team plan
Team plan
Business plan
Business plan
Enterprise suite
Enterprise suite

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.