design

logo

Typography

Fonts

The application uses a combination of two main font families:

1. Primary Font: 'Jost', sans-serif

   • Used for headings and important UI elements
   • Available weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold), 900 (black)

2. Secondary Font: 'Poppins', sans-serif

   • Used for body text and general content
   • Available weights: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold)

Font Sizes

• H1: 4rem, weight: 900
• H2: 3rem, weight: 700
• H3: 2rem, weight: 600
• H4: 1.5rem, weight: 600
• H5: 1.2rem, weight: 600
• H6: 1rem, weight: 600
• Paragraph: 1rem, weight: 400

Color Palette

Primary Colors

• Primary Color: #4528DC (Purple Blue)
• Secondary Color: #57048A (Deep Purple)

Text Colors

• Primary Text Color: #f5f5f5 (Off White)
• Secondary Text Color: #f5f5f5 (Off White)
• Primary Paragraph Color: #8E8E8E (Medium Gray)
• Secondary Paragraph Color: #E1E1E1 (Light Gray)
• Primary Border Color: #f5f5f5 (Off White)

Background Colors

• Primary Background Color: #09080D (Very Dark Blue/Black)
• Primary Background Color 2: #eeeeee (Light Gray)
• Primary Background Color 3: #e5e5e5 (Lighter Gray)
• Secondary Background Color: #040402 (Black)
• Secondary Background Color 2: #111111 (Dark Gray)
• Secondary Background Color 3: #191919 (Medium Dark Gray)
• Card Background Color: #111111 (Dark Gray)
• Header Background Color: #121117 (Dark Blue/Gray)
• Footer Background Color: #121117 (Dark Blue/Gray)

UI Colors

• White Color: #f9f9f9 (Off White)
• Black Color: #040402 (True Black)
• Grey Color: #f3f5f7 (Light Gray)
• Dark Grey Color: #191919 (Medium Dark Gray)
• Valid Color: #007a4d (Green)
• Invalid Color: #e34f4f (Red)

Line Colors

• Primary Line Color: rgba(0, 0, 0, .12) (Transparent Black)
• Secondary Line Color: rgba(255, 255, 255, 0.12) (Transparent White)

Gradients

• Background Text: linear-gradient(150deg, #57048A 0%, #4528DC 78%)

Design Elements

Cards

Cards use a dark background (#111111) with light text and feature:

• Padding: 1.5rem
• Border radius: 8px
• Box shadow: 0 3px 20px 0px rgba(0, 0, 0, .12)

Buttons

Buttons use a gradient background with white text:

• Padding: 16px 34px
• Border radius: 100px
• Background: linear-gradient(135deg, #4528DC 10%, #57048A)

Navigation

• Header Background: #121117
• Navigation Item Color: #f5f5f5 (light)
• Navigation Brand Height: 55px