From 49fde0e7182ed76a0db0e6514e264f9d4f4f5aa5 Mon Sep 17 00:00:00 2001 From: Andrew Zambazos Date: Sun, 10 May 2026 21:17:03 +1200 Subject: [PATCH] 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. --- Docs/Styling-Guide.md | 487 ++++++++++++++++++++ Logo Concept 2/Gitpub-Word-Logo-2-White.svg | 24 + 2 files changed, 511 insertions(+) create mode 100644 Docs/Styling-Guide.md create mode 100644 Logo Concept 2/Gitpub-Word-Logo-2-White.svg diff --git a/Docs/Styling-Guide.md b/Docs/Styling-Guide.md new file mode 100644 index 0000000..d397527 --- /dev/null +++ b/Docs/Styling-Guide.md @@ -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. diff --git a/Logo Concept 2/Gitpub-Word-Logo-2-White.svg b/Logo Concept 2/Gitpub-Word-Logo-2-White.svg new file mode 100644 index 0000000..01f9630 --- /dev/null +++ b/Logo Concept 2/Gitpub-Word-Logo-2-White.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + \ No newline at end of file