Toppers Maker Brand Kit

Official brand guidelines and assets for maintaining consistent visual identity across all platforms.

Logo

Toppers Maker Logo

Primary Logo - Full Color

Logo Usage Guidelines

  • • Maintain clear space around the logo equal to the height of the "T" in "Toppers"
  • • Do not stretch, distort, or alter the logo proportions
  • • Do not change the logo colors or add effects
  • • Ensure the logo is clearly visible against the background
  • • For dark backgrounds, use the white version of the logo

Available Formats

PNG (Transparent)
JPG (White Background)

Color Palette

Primary

HEX: #3B82F6

RGB: 59, 130, 246

Main brand color, primary buttons, links

Primary Dark

HEX: #2563EB

RGB: 37, 99, 235

Hover states, active elements

Secondary

HEX: #F3F4F6

RGB: 243, 244, 246

Backgrounds, secondary elements

Accent

HEX: #F59E0B

RGB: 245, 158, 11

Highlights, call-to-action elements

Text Primary

HEX: #111827

RGB: 17, 24, 39

Main text color

Text Secondary

HEX: #6B7280

RGB: 107, 114, 128

Secondary text, captions

Success

HEX: #10B981

RGB: 16, 185, 129

Success messages, positive indicators

Error

HEX: #EF4444

RGB: 239, 68, 68

Error messages, negative indicators

Background

HEX: #FFFFFF

RGB: 255, 255, 255

Page background

Border

HEX: #E5E7EB

RGB: 229, 231, 235

Borders, dividers

Typography

Font Family

Inter

Primary font for all website content

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Inter is a variable font designed for computer screens, featuring a tall x-height for better readability at small sizes.

Type Styles

Heading 1

Main page headings

Font: Inter

Weight: 700

Size: 2.25rem (36px)

Line Height: 2.5rem (40px)

Sample

Heading 2

Section headings

Font: Inter

Weight: 600

Size: 1.875rem (30px)

Line Height: 2.25rem (36px)

Sample

Heading 3

Subsection headings

Font: Inter

Weight: 600

Size: 1.5rem (24px)

Line Height: 2rem (32px)

Sample

Heading 4

Card headings

Font: Inter

Weight: 600

Size: 1.25rem (20px)

Line Height: 1.75rem (28px)

Sample

Body

Main body text

Font: Inter

Weight: 400

Size: 1rem (16px)

Line Height: 1.5rem (24px)

Sample

Body Small

Secondary text, captions

Font: Inter

Weight: 400

Size: 0.875rem (14px)

Line Height: 1.25rem (20px)

Sample

Button

Button text

Font: Inter

Weight: 500

Size: 0.875rem (14px)

Line Height: 1.25rem (20px)

Sample

Button Styles

Primary

Primary actions

bg-blue-600 text-white hover:bg-blue-700

Secondary

Secondary actions

bg-secondary text-secondary-foreground hover:bg-secondary/80

Outline

Tertiary actions

border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground

Ghost

Subtle actions

text-foreground hover:bg-accent hover:text-accent-foreground

Link

Text links

text-primary underline-offset-4 hover:underline

Destructive

Destructive actions

bg-destructive text-destructive-foreground hover:bg-destructive/90

Spacing System

Our spacing system uses a 4px base unit (0.25rem) to maintain consistent spacing throughout the interface.

xs

0.25rem (4px)

sm

0.5rem (8px)

md

1rem (16px)

lg

1.5rem (24px)

xl

2rem (32px)

2xl

3rem (48px)

3xl

4rem (64px)

4xl

6rem (96px)