Koi
Defining our brand
Logo
Colours
Core Colours
Secondary Colours
Gradients
Colour combinations
Product Colours
Typography
Localised languages
Brand architecture
Illustrations
Icons
Photography
Video
Governance
Design at CredAble
Foundations
Components
Patterns
Resources
Colours
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
Core colors
Koi Orange symbolizing innovation and dynamism, orange conveys CredAble's commitment to creative financial solutions that empower businesses to thrive.
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
Space Black
HEX: #1C1C1D
RGB: 28/ 28 / 29
CMYK: 3 / 3 / 0 / 89
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
10
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
20
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
40
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
60
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
80
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 97 / 1
90
Koi Orange
HEX: #FD8618
RGB: 0 / 96 / 217
CMYK: 100 / 0 / 55 / 15
100
Koi Orange Dark
HEX: #E76507
RGB: 231 / 101 / 7
CMYK: 0 / 56 / 97 / 9
100
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
05
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
10
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
20
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
40
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
60
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
80
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
90
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
100
Secondary colors
Dark Gray reflecting stability and professionalism, dark grey underscores CredAble's reliability and integrity in providing trustworthy financial services.
True Yellow
HEX: #FFF72C
RGB: 255 / 247 / 44
CMYK: 0 / 3 / 83 / 0
Electric Blue
HEX: #82E1FF
RGB: 255 / 247 / 44
CMYK: 47 / 0 / 72 / 0
True Yellow
HEX: #F8EF17
RGB: 248 / 239 / 23
CMYK: 0 / 4 / 91 / 3
20
True Yellow
HEX: #F8EF17
RGB: 248 / 239 / 23
CMYK: 0 / 4 / 91 / 3
60
True Yellow
HEX: #F8EF17
RGB: 248 / 239 / 23
CMYK: 0 / I 4 / 91 / 3
100
Amber
HEX: #FFCC17
RGB: 255 / 204 / 23
CMYK: 0 / 20 / 91 / 0
100
Electric Blue
HEX: #82E1FF
RGB: 130 / 225 / 255
CMYK: 49 / 12 / 0 / 0
20
Electric Blue
HEX: #82E1FF
RGB: 130 / 225 / 255
CMYK: 49 / 12 / 0 / 0
60
Electric Blue
HEX: #82E1FF
RGB: 130 / 225 / 255
CMYK: 49 / 12 / 0 / 0
100
Indigo Blue
HEX: #FFCC17
RGB: 0 / 36 / 91
CMYK: 100 / 60 / 0 / 64
100
Gradients
Primary
Koi Gradient
HEX: #001B44
RGB: 0/ 23 / 46
CMYK:
Sunrise
HEX: #001B44
RGB: 0/ 23 / 46
CMYK:
Secondary
Space Black Gradient
HEX: #82E1FF
RGB: 255 / 247 / 44
CMYK:47 / 0 / 72 / 0
PeachSky
HEX: #82E1FF
RGB: 255 / 247 / 44
CMYK:47 / 0 / 72 / 0
colour combinations
Our colour combos are purposefully complementary, striking, and accessible. They were made to match up, so let’s keep them that way.
Go to typography guidelines.
✅ Good combination
Koi Orange
Fintech
Shadow Blue
Fintech
Koi Yellow
Fintech
Electric Blue
Fintech
❌ Bad combination
Koi Orange
Fintech
Shadow Blue
Fintech
Koi Yellow
Fintech
Electric Blue
Fintech
Product colours
Content colours
Our colour combos are purposefully complementary, striking, and accessible. They were made to match up, so let’s keep them that way.
Shadow Blue
HEX: #1C1C1D
RGB: 28 / 28 / 29
CMYK: 3 / 3 / 0 / 89
Content Primary
Use to emphasise primary content in relation to other elements nearby.
Content Secondary
HEX: #383F49
RGB: 56 / 63 / 73
CMYK: 23 / 14 / 0 / 71
Content Secondary
Use for most body text, and in supportive elements that give context to content that's close to it.
Content Tertiary
HEX: #697489
RGB: 105 / 116 / 137
CMYK: 23 / 15 / 0 / 46
Content Tertiary
Use in form inputs for placeholders, and for the label that says a field is ‘Optional’. Avoid using elsewhere.
Koi Orange
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
Content Link
Use for links and for external link icons that appear in line with link text.
White
#FFFFFF
0
Shadow Blue
#1C1C1D
5
Shadow Blue
#1C1C1D
15
Shadow Blue
#1C1C1D
35
Shadow Blue
#1C1C1D
45
Shadow Blue
#1C1C1D
60
Shadow Blue
#1C1C1D
80
Shadow Blue
#1C1C1D
4
Background colours
Background colours are used for larger surface areas that are light enough to be overlayed with content and other components.
Background Screen
HEX: #FFFFFF
RGB: 255/ 255/ 255
CMYK: 18 / 9 / 0 / 96
Background Screen
The lowest level background used in most screens.
Background Elevated
HEX: #FFFFFF
RGB: 255/ 255/ 255
CMYK: 18 / 9 / 0 / 96
Background Elevated
Use for elevated surfaces that partially show the content behind it, like bottom sheets and sidebars.
Background Neutral
HEX: #F1F2F4
RGB: 241 / 242 / 244
CMYK: 1 / 1 / 0 / 4
Background Neutral
Use for delineating areas without using borders, like neutral alerts and avatars.
Background Overlay
HEX: #F1F2F4
RGB: 241 / 242 / 244
CMYK: 1 / 1 / 0 / 4
Background Overlay
Use for faintly darkening an area, for example on loading shimmers
White
HEX: #FFFFFF
RGB: 255 / 255 / 255
CMYK: 0 / 0 / 0 / 0
100
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
5
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
15
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
30
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
40
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
70
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
90
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
100
Border colours
We use border colours to subtly separate different blocks of content.
Border Neutral
HEX: #DBDDE1
RGB: 219 / 221 / 225
CMYK: 3 / 2 / 0 / 12
Border Neutral
Use in most separators, for example in the section header and tabs components.
Border Overlay
HEX: #DBDDE1
RGB: 219 / 221 / 225
CMYK: 3 / 2 / 0 / 12
Border Overlay
Use on the edges of images to differentiate them from the background, such as flags in avatars.
Sentiment colours
Our sentiment colours are used to indicate positive, negative, or warning.
They're needed in components like alerts and error messages. But it's best to avoid using them elsewhere on screens where possible. If you need to emphasise text, it's better to use bold and the Content Primary instead.
Sentiment Negative
HEX: #D52108
RGB: 213 / 33 / 08
CMYK: 0 / 85 / 96 / 16
Sentiment Negative
Indicates negative sentiment, for example on error states or destructive actions. Can be used as text or as a background.
Sentiment Positive
HEX: #00A524
RGB: 0 / 165 / 36
CMYK: 100 / 0 / 168 / 35
Sentiment Positive
Indicates positive sentiment, for example in positive alerts. Can be used as text or as a background.
Sentiment Warning
HEX: #FFBC15
RGB: 255 / 288 / 21
CMYK: 0 / 26 / 92 / 0
Sentiment Warning
Indicates warning sentiment, for example on alerts. Should only be used as a background colour and is not accessible as text.
Base colours
Base colours are useful colours that we can use in several different scenarios.
Base Contrast
HEX: #FFFFFF
RGB: 255/ 255/ 255
CMYK: 18 / 9 / 0 / 96
Base Contrast
Use for copy on negative buttons. Turns dark on dark mode to keep elements visible.
Base Light
HEX: #FFFFFF
RGB: 255/ 255/ 255
CMYK: 18 / 9 / 0 / 96
Base Light
Use in informational or interactive elements where white is needed, or where other colours would be too prominent in the hierarchy.
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
Base Dark
Use in informational or interactive elements where a dark colour is needed.
Supporting colours
Base colours are useful colours that we can use in several different scenarios like status, illstartions.
Amber
#E08D00
20
Amber
#E08D00
35
Amber Dark
#B87503
100
Amber
#E08D00
100
Amber Bright
#FCB400
100
Pink
#E929BA
15
Pink
#E929BA
45
Pink Dark
#B2158B
100
Pink
#E929BA
100
Pink Bright
#FF08C2
100
Cyan
#01A9DB
20
Cyan
#01A9DB
55
Cyan Dark
#0B76B7
100
Cyan
#01A9DB
100
Cyan Bright
#18BFFF
100
Orange
#F7653B
20
Orange
#F7653B
55
Orange Dark
#D74D26
100
Orange
#F7653B
100
Orange Bright
#FF6F2C
100
Purple
#7C39ED
15
Purple
#7C39ED
40
Purple Dark
#6B1CB0
100
Purple
#7C39ED
100
Purple Bright
#8B46FF
100
Teal
#02AAA4
15
Teal
#02AAA4
45
Teal Dark
#06A09B
100
Teal
#02AAA4
100
Teal Bright
#20D9D2
100
Crimson
#EF3061
15
Crimson
#EF3061
45
Crimson Dark
#BA1E45
100
Crimson
#EF3061
100
Crimson Bright
#F82B60
100
Blue
#EF3061
20
Blue
#EF3061
45
Blue Dark
#2750AE
100
Blue
#EF3061
100
Blue Bright
#2D7FF9
100
Green
#EF3061
15
Green
#EF3061
45
Green Dark
#338A17
100
Green
#EF3061
100
Green Bright
#20C933
100
Colour balance in product screens
We’re not afraid of white space. White is the most prominent colour in our UI and we use it to let screens breathe. We complement the white with our neutral colour, which we use to add warmth and separate elements.
Next up are the content greys, followed by a smaller proportion of Forest Green for interactivity, plus an occasional pop of Bright Green as an accent.
White Space
Neutral surface
Content greys
Koi Orange
Interactivity
Previous
Next
© CredAble 2024