designmd-forge 1.2.0

package/dist/data/designs/ios-github.md

@@ -0,0 +1,394 @@
+# Design System Inspiration of GitHub (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+GitHub's iOS app is the **Primer design system** rendered for mobile — a developer's tool that is dense, information-first, and engineered to make code, diffs, and project state legible at a glance. The default experience is **dark mode** (Primer "dark default"): a deep blue-tinted near-black canvas (`#0D1117`) with surfaces stepping up in measured increments — `#161B22` (subtle/raised), `#21262D` (buttons, inset rows) — each separated by a precise `#30363D` border. Light mode (`#FFFFFF` canvas, `#F6F8FA` subtle) is a first-class peer. The atmosphere is utilitarian and trustworthy: no flourish, no gratuitous motion, every pixel devoted to repository content.
+
+The signature screens — the ones that must be reproduced faithfully — are the **repository home** and the **code browser**. The repo home leads with `owner / name` (both segments in accent blue `#2F81F7`, the name bold), a one-line description, language dot + star + fork stats, a horizontally-scrolling tab strip (**Code · Issues · Pull requests · Actions**) with an orange (`#F78166`) active underline, a branch pill, a latest-commit strip, the file tree, and then the **README rendered inline** in a bordered card. The code browser is a monospace file viewer with a sticky path breadcrumb. This "repo header → file tree → inline README" composition is GitHub's home and the heart of the product.
+
+Color in GitHub is **semantic and disciplined**. There is one link/accent blue (`#2F81F7`), and one famous green — `#238636` — that is *strictly reserved* for the "**Code**" download button and the "**Merge pull request**" button (it literally signals "go / merge"). State is color-coded by meaning, not decoration: an **open** issue/PR is green (`#3FB950`), a **merged** PR is purple (`#A371F7`), a **closed** issue/PR is red (`#F85149`), a **draft** is grey. The most recognizable GitHub visual of all is the **contributions heatmap** — a grid of squares ramping `#161B22 → #0E4429 → #006D32 → #26A641 → #39D353` ("Less → More"). These colors are not interchangeable; each carries a fixed meaning a developer reads instantly.
+
+Typography is **Mona Sans** (GitHub's own variable grotesque, OFL) for UI, with a monospace (`SF Mono` / GitHub's "Monaspace" / `JetBrains Mono` as fallbacks) for **all code, SHAs, file names in trees, and diffs**. The monospace is load-bearing: a commit SHA, a branch name, a file path, and a code blob are always monospace because alignment and character distinction matter. Body UI text is 14pt regular; the type system is conventional and reading-optimized — the personality is in the semantic color and the dense, structured layouts, not the letterforms.
+
+**Key Characteristics:**
+- Primer dark default: canvas `#0D1117`, surfaces `#161B22` / `#21262D`, borders `#30363D`; light mode a first-class peer
+- One accent blue (`#2F81F7`) for links/active; one reserved green (`#238636`) for **Code** / **Merge** buttons only
+- Repo home: `owner / name` + description + language/stars/forks + tab strip + branch pill + file tree + inline README
+- Code browser: monospace file viewer with sticky path breadcrumb and a latest-commit strip
+- Semantic state colors: open = green `#3FB950`, merged = purple `#A371F7`, closed = red `#F85149`, draft = grey
+- Contributions heatmap: 5-step ramp `#161B22 → #0E4429 → #006D32 → #26A641 → #39D353`
+- Issue/PR labels as bordered pills tinted by the label's own color (bug red, enhancement purple, etc.)
+- Mona Sans for UI; monospace for ALL code, SHAs, file names, branch names, diffs
+- Diff rendering: additions on a green wash, deletions on a red wash, line numbers in a muted gutter
+- Octocat mark + the "Code" `<>` button as fixed brand anchors
+- Bottom tab bar (Home / Notifications / Explore / Profile) with an orange-coral active underline on segmented strips
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Accent FG** (`#2F81F7` dark / `#0969DA` light): Hyperlinks, `owner/name`, active text, selected states, focus rings.
+- **Accent Emphasis** (`#1F6FEB` dark / `#0969DA` light): Pressed link, primary-info button fill.
+- **Button Primary** (`#238636` dark / `#1F883D` light): RESERVED — the "Code" download button and "Merge pull request" button only.
+- **Button Primary Hover** (`#2EA043` dark / `#1A7F37` light): Pressed/hover of the green button.
+
+### Canvas & Surfaces (Dark — default)
+- **Canvas Default** (`#0D1117`): Primary canvas — blue-tinted near-black.
+- **Canvas Subtle** (`#161B22`): Raised surfaces, README/file-list card headers, contributions level-0.
+- **Canvas Inset / Surface** (`#21262D`): Default button background, code-block background, inset rows, count pills.
+- **Surface Pressed** (`#30363D`): Pressed rows, hovered list items.
+- **Border Default** (`#30363D`): Primary 1pt borders (cards, file list, buttons).
+- **Border Muted** (`#21262D`): Hairline row dividers inside lists.
+
+### Canvas & Surfaces (Light)
+- **Canvas Default Light** (`#FFFFFF`): Primary canvas.
+- **Canvas Subtle Light** (`#F6F8FA`): Raised surfaces, code blocks, card headers.
+- **Border Default Light** (`#D0D7DE`): Primary borders.
+- **Border Muted Light** (`#D8DEE4`): Hairline dividers.
+
+### Text (Foreground)
+- **FG Default** (`#E6EDF3` dark / `#1F2328` light): Primary text, file names, headings.
+- **FG Muted** (`#7D8590` dark / `#656D76` light): Descriptions, metadata, secondary text.
+- **FG Subtle** (`#6E7681` dark / `#6E7781` light): Timestamps, very low-emphasis, placeholders.
+- **FG on Emphasis** (`#FFFFFF`): Text on green/blue/red emphasis fills.
+
+### Semantic State
+| Role | Dark | Light | Meaning |
+|------|------|-------|---------|
+| Open (success) | `#3FB950` | `#1A7F37` | Open issue/PR, passing check, success label |
+| Merged (done) | `#A371F7` | `#8250DF` | Merged PR (purple is "done") |
+| Closed (danger) | `#F85149` | `#CF222E` | Closed issue/PR, failing check, delete |
+| Draft / Neutral | `#6E7681` | `#6E7781` | Draft PR, neutral state |
+| Attention | `#D29922` | `#9A6700` | Pending check, warning, "needs attention" |
+| Sponsor (pink) | `#DB61A2` | `#BF3989` | Sponsor heart, GitHub Sponsors |
+
+### Contributions Heatmap (the iconic ramp)
+| Level | Dark | Light |
+|-------|------|-------|
+| 0 (none) | `#161B22` | `#EBEDF0` |
+| 1 | `#0E4429` | `#9BE9A8` |
+| 2 | `#006D32` | `#40C463` |
+| 3 | `#26A641` | `#30A14E` |
+| 4 (most) | `#39D353` | `#216E39` |
+
+### Diff Colors
+- **Addition line bg** (`rgba(63,185,80,0.15)` dark) · marker `#3FB950`
+- **Deletion line bg** (`rgba(248,81,73,0.15)` dark) · marker `#F85149`
+- **Diff gutter** (`#6E7681` line numbers on `#161B22`)
+
+## 3. Typography Rules
+
+### Font Family
+- **UI**: **Mona Sans** (by GitHub, SIL OFL) — a variable grotesque. Fallback `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif`.
+- **Monospace**: **Monaspace** / `SF Mono` on iOS; `'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace` as the open fallback. Used for **all** code, SHAs, file/branch names, diffs, inline `code`.
+- **Heading variant**: Mona Sans (GitHub uses one family for display + body; weight + size establish hierarchy).
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Mona Sans | 32pt | 800 | 1.15 | -0.4pt | Marketing/empty-state hero |
+| Repo Title | Mona Sans | 24pt | 700 | 1.2 | -0.3pt | `owner / name` heading |
+| Section | Mona Sans | 20pt | 600 | 1.3 | -0.2pt | "Pull requests", profile sections |
+| Subtitle | Mona Sans | 16pt | 600 | 1.4 | 0pt | "Latest commit", card titles |
+| Body | Mona Sans | 14pt | 400 | 1.5 | 0pt | Descriptions, issue/PR body |
+| Body Strong | Mona Sans | 14pt | 600 | 1.5 | 0pt | File names, emphasized inline |
+| Code / Blob | Monospace | 13pt | 400 | 1.45 | 0pt | Code viewer, diffs, code blocks |
+| Code Inline | Monospace | 13pt | 400 | 1.4 | 0pt | `inline code` on `#21262D` |
+| SHA / Branch | Monospace | 12pt | 600 | 1.0 | 0pt | Commit SHA, branch chips |
+| Metadata | Mona Sans | 12pt | 400 | 1.4 | 0pt | "opened 3 days ago by …" |
+| Label | Mona Sans | 12pt | 500 | 1.0 | 0pt | Issue labels, state pills |
+| Count Pill | Mona Sans | 11pt | 600 | 1.0 | 0pt | Tab counts ("2.3k") |
+| Tab Label | Mona Sans | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
+| Caption | Mona Sans | 11pt | 400 | 1.3 | 0pt | Heatmap legend, fine print |
+
+### Principles
+- **Monospace is the contract**: code, SHAs, file names in trees, branch names, and diffs are ALWAYS monospace — alignment and glyph distinction (`0` vs `O`, `l` vs `1`) are functional, not stylistic.
+- **Weight + size for hierarchy**: one family (Mona Sans); 800 display, 700 repo title, 600 sections/subtitles/strong, 400 body. No thin.
+- **Reading-optimized, not expressive**: the type system is conventional; GitHub's identity is the semantic color and dense structured layouts.
+- **Numbers and counts are tabular**: star/fork counts, tab counts, line numbers use tabular figures so columns align.
+- **Dynamic Type**: titles, body, code scale; tab labels, count pills, SHAs stay fixed (table/tree-layout-sensitive).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Code / Merge pull request — RESERVED green)**
+- Shape: rounded rectangle, 6pt corner radius
+- Background: `#238636` (dark) / `#1F883D` (light) — used ONLY for "Code" download and "Merge pull request"
+- Text/icon: `#FFFFFF`
+- Border: 1pt `rgba(240,246,252,0.1)` (subtle top highlight)
+- Padding: 10pt vertical, 16pt horizontal
+- Font: Mona Sans 14pt weight 600
+- Pressed: background `#2EA043`
+
+**Default Button (Watch / Fork / Star / secondary actions)**
+- Background: `#21262D` (dark) / `#F6F8FA` (light)
+- Text: `#E6EDF3` (dark) / `#24292F` (light)
+- Border: 1pt `#30363D` (dark) / `#D0D7DE` (light)
+- Corner radius: 6pt
+- Padding: 10pt vertical, 16pt horizontal
+- Font: Mona Sans 14pt weight 600
+- Pressed: background `#30363D`
+
+**Danger Button (Close issue / Delete)**
+- Background: `#21262D`, text `#F85149`, border 1pt `#30363D`
+- On confirm/destructive primary: background `#DA3633`, text `#FFFFFF`
+- Corner radius: 6pt, same padding/font as default
+
+**Link / Text Button (View all branches / counterfactual nav)**
+- Font: Mona Sans 14pt weight 500
+- Color: `#2F81F7` (accent)
+- No background, no border
+- Pressed: underline
+
+**Counter Button (Star with count)**
+- Two-segment: a default button + an attached count pill (`#161B22` bg, `#7D8590` text, left border)
+
+### Repository Components (the core)
+
+**Repo Header**
+- Octocat-less; leads with a repo glyph (17pt `#7D8590`) + `owner` (`#2F81F7`) + `/` (`#7D8590`) + `name` (`#2F81F7` bold), Mona Sans 15–24pt
+- Description: Mona Sans 13–14pt `#7D8590`
+- Stats row: language dot (11pt circle, language color e.g. TS `#3178C6`) + label, star (`#7D8590` + count), fork (`#7D8590` + count), Mona Sans 12pt
+
+**Tab Strip (Code / Issues / Pull requests / Actions)**
+- Horizontally scrollable; each item Mona Sans 14pt
+- Inactive: `#7D8590`; Active: `#E6EDF3` weight 600 + 2pt **orange-coral** underline `#F78166`
+- Count badge: `#161B22` pill, `#6E7681` text, Mona Sans 11pt w600
+
+**Branch Pill**
+- `#161B22` bg, 1pt `#30363D` border, 6pt radius
+- Leading branch glyph (13pt), branch name in **monospace** 12pt w600 `#E6EDF3`
+
+**Latest-Commit Strip**
+- `#161B22` bg, bottom border `#30363D`
+- Avatar (18pt circle) + commit message (`#E6EDF3` truncated) + **monospace** short SHA (`#7D8590` 11pt) + relative time
+
+**File Tree Row**
+- Folder glyph `#7D8590` (filled) or file glyph `#7D8590` (outline), 15pt
+- File/dir name: `#E6EDF3` 13pt (monospace for file names is acceptable; GitHub uses sans for the tree list label but mono in the path breadcrumb)
+- Trailing: last-commit message (`#7D8590` 12pt, truncated) + relative time (`#6E7681` 11pt)
+- Row divider: 1pt `#21262D`
+
+**Inline README Card**
+- 1pt `#30363D` border, 8pt radius
+- Header: file glyph + "README.md" (`#E6EDF3` 13pt w600) on `#161B22`, bottom border `#30363D`
+- Body: rendered markdown — `h1` 19pt w700 with a `#21262D` bottom rule; body 13pt `#7D8590`; `code` chips on `#21262D`; status badges as small monospace pills
+
+### State & Labels
+
+**State Pill (Open / Merged / Closed / Draft)**
+- Pill, 999pt radius, Mona Sans 12pt w600, `#FFFFFF` text
+- Open `#3FB950` (leading ● dot or issue-opened glyph), Merged `#A371F7` (⑂ merge glyph), Closed `#F85149` (● or x glyph), Draft `#6E7681` (○)
+- Padding: 5pt vertical, 12pt horizontal
+
+**Issue Label (bug / enhancement / good first issue / custom)**
+- Pill, 999pt radius, 1pt border, Mona Sans 12pt w500
+- Color-tinted by the label's own color: text = label color, border = label color @ 40%, fill = label color @ 10%
+- Examples: bug `#F85149`, enhancement `#A371F7`, good first issue `#3FB950`, documentation `#0075CA`
+
+### Contributions Heatmap (signature)
+
+- Grid of squares, each `aspect-ratio: 1`, 2pt radius, 3pt gap
+- Fill by activity level: L0 `#161B22` (1pt `rgba(110,118,129,0.15)` border) · L1 `#0E4429` · L2 `#006D32` · L3 `#26A641` · L4 `#39D353`
+- Legend row: "Less" + 5 swatches L0→L4 + "More", Mona Sans 11pt `#7D8590`
+- Tap a square → tooltip "{n} contributions on {date}"
+
+### Diff Viewer (signature for PRs)
+
+- Monospace blob, 13pt, `#161B22` background
+- Addition line: `rgba(63,185,80,0.15)` row bg, leading `+` marker `#3FB950`
+- Deletion line: `rgba(248,81,73,0.15)` row bg, leading `-` marker `#F85149`
+- Line-number gutter: `#6E7681` on `#0D1117`, right-aligned, 1pt right border `#21262D`
+- File header: filename (monospace `#E6EDF3`) + additions `+N` (`#3FB950`) / deletions `-N` (`#F85149`)
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 66pt + safe area
+- Background: `rgba(13,17,23,0.94)` with `backdrop-filter: blur(20px)`, 1pt top border `#21262D`
+- Tabs (4): Home, Notifications, Explore, Profile
+- Icon size: 22pt
+- Active: glyph + label `#E6EDF3` (thicker stroke); no tint pill
+- Inactive: `#7D8590`
+- Labels: Mona Sans 10pt w500, always shown
+- Notifications tab shows a `#F85149` unread dot when applicable
+
+**Top Bar (repo view)**
+- Height: 44pt + safe area
+- Leading: back chevron `#7D8590`; Trailing: overflow `⋯` (repo actions)
+- Title appears on scroll (compact `owner/name`)
+
+### Input Fields
+
+**Search Bar (Explore / repo file finder)**
+- Height: 40pt, `#0D1117` bg, 1pt `#30363D` border, 6pt radius
+- Leading `magnifyingglass` 16pt `#7D8590`
+- Placeholder: "Search or jump to…" 14pt `#6E7681`
+- Focus: 1pt `#2F81F7` border + 3pt `rgba(47,129,247,0.3)` ring
+
+**Comment Composer (issues/PRs)**
+- Multi-line, `#0D1117` bg, 1pt `#30363D` border, 6pt radius
+- "Write / Preview" segmented tabs on top; Markdown toolbar
+- Submit = green `#238636` "Comment" button (this green is allowed for the primary submit on a comment form)
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt — scale: 4, 8, 12, 16, 20, 24, 32, 48
+- List row vertical padding: 9–12pt (dense)
+- Card internal padding: 14–16pt
+- Screen horizontal inset: 16pt
+
+### Grid & Container
+- iPhone: content at 16pt horizontal insets; file list / README in full-width bordered cards
+- Tab strip scrolls horizontally; never wraps
+- iPad: 2-pane — repo nav/file tree (left) + content (right); diff viewer can split old/new
+- Code viewer: horizontal scroll for long lines (never wrap code)
+
+### Whitespace Philosophy
+- **Dense and structured**: this is a developer tool — rows are tight, information is maximized, every card has a clear bordered boundary
+- **Borders define regions**: GitHub uses 1pt `#30363D` borders (not shadows) to delineate cards, lists, and the README — structure over softness
+- **Stepped surfaces**: depth is communicated by luminance steps (`#0D1117 → #161B22 → #21262D`), not drop-shadows
+- **Code breathes within structure**: code blocks get internal padding and their own surface, but the chrome around them stays tight
+
+### Border Radius Scale
+- Square (0pt): full-bleed media, diff line rows
+- Subtle (4pt): code chips, contribution squares, badges
+- Standard (6pt): buttons, branch pill, search, inputs
+- Card (8pt): file list, README card, issue cards
+- Comfortable (12pt): bottom sheets, modals
+- Pill (999pt): state pills, issue labels, count badges
+- Circle (50%): avatars
+
+## 6. Depth & Elevation
+
+GitHub is structurally flat — depth is **stepped surface luminance + 1pt borders**, not shadow.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Canvas (Level 0) | `#0D1117`, no border | Page background |
+| Subtle (Level 1) | `#161B22` + 1pt `#30363D` | Cards, README, file-list headers |
+| Inset (Level 1.5) | `#21262D` + 1pt `#30363D` | Buttons, code blocks, count pills |
+| Floating (Level 2) | `#161B22` + 1pt `#30363D` + `rgba(1,4,9,0.85) 0 8px 24px` | Dropdowns (branch switcher, ⋯ menus), autocomplete |
+| Sheet (Level 3) | `#161B22` + 12pt top radius + `rgba(1,4,9,0.85) 0 -8px 24px` | Bottom sheets (share, label picker) |
+| Scrim (Level 4) | `rgba(1,4,9,0.8)` overlay | Behind modals/sheets |
+
+**Shadow Philosophy**: On the dark canvas, shadows are minimal — a 1pt `#30363D` border is the primary "this is a distinct region" cue, reinforced by a luminance step. Only true overlays (menus, sheets) get a shadow, and it's a deep `rgba(1,4,9,0.85)` (near-black, blue-tinted) to read over `#0D1117`.
+
+### Motion
+- **Tab strip switch**: orange underline slides to the new tab over 200ms ease-out; content crossfades
+- **Branch switcher**: dropdown fades + 4pt slide-down in 150ms ease-out; filter is instant
+- **Star/Watch toggle**: button label flips ("Star" ↔ "Starred"), count increments with a 120ms count-up; subtle scale 1 → 0.97 → 1; soft haptic
+- **Merge button**: on tap, button shows a spinner, then morphs to purple "Merged" state over 250ms; success haptic
+- **Diff expand**: "Expand N lines" injects rows with a 150ms height ease-out
+- **Pull-to-refresh**: standard iOS spinner; repo/feed refetches
+- **List append (infinite scroll)**: new rows fade in over 150ms as they enter
+- **Navigation**: native iOS push (300ms horizontal slide) between repo → file → blob
+- **Haptic feedback**: soft impact on star/watch toggle and merge; selection tick on tab change
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Primer dark default: canvas `#0D1117`, surfaces `#161B22` / `#21262D`, borders `#30363D`
+- Reserve green `#238636` for the "Code" download and "Merge pull request" buttons ONLY
+- Use accent blue `#2F81F7` for links, `owner/name`, and active/selected states
+- Color state semantically: open = green `#3FB950`, merged = purple `#A371F7`, closed = red `#F85149`, draft = grey
+- Render the contributions heatmap with the exact 5-step ramp `#161B22 → #0E4429 → #006D32 → #26A641 → #39D353`
+- Use monospace for ALL code, SHAs, file/branch names, and diffs — alignment is functional
+- Define regions with 1pt `#30363D` borders + luminance steps, not drop-shadows
+- Render the README inline in a bordered card on the repo home
+- Give the active tab an orange-coral `#F78166` 2pt underline
+- Tint issue labels by the label's own color (text + 40% border + 10% fill)
+- Render diffs with green/red line washes and a muted line-number gutter
+
+### Don't
+- Don't use the green `#238636` for generic CTAs — it specifically means "download code / merge"
+- Don't swap state colors — merged is ALWAYS purple, closed is ALWAYS red; developers read these instantly
+- Don't render code, SHAs, or file paths in the sans face — monospace is the contract
+- Don't use drop-shadows to separate cards — use borders + surface steps
+- Don't wrap long code lines — code scrolls horizontally
+- Don't use a pure-black canvas — Primer dark is the blue-tinted `#0D1117`
+- Don't tint the active bottom tab with a pill — active is `#E6EDF3` glyph+label
+- Don't recolor the contributions ramp — it's GitHub's single most recognizable visual
+- Don't soften the dense layout with large whitespace — this is a developer tool, density is the point
+- Don't use accent blue for body text — blue is links/active only
+- Don't animate aggressively — motion is quiet, functional, 150–300ms ease-out
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Tab strip scrolls; stats may wrap to 2 lines |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
+| iPhone 15/16 Pro Max | 430pt | Wider file tree; more visible heatmap weeks |
+| iPad (portrait) | 768pt | 2-pane: file tree (left) + blob/README (right) |
+| iPad (landscape) | 1024pt+ | 3-pane possible: nav + tree + content; split diff (old/new) |
+
+### Dynamic Type
+- Repo title, section, body, code: full scale
+- Tab labels, count pills, SHAs, heatmap squares: FIXED (table/tree-layout-sensitive)
+- Code blocks: scale to XL (stay monospace, still horizontally scroll)
+
+### Orientation
+- All screens support rotation
+- iPad split view: persistent file tree (primary) + blob/diff (secondary)
+- Diff viewer switches to side-by-side (old | new) in landscape/iPad
+
+### Touch Targets
+- Tab strip item: 44pt min hit, 14pt label
+- File tree row: full-row 44pt hit
+- Bottom tab icons: 22pt glyph, 44pt hit
+- Heatmap square: small visual, 28pt effective hit (tooltip)
+- Buttons: 36–44pt tall
+
+### Safe Area Handling
+- Top: top bar respects safe area and Dynamic Island
+- Bottom: bottom tab bar respects home indicator; comment composer docks above keyboard
+- Keyboard: file finder / comment composer scrolls above keyboard
+- Sides: 16pt content inset; code blocks scroll horizontally within insets
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (dark): `#0D1117` · (light): `#FFFFFF`
+- Canvas subtle: `#161B22` dark / `#F6F8FA` light
+- Surface / inset: `#21262D` dark / `#F6F8FA` light
+- Border default: `#30363D` dark / `#D0D7DE` light
+- FG default: `#E6EDF3` dark / `#1F2328` light
+- FG muted: `#7D8590` dark / `#656D76` light
+- Accent (link): `#2F81F7` dark / `#0969DA` light
+- Button primary (Code/Merge): `#238636` dark / `#1F883D` light
+- Open (success): `#3FB950` · Merged (done): `#A371F7` · Closed (danger): `#F85149` · Draft: `#6E7681`
+- Attention: `#D29922` · Sponsor: `#DB61A2`
+- Heatmap: `#161B22 → #0E4429 → #006D32 → #26A641 → #39D353`
+- Tab active underline: `#F78166`
+
+### Example Component Prompts
+- "Build the GitHub repo header in SwiftUI: a repo glyph (17pt `#7D8590`) + `owner` (`#2F81F7`) + `/` (`#7D8590`) + `name` (`#2F81F7` bold) in Mona Sans 15pt; below, a description in Mona Sans 13pt `#7D8590`; a stats row with a language dot (11pt circle, language color) + label, a star glyph + count, a fork glyph + count in Mona Sans 12pt `#7D8590`. Canvas `#0D1117`."
+
+- "Create the GitHub tab strip: horizontally-scrolling Mona Sans 14pt items 'Code', 'Issues', 'Pull requests', 'Actions'. Inactive `#7D8590`; active `#E6EDF3` weight 600 with a 2pt `#F78166` orange-coral underline. Count badges as `#161B22` pills with `#6E7681` Mona Sans 11pt w600 text."
+
+- "Render the GitHub inline README card: 1pt `#30363D` border, 8pt radius. Header row: file glyph + 'README.md' (`#E6EDF3` 13pt w600) on `#161B22` with a bottom `#30363D` border. Body: rendered markdown — h1 19pt w700 with a `#21262D` bottom rule, body 13pt `#7D8590`, inline `code` on a `#21262D` chip, a status badge as a small monospace pill (`#3FB950` bg, `#0D1117` text)."
+
+- "Build the GitHub contributions heatmap: a grid of `aspect-ratio: 1` squares, 2pt radius, 3pt gap, filled by activity level — L0 `#161B22` (1pt `rgba(110,118,129,0.15)` border), L1 `#0E4429`, L2 `#006D32`, L3 `#26A641`, L4 `#39D353`. Below: a legend 'Less' + 5 swatches L0→L4 + 'More' in Mona Sans 11pt `#7D8590`. Tap a square → tooltip '{n} contributions on {date}'."
+
+- "Create GitHub state pills: rounded 999pt, Mona Sans 12pt w600, white text, 5pt×12pt padding. Open = `#3FB950` (leading ● / issue-opened glyph), Merged = `#A371F7` (merge glyph), Closed = `#F85149` (x glyph), Draft = `#6E7681` (○). Issue labels: 1pt-bordered pills tinted by the label's own color — text = label color, border = 40% alpha, fill = 10% alpha (bug `#F85149`, enhancement `#A371F7`, good first issue `#3FB950`)."
+
+- "Build the GitHub diff viewer: monospace 13pt blob on `#161B22`. Addition lines get a `rgba(63,185,80,0.15)` row background + a `+` marker `#3FB950`; deletion lines get `rgba(248,81,73,0.15)` + a `-` marker `#F85149`. Line-number gutter: `#6E7681` numbers on `#0D1117`, right-aligned, 1pt right border `#21262D`. File header: filename (monospace `#E6EDF3`) + `+N` (`#3FB950`) `-N` (`#F85149`)."
+
+- "Build the GitHub bottom tab bar: 66pt + safe area, `rgba(13,17,23,0.94)` 20px blur, 1pt `#21262D` top border. Four tabs: Home, Notifications, Explore, Profile — 22pt glyphs, Mona Sans 10pt w500 labels. Active = `#E6EDF3` glyph+label (thicker stroke, NO pill). Inactive = `#7D8590`. A `#F85149` unread dot on Notifications when applicable."
+
+### Iteration Guide
+1. Canvas is Primer dark `#0D1117` (blue-tinted near-black) — NOT pure black; surfaces step `#161B22 → #21262D`
+2. Green `#238636` is RESERVED for "Code" download + "Merge pull request" — never a generic CTA
+3. Accent blue `#2F81F7` is links / `owner/name` / active states only — never body text
+4. State color is semantic and fixed: open = green `#3FB950`, merged = purple `#A371F7`, closed = red `#F85149`, draft = grey
+5. The contributions heatmap ramp is exact (`#161B22 → #0E4429 → #006D32 → #26A641 → #39D353`) — GitHub's signature visual
+6. Monospace for ALL code, SHAs, file/branch names, diffs — alignment & glyph distinction are functional
+7. Regions are defined by 1pt `#30363D` borders + luminance steps, NOT drop-shadows
+8. The repo home composition is: `owner/name` header → tab strip → branch pill → latest-commit strip → file tree → inline README card
+9. The active tab strip item gets a 2pt orange-coral `#F78166` underline (the tab bar itself has no pill)
+10. Diffs use green/red line washes + a muted line-number gutter; code never wraps (horizontal scroll)