Design System- CredAble
Structured set of components, patterns, and guidelines for CredAble
Koi
What is Koi
KOI - A CredAble’s design system is a symbol of luck, prosperity and good fortune. The graceful movement and vibrant color of Koi Fish also represents CredAble’s color theory which signifies flexible financing option that aims to prosperity.
The real value of this design system liens in its ability to give designers a consistent and efficient foundation, fostering creativity collaboration, and rapid iteration while ensuring a unified and user centric approach to design.
Why Design System is needed?
In our journey, we encountered challenges in maintaining design consistency across projects, leading to identity issues, increased time and effort, and inconsistency concerns. To address these issues comprehensively, we embarked on implementing a design system.
Koi
A CredAble’s Design System
Transforming
working capital today,
for limitless tomorrow
Tone of Voice
CredAble isn't just about financial solutions; we're your springboard to a future brimming with possibilities. As our motto states, "Transforming working capital today, for limitless tomorrow," we unlock potential by empowering businesses to achieve their full potential.
This guide dives deep into CredAble's unique voice — clear, helpful, and always ready to connect. Here, you'll discover how to ensure our message resonates consistently across all platforms. We'll guide you with clarity and confidence, simplifying complex solutions and paving the way for financial freedom for your business.
Colours
Colour holds a paramount role in our design philosophy, serving as a powerful tool to evoke emotion, establish brand identity and enhance user experience. In our design system, each colour is thoughtfully selected to convey specific meanings, ensuring consistency across all elements.
Primary Colours
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
#FD8618
15
Koi Orange
#FD8618
30
Koi Orange
#FD8618
50
Koi Orange
#FD8618
80
Koi Orange
#FD8618
100
Koi Orange Dark
#E76507
100
Koi Yellow
#FFF72C
20
Koi Yellow
#FFF72C
40
Koi Yellow
#FFF72C
60
Koi Yellow
#FFF72C
80
Koi Yellow
#FFF72C
100
Amber
#FFCC17
100
Secondary Colours
Koi 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
Electric Blue
#82E1FF
Dark
Electric Blue
#82E1FF
80
Electric Blue
#82E1FF
50
Shadow Blue
#1C1C1D
Dark
Shadow Blue
#1C1C1D
80
Shadow Blue
#1C1C1D
50
Koi Yellow
#FFF72C
20
Koi Yellow
#FFF72C
40
Koi Yellow
#FFF72C
60
Koi Yellow
#FFF72C
80
Koi Yellow
#FFF72C
100
Amber
#FFCC17
100
Gradients
Koi Gradient
HEX: #001B44
RGB: 0/ 23 / 46
CMYK:
Sunrise
HEX: #001B44
RGB: 0/ 23 / 46
CMYK:
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
Typgraphy
Typographic system emphasises readability and accessibility, embodying simplicity and boldness.
General Sans (Title Content)
Utilizing the "General Sans" font aligns perfectly with our goal of conveying warmth and professionalism in our messaging. Its clean and modern design exudes professionalism, while its subtle curves and rounded edges add a touch of friendliness and approachability. By incorporating this font into our content, we ensure a balance between professionalism and warmth, effectively enhancing the overall tone and resonating with our audience.
Inter (Body content)
Inter is a versatile and readable font, offering consistency and accessibility across various design elements, making it a reliable choice for design systems.
Lora (Special content)
Lora's elegant serif design and excellent readability make it an ideal choice for special typography in design systems, adding sophistication and personality to projects while maintaining clarity and versatility.
Product Text Styles
General Sans
Semi bold 30px
Line height 34px
Letter spacing 0%
Paragraph Spacing 8px
Title screen
Used for a main screen title that is utilised exclusively once per screen, complementing a large body of text.
General Sans
Semi bold 26px
Line height 32px
Letter spacing 0%
Paragraph Spacing 8px
Title screen
Used for a main screen title that is utilised exclusively once per screen, complementing a large body of text.
General Sans
Semi bold 22px
Line height 28px
Letter spacing 0%
Paragraph Spacing 8px
Title screen
Used for a main screen title that is utilised exclusively once per screen, complementing a large body of text.
General Sans
Semi bold 18px
Line height 24px
Letter spacing 0%
Paragraph Spacing 8px
Title screen
Used for a main screen title that is utilised exclusively once per screen, complementing a large body of text.
Inter
Semibold 14px
Line height 34px
Letter spacing 0%
Paragraph Spacing 8px
Title
Used for a heading and title that is utilised exclusively once per screen, complementing a large body of text.
Inter
Regular 16px
Line height 24px
Letter spacing 0%
Paragraph Spacing 8px
Body large
Used for paragraphs. Pairs with screen title and section title.
Inter
Semibold 16px
Line height 24px
Letter spacing 0%
Paragraph Spacing 8px
Body large bold
Emphasises and highlights important words or small titles. It’s used in expressive components, such as buttons and links.
Inter
Regular 14px
Line height 22px
Letter spacing 1%
Paragraph Spacing 8px
Body default
When you need something a little smaller than large, or to compliment large body.
Inter
Semibold 14px
Line height 22px
Letter spacing 1.25%
Paragraph Spacing 8px
Body default bold
When you need something a little smaller than large, or to compliment large body.
Inter
Semibold 16px
Line height 24px
Letter spacing 0%
Paragraph Spacing 8px
Link Large
Emphasises and highlights important words or small titles.
It’s used in expressive components, such as buttons and links.
Inter
Semi bold underlined 14px
Line height 22px
Letter spacing 1.25%
Underlined
Link default
Used in line with large body, or when you need a large link.
Inter
regular 12px
Line height 20px
Letter spacing 1.25%
Title screen
Used in line with default body, or when you need a smaller link.
Meet Jain - created with inspo from the world
meetjain479@gmail.com