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
## 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
- 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."
---
# 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 |
| 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 |
| 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
## 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 |
| Warning | Warm Amber | #D29922 |
| Error | Commit Red | #F85149 |
| Info | Repo Blue | #58A6FF |
| Branch / Secondary Accent | Branch Purple | #A371F7 |
| Success | Terminal Green | `#3FB950` |
| Warning | Warm Amber | `#D29922` |
| Error | Commit Red | `#F85149` |
| Info | Repo Blue | `#58A6FF` |
| Secondary Accent | Branch Purple | `#A371F7` |
---
# Surface Hierarchy
## Why This Works
## Main Background
Used for:
- App shell
- Main pages
- Repository views
- Dashboards
### Familiarity
Color:
#0F1115
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.
---
## Secondary Background
Used for:
- Sidebars
- Navigation
- Top bars
- Menus
## Surface Hierarchy
Color:
#171B21
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.
---
## Elevated Surfaces
Used for:
- Repository cards
- Issues
- Pull requests
- Modals
- Panels
Color:
#1E242C
---
# Accent Usage
## Accent Usage Rules
The amber accent is the core differentiator of the Gitpub brand.
Use amber for:
**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.
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 Direction
## Typography
## Primary Text
Color:
#F3F2EE
### Primary Text — `#F3F2EE`
Use for:
- Headers
- Main content
- Important labels
Used for headers, main content, and important labels.
### Secondary Text — `#9CA6B5`
Used for descriptions, metadata, timestamps, and placeholder text.
---
## Secondary Text
Color:
#9CA6B5
## Recommended UI Feel
Use for:
- Descriptions
- Metadata
- Timestamps
- Placeholder text
### 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
---
# Gradient Styles
## Gradients
## Hero Gradient
### Hero Gradient
```css
background: linear-gradient(
@@ -135,11 +150,9 @@ background: linear-gradient(
#171B21 55%,
#251B12 100%
);
````
```
---
## Accent Gradient
### Accent Gradient
```css
background: linear-gradient(
@@ -151,7 +164,7 @@ background: linear-gradient(
---
# Recommended Shadows
## Shadows
```css
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
Recommended radius values:
## Border Radius
| Element | Radius |
| ------- | ------ |
@@ -172,294 +183,49 @@ Recommended radius values:
---
# Syntax Highlighting
## Syntax Highlighting
| Element | Color |
| --------- | ------- |
| Keywords | #FF7B72 |
| Functions | #D2A8FF |
| Strings | #A5D6FF |
| Comments | #7D8590 |
| Variables | #E6EDF3 |
| Numbers | #79C0FF |
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 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
* Have dark outlines
* Avoid overly saturated colors
* Feel modern and clean
* Match the developer aesthetic of the platform
**Pubby should use:**
Pubby should feel closer to:
- Warm amber accents
- Cream highlights
- Dark outlines
- Muted shadows
* GitHub Octocat
* Discord mascot branding
* modern indie tech mascots
**Pubby should feel closer to:**
Not:
- GitHub Octocat — simple and iconic
- Discord mascot — polished and friendly
- Modern indie tech mascots
* mobile game mascots
* overly cartoonish branding
**Not:**
- Mobile game mascot branding
- Overly saturated cartoon colors
- Excessive detail or busy design
---
# Brand Keywords
## Future Expansion Colors
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:
As Gitpub expands into new product areas, these accent themes could be used to differentiate feature sets:
| 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 creative coding community
* 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.