Update index.mdx #865
Open
Update index.mdx #865
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
---Richo0110/design
title: Interface guidelines
---
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 mb={6}>
<Text as="p" sx={{m: 0, fontSize: 3}}>
Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub. It provides a shared language and standardized approach to delivering cohesive experiences.
</Text>
</Box>
<Box display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>
<Box>
<Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/guides/">Guides</Link></Heading>
<Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Standards, guidelines, and tools to getting started with Primer.</Text>
</Box>
<Box>
<Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/foundations/">Foundations</Link></Heading>
<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.</Text>
</Box>
<Box>
<Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/ui-patterns/">UI patterns</Link></Heading>
<Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Design guidelines covering common user workflows.</Text>
</Box>
<Box>
<Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/components/">Components</Link></Heading>
<Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Design and usage guidelines for individual Primer components.</Text>
</Box>
<Box>
<Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/github-staff/">GitHub staff</Link></Heading>
<Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Internal documentation for GitHub staff.</Text>
</Box>
<Box>
<Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/native/">Native</Link></Heading>
<Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Principles, foundations and usage guidelines for designing for GitHub's native products.</Text>
</Box>
</Box>
<hr />
<Box mb={7} display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>
<Box>
<Heading as="h4" sx={{fontSize: 5}}>Open source</Heading>
<Text as="p" sx={{fontSize: 3, mt: 3}}>Primer is open-sourced on GitHub. Contributions and feedback are welcome!</Text>
<Link sx={{fontSize: 1, fontWeight: 'bold'}} as={GatsbyLink} to="https://github.com/primer">Contribute on GitHub</Link>
</Box>
<Box>
<Heading as="h4" sx={{fontSize: 5}}>Stay up to date</Heading>
<Link sx={{fontSize: 1, display: 'block', mt: 3, mb: 2, fontWeight: 'bold'}} as={GatsbyLink} to="https://twitter.com/githubprimer">Follow us on Twitter</Link>
<Link sx={{fontSize: 1, display: 'block', fontWeight: 'bold'}} as={GatsbyLink} to="https://github.blog/tag/design-systems/">Read the latest on the blog</Link>
</Box>
</Box>
<Text as="p" sx={{fontSize: 2}}><Text sx={{fontWeight: 'bold'}}>Need help?</Text> If you found a bug on this website, please <Link as={GatsbyLink} to="https://github.com/primer/design/issues/new">open a new issue</Link> with as much detail as possible.</Text>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
---Richo0110/design
title: Interface guidelines
import {HeroLayout} from '@primer/gatsby-theme-doctocat' export default HeroLayout
Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub. It provides a shared language and standardized approach to delivering cohesive experiences.import {Text, Link, Box, Heading} from '@primer/react' import {Link as GatsbyLink} from 'gatsby'
<Box display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>
<Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} 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={{fontSize: 3}}><Link sx={{fontSize: 3,}} 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={{fontSize: 3}}><Link sx={{fontSize: 3,}} 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={{fontSize: 3}}><Link sx={{fontSize: 3,}} 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={{fontSize: 3}}><Link sx={{fontSize: 3,}} 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={{fontSize: 3}}><Link sx={{fontSize: 3,}} 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.
<Box mb={7} display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>
<Heading as="h4" sx={{fontSize: 5}}>Open source
<Text as="p" sx={{fontSize: 3, mt: 3}}>Primer is open-sourced on GitHub. Contributions and feedback are welcome!
<Link sx={{fontSize: 1, fontWeight: 'bold'}} as={GatsbyLink} to="https://github.com/primer">Contribute on GitHub
<Heading as="h4" sx={{fontSize: 5}}>Stay up to date
<Link sx={{fontSize: 1, display: 'block', mt: 3, mb: 2, fontWeight: 'bold'}} as={GatsbyLink} to="https://twitter.com/githubprimer">Follow us on Twitter
<Link sx={{fontSize: 1, display: 'block', fontWeight: 'bold'}} as={GatsbyLink} to="https://github.blog/tag/design-systems/">Read the latest on the blog
<Text as="p" sx={{fontSize: 2}}><Text sx={{fontWeight: 'bold'}}>Need help? If you found a bug on this website, please open a new issue with as much detail as possible.