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
parent 3a4094ba41
commit 49fde0e718
2 changed files with 511 additions and 0 deletions
@@ -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.