Savantask Brand Kit

Smart Support. Real Results. A complete guide to our visual identity and brand standards.

Logo Usage

All White Logo

All White Logo

Use on dark backgrounds and vibrant gradient backgrounds for maximum contrast

White Outline Logo

White Outline Logo

Use on colorful backgrounds and images where filled logo might be too heavy

Original Logo

Original Logo (Dark Outline)

Primary logo for light backgrounds, white surfaces, and general use

Clear Space

Maintain minimum clear space around the logo equal to the height of the "S" in Savantask. This ensures the logo has breathing room and maintains its impact.

Minimum Size

Never use the logo smaller than 120px wide for digital applications or 1 inch for print materials to maintain legibility and brand recognition.

✓ DO

  • Use provided logo files only
  • Maintain proper aspect ratio
  • Ensure adequate contrast with background
  • Place on clean, uncluttered backgrounds

✗ DON'T

  • Stretch or distort the logo
  • Change logo colors or apply filters
  • Add effects, shadows, or outlines
  • Place on busy or conflicting backgrounds

Brand Colors

Royal Purple
#4929c8
Primary Brand Color
Cyan Bright
#47f1cc
Secondary Accent
Magenta Pop
#f03b94
Highlight Color
Energy Red
#f23d2a
Call-to-Action
Vibrant Yellow
#ffd627
Emphasis & Alerts
Deep Charcoal
#272727
Dark Backgrounds & Text

Gradient Combinations

Purple → Cyan
Primary gradient for headers
Magenta → Red
Bold CTAs and buttons
Cyan → Yellow
Energetic highlights
Purple → Magenta
Creative sections
Red → Yellow
High energy elements
Purple → Cyan → Yellow
Special hero sections
Magenta → Yellow
Vibrant accents
Cyan → Magenta
Cool to warm transition
Purple → Red
Bold statements

Typography

Outfit Semibold

Headings • Hero Text • Major Titles

Aa Bb Cc

Inter Semibold

Alternative Headings • Technical Content

Aa Bb Cc

Outfit Regular

Body Text • Descriptions • Paragraphs

The quick brown fox jumps over the lazy dog. Outfit provides excellent readability for body text and longer content sections across all digital platforms.

Typography Scale

H1 - 48px Semibold (Outfit)

Hero headlines, page titles

H2 - 40px Semibold (Outfit)

Section headers

H3 - 32px Semibold (Outfit)

Subsection titles

H3 Alt - 32px Semibold (Inter)

Alternative for technical content

Body - 16px Regular (Outfit)

Main content text

Small - 14px Regular (Outfit)

Captions, labels, metadata

Aa

Letter Spacing

Use tight letter-spacing (-0.02em to -0.03em) for large headings in Outfit. Keep normal spacing for body text.

1.6

Line Height

Use 1.2-1.4 for headings and 1.6-1.8 for body text to ensure comfortable reading.

!

Hierarchy

Maintain clear visual hierarchy with size and weight. Bold for emphasis, regular for body.

Text Color Guidelines

Primary Text - #2d2d2d

Use for main headings and important content

Secondary Text - #4b5563

Use for body text and paragraph content

Tertiary Text - #6b7280

Use for captions, labels, and supporting text

Brand Gradient Text

Use sparingly for special headings and key messaging

Smart Support. Real Results.

This example shows proper font pairing with Outfit Semibold for headings and Outfit Regular for body text. Notice the contrast in weight and size creates clear hierarchy.

Typography Best Practices

✓ DO

  • Use Outfit as primary font family
  • Use Inter Semibold for technical content
  • Maintain proper heading hierarchy
  • Keep line length 60-80 characters
  • Use adequate line spacing (1.6-1.8)
  • Ensure sufficient color contrast

✗ DON'T

  • Mix multiple font families
  • Use all caps for long text
  • Set body text below 14px
  • Use too many font weights
  • Stretch or condense letterforms

Margins and Spacing

Proper spacing ensures visual hierarchy and improves readability. Follow these guidelines for consistent margin and padding usage across all brand applications.

Logo Clear Space

40px
40px
40px
40px
Logo

Maintain 40px minimum clear space on all sides. This ensures the logo has room to breathe and maintains visual impact.

Card Padding

padding: 40px

Card Title

Content area with proper internal spacing for readability and visual comfort.

Use 40-50px padding for cards to create comfortable internal spacing. Mobile can use 30px minimum.

Section Spacing

Section 1

margin-bottom: 80px

Section 2

Maintain 80-120px vertical spacing between major sections. This creates clear visual separation and improves content hierarchy.

M

Margins

External spacing

Use margins to create space between elements. Desktop: 40-80px, Mobile: 20-40px

P

Padding

Internal spacing

Use padding for internal spacing within elements. Cards: 30-50px, Buttons: 12-18px

8

Base Unit

Spacing scale

Use 8px increments for all spacing: 8px, 16px, 24px, 32px, 40px, 80px