Skip to content

Style guide

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

Brand

Tideen Hub
On a light page
Tideen Hub
On a dark page

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

Palette Deep Jade 2 · Minimal Luxury style · pictures: Soft blobs with finance & fintech subjects · fonts Fraunces and Josefin Sans

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
#1a9e6e
text on it 5.2:1
Secondary
#199cbe
 
Accent
#ed1d68
text on it 4.2:1
Page
#f7fcfa
 
Surface
#ffffff
 
Surface 2
#eff9f5
 
Text
#1e2430
15.0:1 on the page
Muted text
#4f5867
6.9:1 on the page
Border
#d9e3e4
 
Links and brand text
#105e42
7.5:1 on the page

Dark mode

Primary
#1a9e6e
text on it 5.2:1
Secondary
#199cbe
 
Accent
#ed1d68
text on it 4.2:1
Page
#03100b
 
Surface
#051c14
 
Surface 2
#122720
 
Text
#e5e9f0
15.9:1 on the page
Muted text
#9aa4b5
7.7:1 on the page
Border
#283c35
 
Links and brand text
#6ac0a1
8.9:1 on the page

Type

Fraunces

Headings

Josefin Sans

Text, buttons and forms (Google Fonts)

Business banking without the paperwork

Designed for busy finance teams

Paying international suppliers without high fees

Receipts match themselves to card payments and sync to your accounting software, so month-end takes two days instead of two weeks.

Send and receive money in more than 30 currencies at fair exchange rates. Open a business account online in about ten minutes, with no branch visit. Your money is protected by bank-grade security and regulated partners. We keep things simple, so you can focus on what matters to you.

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

Corners and depth

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

Components

NewPaidPendingOverdue12
Set approval rules for large payments and see who spent what, and why.

Pictures

Soft blobs 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.