Gitpub-Branding/Docs/Styling-Guide.md

Gitpub Brand Color System

# 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

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

---

Recommended Shadows

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

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.