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

Update Styling-Guide.md

Browse Source
This commit is contained in:
Andrew Zambazos
2026-05-13 15:40:06 +12:00
parent 49fde0e718
commit 40bd1450cd
1 changed files with 130 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Docs/Styling-Guide.md
+130 -371
View File
@@ -1,132 +1,147 @@
# Gitpub Brand Color System
````md
# Gitpub Brand Style Guide # Gitpub Brand Style Guide
## Brand Personality ## Brand Personality
Gitpub combines the familiarity of modern developer tooling with a warmer, community-driven identity inspired by pubs, collaboration, and indie development culture. 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: The visual identity should feel:
- Familiar to GitHub users
- Modern and developer-focused - Familiar to GitHub and developer tooling users
- Warm instead of corporate - Warm and social instead of cold or corporate
- Social without becoming gimmicky - Slightly industrial and pub-inspired
- Clean, readable, and productivity-focused - 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."
--- ---
# Core Brand Colors ## Brand Keywords
| Role | Name | Hex | 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 | | Primary Background | Obsidian Black | `#0F1115` |
| Secondary Background | Graphite | #171B21 | | Secondary Background | Graphite | `#171B21` |
| Elevated Surface | Slate Carbon | #1E242C | | Elevated Surface | Slate Carbon | `#1E242C` |
| Border Color | Soft Steel | #2C3440 | | Border | Soft Steel | `#2C3440` |
| Primary Text | Warm White | #F3F2EE | | Primary Text | Warm White | `#F3F2EE` |
| Secondary Text | Muted Silver | #9CA6B5 | | Secondary Text | Muted Silver | `#9CA6B5` |
| Primary Accent | Amber Ale | #E5A13E | | Accent Primary | Amber Ale | `#E5A13E` |
| Hover Accent | Golden Lager | #F0B04D | | Accent Hover | Golden Lager | `#F0B04D` |
| Deep Accent | Burnt Copper | #C57B27 | | Accent Deep | Burnt Copper | `#C57B27` |
--- ---
# Supporting UI Colors ## Supporting UI Colors
| Purpose | Color | Hex | These help make the UI feel modern and familiar to developers coming from other tools.
| Purpose | Color Name | Hex |
|---|---|---| |---|---|---|
| Success | Terminal Green | #3FB950 | | Success | Terminal Green | `#3FB950` |
| Warning | Warm Amber | #D29922 | | Warning | Warm Amber | `#D29922` |
| Error | Commit Red | #F85149 | | Error | Commit Red | `#F85149` |
| Info | Repo Blue | #58A6FF | | Info | Repo Blue | `#58A6FF` |
| Branch / Secondary Accent | Branch Purple | #A371F7 | | Secondary Accent | Branch Purple | `#A371F7` |
--- ---
# Surface Hierarchy ## Why This Works
## Main Background ### Familiarity
Used for:
- App shell
- Main pages
- Repository views
- Dashboards
Color: 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.
#0F1115
### 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.
--- ---
## Secondary Background ## Surface Hierarchy
Used for:
- Sidebars
- Navigation
- Top bars
- Menus
Color: Surfaces are layered to create depth without introducing heavy contrast.
#171B21
### 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.
--- ---
## Elevated Surfaces ## Accent Usage Rules
Used for:
- Repository cards
- Issues
- Pull requests
- Modals
- Panels
Color:
#1E242C
---
# Accent Usage
The amber accent is the core differentiator of the Gitpub brand. The amber accent is the core differentiator of the Gitpub brand.
Use amber for: **Use amber for:**
- Primary buttons - Primary buttons
- Active tabs - Active tabs
- Selected repositories - Selected repositories
- Branding moments - Branding moments
- Important highlights - Important highlights
Avoid overusing amber. 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.
The UI should remain mostly dark and neutral, allowing the accent color to stand out intentionally.
--- ---
# Typography Direction ## Typography
## Primary Text ### Primary Text — `#F3F2EE`
Color:
#F3F2EE
Use for: Used for headers, main content, and important labels.
- Headers
- Main content ### Secondary Text — `#9CA6B5`
- Important labels
Used for descriptions, metadata, timestamps, and placeholder text.
--- ---
## Secondary Text ## Recommended UI Feel
Color:
#9CA6B5
Use for: ### Lighting Style
- Descriptions
- Metadata **Prefer:**
- Timestamps
- Placeholder text - Soft glows
- Subtle shadows
- Slight gradients
- Low-contrast depth
**Avoid:**
- Neon or cyberpunk aesthetics
- Overly glossy effects
- Excessive blur
- Pure black backgrounds
--- ---
# Gradient Styles ## Gradients
## Hero Gradient ### Hero Gradient
```css ```css
background: linear-gradient( background: linear-gradient(
@@ -135,11 +150,9 @@ background: linear-gradient(
#171B21 55%, #171B21 55%,
#251B12 100% #251B12 100%
); );
```` ```
--- ### Accent Gradient
## Accent Gradient
```css ```css
background: linear-gradient( background: linear-gradient(
@@ -151,7 +164,7 @@ background: linear-gradient(
--- ---
# Recommended Shadows ## Shadows
```css ```css
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
@@ -159,9 +172,7 @@ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
--- ---
# Border Radius ## Border Radius
Recommended radius values:
| Element | Radius | | Element | Radius |
| ------- | ------ | | ------- | ------ |
@@ -172,294 +183,49 @@ Recommended radius values:
--- ---
# Syntax Highlighting ## Syntax Highlighting
| Element | Color | To feel familiar and readable for developers:
| --------- | ------- |
| Keywords | #FF7B72 | | Element | Color |
| Functions | #D2A8FF | | --------- | --------- |
| Strings | #A5D6FF | | Keywords | `#FF7B72` |
| Comments | #7D8590 | | Functions | `#D2A8FF` |
| Variables | #E6EDF3 | | Strings | `#A5D6FF` |
| Numbers | #79C0FF | | Comments | `#7D8590` |
| Variables | `#E6EDF3` |
| Numbers | `#79C0FF` |
--- ---
# Pubby Mascot Guidelines ## Pubby Mascot Guidelines
Pubby should: Pubby is the Gitpub mascot. The character should feel developer-adjacent and approachable, not cartoonish or childish.
* Use warm amber highlights **Pubby should use:**
* Have dark outlines
* Avoid overly saturated colors
* Feel modern and clean
* Match the developer aesthetic of the platform
Pubby should feel closer to: - Warm amber accents
- Cream highlights
- Dark outlines
- Muted shadows
* GitHub Octocat **Pubby should feel closer to:**
* Discord mascot branding
* modern indie tech mascots
Not: - GitHub Octocat — simple and iconic
- Discord mascot — polished and friendly
- Modern indie tech mascots
* mobile game mascots **Not:**
* overly cartoonish branding
- Mobile game mascot branding
- Overly saturated cartoon colors
- Excessive detail or busy design
--- ---
# Brand Keywords ## Future Expansion Colors
Gitpub should feel: As Gitpub expands into new product areas, these accent themes could be used to differentiate feature sets:
* 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 | | Area | Accent |
| -------- | ------- | | -------- | ------- |
@@ -471,17 +237,10 @@ These supporting themes could work:
--- ---
# Overall Brand Personality ## Overall Visual Goal
Gitpub should feel like: 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 developer workspace > "A modern social coding platform that feels welcoming, powerful, and community-oriented."
* 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. The warmth is the differentiator.