Skip to content
Cora Labs

Style guide

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

Brand

Cora Labs
On a light page
Cora Labs
On a dark page

Finance & Fintech - Precise, secure and modern: deep blues and greens, cards, coins and growth.

Palette Bold Violet · Neo-Brutalism style · pictures: Line waves with finance & fintech subjects · fonts Syne 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
#8612de
text on it 6.7:1
Secondary
#f31bd5
 
Accent
#deed1d
text on it 13.7:1
Page
#fbf7fe
 
Surface
#ffffff
 
Surface 2
#f7effd
 
Text
#1e2430
14.7:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#dfdaea
 
Links and brand text
#7610c3
7.5:1 on the page

Dark mode

Primary
#8612de
text on it 6.7:1
Secondary
#f31bd5
 
Accent
#deed1d
text on it 13.7:1
Page
#0d0216
 
Surface
#180328
 
Surface 2
#241033
 
Text
#e5e9f0
16.6:1 on the page
Muted text
#9aa4b5
8.1:1 on the page
Border
#382646
 
Links and brand text
#cfa1f2
9.7:1 on the page

Type

Syne

Headings

Archivo

Text, buttons and forms (Google Fonts)

Payroll that runs on time, every time

Security and control, built in

The small habits that make a big difference

Open an account online in about ten minutes with your ID and company number. No branch visit, no printed forms.

Every detail is handled by people who care about getting it right. Payroll runs on time, with tax and pension payments handled for you. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

Cash flow forecasts show where you will be next month, not just today.

Corners and depth

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

Components

NewPaidPendingOverdue12
Accounting sync keeps your books up to date without manual exports.

Pictures

Line waves in the template colours, with finance & fintech 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).

Finance & Fintech picture 1
Finance & Fintech picture 2
Finance & Fintech picture 3
Basic account
Basic account
Pro account
Pro account
Virtual card
Virtual card
Metal card
Metal card

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.