247 lines
5.2 KiB
Markdown
247 lines
5.2 KiB
Markdown
# 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.
|