---
version: alpha
name: "Git"
description: "Git's public site combines a warm paper-like ground, dark brown reading text, the red-orange Git identity, teal links, compact navigation, and immediately useful routes into downloads, documentation, and the Pro Git book. The result feels established, practical, and distinctly developer-owned."
colors:
  bg: "#f0efe7"
  surface: "#ffffff"
  text: "#4e443c"
  brand: "#f05033"
  on-brand: "#ffffff"
  border: "#d8d4c8"
  text-soft: "#6b6259"
  link: "#0388a6"
  dark: "#323330"
  code-bg: "#ebe9e1"
typography:
  display:
    fontFamily: "Adelle"
    fontSize: "42px"
    lineHeight: 1.5
    letterSpacing: "0"
  body:
    fontFamily: "Adelle"
    fontSize: "15px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "5px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Git feels like a well-used technical book rather than a cloud product. The warm #f0efe7 ground, brown-black text, serif headings, and quiet texture create continuity with printed manuals. Red-orange identifies Git itself; teal identifies navigation and reference links.

The interface should make downloads, documentation, the Pro Git book, and community routes immediately inspectable. Keep the tone confident and understated.

**Key Characteristics**
- Warm paper background
- Red-orange Git identity
- Teal links with clear affordance
- Serif headings and practical sans-serif body copy
- Manual, book, and command references
- Compact bordered content groups
- Minimal motion and modest radii

## Colors

Use #f0efe7 for the page, #4e443c for reading, #f05033 for brand moments and primary actions, and #0388a6 for links. White supports book, download, and search surfaces. The dark #323330 is appropriate for terminal or utility regions. Avoid replacing the warm ground with pure white across the entire page.

## Typography

Use Adelle or Georgia for display and section titles, Helvetica Neue or Arial for controls and body copy, and monospace for commands, refs, hashes, and configuration. Hero text stays around 42px; body text is 15-16px with generous line height. Keep title casing natural and do not use condensed all-caps marketing type.

## Layout

Use a centered 980px shell, a 720px reading column, and an optional compact side rail for book chapters or manual sections. Keep download and documentation routes above the fold. Full-width texture may establish the page ground, while content remains aligned to a simple vertical rhythm.

Below 900px, move the side rail into a chapter disclosure. Below 640px, stack download choices, keep body copy at 16px, and bound long commands or hashes with horizontal scrolling. The warm background and visible first action remain unchanged.

## Elevation & Depth

Use borders and subtle paper contrast before shadows. Menus may use a small shadow; book covers and screenshots may cast a natural image shadow. Do not float every reference module above the page.

## Shapes

Use 3px controls, 5px content modules, and 8px menus. Square code blocks and manual tables preserve technical character. Pills are limited to versions or platform labels.

## Components

Primary buttons use Git orange with white text. Secondary actions are bordered warm-white buttons; tertiary actions are teal text links; destructive controls use explicit warning copy rather than borrowing brand orange. Cards resemble book or manual modules with thin warm-gray borders. Search fields are compact and labeled. Navigation groups About, Documentation, Downloads, and Community without nested card chrome.

Use 100ms link feedback and 180ms menus. A copy action should confirm briefly without moving surrounding content. Focus uses a 2px teal outline with 2px offset. Reduced motion removes smooth scrolling and any image translation.

Teal links need underlines in prose, orange buttons require white text at accessible sizes, and terminal samples need a text label and copy control. Preserve semantic chapter navigation, current-page indication, skip links, and keyboard search. Never communicate branch, conflict, or status with color alone.

Use direct verbs: "Download for macOS", "Read the Book", "Open the Reference", and "View source". State operating system, version, and command consequences. Explain Git concepts with concrete objects such as commit, branch, remote, and working tree.

The audited default is the warm light theme. A dark theme may use #323330 as the ground with separately tuned text, teal, orange, border, and code tokens. Do not simply invert the paper texture or illustrations.

Git draws from printed technical manuals, Unix command references, and open-source project pages. The design connects source control to a book-like learning path, making durable documentation more prominent than campaign messaging.

## Do's and Don'ts

**Do**
- Preserve the warm paper ground.
- Use Git orange for identity.
- Keep manuals and downloads visible.
- Underline links in prose.
- Show command context and outcomes.
- Label platform and version.
- Use compact, readable modules.
- Reflow chapter navigation on mobile.

**Don't**
- Do not turn the site into generic dark DevOps SaaS.
- Do not use orange for every link.
- Do not hide commands inside screenshots.
- Do not truncate hashes without a reveal path.
- Do not animate branch diagrams continuously.
- Do not nest cards.
- Do not remove visible focus.
- Do not make the typography oversized.

**Quick colors:** page #f0efe7; text #4e443c; Git orange #f05033; link teal #0388a6; white surface #ffffff; border #d8d4c8; terminal #323330.

**Example prompts**
- Create a Git download page with a warm paper ground, orange identity, and exact platform context.
- Design a Pro Git chapter view with serif headings, teal links, and a stable chapter rail.
- Build a command reference with copyable examples, visible outcomes, and bounded long hashes.
- Create a compact community index without decorative SaaS cards.

**Iteration guide:** set the paper ground; establish book-like hierarchy; add orange identity and teal links; expose command context; verify chapter reflow; then test focus and contrast.