Gitpub/Gitpub-Branding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add branding style guide and white logo

Browse Source 
Add comprehensive brand assets for Gitpub: a new Docs/Styling-Guide.md containing the brand color system, surface hierarchy, typography, gradients, shadows, syntax highlighting, mascot guidelines, and usage rules; and a white wordmark SVG at Logo Concept 2/Gitpub-Word-Logo-2-White.svg. These files provide visual direction and a ready-to-use logo for implementation across the product and marketing materials.
This commit is contained in:
Andrew Zambazos
2026-05-10 21:17:03 +12:00
parent 3a4094ba41
commit 49fde0e718
2 changed files with 511 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Docs/Styling-Guide.md
+487
View File
@@ -0,0 +1,487 @@
# 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.
Logo Concept 2/Gitpub-Word-Logo-2-White.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1032.3 319.8">
<!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1) -->
<defs>
<style>
.st0 {
fill: #e17709;
}
.st1 {
fill: #fff;
}
</style>
</defs>
<path class="st1" d="M111.1,255.7c-22.1,0-41.5-5-58.1-15-16.6-10-29.6-24.1-39-42.5C4.7,179.9,0,158.1,0,132.8s4.8-48,14.4-66.4c9.6-18.4,22.7-32.5,39.2-42.3s35.3-14.7,56.2-14.7,25.5,1.9,36.9,5.8,21.6,9.4,30.6,16.5c9,7.1,16.3,15.6,22.1,25.4,5.7,9.8,9.5,20.5,11.4,32.2h-43.9c-1.9-6.4-4.6-12.2-8-17.2-3.4-5-7.5-9.4-12.2-13s-10.2-6.4-16.3-8.3-12.8-2.8-20-2.8c-12.9,0-24.4,3.3-34.5,9.8-10.1,6.6-18.1,16.1-23.9,28.7s-8.7,28-8.7,46.2,2.9,33.4,8.7,46c5.8,12.6,13.8,22.2,24,28.8,10.2,6.6,22,9.9,35.4,9.9s22.8-2.4,31.8-7.1c9-4.7,15.9-11.4,20.8-20.1,4.9-8.7,7.3-18.9,7.3-30.8l9.8,1.6h-65.2v-33.8h97.1v28.8c0,20.5-4.4,38.2-13.1,53.2-8.8,15-20.8,26.5-36.1,34.5s-32.8,12.1-52.6,12.1h0Z"/>
<g id="Layer_4">
<rect class="st1" x="252.6" y="72.5" width="41.9" height="180"/>
<ellipse class="st0" cx="273.7" cy="24.1" rx="24.5" ry="24.1"/>
</g>
<path class="st1" d="M422.1,72.5v32.8h-102.2v-32.8s102.2,0,102.2,0ZM345.5,29.6h41.9v172.1c0,6.6,1.4,11.4,4.2,14.4,2.8,3.1,7.4,4.6,13.7,4.6s4.5-.2,7.6-.7c3.2-.5,5.7-.9,7.6-1.4l6.6,32.4c-4.6,1.4-9.3,2.4-14.2,3-4.8.6-9.5.9-13.9.9-17.3,0-30.5-4.3-39.8-12.9-9.2-8.6-13.9-20.8-13.9-36.7V29.6h0Z"/>
<path class="st1" d="M455.3,319.8V72.5h40.9v29.8h2.7c2.1-4.3,5.2-8.9,9.2-13.8,4-4.9,9.4-9.2,16.2-12.8,6.8-3.6,15.5-5.4,26.2-5.4s26.5,3.5,37.7,10.6c11.2,7.1,20,17.5,26.6,31.3,6.6,13.8,9.9,30.7,9.9,50.6s-3.2,36.6-9.7,50.4-15.3,24.4-26.5,31.6c-11.2,7.2-24,10.9-38.2,10.9s-18.7-1.8-25.6-5.2c-6.9-3.5-12.3-7.7-16.4-12.6s-7.2-9.6-9.3-13.9h-1.8v95.8h-41.9,0ZM539,221.2c9.3,0,17.2-2.6,23.5-7.6,6.3-5.1,11.1-12.1,14.3-20.9,3.2-8.9,4.8-18.9,4.8-30s-1.6-21.1-4.8-29.9c-3.2-8.8-7.9-15.6-14.2-20.6s-14.2-7.5-23.7-7.5-17,2.4-23.3,7.2c-6.3,4.8-11.1,11.6-14.4,20.2-3.3,8.6-4.9,18.8-4.9,30.5s1.6,21.9,4.9,30.8c3.3,8.8,8.1,15.6,14.5,20.5,6.4,4.9,14.1,7.3,23.3,7.3h0Z"/>
<path class="st1" d="M722.7,254.7c-12.3,0-23.2-2.6-32.4-7.9-9.3-5.3-16.5-13-21.6-23.1-5.1-10.1-7.7-22.4-7.7-36.8v-114.5h41.9v108c0,12,3.1,21.5,9.4,28.3,6.3,6.9,14.9,10.3,25.8,10.3s14-1.6,19.8-4.8c5.8-3.2,10.3-7.9,13.6-14.2,3.3-6.2,4.9-13.6,4.9-22.2v-105.4h42v180h-39.8l-.5-44.4h3.2c-5,15.7-12.5,27.4-22.4,35.1s-22,11.6-36.4,11.6h0Z"/>
<path class="st1" d="M957.9,255.7c-10.2,0-18.7-1.8-25.6-5.2-6.9-3.5-12.3-7.7-16.4-12.6-4.1-4.9-7.2-9.6-9.3-13.9h-2.7v28.5h-40.9V12.6h41.9v89.7h1.8c2.2-4.3,5.2-8.9,9.2-13.8,4-4.9,9.4-9.2,16.2-12.8,6.8-3.6,15.5-5.4,26.2-5.4s26.5,3.5,37.7,10.6c11.2,7.1,20,17.5,26.6,31.3,6.6,13.8,9.9,30.7,9.9,50.6s-3.2,36.6-9.7,50.4-15.3,24.4-26.5,31.6c-11.2,7.2-24,10.9-38.2,10.9h0ZM946.7,221.2c9.3,0,17.2-2.6,23.5-7.6,6.3-5.1,11.1-12.1,14.3-20.9,3.2-8.9,4.8-18.9,4.8-30s-1.6-21.1-4.8-29.9c-3.2-8.8-7.9-15.6-14.2-20.6s-14.2-7.5-23.7-7.5-17,2.4-23.3,7.2-11.1,11.6-14.4,20.2c-3.3,8.6-4.9,18.8-4.9,30.5s1.6,21.9,4.9,30.8c3.3,8.8,8.1,15.6,14.5,20.5,6.4,4.9,14.1,7.3,23.3,7.3h0Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB