GitHub — Repository

Dev ToolsSee it livegithub.com

Every file row doubles as a changelog: the commit message and relative time ARE the file browser, so you never need a separate history view to know what changed and when.

GitHub — Repository — captured interface — Page excerpt · scroll inside to explore

Source capture · 2026-08-01Open full image ↗

Navigation Creative tools

Why this pattern works

Steal the file-list-as-changelog pattern: instead of a plain name/size/date table, each row shows the folder or file, the most recent commit message that touched it (truncated, with the PR number linked inline), and a relative timestamp — one table answers 'what is this' and 'what happened to it' at once. Also worth lifting: the metadata rail on the right as a stack of single-purpose modules (About blurb, wrapping topic-tag pill cloud, Readme/license/policy links, Releases) separated by hairlines, no cards.

Design notes

Surface: Repository root / Code tab for vercel/next.js, logged out
Navigation: Three tiers. A near-black global product nav (dropdowns, search, sign in/up), a repo identity row (org/repo breadcrumb, `Public` badge, `Notifications` / `Fork` / `Star` pill buttons), then a tab strip (Code, Issues, Pull requests, Discussions, Actions, Security and quality, Insights) using icon-plus-label with a plain count instead of a badge.
Layout: Fixed-width centered container, two columns below the tabs at roughly 3:1 — a wide file browser on the left, a narrower fixed metadata rail on the right. One continuous scroll, no pinned panes.
Density: Compact ~40px rows in the file table, three ellipsis-truncated zones per row (name, commit message, time). The metadata rail is looser — one fact per line.
Color: Black-and-white with exactly one saturated accent: the green `Code` clone button. Folders get a blue icon, files a plain grey one. Topic tags in the sidebar are pale-blue pill chips, the only other colour on the page. Top nav is near-black; everything below it is white.
Type: One sans throughout. Repo name is bold at ~20px beside a lighter grey org name; file names and commit messages sit at ~14px regular, staying default-colour rather than link-blue until hovered; timestamps are grey, right-aligned, same size as body text.
Pattern: The `latest commit` summary strip sitting above the file table — avatar, author, message, linked PR number, checkmark, commit hash, total commit count — a preview row outside the list that reframes the whole table as 'what's under this commit' instead of a flat listing.
States: No empty, loading or zero-count states visible — a populated, healthy-repo screenshot. The one dynamic-feeling element is the green CI checkmark beside the latest commit.
Don't: Don't render the commit-message column in link-blue by default. GitHub keeps file names and messages in default text colour and saves blue for the PR number and the breadcrumb only, so the eye still lands on the green Code button first.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withI want to

Tech stack

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text

# My project
[Describe the product, audience, and screen you want to improve]

Stack: Use the existing project stack
Task: Implement the interface and verify the result in the existing project.

## Tool guidance (Any AI tool)
Use available project tools to inspect, implement, and test. State any unavailable capabilities.

# Design reference: GitHub — Repository
Source: https://github.com/vercel/next.js
Swipefile reference: https://swipefile.design/ref/github-repo/
Captured: 2026-08-01. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- surface: Repository root / Code tab for vercel/next.js, logged out
- nav: Three tiers. A near-black global product nav (dropdowns, search, sign in/up), a repo identity row (org/repo breadcrumb, `Public` badge, `Notifications` / `Fork` / `Star` pill buttons), then a tab strip (Code, Issues, Pull requests, Discussions, Actions, Security and quality, Insights) using icon-plus-label with a plain count instead of a badge.
- layout: Fixed-width centered container, two columns below the tabs at roughly 3:1 — a wide file browser on the left, a narrower fixed metadata rail on the right. One continuous scroll, no pinned panes.
- density: Compact ~40px rows in the file table, three ellipsis-truncated zones per row (name, commit message, time). The metadata rail is looser — one fact per line.
- color: Black-and-white with exactly one saturated accent: the green `Code` clone button. Folders get a blue icon, files a plain grey one. Topic tags in the sidebar are pale-blue pill chips, the only other colour on the page. Top nav is near-black; everything below it is white.
- typography: One sans throughout. Repo name is bold at ~20px beside a lighter grey org name; file names and commit messages sit at ~14px regular, staying default-colour rather than link-blue until hovered; timestamps are grey, right-aligned, same size as body text.
- pattern: The `latest commit` summary strip sitting above the file table — avatar, author, message, linked PR number, checkmark, commit hash, total commit count — a preview row outside the list that reframes the whole table as 'what's under this commit' instead of a flat listing.
- states: No empty, loading or zero-count states visible — a populated, healthy-repo screenshot. The one dynamic-feeling element is the green CI checkmark beside the latest commit.
- dont: Don't render the commit-message column in link-blue by default. GitHub keeps file names and messages in default text colour and saves blue for the PR number and the breadcrumb only, so the eye still lands on the green Code button first.

Useful for: Steal the file-list-as-changelog pattern: instead of a plain name/size/date table, each row shows the folder or file, the most recent commit message that touched it (truncated, with the PR number linked inline), and a relative timestamp — one table answers 'what is this' and 'what happened to it' at once. Also worth lifting: the metadata rail on the right as a stack of single-purpose modules (About blurb, wrapping topic-tag pill cloud, Readme/license/policy links, Releases) separated by hairlines, no cards.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

GitHub — Repository

Make it your own

Keep exploring