5.2 KiB
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
background: linear-gradient(
135deg,
#0F1115 0%,
#171B21 55%,
#251B12 100%
);
Accent Gradient
background: linear-gradient(
135deg,
#C57B27 0%,
#E5A13E 100%
);
Shadows
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.