Style GuideColoursTypographyGraphicsReferences

Typography

Typefaces: Inter, Rajdhani

We like Rajdhani because the typeface is slightly more condensed, which contributes to the togetherness theme that we are going for. It also consists of many parallel and perpendicular lines, while maintaining some softer edges, which gives a sense of order, stability, and gentleness that we want in our app.

We chose Inter for our base font because it has a high x-height which helps with readability. It also has a large number of styles/weights which gives us many options to choose from when designing our layouts.

Style names may not be indicative of actual use case. The names are simply borrowed from the working Figma file.

Headers

  • Header 1: Rajdhani Bold 28px

  • Header 2: Inter Bold 24px

  • Header 3: Inter Bold 20px

  • Header 4: Inter Regular 18px

  • Header 5: Inter Regular 17px

Body

  • Body: Inter Regular 16pt

  • Sub: Inter Regular 15px

  • Footnote: Inter Regular 14px

  • Caption 1: Inter Regular 12px

Examples

Welcome to studiUs!

Proceed to get started.

Getting Started

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.