Skip to content

Style guide

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

Brand

Novaium Flow
On a light page
Novaium Flow
On a dark page

Events & Conferences - Vivid and festive: purples, pinks and neon, stages, tickets and crowds.

Palette Bold Magenta · Soft Modern style · pictures: Landscapes with events & conferences subjects · fonts Raleway and Lato

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
#d311a9
text on it 4.7:1
Secondary
#f31b4a
 
Accent
#58ed1d
text on it 11.4:1
Page
#fef7fc
 
Surface
#ffffff
 
Surface 2
#fceff9
 
Text
#1e2430
14.8:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#e4dae7
 
Links and brand text
#a40d83
6.7:1 on the page

Dark mode

Primary
#d311a9
text on it 4.7:1
Secondary
#f31b4a
 
Accent
#58ed1d
text on it 11.4:1
Page
#160212
 
Surface
#280320
 
Surface 2
#33102b
 
Text
#e5e9f0
16.4:1 on the page
Muted text
#9aa4b5
7.9:1 on the page
Border
#46263f
 
Links and brand text
#eda0dc
10.1:1 on the page

Type

Raleway

Headings

Lato

Text, buttons and forms (Google Fonts)

Save 40% with early bird tickets

More than a ticket to the talks

Ten talks you should not miss this year

Eighty speakers on stage and three thousand peers in the hallway, with a networking app that books your meetings before you arrive.

Thousands of attendees already trust us, and we work hard to keep it that way. Every attendee receives a certificate of participation. Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible.

Sponsors meet decision-makers in a relaxed, friendly setting.

Corners and depth

Corners
0.375rem
Large corners
0.75rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

NewPaidPendingOverdue12
Three days of keynotes, hands-on workshops and evening meetups.

Pictures

Landscapes in the template colours, with events & conferences 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).

Events & Conferences picture 1
Events & Conferences picture 2
Events & Conferences picture 3
Early bird pass
Early bird pass
Full access pass
Full access pass
Workshop ticket
Workshop ticket
VIP pass
VIP pass

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.