Gitpub/Gitpub-Branding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
49fde0e7182ed76a0db0e6514e264f9d4f4f5aa5
Gitpub-Branding/Docs/Styling-Guide.md
T
andrew 49fde0e718 Add branding style guide and white logo 
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.
2026-05-10 21:17:03 +12:00

488 lines
7.3 KiB
Markdown
Raw Blame History

# 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.
Reference in New Issue View Git Blame Copy Permalink