Skip to content
Primer Design System
Primer Design System
Brand
About
Site navigation
Guides
Accessibility
Accessibility at GitHub
Guidelines
Tools
Alternative text for images
Assistive technology announcements
Descriptive buttons
Focus management
Headings
Links
Semantic HTML
Text resize and respacing
Tooltips
Component lifecycle
Component status
Contribute
How to contribute
Design
Documentation
Handling new patterns
Adding new components
Figma
Introduction
Getting started
How to contribute
Introduction
Rails
Getting started
Migration guides
React
Getting started
Theming
Theme reference
Linting
System props
Core concepts
Philosophy
Overriding styles
Hooks
Foundations
Color
Accessibility
Base scales
Overview
Content
CSS utilities
Animations
Borders
Box shadow
Colors
Details
Flexbox
Getting started
Grid
Layout
Margin
Padding
Typography
Icons and visuals
Octicons
Octovisuals
Design guidelines
Layout
Primitives
Getting started
Token names
Color
Size
Typography
Migrating
Responsive
Typography
UI patterns
Data visualization
Degraded experiences
Empty states
Feature onboarding
Forms
Loading
Navigation
Notification messaging
Progressive disclosure
Saving
Components
Action bar
Action list
Action menu
Anchored overlay
Autocomplete
Avatar
Avatar pair
Avatar stack
Banner
Blankslate
Border box
Box
Branch name
Breadcrumbs
Button
Button group
Checkbox
Checkbox group
Circle badge
Circle octicon
Clipboard copy
Close button
Comment box
Counter label
Data table
Details
Dialog
Form control
Header
Heading
Hidden text expander
Icon
Icon button
Image
Image crop
Inline message
Label
Label group
Layout
Link
Markdown
Nav list
Octicon symbols
Overlay
Pagehead
Page header
Page layout
Pagination
Popover
Pointer box
Progress bar
Radio
Radio group
Relative time
Segmented control
Select
Select panel
Skeleton avatar
Skeleton text
Skeleton box
Spinner
Split page layout
Stack
State label
Subnav
Tab container
Tab nav
Tab panels
Text
Text input
Text input with tokens
Textarea
Timeline
Toggle switch
Token
Tooltip
Tree view
Truncate
Underline nav
Underline panels
Deprecated components
Box overlay
Dropdown
Filter list
Filtered search
Flash
Menu
Select menu
Side nav
Toast
GitHub staff
GitHub shared components
Native
CLI
Getting started
Foundations
Components
Desktop
Getting started
Foundations
Mobile
Platforms
Foundations
GitHub
On this page
Base
Border
Breakpoints
Viewport
Layout
Size
An overview of all available size CSS variables
On this page
Base
Border
Breakpoints
Viewport
Layout
Base
Theme: Light
View in Storybook
Border
Border size
Theme: Light
View in Storybook
Border radius
Theme: Light
View in Storybook
Outline
Theme: Light
View in Storybook
Breakpoints
Theme: Light
View in Storybook
Viewport
Theme: Light
View in Storybook
Layout
Stack
Theme: Light
View in Storybook
Controls
Demo: X small
Theme: Light
View in Storybook
Demo: Control stack regular
Theme: Light
View in Storybook
Overlay
Theme: Light
View in Storybook