GitBoard Design System

GitBoard Design System mockup preview
Click to expand

GitBoard is a repository-structured, diff-inspired design system for Git workflow tools and code review platforms. It centers around the familiar addition/deletion color coding of diffs, with green and red serving as functional primaries rather than decorative choices. The compact layout is optimized for scanning code changes, reviewing pull requests, and navigating repository structures. Every component draws from the mental model of version control, making the interface instantly recognizable to developers.

Primary#22C55E
Secondary#EF4444
Tertiary#3B82F6
Background#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplaySpace Grotesk · 36px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineSpace Grotesk · 26px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadSpace Grotesk · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeDM Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyDM Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallDM Sans · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionDM Sans · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

OverlineDM Sans · 11px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

GitBoard is a repository-structured, diff-inspired design system for Git workflow tools and code review platforms. It centers around the familiar addition/deletion color coding of diffs, with green and red serving as functional primaries rather than decorative choices. The compact layout is optimized for scanning code changes, reviewing pull requests, and navigating repository structures. Every component draws from the mental model of version control, making the interface instantly recognizable to developers.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

Filter

Elevation & Depth

Subtle
Medium
Large
Overlay
Diff - Addition
Diff - Deletion

Do's & Don'ts

Do

use green exclusively for additions, approvals, and merged states; red for deletions, failures, and rejections.
render all code content in JetBrains Mono at 13px with 1.6 line height for diff readability.
use the inset 3px 0 0 left-border pattern for diff line change indicators.
provide clear PR status badges using the defined pill-shaped status chip system.
maintain the 20px fixed line height for all diff view lines to ensure alignment.

Don't

swap green and red semantics; developers have strong expectations for these colors in git contexts.
use shadows on file viewers or diff panels; flat borders keep the interface clean and scannable.
exceed 14px for body text in compact views; the 4px-base system demands restraint.
use display-size typography for repository names; subhead is the maximum size in list contexts.
apply colored backgrounds to more than the changed lines in a diff; context lines stay white.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.5 KB
Downloads 0
clean dashboard devtools light saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/gitboard and implement it in my code

Don't have the MCP? Install it here