forked from rei/rei-cedar
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from knapsack-cloud/guidelines11152023
final final for real v5 final - Andrew Rohman
- Loading branch information
Showing
11 changed files
with
342 additions
and
9 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
{ | ||
"id": "F8WB9M5sOm", | ||
"data": { | ||
"content": { | ||
"type": "doc", | ||
"content": [ | ||
{ | ||
"type": "heading", | ||
"attrs": { | ||
"level": 2, | ||
"textAlign": "left" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Cedar UI libraries", | ||
"type": "text" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "left" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "We have several ", | ||
"type": "text" | ||
}, | ||
{ | ||
"text": "Figma UI libraries", | ||
"type": "text", | ||
"marks": [ | ||
{ | ||
"type": "link", | ||
"attrs": { | ||
"href": "https://www.figma.com/community/file/1057372737094902305", | ||
"class": null, | ||
"target": "_blank" | ||
} | ||
}, | ||
{ | ||
"type": "underline" | ||
} | ||
] | ||
}, | ||
{ | ||
"text": " housing the Cedar design system. These libraries, as well as a few others, are pre-loaded when you create a new file within the REI Figma ecosystem. To take advantage of everything Cedar offers, make sure these libraries are turned on (and turn off libraries from other teams that you might not need).", | ||
"type": "text" | ||
} | ||
] | ||
} | ||
] | ||
} | ||
}, | ||
"blockType": "text-editor" | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
{ | ||
"id": "YFtGDhZu9V", | ||
"data": { | ||
"shortcuts": [ | ||
{ | ||
"id": "RgI6OKTwCA", | ||
"link": { | ||
"name": "Accessibility", | ||
"path": "/pages/untitled-avtjcb414g" | ||
}, | ||
"image": "https://knapsack.imgix.net/site/rei-cedar/tree-rings-kdzj_zmznx.png", | ||
"title": "Accessibility", | ||
"description": "Designing for accessibility means being inclusive to the needs of our users" | ||
}, | ||
{ | ||
"id": "uVJLIWSzZ7", | ||
"link": { | ||
"name": "Color", | ||
"path": "/pages/untitled-gmukzugeri" | ||
}, | ||
"title": "Color", | ||
"description": "One of the most important attributes of brand expression" | ||
}, | ||
{ | ||
"id": "fWXFA6nndd", | ||
"link": { | ||
"name": "Icons", | ||
"path": "/pages/icons-wjnma9eisu" | ||
}, | ||
"title": "Icons", | ||
"description": "Symbolize commands, navigation, utility, or common actions" | ||
}, | ||
{ | ||
"id": "nXSENLg2ol", | ||
"link": { | ||
"name": "Motion", | ||
"path": "/pages/motion" | ||
}, | ||
"title": "Motion", | ||
"description": "Enhance the customer's understanding of REI's digital products" | ||
}, | ||
{ | ||
"id": "JlkTja-yVQ", | ||
"link": { | ||
"name": "Prominence", | ||
"path": "/pages/prominence" | ||
}, | ||
"title": "Prominence", | ||
"description": "Elevating interface objects to create a meaningful sense of depth" | ||
}, | ||
{ | ||
"id": "EgYFC6Guoh", | ||
"link": { | ||
"name": "Radius", | ||
"path": "/pages/radius" | ||
}, | ||
"title": "Radius", | ||
"description": "Corner appearance of containers" | ||
} | ||
], | ||
"gridStyles": { | ||
"columns": "3", | ||
"centered": false | ||
}, | ||
"tileStyles": { | ||
"rounded": true, | ||
"outlined": true, | ||
"imageSize": "none", | ||
"titleSize": "xsmall" | ||
} | ||
}, | ||
"size": null, | ||
"blockType": "shortcut-tiles" | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,144 @@ | ||
{ | ||
"id": "ejxGgWxbMQ", | ||
"data": { | ||
"content": { | ||
"type": "doc", | ||
"content": [ | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "left" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Welcome to the Cedar Design System! Cedar is used as a foundation for REI's digital products, creating consistency by linking UI elements to documentation (this site) and code.", | ||
"type": "text" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "heading", | ||
"attrs": { | ||
"level": 2, | ||
"textAlign": "left" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Install Figma", | ||
"type": "text" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "start" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Figma is REI's design tool of choice and houses Cedar's UI toolkits. You can use Figma on a web browser, but you'll get the most out of it if you download the desktop app.", | ||
"type": "text" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "start" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Access the Figma desktop app using an REI tool called \"Self Service.\" On a Mac, open your applications folder and navigate to Self Service or open Spotlight Search and search for it. In Self Service, search for \"Figma\" and install. If you need help or have problems installing Figma, please contact REI's IT Help Desk.", | ||
"type": "text" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "start" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "REI typefaces are automatically distributed through Figma, so you won't need to install any fonts. However, if you plan on using REI typefaces in other applications you can install \"Stuart TTF • Digital\" and \"Graphic TTF • Digital\" through the Self Service tool.", | ||
"type": "text" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "heading", | ||
"attrs": { | ||
"level": 3, | ||
"textAlign": "start" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Next steps", | ||
"type": "text" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "orderedList", | ||
"attrs": { | ||
"start": 1 | ||
}, | ||
"content": [ | ||
{ | ||
"type": "listItem", | ||
"content": [ | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "left" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Explore some of REI's guidelines to get a better understanding of the co-op's visual and verbal standards. The DAM (Digital Asset Manager) houses many of these guidelines as well as other important assets. You'll need to request access before viewing documents on the DAM, but the process is fairly quick (about 1-2 days).", | ||
"type": "text" | ||
} | ||
] | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "listItem", | ||
"content": [ | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "left" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Read about the foundational elements central to designing with Cedar.", | ||
"type": "text" | ||
} | ||
] | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "listItem", | ||
"content": [ | ||
{ | ||
"type": "paragraph", | ||
"attrs": { | ||
"textAlign": "left" | ||
}, | ||
"content": [ | ||
{ | ||
"text": "Review Cedar components, the building blocks to creating an interface. The components listed on this site will mirror those available in the Figma Web Components Toolkit.", | ||
"type": "text" | ||
} | ||
] | ||
} | ||
] | ||
} | ||
] | ||
} | ||
] | ||
} | ||
}, | ||
"blockType": "text-editor" | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
id: icons-wjnma9eisu | ||
title: Icons | ||
blockIds: [] |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
id: motion | ||
title: Motion | ||
blockIds: [] |
22 changes: 20 additions & 2 deletions
22
knapsack/data/knapsack.custom-page.overview-6cwfl845ik.yml
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,21 @@ | ||
id: overview-6cwfl845ik | ||
title: Overview | ||
blockIds: [] | ||
title: Guidelines | ||
blockIds: | ||
- YFtGDhZu9V | ||
description: |- | ||
Shared language that guides how we build | ||
high-quality experiences | ||
settings: | ||
pageHeader: | ||
backgroundColor: | ||
type: design-token | ||
tokenName: global.color.background.default | ||
textColorTitle: | ||
type: design-token | ||
tokenName: global.color.text.inverse | ||
textColorDescription: | ||
type: design-token | ||
tokenName: global.color.text.inverse | ||
backgroundImage: https://knapsack.imgix.net/site/rei-cedar/cdr-guidelines-landing-1-h_jrfyqvz.png | ||
backgroundSize: cover | ||
size: large |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
id: prominence | ||
title: Prominence | ||
blockIds: [] |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
id: radius | ||
title: Radius | ||
blockIds: [] |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
id: untitled-r9prlykxo1 | ||
title: Onboarding | ||
blockIds: [] | ||
title: Designer Onboarding | ||
blockIds: | ||
- ejxGgWxbMQ | ||
- F8WB9M5sOm |
Oops, something went wrong.