# GitBrand — Identity system v1

Creative direction: **Your brand, in good order.**

A proposed identity based on the product repository and the supplied layered-card logo. This kit is a design deliverable; it does not change or deploy the app. Visual applications are proposed layouts, not screenshots of shipped screens. Forma is a fictional customer brand used to demonstrate hierarchy.

## 1. Strategy

GitBrand is a shared home for brand assets and guidance. Teams put logos, colors, fonts, resources and brand voice in a repository, then share access so people can find and use the right materials. Structured exports also make brand context available to AI tools when enabled.

Primary audience: brand, marketing and design teams at small and growing companies. Secondary audience: agencies managing several brands. Recipients include partners, developers, press and contractors. This audience hierarchy is a strategic inference from the product, not customer-research evidence.

The practical problem: brand materials are scattered across folders and conversations. Each handoff creates another request for a logo version, font name, color value or explanation.

Positioning: **For teams sharing a company's identity, GitBrand brings brand assets and guidance into one organized, shareable home.**

Emotional promise: confidence in the handoff. Users should feel oriented, in control and comfortable letting others use their brand.

Personality: orderly, helpful, composed, precise. Confident enough to be quiet. Warm through language and proportions, not whimsical illustration.

Brand idea: **The shared home.** Two related cards become one recognizable unit. They represent assets brought together and a handoff between people. They do not promise version control, automatic approval workflows or file synchronization.

Trust comes from predictable behavior: readable labels, accurate access states, honest save feedback and clear ownership. Do not substitute trust badges, unsupported security claims or invented metrics for evidence.

## 2. Logo

The new mark retains the supplied reference's overlapping cards and dark/gray relationship. Equal 62 × 62 units, 16-unit corner radii and paired 10° rotations replace the more expressive source geometry. The foreground card sits upper right; the rear card sits lower left. The mark is drawn on a 104 × 104 canvas.

Wordmark: Poppins Regular for “Git”, Poppins Semibold for “Brand”. The quieter weight contrast preserves recognition while improving balance. Use the supplied outlined SVGs; do not recreate the wordmark with live text or a substitute font. Always write **GitBrand** in prose. Do not write Git Brand, Gitbrand or GITBRAND in running text.

Primary horizontal lockup: charcoal + stone on white or Paper. Reverse: white + lighter stone on Ink. Single-color files use a transparent separation cut so the cards remain distinguishable; use these for one-ink printing, engraving and constrained production. For embroidery, simplify only after a physical production proof.

Clear space: at least 16 master units outside the artwork. This is approximately one quarter of a card's width. Use the same clear space around the symbol. It is additional space beyond the exported SVG canvas.

Minimums: horizontal lockup 128 CSS px wide on screen or 30 mm in print; full symbol 24 CSS px or 6 mm. At 16–20 px, use the dedicated axis-aligned micro symbol. It intentionally drops rotation for pixel clarity and is not the display logo. Use the avatar asset for profile photos and app listings.

Use customer identity prominently on customer repositories. Place GitBrand once in utility navigation or a subdued “Powered by GitBrand” footer. The GitBrand lockup should not exceed half the displayed width of the customer's main lockup in the repository header. If the customer has an unusually compact symbol, judge optical size instead of mechanically applying the ratio.

Do not stretch, rotate the full lockup, recolor it with customer accents, add shadows, outline the letters, separate Git and Brand, put the logo on a busy photograph, change the card overlap or use transparency in place of the supplied solid-color files. Avoid using the mark as a repeated page watermark.

## 3. Color

| Token | Value | Role |
|---|---|---|
| Ink | #252827 | Main text, primary actions, dark marketing panels |
| Paper | #F5F6F3 | Warm neutral page surface |
| White | #FFFFFF | Content cards and clean asset previews |
| Stone | #919795 | Rear logo card and decorative details only |
| Slate | #465F73 | Links, focus indicator and restrained brand accent |
| Mist | #E8EEF2 | Selected/quiet supporting surfaces |
| Muted text | #606A65 | Secondary readable copy on white or Paper |
| Divider | #DCE0DD | Decorative rules and card separation |
| Control border | #7A847E | Interactive boundaries where needed |

Aim for 85–90% neutral surfaces, 8–12% text and structure, and at most 3–5% accent in GitBrand-owned marketing. These are composition guides, not pixel quotas. In customer workspaces, use Slate only for functional needs and let the customer's palette appear inside their assets and identity content.

Stone and Divider are not text colors. Divider alone does not establish an interactive field boundary. Never assume customer colors work for controls; keep system actions in accessible GitBrand tokens and show customer colors as labeled swatches.

Dark mode: background #1C201E, surface #252B27, primary text #F5F6F3, secondary text #B4BDB7, accent #B7C9D6, interactive border #7A847E. Decorative divider #404942. Preview customer artwork on an explicit light/dark tile chosen for the asset, not an automatic inversion.

Functional states: success #35634E on #EDF4EF; warning #795819 on #FBF3DE; error #A43D38 on #FAECEA. Always pair color with a label or icon. These are system semantics, not extra brand accents.

For print, retain sRGB masters and convert through the printer's chosen ICC profile; choose a physical proof for one-color ink. No unverified Pantone equivalence is specified.

## 4. Typography

Poppins keeps continuity with the existing product and echoes the softened geometry of the mark. Use two weights: Regular 400 and Semibold 600. Both font files and the SIL Open Font License are included. Source: https://github.com/google/fonts/tree/main/ofl/poppins.

| Role | Desktop size/line | Mobile size/line | Weight |
|---|---|---|---|
| Marketing display | 64/70 px | 40/46 px | 600 |
| Page title | 40/48 px | 32/40 px | 600 |
| Section title | 28/36 px | 24/32 px | 600 |
| Card title | 20/28 px | 20/28 px | 600 |
| Body | 16/26 px | 16/26 px | 400 |
| UI label | 14/20 px | 14/20 px | 600 |
| Caption | 12/18 px | 12/18 px | 400 |

Use at most −0.03em tracking on large headings. Body tracking is normal. Keep paragraphs around 55–70 characters per line. Use sentence case. Uppercase labels are optional, short, 12 px minimum, with 0.08em tracking. Use the system monospace stack for HEX values, file formats and endpoint snippets; do not turn the brand into a terminal aesthetic.

## 5. Layout, shapes and motion

Use a 4 px base and an 8 px spacing rhythm: 4, 8, 12, 16, 24, 32, 48, 64, 96. Marketing containers max 1200 px; reading columns max 720 px. Desktop grid 12 columns, mobile grid 4. Gutters 24 px desktop and 16 px mobile; outer page margins at least 20 px on small screens.

Radius: 8 px buttons/fields; 12 px cards; 20 px major feature panels. Pill shapes are for compact statuses or tags. Use a 1 px line rather than a shadow to separate most surfaces. Restrained floating surfaces may use 0 8px 24px rgb(37 40 39 / 8%).

Repeated overlap is a supporting motif: two flat cards, one calm angle, one neutral shadow if needed. Reserve it for covers, handoff illustrations and social posts. Functional cards stay aligned and unrotated.

Icons: simple 24 px outline grid, 1.5–2 px stroke, slightly rounded joins. A label accompanies unfamiliar actions. Do not introduce unrelated illustration styles, sparkles, mascots or shields to imply safety.

Motion: 160 ms hover/focus; 220 ms small transitions; 280 ms dialog entrance. Move at most 8 px. Avoid continuous floating cards, magnetic buttons and scroll-dependent text reveals in functional screens. The homepage uses an editorial exception: a rotating stack of sample brands, with pause, manual selection and reduced-motion support. Respect reduced-motion preferences and render complete content without animation.

## 6. Product applications

Three ownership zones:

1. GitBrand marketing: fuller wordmark and editorial headline, controlled card motif, optional Ink panel.
2. Account workspace: GitBrand provides neutral navigation, clear forms and consistent actions. Customer identities live in repository cards.
3. Shared repository: customer name and logo lead; GitBrand is attribution and utility. Customer accents stay in brand content. This is a design direction, not a claim that white labeling is currently available.

Repository layout: customer logo and name, short description, access context where relevant, then Logos / Colors / Fonts / Resources / Brand voice. Preview tiles must distinguish transparent artwork from white artwork. Explain file type and download actions beside the preview.

Trust details: use explicit Public/Private labels; explain who can access; show save states only after the relevant result; label approximate imports as suggestions; expose retry without clearing a user's work. Do not label an asset “Approved” unless the product stores and supports that state.

Primary action: Ink fill, White text. Secondary: White/Paper with Ink text and control border. Links: Slate, underline in body text. Focus: 2 px Slate outline with 3 px offset on light surfaces; light blue on dark. Minimum target 44 × 44 px. Every icon-only action needs an accessible name. Hover is never the only cue.

## 7. Voice and messaging

Brand line: **Your brand, in good order.**

Product descriptor: **A shared home for brand assets.**

Homepage headline: **Your brand, in good order.**

Supporting copy: Keep logos, colors, fonts and brand guidance together. Share one link so people can find and use your brand assets.

Primary CTA: **Create a brand repository**. Secondary: **Explore a brand**.

Alternative headline: **One link. Every brand asset.** Use for awareness and social when the logo and category context are already present.

Alternative product headline: **Give your brand a shared home.** Use for onboarding and an invitation to create.

Brand bio: GitBrand brings logos, colors, fonts and brand guidance into one shareable home. Built for the people who create, manage and use your brand.

Short bio: Logos, colors, fonts and guidance. One shared home.

Write with calm, concrete verbs: add, find, copy, share, download, choose. Describe the action and the outcome. “Brand repository” is the formal object; “brand” is acceptable in brief navigation. Explain technical terms on first use. AI is a supporting capability, not the whole identity.

Avoid: revolutionary, frictionless, military-grade, perfectly secure, approved automatically, always up to date, and any guarantee of AI consistency. Do not repeat public-site statistics or testimonials without independent substantiation.

Microcopy examples (implementation guidance, not a claim that all states already ship):

- Empty logos: “Add your first logo. Upload a file so people can find the right version.”
- Copy confirmation: “HEX copied.”
- Save success: “Changes saved.” Only after persistence succeeds.
- Save failure: “We couldn't save your changes. Try again.” Add “Your draft is still here” only when the actual recovery behavior supports it.
- Private repository: “This brand is private.” Follow with the correct access method for that context.
- Suggested import: “Suggested colors. Choose the ones that match your brand.”

Tone by situation: promotional copy is concise and assured; instructions are specific and friendly; errors are calm and useful. Never blame the user or use jokes when work is at risk.

## 8. Social system

Use four content pillars: better brand handoffs; small product demonstrations; useful brand organization advice; real customer examples with permission. Samples are company-brand content intended to build recognition and encourage repository creation. No posts have been published.

Templates included: 1080 × 1350 portrait awareness post; 1080 × 1080 dark handoff post; 1200 × 630 share card; five 1080 × 1350 educational carousel slides. These are deliverable design dimensions, not a claim about each network's current limits.

Composition: 64–72 px safe margins, logo near the top, one idea, one primary headline, optional card motif and small domain footer. Use at least 24 px for essential supporting text in 1080 px artwork. Do not put body paragraphs into social images. The caption carries detail.

See social/captions.md for ready-to-edit captions, sequence and alternative text. Use the outlined SVG masters for resizing and the PNG exports for posting. Check the target platform's current crop before publication.

## 9. Image and physical direction

Prefer actual product crops and examples of organized brand assets. If physical imagery is useful, use uncoated white/gray paper, layered cards, diffuse daylight and honest soft shadows. Keep perspective mild. A customer case study can inherit the customer's image world inside a neutral GitBrand frame.

Avoid generic smiling-office photography, artificial AI glows, landscapes without a product connection, glossy device stacks and heavy textures behind content. The generated overview is an art-direction study; the vector logo files define exact production geometry.

Stationery: white or Paper stock, one-color logo, generous margins, sparse contact information. Use the mono artwork for embossing or debossing. The two-card motif can inform a folder and insert. Produce a physical proof before manufacturing.

## 10. Handoff and rollout

Assets are non-destructive and isolated under brand-kit/gitbrand-v1. SVG lettering is outlined for portability. Font files are included for editable text in future compositions; source scripts reproduce the SVG artwork. CSS and JSON tokens describe the proposed system; neither is wired into the live app.

Suggested rollout: logo component and favicons; shared color/type tokens; header and footer; customer repository attribution; forms and access states; marketing and social. Validate both themes, transparent logos, long customer names, keyboard focus and 16 px icon legibility before shipping.

Files: index.html is the visual guide; brand-guidelines.md is the written specification; logos/ contains master vectors and exports; social/ contains templates and captions; previews/ contains the overview, study and review captures; tokens.css and tokens.json contain handoff values; source/ contains generators and verification.

Evidence: README.md; package.json; src/pages/Home/sections/Features.tsx; src/pages/Home/sections/ForAI.tsx; src/pages/Repo; src/App.css; index.html. The supplied SVG/PNG informed the logo. The current repository uses Poppins. No customer interviews, market survey or trademark clearance are implied by this kit.