Skip to content

Style guide

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

Brand

Koraan Hub
On a light page
Koraan Hub
On a dark page

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

Palette Soft Rose · Neo-Brutalism style · pictures: Landscapes with events & conferences subjects · fonts Unbounded and Archivo

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
#c14970
text on it 4.7:1
Secondary
#d760d2
 
Accent
#1dc7ed
text on it 8.8:1
Page
#fdf9fa
 
Surface
#ffffff
 
Surface 2
#fbf3f5
 
Text
#1e2430
14.9:1 on the page
Muted text
#4f5867
6.9:1 on the page
Border
#e3dee4
 
Links and brand text
#963857
6.7:1 on the page

Dark mode

Primary
#c14970
text on it 4.7:1
Secondary
#d760d2
 
Accent
#1dc7ed
text on it 8.8:1
Page
#14080c
 
Surface
#250e15
 
Surface 2
#301a21
 
Text
#e5e9f0
16.1:1 on the page
Muted text
#9aa4b5
7.8:1 on the page
Border
#443036
 
Links and brand text
#e2aabc
10.0:1 on the page

Type

Unbounded

Headings

Archivo

Text, buttons and forms (Google Fonts)

Workshops with thirty seats, not three hundred

Why attendees come back every year

A beginner's guide to getting started

Every main-stage talk is recorded and online within 48 hours, so you can join a workshop without missing the keynote.

Group tickets include a private meeting room for your team. We measure success by how many attendees come back and tell their friends. Our evening party is the best place to turn talks into friendships.

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

Corners and depth

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

Components

NewPaidPendingOverdue12
We listen first, then build a plan around what you actually need.

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.