Skip to content

Style guide

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

Brand

Haloara Kit
On a light page
Haloara Kit
On a dark page

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

Palette Emerald · Swiss Grid style · pictures: Line waves with education & courses subjects · fonts Archivo and Libre Franklin

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
#059669
text on it 4.7:1
Secondary
#10b981
 
Accent
#f97316
text on it 6.3:1
Page
#f4fbf8
 
Surface
#ffffff
 
Surface 2
#ecf7f3
 
Text
#1e2430
14.8:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#d8e2e3
 
Links and brand text
#046647
6.7:1 on the page

Dark mode

Primary
#059669
text on it 4.7:1
Secondary
#10b981
 
Accent
#f97316
text on it 6.3:1
Page
#07130f
 
Surface
#0f201a
 
Surface 2
#1b2b25
 
Text
#e5e9f0
15.5:1 on the page
Muted text
#9aa4b5
7.5:1 on the page
Border
#313f3a
 
Links and brand text
#75c5ad
9.3:1 on the page

Type

Archivo

Headings

Libre Franklin

Text, buttons and forms (Google Fonts)

Real feedback within two days

Built for learning that sticks

How to stay motivated when learning online

Guided paths take you from beginner to job-ready in about six months, with a career coach for your CV and interviews.

We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Try the first lesson of any course for free before you decide.

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

Corners and depth

Corners
0.125rem
Large corners
0.25rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

NewPaidPendingOverdue12
Short quizzes after each lesson help new knowledge stick.

Pictures

Line waves 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.