# Brand Kit

Everything you need to represent Spawned. Logo files, colors, typography, and usage guidelines for designers, videographers, and partners.

## Logo

Our logo represents a retro computer with a terminal displaying "spawned" - symbolizing creation and building through code.

### Primary Logo

Use on light backgrounds  
  
Download SVG

### On Dark Backgrounds

Logo works on any background  
Download SVG

### Logo with Wordmark

Use this combination when space allows. The wordmark should always be set in Inter Bold.

### Minimum Clear Space

Maintain clear space equal to at least 25% of the logo height on all sides.

## Colors

Click any color to copy its hex value.

### Primary

- **Purple 500**  
  `#8b5cf6`  
  RGB: 139, 92, 246  
  Primary brand color, CTAs
- **Purple 600**  
  `#7c3aed`  
  RGB: 124, 58, 237  
  Hover states, accents
- **Indigo 500**  
  `#6366f1`  
  RGB: 99, 102, 241  
  Gradients, secondary accents

### Neutral

- **Zinc 900**  
  `#18181b`  
  RGB: 24, 24, 27  
  Primary text, headings
- **Zinc 700**  
  `#3f3f46`  
  RGB: 63, 63, 70  
  Secondary text
- **Zinc 500**  
  `#71717a`  
  RGB: 113, 113, 122  
  Muted text, captions
- **Zinc 200**  
  `#e4e4e7`  
  RGB: 228, 228, 231  
  Borders, dividers
- **Zinc 100**  
  `#f4f4f5`  
  RGB: 244, 244, 245  
  Backgrounds
- **Zinc 50**  
  `#fafafa`  
  RGB: 250, 250, 250  
  Page background

### Accent

- **Green 400**  
  `#4ade80`  
  RGB: 74, 222, 128  
  Success, positive states
- **Amber 500**  
  `#f59e0b`  
  RGB: 245, 158, 11  
  Warnings, token features
- **Red 500**  
  `#ef4444`  
  RGB: 239, 68, 68  
  Errors, destructive actions

### Brand Gradient

`background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6366f1 100%);`

## Typography

We use Inter, a clean and modern sans-serif typeface optimized for screens.

- **Inter**  
  Primary typeface  
  [Google Fonts](https://fonts.google.com/specimen/Inter)
  
  ```css
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  ```

### Display

- **48px / Bold (700) / Line height: 1.1**

### Heading 1

- **36px / Bold (700) / Line height: 1.2**

### Heading 2

- **24px / Bold (700) / Line height: 1.3**

### Heading 3

- **20px / Semibold (600) / Line height: 1.4**

### Body text

16px / Regular (400) / Line height: 1.6

### Small text

14px / Regular (400) / Line height: 1.5

## Voice & Tone

How we communicate as a brand.

### We are

- **Direct** – Clear, concise communication
- **Empowering** – Help users build and create
- **Technical** – Knowledgeable but accessible
- **Modern** – Forward-thinking, innovative
- **Trustworthy** – Reliable and honest

### We avoid

- Overly complex jargon
- Hype without substance
- Condescending explanations
- Empty promises
- Corporate speak

## Usage Guidelines

Do's and don'ts for using our brand assets.

### Do

- ✓ Use the logo with adequate clear space
- ✓ Maintain the original logo proportions
- ✓ Use approved brand colors
- ✓ Reference "Spawned" with capital S
- ✓ Use Inter font for all text

### Don't

- ✕ Stretch or distort the logo
- ✕ Change the logo colors
- ✕ Add effects like shadows or outlines
- ✕ Place on busy or low-contrast backgrounds
- ✕ Use the logo smaller than 24px

## Downloads

Download our complete brand assets package.

- Logo SVG  
  Vector format  
  [Inter Font](https://fonts.google.com/specimen/Inter)  
  [Full Brand Kit](mailto:legal@spawned.com?subject=Brand%20Assets%20Request)

Questions about brand usage? Contact us at [legal@spawned.com](mailto:legal@spawned.com)