# Introduction to Primer CSS
*2024-01-05*
> An introduction to Primer CSS, GitHub's design system.
Primer is GitHub's design system and CSS framework. It provides a set of guidelines and components to create consistent, accessible interfaces.
## What is Primer?
Primer is built around three core pillars:
1. **Primitives** - Design tokens for colors, spacing, and typography
2. **CSS** - Utility classes and component styles
3. **Components** - React and ViewComponent implementations
## Getting Started
Install Primer CSS via npm:
```bash
npm install @primer/css
```
Import the CSS in your project:
```scss
@import "@primer/css/index.scss";
```
## Utility Classes
Primer provides a comprehensive set of utility classes:
### Colors
```html
Default text color
Muted text color
Accent text color
```
### Spacing
```html
Padding of 16px
Margin of 24px
```
### Flexbox
```html
Left
Right
```
## Components
Primer includes many pre-built components:
| Component | Description |
|-----------|-------------|
| Box | Container with border and padding |
| Button | Interactive button styles |
| Label | Tags and badges |
| Header | Navigation header |
## Dark Mode
Primer supports dark mode through data attributes:
```html
```
## Resources
- [Primer Documentation](https://primer.style/)
- [GitHub Repository](https://github.com/primer/css)
- [Primer React](https://primer.style/react/)
Start building with Primer today!