# Gitpub Brand Color System

````md
# 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 users
- Modern and developer-focused
- Warm instead of corporate
- Social without becoming gimmicky
- Clean, readable, and productivity-focused

---

# Core Brand Colors

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

---

# Supporting UI Colors

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

---

# Surface Hierarchy

## Main Background
Used for:
- App shell
- Main pages
- Repository views
- Dashboards

Color:
#0F1115

---

## Secondary Background
Used for:
- Sidebars
- Navigation
- Top bars
- Menus

Color:
#171B21

---

## Elevated Surfaces
Used for:
- Repository cards
- Issues
- Pull requests
- Modals
- Panels

Color:
#1E242C

---

# Accent Usage

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 overusing amber.

The UI should remain mostly dark and neutral, allowing the accent color to stand out intentionally.

---

# Typography Direction

## Primary Text
Color:
#F3F2EE

Use for:
- Headers
- Main content
- Important labels

---

## Secondary Text
Color:
#9CA6B5

Use for:
- Descriptions
- Metadata
- Timestamps
- Placeholder text

---

# Gradient Styles

## Hero Gradient

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

---

## Accent Gradient

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

---

# Recommended Shadows

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

---

# Border Radius

Recommended radius values:

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

---

# Syntax Highlighting

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

---

# Pubby Mascot Guidelines

Pubby should:

* Use warm amber highlights
* Have dark outlines
* Avoid overly saturated colors
* Feel modern and clean
* Match the developer aesthetic of the platform

Pubby should feel closer to:

* GitHub Octocat
* Discord mascot branding
* modern indie tech mascots

Not:

* mobile game mascots
* overly cartoonish branding

---

# Brand Keywords

Gitpub should feel:

* Warm
* Collaborative
* Creative
* Technical
* Independent
* Open
* Modern
* Community-driven
* Self-hosted
* Developer-first

---

# Overall Visual Goal

Gitpub should visually communicate:

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

````



## Brand Direction
Gitpub should feel:
- Familiar to GitHub and developer tooling
- Warm and social instead of cold corporate
- Slightly industrial/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."

---

# Primary Brand Palette

## Core Colors

| Role | Color | Hex |
|---|---|---|
| Background | Obsidian Black | `#0F1115` |
| Elevated Surface | Graphite | `#171B21` |
| Card 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` |

---

# Accent Support Colors

These help make the UI feel more modern and familiar to GitHub users.

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

---

# Why This Works

## Familiarity
The layout and support colors still feel close to:
- GitHub
- VSCode
- Gitea
- Linear
- modern developer tooling

This makes Gitpub approachable immediately.

## Uniqueness
The amber/copper warmth gives Gitpub its own identity.

Instead of:
- GitHub = cold monochrome
- GitLab = orange corporate
- Gitea = green open-source

Gitpub becomes:
> Warm developer social coding.

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

---

# Surface Hierarchy

## Background Layers

### Main Background
Use:
`#0F1115`

This should cover:
- app shell
- page backgrounds
- repo views

---

### Elevated Areas
Use:
`#171B21`

For:
- sidebars
- nav bars
- top bars
- modal backgrounds

---

### Interactive Cards
Use:
`#1E242C`

For:
- repository cards
- issue cards
- PR cards
- dashboards

---

# Accent Usage Rules

## Amber Should Mean:
- primary actions
- active tabs
- highlights
- selected repositories
- branding moments

Avoid using amber everywhere.

GitHub works because blue is controlled.
Gitpub should do the same with amber.

---

# Recommended UI Feel

## Lighting Style
Use:
- soft glows
- subtle shadows
- slight gradients
- low contrast depth

Avoid:
- neon cyberpunk
- overly glossy effects
- excessive blur
- pure black backgrounds

---

# Suggested 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%
);
```

---

# Syntax Highlighting Direction

To feel familiar to developers:

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

---

# Pubby Color Direction

Pubby should use:

* warm amber accents
* cream highlights
* dark outlines
* muted shadows

Avoid bright saturated cartoon colors.

Pubby should feel:

* mascot-like
* friendly
* slightly indie
* modern developer adjacent

Closer to:

* Discord mascot polish
* GitHub Octocat simplicity

Not:

* mobile game mascot branding

---

# Future Expansion Colors

If Gitpub expands into:

* desktop apps
* CI/CD
* cloud hosting
* social coding
* organizations

These supporting themes could work:

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

---

# Overall Brand Personality

Gitpub should feel like:

* a modern developer workspace
* a creative coding community
* a self-hosted alternative to GitHub
* somewhere people actually want to spend time

Not just:

> "another git frontend"

The warmth is the differentiator.