We need to add Presentations here so that it is more easily accessible.

Problem

The index page points to obsolete documentation. This is also related to #112 and #110.

See also primer/css#759.

Proposal

1. Rename Styleguide link to Documentation.
2. Add a second link Components pointing to Components.
3. Replace links pointing to styleguide.github.com/primer to primer.style/css.
4. Replace links pointing to primer/primer/issues/new/choose to primer/css/issues/new/choose.

Possible fix

diff --git a/README.md b/README.md
index 9deece6..d019cbb 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,9 @@
 <h3 align="center">Primer.style</h3>
 
 <p align="center">
-<a href="https://styleguide.github.com/primer">Styleguide</a>
+<a href="https://primer.style/css">Documentation</a>
+    ·
+    <a href="https://primer.style/components">Components</a>
     ·
     <a href="https://github.com/primer">Primer org</a>
     ·
diff --git a/src/Hero.js b/src/Hero.js
index 1210721..bd83ba9 100644
--- a/src/Hero.js
+++ b/src/Hero.js
@@ -25,8 +25,12 @@ export default function Hero() {
             Resources, tooling, and design guidelines for building interfaces with GitHub’s design system
           </Text>
           <Text fontFamily="mono" is="p" color="blue.3" mt={5}>
-            <LinkLight fontSize={[0, 1, 2]} href="https://styleguide.github.com/primer/">
-              Style guide
+            <LinkLight fontSize={[0, 1, 2]} href="https://primer.style/css/">
+              Documentation
+            </LinkLight>{' '}
+            ・
+            <LinkLight fontSize={[0, 1, 2]} href="https://primer.style/components/">
+              Components
             </LinkLight>{' '}
             ・
             <LinkLight ml={2} fontSize={[0, 1, 2]} href="https://spectrum.chat/primer">
diff --git a/src/OpenSource.js b/src/OpenSource.js
index 061df5b..dbf7ce5 100644
--- a/src/OpenSource.js
+++ b/src/OpenSource.js
@@ -36,7 +36,7 @@ export default function OpenSource() {
             <Octicon icon={SpectrumIcon} size={20} verticalAlign="top" mr={2} />
             Chat with us in Spectrum
           </LinkDark>
-          <LinkDark fontSize={2} mb={3} display="block" href="https://github.com/primer/primer/issues/new/choose">
+          <LinkDark fontSize={2} mb={3} display="block" href="https://github.com/primer/css/issues/new/choose">
             <Octicon icon={Octoface} size={20} verticalAlign="text-top" mr={2} />
             Share feedback on GitHub
           </LinkDark>
diff --git a/src/PrimerCSS.js b/src/PrimerCSS.js
index b354dae..b702fb4 100644
--- a/src/PrimerCSS.js
+++ b/src/PrimerCSS.js
@@ -23,10 +23,10 @@ export default function PrimerCSS() {
           <Text is="p" color="blue.2" mb={5} fontSize={3}>
             Styles can be mixed and matched to achieve many different layouts, independent of their location.
           </Text>
-          <ButtonFill my={[2, 0]} mr={2} href="https://styleguide.github.com/primer/">
+          <ButtonFill my={[2, 0]} mr={2} href="https://primer.style/css/">
             Documentation
           </ButtonFill>
-          <ButtonOutline my={[2, 0]} href="https://github.com/primer/primer">
+          <ButtonOutline my={[2, 0]} href="https://github.com/primer/css">
             GitHub
           </ButtonOutline>
           <Text is="p" fontSize={2} mt={5} color="blue.3" fontFamily="mono">

See #135

• Add new What's New section, highlighting the releases, follow the site design styles
• Automate this so that we don't have trouble keeping this up-to-date, see #108
• Consider updating News page to have "What's new" and "Releases" categories, see #121

I had a hell of a time getting the header from Blueprints working in the new Gatsby set up, and documented @colebemis's suggestion to use Yarn's selective version resolution feature to work around mismatched React versions. @emplums requested that we switch back to npm for consistency with other projects, and I agreed that we should do this as soon as we're able to swap out the Blueprints header for the one in Doctocat.

@broccolini to describe

See #135

• Add new Open Source section

cc @jonrohan

This issue is to take a look at the current way we're organizing content across primer.style and restructure as we see fit. There are redundant pages across primer.style sites, pages that no longer belong where they currently are, and confusing or misleading titles.

Let's see if we can clean this up and provide a more useful foundation for these pages moving forward.

Primer Illustrations - Refinement Notes

The current illustrations for primer.styles are a combination of other assets used amongst other entities such as Atom, marketing site, etc. Our goal is to refine these elements into something that is cohesive with the other digital properties but is also true to the Primer brand.

Our current visual identity is documented here.

Design Suggestions

• Angle the paintbrush to seem less like a person/less static
• Embody the idea of Design + Code by having the paintbrush reveal code, code blocks, dots
• Think in layers. Design -> Code = Top -> Bottom
• Create other formats that do not require a dark background. For assets such as README images or others that are not on a dark bg, explore other options with transparency or utilizing dark bg shapes for contrast. Concepts similar to this.

Explorations

Figma document links will go here

Feedback

Please contact @ashygee or @emilybrick for any comments, questions, feedback, etc. This issue will live as a living document for this project until closed.

The News page hasn't been update since November, currently it's a manual process so we need a way to remember to update it. I think we should include this as part of First Responder duties since we're aiming to reduce the amount of project work FR does, and increase time for FR + maintenance tasks.

Proposed process:

• FR opens News pr every Monday for team to comment re new events and releases.
• Slack bot reminder on Thursday to help team remember to post updates to pr
• FR checks again with team on Friday re any changes and updates but doesn't ship (because of timezone differences people may ship releases after someones end of work day so makes more sense to ship on Monday)
• Next FR reviews and ships News PR and opens a new one for the week. The cycle continues.

This is very manual, if we can automate all or parts of this please make suggestions!

cc @primer/ds-core

Lots of tidying to do. Top of mind are:

• pull lef/right text/image grid into it's own component since spacing is the same
• make a media object component for icons + text such as packages and octicons
• remove classNames and swap out for primer-react components
• remove redundant code (old components, packages etc.)
• move react logo into custom octicon component
• check accessibility

Here's the CodePen example. Just need to figure out how to make this work on the site now. 😊

What & why

As we continue to expand the Primer brand with new sites and updates, we are running into more use cases where consistent illustrations are needed to correctly represent the Primer brand.

Known issues/things to consider

• Currently the public interprets the Primer logo to be the package Octicon, but this has not bet solidified
• Pairing illustrations to be consistent with the site illustrations but also maintaining Primer as a separate entity
• There is currently no illustration-specific documentation
• The illustrations should be consistent proportionally as they will need to scale based on use and display size

Who

• @ashygee will create documentation and set up a component system for the illustrations
• @broccolini to provide current guidelines and support with design feedback and reviews (@emilybrick to support with this as well?)

Tracking

The following assets are needed or need to be updated with new style:

Primer.style

• Homepage
  • Update Hero illustration
  • Update Octicons illustration
• Update Team page illustration
• Update News illustration

Sub-site hero images

• Primer CSS
• Update Primer Design
• Update Primer Components

Readme Images

• Update Primer.style
• Primer Design
• Primer Components
• Primer CSS

Social Images

• Spectrum chat background
• Spectrum chat avatar
• Twitter background
• Twitter avatar
• Facebook
• OG images
  • Primer.style
  • Design
  • CSS
  • Components
• Template for marketing social media images

Identity

• Global Favicon (currently package icon on or GitHub mark, or none at all)
• Repo avatar (should be consistent with Twitter Avatar etc.
• Bot avatar (can have a simple differentiator like a different color)

Related Issues and Discussions

• Primer.style visual identity notes
• PR: README updates #350
• Primer Illustrations: Style Refinement Notes
• README Image Concepts

Flesh out design for the team page

• image, bio, github handle

Link to mood board
Figma file for mocks in progress

This is being addressed in #101

I think we could do <Box is="body"> or injectGlobal()?

See #135

• #162 Update main nav to say "about" instead of team
• #162 Redirect team to About page (anchored to point in page)
• Update header content to include "made by GitHub" para
• #161 - Add new docs showcase section using current social thumbnails. This reflects the order and content I think we should use in the first ship.

A refresh of the Primer.style social cards for Twitter, Facebook, and link unfurling is needed for consistency with the updated illustration style.

The current state of the favicon has been in need of an update for some time. As of this writing, we are using the package octicon as the favicon and also as an avatar on social media.

Current favicon

Explorations

I've created a few variations based off of the paintbrush illustration element that has been used consistently to represent Primer in the READMEs and header illustrations of the site. Because the favicon is a small size, details are should be limited to only a clear brand representation. Using the stylings seen in the READMEs and header illustrations I've created the following options:
1.

2.

3.

4.

Explorations in use

Favicons in a variety of tab colors:

Favicon options in comparison to primer.style's current favicon:

I personally like options 3 & 4 the best. For option 3 I feel is in line with the header illustrations since it uses the box format that we've been using in a lot of our illustrations. For option 4, I like that it has some resemblance to what we use with GitHub's brand. I'm interested in hearing any feedback on these options.

cc @broccolini @emilybrick

The team data living in JS object literals is kinda funky, and I'm fairly certain that the way we're doing things right now means that the ReactMarkdown code is included in our client-side JS bundle because it's ~800K. 😱

We could improve this situation a lot by doing more SSR, and/or with MDX! So rather than having one question that lives in some component and the answer for it living in an object literal, the Markdown for each team member could just look like:

---
name: Shawn Allen
handle: shawnbot
gif: some/funny/thing.gif
---

# What is your favorite color?
Blue. No yel-- Auuuuuuuugh!

Then, when rendering each team member, we can style the markdown elements like so:

import Rohan from './jonrohan.md'
import Shawn from './shawnbot.md'

function Team() {
  return [
    <TeamMember component={Shawn} />,
    <TeamMember component={Rohan} />
  ]
}

function TeamMember({component: Component, ...rest}) {
  const {name, handle, gif, color = 'blue'} = Component.frontmatter
  return (
    <MDXProvider components={{
      a:  props => <Link color={`${color}.0`} {...props} />,
      h1: props => <Heading color={`${color}.2`} fontFamily="mono" {...props} />,
      p:  props => <Text color={`${color}.3`} {...props} />
    }}>
      <Component {...rest} />
    </MDXProvider>
  )
}

@jonrohan

What is this

We've added a lot of great new features of Primer (Blueprints, Presentations, updates to Components and CSS, etc.) and we need to update Primer.style to reflect each new facet.

Concerns

Several things to keep in mind with the refresh:

• pairing with the updated styling of the rest of GitHub (e.g. GitHub blog)
• upholding the Primer branding
• focus on each new facet as well as possible callouts for news and adding to the team
• rethinking of news page #121
• new homepage redesign

Update Feb 27th, 2020

Proposed release stages of homepage design: 2, 3, 4

The Design and Development dropdown buttons in the navbar are broken on the https://primer.style/components(/*) page(s). I have tested this on Chrome, Brave, and Safari.

Right now we just interpolate $TRAVIS_BRANCH into the deployment URL (primer-style-${TRAVIS_BRANCH}.now.sh), which doesn't work. The simplest solution would be to substitute non-word characters in the branch name before putting it into the URL.

If a primer.style URL to the documentation ends with /, the page shows a 404. E.g. https://primer.style/components/.

Short term fix is to not use a trailing slash for links, but would still be nice if it worked when linking from external sites.

https://primer.style/octicons-v2/

Now that Now's GitHub integration supports deploying the master branch, it should be possible to set the alias field in now.json and add "scale": {"sfo": 1} to scale automatically. It'd be nice to get automatic deployments on merge to master, right?

Here's the team questions/outline:

• Name, Title
• GitHub handle
• Favorite CSS feature
• What drew you to design systems?
• Who have you learned from or been inspired by?
• Favorite tools

What is this?

This issue is to propose a re-design of the layout for the News page. Right now our What's New page looks more like a changelog for Primer's different packages. At the time of this writing, there are 8 different releases to scroll through before getting to any type of article.

Proposal

I propose separating new releases from news involving the design system as a whole or what's going on with our team. I think having releases in their own section will create for a much quicker and more efficient solution for anyone looking to browse what the latest releases are as well as being able to keep up to date with all of the exciting news/events/articles involving Primer and our team.

Text color is blue 4!

This issue is to propose that the DS team each adds their own GIF response to this question:

Which GIF captures your essence?

Upload your responses here and I'll add them to the team page. 🤩

@broccolini @jonrohan @shawnbot @emilybrick @emplums @jhuashao

@ashygee

Primer.style visual identity notes:

Background

• Borrowed visual aspects from Site Team's illustration style as well as a few elements from Atom
• Converted to a "dark theme" for Primer & incorporated Primer blue as the main color
• Evolved it a bit for Primer to feel more connected to code/systems concept

Notes

• Paintbrush is meant to connect to the name, and while it could be refined a bit, it's a recognizable element that stands out as part of the identity right now
• Meant to feel like "Design + Code". Paintbrush, squiggly lines, and hand-drawn elements for the "Design" side, and code block rectangles, shapes, and dots for the "Code" and components side.
• Should feel like it's a hackable/live code feel (e.g. you can move the paintbrush and octicons on the live site)
• Use layering and animation to make the design feel cohesive
• Deliberately don't people in the library for the core Primer brand
• Shouldn't be using flat white anywhere, use Primer colors, dark theme ATM

Assets Needed (wip list)

• Spectrum Chat background
• Readme Images
• Images for social (including OG images)
• 'Banner' Images for the docs

Keep in Mind

Refinement over reinventing the wheel, let's refine what we've got rather than a total rebrand (because we just did that 😄)

Relevant Links

Primer.style exploration in Figma

Marketing illustrations issue:
https://github.com/github/site-design/issues/567

Marketing type revamp (idk, get more clarity on this?)
https://github.com/relaunch-styles?_features=site_relaunch

Examples of the new illustration style in action:
GitHub Actions Marketing Page
WIP Blog Styling

New marketing illustration styles in Figma

Slides for Figma Meetup (rough)

Take Stock

Illustrations to audit:

• primer.style
• components image
• what's new page
• team page

For feedback:

• Sophie
• Ruby Jazz (who worked on the initial Site Marketing illustrations!)
• Simon (Atom designer)

@ashygee to take the reigns on this, @emilybrick and @jhuashao here to support!

We're continuing to consolidate our documentation websites on anything design systems, under the primer.style domain, in an effort to make finding documentation easier. Currently there isn't an easy way to navigation between one primer.style website and another.

This issue explores a solution for our navigation, and some early ideas for updating our homepage design in and effort to provide a better overview of content on our websites.

Navigation

Taking a cue from Material design, I think categorizing our (current and future) sites under headings like Design, Develop, and Tools make sense. In future we might have Content docs too, and we should keep What's new easily accessible. Something like this:

By grouping design-related documentation under the heading "Design" we need to rename our Design Guidelines website, this could be "Interface Guidelines" or something along those lines.

Also I anticipate we'll want Search, we'll have to figure out a docs specific search vs global, similar to what we had on the style guide.

Orientation

Navigating from one site to another is one part of the problem, knowing where you are is the other. I like the use of the monospace font in the blog design, and thought we might use that to distinguish between the home link to Primer vs the specific docs home such as Components, CSS, Octicons etc.

primer.style subsite

I'm not sure it makes sense to highlight if you are on a "design" website vs a "develop" website like I have above. My concern with that solution is that I'd expect the urls to match, such as primer.style/develop/css rather than primer.style/css. I see this nav as being more of a "jump to" between the sites rather than "Develop" being it's own site with css and component documentation etc.

Primer.style homepage design

I'd like us to improve the Primer homepage with having a better overview of what's included in Primer, make it a bit clearer the purpose of Primer (that it's for implementing GitHub designs but you can use it if you want), and break up the long dark page a bit with blocks of other color.

Bring "what's new" higher up so you quickly know about new releases, and this borrows some elements from the blog UI to break it up a bit:

Do a better job of describing our design content etc, this quick mock borrows a readme illo and breaks the sections up into tabs. Since we have less content right now, we could do a layout that exposes all the content sections for now:

Priorities

Alongside moving more sites under the primer.style domain, making their look and feel more consistent, as well as their update or release workflows, the first priority is to provide navigation that lets us switch between current and soon to be shipped sites. This might need more work, but something like this, with a dropdown and links to sites that are public would be a good first step:

Apologies for the half-baked thoughts here, you can take a look at my messy Figma file here, and I'm happy to discuss further and answer questions.

cc @primer/design-systems

The paintbrush is very prominent in our illustrations for Primer.style. We should have something similar for Primer Components and Primer CSS so that they are equally represented.

Current state

Initial research

I sent out a Google form inquiring what others thought of in reference to components and CSS.

Results

• For components, the themes that were recurring were with simplicity/ease of use, flexibility, and cohesion.
• For CSS, the themes that were recurring were customization, finicky, and complex.

Sketches

Next steps

• Flesh out sketches in Figma

I'm working with Insights helping them pick Primer components and I can't find a docked SideNav component. There is a SideNav in Primer.style, but it seems to be a floating menu (both in components and CSS). @broccolini pointed out it exists, but it's not in the live docs.

Floating version

Docked version (Figma screenshot)

We see a lot more engagement on twitter when we have nice visuals or gifs, wondering if it's worth making something that will stand out a little more for our office hours chat this Friday? cc @ashygee

I'm currently playing around with primer.style and adding my bio, and @shawnbot tipped me that it'd be a good move to remove Deployment from the docs themselves.

primer.style/.github/CONTRIBUTING.md

Team members are in order of joining the team, so Simon will go at the top 😄

Team page: https://primer.style/team

Info/questions:

Please provide content in markdown, or open a pr to update the page if you feel comfortable.

• Name & title: Simon Luthi, Systems Designer
• GitHub handle: @simurai
• Photo:
• Essence gif:

1. What drew you into design systems?
2. Who have you learned from or been inspired by?
3. Favorite tools

(This is totally optional, so any team members can decline if they don't want their profile public.)

Now's scaling guide suggests that we need only run:

now scale <deployment> 1

Where 1 is, as I understand it, the minimum number of instances that should be running at all times, which should solve the problem of an instance having to boot up after the last running one goes to sleep (after who knows how many hours/minutes/seconds?). The max (second, optional) number tells Now not to spin up more than that many instances to deal with incoming traffic.

Auto scaling isn't supported in our account plan, but may not be necessary because static deployments are infinitely scalable. Unfortunately, I'm not sure if we can switch back to static deployments without committing all of the generated files to git. ☹️

Our Premium plan gives us up to 10 active instances before they start charging the "On Demand" rate of $0.025 per instance per hour. (E.g., 14 active instances would cost us $0.10/hour, $2.40/day, or $72/month over our Premium rate.) If we're going to have more than a couple of sites and we want them to respond to requests quickly, we might consider bumping our plan up to Pro and turning on auto scaling for all of them.

See #135

• Add new footer
• Remove current "mini footer"

(original PR for reference)

After doing a bit of research, I think we should create an OG image that works for all three platforms rather than try to style Facebook's preview differently.

As per the developer documentation, 1200 by 630 is the recommended size. You can, however, set separate images for Twitter and Facebook (as Atom is doing now, documented a bit here) but they're still the same size (both 1200 by 630).

Because we have a square OG image, It looks like even on Twitter our OG images are getting cropped:

which we could solve by fixing that aspect ratio to the recommended dimensions.

Though the square aspect ratio works for Slack, I think we can adjust the composition to work well in a 1200 x 630 frame. Let me know your thoughts and I can drop a few iterations in here at that size (for both primer.style & /components)

I go to https://primer.style/components/

and suddenly the dropdowns in the top right-corner stop working

Hey @emilybrick does this work?!

👋

I found issues loading the examples on Firefox:

Sometimes they don't load at all

Sometimes I see only part of the content

Looks like there are some iframes that sometimes have a height of 0px and sometimes the have some height but not enough to show the content.

Per the conversation with @broccolini on Primer illustrations, I've updated the readme concepts for the primer/styles and primer/components readme's.

You can view in detail in the figma file. I've also included some mocks of what the readme will look like when viewed on GitHub. View in Figma