feat(www): Add brand guidelines, design tokens docs (humble beginnings) #14360

fk · 2019-05-27T21:34:09Z

A humble first shot at documenting our brand guidelines, providing a place for people to find our logo, and document the design tokens used to create our OSS website UI.

Preview: https://5cf57e9e4594ebb221088c18--relaxed-saha-83a4fd.netlify.com/guidelines/color/

consolidate prior work for mutability.netlify.com with existing .org www design tokens
- add a breakpoint xxs, required to make styled-system’s https://styled-system.com/responsive-styles work
- add rudimentary colors.blackFade, colors.whiteFade, borders, and fontWeights tokens
- extend tokens/font-sizes, now generated via a formula that outputs (device) pixel values; generated values are manually adjusted, then converted to rem in utils/presets
- add (slightly experimental) WCGA contrast scores for rgba text colors, see 31a22bc)
update link to mutability.netlify.com on /contributing/organize-a-gatsby-event to point to /guidelines/logo/
add an item „Logo & Assets“ to the global footer, linking to /guidelines/logo/
modify our SVGO configuration to add the focusable="false" attribute to every SVG (to prevent SVGs from gaining focus in IE, thanks @marcysutton!), and not strip the <title> any longer
on top of the work done for mutability.netlify.com, add a "Design Tokens" page that provides an overview of most (only border and sizes missing) tokens in www/src/utils/presets/www/src/components/guidelines/themes (the latter is where the emotion-theme lives)
lowercases all letters in color values in www/src/utils/tokens/colors.js

Prior work shipped to mutability.netlify.com used https://styled-system.com/ under the hood. I really enjoyed working with it, but using it for .org www of course should be thoroughly discussed. I’m including it here to facilitate a discussion, …and to ship things! ;-)

Whether we go for styled-system or not, we should think about using emotion’s context/emotion-theming moving forward. No need to explicitly import stuff esp. now that refactoring things have settled down.
I recall @jxnblk saying there are treeshaking/bundle size benefits to not doing so, though.

The original PoC implementation also makes use of react-spring and react-visibility-sensor to add some „text highlighting“ animations, and uses react-copy-to-clipboard and the color package to facilitate UI behavior and various calculations for the „Color“ part of the guidelines.

~~I’m not opposed to remove the animations — they don’t add much.~~ Gave this a night of sleep, and decided to remove them. No need to talk about react-spring and react-visibility-sensor anymore.

~I might need some help in dropping the color lib if we want to get that dep out of the bundle.~~
_Edit: Dropped that in 31a22bc!
Noob alert! ;-)

Oh, react-copy-to-clipboard probably should go, too. Unfortunately we still didn’t settle on anything reusable.

—

Todo:

@jxnblk

A humble first shot at documenting our brand guidelines, providing a place for people to find our logo, and document the design tokens used to create our OSS website UI. Prior work shipped to mutability.netlify.com used https://styled-system.com/ under the hood. I really enjoyed working with it, but using it for .org `www` of course should be thoroughly discussed. I’m including it here to facilitate a discussion, …and to ship things! ;-) - consolidate prior work with existing .org `www` design tokens - add a breakpoint `xxs`, required to make styled-system’s https://styled-system.com/responsive-styles work - add rudimentary `colors.blackFade` and `colors.whiteFade` - extend `tokens/font-sizes`, now generated via a formula that outputs (device) pixel values; generated values are manually adjusted, then converted to `rem` in `utils/presets` - update link to mutability.netlify.com on `/contributing/organize-a-gatsby-event` to point to `/guidelines/logo/` - add an item „Logo & Assets“ to the global footer, linking to `/guidelines/logo/` - add `presets.fontWeights` - add `presets.borders` The original PoC implementation also makes use of `react-spring` and `react-visibility-sensor` to add some „text highlighting“ animations, and uses `react-copy-to-clipboard` and the `color` package to facilitate UI behavior and various calculations for the „Color“ part of the guidelines. I’m not opposed to remove the animations — they don’t add much — but might need some help in dropping the `color` lib if we want to get that dep out of the bundle. Noob alert! ;-) Oh, `react-copy-to-clipboard` probably should go, too. Unfortunately we still didn’t settle on anything reusable. — Wether we go for `styled-system` or not, we should think about using `emotion`’s context/`emotion-theming` moving forward. No need to explicitly import stuff esp. now that refactoring things have settled down. I recall @jxnblk saying there are treeshaking/bundle size benefits to not doing so, though. — Todo: - fix/expand „Color“ data, content and UI - fix missing color swatches for black and white on the „Logo“ page - add `letterSpacing`, `lineHeights`, `fontWeights` token documentation to „Typography“, tidy examples here and there - add partner logo lockup guide to „Logo“ - give the copy a very close second look - lots more in and out of scope for this PR :-P — will follow up on that

fk · 2019-05-27T21:47:02Z

A first set of questions irt to all the additional dependencies that this adds:

I vote for removing react-spring and react-visibility-sensor (edit: removed them in 9efe032) so that we can focus on the more important stuff (also not really happy with the design anymore), namely
do you think it's OK shipping an initial version of this using styled-system and emotion-theming — no matter what our discussion irt to if, when and how (think theme-ui) we might want to buy in to it for the whole codebase leads to?

@jxnblk

🙏 @jxnblk

marcysutton · 2019-06-04T16:28:17Z

What's the connection between accessibility and right clicking?

It's that the action isn't discoverable without right clicking, and it differs from the initial href on the link as well as the label: there's nothing to tell the user that a right click will navigate them to a new place, which is generally an accessibility and usability anti-pattern. It likely violates a few success criteria in WCAG, such as Name, Role, Value (4.1.2), and Identify Purpose (1.3.6), maybe more. A separate control with a clear name and purpose would be much more clear.

fk · 2019-06-10T15:55:59Z

www/src/components/guidelines/system/box.js

+  ...propTypes.layout,
+  ...propTypes.position,
+  ...propTypes.space,
+  ...propTypes.typography,


@jxnblk <3 the new style categories!

…and-guidelines

…go in header" This reverts commit 3c47ad1.

fk · 2019-06-10T16:20:24Z

@marcysutton I just revered 3c47ad1, so no more worries about the right-click a11y.
May I ask you to give this another look irt your review? 🙏
All issues should be resolved.

shannonbux · 2019-06-11T00:22:18Z

Wow, I never like orange colors, and I like that orange hue. This is beautiful! I would like to see a movie set to some nice music to just watch the colors pass me by, please!

- licensed for up to 2,000,000 page views - added `font-display: swap`

@KyleAMathews

Let's go "dark deploy" (as discussed with @KyleAMathews)

fk · 2019-06-11T20:27:04Z

Updated the new font (Futura PT Bold), and removed the link to the "Logo" guidelines in the footer (as discussed with @KyleAMathews today). Asked @marcysutton to give this another look irt a11y, which she thankfully agreed to. 🙏

…and-guidelines

marcysutton

I left a few suggestions, this is really awesome work! I think it's big enough that we should try to keep it moving and we can make improvements later on. So you are welcome to take my comments as suggestions for later or address them now–up to you.

www/src/components/guidelines/color/modal.js

www/src/pages/guidelines/color.js

marcysutton · 2019-06-12T00:16:25Z

www/src/components/guidelines/color/swatch.js

+                display: `block`,
+              },
+            }}
+            onClick={this.handleClick}


Can we give these buttons an aria label of the hex color so they aren't empty by default?

I'm also wishing the widget didn't force keyboard users through every swatch. But we could easily solve that with a skip link past it.

Can we give these buttons an aria label of the hex color so they aren't empty by default?

At least this is fixed in 3017886; also read https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html because I wondered about how to pull of the skip link. I assume we'd want that skip link

after the each (but the last) color name (== button to open the modal) and before the associated swatches,

the link title would be "Skip color name swatches and jump to next color",

every color name button would need an id attribute?

Oh, also: Colors are listed by group (primary, secondary, neutral) — would the skip link for the last color in each group have to point to the title of the group?

🤷‍♂
Happy to fix this in a follow-up PR!

marcysutton · 2019-06-12T00:16:44Z

www/src/components/guidelines/color/swatch.js

+                `Copied!`
+              ) : (
+                <>
+                  Copy HEX <SrOnly>${color.hex}</SrOnly>


I think the visual of the hex color could be useful, what do you think?

S/th like edadcdd? 🤔

www/src/components/guidelines/color/overview.js

…and-guidelines

fk · 2019-06-15T00:11:58Z

I think it's big enough that we should try to keep it moving and we can make improvements later on. So you are welcome to take my comments as suggestions for later or address them now–up to you.

I hope to have addressed the majority and left comments for everything else—only one thing completely untouched, and super happy to give that a go after a little feedback!

…and-guidelines

@jxnblk

…s) (gatsbyjs#14360) * Basic port of https://mutability.netlify.com/ A humble first shot at documenting our brand guidelines, providing a place for people to find our logo, and document the design tokens used to create our OSS website UI. Prior work shipped to mutability.netlify.com used https://styled-system.com/ under the hood. I really enjoyed working with it, but using it for .org `www` of course should be thoroughly discussed. I’m including it here to facilitate a discussion, …and to ship things! ;-) - consolidate prior work with existing .org `www` design tokens - add a breakpoint `xxs`, required to make styled-system’s https://styled-system.com/responsive-styles work - add rudimentary `colors.blackFade` and `colors.whiteFade` - extend `tokens/font-sizes`, now generated via a formula that outputs (device) pixel values; generated values are manually adjusted, then converted to `rem` in `utils/presets` - update link to mutability.netlify.com on `/contributing/organize-a-gatsby-event` to point to `/guidelines/logo/` - add an item „Logo & Assets“ to the global footer, linking to `/guidelines/logo/` - add `presets.fontWeights` - add `presets.borders` The original PoC implementation also makes use of `react-spring` and `react-visibility-sensor` to add some „text highlighting“ animations, and uses `react-copy-to-clipboard` and the `color` package to facilitate UI behavior and various calculations for the „Color“ part of the guidelines. I’m not opposed to remove the animations — they don’t add much — but might need some help in dropping the `color` lib if we want to get that dep out of the bundle. Noob alert! ;-) Oh, `react-copy-to-clipboard` probably should go, too. Unfortunately we still didn’t settle on anything reusable. — Wether we go for `styled-system` or not, we should think about using `emotion`’s context/`emotion-theming` moving forward. No need to explicitly import stuff esp. now that refactoring things have settled down. I recall @jxnblk saying there are treeshaking/bundle size benefits to not doing so, though. — Todo: - fix/expand „Color“ data, content and UI - fix missing color swatches for black and white on the „Logo“ page - add `letterSpacing`, `lineHeights`, `fontWeights` token documentation to „Typography“, tidy examples here and there - add partner logo lockup guide to „Logo“ - give the copy a very close second look - lots more in and out of scope for this PR :-P — will follow up on that * @styled-system/should-forward-prop * Content * Remove <Annotation>, <Words> * No need for custom badge * Remove „Logo“ masthead background * Rm Spectral * Copy * Callout styles * Add radii * teal -> orange * Tidy * Basic fixes for „Copy HEX“ tooltip * Copy, hierarchy * Bump styled-system to v4.2.4 * Wrap up `shadows`; no need to put in more work here right now * Fix nav item active state 🙏 @jxnblk * Betterer?! :P * Fix „Logo“ <ColorSwatch> * Expand „Color Blindness“ section * Remove a bunch of „Purple“ color names * Reorder footer links * Nicer „Footnotes“ links * Add Futura PT Bold, make it the default for <h1> * Basic improvements to the color modal * More whitespace in between content columns * Various <h1> fixes, add+use tokens/font-weights * Add first shot at partnership lockup * Rm textRendering:optimizeLegibility, we do this globally already * Let it breathe ;) * Fix a couple more stray `fontWeight`s * Buttons * Fix buttons * Mv placeholder.js -> image-placeholder.js * Mv navigation.js -> nav.item.js * Simpler * Fix Pantone link text color * Date * Rinse * Add letter-spacing docs, rm letterSpacings.mega * Various cleanup - fix avatar size - nicer `fontTokens` join to improve readability of the generated `font-family` value - modify `fonts.header`, no need to repeat the system font stack - Typography - add „Line Heights“ docs - tidy examples - Design Tokens - add reference to the System UI Theme Specification - add reference to styled-system - improve „Shadows & Elevation“ layout - add docs for „Fonts“, „Font Sizes“, „Line Heights“ - Color - minor copy improvements - fix color overview layout - add WCAG contrast radio „legend“ * Fix tab-ability of color copy button * <th scope=„col“> * Fix markup, DRY * Fix keys * Add color code to copy button label Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update www/src/assets/guidelines/wordmark.svg Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update www/src/assets/guidelines/clearspace.svg Prevent SVGs from being focusable in IE Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVGs from being focusable in IE Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVGs from being focusable in IE Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Render main content as <main> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Fix d'oh Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update www/src/pages/guidelines/logo.js Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Mention design tokens in `www` README * Copy d'oh Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Fix color contrast * Rm yellow background for „Scale“. A11y FTW! * Bump color contrast * Add basic <Helmet> stuff (title, html lang, canonical link, OG, Twitter site) * Render as <ul> * Add screenreader-only text describing the PMS link * One more focusable="false" * Fix ecosystem card title font-weight * Change `<div>` to `<section>` to allow `<h1>` * Don’t show HEX color value when focussing copy button * Fix copy button hover; minor UI fixes * Full-width `font-sizes` tokens * Small screen <3 * Add screenreader-only text that describes `space` and `border-radius` examples * Change container tag to `section` to be able to use `<h1>` * chore: format * Add breakpoints+mediaQueries, colors, letterSpacings to „Design Tokens“ * Lowercase * Add system font stack back to fonts.header * Bring back focusable=„false“ via SVGO plugin * Try * chore: format * Rm `data-image: icon` * Lint * Add zIndices, fontWeights, transitions * Fix internal link * Screenreader-only text for the „Colors“ design token examples * Drop `color` dep …in favor of `color-blend`, `wcag-contrast`, `hex-rgb`. Saves us a couple bytes of overhead. Along the way: - expand `blackFade`, `whiteFade` - fix `blackFade` base color - update "white or black text on colored background" examples in the color modal: - now all values from the `blackFade`/`whiteFade` that pass the WCAG color contrast ratio will be rendered (as opposed to a generic set of text colors ("High/medium emphasis", "Disabled") without any a11y information) - using `color-blend` to blend `rgba` values with the background color; scores very similar, but not exactly the same as on https://contrast-ratio.com/ - simplify the (very simple) inverted theme - fix palette meta information - fix aliases * Doc * Clearer "Color" modal links <3 @amberleyromo * Last minute fixes Thank you @amberleyromo for teaching me how to spell. * Navigate to `/guidelines/logo/` when right-clicking Gatsby logo in header I smell a11y issues TBH. Paging @marcysutton! /cc @DSchau @KyleAMathews * Bump to styled-system v5 🎉 * Rm `themed` * Revert "Navigate to `/guidelines/logo/` when right-clicking Gatsby logo in header" This reverts commit 3c47ad1. * Use `themes.sizes.avatar` to define avatar dimensions * Update Futura PT Bold font - licensed for up to 2,000,000 page views - added `font-display: swap` * Rm link in footer Let's go "dark deploy" (as discussed with @KyleAMathews) * Change "WCAG Contrast Score" from <h4> to <h3> * Add `aria-label` for color modal close button * Add `title` to button that opens the modal * Rm unused import * Add `aria-label` to color swatch buttons * Add HEX color value to swatch "copy" tooltip * Lint

@jxnblk

…s) (gatsbyjs#14360) * Basic port of https://mutability.netlify.com/ A humble first shot at documenting our brand guidelines, providing a place for people to find our logo, and document the design tokens used to create our OSS website UI. Prior work shipped to mutability.netlify.com used https://styled-system.com/ under the hood. I really enjoyed working with it, but using it for .org `www` of course should be thoroughly discussed. I’m including it here to facilitate a discussion, …and to ship things! ;-) - consolidate prior work with existing .org `www` design tokens - add a breakpoint `xxs`, required to make styled-system’s https://styled-system.com/responsive-styles work - add rudimentary `colors.blackFade` and `colors.whiteFade` - extend `tokens/font-sizes`, now generated via a formula that outputs (device) pixel values; generated values are manually adjusted, then converted to `rem` in `utils/presets` - update link to mutability.netlify.com on `/contributing/organize-a-gatsby-event` to point to `/guidelines/logo/` - add an item „Logo & Assets“ to the global footer, linking to `/guidelines/logo/` - add `presets.fontWeights` - add `presets.borders` The original PoC implementation also makes use of `react-spring` and `react-visibility-sensor` to add some „text highlighting“ animations, and uses `react-copy-to-clipboard` and the `color` package to facilitate UI behavior and various calculations for the „Color“ part of the guidelines. I’m not opposed to remove the animations — they don’t add much — but might need some help in dropping the `color` lib if we want to get that dep out of the bundle. Noob alert! ;-) Oh, `react-copy-to-clipboard` probably should go, too. Unfortunately we still didn’t settle on anything reusable. — Wether we go for `styled-system` or not, we should think about using `emotion`’s context/`emotion-theming` moving forward. No need to explicitly import stuff esp. now that refactoring things have settled down. I recall @jxnblk saying there are treeshaking/bundle size benefits to not doing so, though. — Todo: - fix/expand „Color“ data, content and UI - fix missing color swatches for black and white on the „Logo“ page - add `letterSpacing`, `lineHeights`, `fontWeights` token documentation to „Typography“, tidy examples here and there - add partner logo lockup guide to „Logo“ - give the copy a very close second look - lots more in and out of scope for this PR :-P — will follow up on that * @styled-system/should-forward-prop * Content * Remove <Annotation>, <Words> * No need for custom badge * Remove „Logo“ masthead background * Rm Spectral * Copy * Callout styles * Add radii * teal -> orange * Tidy * Basic fixes for „Copy HEX“ tooltip * Copy, hierarchy * Bump styled-system to v4.2.4 * Wrap up `shadows`; no need to put in more work here right now * Fix nav item active state 🙏 @jxnblk * Betterer?! :P * Fix „Logo“ <ColorSwatch> * Expand „Color Blindness“ section * Remove a bunch of „Purple“ color names * Reorder footer links * Nicer „Footnotes“ links * Add Futura PT Bold, make it the default for <h1> * Basic improvements to the color modal * More whitespace in between content columns * Various <h1> fixes, add+use tokens/font-weights * Add first shot at partnership lockup * Rm textRendering:optimizeLegibility, we do this globally already * Let it breathe ;) * Fix a couple more stray `fontWeight`s * Buttons * Fix buttons * Mv placeholder.js -> image-placeholder.js * Mv navigation.js -> nav.item.js * Simpler * Fix Pantone link text color * Date * Rinse * Add letter-spacing docs, rm letterSpacings.mega * Various cleanup - fix avatar size - nicer `fontTokens` join to improve readability of the generated `font-family` value - modify `fonts.header`, no need to repeat the system font stack - Typography - add „Line Heights“ docs - tidy examples - Design Tokens - add reference to the System UI Theme Specification - add reference to styled-system - improve „Shadows & Elevation“ layout - add docs for „Fonts“, „Font Sizes“, „Line Heights“ - Color - minor copy improvements - fix color overview layout - add WCAG contrast radio „legend“ * Fix tab-ability of color copy button * <th scope=„col“> * Fix markup, DRY * Fix keys * Add color code to copy button label Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update www/src/assets/guidelines/wordmark.svg Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update www/src/assets/guidelines/clearspace.svg Prevent SVGs from being focusable in IE Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVGs from being focusable in IE Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVGs from being focusable in IE Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Render main content as <main> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Prevent SVG from being focusable in IE, add title Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Fix d'oh Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update www/src/pages/guidelines/logo.js Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Mention design tokens in `www` README * Copy d'oh Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Fix color contrast * Rm yellow background for „Scale“. A11y FTW! * Bump color contrast * Add basic <Helmet> stuff (title, html lang, canonical link, OG, Twitter site) * Render as <ul> * Add screenreader-only text describing the PMS link * One more focusable="false" * Fix ecosystem card title font-weight * Change `<div>` to `<section>` to allow `<h1>` * Don’t show HEX color value when focussing copy button * Fix copy button hover; minor UI fixes * Full-width `font-sizes` tokens * Small screen <3 * Add screenreader-only text that describes `space` and `border-radius` examples * Change container tag to `section` to be able to use `<h1>` * chore: format * Add breakpoints+mediaQueries, colors, letterSpacings to „Design Tokens“ * Lowercase * Add system font stack back to fonts.header * Bring back focusable=„false“ via SVGO plugin * Try * chore: format * Rm `data-image: icon` * Lint * Add zIndices, fontWeights, transitions * Fix internal link * Screenreader-only text for the „Colors“ design token examples * Drop `color` dep …in favor of `color-blend`, `wcag-contrast`, `hex-rgb`. Saves us a couple bytes of overhead. Along the way: - expand `blackFade`, `whiteFade` - fix `blackFade` base color - update "white or black text on colored background" examples in the color modal: - now all values from the `blackFade`/`whiteFade` that pass the WCAG color contrast ratio will be rendered (as opposed to a generic set of text colors ("High/medium emphasis", "Disabled") without any a11y information) - using `color-blend` to blend `rgba` values with the background color; scores very similar, but not exactly the same as on https://contrast-ratio.com/ - simplify the (very simple) inverted theme - fix palette meta information - fix aliases * Doc * Clearer "Color" modal links <3 @amberleyromo * Last minute fixes Thank you @amberleyromo for teaching me how to spell. * Navigate to `/guidelines/logo/` when right-clicking Gatsby logo in header I smell a11y issues TBH. Paging @marcysutton! /cc @DSchau @KyleAMathews * Bump to styled-system v5 🎉 * Rm `themed` * Revert "Navigate to `/guidelines/logo/` when right-clicking Gatsby logo in header" This reverts commit 3c47ad1. * Use `themes.sizes.avatar` to define avatar dimensions * Update Futura PT Bold font - licensed for up to 2,000,000 page views - added `font-display: swap` * Rm link in footer Let's go "dark deploy" (as discussed with @KyleAMathews) * Change "WCAG Contrast Score" from <h4> to <h3> * Add `aria-label` for color modal close button * Add `title` to button that opens the modal * Rm unused import * Add `aria-label` to color swatch buttons * Add HEX color value to swatch "copy" tooltip * Lint

fk added 28 commits May 28, 2019 12:13

@styled-system/should-forward-prop

9082c76

Content

08ec9ca

Remove <Annotation>, <Words>

9efe032

No need for custom badge

42a7f78

Remove „Logo“ masthead background

b412160

Merge branch 'master' into topics/www-add-brand-guidelines

cd4a46d

Rm Spectral

88af817

Copy

f718b90

Callout styles

30524f3

Add radii

c8e343e

teal -> orange

86b942f

Tidy

1bbbb5a

Basic fixes for „Copy HEX“ tooltip

42b5f6d

Copy, hierarchy

ed784e0

Bump styled-system to v4.2.4

0ab0a24

Wrap up shadows; no need to put in more work here right now

9513e73

Fix nav item active state

603c52b

🙏 @jxnblk

Betterer?! :P

2d28dec

Fix „Logo“ <ColorSwatch>

e80ab96

Expand „Color Blindness“ section

5c4a3b3

Remove a bunch of „Purple“ color names

29c8873

Reorder footer links

2692bb6

Nicer „Footnotes“ links

be8e494

Add Futura PT Bold, make it the default for <h1>

3100c65

Basic improvements to the color modal

d4264cb

More whitespace in between content columns

089a7d5

Various <h1> fixes, add+use tokens/font-weights

23b7576

Add first shot at partnership lockup

20d2675

Bump to styled-system v5 🎉

e2eadfd

fk requested a review from a team as a code owner June 10, 2019 15:50

Rm themed

a5b877d

fk commented Jun 10, 2019

View reviewed changes

gatsbybot and others added 2 commits June 10, 2019 16:05

Merge remote-tracking branch 'upstream/master' into topics/www-add-br…

baef352

…and-guidelines

Revert "Navigate to /guidelines/logo/ when right-clicking Gatsby lo…

c25fe08

…go in header" This reverts commit 3c47ad1.

Use themes.sizes.avatar to define avatar dimensions

7a024f6

fk added 2 commits June 11, 2019 21:18

Update Futura PT Bold font

96372b0

- licensed for up to 2,000,000 page views - added `font-display: swap`

Rm link in footer

9d463d8

Let's go "dark deploy" (as discussed with @KyleAMathews)

Merge remote-tracking branch 'upstream/master' into topics/www-add-br…

db548b3

…and-guidelines

fk mentioned this pull request Jun 12, 2019

[www] Use styled-system.com/css/ #14722

Closed

marcysutton reviewed Jun 12, 2019

View reviewed changes

gatsbybot and others added 8 commits June 13, 2019 07:23

Merge remote-tracking branch 'upstream/master' into topics/www-add-br…

ec7c6ee

…and-guidelines

Change "WCAG Contrast Score" from <h4> to <h3>

c21642b

Add aria-label for color modal close button

4bca293

Add title to button that opens the modal

82116ef

Rm unused import

85f1621

Add aria-label to color swatch buttons

3017886

Add HEX color value to swatch "copy" tooltip

edadcdd

Lint

6527c72

Merge remote-tracking branch 'upstream/master' into topics/www-add-br…

71e4911

…and-guidelines

fk merged commit e806c66 into master Jun 15, 2019

fk deleted the topics/www-add-brand-guidelines branch June 15, 2019 00:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(www): Add brand guidelines, design tokens docs (humble beginnings) #14360

feat(www): Add brand guidelines, design tokens docs (humble beginnings) #14360

fk commented May 27, 2019 •

edited

fk commented May 27, 2019 •

edited

marcysutton commented Jun 4, 2019

fk Jun 10, 2019

fk commented Jun 10, 2019

shannonbux commented Jun 11, 2019

fk commented Jun 11, 2019

marcysutton left a comment

marcysutton Jun 12, 2019

fk Jun 14, 2019

marcysutton Jun 12, 2019

fk Jun 15, 2019

fk commented Jun 15, 2019

feat(www): Add brand guidelines, design tokens docs (humble beginnings) #14360

feat(www): Add brand guidelines, design tokens docs (humble beginnings) #14360

Conversation

fk commented May 27, 2019 • edited

fk commented May 27, 2019 • edited

marcysutton commented Jun 4, 2019

fk Jun 10, 2019

Choose a reason for hiding this comment

fk commented Jun 10, 2019

shannonbux commented Jun 11, 2019

fk commented Jun 11, 2019

marcysutton left a comment

Choose a reason for hiding this comment

marcysutton Jun 12, 2019

Choose a reason for hiding this comment

fk Jun 14, 2019

Choose a reason for hiding this comment

marcysutton Jun 12, 2019

Choose a reason for hiding this comment

fk Jun 15, 2019

Choose a reason for hiding this comment

fk commented Jun 15, 2019

fk commented May 27, 2019 •

edited

fk commented May 27, 2019 •

edited