Brand Guidelines

Synapse-Themes Brand

Our brand guidelines help maintain consistency across all platforms and communications. Download our assets and follow these guidelines when representing our brand.

Logo Usage

Synapse-Themes Logo

Primary Logo

Use on light backgrounds

Download SVG
Synapse-Themes Logo Orange

Logo on Dark

Use on dark backgrounds

Download SVG
Synapse-Themes Symbol

Symbol

Use for icons and small spaces

Download SVG
Synapse-Themes Symbol

Symbol on Dark

Use for icons on dark backgrounds

Download SVG

Logo Guidelines

Do

  • • Use official logo files only
  • • Maintain minimum clear space
  • • Use on approved backgrounds
  • • Keep aspect ratio when resizing

Don't

  • • Distort or stretch the logo
  • • Change logo colors
  • • Add effects or shadows
  • • Place on busy backgrounds

Color Palette

Primary

HEX
#F9775F
RGB
rgb(249, 119, 95)

Main brand color, buttons, links

Primary Light

HEX
#FFE6D7
RGB
rgb(255, 230, 215)

Backgrounds, hover states

Primary Lighter

HEX
#FFC8C3
RGB
rgb(255, 200, 195)

Gradients, accents

Text Primary

HEX
#3e2928
RGB
rgb(62, 41, 40)

Body text, headings

Background

HEX
#FFFFFF
RGB
rgb(255, 255, 255)

Page backgrounds

Typography

Primary Font: Raleway

Heading 1

Font: Raleway Bold, 48px

Heading 2

Font: Raleway Bold, 32px

Heading 3

Font: Raleway Semibold, 24px

Body text uses Raleway Regular for comfortable reading. It maintains excellent readability across different screen sizes and provides a modern, clean appearance.

Font: Raleway Regular, 16px

Monospace Font: JetBrains Mono

const code = "JetBrains Mono";

Font: JetBrains Mono, 14px - Used for code snippets

Spacing & Layout

Spacing Scale

4px (xs)
8px (sm)
16px (md)
24px (lg)
32px (xl)
48px (2xl)

Border Radius

8px (default)

12px (lg)

16px (xl)

Full (pill)

Download Assets

Complete Brand Kit

Download our complete brand kit including logos in various formats (SVG, PNG), color swatches, and typography guidelines.

Download Brand Kit (.zip)