| title |
|---|
Primer Design System |
import {HeroLayout} from '@primer/gatsby-theme-doctocat' export default HeroLayout import {Text, Link, Box, Heading} from '@primer/react' import {Link as GatsbyLink} from 'gatsby'
<Box pb={4} display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={4}> <Heading as="h3" sx={{color: 'fg.default'}}> <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/guides/"> Guides <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}> Standards, guidelines, and tools to getting started with Primer. <Heading as="h3" sx={{color: 'fg.default'}}> <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/foundations/"> Foundations <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}> The fundamental parts of the design system that underpin all GitHub interfaces, such as color and typography. <Heading as="h3" sx={{color: 'fg.default'}}> <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/ui-patterns/"> UI patterns <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}> Design guidelines covering common user workflows. <Heading as="h3" sx={{color: 'fg.default'}}> <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/components/"> Components <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}> Design and usage guidelines for individual Primer components. <Heading as="h3" sx={{ color: 'fg.default'}}> <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/github-staff/"> GitHub staff <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}> Internal documentation for GitHub staff. <Heading as="h3" sx={{color: 'fg.default'}}> <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/native/"> Native <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}> Principles, foundations and usage guidelines for designing for GitHub's native products.
{' '} Open source Primer is open-sourced on GitHub.{' '} Contributions and feedback {' '} are welcome! Need help? If you found a bug on this website, please{' '} open a new issue {' '} with as much detail as possible.