# Gitpub Brand Style Guide

## Brand Personality

Gitpub combines the familiarity of modern developer tooling with a warmer, community-driven identity inspired by pubs, collaboration, and indie development culture.

The visual identity should feel:

- Familiar to GitHub and developer tooling users
- Warm and social instead of cold or corporate
- Slightly industrial and pub-inspired
- Clean enough for serious development work
- Cozy without becoming gimmicky

The goal is:

> "GitHub if it had a stronger community identity and a warmer atmosphere."

---

## Brand Keywords

Gitpub should feel: **Warm, Collaborative, Creative, Technical, Independent, Open, Modern, Community-driven, Self-hosted, Developer-first.**

---

## Core Brand Colors

| Role | Color Name | Hex |
|---|---|---|
| Primary Background | Obsidian Black | `#0F1115` |
| Secondary Background | Graphite | `#171B21` |
| Elevated Surface | Slate Carbon | `#1E242C` |
| Border | Soft Steel | `#2C3440` |
| Primary Text | Warm White | `#F3F2EE` |
| Secondary Text | Muted Silver | `#9CA6B5` |
| Accent Primary | Amber Ale | `#E5A13E` |
| Accent Hover | Golden Lager | `#F0B04D` |
| Accent Deep | Burnt Copper | `#C57B27` |

---

## Supporting UI Colors

These help make the UI feel modern and familiar to developers coming from other tools.

| Purpose | Color Name | Hex |
|---|---|---|
| Success | Terminal Green | `#3FB950` |
| Warning | Warm Amber | `#D29922` |
| Error | Commit Red | `#F85149` |
| Info | Repo Blue | `#58A6FF` |
| Secondary Accent | Branch Purple | `#A371F7` |

---

## Why This Works

### Familiarity

The layout and support colors deliberately feel close to GitHub, VSCode, Gitea, and Linear. This makes Gitpub immediately approachable for developers who come from those ecosystems.

### Uniqueness

The amber and copper warmth gives Gitpub its own distinct identity:

- GitHub = cold monochrome
- GitLab = orange corporate
- Gitea = green open-source
- **Gitpub = warm developer social coding**

The pub metaphor comes through subtly without turning the site into novelty branding.

---

## Surface Hierarchy

Surfaces are layered to create depth without introducing heavy contrast.

### Main Background — `#0F1115`

Used for the app shell, page backgrounds, repository views, and dashboards.

### Elevated Areas — `#171B21`

Used for sidebars, navigation bars, top bars, and modal backgrounds.

### Interactive Cards — `#1E242C`

Used for repository cards, issue cards, pull request cards, and panels.

---

## Accent Usage Rules

The amber accent is the core differentiator of the Gitpub brand.

**Use amber for:**

- Primary buttons
- Active tabs
- Selected repositories
- Branding moments
- Important highlights

Avoid using amber everywhere. GitHub works because its blue accent is controlled — Gitpub should treat amber the same way. The UI should remain mostly dark and neutral so the accent stands out intentionally.

---

## Typography

### Primary Text — `#F3F2EE`

Used for headers, main content, and important labels.

### Secondary Text — `#9CA6B5`

Used for descriptions, metadata, timestamps, and placeholder text.

---

## Recommended UI Feel

### Lighting Style

**Prefer:**

- Soft glows
- Subtle shadows
- Slight gradients
- Low-contrast depth

**Avoid:**

- Neon or cyberpunk aesthetics
- Overly glossy effects
- Excessive blur
- Pure black backgrounds

---

## Gradients

### Hero Gradient

```css
background: linear-gradient(
  135deg,
  #0F1115 0%,
  #171B21 55%,
  #251B12 100%
);
```

### Accent Gradient

```css
background: linear-gradient(
  135deg,
  #C57B27 0%,
  #E5A13E 100%
);
```

---

## Shadows

```css
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
```

---

## Border Radius

| Element | Radius |
| ------- | ------ |
| Buttons | 10px   |
| Cards   | 14px   |
| Modals  | 18px   |
| Inputs  | 8px    |

---

## Syntax Highlighting

To feel familiar and readable for developers:

| Element   | Color     |
| --------- | --------- |
| Keywords  | `#FF7B72` |
| Functions | `#D2A8FF` |
| Strings   | `#A5D6FF` |
| Comments  | `#7D8590` |
| Variables | `#E6EDF3` |
| Numbers   | `#79C0FF` |

---

## Pubby Mascot Guidelines

Pubby is the Gitpub mascot. The character should feel developer-adjacent and approachable, not cartoonish or childish.

**Pubby should use:**

- Warm amber accents
- Cream highlights
- Dark outlines
- Muted shadows

**Pubby should feel closer to:**

- GitHub Octocat — simple and iconic
- Discord mascot — polished and friendly
- Modern indie tech mascots

**Not:**

- Mobile game mascot branding
- Overly saturated cartoon colors
- Excessive detail or busy design

---

## Future Expansion Colors

As Gitpub expands into new product areas, these accent themes could be used to differentiate feature sets:

| Area     | Accent  |
| -------- | ------- |
| CI/CD    | Green   |
| Social   | Purple  |
| Hosting  | Blue    |
| Admin    | Copper  |
| Security | Crimson |

---

## Overall Visual Goal

Gitpub should feel like a modern developer workspace, a creative coding community, and a self-hosted alternative to GitHub — somewhere people actually want to spend time, not just another git frontend.

> "A modern social coding platform that feels welcoming, powerful, and community-oriented."

The warmth is the differentiator.