copy over module indexes from github/styleguide

docs/pages/css/.gitignore

@@ -32,14 +32,12 @@ components/popover.md
 packages/primer-product.md
 components/progress.md
 components/subhead.md
-support/index.md
 support/breakpoints.md
 support/spacing.md
 support/typography.md
 objects/table-object.md
 components/tooltips.md
 components/truncate.md
-utilities/index.md
 utilities/animations.md
 utilities/borders.md
 utilities/box-shadow.md

docs/pages/css/components/index.md

@@ -0,0 +1,8 @@
+---
+title: Components
+---
+
+Components make it easier to mark up a set of elements that are commonly grouped together with similar visual styles. Their base styles are shared and variants are added with modifier classes, so usually components are comprised of multiple classes. Most importantly, components should be highly reusable across the site, rather than built for specific pages or features. To achieve this:
+
+* **Separate structure and skin:** This means to define repeating visual features (like background and border styles) as separate “skins” that you can mix-and-match with your various components to achieve a large amount of visual variety without much code.
+* **Separate container and content:** Essentially, this means “rarely use location-dependent styles”. A component should look the same no matter where you put it.

docs/pages/css/objects/index.md

@@ -0,0 +1,6 @@
+---
+title: Objects
+doc_type: css
+---
+
+Objects help us with common layout patterns but aren't concerned with thematic styles. Examples include the table object, the grid, and the media object. Objects essentially provide some scaffolding for layouts and should be able to be used with other objects, components, and utilities.

docs/pages/css/support/index.md

@@ -0,0 +1,14 @@
+---
+title: Support
+---
+
+Primer is built on systems that form the foundation of our styles, and inform the way we write and organize our CSS. Building upon systems helps us make styles consistent and interoperable with each other, and assists us with visual hierarchy and vertical rhythm.
+
+We use Sass variables to keep color, typography, spacing, and other foundations of our system consistent. Occasionally we use Sass mixins to apply multiple CSS properties, they are a convenient solution for frequently-used verbose patterns.
+
+We've documented variables, mixins, and the systems they are built on for the following:
+
+- [Breakpoints](breakpoints/)
+- [Colors](color-system/)
+- [Spacing](spacing/)
+- [Typography](typography/)

docs/pages/css/utilities/index.md

@@ -0,0 +1,8 @@
+---
+title: Utilities
+---
+
+Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles. When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.
+
+* Utilities should do one job well and one job only, are immutable, and on occasion are an acceptable approach to overriding component styles.
+* Utility class-names should be transparent and clearly describe the job they do.