docs(design): Initial commit of static docs for design primitives and

principles

guide/SUMMARY.md

@@ -10,6 +10,14 @@
   * [Designers](/getting-started/designers.md)
   * [Developers](/getting-started/developers.md)
   * [FAQ](/getting-started/faq.md)
+* [Design](/design/principles.md)
+  * [Colour](/design/colour.md)
+  * [Typography](/design/typography.md)
+  * [Iconography](/design/iconography.md)
+  * [Writing](/design/writing.md)
+  * [Layout](/design/layout.md)
+  * [Motion](/design/motion.md)
+  * [Depth](/design/depth.md)
 * [Contributing](/contributing/contributing.md)
   * [How to contribute](/contributing/contributing.md#how-to)
   * [Designer guide](/contributing/designer-guide.md)

guide/design/colour.md

@@ -0,0 +1,43 @@
+# Colour
+
+## Overview
+
+Colour creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change. 
+
+Our main brand colours are white, purple and green. White is the most dominant colour in our palette and should be the 
+foundation of every page. Purple and green are used to accent white space through buttons, text colour, and links.
+
+All colours used to convey non-redundant information must meet WCAG 2.0 Level AA contrast ratio of at least 4.5:1.
+
+The following colours are specific to digital experiences. For the full guidelines on using colour, including traditional 
+media and other forms of communications, visit [BrandHub](https://brand.telus.com).
+
+
+## Usage
+
+For Buttons, Links, Headings and Body copy only use the following colours:
+
+
+TODO: Need to put the colours in here
+
+
+## Exceptions
+
+These colours are not part of the TELUS brand colour palette, however are used sparingly, but intentionally to play a 
+functional role and support a positive user experience. Example uses include notifications, errors and messaging.
+
+TODO: Need to put the colours in here
+
+
+## Governance
+
+The TELUS digital colour palette is mandated by the TELUS Brand team and should not be adjusted without explicit approval. If 
+you should have any questions regarding implementation, please [get in touch with us](/support.md).
+
+## Roadmap
+
+* v1.0: Basic colour palette implemented as Sass variables
+* Expose colour tokens to JavaScript
+* Expand the colour palette to include more shade/tints of specific hues of colour
+* Shift to more semantically named colours
+* Document and codify accessible colour combinations

guide/design/depth.md

@@ -0,0 +1,15 @@
+# Depth
+
+Coming soon...
+
+
+## Governance
+
+As we do not yet have any official guidelines please consult your Design Leads or use existing patterns on TELUS.com 
+when undertaking work that requires depth, shadowing, and layering.
+
+
+## Roadmap
+
+* Define rules and standards for use of depth, shadowing, and layering
+* Develop a set of depth tokens for use in components

guide/design/dividers.md

@@ -0,0 +1,32 @@
+# Dividers
+
+## Overview
+
+Vertical dividers are used separate content and create a visual consistency that aids the user understand the message. The 
+system currently includes 3 types of dividers - Wave, Dimple and Hairline - each of which should be used in a unique scenario.
+
+Wave Dividers are used to break up distinct messages on a page. There should be at most 1 Wave Divider per page and images 
+or artwork should never be used in combination with the Wave Divider. Wave dividers are the visual equivalent of paragraphs.
+
+Dimple dividers are used to separate similar content modules within a page. These are mainly used to ‘chunk’ a complex message 
+into multiple parts. Dimples are the visual full stops.
+
+Hairline dividers come with or without a tapered edge and are to be used inside content modules. These separate elements of 
+the message up to help with comprehension and recall. Hairlines are the visual commas.
+
+
+## Usage
+
+See the [Divider components](ref:///components/index.html#dividers) for implementation details:
+
+
+## Governance
+
+The dividers are managed by the Design Strategy team and we are currently not accepting any further contributions at this 
+time. However If you have any ideas, improvements or any questions regarding implementation please [get in touch with us](/support.md).
+
+
+## Roadmap
+
+* More guidance on when to use each divider
+* More standardization around how much spacing to use around the dividers

guide/design/iconography.md

@@ -0,0 +1,36 @@
+# Iconography
+
+## Overview
+
+Iconography uses images and symbols to represent an object visually. They communicate a message and should be distinct and 
+informative. Icons for technology products are not especially intuitive to a broad segment of our customer base. As a result, 
+they should be used sparingly and accompanied with short descriptive text.
+
+## Usage
+
+All icons should be on a transparent background and with the artboard boundaries at the edges of the icon. At least one 
+of the edges should be at the standard measurement of 16px, 24px, or 48px. 
+
+### Dos
+
+* All icons should be interactive, except stop and warning icons.
+* Icons should be accompanied with supportive text with the exception of the utility icons
+
+### Don’ts
+
+* Assume people understand what an icon should convey.
+
+See the [Icon components](ref:///components/index.html#icons) for implementation details.
+
+
+## Governance
+
+The Picons library set of icons has been approved by the TELUS Brand team. Should you need a new icon to be added to the 
+system, please submit a feature request to the Design Strategy Team. We aim to respond within 3 business days. All icons 
+accepted into the system must provide ‘sufficient additional value’.
+
+
+## Roadmap
+
+* Integrate a small subset of Picons into the component library
+* Provide more guidance on use of colour with iconography

guide/design/imagery.md

@@ -0,0 +1,38 @@
+# Imagery
+
+## Overview
+
+TELUS photography should reflect the simplicity and optimism that is at the core of our visual language. There are overarching 
+principles for all of our photography. It needs to be bright and optimistic, friendly and approachable, natural and realistic, 
+with a presence of clean light. 
+
+All TELUS imagery should look authentic and real. Whether it’s nature, people, or environments, our imagery is what draws people 
+in and allows them to connect with our brand. 
+
+The TELUS brand uses four types of photography:
+
+* Nature
+* Critter
+* Lifestyle
+* Device
+
+Brand approved imagery can be found by accessing [BrandHub](http://brand.telus.com). 
+
+
+## Usage
+
+See the TELUS Brand Photography Guidelines for detailed information on usage and implementation.
+
+See the [Image component](ref:///components/index.html#image) for implementation details.
+
+
+## Governance
+
+The TELUS Imagery guidelines and Brand Hub microsite are managed by the TELUS Brand team and should be strictly followed 
+unless explicit approval has been granted. If you would have any questions regarding implementation please [get in touch with us](/support.md).
+
+
+## Roadmap
+
+* Addition of decorative image component (leaf and floral assets, leaf composition etc)
+* Define approval process for lifestyle assets

guide/design/layout.md

@@ -0,0 +1,26 @@
+# Layout
+
+## Overview
+
+Well designed page layouts are created through the consistent application of alignment and white space. The TELUS Design 
+System uses a 12 column grid and a spacing system to assist you in creating a visual rhythm across experiences.
+
+## Usage
+
+See the following components for implementation details:
+
+* [Grid](ref:///components/index.html#grid)
+* [FlexGrid](ref:///components/index.html#flexgrid)
+* [Responsive](ref:///components/index.html#responsive)
+* [Box](ref:///components/index.html#box)
+
+
+## Governance
+
+The layout system is managed by the Design Strategy team and we are open to improvements and contributions. If you would 
+have any ideas, suggestions or questions regarding implementation please [get in touch with us](/support.md).
+
+
+## Roadmap
+
+* More documentation on the overall layout system

guide/design/motion.md

@@ -0,0 +1,15 @@
+# Motion
+
+Coming soon...
+
+
+## Governance
+
+As we do not yet have any official guidelines please consult your Design Leads or use existing patterns on TELUS.com 
+when undertaking work that requires motion or animation.
+
+
+## Roadmap
+
+* Define rules and standards for use of motion and animation effects
+* Develop a set of animation components or tokens

guide/design/principles.md

@@ -0,0 +1,59 @@
+# Design Principles
+
+The TELUS design principles are a simple set of rules that enable teams to create great digital experiences. All experiences 
+must meet these principles. They are used to assess whether an experience is good enough for our customers to use.
+
+## Clear and simple designs
+
+* Promote the brand aesthetic
+* Reduce complexity by constraining choices
+* Customers can complete task on first attempt
+* Leverage usability heuristics
+
+## Respect our customers
+
+* Ensure decisions are informed by analytics and research
+* Designs should be accessible and usable to all
+* Don’t hide information that customers need to achieve their goals
+
+## Support the business
+
+* Balance business goals with customer needs
+* Design for scale
+
+## Be efficient
+
+* Design with consistency by leveraging TDS
+* Look for similar design patterns first
+* All designs need to work within the platform
+
+## Measure
+
+* Designs should have a measurable hypothesis
+* Leverage analytics
+* Test and iterate upon your designs
+
+## Mobile first
+
+* Design for small screens first before moving onto large screens
+* Through responsive and adaptive design, ensure experiences are great across multiple screen sizes
+
+## Seek the perspective of others
+
+* Collaborate by involving cross-functional team members
+* Ensure design is technically feasible understand how it impacts performance 
+* Share your ideas early and often to explore many different solutions and iterations.
+
+## Think end-to-end
+
+* Experiences should move a customer towards their goal, leaving no dead ends
+* Support and enable multichannel experiences
+* Test the end-to-end experience to ensure continuity
+
+## Align with TELUS Standards
+
+* Accessibility 
+* Privacy & Security 
+* Performance 
+* Brand
+* Content

guide/design/typography.md

@@ -0,0 +1,62 @@
+# Typography
+
+## Overview
+
+TDS' primary typeface is Helvetica Neue, a robust typeface with legible numbers that renders well at all sizes. It’s designed 
+with precision and it commands respect, however, It is a friendly, sophisticated, and neutral typeface which never detracts 
+from content.
+
+### Hierarchy
+
+Hierarchy signifies importance by structuring something to be more or less obvious. It clearly communicates a change from 
+one level of content to another. Typography uses weight and size to create hierarchy. Primary content uses large/body with 
+varying headline and subtitle size and secondary content uses small/body.
+
+### Weight
+
+Weight is used to create proportional contrast throughout the various sizes of typography. It’s intentionally applied to 
+specific sizes to enhance readability and legibility across devices and platforms. Smaller sizes make use of heavier weights 
+and larger sizes use lighter weights.
+
+### Scale
+
+Scale creates consistency in sizing across elements. Modular scaling was used to set type sizing in a more meaningful 
+way between devices and screen sizes. TDS uses "rem" units for all type so that it will scale appropriate based on the 
+user's browser font size settings. 
+
+_Body, links: Body copy is 16px across all devices and screen sizes._
+
+### Type leading
+
+Type leading is in most cases is the font size + 8px. However, in some instances it may be modified slightly smaller 
+depending on the application.
+
+### Line length
+
+The ideal line length for body copy is considered to be 50-75 characters per line with the inclusion of spaces. The best 
+way to achieve an optimal character count per line is by putting constraints around how many columns your text block spans.
+
+Too wide – if a line of text is too long, the user’s eye will have a hard time focusing on the text. This is because the 
+length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to 
+continue from the correct line in large blocks of text.
+
+Too narrow – if a line is too short, the eye will have to travel back too often, breaking the reader’s rhythm. Too short 
+lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping 
+potentially important words)
+
+## Usage
+
+See the [Typography components](ref:///components/index.html#typography) for implementation details.
+
+
+## Governance
+
+The typography is mandated by the TELUS Brand team and should not be adjusted without explicit approval. If you would 
+have any questions regarding implementation please [get in touch with us](/support.md).
+
+
+## Roadmap
+
+* v1.0: Drop base font size from 20px to 16px
+* Adopt a more complete modular scale to work responsively with various view ports and within the typestack
+* Provide more guidance on use of colour with type