Design system from scratch: Color & typography (3/10)

Aakriti Ahuja
2 min readMar 9, 2024

--

Namaste! šŸ™ Since the last article, Iā€™ve defined a few things-
1. Itā€™s going to follow atomic design methodology
2. Iā€™m making it for mobile only for now. While making variables, I will keep in mind that it will be at some point considered for desktop(Letā€™s say in phase 2)

Based on the values we selected in our last article, Iā€™ve thought about colours and typography.

Color:

Now, when it comes to colors, Iā€™ve gone wild! No corporate restrictions here. Since thereā€™s no brand to dictate the hues, Iā€™ve chosen my own primary color. Iā€™ve avoided green, red and orange. In my system, theyā€™re reserved for success, error, and warning.

My primary color? Drumroll, pleaseā€¦ itā€™s Blueeeee!

Typography

To keep it simple yet semi-formal, Iā€™ve handpicked a bunch of typefaces ā€” Inter (obviously), Fira Sans, Open Sans, and Source Sans. I did some alphabet aerobics, checked their kerning, line height, and punctuation game.

After a showdown, the winner? Fira Sans! It took some serious self-convincing not to go with the reliable Inter šŸ˜†

Bonus Blogs, Anyone? šŸ¤”

Want to know more about typography and colors? Drop a comment and let me know if youā€™re up for bonus blogs! Until then, let the colors pop, and the letters dance in our very own design system! šŸ’ƒšŸŽ‰

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Aakriti Ahuja
Aakriti Ahuja

Written by Aakriti Ahuja

Product Designer | Stationery junkie & board game enthusiast | https://www.aakritiahuja.in/

Responses (1)

What are your thoughts?