diff --git a/Docs/Styling-Guide.md b/Docs/Styling-Guide.md index d397527..acb9ea0 100644 --- a/Docs/Styling-Guide.md +++ b/Docs/Styling-Guide.md @@ -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.