primer/design

Stars
632
Rank 71,124 (Top 2 %)
Language MDX
License
MIT License
Created about 6 years ago
Updated about 2 months ago

primer/design

primer

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Primer Design Guidelines

Primer Interface Guidelines

Documentation for UI patterns and interaction guidelines.

Status

This is currently a work in progress! Follow along on our project board.

Local development

Clone this repo, e.g. with:

git clone https://github.com/primer/design

In the terminal, navigate (cd) to the repo directory
nvm use --default to use the correct node version.
yarn to install dependencies
yarn start to start the dev server

Deployment

We deploy this site using GitHub Pages. Every push to a branch other than main will deploy to a URL unique to the preview environment. Merges to main will automatically deploy the site to https://primer.github.io/design/.

css

The CSS design system that powers GitHub

octicons

A scalable set of icons handcrafted with <3 by GitHub

react

An implementation of GitHub's Primer Design System using React

github-vscode-theme

GitHub's VS Code themes

prism

A tool for creating and maintaining cohesive, consistent, and accessible color palettes

view_components

ViewComponents for the Primer Design System

doctocat

A Gatsby theme for building Primer documentation sites

primitives

Color, typography, and spacing primitives in json.

stylelint-config

Sharable stylelint config used by GitHub's CSS

primer-markdown

Stylesheets for rendering GitHub Flavored Markdown with Primer.

primer.style

The website for all things Primer

figma-action

Export image assets from Figma to GitHub

github-syntax-theme-generator

Uses a prettylights theme object to generate syntax themes for multiple platforms

octicons-v2

[WIP] A new look for Octicons, GitHub's icon set

figma-diff-probot

Probot using figma api to comment on PRs with before after images

presentations

Primer Presentations is the presentation design system for GitHub. It's intended to be used only by GitHub staff for presentations that represent GitHub.

github-syntax-light

The CSS syntax theme for GitHub

brand

React components and Primitives for GitHub marketing websites

github-vscode-theme-dark-classic

GitHub Dark (classic) theme for VS Code

figma

Primer, GitHub's design system, available on Figma.

deploy

Deploy to Now from GitHub Actions with useful aliases

github-syntax-dark

The CSS dark syntax theme for GitHub

publish

The GitHub Action that publishes Primer packages to npm

behaviors

Shared behaviors for JavaScript components

jekyll-octicons

A jekyll liquid plugin that makes including svg Octicons simple.

react-template

The quickest way to start playing around with Primer React

github-atom-light-syntax

GitHub's official light syntax theme as an atom theme

swatch

Get a swatch svg for a color token from @primer/primitives

github-textmate-theme

GitHub's official syntax themes as TextMate themes

octicons_helper

A rails helper that inlines SVG octicons

rails_forms

Primer forms framework for Rails

doctocat-template

codemirror-github-light

Codemirror GitHub syntax theme

github-atom-dark-syntax

GitHub's official dark syntax theme as an atom theme

keynote-octicons

Keynote templates for using GitHub's octicons in presentations

contribute

Contribution guidelines for the Primer Design System

primer-tooltips

Add tooltips built entirely in CSS to nearly any element.

octicons_gem

Octicons gem that makes primer/octicons available in ruby env

eslint-plugin-primer-react

ESLint rules for Primer React

primer-utilities

Immutable, atomic CSS classes to rapidly build product

blueprints

Reusable components for our documentation sites

next-pages

Understand all the pages in your Next.js app like a person who makes websites

sync

Sync Primer CSS source files from npm to your git repo

primer-module-build

Scripts to build primer SCSS modules into CSS and stats

autocomplete-primer

An atom autocomplete+ provider that completes primer related code

doctocat-nextjs

A Next.js theme for building Primer documentation sites

react-toolchain

Toolchain to help in building React components with @primer/react

primer.github.io

storybook

Compiled storybook source for GH-pages

view_components-template

The quickest way to start playing around with Primer ViewComponents

react-migrate

One time migrations for primer/react

stylelint-selector-no-utility

Stylelint rule that forbids re-styling Primer CSS utility classes

primer-buttons

A collection of buttons used for primary and secondary actions.

.github

live-region-element

A custom element for making announcements with live regions

primer-forms

Style individual form controls and utilize common layouts.

primer-avatars

Basic styles for user profile avatars.

codemirror-github-dark

Codemirror GitHub syntax theme

primer-core

The core modules of the primer framework. Shared between our product and marketing pages.

github-ace-dark

Ace theme for GitHub dark syntax

primer-truncate

Shorten text with an ellipsis

primer-support

Sass variables, mixins, and functions used in primer

primer-states

States, or state indicators, inform users of the current status of a particular item.

next-auth-template

A template for using Next + Primer + Auth.js + Octokit

api

A GraphQL API for collecting and accessing data about the Primer Design System

cli

Design guidelines for GitHub's command line tool

github-ace-light

Ace theme for GitHub light syntax

primer-product

The product based modules of the primer framework. Shared between our product and marketing pages.

primer-layout

Containers, rows, and columns for creating page layout.

primer-navigation

Singular purpose and flexible navigation elements.

primer-box

A module for creating rounded-corner boxes with options for headers, lists, and footers.

atom-packages

A list of Atom packages recommended by the GitHub design systems team

primer-table-object

A module for creating dynamically resizable elements that always sit on the same horizontal line.

primer-base

CSS to reset the browsers default styles

primer-blankslate

Blankslates are for when there is a lack of content within a page or section.

primer-marketing-type

primer-page-headers

Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.

releases

Get data on the latest Primer releases

react-analyze

work in progress

primer-marketing

Primer marketing is the marketing based modules of the primer framework.

primer-alerts

Flash messages, or alerts, inform users of successful or pending actions.

primer-marketing-utilities

primer-breadcrumb

Breadcrumb navigation for pages with parents / grandparents.

primer-tables

Styles to display tabular data for marketing websites at GitHub.

primer-labels

primer-marketing-support

Sass variables, mixins, and functions for use in our marketing components.

primer-cards

Card-like containers to group semantically related content together on marketing websites at GitHub.

comment-token-update

primer-page-sections

Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.