Skip to content

Style guide

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

Brand

Cora Nest
On a light page
Cora Nest
On a dark page

Education & Courses - Friendly and clear: confident blues and violets with warm highlights, books and screens.

Palette Bold Violet 2 · Aurora Glass style · pictures: Isometric blocks with education & courses subjects · fonts Lexend and Inter

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
#7212de
text on it 7.4:1
Secondary
#f31beb
 
Accent
#ede61d
text on it 13.5:1
Page
#faf7fe
 
Surface
#ffffff
 
Surface 2
#f5effd
 
Text
#1e2430
14.7:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#dedaea
 
Links and brand text
#7212de
6.9:1 on the page

Dark mode

Primary
#7212de
text on it 7.4:1
Secondary
#f31beb
 
Accent
#ede61d
text on it 13.5:1
Page
#0b0216
 
Surface
#150328
 
Surface 2
#211033
 
Text
#e5e9f0
16.7:1 on the page
Muted text
#9aa4b5
8.1:1 on the page
Border
#362646
 
Links and brand text
#c7a1f2
9.5:1 on the page

Type

Lexend

Headings

Inter

Text, buttons and forms (Google Fonts)

Learn by doing, not just watching

What makes Cora Nest different

Headlines people actually click

The first lesson of every course is free, no card needed, so you know the teaching style before you pay.

Instructors are working professionals who teach what they use every day. Friendly people answer your questions quickly, by phone, chat or email. Learn on your schedule, with lessons that fit into a lunch break.

Clear prices, honest advice and no surprises along the way.

Corners and depth

Corners
0.875rem
Large corners
1.75rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

NewPaidPendingOverdue12
Guided learning paths take you from beginner to job-ready step by step.

Pictures

Isometric blocks in the template colours, with education & courses 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).

Education & Courses picture 1
Education & Courses picture 2
Education & Courses picture 3
UX fundamentals
UX fundamentals
Data analysis
Data analysis
Web development
Web development
Public speaking
Public speaking

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.