# ABLE - Design System

A design to development framework for building mobile and desktop web applications using Figma design files and React (Next.js) code.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FO9ifPftw4WfuPHpyD1Dw%2FAppPhone-cmp.png?alt=media&amp;token=20ecd365-1682-46bc-a3fd-bf566110a6f9" alt=""><figcaption></figcaption></figure>

## Intro

As the breadth of solutions and interconnected experiences grows, it becomes increasingly important to maintain a consistent style to ensure an expected and uniform experience. The aim of ABLE is to accelerate the design and development of solutions in addition to reducing user confusion and extended on-boarding. To do this, we’ve built a design system to document and store reusable aspects while also sharing best practices for faster design and development.

### :book: Table of Contents

* [Structure](/intro)
* [Themes](/overview)
* [Elements](/core/overview)
* [Components](/core/components)

### :handshake: How to Contribute

The main purpose of this repository is to evolve the core concept of scalable application design and development. We want to make contributing to this project as easy and transparent as possible. Read below to learn how you can take part in improving ABLE.

#### [Code of Conduct](/contributing/code_of_conduct)

ABLE has adopted a Code of Conduct that we expect project contributors to abide by. Please read the code of conduct to understand what actions will and will not be allowed.

#### [Contributing Guide](/contributing)

Read this guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.

#### Want to Help?

Want to report a bug, contribute some design or code work, or improve our documentation? Excellent we'd love for you to join us! Read up on our guidelines for [contributing](/contributing) and then check out one of our issues labeled as [good first issue](https://github.com/able-app/docs/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).

### :scroll: License

ABLE is MIT licensed, as found in the [LICENSE](https://github.com/able-app/docs/blob/master/LICENSE) file. ABLE's documentation is Creative Commons licensed.


# Structure

An overview of the file and organizational structure

## Design - UI Kits

The design system is made up of multiple “UI Kits” aka Figma files, that collectively make up a multi-tiered design system. This is often referred to as the "System of Systems". Best practices built into our design tools allow the use of shared design libraries, with role based access control. These files and asset libraries along with the [atomic design principles](https://bradfrost.com/blog/post/atomic-web-design/), are at the core of the design system.

For example, managing icons in a different file than the components, separated from a data visualization module that inherits colors from a brand theme is just good practice. This compartmentalizes the features and functionality of the design system, allowing for easier updates (Ex. Swapping out all icons for a different style as tastes change), and governance to keep things consistent at a high level.

#### Kit Structure

![The graphic above is covered in greater detail below](https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F5adKsj8PFcM46RofvUuF%2FDS-structure.png?alt=media\&token=058e7799-337a-4163-bc7c-2f157a98ac84)

### Naming Convention

You'll notice throughout the design system that we've used greek characters at the start of some collections and file names.  This is our shorthand method to give a sense of which layer of the design system an object exists, within the name of the file or folder.  These characters have been chosen so that when files and folders are ordered alphabetically they fall in order from our base layers at the bottom, on up. Here's a quick run down of the characters used...

**Ω Base** - The lowest layer of an object, often consisting of a value or shape. (Ex. Primary Color)

**Θ Collection** - An organization method to keep like items grouped together. (Ex. ListItem - Leading)

**Φ Primitive** - A single object that when paired with other same primitives become an element or component. (Ex. Single Tab)

**ε Element** - The individual or combined primitive building block(s) used in components. (Ex. Label)

**Component** - Built out of elements or nesting other components, with a background surface and spacing, to serve as a reusable object in building Modules & Screens. (Ex. ListItem)

**Ξ Module** - Relatively complex groupings of components, with a specific purpose. (Ex. ListView)

**Screen** - Where our Components and Modules come together. (Ex. Sign In)

**Flow** - A series of Screens tied together to fulfill a purpose, a complete Action. (Ex. Sign Up)fig

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FHABbmOENxLrowVbvzJHV%2FStructure.png?alt=media&amp;token=d2563bf0-02bb-4f18-83d5-4b22abd1aa46" alt=""><figcaption></figcaption></figure>

## Level 00 - Design System

The Design System (DS) acts as the foundation of everything we build. These core kits, aka "files" are shared with the other levels in a cascading format. Meaning that objects and tokens at a higher level can over-ride those below them. These reusable pieces of the design system follow an atomic design architecture which is mirrored at each level. We break that atomic structure into the following layers, starting with the most basic of things, the base layer.

### Themes

Themes are the containers for all of our "Base Layer" objects, which are divided into multiple kits: Styles & Dictionaries, Icon, Illustration, Brand Libraries. This provides the ability to stylize color, sizes, surfaces, interactions and effects that can be used across a single product, multiple products, or across the entire brand. Themes keep things consistent with the style "form" of an object, while the intent "function" is handled in other kits. Themes are valuable when we work with multiple products (apps) that have different stylings. An example of this being the difference between the on-demand drivers app and the customers apps. Both could use the same Sign-In Module and each have the same intent for a Call-to-Action (CTA) button, but the styling may change from a primary color of blue with the driver CTA button, to a primary color of green for the customer CTA button.

So in Level 00 we have our default styles, in a "Base" theme and at Level 01 & 02, over-ride those with the brand and product specific theme choices a client would have. This allows us to decouple all branding/theming choices as we build in the Core Kit.

### Core

The next layer up in the Design System is our "Core" kit containing Primitives, Elements, Components and Collections of these. Elements and Components are the equivalent to Atoms and Molecules in the [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) structure. *Note, we've added our own lower level of "Particles" and other segmentations like "Primitives" and "Collections" to add much needed layers to the Atomic Design structure when speaking to the way we actually need to organize things in the design system.*

### Actions

The next layer up in the Design System is our "Actions" kit containing Modules, Screens, Flows and Collections of these that can be assembled into a self contained app Extension. When referring back to the [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles these equate to "Organisms", "Templates", and "Pages". This is where we start to build out the functionality of the actionable activities that a user will do within the application. For example, most applications have a Sign Up process that have a series of Screens (Name & Pass > Recovery Email > Choose Username... ) in a Flow. Where one of those screens, or parts of the screen could be the Module for turning on FaceID.&#x20;

## Level 01 - Brand Kits

In the Brand level we use over-rides to alter the default design system Theme, Libraries, Styles & Dictionaries, to fit the styling of the brand. This brand level can have further over-rides at the product level for those changes between the different products, but the majority of the branding is done at this level.

**Over-rides**

Anything that exists at the design system layer can have an over-ride applied. The reasoning for having brand over-rides is to provide a mechanism for modular testing and granular change between segments of the audience. For example, let's say we're launching a product in a new city (New York City) and we'd like to swap out our city specific photos and illustrations. Those city specific libraries can be created and programmatically swapped out. Another scenario could be for testing out font changes for readability within a warehouse, swapping one file for another for a test group while keeping others on the main theme is a breeze.


# Themes

How applications get there look and feel

This is a good introduction to themes in a design system like we're creating here. <https://bradfrost.com/blog/post/creating-themeable-design-systems/>

Fundamentally, theming is used to modify "skin" existing elements and components to apply a visual style to an application. However, themes can control far more than a change in the colors. The theme in the ABLE design system consists of the following style, dictionary and library files:

* [Color Styles](/overview/styles/color)
* [Text Styles](/overview/styles/typography)
* [Effect Styles](/overview/styles/effect) (Shadows & Treatments)
* [Icon Library](/overview/iconography)
* [Illustration Library](/overview/illustration)
* [Brand Library](/overview/o-brand-library)
* [Spacing Dictionary](/overview/styles/spacing)
* [Size Dictionary](/overview/styles/size)
* [Time](/overview/styles/o-time-dictionary), [Interaction](/overview/styles/o-interaction-dictionary), [Motion](/overview/styles/motion), [Audio](/overview/styles/audio), [Haptic Dictionaries](/overview/styles/haptic)

Each of these files is referenced in the Theme file and can be swapped out for other like-kinds to get a different experience. The easiest example of this is with Color Styles, where the visual colors of the app can be swapped out for a different look. Using this structure eliminates the need to modify each individual element and component to achieve the desired style. Themes control the design across all delivery platforms from a central set of theme files.

## Style Dictionary

From the developers point of view a theme and all of these libraries and color palettes are built as "style dictionaries" and referenced in their code. [Style Dictionary](https://amzn.github.io/style-dictionary/#/) is a build system that allows us to define styles and assets once, in a way for any platform or language to consume. This is a simple JSON file championed by the talented designer/developers over at Amazon. Read more about Style Dictionary in their [GitHub documentation](https://amzn.github.io/style-dictionary/#/). We build with Style Dictionaries to allow the Design System to grow beyond it's initial single platform (React Native), to others (Flutter, Native iOS & Android, etc.)

**Libraries**

We refer to assets that exist as external files (photos, graphics, audio/video, etc.) as libraries. By establishing libraries for these things we can swap out one library for another easily. For example, let's say at Christmas time we want to have customized Illustrations to reflect the season. Simply swap the reference to the "Illustrations - Thanksgiving" library for the "Illustrations - Christmas" library and it's ready to go. Another byproduct of this is that it provides a compartmentalized work area for the Illustrator to work and store like objects, that carries a consistent structure.

## Design Tokens

Design Tokens are key-value pairs that represent the specs of the design system. They are the atomic, reusable building blocks of a design system, such as colors, typography, spacing, motion, and even sounds and haptic feedback. In code these are referred to as constants.

In design systems, tokens are used in place of hard-coded values of visual primitives to ensure flexibility and cohesiveness across all products.

Design tokens allow teams to better collaborate and ensure brand consistency across multiple products, platforms, and media. A theme is a collection of tokens, each with a defined role. For example, a token for a color may be #primary and is used in all instances that a primary color is used. For colors the token simply stores the RGBA value. For typography tokens work the same way, assigning type styles based on the token role. For example, H1 is used for prominent typography like headlines. Type tokens store the full range of type settings including: font-size, line-height, letter-spacing, as well as breakpoint sizing changes.

## Semantic Token Aliases

Token aliases let you relate a semantic token to a base "primitive" token for a specific context to get a level of abstraction. This helps us communicate the intended purpose of a token, independent of the actual/primitive value of the token. Think of semantic tokens as design decisions on style primitives.

As an example of this, when creating a semantic tokens for the light and dark modes of a theme we have primitive color style tokens for "White" and "Black" that store the actual color values and that's the same for all themes. On a second level, the semantic level, we have tokens for "Background Color" and "Text Color". In the light mode, the Background Color semantic token is defined as an alias of White, and Text Color's semantic token is an alias of the Black primitive token.

For the dark mode of the theme, instead of changing the actual values of our primitive tokens (the Black & White tokens), we'd edit our semantic tokens and switch the aliased tokens. To learn more about semantic tokens, this is a good series of articles. <https://dev.to/ynab/a-semantic-color-system-the-theory-hk7>

## Modes

Theme's have modes for lighter colors that create a sense of open space, and dark or black colored backgrounds that tend to jump out at you. These modes are set within the Styles, Dictionaries, and Libraries, and the theme controls which mode is displayed.

The base "default" theme comes in light and dark variations for use in different environments. Dark mode provides added visible contrast for low-light conditions. Light mode is often used in apps that are focused on productivity with easy to read text for extended work streams. However, there may be the desire for high contrast modes for those with visual disabilities. This choice of theme "mode" will provide for those added abilities.

* Light (default)
* Dark
* Light - High Contrast
* Dark - High Contrast

### Properties

**Name**: \[textField] This is the human readable name for the theme.

**Description**: \[textArea] A description of the theme. For example, a brand could have different theme's based on the season (holiday season). Where the illustrations and icons could change in appearance from their base state.

**Color Style:** \[selectList(colorStyle:List)] the colors used throughout all design systems objects

**Text Style:** \[selectList(textStyle:List)] the fonts, sizes, and line heights used throughout all design system objects

**Effect Style:** \[selectList(effectStyle:List)] the visual effects applied to different objects on the screen, the best example being drop shadows to show elevation

**Icon Library:** \[selectList(iconLib:List)] the visual metaphors used in the application to give guidance on an objects purpose.

**Illustration Library:** \[selectList(illustLib:List)] visuals to tell a story that add to the purpose of the screen or the message we want the user to understand.

**Brand Library:** \[selectList(brandLib:List)] Those assets that are brand specific, logos, wordmarks, letter mark, pictorial mark, mascots, etc. in set demensions (1:1, 4:3, etc.) for use in Iconography, Illustrations and Graphics.

**Spacing Dictionary:** \[selectList(spaceDic:List)] the distance between objects (elements and components) in the layout. This follows the 8 point grid system.

**Size Dictionary:** \[selectList(sizeDic:List)] the standardized sizing for set groups of elements and components. This keeps like-objects (those that can be substituted for one another) of the same size, to not break the parent object (element or component)

**Time Dictionary:** \[selectList(timeDic:List)] the duration something will last. For example, a "Delay" for when an event is triggered after a certain amount of time the activity will take place. This could also be the amount of time the activity takes to complete as well.

**Interaction Dictionary:** \[selectList(interactDic:List)] the methods that a user can interact with the application. Tap, swipe left, swipe right, long press

**Motion Dictionary:** \[selectList(motionDic:List)] a set of standardized visual activities that can be used to add motion to an element, component, sheet, screen etc. As an example, an error on a incorrectly entered password field, where the field could do a "Head Shake" motion.

**Audio Dictionary:** \[selectList(audioDic:List)] sounds used to communicate with the user with sensory feedback.

**Haptic Dictionary:** \[selectList(hapticDic:List)] the use of touch feedback to communicate with the user. It's the vibration of your phone when you get a new email or the rumble in the controller when a hit happens in a game.

### Creating a New Theme

The base "default" theme files (styles & dictionaries, icons, illustrations, brand assets) are meant to act as a starting point (aka template) for the design of a new theme. Theme designers can define the aspects of a new theme that deviate from the base. That new theme is then packaged up with the new values under a new name for the theme.


# Styles

### Ω Base Layer (Particles)

Base layer kits contain the lowest level objects of the “atomic design” system that make up a theme. These are what designers call "Design Tokens" or in code "Constants". Notice that greek symbols are used throughout the design system. This is our shorthand method of noting which layer an object falls into in the design system. These greek characters are used in our UI Kits to allow for easy organization in alphabetical lists, where the lower layers fall further down in the alphabetical listing. This Base Layer contains styles, dictionaries and libraries:

*Note: As the design system expands we will add new kits to a theme, for example an animations library.*


# Ω Color Style

Within the design system we have color styles that follow the practices of Google's material design color palette with ten different weights for each hue, ranging from 50 (lightest) to 900 (darkest). When using these colors we suggest that you start with the 500 weight color and move up (Shade) and down (Tint) in numeric weight. Each of these colors carries its design token for reference within the code.

To set the properties for color in a Theme, we use Color Style's. This is our base level color style for a theme but we could also have multiple color styles that follow their own color schemes. For example, a color picker available to app users may have a limited number of colors, which would be defined in a "Picker Palette" color styles file. These separate color style files help us to organize our color palettes into logical families, which can then be references from a theme.

## Mode

Every Color Style file has at least two modes, Light (default) and Dark. With the ability to add additional modes if needed, for example High Contracts - Light, Mode. All designs are done in the Light mode.

<div><figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FzeK0bbBPmeKCBzIG6Izq%2FMode%20-%20Light.png?alt=media&amp;token=56925838-67d2-4daa-8ff9-361085a0427e" alt=""><figcaption></figcaption></figure> <figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FNunkiElIrTxs2QIhDvW5%2FMode%20-%20Dark.png?alt=media&amp;token=e9035c24-3fd5-4c62-a531-679766d5523a" alt=""><figcaption></figcaption></figure></div>

## Properties

The fields that are needed to describe the color, its tint or shade and any other properties carried with the color.

**Name**: \[textField] This is the human readable name for the color. In the case of the material design system we have nine "parent" primary colors with different tints and shades "children" which we follow a systematic naming convention for. For example, we have a "parent" primary color of Purple with "child" tints and shades running from 050 to 900. So as a name we would use "purple500" as a name when referring to that color.

**Value**: \[textField w/ colorSelect icon] This is the HEX value for the color with the alpha at the end (#RRGGBBAA). In our #purple500 from above example, the value would be #3F51B5FF. NOTE: There's only one value that a color carries, however it could be a gradient which would be a number of different colors that fade from one color to the next.

**Token**: \[textField] The design token is our machine readable way of linking from the element or component back to the theme and style dictionaries. For example with Purple we have a design token of #purple500.

**Referenced By**: \[textArea.ReadOnlyCsvList] The list of elements and components that are referencing this style

## Attributes

This is where we will attach any meta data we'd like the object to carry. One example of this is how text should be treated when this color is the background behind that text (so it can be read).

**Font**: \[selectList(base,inverse;base)] We have an attribute for color when it comes to fonts that would overlay a color. For those colors that should use the "base" Neutral color (with a Light Mode, that would be Black). For those listed as "inverse" the opposite Neutral color would be used (ie. White). These values are later used as default text colors for fonts that are overlaid on top of a background color, ie. Button with a background design token of @purple500 would use an "inverse" overlay color (white) as its default. This is to ensure that wording on top of a color is readable.

## JSON

The file for color can be found in the style dictionary under the folder properties > styles > color. In that folder you'll see a few json files: base, which is our base color palette (used to change the color of basic shapes, lines and even svg icons), our font colors (available in the GUI when you want to change the color of a font) and our theme colors (available in the GUI when altering the theme properties). If a color is represented in the design it will have a reference in one of the files in this folder.


# Ω Text Style

Every experience designed for a screen needs a well-designed visual hierarchy to its content. The goal of a typographic hierarchy is to present material so that the most important things are displayed with the highest visual impact. This helps the user in their quick scan for key information on a screen. This is achieved through the types size, weight, color, contrast, consistency of location, alignment, and spacing from other elements on the screen.

To set the properties for type, in a Theme we use the Text Style which establishes a typographic scale of sizes for use in the base application. The text style we create is then referenced by all elements and components for consistency in the design. Design Tokens are used with the styling in place of inline styling in ALL aspects of the application.

The Text Style is used to establish different sized and spaced text on a progressive scale. Color, shadowing and other treatments are **not** handled at the Type Style level but exist in their own styling library or dictionary and applied as a property to elements and components.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FRsAhwC0WvPt2b2oJx3Je%2Ftypography.svg?alt=media&amp;token=59cfc315-a0eb-4ed8-9b99-e02f302676ab" alt=""><figcaption></figcaption></figure>

### Properties

These are the values that each font "type" carries as part of a grouping of "text" together as a "styling".

**Name**: \[textfield] The human readable way we refer to this "type" in the "type scale"

**Family**: \[selectList(Assets.Fonts)] The font family that is being used as the base. The list of available font families is pulled from the Assets > Fonts folder. Those fonts that have been uploaded into the system.

**Size**: \[slider-tick(1-99;12)] This is the digital pixel size of the font

**Weight**: \[selectList] This is the weights available for the font that is selected (i.e.. Normal, Bold, Medium, etc.)

**Transform**: \[selectList(Normal, Uppercase, Lowercase, Capitalized; Normal)] The ways that text should be changed in the end product, independent of how it was entered/read (i.e.. Normal, Uppercase, Lowercase, Capitalized)

**Style**: \[selectList(Normal, Underline, Italic, Line Through; Normal)] How the text should appear (i.e.. Normal, Underline, Italic, Line Through)

**Line Height**: \[slider-tick(0-99;150% of size above)] The height of text when line wraps are used. The rule of thumb for fonts is to set the line height at approximately 150% of the font size, as a starting point.

**Letter Spacing**: \[slider-tick(-50 to 50;0)] To alter the space between characters in logical pixels we use letter spacing. These can be positive and negative numbers with the default being zero or what the font otherwise carries for a value.

**Referenced By**: \[textArea.ReadOnlyCsvList] The list of elements and components that are referencing this dictionary

**Token**: \[textfield(#)] The short-code we use to refer to this type (i.e.. #H1, #H2, #R1, #R2 , #R4B etc.)

### Base Type Scale

| **Name**       | **Family** | **Size** | **Weight** | **Transform** | **Style** | **Line Height** | **Letter Spacing** | **Token** |
| -------------- | ---------- | -------- | ---------- | ------------- | --------- | --------------- | ------------------ | --------- |
| Header 1       | Lato       | 40       | Regular    | Normal        | Normal    | 48              | 0                  | #H1       |
| Header 2       | Lato       | 32       | Regular    | Normal        | Normal    | 40              | 0                  | #H2       |
| Header 3       | Lato       | 24       | Regular    | Normal        | Normal    | 32              | 0                  | #H3       |
| Regular 1      | Lato       | 20       | Regular    | Normal        | Normal    | 24              | 0                  | #R1       |
| Regular 1 Bold | Lato       | 20       | Bold       | Normal        | Normal    | 24              | 0                  | #R1B      |
| Regular 2      | Lato       | 16       | Regular    | Normal        | Normal    | 24              | 0                  | #R2       |
| Regular 2 Bold | Lato       | 16       | Bold       | Normal        | Normal    | 24              | 0                  | #R2B      |
| Regular 3      | Lato       | 14       | Regular    | Normal        | Normal    | 16              | 0                  | #R3       |
| Regular 3 Bold | Lato       | 14       | Bold       | Normal        | Normal    | 16              | 0                  | #R3B      |
| Regular 4      | Lato       | 12       | Regular    | Normal        | Normal    | 16              | 0                  | #R4       |
| Regular 4 Bold | Lato       | 12       | Bold       | Normal        | Normal    | 16              | 0                  | #R4B      |

### JSON

The file for the font we use in the base design system (Lato) can be found under the folder properties > styles > font.json. That file points to the location of that font asset in the style. It doesn't provide the sizing of the text to be used in the design system. The text size used in the design is referenced in the styles > size > font.json where you will see the sizes for other objects in the design system listed as their own json files.


# Ω Effect Style

## Type - Shadow

Shadows give objects on the screen depth, elevation, and define the edges of an object. The shadow is set based on its elevation and relationship to the surfaces of other objects. With any application there will be the need for some level of shadow to show elevation. To provide a scalable, consistent, and an easy way to manage shadow across the app we use Effect Styles for shadows. Most won't find the need to customize the defaults set in the "Base" shadows but the ability exists to over-ride those at the theme layer. Also, we can build additional shadow dictionaries for specific elements and components to keep the design consistent. For example, if we wanted to limit the shadow options available to a Card component we could create a shadow dictionary for cards and reference those in the shadow styling options of a card rather than the Base shadow.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FnThmjFBPtrSO16S4n1os%2Fshadow.png?alt=media&amp;token=859e485f-9615-4688-b757-1ea18bb6385a" alt=""><figcaption></figcaption></figure>

## Type - Treatment

These are the treatments that are applied to screen objects. The best example of this is a Frosted Glass appearance that can be applied to a photo.

### Properties

**Name**: \[textField] The human readable dictionary name for this "Shadow" option. (i.e. Base, Card)

**Thumbnail**: \[fileAdd - optional] The visual to represent this object

**Description**: \[textArea - optional] Context to understand what the object is

**Token**: \[textField] The short-code we use to refer to this dictionary (i.e.. #shadBase, #shadCard etc.)

**Referenced By**: \[textArea.ReadOnlyCsvList] The list of elements and components that are referencing this dictionary

A single dictionary "source of truth" is referenced across multiple elements, components and screens to provide the shadow properties for that object in the design system.

## Add Entry

These are the individual "entries" added to this shadow style. As an example we have a Base shadow "Effect Style" which is referenced from all visible screen objects in the design system. That style has options from None to Huge. Now when we are building a component with an object in it, we have those options available to us. If we want to go into greater detail for a particular element or component on the screen we can create a new shadow family to represent that element or component, in essence, overriding the Base shadow family.

### Properties

**Name**: \[textField] The human readable way we refer to this "Shadow" option in the Effect Style. (i.e. XS, M, L)

**Blur**: \[slider-tick(0-25;0)] This is the digital pixel size

**Spread**: \[slider-tick(0-25;0)] This is the digital pixel size

**Color**: \[selectList(ColorStyle.Shadow)] This pulled from a color style, created for shadow which has a base of Black and three alpha levels (.2, .14, .12)

**Horizontal Offset**: \[slider-tick(-100 - +100;0)] This is the digital pixel size

**Vertical Offset**: \[slider-tick(-100 - +100;0)] This is the digital pixel size

**Token**: \[textField(#)] The short-code we use to refer to this shadow type in the Effect Style (i.e.. #shadBaseS, #shadCardM etc.)

## Base Style Entries

We will use the material design shadows as our base, mapping each of the base shadow tokens to its equivalent value that can be found here.

<https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/shadows.dart>

| Name | Size | Token |
| ---- | ---- | ----- |
| None | 0    | #E0   |
| XXXS | 1    | #E1   |
| XXS  | 2    | #E2   |
| XS   | 3    | #E3   |
| S    | 4    | #E4   |
| M    | 6    | #E6   |
| L    | 8    | #E8   |
| XL   | 9    | #E9   |
| XXL  | 12   | #E12  |
| XXXL | 16   | #E16  |
| Huge | 24   | #E24  |

NOTE: Any dictionaries or styles designated as a Base, can not be deleted. They act as the defaults for other elements and components up the line.


# Ω Size Dictionary

For objects on the screen we want to adhere to sizing standards as much as we can to create a consistent look and feel across our visual elements. To accomplish this we have sizing standards that are associated with different objects (i.e. Grids, Spacing, Icons, Avatars, Images and Button).

There are various sizing types (grid, spacing, radius, object width & height, timing, etc.) that are a part of the design system that are used to design our components and screen layouts. This is where we group those individual sizes together into use case dependent dictionaries. These are then used by our elements and components to provide the sizing options available to that object.

The design system starts with a few base dictionaries (grid, spacing, radius etc.). More can be added as needed to accommodate the needs of the system as it grows. As a sub-category under this "Size" page is where we list each of these base dictionaries with their usage, properties, and JSON details.

### Properties

**Name**: \[textField] The human readable dictionary name for this "Size" option. (i.e. spacing, radius, etc.)

**Type**: \[selectList] The family grouping for this size i.e. Radius, Image, Grid…

**Thumbnail**: \[fileAdd - optional] The visual to represent this object

**Description**: \[textArea - optional] Context to understand what the object is

**Token**: \[textField] The short-code we use to refer to this dictionary (i.e.. #dicSpacing, #dicRadius etc.)

A single dictionary "source of truth" can then be referenced across multiple elements, components and screens to provide the size properties for that object in the design system.

## Add Entry

These are the individual "entries" added to this size dictionary. As an example we have an Icon Size "Dictionary" which is referenced from all icons in the design system. That dictionary has options of Small, Medium, Large. Now when we are building a component with an icon in it, we have those options and only those options available to us, which enforces consistency throughout the design.

### Properties

**Name**: \[textField] The human readable way we refer to this "Size" option in the Dictionary.

**Value**: \[slider-tick(1-99;12)] This is the digital pixel size

**Base**: \[toggle(on,off;off)] Makes this entry the default "base" value.

**Token**: \[textField] The short-code we use to refer to this metaphor (i.e.. #szSm, #szMed, #szLrg, etc.)


# Ω Spacing Dictionary

Whitespace is crucial to drawing the user’s attention to key areas, maximizing readability and guiding the flow of information. As with typography, by adhering to a spacing scale, we can ensure that each component and layout will be uniform. To keep spacing consistent between elements and allow the interface to both breathe and accommodate information rich interfaces we've modeled our spacing on Android’s Material design soft grid system which follows the 8dp grid.

The basic principle of the eight-point grid is to design screen elements using multiples of eight, whenever possible. This type of grid system is used to ensure a consistent unit of measurement between designers.

## Dictionary

Just as type and color has a dictionary we have one for spacing both at the component level and at the layout level. Both are designed to complement components and typography throughout the system. It's important to divide our spacing into two different roles in the display of objects on the screen.

**Spacing Scale:** Used for smaller spacing needs which are often found in the layout of components (i.e. the space between two elements in the component like the label and a textfield in a component)

**Layout Scale:** Most often used for the positioning of components within the screen (i.e. the space between a textField and selectList component on a form).

## Spacing Scale

Just as color has a palette and type has a scale we have a scale for spacing. Within spacing we break down the scale into its building blocks. These building blocks then contain the rules of our space scale. The spacing scale is used in the construction of individual components. The scale uses small increments to create consistent and appropriate spatial relationships between objects in the design.

### Properties

The structure of these properties follows that of all Size properties which can be found in the parent to this section "Size".

| Name           | Size (dp) | Token |
| -------------- | --------- | ----- |
| 0dp - Spacing  | 0         | #none |
| 2dp - Spacing  | 2         | #tiny |
| 4dp - Spacing  | 4         | #xxs  |
| 8dp - Spacing  | 8         | #xs   |
| 16dp - Spacing | 16        | #s    |
| 24dp - Spacing | 24        | #m    |
| 32dp - Spacing | 32        | #l    |
| 48dp - Spacing | 48        | #xl   |
| 56dp - Spacing | 56        | #xxl  |
| 64dp - Spacing | 64        | #huge |

## Layout Scale

Used for arranging components as part of a screen layout. This scale tends to offer larger increments than the spacing scale to increase the amount of white space between components and disassociate separate sections from one another. A good example of layout spacing happens with the Card component in a list. The spacing between the sides, top, and bottom of the cards is managed by the layout scale. In that card we might have spacing on the sides set to #xs (8dp) and the top and bottom of cards set to #tiny (4dp).

### Properties

The structure of these properties follows that of all Size properties which can be found in the parent to this section "Size".

| Name          | Size (dp) | Token |
| ------------- | --------- | ----- |
| 0dp - Layout  | 0         | #none |
| 4dp - Layout  | 4         | #tiny |
| 8dp - Layout  | 8         | #xs   |
| 16dp - Layout | 16        | #s    |
| 24dp - Layout | 24        | #m    |
| 32dp - Layout | 32        | #l    |
| 48dp - Layout | 48        | #xl   |
| 64dp - Layout | 64        | #xxl  |
| 96dp - Layout | 96        | #huge |


# Ω Motion Library

The component as a whole can also have motion applied to it. An example of this might be the "Flash" of a ListItem when it is selected from a list.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FQ5GCGbBSD7Q6sIyWQhIP%2Fmotion.svg?alt=media&amp;token=2bf9e494-9dd7-4c30-9e8b-ded5644a8f24" alt=""><figcaption></figcaption></figure>

## Resources

These resources are stored in the snippets library as pieces of code that can be used across the application and referenced through the token assigned to it in the snippets library.

<https://pub.dev/packages/flutter_animator>

**Prebuilt Types**: Bounce, Flash, HeartBeat, Pulse, Rubber Band, Shake, Head Shake, Swing, Tada, Wobble, Jello

**Enter/Exit Types**: Bounce, Fade, Flip, Lightspeed, Rotate, Slide, Slit, Zoom, Hinge, Jack-in-the-Box, Roll

<https://pub.dev/packages/animate_do>

<https://pub.dev/packages/animated_text_kit>

<https://pub.dev/packages/motion_widget>

<https://pub.dev/packages/animations>

## Properties

**Name**: \[textField] The human readable way we refer to this "Motion" in the dictionary

**Type**: \[selectList()] The categories we set up for the different types of motions. The initial thought is that we will have at least two types: Productive which demo a sense of efficiency and responsiveness in the app, and Expressive which are more enthusiastic and highly visible to signify an important moment.

**Resource**: \[searchList(motion.Type)] Every motion will have a source file that it references to provide the code for the activity this is the location of that snippet of code needed to preform the desired action

**Metaphor**: \[textField] Every motion response acts as a metaphor for something. Some responses can carry multiple metaphors (i.e. "success" and "win" for a positive result) This allows us to reuse these feedback metaphors as a design token which is referenced throughout our components while all referencing the same file.

**Token**: \[textField] The short-code we use to refer to this metaphor (i.e.. #moWin, #moError, #moWarn, etc.)


# Ω Haptic Library

Haptic feedback is the use of touch to communicate with users. It's the vibration of your phone when you get a new email or the rumble in the controller when a hit happens in a game.

## Resources

These resources are stored in the snippets library as pieces of code that can be used across the application and referenced through the token assigned to it in the snippets library.

{% embed url="<https://www.npmjs.com/package/react-native-haptic-feedback>" %}

{% embed url="<https://www.npmjs.com/package/expo-haptics>" %}

To get a better feel of testing haptic and vibration patterns, here are some helpful resources and apps:

* [Vibration App](https://apps.apple.com/us/app/vibration/id301097580) — A true vibration spectrum analyzer using the built in accelerometers and gyroscope inside the iPod Touch and the iPhone.
* [Core Haptics (For Devs)](https://developer.apple.com/documentation/corehaptics) — Compose and play haptic patterns to customize your iOS app’s haptic feedback.
* [Android Haptics](https://material.io/design/platform-guidance/android-haptics.html) (For Design) — Haptic guidelines to enhance interactions and convey useful information to users through the sense of touch.
* [Android Haptic Constants (For Devs)](https://developer.android.com/reference/android/view/HapticFeedbackConstants) — Constants to be used to perform haptic feedback effects on Android devices.
* [Haptic Feedback Generators (For Devs](https://medium.com/@guerrix/haptic-feedback-generators-1aa86371246e)) — Explore haptic patterns generated by Apple’s Tactic Engine (by Jesus Guerra)

## Properties

**Name**: \[textField] The human readable way we refer to this "Haptic" feedback in the dictionary

**Type**: \[selectList()] The categories we set up for the different types of haptic responses

**Resource**: \[searchList(haptic.Type)] Every haptic feedback will have a source file that it references to provide the code for the feedback this is the location of that snippet of code needed to preform the desired response

**Metaphor**: \[textField] Every haptic feedback response acts as a metaphor for something. Some responses can carry multiple metaphors (i.e. "success" and "win" for a positive result) This allows us to reuse these feedback metaphors as a design token which is referenced throughout our components while all referencing the same file.

**Token**: \[textField] The short-code we use to refer to this metaphor (i.e.. #haptWin, #haptError, #haptWarn, etc.)


# Ω Audio Library

Sound is used to communicate with the user, provide (emotion identity style) for a brand, and improve the experience through sensory feedback. There are three primary types of sound "audio" communication… interface, musical, and voice.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fqx9fSP6jwPUdcSopmr3B%2Faudio.png?alt=media&amp;token=5d0054a9-293b-4857-bcd9-9d75079043ed" alt=""><figcaption></figcaption></figure>

## Resources

These resources are stored in the snippets library as pieces of code that can be used across the application and referenced through the token assigned to it in the snippets library.

{% embed url="<https://storage.googleapis.com/material-design/downloads/material_product_sounds.zip>" %}

## Properties

**Name**: \[textField] The human readable way we refer to this "Sound" in the dictionary

**Type**: \[selectList(Interface, Music, Voice; Interface)] Interface, Music, Voice

**Family**: \[selectList(Assets.Sound)] The sound family that this sound is in. The list of available sound families is pulled from the Assets > Sounds folder. Those sound families that have been uploaded into the system.

**Resource**: \[searchGallary(selectedFamily)] Every sound will have a source file that it references to provide the source file for the sound

**Metaphor**: \[textField] Every sound acts as a metaphor for something. Some sounds can carry multiple metaphors (i.e. "success" and "win" for a positive result) This allows us to reuse these sound metaphors as a design token which is referenced throughout our components while all referencing the same file.

**Token**: \[textField] The short-code we use to refer to this metaphor (i.e.. #audWin, #audAdd, #audWarn, etc.)


# Ω Time Dictionary

The duration that something will last. When an event is triggered after a certain amount of time the activity will take place or this could be the length of the activity itself. To keep consistency the design system uses design tokens instead of hard coded values for durations.

100 ms

300 ms

500 ms

1000 ms

1500 ms

2000 ms

etc


# Ω Interaction Dictionary

Here we outline all gesture types available in the app. We go into detail on each below and this is the general overview. Understand that every element, component, module etc. in the design system will need to carry the ability to use any of these gestures.

We'll define the base level defaults for all gestures on mobile and web/desktop here. These may be altered on an individual bases dependent on the situation, but whats outlined here will act as the default.

We'll start with some basics here and add to them over time. So just think of this area as the space we share the default ways we treat each of these gestures in the design system.

### Tap - Single

Design Token: gestTap

This is your primary action for any on screen object. Every element, component and module will carry methods of interaction with it and this will be the most common one by far. In most cases the activity is to navigate to a new screen or reveal a menu or sheet to choose an action to take. When we define each element and component we will document each gesture and the action it takes if part of a larger module.

### Tap - Double

Design Token: gestTapD

By default this is to open up the “Quick Actions” Modal for the item being interacted with. (ie double tap on a Lists Card will bring up the Quick Actions for that list). If you want to do something with an object the double tap is the method we use.

### Tap - Triple

Design Token: gestTapT

By default this is to toggle the tool tips On/Off for ALL components. A tooltip is meant for those that are still learning how the app works and what certain things do.

### Tap - Long

Design Token: gestTapL

By default this is to open up the Settings for the object being long-pressed. The settings are on a new screen that loads when a long-press is detected on an object.

### Press + Drag

The concept of a press and drag can be at different levels of an app.&#x20;

* At the element level where it may reveal a menu or something within the element.&#x20;
* The component level where it can reveal a hidden menu like we do on a lisItem to reveal buttons behind a ListItem, or a resize ability like we have with image editing.
* Screen level drags are intended for navigational purposes to reveal overarching concepts like a drawer with a swipe from the edge or moving between screens in an on-boarding carousel (previous/next).

#### Contextual Actions

When a swipe is used we reveal the top actions in a reveal for that object. The possible actions are any of those listed as Global Actions, but could include others. One example being, a To-Do list, where a user would like to check something off of the list with a simple left-to-right swipe of a list item. Here’s a good article explaining its use and best practices... <https://www.nngroup.com/articles/contextual-swipe/>

#### Swipe - Right to Left

Design Token: gestSwipeL

This type of swipe, by default reveals the tops action(s) for the object.

#### Swipe - Left to Right

Design Token: gestSwipeR

With a swipe left to right we will most often preform the top activity for the object. These activities could be: Check-off, Print Label, Comment, Favorite, Share, Assign, etc. In some situations we may have more than one activity. In these situations we reveal the menu choices, with a full swipe preforming the top activity. You can see an example of this in the Microsoft Outlook iOS app when interacting with an inbox message. NOTE: Not all options will be available to every object, they are contextually used.

#### Adding Functionality

When we have list items with the "More” icon, we still add left and right swipe to reveal. This adds to the functionality of the “More” with a quicker action for more advanced users.

### Transform

Changing an objects size, position, and rotation in response to a user generated action. Here's a good looking project that handles animation...&#x20;

{% embed url="<https://docs.swmansion.com/react-native-reanimated>" %}

#### Reaction to Scroll&#x20;

When any list is being scrolled we want to hide the header and footer along with the FAB. The interaction would be...

While scrolling

1. The header hides, moving up and fading away over 250ms
2. The footer and FAB moving down with a fade away over 250ms.
3. Once the list stops scrolling the process reverses (fade back into position).
4. Option to have a sticky minified app bar (Explained below).

This link isn't exactly what we're looking for but close. <https://medium.com/android-news/scroll-your-bottom-navigation-view-away-with-10-lines-of-code-346f1ed40e9e>

#### Sticky Minify on Scroll

In addition to the above we will want the option to minimize (make the app bar smaller) in the header on scroll. This is often used in webview browser mode, where the name of the page becomes really small at the top center and content will scroll behind it. The default should be to hide with this as an option.

#### Pull to Refresh

Want the ability to pull the list down to initiate a refresh of contents on any list globally. Here’s an example... <https://medium.com/enappd/refreshcontrol-pull-to-refresh-in-react-native-apps-dfe779118f75>

#### Lazy Load

Load list contents outside of the viewport so it appears to be an infinite list. The desired effect is to have list items in an infinite list where we won't see images/content loading within the view.

Sticky ListHeaders

For groupings with listheader dividers in the list (ie. User contacts in alphabetical order), sticky listheaders will be used similar to this... <https://docs.nativebase.io/docs/examples/StickyHeaderExample.html>

#### Shimmer Placeholders

For those that do show, or for an initial view where we don't have any data yet, we'd want to show activity using a shimmer effect. Most popular apps (Facebook, Instagram, Pinterest) handle it this way. Like this... <https://github.com/Ashwin-Mothilal/react-native-js-shimmer-placeholder>

#### Progress Indicator - Style

Default to a circular progress indicator, but we will want the ability to add in our own animated graphic gif/svg or a Flare (Rive) object for the indicator in the future.

The location of a progress indicator can be in a different location depending on the situation...

1. In a Button. The Icon and text of the button switch to a loading indicator and/or text upon press.
2. App Bar. When a list is loading or a search is being done the linear infinite loading version is displayed at the bottom of the app bar. This is the default method, with a more pronounced loading circular indicator being an option when we want to give more weight to the loading/searching.
3. On a Screen. Sometimes we will have dedicated success screens with loading feedback.

### TYPES

### Navigational

Helps the user move through the application easily with simple interactions with the screen and/or device.

* Tap - gestTap
* Drag - gestDrag
* Flick - gestFlick
* Swipe Left - gestSwipeL
* Swipe Right - gestSwipeR
* Swipe Up - gestSwipeU
* Swipe Down - gestSwipeD
* Double Tap - gestDblTap
* Pinch - gestPinch
* Long Tap - gestLongTap
* Shake - gestShake

### Action

A gestural move done as a shortcut to complete an action

* Draw Z -&#x20;


# Ω Icon Library

Used as a visual language to represent type, level, status, content, or adding context to supporting material. Icons are meant to be a simple, immediately recognizable, visual representations of an object or activity. Icons are visual cues that provide clues about how the user should use the app using metaphorical associations. Iconography is treated in the same way as an element with color, size, and spacing properties that are set outside of the library itself.

With any application there will be the need for some level of visual iconography. To provide a scalable, consistent, and easy way to move between different icon families we use an Icon Library. This ties a **metaphor**, the intent/idea behind an icon to a design token which can have one or more words associated with it. As an example, let's take the idea "metaphor" of a settings area. We can use the design token "#icnSettings" for that icon in every element, component, and screen across the application and then have the ability to swap out that icon, application wide from a single source of truth in the library. In the library we define each metaphor independently.

In the previous example of "Settings" let's say we used a gear icon, that same gear icon could be used to represent another metaphor for example "Motor". By having the two metaphors represented in the Icon Library as separate objects we can change out the "Motor" metaphor for a different visual without effecting the "Settings" icon throughout the app. This also gives us a way of swapping out an entire icon family (ie link a new Icon Library file) for another when you want to change the look and feel of the application.

### Properties

**Name**: \[textField] The human readable way we refer to this "Icon" in the metaphor library

**Family**: \[selectList(Assets.Icons)] The icon family that this icon is in. The list of available icon families is pulled from the Assets > Icons folder. Those icon families that have been uploaded into the system.

**Resource**: \[searchGallary(selectedFamily)] Every icon will have a source file that it references to provide the look of icon.

**Metaphor**: \[textField] Every icon acts as a metaphor for something. Some icons can carry multiple metaphors (i.e. "back" and "previous" for the left-arrow\.svg) This allows us to reuse these metaphors as a design token which is referenced throughout our components while all carrying the same look.

**Referenced By**: \[textArea.ReadOnlyCsvList] The list of elements and components that are referencing this dictionary

**Token**: \[textField] The short-code we use to refer to this metaphor (i.e.. #icnSettings, #icnAdd, #icnAccount, etc.)

### Base Metaphors

| **Name** | **Family** | **Resource**    | **Metaphor(s)**        | **Token** |
| -------- | ---------- | --------------- | ---------------------- | --------- |
| Back     | Base       | left-arrow\.svg | back, previous, return | #back     |

Design tokens all carry a unique name which is referenced to build the component. Here's an example of the icons that are referenced as part of the AppBar component for the base "default" theme.

Elements and components that have icons in them reference an Icon Dictionary. That dictionary is then used to tie each of the icon families, individual icon files to those elements and components. This allows us to add a new icon family, map them to the proper metaphors, and have different icon families in themes. And everything is correctly map to elements and components without ever modifying them.

#### Navigation - AppBar

| **Name** | **Resource**                               | **Metaphor(s)**        | **Token**   |
| -------- | ------------------------------------------ | ---------------------- | ----------- |
| Drawer   | 17-navigation / navigation-drawer-1.svg    | Menu, Drawer           | #drawer     |
| Add      | 27-remove-add / add-1.svg                  | Plus, Add              | #add        |
| Remove   | 27-remove-add / subtract-1.svg             | Cancel, Delete, Remove | #remove     |
| Back     | 97-arrows / arrow-left-12.svg              | Back, Previous, Return | #navBack    |
| Forward  | 97-arrows / arrow-right-12.svg             | Next, Forward          | #navForward |
| Close    | 02-status / close.svg                      | Close, Exit            | #close      |
| More     | 17-navigation / navigation-show-more-2.svg | More                   | #navMore    |
| Search   | 01-content-edition / search.svg            | Search, Find, Look     | #search     |
| Share    | 21-share / share-box.svg                   | Share, Send            | #share      |
| Settings | 03-settings / cog.svg                      | Settings, Properties   | #settings   |


# Ω Illustration Library

Used as a way to visual tell a story and add visual eye-candy to the layout. Illustrations are meant to support the purpose of the screen in an easy to understand visual narrative of an object or activity. Illustrations are visual cues that provide clues about how the user should interact with the screen using metaphorical associations.

With any application there will be the need for some level of visual story telling throught graphics and illustrations. To provide a scalable, consistent, and easy way to move between different illustration families we use an Illustration Library. This ties a metaphor, the intent/idea behind an visual to a design token which can have one or more words associated with it. As an example, lets take the idea "metaphor" of a security screen. We can use the design token "guard" for that illustration in multiple illustration canvas, and screen across the application and then have the ability to swap out that illustration, app wide from a single source of truth in the library. In the library we define each metaphor independently. In the previous example of "security" we might have used a visual with a padlock with a hand stating stop, along with other visual flares. That same illustration could be used to represent another metaphor for example "security". By having the two metaphors represented in the Illustration Library as separate objects we can change out the "Security" metaphor for a different visual without effecting the "guard" illustration hooks throughout the app. This also gives us a way of swapping out an entire illustration family (ie link a new Illustration Library file) for another when you want to change the look and feel of the application.

### Properties

**Name**: \[textField] The human readable way we refer to this "Illustration" in the metaphor library

**Family**: \[selectList(Assets.Illustration)] The icon family that this illustration is in. The list of available illustration families is pulled from the Assets > Illustrations folder. Those illustration families that have been uploaded into the system.

**Resource**: \[searchGallary(selectedFamily)] Every illustration will have a source file that it references to provide the look of the illustration.

**Metaphor**: \[textField] Every illustration acts as a metaphor for something. Some illustrations can carry multiple metaphors (i.e. "lock" and "security" for the ill-secure.svg) This allows us to reuse these metaphors as a design token which is referenced throughout our components while all carrying the same look.

**Referenced By**: \[textArea.ReadOnlyCsvList] The list of elements and components that are referencing this library

**Token**: \[textField] The short-code we use to refer to this metaphor (i.e.. #illSecure, #illFaceID, #illAccount, etc.)

### Base Metaphors

| **Name** | **Family**        | **Resource**   | **Metaphor(s)**       | **Token**  |
| -------- | ----------------- | -------------- | --------------------- | ---------- |
| Secure   | Security & Safety | ill-secure.svg | lock, security, guard | #illSecure |


# Ω Brand Library

This is where all of the brands assets exist.  Objects like logo's, wordmarks, mascots, branded pictorials, and animations.  Anything specific to the brand and it's image exists here and is referenced in the Graphic, Icon, Illustration, Animation etc. used in screen designs.

### Standardized Sizing

All assets are bound by the constraints of the canvas to keep content from being skewed when applied to parent objects.


# Core

The master files used to build screens

At the heart of the Design System is our "Core" kit containing Primitives, Elements, Components and Collections of these. Elements and Components are the equivalent to Atoms and Molecules in the [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) structure. *Note, we've added our own lower level of "Base (Particles)" and other segmentations like "Primitives" and "Collections" to add much needed layers to the Atomic Design structure when speaking to the way we actually need to organize things in the design system.*

## **Φ** Primitives

At both the Element and Component level we have the need to separate out parts of the object (Element or Component) into even more simplistic objects before combining them as an element or component. Primitives are how we classify these simple objects. A good example of a "Primitive" is a single Tab, which doesn't serve much of a purpose on its own, but when combined with other tabs, in an "Element" it is able to realize its purpose/function.

## **ε** Elements

The individual or combined primitive interface building block(s) used to build components in the design system. These objects typically don't have much use on their own, but when combined with other elements to form a component serve a defined purpose. Elements do not have any spacial spacing characteristics outside of its own borders, meaning its spacing to other objects on the screen. Those spacing choices are applied at the Component level. Elements are never used to build screens directly, they are strictly used to build Components, which are then used to build screens.

## **Θ** Collections

From time to time, to keep things logically organized in the design system we use a Collection. All this is, is a container for us to keep like items together. Know that a Collection can consist of Primitives, Elements and even Components. It's use strictly for organization purposes. A good example of how this is used in the design system is in how we structure a ListItem into Leading, Primary, and Trailing Collections that display in the same relative location in the ListItem but serve different purposes. In the design this provides for a single Component called ListItem, that has hundreds of variations based on the choices for Leading, Primary and Trailing.

## Components

**A component is an interface object built out of elements or by nesting other components, with a background surface and spacing, to serve as a reusable object in building interfaces (Modules & Screens).** They’re the Lego pieces we stack together in a ScrollView to design experiences. *Note that Components do not carry a Greek character.* Components provide focus to the screen designer by solving user needs when designing screens. This is the concept of an abstract component, where the focus is on the intent, as opposed to the interface. Think of an abstract component as the skeleton. And the manifestation at each breakpoint (phone, tablet, desktop, web, etc.), as the skin of the component handled by the Theme.

Components dynamically scale horizontally to fill the width of the screen, but in 99% of cases DO NOT scale in height. All components are designed to stack vertically on top of one another, with no vertical spacing between them, in a ScrollView. The ABLE Design Systems definition of a Component goes beyond those that you typically see in other frameworks like Bootstrap, Angular or Ionic which for the majority of screen objects, all stop at the Element level under our definition of an Element here.


# ε Elements

Elements are the graphical user interface (GUI) elements used by operating systems to offer a consistent visual language to interact with software and technology. These elements use a visual convention to represent information based on the OS it's on. These individual interface building blocks are used to build the components in the design system. Each element has their unique properties, such as typeface, color, size, and spacing, which make up the styles used in the design system.

## Φ Primitives

Simple interface objects that are used to construct elements are considered primitives. These are objects that can't be broken down further. On their own primitives don't really accomplish much, but when combines with other primitives and elements they become functional pieces of our design system. As an example, a single radio button acts as primitive element in the design, as it can’t be broken down further. It can toggle on and off, carries a few properties, but being such a simple object, it doesn't accomplish much on its own. But, when combined with other primitives and elements like a Label it then starts to gain value as a functional part of the design system.

We've set up a Kitchen Sink application that isolates all elements and components into their own screens to show the different variations of each.&#x20;

&#x20;

**Note:** The difference between an element and a component is that elements do not handle the spacing between elements, where components account for spacing, scaling, and breakpoint.


# ε AdaptIcon

Element: Set sizes for display with or without a status badge. Based off of the concept behind [Adaptive Icons](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive) introduced with Android 8.0, Adpicon's display a simple icon inside a variety of shapes.

[Styleguide Link](https://zpl.io/bey1LvW)

* Parent: [AdaptIcon - Bar](/core/overview/adapticon/adapticon-bar), ListItem, Multiple others
* Child: [Badge](/core/overview/badge), [Icon](/core/overview/icon), [AdaptIcon - Shape](/core/overview/adapticon/adapticon-shape)

## Properties

### Size & Shape

To account for multiple usecases the design system has established a set sizing standard for certain interface objects, with AdaptIcon being one of those. The size and shape of the AdaptIcon is set within the base level feeder of AdaptIcon - Shape.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FVWQwDyk98H0F3gHazwXO%2FSize.png?alt=media&amp;token=7680a888-631a-4c6e-a747-ba00320fb1c9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FdB364ktc4quq8hjVsgbP%2FShape.png?alt=media&amp;token=c2895c1d-c41e-4b88-8003-fc8b4d82f5ce" alt=""><figcaption></figcaption></figure>

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FxBpJWod4Q9ixY3174Ld1%2FBadge.png?alt=media&amp;token=dc59d0c0-a840-4741-9364-bffbe70dc689" alt=""><figcaption></figcaption></figure>

### Status

Most of the time an adaptIcon is simply shown as a metaphor for something, but it does have the ability to carry a badge as well. There may be situations where a service like email or alerts would be represented on the screen as an AdaptIcon so it will need the capability of sharing additional information in the form of a badge in those situations.

*


# Θ AdaptIconBar

Collection: A convenience wrapper around AdaptIcon cells for display in the bar component. See the [Bar - Structure](/core/components/content-bar) documentation to learn more about what goes into a Bar.

[Styleguide Link](https://zpl.io/ady9PnE)

* Parent: Multiple
* Child: [AdaptIcon](/core/overview/adapticon)

## Properties

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fnftz50OF07rWFhzoWDmo%2FAdaptIcon%20Bar.png?alt=media&amp;token=b3f7a809-01aa-4721-b2e4-ce84dc58aa9c" alt=""><figcaption></figcaption></figure>

### Size

* Small
* Medium
* Large
* XLarge

### Scrollable

**On** - The horizontal listing of adaptIcon scrolls off the right side of the screen and can be side-scrolled to reveal additional adaptIcons

**Off** - The width of the bar is locked to the width of the screen and additional adaptIcons wrap to the next row.

### Caption

**On** - The wording below the adaptIcon is present

**Off** - No wording is displayed below the adaptIcon


# Ω AdaptIconShape

Base: The shape and size of the AdaptIcon (element) is set at this level.

Adapticons have two layers a background surface and an icon. The background shape and standardized sizes are set in this area.

[Styleguide Link](https://zpl.io/2ZR1Bxl)

* Parent: [AdaptIcon](/core/overview/adapticon)

## Properties

### Shape

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FdB364ktc4quq8hjVsgbP%2FShape.png?alt=media&amp;token=c2895c1d-c41e-4b88-8003-fc8b4d82f5ce" alt=""><figcaption></figcaption></figure>

* Circle
* Squircle
* Rounded Box
* Square

### Size

The design system has set sizes for certain objects, adapticon is one of those with the following standardized sizes following the 8 point grid system. Note that the nested Icon element also follows a standardized sizing.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FVWQwDyk98H0F3gHazwXO%2FSize.png?alt=media&amp;token=7680a888-631a-4c6e-a747-ba00320fb1c9" alt=""><figcaption></figcaption></figure>

* Tiny
* Extra Small
* Small
* Medium
* Large
* Extra Large


# ε Avatar

Element: Set sizes for display with or without a status badge. Avatars focus on a subject, using a simple background. They often represent a user or a brand, and are commonly used to represent a user/brand in messaging formats like sms and email.

[Styleguide Link](https://zpl.io/bey1LvW)

* Parent: [Avatar - Bar](/core/overview/avatar/avatar-bar), ListItem, Multiple others
* Child: [Badge](/core/overview/badge), [AvatarShape](/core/overview/avatar/avatar-shape)

## Properties

### Size & Shape

To account for multiple use cases the design system has established a set sizing standard for certain interface objects, with Avatar being one of those. The size and shape of an Avatar is set within the base level feeder of Avatar - Shape.

### Overlay

An avatar can have an overlay of a badge to show either the user/brands current status (online, offline, busy, etc.) or an AdaptIcon to represent an action (Add Photo, Edit) that could be taken on the Avatar, with a tap/click.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FY1SJPycgrAyx8s95aHFK%2FBadge.png?alt=media&amp;token=ab1d893c-38d7-4e96-9ddf-fec9bec26cf2" alt=""><figcaption></figcaption></figure>

### State

The state of any nested object (ie. an element inside of a component) get's its state from the parent it is nested within. The state for an Avatar is normally dictated by its parent level container.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FuVH2s8p0aZvUFNDsPyz2%2FState.png?alt=media&amp;token=6c708a2a-94e3-47b3-89f6-160b4fb4d4d4" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus

## Usage

**Avatar w/ Icon** - Used when there is no photo provided by the user. In the future we may want to randomize the background color to be one of the palette colors. The Icon is a Label element in Icon only format.

* Background-Color: N300
* Foreground-Color: N500
* Foreground-Src:account-circle-1.svg (foreground is the same width/height as the background)

**Avatar w/ Initials** - Label:Text "Users First Name, first initial + Last Name, first initial capitalized"

* Background-Color: N300
* Foreground-Color: N500
* Foreground-FontSize: XS:R4, S:R3, M:R1, L:H3, XL:H1 (Based on Avatar Size)

**Avatar w/ Accessory** - When we need to infer an action on an avatar, like Add Photo or Edit, we can use an accessory in the lower right corner of the Avatar to display an AdaptIcon with an Icon.


# Θ AvatarBar

Collection: A grouping for design convenience for display in the bar component. The bar component can have different background surfaces (colors) so we don't include a surface here. See the [Bar - Structure](/core/components/content-bar) documentation to learn more about what goes into a Bar.

[Styleguide Link](https://zpl.io/aXyGkBK)

* Parent: Multiple
* Child: [Avatar](/core/overview/avatar)

## Properties

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FHdq6ZusgoXZ2dbZhghSL%2FAvatar%20Bar.png?alt=media&amp;token=c245f5a4-acfd-41a8-ac3d-8e230674e79c" alt=""><figcaption></figcaption></figure>

### Size

* Small
* Medium
* Large
* XLarge

### Scrollable

**On** - The horizontal listing of avatars scrolls off the right side of the screen and can be side-scrolled to reveal additional avatars

**Off** - The width of the bar is locked to the width of the screen and additional avatars wrap to the next row.

### Caption

**On** - The wording below the avatars is present

**Off** - No wording is displayed below the avatar


# Ω AvatarShape

Base: The shape and size of the Avatar (element) is set at this level. In the design system we've established set sizes and in the case of avatars shapes, for many aspects of the interface to ensure a consistency across the design.

[Styleguide Link](https://zpl.io/VDm741J)

* Parent: [Avatar](/core/overview/avatar)

## Properties

### Shape

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FgIm1EMUqDJaV2wbFNzkP%2FShape.png?alt=media&amp;token=975ad6e0-243f-4a4a-95e1-ba234d5a8653" alt=""><figcaption></figcaption></figure>

* Circle
* Squircle
* Rounded Box
* Square

### Size

The design system has set sizes for certain objects, avatar is one of those with the following standardized sizes following the 8 point grid system.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fr6US0M8uRJvImLkUS4Ja%2FSize.png?alt=media&amp;token=00dbaca0-3941-4546-bb89-500eac4fe36e" alt=""><figcaption></figcaption></figure>

* Extra Small (24dp)
* Small (32dp)
* Medium (48dp)
* Large (64dp)
* Extra Large (80dp)


# Φ Badge

Primitive: The possible styles and sizes of a badge are set here. A badge can be attached to many objects, icons, adaptIcons, Avatars, Labels (like within a button, app bar, tabs etc.)

[Styleguide Link](https://zpl.io/bzxkPPA)

* Parent: Multiple... [Badge - Usecase](/core/overview/badge/badge-use), [Icon](/core/overview/icon), [Label](/core/overview/label), [AdaptIcon](/core/overview/adapticon), [Avatar](/core/overview/avatar), [Button](/core/overview/button), [Tab](/core/overview/tab) etc.

## Properties

### Type

* **Value** - The use of a number to indicate the amount of actionable activities attached to the object. Note, the font used here is an exception in the design system and is set to a font-size of 8.
* **Color** - The association of a color to a status. IE. Red=Away, Green=Available

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FRVhRUEwbgJUfHupxiRjL%2FType.png?alt=media&amp;token=796db9a0-ee40-4aa3-ac36-e06160e946f1" alt=""><figcaption></figcaption></figure>

### Size

* Medium (12dp)
* Small (6dp)

### State

* Enabled
* Disabled

## Usage

A badge is an onscreen object linked to a notification/alert. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another element or component. A badge is both a notifier that there are items associated with an object and an indicator of how many items there are.

A badge is used to draw the user's attention to an object, or to emphasize that something may need their attention. For example:

* A "New messages" notification might be followed by a badge containing the number of unread messages.
* A "Shopping cart" badge showing the number of items in the cart.
* A "Status" badge on an Avatar might have an accompanying badge to indicate the users activity status at that moment.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FDB4a2LE4Ay78ZI9We08v%2FUsecase.png?alt=media&amp;token=72174125-cffa-48bb-ac70-3a028f72702a" alt=""><figcaption></figcaption></figure>

A badge signifies that with a tap of the object tied to the badge, additional information indicated by the badge is accessible. Badges are a common feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.


# Θ Badge - Usecase

Collection: The types of badges that can be applied as an overlay to Avatar, Image, AdptIcon or Icon. This is a convenience container for common badges used in applications.

[Styleguide Link](https://zpl.io/29d4p7d)

* Parent: Multiple (Icon, AdaptIcon, Avatar, Image, Label, Button, Tab etc.)
* Child: [Badge](/core/overview/badge)

### Types

* Alert
  * Value
  * Symbol
* User Status
  * Available
  * Busy
  * Unavailable


# ε Button

Element: A click/tap-able screen element used to build other elements and components, ie. Button Panel, ListItem with a right side button etc.

[Styleguide Link](https://zpl.io/bzd5mvA)

* Parent: [Button Panel](/core/components/button-panel), [Button Bar](/core/overview/button/button-bar), Multiple others
* Child: [Label](/core/overview/label)

## Properties

**Style**: The visual appearance (styling) of the object

<div align="center"><figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FaXNnWl9ibBGLG33ioHgL%2FStyle.png?alt=media&amp;token=7f205f69-6531-43f7-8474-4a927f4eba48" alt=""><figcaption></figcaption></figure></div>

* Primary (default)
* Secondary
* Dark
* Neutral
* Light

**Type**: A way to structure high level variations of an object into like collections

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fd8t7ONtVGdnG6IeV9ZL3%2FType.png?alt=media&amp;token=336a7704-6956-44dc-b62c-8fbeaef2e4ac" alt=""><figcaption></figcaption></figure>

* Fill (default)
* Line
* Text

**Shape**: The different border treatments for the surface of the object

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fd60hm6HY1yNDqWhvv9j1%2FShape.png?alt=media&amp;token=0bed8077-e962-4484-98a6-89d25a6e44ad" alt=""><figcaption></figcaption></figure>

* Rounded (default)
* Square

**Size**: The general size of the object in relation to others

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FG0HLXR0PvB4EqGWRF8HW%2FSize.png?alt=media&amp;token=ece1a93e-f4fb-4b43-b859-37c3dbb3aa3a" alt=""><figcaption></figcaption></figure>

* XSmall
* Small
* Medium (default)
* Large
* Dynamic: The width AND height can be set to any value, this differs from the others which have FIXED heights.

**State**: The possible visual appearances, which are also tied to functionality of the given object. ie Disabled and the object can not be interacted with and visually shows that.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FyThqOlvfJ9JIe6dFqZRt%2FState.png?alt=media&amp;token=e0fe0c5e-0bf3-4269-be9f-2e070f395c75" alt=""><figcaption></figcaption></figure>

* Enabled (default)
* Disabled
* Hover: Web/Desktop only
* Pressed
* Focus

## Usage

**Loading** - The ability to display a spinner on a button to represent action being taken to search or get information.


# Θ ButtonBar

Collection: A convenience wrapper around Dyamic Button cells for display in the bar component. See the [Bar - Structure](/core/components/content-bar) documentation to learn more about what goes into a Bar.

[Styleguide Link](https://app.zeplin.io/styleguide/6041aec8159a9b10c34d0182/components?cseid=610af54a9f2dc2bf6739db0b)

* Parent: Multiple
* Child: [Button](/core/overview/button)

## Properties

### Size

* Small
* Medium
* Large

### Scrollable

**On** - The horizontal listing of Buttons scroll off the right side of the screen and can be side-scrolled to reveal additional Buttons

**Off** - The width of the bar is locked to the width of the screen and additional Buttons wrap to the next row.


# Φ CheckboxCtrl

Primitive: A singular checkbox control with its possible styling, status (on/off) and states.

[Styleguide Link](https://zpl.io/aRnzW0p)

* Parent: [Checkbox](/core/components/form/checkbox) (Form Component), Multiple others
* Child: [CheckboxShape](/core/overview/checkbox/checkbox-shape)

### Properties

**Status** - The value given to the screen object, in this case a checkbox with possibilities of On, Off, Indeterminate.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FcVtrXMqaYuiPMim6Jo8B%2FStatus.png?alt=media&amp;token=badd2d16-63db-40c7-82ad-cad424e89df1" alt=""><figcaption></figcaption></figure>

**Style** - Supplied by the child level (Checkbox - Shape) this is the general appearance of the screen object. For now we have two styles, the normal appearance of the rounded corner checkbox which is the default, and a circular checkbox which is our customized appearance for a checkbox. Note: Additional appearance can be added to the Checkbox - Shape file to extend the styles at this level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Ff28WLyOAFrK0WlyoU7aH%2FStyle.png?alt=media&amp;token=2d424097-e85c-4678-95df-69601e6ef7ab" alt=""><figcaption></figcaption></figure>

**State** - The different appearances of the screen object based on interaction and the status of the screen object. Possible states are Enabled, Disabled, Focus, Hover, Pressed.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FsbFSh6xxYOR4XSnDhHpy%2FStates.png?alt=media&amp;token=34e702e5-ebeb-450d-86f0-41174a938783" alt=""><figcaption></figcaption></figure>

### Interaction

**Hitarea** - It's important to understand that the tappable/clickable area of the screen object being displayed may be small in appearance than the actual area you can interact with. This hitarea will normally be based off of the parents container for this primitive.


# Ω CheckboxShape

Base: The shape given to a checkbox and its status at the Primitive level.

[Styleguide Link](https://zpl.io/brAxME1)

Parent: [CheckboxCtrl](/core/overview/checkbox)

To start with we will have two shapes available, the default normal [squared off checkbox](https://zpl.io/brAxME1) (that you see most of the time) and a customized appearance of "[Circle Check](https://zpl.io/anBGkKv)". These "Shapes" are set in the child level area of "Base - Shape" for the parent Checkbox Primitive.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Ff28WLyOAFrK0WlyoU7aH%2FStyle.png?alt=media&amp;token=2d424097-e85c-4678-95df-69601e6ef7ab" alt=""><figcaption></figcaption></figure>

The appearance of the shapes and status (checked, unchecked, indeterminate) are all supplied from an icon in the icon library (Icons-Base > Icons > Primatives). They are labeled in the icons file as Checkbox On/Off/Indeterminate for the squared off and Selection On/Off/Indeterminate for the circular checkbox.


# ε Chip

Element: A compact elements that represent an input, attribute, or action.

[Styleguide Link](https://zpl.io/ble1PwG)

* Parent: [Chip - Bar](/core/overview/chip/chip-bar), [Field - Content](/core/overview/field/field-content)
* Sister: [Chip - Modal](/core/overview/chip/chip-modal)
* Child: [Label](/core/overview/label), [Icon](/core/overview/icon), [Avatar](/core/overview/avatar)

## Properties

### Type

These types mirror those outlined in MD for further information [see here](https://material.io/components/chips#types).

**Input** - When a single selection is being made from a collection of options usually consisting of a person, place or thing (tangable objects). This is used to represent complex info in a compact format. These Chips can be added to a collection and removed from the collection using th "clear" icon on the right side of the Chip.

* **Icon** (default) - The use of an Icon in the Leading position of the Chip to give context as to the subject of the Chip in a small space.
* **Avatar** - The use of an Avatar in the Leading position of the Chip to give a visual of the subject of the Chip (usually a picture of a person).

**Choice** - When a single selection is to be made from a collection of mutually exclusive options. When selected (Status:On) the appearance of the Chip changes to represent the choice. For example, "How would you like your stake cooked? a) Raw b) Rare c) Medium d) Medium Well e) Well Done". Choice Chips can also be used in canned responses to contain a sentence for quick one tap responses in chat.

**Filter** - When the user is presented with a collection of options where we want to allow them to select one to many options from the collection. When a Chip has an On status it will appear with a leading checkmark and have its appearance changed. For Ex. in a filter for T-shirt shopping you could select Large, and XLarge or in another situation select vehicle types of SUV or Car excluding Trucks, Vans, etc.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F6u1UBq5SPnI9R4qc3I9s%2FType.png?alt=media&amp;token=eb82bdcd-5dfa-46aa-8247-ce0f5bafaf2c" alt=""><figcaption></figcaption></figure>

### Style

**Filled** (default) - The Chip has a filled appearance in that the Chips surface is different from the background it is on.

**Line** - The Chip has an outline appearance with the surface of the Chip being the same color as the surface it is on top of.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F5f0kOgWxCXcYAZwtpySv%2FStyle.png?alt=media&amp;token=943022cf-814a-4551-873e-569c04203cb6" alt=""><figcaption></figcaption></figure>

### Status

**Off** - Shows visually that the Chip is turned Off or Inactive. For Ex. when off the Chip for a search filter would display the type of filter that can be applied by turning the Chip's status to On.

**On** - Shows that the Chip is active and being applied. For Ex. in search filters, different filtering methods can be turned on/off and those that are on will display the details of that filter in its contents and show that it is active by its color.

### State

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FuGD9YVcrMe7sNI9H1UvW%2FState.png?alt=media&amp;token=719f9115-6f67-4e16-a624-4f1de416b4e9" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus

### Size

Note: This will normally only be used in the design of components, but we want to ensure we keep to standard sizes throughout, thus this property.

**Base** (default) - The normal size of a Chip

**Field** - The size of a Chip when located inside of the Field element. We had to decrease the height of the chip slightly to comfortably fit within the Field.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FTZaBzP0Am4ohpgZhQDHo%2FSize.png?alt=media&amp;token=adfa4e7b-d33c-415f-a351-bf7a796c6df4" alt=""><figcaption></figcaption></figure>

### Metaphors

We use the metaphors (aka Icon Library) to standardize on the meaning of icons used in the application. In the Chip element we have two metaphors.

**Clear**: Icon-Library > Base > Act - Clear

**Choice**: Icon-Library > Base > Act - Choice Lite


# ε ChipBar

Element: A grouping for design convenience for display in the bar component. The bar component can have different background surfaces (colors) so we don't include a surface here.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fz1M7o74V8hNeYtAMimqK%2FBar.png?alt=media&amp;token=95f190be-ffb7-4726-92d8-80492cd29275" alt=""><figcaption></figcaption></figure>

Common chip bar layouts are located here and will be added to over time.

[Styleguide Link](https://zpl.io/a8DyPZQ)

* Parent: [Chiplist ](/core/components/form/chiplist)(Form Component), [Field - Content](/core/overview/field/field-content), Multiple Others
* Child: [Chip](/core/overview/chip)

## Properties

### Behavior

* **Fixed** - The control has a fixed width for display on the screen.
* **Scroll** - The control has an infinite horizontal scroll for its contents.

### Size

* **Base** - The default size, used in the majority of chip situations
* **Field** - When chips are presented inside of a field we use a slightly smaller size that fits within a field component.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FTZaBzP0Am4ohpgZhQDHo%2FSize.png?alt=media&amp;token=adfa4e7b-d33c-415f-a351-bf7a796c6df4" alt=""><figcaption></figcaption></figure>


# Φ ChipModal

Primitive Collection: The modal that opens in front of a chip when it is selected to provide additional details about the subject matter.

[Styleguide Link](https://zpl.io/boAY9QZ)

* Parent: [Chip](/core/overview/chip)
* Child: [Label](/core/overview/label), [Icon](/core/overview/icon), [Avatar](/core/overview/avatar), [Rating](/core/overview/rating)

## Properties

### Subject

* Person
* Place
* Thing

### Type

**Name** - A modal box with an Avatar/Graphic and the subject matter name with a right close icon.

**Name & Detail** - The subject matter name with additional details below

**Name & Rating** - The subject matter name with a rating below

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FrNV7w4WRrWgkITyRoMM3%2FModal.png?alt=media&amp;token=6f9a30fe-627d-444f-a120-47be6efb7ff5" alt=""><figcaption></figcaption></figure>

### Interaction

You can see the general interaction of how this modal appears, where it appears and how it is dismissed [here, down in the MD Expandable section](https://material.io/components/chips#input-chips). Note: When active all other app functionality is disabled until the modal is dismissed or the action is taken on the modal.

### Metaphor

We use the metaphors (aka Icon Library) to standardize on the meaning of icons used in the application. In the ChipModal we have a metaphors.

**Close**: Icon-Library > Base > Act - Clear


# Φ Divider

Primitive: The visual breaks used between objects to better define their border or organize content. Dividers are use in list at the bottom of each ListItem and App Bars to define their lower edge.

[Styleguide Link](https://zpl.io/V4Gey04)

* Parent: [ListItem](/core/components/list-item), [App Bar](/core/components/app-bar), Multiple others

## Properties

**Size:** The general size of the divider in relation to the others within the collection.

* Small
* Medium
* Large

**Style:** How the divider is stylized.

* Line
* Dash
* Dot

**State**

* Enabled
* Disabled
* Hover
* Focus
* Pressed


# ε FAB

Element: The Floating Action Button with set sizes for display with or without a status badge.

[Styleguide Link](https://zpl.io/b65y6Wq)

* Parent: [App Bar - Bottom](/core/components/app-bar)
* Child: [FABShape](/core/overview/fab/fab-shape), [Badge](/core/overview/badge)

## Properties

### Size

To account for multiple usecases the design system has established a set sizing standard for FAB's. The size and shape of the FAB is set in the base level feeder of FAB - Shape and passed to this level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FQxU1hCDOGf3w6J7vfL12%2FSize.png?alt=media&amp;token=60b374f7-3b6d-45f4-819b-b69844d64d0b" alt=""><figcaption></figcaption></figure>

* Tiny
* XSmall
* Small
* Medium
* Medium Extended

### Badge

Most of the time a FAB displays an icon as a metaphor for the primary action to take on the screens subject matter, but it does have the ability to carry a badge as well. For example, there may be a situation where the FAB acts as a shopping cart where the alert can serve as a cart count.

At the smaller sizes (Tiny, xSmall) of FAB the Badge only acts as a colored badge, meaning there is no numeric value or icon possible within the Badge. At the other sizes the numeric and icon badges are possible.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FCIN81cjC8GRhKINsPg11%2FBadge.png?alt=media&amp;token=d3b9dc5f-a78d-442c-bb74-247b2190d38b" alt=""><figcaption></figcaption></figure>

### State

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FkFjwtCJqJAUmesT3EY2L%2FState.png?alt=media&amp;token=57ef15fe-361d-461a-b697-2e3a85965b67" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus

### Style

The color of the FAB can be set to the following color display options...

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FMBHg5FJZ9grQnY5ykend%2FStyle.png?alt=media&amp;token=203dfcf9-872d-4621-bc37-33cc6280c408" alt=""><figcaption></figcaption></figure>

* Primary (default)
* Secondary
* Light
* Neutral
* Dark


# Ω FABShape

Base: The shape and size of the Floating Action Button (FAB) is set at this level. FAB's have two layers a background surface and a label (icon or icon with text). The background shape and standardized sizes are set in this area.

[Styleguide Link](https://zpl.io/brGrgpW)

* Parent: [FAB](/core/overview/fab)
* Child: [Label](/core/overview/label)

## Properties

### Shape

* Circle (default)
* Squircle
* Rounded Box
* Square

### Size

The design system has set sizes for certain objects, the FAB is one of those with the following standardized sizes following the 8 point grid system. Note that the nested Label (Icon) element also follows a standardized sizing.

* Tiny - This one acts as a really small indicator
* Extra Small
* Small
* Medium (Default)
* Medium Extended - This one allows both the icon and text

Note: For smaller FAB's the hit area (48dp), which is hidden remains larger.


# ε Field

Element: A form field that can accept text, a selection from a list of choices (SelectList) or the adding of objects (Chips) to a collection.

This is where we combine all of the feeder primitive and base level pieces to form the field element.

[Styleguide Link](https://zpl.io/boA1gkW)

* Parent: [Textfield](/core/components/form/textfield-1), [Selectlist](/core/components/form/selectlist), [Textarea](/core/components/form/textarea) (All Form Components)
* Child: [Field - Content](/core/overview/field/field-content), [Field - Helper](/core/overview/field/field-helper), [Field - Container](/core/overview/field/field-container), [FieldShape](/core/overview/field/field-shape)

## Properties

### Types

* Textfield - The field type used in the Textfield Form component for free-form text input
* SelectList - A field type used in the Selectlist Form component for selecting from a defined collection of choices.
* ChipList - A Field with chips contained inside of it, with a side-scroll to reveal additional chips. This field can have chips added to or removed from, using controls outside of the field. Ex. GA - Assign to where avatars are added to a collection field from a list of users.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FGiotTDjMknf5nW0kpLcL%2FType.png?alt=media&amp;token=deb44357-42e9-4e89-b07f-3f2f95e80f25" alt=""><figcaption></figcaption></figure>

### Validation

For the most part all validation should be handled inline. Meaning as soon as you've finished filling in a field, an indicator should appear in the field if there's an error. This makes fixing the error easy to identify and allows you to fix it immediately after the field has been completed.

Of course, there are some situations where inline validation won’t be possible and data entered will need to be sent to a server for verification.

Note: Do not validate the field until it is completed. We can give a positive feedback of real-time validation of say an email address once we detect the dot extension but don't give negative feedback along the way as they are typing in the value.

A good source of proper field/error handling is the NN/g, [here's a good starting point](https://www.nngroup.com/articles/errors-forms-design-guidelines/).


# Θ FormFieldLabel

Container: A Primitive collection for label text for form items. This collection feeds into field components (textfield, selectlist, textarea, etc.) as the consistent method for handling label content for fields.

[Styleguide Link](https://zpl.io/2vD1X45)

* Parent: [Field](/core/overview/field)
* Child: [Label](/core/overview/label)

## Properties

### Types

* Label left to describe the contents of the field
* Label right, often short and used to indicate that the content is optional
* Label left & right (both the above)


# Θ FormFieldHelper

Container: A Primitive collection for helper text that makes up the Field (element). This collection feeds into field components (textfield, selectlist, textarea, etc.) as the consistent method for handling helper content for fields.

[Styleguide Link](https://zpl.io/2vD1X45)

* Parent: [Field](/core/overview/field)
* Child: [Label](/core/overview/label)

## Properties

### Types

* Label left with text wrapping, for helper text that might need to wrap to a second line
  * Ex. Help: Choose a unique public @username
  * Ex Error: That username is already being used
  * Ex. Success: Your public profile: able.app/p/username
* Label right, often short and used for character counts on fields (no text wrapping)
* Label left & right (both the above)

### Interaction

Base on the input given to the field, this helper content may change to reveal additional contextual information, such as error, warning, success, or additional helper content. That content would return to its base state, when/if the contents of the input field are cleared (using the clear icon on the right side of the field or backing out the contents with the back arrow on the keyboard).


# Θ FieldContainer

Collection: The combining of the field content with message on/off ability. This primitive level collection feeds into the Field element.

[Styleguide Link](https://zpl.io/awdnmnM)

* Parent: [Field](/core/overview/field)
* Child: [Field - Content](/core/overview/field/field-content), [Label](/core/overview/label)

## Properties

### Types

**Textfield** - Message off for a field. Nested icon control and placeholder/input content.

**Textfield w/ Message** - Inline feedback message for a field upon an error, warn, success state. Examples can be seen at the Field level for Error, Warn, Success. A short message unually consisting of a few words like "invalid format". If we need to provide additional context that will be provided in the helper text area of the field, these messages are very short.

**SelectList** - Message off for a field. Nested icon control and placeholder/input content.

### Messages

* required
* invalid format
* doesn't match
* already exists
* good


# Θ FieldContent

Container: A grouping for design convenience for display in a field. This base level collection feeds into the Field element.

[Styleguide Link](https://zpl.io/V0zMJMO)

* Parent: [Field](/core/overview/field)
* Child: [Label](/core/overview/label), [Chip - Bar](/core/overview/chip/chip-bar)

## Properties

### Types

* **Textfield** - For short form text content that can exist as a single-line field (no wrapping and growing of the field height) or as a multi-line field that grows as additional lines of content are added [See MD](https://material.io/components/text-fields#input-types)
* **Textarea** - For long form text content with a fixed height field
* **Selectlist** - For defined sets of selectable content
* **Chiplist** - objects (chips) added to a collection in the field. Note: This can exist as a single-line (default) or multi-line field, the same as with textfield above. Thus resulting in chips that side-scroll (single-line), or wrap to the next line (multi-line).

### Input Field - Ornamentation

**Leading Icon** - Either to signify the type of input a field uses (ex. Calendar, bringing up a calendar modal), or as an alternative to the text label for a more minimal look.

**Trailing Icon** - Used at the end of a field to visually describe input methods as a metaphor (ex. Microphone for audio). Where the microphone is a tappable area that will initiate the audio collection method of entering content into the field.

### Content

**Placeholder** - To provide the user with some helpful context to what should exist in the field, and the format that it should be. For example, a phone number (555) 555-5555 as a placeholder to gentally suggest the format.

**Input** - The content that the user is adding to the field

### Auto Formatting

In situations like the phone number example from above, we can establish auto formatting to automatically give the contents the proper format with the ()'s as the user types just numbers into the field.


# Ω FieldShape

Base: A collection for the styling (shape) of the Field Background Surface is set here. This base level feeds into the Field element where it is combined with the other field containers to form the Field element.

[Styleguide Link](https://zpl.io/ag18MJ9)

* Parent: [Field](/core/overview/field)

## Properties

### Style

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FQbFbRzjdS9u2CsjlUvuu%2FStyle.png?alt=media&amp;token=56f3ac50-2935-453b-b66a-da047723fb48" alt=""><figcaption></figcaption></figure>

* Line - A single under line.
* Rounded - Rounded corner box
* Square - Squared of box
* Pill - Pill shaped background surface

### Type

**Base** (default) - The primary (normal) appearance of the field surface.

**Inverted** - Used when the field is used on a component with a dark background (ex. Gridview Photo - search)

### State

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FFDlJadiKbrOVmYkx1Swz%2FState.png?alt=media&amp;token=a32abc9f-4cc8-4819-b1e4-100d8e0e04ab" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus
* Error - When the field has invalid data in the field we visually display this using the Error state of the field background.
* Warning - When the field has data that is possibly invalid, or isn't valid yet (typing in a password at 2 characters where 9 are required)
* Success - To give positive feedback to the user upon fulfilling the requirement (typing in correct 9 characters of the password)


# ε Graphic

Element: Overlays, corner radius and any overlays or effects to the image happen at this level.

[Styleguide Link](https://zpl.io/VxA44QE)

* Parent: [ListItem](/core/components/list-item), [CardItem](/core/ks-modules/card-view/card-item), GridItem, Multiple
* Sister: [Illustration](/core/overview/graphic/illustration)
* Child: [Overlay - Top, Center, Bottom](/core/overview/graphic/overlay)

## Properties

**Radius** (Corner) - Gives the Graphic a corner radius treatment. The radius that we use are standardized to the following for all Graphics.

* None (0dp)
* Tiny (2dp)
* XSmall (4dp)
* Small (8dp)
* Medium (12dp)
* Large (16dp)
* XLarge (20dp)

**Aspect Ratio** - The design system has standardized the display of graphics to follow a set of consistent aspect ratios. The following ratios are the only ones used throughout the system. Each of these are listed in their Landscape orientation, but can also exist in Portrait format.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FjoC3OwUGanyWKevR9igU%2FAspect%20Ratio.png?alt=media&amp;token=4a748b6b-fa16-4158-b38b-6790be07c7f6" alt=""><figcaption></figcaption></figure>

* 1:1 (Square)
* 5:4
* 4:3
* 3:2
* 16:10
* 1.618:1 (The Golden Ratio)
* 16:9 (Video Size)
* 2:1
* 21:9 (Movie Theater Screen Size)

Note: Each of the placeholder images for these aspect ratios have a different appearance and have the ratio number in the lower right corner of the image to help in understanding the ratios at a glance.

**Overlay** - Provides the ability to include a layer of content over top of the graphic. This lets us add icons, text, banners, buttons on top of the graphic. There are three areas for overlays...

* **Top** - Docked to the top of the graphic.
* **Center** - Floating at the vertical center of the graphic
* **Bottom** - Docked to the bottom of the graphic

These overlays can be On/Off independent of one another.

**Treatment** - The ability to add different filters and fades to a graphic to alter the appearance of the underlying graphic. Note, all fades and shading for overlays are contained within the Overlay itself and not at this treatment layer. Think of it as three layers (from bottom to top) Graphic > Treatment > Overlay where each sits on top of the previous.


# ε Illustration (Canvas)

Element: The shape and size of the Illustration canvas. The canvas has the same aspect ratios and rules as the Graphic element. We separate illustrations from graphics because they are usually sectioned off in their own file and provided to an illustrator. This allows the team to stay organized.

[Styleguide Link](https://zpl.io/brGvn4X)

* Parent: [ListItem](/core/components/list-item), [CardItem](/core/ks-modules/card-view/card-item), GridItem, Multiple
* Sister: [Graphic](/core/overview/graphic)
* Child: [Overlay - Top, Center, Bottom](/core/overview/graphic/overlay)

## Properties

**Aspect Ratio** - The design system has standardized the the sizes of illustration canvas' to follow a set of consistent aspect ratios. The following ratios are the only ones used throughout the system. Each of these are listed in their Landscape orientation, but can also exist in Portrait format as well.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FMVMmyHNDdqHHEq2wOwNj%2FAspect%20Ratio.png?alt=media&amp;token=d2d48fa3-8c9a-47da-8868-ed3358b15506" alt=""><figcaption></figcaption></figure>

* 1:1 (Square)
* 5:4
* 4:3
* 3:2
* 16:10
* 1.618:1 (The Golden Ratio)
* 16:9 (Video Size)
* 2:1
* 21:9 (Movie Theater Screen Size)

Note: Each of the placeholder images for these aspect ratios have a different appearance and have the ratio number in the lower right corner of the image to help in understanding the ratios at a glance.

**Overlay** - Provides the ability to include a layer of content over top of the illustration canvas. This lets us text content, banners, buttons on top of an illustration. There are three areas for overlays...

* **Top** - Docked to the top of the graphic.
* **Center** - Floating at the vertical center of the graphic
* **Bottom** - Docked to the bottom of the graphic

These overlays can be On/Off independent of one another.

**NOTE:** This is the same functionality found in the [Graphic](/core/overview/graphic) element.


# Θ GraphicBar

Collection: A convenience wrapper around Graphics for display in the bar component. See the [Bar - Structure](/core/components/content-bar) documentation to learn more about what goes into a Bar.

[Styleguide Link](https://zpl.io/V4RQ1zy)

* Parent: Multiple
* Child: [Graphic](/core/overview/graphic)

## Properties

### Size

* Small
* Medium
* Large
* XLarge

### Scrollable

**On** - The horizontal listing of graphics scroll off the right side of the screen and can be side-scrolled to reveal additional graphics

**Off** - The width of the bar is locked to the width of the screen and additional graphics wrap to the next row.

### Caption

**On** - The wording below the graphic is present

**Off** - No wording is displayed below the graphic


# Θ Graphic - Status

Collection: A convenience container for the Status of a Graphic. These are used within the different Views to easily change the status of Cell, Card, Grid Items.

### Status

* **View** - The default normal state of an image/graphic
* **Select** - When in an action of selecting the image/graphic from a listing of graphics. With each tap the icon toggles the selection on/off.
* **Reorder** - When in an action of reordering in a collection of images in a grid, or cards/cells when in a collection of cards/cells.
* **More** - The ability to reveal additional actions that can be taken on the object.
* **Favorite** - The ability to Toggle the Favoriting of the object On/Off with each tap of the Action Icon.
* **Share** - The ability to bring up the share abilities for the object.


# ε Overlay

Element: Used as a placeholder container on top of a Graphic to give additional functionality (icon, banner, sash, adoption). There are three overlay locations within a Graphic: Top, Center, Bottom each with their own unique display types.

[Styleguide Link](/core/overview/graphic/overlay)

* Parent: [Graphic](/core/overview/graphic)
* Child: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Button](/core/overview/graphic/overlay/ol-button)

## Properties

### Location

We break the overlay into seven distinct areas of the graphic and organize the possibilities within each of those collections.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F1qdy0DxkTcqPyeZ48FfI%2FLocation.png?alt=media&amp;token=30495d0f-3975-40bd-b7cb-88050ab60bb4" alt=""><figcaption></figcaption></figure>

* **Top Left:** Docked to the top left corner of the Graphic
* **Top Center:** Docked to the top left & right corners of the Graphic
* **Top Right:** Docked to the top right corner of the Graphic
* **Center-Center:** Floating in the vertical & horizontal center of the Graphic
* **Bottom Left:** Docked to the bottom left corner of the Graphic
* **Bottom Center:** Docked to the bottom left & right corners of the Graphic
* **Bottom Right:** Docked to the bottom right corner of the Graphic

### Type

Each of the types is further broken down into their like collections at the Primitive level where we control the horizontal location of the objects contained within the Overlay.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FYR7bMhPMN35wxQZpC8hb%2FType.png?alt=media&amp;token=b4a44235-4c81-4420-b71a-9bbc214f8e2d" alt=""><figcaption></figcaption></figure>

* **Icon:** Normally used as actionable or informational areas that overlay (float above) the Graphic. A good example of an actionable icon would be the activity of Favoriting or Liking an image.
* **Button:** Used as the primary CTA "Call to Action" for the Graphic/Illustration it is overlaying.
* **Headline:** Used to provide words on top of a graphic or illustration.
* **Banner:** Primarily for information a banner can stretch the width of the Graphic or be a notch in the Graphic.
* **Sash:** A sash is a triangular piece that drapes across the corner of the graphic. This draws a bit more attention to the visual being displayed inside of the sash.
* **AdaptIcon:** Used to give context to a Graphic, possibly attributing it to a location represented by the AdaptIcon.
* **Avatar:** Used to attribute a Graphic to a person, pictured in the Avatar with an optional name beside it.
* **Stepper:** When multiple graphics/illustrations are represented in a single Graphic instance we show the content stepper indicator.


# Φ OL - AdaptIcon

Primitive: A collection used in the overlay (element) visuals, a sash is primarily informational, but can be interacted with as well.

[Styleguide Link](https://zpl.io/brG68rW)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)

## Properties

The horizontal location of the objects that go within the Overlay placeholder that lays on top of the Graphic element. This container is for all overlays (Top, Center, Bottom).

* Left (Top)
* Right (Top)
* Left (Bottom)
* Right (Bottom)


# Φ OL - Avatar

Primitive: Used in the overlay (element) visuals, a Avatar is primarily used to attribute the overlaying object to the user.

[Styleguide Link](https://app.zeplin.io/styleguide/6041aec8159a9b10c34d0182/components?cseid=61105e3618ce6315e3a8c2ab)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)

## Properties

The horizontal location of the objects that go within the Overlay placeholder that lays on top of the Graphic element. This container is for all overlays (Top, Center, Bottom).

* Left (Top)
* Right (Top)
* Left (Bottom)
* Right (Bottom)


# Φ OL - Button

Primitive: A collection used in the overlay of graphic (element). Buttons are used as a "Call to Action", aka CTA for the contents of the Graphic/Illustration.

[Styleguide Link](https://zpl.io/VqQqLlN)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay -  [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)

## Properties

### Location

The horizontal location of the objects that go within the Overlay placeholder that lays on top of the Graphic/Illustration element. This container is for all overlays (Top, Center, Bottom).

* Top Left
* Top Right
* Top Full Width (has padding left and right)
* Center Left (with vertical alignment, and left padding)
* Center Center (with vertical alignment)
* Center Right (with vertical alignment, and right padding)
* Bottom Left
* Bottom Right
* Bottom Full Width (has padding left and right)


# Φ OL - Icon

Primitive: A collection used in the overlay of graphic (element). Action icons are informational (ex. a title) or interactive (ex. favorite it).

[Styleguide Link](https://zpl.io/VqQeWxm)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)

## Properties

### Location

The horizontal location of the objects that go within the Overlay placeholder that lays on top of the Graphic element. This container is for all overlays (Top, Center, Bottom).

* Left (Top)
* Right (Top)
* Full width (Top) - Both Left & Right
* Left (Bottom)
* Right (Bottom)
* Full width (Bottom) - Both Left & Right


# Φ OL - Sash

Primitive: A collection used in the overlay (element) visuals, a sash is primarily informational, but can be interacted with as well.

[Styleguide Link](https://zpl.io/aXy8PzM)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)

## Properties

### Location

The horizontal location of the objects that go within the Overlay placeholder that lays on top of the Graphic element. This container is for all overlays (Top, Center, Bottom).

* Left (Top)
* Right (Top)
* Left (Bottom)
* Right (Bottom)


# Φ OL - Stepper

Primitive: A collection used in the overlay (element) visuals, a stepper is used to inform the presence of additional content and which piece of content you're on.

[Styleguide Link](https://zpl.io/ag1dzGA)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)
* Child: [Stepper Panel](/core/components/stepper-panel)

## Properties

### Location

The horizontal location of the objects that go within the Overlay placeholder that lays on top of the Graphic element. This container is for all overlays (Top, Center, Bottom).

* Left
* Center
* Right


# Φ OL - Banner

Primitive: A collection used in the overlay (element) visuals, a banner is primarily informational, but can be interacted with as well.

[Styleguide Link](https://zpl.io/boAeDkE)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)

## Properties

### Location

The horizontal location of the objects that go within the Overlay placeholder that lays on top of the Graphic element. This container is for all overlays (Top, Center, Bottom).

* Left (Top)
* Center (Top)
* Right (Top)
* Full width (Top)
* Center
* Left (Bottom)
* Center (Bottom)
* Right (Bottom)
* Full width (Bottom)

NOTE: The banner has a frosted glass appearance which is semi-transparent to show a blurred effect when placed over photos.


# Φ OL - Headline

Primitive: A collection used in the overlay of graphic (element). Headlines are words that are placed on top of a graphic or illustration.

[Styleguide Link](https://zpl.io/2vDe7ke)

* Parent: [Overlay](/core/overview/graphic/overlay) > [Graphic](/core/overview/graphic)
* Sisters: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon), [Banner](/core/overview/graphic/overlay/ol-banner), [Sash](/core/overview/graphic/overlay/ol-sash), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon), [Headline](/core/overview/graphic/overlay/ol-headline), [Button](/core/overview/graphic/overlay/ol-button)
* Child: [Headline](/core/components/headline)

## Properties

See the properties of headline as they are passed through to this level.


# Φ Icon

Primitive: Used in building element and components. An icon is used as a metaphor for an action, object, concept. Here we standardize the sizes for all icons used in the design system.

[Styleguide Link](https://zpl.io/VOyNZDY)

* Parent: [Label](/core/overview/label), Many others
* Child: [Badge](/core/overview/badge)

### Properties

**Size** - The general size of the element in proportion to the others in the collection.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FGHCDKL34gFl5p3yn1EKL%2FSize.png?alt=media&amp;token=17cff865-0a66-4590-b0b5-a62f048c6b38" alt=""><figcaption></figcaption></figure>

* XSmall (12dp)
* Small (16dp)
* SMedium (20dp)
* Medium (24dp)
* Large (32dp)
* XLarge(40dp)
* XXLarge(48dp)
* Huge (64dp)

**Badge** - Every icon has the possibility of having a badge in the upper right corner. This is commonly used with icons especially on tabs to represent new activity in that area of the app.

**State** - The different appearances of the screen object based on interaction and the status of the screen object. Possible states are Enabled, Disabled, Hover, Pressed, Focused.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FfLqMf9eWYUwEEb8hmii6%2FState.png?alt=media&amp;token=6a12e685-3b2d-4121-86cf-7410f543f7c2" alt=""><figcaption></figcaption></figure>

### Why

By constraining the icon sizes here we maintain a consistency throughout the application. Additional sizes could be added at this level to increase the options available at parent levels. Only the sizes listed here should be used in the application.


# ε InputStepperCtrl

Element: A control to allow the adding subtracting of a numeric value as either a floating modal or inline in another element or component (ex. ListItem).

[Styleguide Link](https://zpl.io/a7pK0qj)

* Parent: [Input Stepper](/core/components/form/inputstepper) (Form Component), Multiple others
* Child: [InputStepperPieces](/core/overview/inpstepper/inpstepper-pieces)

## Properties

### Type

**Plus-Minus** - The use of Plus and Minus symbols on the buttons to add and subtract values in the Input Stepper

**Arrows** - The use of Arrows as the symbos on the buttons to add and subtract values in the Input Stepper.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FjAo9vR6zT4ulsA8B08ga%2FType.png?alt=media&amp;token=62f1cbff-d42c-4c65-bd23-118f4aeab2af" alt=""><figcaption></figcaption></figure>

### Orientation

The direction of the Input Stepper in the interface, either displaying Horizontally with buttons to the left and right or Vertically with the buttons being on the top and bottom of the Input Stepper

* Horizontal
* Vertical

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FSAC7saKA81werOvSGU6a%2FOrientation.png?alt=media&amp;token=14404534-7342-4884-90fc-ef2b285213b5" alt=""><figcaption></figcaption></figure>

### Style

The visual appearance of the Input Stepper. Note, this changes both the background of the Input Stepper and a whole and the buttons surface left/right or top/bottom.

* Primary
* Secondary
* Light
* Neutral
* Dark

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FuoUHPNlMSaVEvKAPP1Mv%2FStyle.png?alt=media&amp;token=06e2cd53-1a89-4fd4-9a12-91b8477591f0" alt=""><figcaption></figcaption></figure>

### State

* Enabled
* Disabled
* Hover
* Pressed
* Focus

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F5RRIvlyS9Lqh4HYQWA4T%2FState.png?alt=media&amp;token=c8665740-291f-4608-8f49-7aeb83c6cceb" alt=""><figcaption></figcaption></figure>


# Φ InputStepperPieces

Primative: The pieces that go into the input stepper to step a numeric value up or down by a set amount.

[Styleguide Link](https://zpl.io/a7pK0qj)

* Parent: [InputStepperCtrl](/core/overview/inpstepper)
* Child: [Label](/core/overview/label)

## Properties

### Type

**Arrow** - Left/Right and Up/Down arrow icons on the buttons to increment the input stepper.

**Plus-Minus** - Plus and Minus icons on the buttons to increment the input stepper.

**Value** - For the center section of the input stepper which is where the current value is displayed.

### Style

**Primary** - The buttons in the primary color

**Secondary** - The buttons in the secondary color

**Light** - The buttons in a light color

**Neutral** - The buttons in a grey color

**Dark** - The buttons in a dark color

### Location

The location of the piece of the input stepper in relation to the whole.

* Left
* Right
* Top
* Bottom
* Center - The value is always at the center

### State

* Enabled
* Disabled
* Hover
* Pressed
* Focus

### Metaphors

We use the metaphors (aka Icon Library) to standardize on the meaning of icons used in the application. In the Input Stepper element we have six metaphors.

**Arrow Left**: Icon-Library > Base > Primitives > Prim - InpStep Left

**Arrow Right**: Icon-Library > Base > Primitives > Prim - InpStep Right

**Arrow Up**: Icon-Library > Base > Primitives > Prim - InpStep Up

**Arrow Down**: Icon-Library > Base > Primitives > Prim - InpStep Down

**Plus**: Icon-Library > Base > Primitives > Prim - InpStep Add

**Minus**: Icon-Library > Base > Primitives > Prim - InpStep Minus


# ε Label

Element: Words and iconography used widely across the design system to provide context to objects. Almost everywhere you see text or an icon we will use a label.

[Styleguide Link](https://zpl.io/aRRypYz)

[Kitchen Sink - Prototype](https://www.figma.com/proto/tl9bzV6Fos0qgkJELXcAuk/Kitchen-Sink?page-id=1147%3A103\&node-id=2265%3A214624\&viewport=317%2C48%2C0.77\&scaling=min-zoom\&starting-point-node-id=2262%3A202675\&show-proto-sidebar=1)

* Parent: Multiple
* Child: [Icon](/core/overview/icon), [Text Style](/overview/styles/typography)

### Properties

**Size** - The general size of the Labels content in respect to other Labels. These sizes are provided by the Theme's Typographical Scale with icon sizes to proportionally match those line heights.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FNmtj0a2SFq4hnI7gBy79%2FSize.png?alt=media&amp;token=9cd4382a-6e2f-4675-887c-d3058ce32a0f" alt=""><figcaption></figcaption></figure>

**Type** - The options for arrangement of the type to icon within the Label.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F5yp3PfjxPMENcvT5A5n4%2FType.png?alt=media&amp;token=ceaf486a-d591-4972-b902-7fd11f95baad" alt=""><figcaption></figcaption></figure>

* Text (only)
* Icon (only)
* Icon Left (of text)
* Icon Right (of text)
* Icon Top (of text)
* Icon Bottom (of text)

### Why

We use Labels to maintain consistency within the design system for Type and Icon sizes and the spacing between those objects. A change made to the spacing at this level can dramatically change the look of the entire app.


# ε ProgressCtrl

Element: The combination of a leading label, progress bar, and trailing label to inform the user about the progress of an activity being done. Progress indicators are also commonly referred to as spinners. Much of what is found in the [MD component](https://material.io/components/progress-indicators#usage) is available here.

[Styleguide Link](https://zpl.io/2jyQewm)

* Parent: [App Bar - Ext.](/core/components/app-bar/app-bar-ext), [Button](/core/overview/button) , [Icon](/core/overview/icon), Listview, Modal
* Child: [Progress Bar](/core/overview/progressindicator/progressbar)

## Properties

### Shape

* Linear
* Circular

### Labels

**Leading:** Used to give context to the progress that is being displayed. This leading label can be an icon, such as a search icon, or text copy like "Searching".

**Trailing:** Used to provide either a percentage of the progress that's represented with the visual or to provide additional context to what's happening

**Inner:** For circular indicators a label can be present inside the visual indicator (circle) which is used to give additional context to the percentage of progress.

**Below:** For circular progress indicators there is an area to provide additional context or a message related to the action that is being done. This message can change either on a carousel rotation of new messages or linked to the status of the progress. For example, after 50% completion display "You're half way there" or upon 100% "Complete".

### Usage

* At the center of the screen in a modal or in a blank ListView to indicate the loading of screen contents
* In an [App Bar - Extension](/core/components/app-bar/app-bar-ext) (above or below) that is revealed when a query is preformed and the screens contents are being refreshed.
* In place (replacing) of an action [Icon](/core/overview/icon) to indicate the action is being done.
* At the end of an infinite scroll list when additional content is being fetched.
* Integrated into a [Button](/core/overview/button) to indicate an action is being preformed after a press


# Φ ProgressBar

Primative: A visual indicator to express either a determined length of time an activity will take, an indeterminate amount of time, or the fact that a query or buffer is happening. Common uses are the loading of screen contents, video/audio files, the submission of a form, or a software update.

[Styleguide Link](https://zpl.io/Vx9Lo1k)

* Parent: [Progress Indicator](/core/overview/progressindicator)

## Properties

### Size

The relative size in relation to the other bars in the collection.

* Tiny
* XSmall
* Small
* Medium
* Large

### Shape

**Linear:** A bar that displays horizontally to indicate progress.

**Circular:** A bar that displays in a donut shape with the progress being shown in the shape

### Type

**Determinate:** Show how long a process will take. Used when the time to complete is known.

**Indeterminate:** When an unspecified amount of time is found. Used when the time to complete ISN'T known, or it isn't important to show the length of time remaining.

**Query:** During the time the app is communicating with the backend we show a visual indicator of that process in an animated dashed progress bar.

**Note:** As we know more about a process (loading, saving, etc.), the type can change from Indeterminate to Determinate.

&#x20;


# Φ RadioBtnCtrl

Primitive: A singular radio button control with its possible styling, status (on/off) and states.

[Styleguide Link](https://zpl.io/aw5761J)

* Parent: [Radio Button](/core/components/form/radiobutton) (Form Component), Multiple others
* Child: [RadioBtnShape](/core/overview/radiobutton/radiobutton-shape)

### Properties

**Status** - The value given to the screen object, in this case a radio button with possibilities of On or Off.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FJaoRiSbqAkohLFRg4LK3%2FStatus.png?alt=media&amp;token=4b6af2db-5902-4cad-8dd8-88c49b356365" alt=""><figcaption></figcaption></figure>

**Style** - Supplied by the child level (Base - Shape) this is the general appearance of the screen object. For now we have two styles, the normal appearance of the rounded radio button which is the default, and a circular checkbox which is our customized appearance for a radio button. Note: Additional appearance can be added to the Base - Shape file to extend the styles at this level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FausZUBKtKi0uXUYoxKtM%2FStyles.png?alt=media&amp;token=e6b4dee4-7aa9-4927-9d00-dac42039f077" alt=""><figcaption></figcaption></figure>

**State** - The different appearances of the screen object based on interaction and the status of the screen object. Possible states are Enabled, Disabled, Focus, Hover, Pressed.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FWXTAtqF8wvwP6CHwp73L%2FStates.png?alt=media&amp;token=c74b21bc-b278-4f29-a19f-3c839233cf63" alt=""><figcaption></figcaption></figure>

### Interaction

**Hitarea** - It's important to understand that the tappable/clickable area of the screen object being displayed may be small in appearance than the actual area you can interact with. This hitarea will normally be based off of the parents container for this primitive.


# Ω RadioBtnShape

Base: The shape given to a radio button and its status at the Primitive level.

[Styleguide Link](https://zpl.io/V0rdg0E)

Parent: [RadioBtnCtrl](/core/overview/radiobutton)

To start with we will have two shapes available, the default normal round [radio button](https://zpl.io/V0rdg0E) (that you see most of the time) and a customized appearance of "[Circle Check](https://zpl.io/anBGkKv)". These "Shapes" are set in the child level area of "Base - Shape" for the parent Radio Button Primitive.

The appearance of the shapes and status (on, off) are supplied from an icon in the icon library (Icons-Base > Icons > Primatives). They are labeled in the icons file as Radio On/Off for the squared off and Selection On/Off for the circular checkbox. Note, this is the same icon file used for the customized Checkbox version as well.


# ε RatingCtrl

Element: A collection of rate points (primitive) to form a scaled rating value for both interactive control and visual representation.

[Styleguide Link](https://zpl.io/29GBKQy)

* Parent: Multiple
* Child: [RatePoint](/core/overview/rating/ratepoint)

### Properties

**Size** - The general size of the element as a whole.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FtNjFixmHPLgDjjCdzMeU%2FSize.png?alt=media&amp;token=c060f68e-8d80-4cf0-81e1-912aa64cf1ed" alt=""><figcaption></figcaption></figure>

**Style** - Supplied by the child level (Base - Shape) this is the general appearance of the screen object. Note: Additional appearance can be added to the Base - Shape file to extend the styles at this level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FdtyFKVV3tSrmpJunI9VX%2FStyles.png?alt=media&amp;token=8abc8204-2e0c-4e30-941b-cd3d34ee1342" alt=""><figcaption></figcaption></figure>

**State** - The different appearances of the screen object based on interaction and the status of the screen object. Possible states are Enabled, Disabled.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FXFGAKXy5Gko0rrWsg9t1%2FStates.png?alt=media&amp;token=714ed187-0d98-40f8-9993-f941f961b91b" alt=""><figcaption></figcaption></figure>

### Interaction

**Hitarea** - It's important to understand that the tappable/clickable area of the screen object being displayed may be small in appearance than the actual area you can interact with. This hitarea will normally be based off the parents container for this element. [Here's an example](https://codepen.io/ashdurham/pen/HBxLK) of what we're looking for.


# Φ RatePoint

Primitive: A single point of a ratings (element) with its possible status.

[Styleguide Link](https://zpl.io/VQJrR84)

* Parent: [RatingCtrl](/core/overview/rating)
* Child: [RatePointShape](/core/overview/rating/ratepoint-shape)

### Properties

**Status** - The value given to the screen object, in this case a single step point inside of a series of steps (stepper) with status possibilities of On or Off.

**Style** - Supplied by the child level (Base - Shape) this is the general appearance of the screen object. For now we have two styles, the default star appearance of a single rate point, and a heart which is our customized appearance for a single step point. Note: Additional appearance can be added to the Base - Shape file (ie. diamond, tomato "rotten tomatoes style") to extend the styles at this level.

### Interaction

Rate Points act as a visual indicator of a rating as well as the point of interaction to provide a rating. A slide of the finger along multiple Rate Points will activate each of those that are rolled over in the series of rate points (Rating). So for example, if the finger starts at Rate Point 1 (far left) and is held and drug to Rate Point 4, 1-4 will have a status of On and Rate Point 5 will have a status of Off. Now lets say you start the finger at 4 and move down to 2, then only the first two Rate Points would be On and the remaining 3 Off.


# Ω RatePointShape

Base: The shape given to a rate point, used in the element rating.

[Styleguide Link](https://zpl.io/b6A8DDW)

* Parent: [RatePoint](/core/overview/rating/ratepoint)

To start with we will have two shapes available, the default star shape (that you see most of the time) and a customized appearance of Heart. These "Shapes" are set in the child level area of "Base - Shape" for the parent Rate Point Primitive.

The appearance of the shapes and status (on, off) are supplied from an icon in the icon library (Icons-Base > Icons > Primitives). They are labeled in the icons file as Star and Star Half for the default appearance and Heart/Heart Half for the custom option.


# ε SliderCtrl

Element: The combination of the slider bar with label(s) to provide context and value(s) for the selection(s). This control is then used within Components (mainly in a form) to collect input from the user.

[Styleguide Link](https://zpl.io/bPyYrjy)

* Parent: [Slider](/core/overview/slider) (Form Component)
* Child: [Slider Bar](/core/overview/slider/sliderbar), [Label](/core/overview/label)

## Properties

### Choice

The number of slider choices that are possible in the control, default to single.

### Label

How the control is labeled (leading and trailing labels) within the control.

### Size

The relative size of the slider control in respect to other slider controls.


# Φ SliderBar

Primitive: A visual bar that allows users to make selection(s) from a range of values with a press/click and drag of a knob.

[Styleguide Link](https://zpl.io/a7p4GWp)

* Parent: [SliderCtrl](/core/overview/slider)
* Child: [Slider Knob](/core/overview/slider/sliderbar/sliderknob), [Slider Indicator](/core/overview/slider/sliderbar/sliderindicator), [Slider Track](/core/overview/slider/sliderbar/slidertrack), [Ruler Track](/core/overview/slider/sliderbar/rulertrack), [ToolTip](/core/overview/tooltip)

## Properties

### Type

**Continuous**: Provide the ability to set a value(s) along a subjective range. The best example of this is volume control, where it isn't important to set to a specific value to a single value of volume, but a subjective range.

**Discrete**: The ability to set a specific value(s) that are snapped to based on allowed values, which can be optionally shown as tics along the track of the slider. With discrete sliders we normally display the selected value(s) as either a label or a floating tooltip above/below the selection knob(s).

### Choice

**Single**: Default, a slider bar with One value that it is setting.

**Dual**: A slider bar with Two values that can be set within the same bar.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FCjsF2sQarZybshe6f452%2FSlider%20Bar%20Double.png?alt=media&amp;token=883396b1-ebd8-4eb6-96e1-1e5048fdbcb9" alt=""><figcaption></figcaption></figure>

### Size

The relative size of the slider as a whole in relation to other slider options.

### Ruler

The ruler with its tic marks can be turned On/Off with this property. The default is Off.

### State

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FnEez5rUWWbZdnvSeZRdf%2FSlider%20Bar%20State.png?alt=media&amp;token=c609d4a5-2e1f-48cb-a2d5-d4110ac6e32a" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus

### Other Properties

**Range:** Min/Max values

**Divisions:** Amount between discrete values

**Tic Location:** On(default), Above, Below, Left, Right

**Orientation:** Horizontal (default), Vertical

NOTE: We do not cover labels for values at this level. That is cover one level up, in Slider.


# Ω SliderIndicator

Base: Shows the level(s) for the value(s) given on the slider track with a visual fill to the affected area.

[Styleguide Link](https://zpl.io/VDmzpOv)

* Parent: [Slider Bar](/core/overview/slider/sliderbar)
* Sisters: [Knob](/core/overview/slider/sliderbar/sliderknob), [Track](/core/overview/slider/sliderbar/slidertrack), [Indicator](/core/overview/slider/sliderbar/sliderindicator), [Ruler Track](/core/overview/slider/sliderbar/rulertrack)

## Properties

### Style

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FuPXrT9Ths8expEkQQxl8%2FLevel%20Shape.png?alt=media&amp;token=46eeb54a-9f54-4545-ac99-f7e4edd42687" alt=""><figcaption></figcaption></figure>

The indicator can be shown as On (Filled In) or Off (Hidden from view) based on the use case desired. By default this indicator is shown as On.

### Size

This is to account for the different sizes of slider track.


# Ω SliderKnob

Base: The base shape given to the grab knob of the slider. Here we define the different look and size of the knob.

[Styleguide Link](https://zpl.io/2GjEvWd)

* Parent: [Slider Bar](/core/overview/slider/sliderbar)
* Sisters: [Knob](/core/overview/slider/sliderbar/sliderknob), [Track](/core/overview/slider/sliderbar/slidertrack), [Indicator](/core/overview/slider/sliderbar/sliderindicator), [Ruler Track](/core/overview/slider/sliderbar/rulertrack)

## Properties

### Shape

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FdcAb0SDWoOAAvNk5jAP5%2FKnob%20Shape.png?alt=media&amp;token=276d1470-e44d-4b03-a497-ee46904ce209" alt=""><figcaption></figcaption></figure>

**Circle**: The default knob for the slider is a simple circle that can be drug to different locations along the track of the slider to set a value.

**Box**: A square with rounded corners

**Triangle**: A pointing triangle that could be used along with the tics (outside of the track).

**Rectangle, Pill, Pentagon**: Taller knobs to make the sliders grab area stand out a little more.

### Size

For different slider sizes there's the need for different sizes of knob to proportionally align with the size of the slider track.


# Ω SliderTrack

Base: The slider track that the knob, bar and ruler track/tics are on top of.

[Styleguide Link](https://zpl.io/anzK6Rv)

* Parent: [Slider Bar](/core/overview/slider/sliderbar)
* Sisters: [Knob](/core/overview/slider/sliderbar/sliderknob), [Track](/core/overview/slider/sliderbar/slidertrack), [Indicator](/core/overview/slider/sliderbar/sliderindicator), [Ruler Track](/core/overview/slider/sliderbar/rulertrack)

## Properties

### Style

The indicator can be shown as On (Filled In) or Off (Hidden from view) based on the use case desired. By default this indicator is shown as On.

### Size

This is to account for the different sizes of slider track.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Ff2ie0BLunGSvFE4wDl8A%2FTrack%20Shape.png?alt=media&amp;token=36b170b1-4594-4a43-bb71-3c3888a16c15" alt=""><figcaption></figcaption></figure>


# Φ RulerTrack

Primitive: The combination of the individual tics to form a series of tics along a track, similar to the tics on a ruler that indicate a specified value.

[Styleguide Link](https://zpl.io/bLJOLOd)

* Parent: [Slider Bar](/core/overview/slider/sliderbar)
* Sisters: [Knob](/core/overview/slider/sliderbar/sliderknob), [Track](/core/overview/slider/sliderbar/slidertrack), [Indicator](/core/overview/slider/sliderbar/sliderindicator), [Ruler Track](/core/overview/slider/sliderbar/rulertrack)
* Child: [Ruler Tick](/core/overview/slider/sliderbar/rulertrack/rulertics)

## Properties

### Style

There are many different looks and densities that can be set for the tic track. Multiple tic styles may even be mixed together within the same track (ie. circle major tics with minor ticks of line). These tics will align with the possible values that can be set along the slider both spacially and value wise (ie. the knob points directly at a tic of value 2.5, which based on the sliders possible values as an option).

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FlMwdRy5HeSEJ6OvqsVRZ%2FRuler%20Shape.png?alt=media&amp;token=e1467938-58bd-404c-936b-b7cf7dc7e4bd" alt=""><figcaption></figcaption></figure>

**None:** Default, no visual indicators on the Ruler Track.

**Circle, Square, Line:** Evenly distributed indicators along the Ruler Track.

**Line Major/Minor:** This is very similar to the appearance of a typical ruler with longer lines for whole numbers and shorter lines for fractional numbers.

### Size

To account for the different sizes of ruler tracks we give different sizes of the tics here.

### Location

Tic tracks can be displayed on/in the slider track as an overlay (with transparency) or above or below the track, which works nicely with a knob that may be pointing to the tic track for a specific value.

### Other Properties

Here are a few other things to consider when constructing this primitive.

**Orientation:** Horizontal, Vertical

**Width/Height:** value

**Direction:** Start, End

NOTE: This is the first use of ruler and we will use this in other elements and components outside of the slider element in the future.


# Ω RulerTic

Base: The shape and size of the individual tics that can optionally be shown in or around the slider track. Similar to the tics on a ruler these provide a visual for value increments along the slider track.

[Styleguide Link](https://zpl.io/a7p4G4E)

* Parent: [Ruler Track](/core/overview/slider/sliderbar/rulertrack)

## Properties

### Shape

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FxWtK3fJ2hzycsZkJIPJK%2FTic%20Shape.png?alt=media&amp;token=63599168-960f-4fbf-8c49-0be1360ccc25" alt=""><figcaption></figcaption></figure>

**Circle**: The default, circular shape that sits inside the ruler track.

**Box**: A square shape that sits inside the ruler track.

**Line**: A vertical line that sits inside the ruler track.

### Size

To account for the different sizes of ruler tracks we give different sizes of the tics here.

NOTE: This is the first use of ruler and we will use this in other elements and components outside of the slider element.


# ε Snackbar

Element: Snackbars provide brief messages about app processes on the screen. These normally do not require user interaction, and disappear from view after a short period of time.

[Styleguide Link](https://zpl.io/b654OBK)

* Parent: Multiple situations
* Child: [Label](/core/overview/label)

## Properties

### Action - Layout

A snackbar can contain a single action. "Dismiss", "Cancel", "Undo" actions are optional.

**None**: No actionable activities are associated with the notification

**Beside**: The default, when an actionable event is presented to the user. The action is positioned to the right of the message.

**Below**: For actions that have longer wording we can place the action below the message.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FaEJRxdujeEmqrcm06JgJ%2FType.png?alt=media&amp;token=2878cb12-60dd-4e98-ba39-cc953a21fe05" alt=""><figcaption></figcaption></figure>

### Message

The message should be short and to the point, taking up no more than two line in the snackbar.

### Behavior

Snackbars appear one at a time upon an event trigger, and don't require interaction from the user. They disappear from view automatically, with the time of display ranging depending on the use case but normally between 1000ms and 5000ms.

### Placement

ABLE's snackbars display at the top of the screen and should not cover other primary navigation objects. Please see [MD Snackbar placement](https://material.io/components/snackbars#placement) guidance, outside of their decision to position them at the bottom of the screen.


# ε Paginator

Element: A collection of page points (primitive) to represent a series of steps involved in a process and your progress.

[Styleguide Link](https://zpl.io/aRRyz5E)

* Parent: [Paginator Panel](/core/components/stepper-panel) (Form Component)
* Child: [PagePoint](/core/overview/stepper/steppoint)

### Properties

**Size** - The general size of the element as a whole.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FxkiN0yhb83iwdMoQWt97%2FSize.png?alt=media&amp;token=16867351-f465-450e-a832-3efcc2482511" alt=""><figcaption></figcaption></figure>

**Style** - Supplied by the child level (Base - Shape) this is the general appearance of the screen object. Note: Additional appearance can be added to the Base - Shape file to extend the styles at this level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FIZIHWJS7RcVjJ4zey1yp%2FStyle.png?alt=media&amp;token=68ce7490-e656-45f1-a50e-dd8c203b431b" alt=""><figcaption></figcaption></figure>

**Ornaments** - Each Step Point at a size of Large and above have the option to add ornamentation in the form of a Label Element, which can be text which is nice for placing numbers in each of the step points, or icons which could give a visual indicator of the task to accomplish at that step of the process when multiple step points are strung together into a Paginator.

**Status** - The status of each step point is given to the Paginator from its parent, turning on/off each step point as a visual indicator of where you are in the progression.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F84eoULDPngGUP3sXa0pP%2FPanel.png?alt=media&amp;token=8319ce4b-f8dc-400c-8d25-9cf94d09bd7e" alt=""><figcaption><p>Paginator Panel</p></figcaption></figure>

### Interaction

There is no direct interaction with Page Points or the Paginator Element, it acts as a visual indicator of where you are in a process (what Step of the process). This primitive is told by its parent the status of each of the page points in a series of steps (Pages), turning on and off the status of those steps. Possible parents to this element are a Screen (when a process involves multiple screens), an Image Carousel (Ex. Multiple photos of a product), Hero Carousel (Ex. Top CTA's for a section of the app).


# Φ PagePoint

Primitive: A single point of a Paginator (element) with its possible status.

[Styleguide Link](https://zpl.io/V13oQdX)

* Parent: [Paginator](/core/overview/stepper)
* Child: [PagePointShape](/core/overview/stepper/steppoint-shape)

### Properties

**Status** - The value given to the screen object, in this case a single page point inside of a series of steps (paginator) with status possibilities of On or Off.

**Ornament** - Each Page Point at Large and above have the option to add ornamentation in the form of a Label Element, which can be text which is nice for placing numbers in each of the page points, or icons which could give a visual indicator of the task to accomplish at that step of the process when multiple page points are strung together into a Paginator.

**Style** - Supplied by the child level (Base - Shape) this is the general appearance of the screen object. For now we have two styles, the normal appearance of the circular page point which is the default, and a square which is our customized appearance for a single page point. Note: Additional appearance can be added to the Base - Shape file (ie. diamond, tiangle) to extend the styles at this level.

### Interaction

There is no direct interaction with Page Points, it acts as a visual indicator of where you are in a process (what Step of the process). This primitive is told by its parent the status of each of the page points in a series of steps (Paginator), turning on and off the status of those steps.

NOTE: This is not meant to be an object that the user interacts with, it is truly a visual indicator.


# Ω PagePointShape

Base: The shape given to a page in the Paginator Primitive, used in the carousels to indicate which step of the series of steps the user is on.

[Styleguide Link](https://zpl.io/VxpM6Xg)

* Parent: [PagePoint](/core/overview/stepper/steppoint)

To start with we will have two shapes available, the default circle shape (that you see most of the time) and a customized appearance of square. These "Shapes" are set in the child level area of "Base - Shape" for the parent Page Point Primitive.


# Φ SwitchCtrl

Primitive: A singular control switch with its possible status (on/off) and states.

[Styleguide Link](https://zpl.io/bLvqy06)

* Parent: [Switch](/core/components/form/switch) (Form Component), Multiple others
* Child: [SwitchShape](/core/overview/switch/switch-shape)

### Properties

**Status** - The value given to the screen object, in this case a switch with possibilities of On or Off.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FhRflutuWZNXdQGUaYKkt%2FStatus.png?alt=media&amp;token=d607f0ec-c9ed-4818-9cc9-8df54bc2f06e" alt=""><figcaption></figcaption></figure>

**Style** - Supplied by the child level (Base - Shape) this is the general appearance of the screen object. For now we only have the base style you'd normally see a switch, and a rectangular option which is our customized appearance for a switch. Note: Additional appearance can be added to the Base - Shape file to extend the styles at this level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FmwjaLHfVAwaybb62dDeR%2FStyles.png?alt=media&amp;token=8033cae8-6b24-434e-9315-0503bf28d1bf" alt=""><figcaption></figcaption></figure>

**State** - The different appearances of the screen object based on interaction and the status of the screen object. Possible states are Enabled, Disabled, Focus, Hover, Pressed.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FaTLvdlZh4DuFGpGocTYu%2FStates.png?alt=media&amp;token=102706b4-9654-4bbf-bdcb-0579ff0190d7" alt=""><figcaption></figcaption></figure>

### Interaction

**Hitarea** - It's important to understand that the tappable/clickable area of the screen object being displayed may be small in appearance than the actual area you can interact with. This hitarea will normally be based off the parents container for this primitive.


# Ω SwitchShape

Base: The shape given to the pieces of a switch.

[Styleguide Link](https://zpl.io/2GPxAyY)

Parent: [SwitchCtrl](/core/overview/switch)

To start with we will have two shapes available, the default normal pill shaped switch (that you see most of the time) and a customized appearance of "Rectangular". These "Shapes" are set in the child level area of "Base - Shape" for the parent Switch Primitive.


# Φ Tab

Primitive: A single tab used in a group in the tab bar component.

[Styleguide Link](https://zpl.io/VkyG35q)

* Parent: [Tab Bar](/core/components/tab-bar)
* Child: [Tab - Active Indicator](/core/overview/tab/tab-activeindicator)

## Properties

### Types

* **Icon:** A tab with the visual being an icon
* **Text:** A tab with a word(s)
* **Icon Top:** A text and icon tab with the icon being placed above the text description
* **Icon Left:** A text and icon tab with the icon being placed to the left of the text description
* **Text Scale:** The same as Text but with the ability of the Tab to scale its width based on the text content. This is used in tabs that horizontally scroll.
* **Icon Left Scale:** The same as Icon Left but with the ability of the Tab to scale its width based on the text content. This is used in tabs that horizontally scroll.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FQN4wMOUgFrhoIqgSkAOz%2FType.png?alt=media&amp;token=1457a672-290f-4d7b-8099-2646c14f7c7e" alt=""><figcaption></figcaption></figure>

### Style

* Primary
* Secondary
* Dark
* Light

### Status

* **On:** The tab that has its contents being displayed.
* **Off:** The inactive tabs

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F7Iekqy3FqDNJjNS9tGfY%2FStatus.png?alt=media&amp;token=9474bf02-6e6e-407a-a6d3-44a53809732b" alt=""><figcaption></figcaption></figure>

### States

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FEQobWyH2Dgg383F7geYN%2FState.png?alt=media&amp;token=29d6dbf0-3b79-42a7-a808-b872a8359214" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus


# Ω TabActive

Base: A collection of visual indicators for an active tab.

[Styleguide Link](https://zpl.io/2pg4QON)

* Parent: [Tab](/core/overview/tab)

## Properties

### Type

* **None:** No visible indicator for the active status tab.
* **Line** (Top): A horizontal line that runs the top width of the active tab.
* **Line** (Bottom): A horizontal line that runs the bottom width of the active tab.
* **Box:** A border line that runs around the entire active tab.
* **Glow** (Top): The slight appearance of a glowing light from the top of the active tab.
* **Glow** (Bottom): The appearance of a glowing light from the bottom of the active tab.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FH9gizzt8UcEEEgkmE9jQ%2FActive.png?alt=media&amp;token=289b40b9-3ad9-49b6-a8cb-13ace8ef0056" alt=""><figcaption></figcaption></figure>


# ε ToggleCtrl

Element: The grouping of toggle button pieces that act together as a unit. This group is then treated as a single unit for dynamic resizing capabilities. Note, a single toggle control can exist on its own in a group. A toggle is also known as a Button Group in some frameworks.

[Styleguide Link](https://zpl.io/ag19AW0)

* Parent: [Toggle - Bar](/core/overview/toggle/toggle-bar), [App Bar Control - Pieces](/core/components/app-bar/abc-pieces), [Toggle Button](/core/components/form/togglebutton) (Form Component)
* Child: [TogglePieces](/core/overview/toggle/toggle-pieces)

## Properties

### Type

This is a pass-through of the two types (text, icon) from the toggle - pieces child level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F4L2qxRuSoiS0iDLwtemk%2FType.png?alt=media&amp;token=bd6dbb8f-37c2-4566-8937-89eb3990b54b" alt=""><figcaption></figcaption></figure>

### Style

The different options for the stylings from the toggle-pieces are passed through to this layer since they act as a unit. Note, different styles can not be mixed within a toggle grouping.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F04Gq8SGver4lulDf5bLP%2FStyle.png?alt=media&amp;token=3fa3be47-97fa-458f-94b9-f512199e24fc" alt=""><figcaption></figcaption></figure>

* Primary
* Secondary
* Light
* Neutral
* Dark

### State

This is here primarily as a design convenience. All states for a toggle are set at the toggle-pieces layer and get passed up to their parent.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FEk3iYQtuvbOQvhIabafS%2FState.png?alt=media&amp;token=730babd2-c898-4a27-bc26-19557ef4d627" alt=""><figcaption></figcaption></figure>

### Formats

**Multi:** The default type, used when there is more than a single toggle option. This type then has a "Choice" functionality depending on the intention of the grouping.

**Single:** In situations where we only need a single toggle on/off of a single button we use this option. An example of this in use could be with a mute button, where we'd want to display the status of "Muted" or "Unmuted" in an interface.

### Choice (Functional)

**Singular:** By default, the toggle button acts like a grouping of radio-buttons where only one option can be chosen. An example of a "singular" choice is a text editor list style where the list can be either bullet or numeric but not both at the same time.

**Multiple:** Setting the choice type to multiple allows multiple buttons to be selected (checkbox like) at the same time. An example of this choice "multiple" is a text editor with Bold, Italic, Underline options where multiple can be on/off at the same time.

***

**Possible Future Consideration**

### Orientation

**Horizontal:** By default, toggle buttons display horizontally across the screen and adjust their widths to the size of its parent container.

**Vertical:** In the vertical orientation text and icons continue to display upright, and the toggle buttons are just stacked vertically one on top of the next.


# ε ToggleBar

Element: A collection of toggles with layout padding and behaviors. The bar component can have different background surfaces (colors) so we don't include a surface here.

[Styleguide Link](https://zpl.io/adyA535)

* Parent: [App Bar - Ext.](/core/components/app-bar/app-bar-ext), [Form > Toggle Button](/core/components/form/togglebutton)
* Child: [Toggle - Ctrl](/core/overview/toggle)

## Properties

### Layout Types

The options available in the "Toggle" element are capable here.

**Solo** - A grouping of solo toggles. An example of this could be different filters on a search, where each toggle is a different filter type (price, weight, rating, etc.)

**Group** (default)- When the toggle buttons are pushed together and are presented as a grouping of buttons. By default, this type exists as a singular choice (toggle on) from the group, but can function as a multi-select button as well. An example of this would be with a text editor grouping with bold, italic, underline where none or all of the groups options can be selected.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FWc0uNqFQcXe6XcEKmfZ9%2FToggle%20Bar.png?alt=media&amp;token=807a6741-8525-4749-a83b-8c92637769d0" alt=""><figcaption></figcaption></figure>

### Style

* Text (default)
* Icon

### Behavior

* **Fixed** (default)- New toggles that don't fit within the fixed width, wrap to the next row, growing the height of the bar - toggle.
* **Scroll** - Toggles that don't fit within the defined width of the parent container scroll off the side of the bar - toggle (screen).


# Φ ToggleBtn

Primitive: A single on/off toggle button with the appearance of the button. Toggles can be set to act the same as a radio button (one selection at a time), or checkboxes (multiple selections). Most often seen in a group of toggle buttons (Toggle - Ctrl), they can however exist as a single button toggle on/off as well.

[Styleguide Link](https://zpl.io/bJLOyxr)

* Parent: [ToggleCtrl](/core/overview/toggle)
* Child: [Label](/core/overview/label)

## Properties

### Type

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F4L2qxRuSoiS0iDLwtemk%2FType.png?alt=media&amp;token=bd6dbb8f-37c2-4566-8937-89eb3990b54b" alt=""><figcaption></figcaption></figure>

**Text:** The text and text with icon either left or right.

**Icon:** The icon only appearance to a toggle button. This is used in many toolbar situations like with a text editor toolbar.

### Style

The same styles that are possible in the Button element are available here.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F04Gq8SGver4lulDf5bLP%2FStyle.png?alt=media&amp;token=3fa3be47-97fa-458f-94b9-f512199e24fc" alt=""><figcaption></figcaption></figure>

* Primary
* Secondary
* Light
* Neutral
* Dark

### Status

This property defines if the toggle is set to the "On" or "Off" version. Buttons that have a status of "on" show as fills and those that are "off" have a line outlining the button shape.

**NOTE:** The intent is to NOT have double lines between each ToggleBtn (as is shown in the design file) when they are grouped together. However, this would complicate the design file more than we'd like, so understand that the right side "lines" of the Left and Center "Locations" should be removed to achieve the desired effect of a single 1 dp line between each piece.

### Location

This is primarily for the multi-toggle option to define the left, center, and right toggles, but we also include the appearance of the toggle when a single toggle button is present.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FByFSozl5GEjqpT3GjVOZ%2FLocation.png?alt=media&amp;token=c43ab120-4f12-4368-b048-2844ca365c4f" alt=""><figcaption></figcaption></figure>

### Size

We have the need for two sizes in the Toggle, the first **Base** (default) size for most use cases and a shorter one "**Tiny**" for those situations where the Toggle shows up in other fixed height components like in the App Bar.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F8Ok9mmQzsVRGJ549ycVE%2FSize.png?alt=media&amp;token=048e68f3-c7e2-4599-be79-85152534d62d" alt=""><figcaption></figcaption></figure>

### State

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FEk3iYQtuvbOQvhIabafS%2FState.png?alt=media&amp;token=730babd2-c898-4a27-bc26-19557ef4d627" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus


# ε NavToggle

Element: A specialized toggle grouping intended for use within the NavTab - Bar to both navigate back in the history stack (left toggle button) and if enabled, expand horizontally to reveal additional tools.

[Styleguide Link](https://zpl.io/adyAvPn)

* Parent: [NavTab - Bar](/core/components/app-bar/navtab-bar)
* Child: [Toggle - Pieces](/core/overview/toggle/toggle-pieces)

## Properties

### Style

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FY9tNhEOMtGSYtKr6ouY3%2FNavToggle.png?alt=media&amp;token=b7e4b0c9-b868-4c51-8b40-dcce902577c7" alt=""><figcaption></figcaption></figure>

* Neutral (default)

### Quantity

The number of Toggle button pieces to include in the design. Each of these segments is meant to represent an activity that the user can take on the screens content. This might be to Add, Delete, Move, Assign, Print, Scan, Copy, etc. which are each represented in a toggle segment as an icon. Of course the far left segment is always reserved for the nav back.

## Interaction

In its resting state the NavToggle is either showing one Toggle (default) or two toggle segments. When two segments are displayed the intent is that the right side segment (with the more icon) can be tapped to expand the hidden segments. This action pushes other content (tabs) to the right. Upon taking any action other than in the Toggle, the NavToggle will collapse back to its resting state. The user can also press the more icon to collapse the NavToggle as well.

### Metaphors

We use the metaphors (aka Icon Library) to standardize on the meaning of icons used in the application. In the NavToggle element we have two metaphors.

**Arrow Left**: Icon-Library > Base > Navigation > Nav - Back (Left)

**More:** Icon-Library > Base > Actions > Act - More (Horz)


# ε Tooltip

Element: Shows info text when users press certain screen objects. Desktop it also includes hover and focus states. Tooltips display a text label identifying an object, such as a description of its function or further info.

[Styleguide Link](https://zpl.io/2vDWlrJ)

* Parent: [Slider - Ctrl](/core/overview/slider) (State:Pressed), Multiple others
* Child: [Label](/core/overview/label)

## Properties

**Arrow:** None, Top Left, Top Center, Top Right, Left, Right, Bottom Left, Bottom Center, Bottom Right

The arrow for the tooltip will point at the object that was tapped to reveal the tooltip. The spacing between the edge of that object and the edge of the tooltip is set at 4dp.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FhKpk1Aj559EjhxkGr5eG%2FArrow.png?alt=media&amp;token=d6f2fd20-e612-4f06-909c-80ef715e9612" alt=""><figcaption></figcaption></figure>

**NOTE:** The padding between the edge and label varies based on it's use. What's being shown (16dp) is the default. For example, with a slider that is displaying a single value the tooltip has padding of 8dp left and right.

### Additional Properties

**Max-Width:** The ability to set the width at which the contents will wrap to the next line. By default the Tooltip body hugs the contents. With this property set, it still hugs the content up to the max-width and once it reaches that width it will wrap.

## Behavior

A tooltip displays on tapping and holding a screen object (on mobile) or hovering over it (desktop). We display the tooltip as long as the press or hovers interaction takes place.

Upon a tap and release the tooltips displays for 1500ms, unless another action is taken by the user prior to end of that time period, in which it would disappear immediately on that new action. On open and close of the tooltip a 250ms grow/shrink fade transiton is used.

**Content:** The information within a Tooltip will wrap to the next line upon reaching the tooltips max width.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FQnvtBJKASp0YVxwSMuNk%2FExample%20-%20Slider.png?alt=media&amp;token=898af1de-9d1f-4f21-a4df-28101f22277c" alt=""><figcaption><p>Tooltip on a Slider</p></figcaption></figure>

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FMONELWCOXAwhzg63PCBd%2FExample%20-%20Textfield.png?alt=media&amp;token=12e5ecc9-674b-4227-83f5-9977f7b5519e" alt=""><figcaption><p>For additional information on fields</p></figcaption></figure>


# ε Caption

### Structure

**Cell:** In bars we have repeating objects that are organized into cells. This could be a single element like a graphic, or multiple objects (graphic, with multiple caption rows) that are combined to form the cell. Cells do NOT have visual borders around its contents.

**Card:** A container similar to a Cell but with a visually defined edge and padding between the edge and its contents. Cards and cells function the same and just carry different padding and visual appearance.

**Caption Rows:** We divide the cell/cards caption into vertically stackable rows. These rows can then be added/subtracted from the caption area depending on the use case. Inside each caption row we have three columns, the leading, primary, and trailing content collections.

Each of the Caption Rows are further divided into their general purpose ([Title](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-title.md), [Description](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-descript.md), [Support](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-support.md)) and divided into columns of content, the same as we have in other areas like the App Bar and ListItem. They are as follows:

**Leading Style:** The left most column in a caption row to contain things like icons, avatars, adaptions, graphics, labels, or even nothing at all. You can learn more [here](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/capcon-leading.md).

**Primary:** The primary content being displayed within a row, this is usually text copy but not always. You can learn more [here](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/capcon-primary.md).

**Trailing Style:** The far right column in the caption row used to contain things like actionable or visual icons, buttons, labels or nothing at all. You can learn more [here](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/capcon-trailing.md).


# Θ Caption - Description

Collection: A convenience container for the descriptions of a caption row, which is made up of leading, primary, and trailing containers. These are used in Cells and Cards as vertically stackable, modular pieces of the caption area. Please see [Caption - Definitions](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-def.md) for a run down on the structure and terminology used in captions.

[Styleguide Link](https://zpl.io/VDNyOEv)

* Parent: [CardItem](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/components/card/card-item.md), [AdaptIcon - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/adapticon/adapticon-bar.md), [Avatar - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/avatar/avatar-bar.md), [Graphic - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/graphic/graphic-bar.md), (AdaptIconItem, AvatarItem,GraphicItem???)
* Child: CapCol - [Leading](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-leading.md), [Primary](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-primary.md), [Trailing](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-trailing.md)

## Properties

### Size

The general size of the primary text used in the caption row.

* XXSmall

### Styles - Leading & Trailing

Here's where we bring in the columns (leading, primary, trailing) in order to customize the layout of the row. Those options available in the lower level caption containers for leading, primary, trailing are available to choose from.

**Leading Options**

* Nothing at all
* Icon
* Avatar
* AdaptIcon
* Graphic

**Trailing Options**

* **Nothing**
* **Subtext:** Used for short bits of information that are right aligned text.
* **Action:** An icon that is typically used as a More button to reveal additional actions that can be taken on the subject matter.
* **Super Action:** More of a primary action and most often used as an Add capability, this icon is slightly larger and carries a larger hit area.
* **Button:** A prominate primary action used to take an action on the subject matter.
* **Link:** Text based actionable content that will usually navigate to a new screen.


# Θ Caption - Support

Collection: A convenience container for supporting content of a caption row, which is made up of leading, primary, and trailing containers. These are used in Cells and Cards as vertically stackable, modular pieces of the caption area. Please see [Caption - Definitions](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-def.md) for a run down on the structure and terminology used in captions.

[Styleguide Link](https://zpl.io/aBPGy1m)

* Parent: [CardItem](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/components/card/card-item.md), [AdaptIcon - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/adapticon/adapticon-bar.md), [Avatar - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/avatar/avatar-bar.md), [Graphic - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/graphic/graphic-bar.md), (AdaptIconItem, AvatarItem,GraphicItem???)
* Child: CapCol - [Leading](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-leading.md), [Primary](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-primary.md), [Trailing](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-trailing.md)

## Properties

### Subject

This Support area is slightly different from the Title and Description areas of Captions. Here we are lumping multiple types (listed below) together into one area.

* **Link:** A word based clickable/tappable navigation point. This may be a persons name for a post, or a brand/store for a product. There are two confirations to the Link (leading and trailing) of the actual link with helper text either before or after the link.
* **Rating:** User provided score for the subject matter being presented, this could be a product or post review rating with the total score and the number of reviewers or viewers.
* **Stats:** To display statistics about the subject matter in a single row with pipes "|" separating each stat.
* **Symbols:** A series of icons that give the user quick bits of information based on the symbols being shown. For example, one of the symbols could indicate that a product has an offer on it and another could represent the amount remaining (icon with number).

### Size

The general size of the primary text used in the caption row.

* XXSmall

### Styles - Leading & Trailing

Here's where we bring in the columns (leading, primary, trailing) in order to customize the layout of the row. Those options available in the lower level caption containers for leading, primary, trailing are available to choose from.

**Leading Options**

* Nothing at all
* Graphic
* Icon
* Rating (stars)

**Trailing Options**

* **None**
* **Action:** Usually a "More" icon
* **Subtext:** Short bits of right aligned content
* **Super Action:** A more prominent action area usually used to add
* **Link:** A text based navigational link to another piece of content


# Θ Caption - Title

Collection: A convenience container for the title of a caption rows, which is made up of leading, primary, and trailing containers. These are used in Cells and Cards as vertically stackable, modular pieces of the caption area. Please see [Caption - Definitions](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-def.md) for a run down on the structure and terminology used in captions.

[Styleguide Link](https://zpl.io/2jqG8Gp)

* Parent: [CardItem](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/components/card/card-item.md), [AdaptIcon - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/adapticon/adapticon-bar.md), [Avatar - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/avatar/avatar-bar.md), [Graphic - Bar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/graphic/graphic-bar.md), (AdaptIconItem, AvatarItem,GraphicItem???)
* Child: CapCol - [Leading](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-leading.md), [Primary](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-primary.md), [Trailing](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/capcon-trailing.md)

## Properties

### Size

The general size of the primary text used in the caption row.

* XXSmall
* XSmall
* Small
* Medium
* Large

### Styles - Leading & Trailing

Here's where we bring in the columns (leading, primary, trailing containers) in order to customize the layout of the row.

**Leading Options**

* Nothing at all
* Icon
* Avatar
* AdaptIcon
* Graphic
* Label

**Trailing Options**

* **Nothing**
* **Action:** An icon that is typically used as a More button to reveal additional actions that can be taken on the subject matter.
* **Super Action:** More of a primary action and most often used as an Add capability, this icon is slightly larger and carries a larger hit area.
* **Button:** A prominent primary action used to take an action on the subject matter.
* **Subtext:** Used for short bits of text in a right aligned format.
* **Multi-Image/Avatar/AdaptIcon:** To show an association with the object being represented


# Θ CC - Leading

Collection: A collection of those objects that are displayed at the front of the Caption - Title, Description, and Support areas that then make up the vertically stackable, modular pieces of the caption area of Cells and Cards. Please see [Caption - Definitions](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-def.md) for a run down on the structure and terminology used in captions.

[Styleguide Link](https://zpl.io/2Z37kAd)

* Parent: Caption - [Title](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-title.md), [Description](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-descript.md), [Support](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-support.md)
* Child: [Icon](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/icon/icon.md), [Label](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/label.md), [AdaptIcon](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/adapticon/adapticon.md), [Avatar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/avatar/avatar.md), [Graphic](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/graphic/graphic.md)

## Properties

### Type

* None
* Icon
* AdaptIcon
* Avatar
* Graphic
* Label: Used when we want to have a row with the "Label: Value" appearance where the "Value" would be in the Primary area.
* Rating: Used when we want to show a ranking for the object.

### Size

* XSmall: Excluding the options for Icon, Avatar, and AdaptIcon as they are too small to show much at that size
* Small
* Medium
* Large


# Θ CC - Primary

Collection: A collection of  those objects that are the primary content of the Caption - Title, Description, and Support areas that then make up the vertically stackable, modular pieces of the caption area of Cells and Cards. Please see [Caption - Definitions](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-def.md) for a run down on the structure and terminology used in captions.

[Styleguide Link](https://zpl.io/an3GR7x)

* Parent: Caption - [Title](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-title.md), [Description](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-descript.md), [Support](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-support.md)
* Child: [Icon](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/icon/icon.md), [Label](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/label.md)

## Properties

### Type

* **None**
* **Title:** Within a caption this is the primary message and will stand out more than the subtext content.
* **Subtext:** Within a caption this is the secondary or suporting content. This could be the teaser for a post, or a description for a product.
* **Link:** A text based navigation to another area, using the visual indicator color to show that the link is clickable.
* **Stats:** Primarily numeric based statistics for properties that exist with the object. For example, Rating, Favorites, Views, Follows etc.
* **Symbols:** Used as a visual indicators to provide additional context to properties that exist with the object. For example, Favorited, Liked, Comments.

### Size

The sizes here relate to the size of the text content with the XSmall being the smallest in the design system and working your way up the type scale with each new level. Each size can be in the Regular or Bold style of font.

* XSmall
* Small
* Medium
* Large
* XLarge
* XXLarge

### Bold

Simply an On/Off to give the Title copy bolding ability. This may be depricated in the future.


# Θ CC - Trailing

Collection: A collection of  those objects that are displayed at the end of the Caption - Title, Description, and Support areas that then make up the vertically stackable, modular pieces of the caption area of Cells and Cards. Please see [Caption - Definitions](https://github.com/able-app/docs/blob/57a78e2f25b43d8f5e72755f1e2740d12a2998ee/controls/%CE%B5%20elements/caption/cap-def.md) for a run down on the structure and terminology used in captions.

[Styleguide Link](https://zpl.io/amRvymA)

* Parent: Caption - [Title](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-title.md), [Description](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-descript.md), [Support](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/caption/cap-support.md)
* Child: [Icon](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/icon/icon.md), [Label](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/label.md), [AdaptIcon](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/adapticon/adapticon.md), [Avatar](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/avatar/avatar.md), [Graphic](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/graphic/graphic.md), [Button](https://github.com/able-app/docs/blob/26fef4dd60d663f49dd419ed514bd2b8d643c5ed/controls/%CE%B5%20elements/button.md)

## Properties

### Type

* **None**
* **Action (Icon):** Most commonly used as a "More" button to bring up additional actions you can take on the subject matter.
* **Super Action (Icon Larger):** A more prominent actionable area commonly used for the primary activity associated with the subject matter, for example adding to the shopping cart.
* **Subtext:** Right aligned text copy that is usually very short copy, as not to interfer with the Title or Subtext copy that is more of a focus.
* **Subtext + Action:** Vertically stacked right aligned text copy with an actionable icon below (usually a More icon). Note, the hitarea for the Icon would extend over top of the subtext right.
* **Link:** A text based navigation to another area, using the visual indicator color to show that the link is clickable.
* **AdaptIcon:** Used to attribute the object to a collection represented by the iconography used in the AdaptIcon.
* **Avatar:** Used to attribute the object to the person in the Avatar.
* **Graphic:** Many different purposes, but can be used to show a brand or collection.
* **Button:** A more visually prominent actionable area that can be used as the primary activity of the subject matter.
* **Multi-AdaptIcon:** When there's the need to show multiple adapticons.  These have a slight overlap with the adapticon next to it, with the far left being the one in front.
* **Multi-Avatar:** When there's the need to show multiple people associated with the object.  These have a slight overlap with the avatar next to it, with the far left being the one in front.
* **Multi-Image:** When there's the need to show multiple images.  These have a slight overlap with the image next to it, with the far left being the one in front.


# Components

**An interface object built out of elements or by nesting other components, with a background surface and spacing, to serve as a reusable object in building interfaces (Modules & Screens).**&#x20;

Components are the Lego pieces we stack together in a ScrollView to design experiences.  Components provide focus to the screen designer by solving user needs when designing screens. This is the concept of an abstract component, where the focus is on the intent, as opposed to the interface. Think of an abstract component as the skeleton. And the manifestation at each breakpoint (phone, tablet, desktop, web, etc.), as the skin of the component handled by the Theme.

Components dynamically scale horizontally to fill the width of the screen, but in 99% of cases DO NOT scale in height. All components are designed to stack vertically on top of one another, with no vertical spacing between them, in a ScrollView. The ABLE Design Systems definition of a Component goes beyond those that you typically see in other frameworks like Bootstrap, Angular or Ionic which for the majority of screen objects, all stop at the Element level under our definition of an Element here.

*Note that Components do not carry a Greek character.*

We've set up a Kitchen Sink application that isolates all elements and components into their own screens to show the different variations of each.


# App Bar

The primary control for navigation and actionable activities in the application.

[Styleguide Link](https://zpl.io/an3L6pv)

## Properties

### Leading Style

Taken from the App Bar Containers, ABC-Leading collection the leading style allows us to change up the appearance of the far left column of content.

* Icon (default)
* Text
* Avatar
* Button
* Logo (1:1 ratio)
* None
* Wordmark - Only used in situations where there is NO center content.
* Title - Only used in situations where there is NO center content.
* Toggle - Only used in situations where there is NO center content.
* Input - Only used in situations where there is NO center content.

### Center Style

Provided to us from the ABC-Center collection the center style gives us the ability to control the center column of the App Bar. The contents of this center column expand to fill the space, where the Leading and Trailing styles hug their contents.

* Title (default)
* Search
* Toggle
* Wordmark
* Logo (1:1 ratio)
* None

### Trailing Style

Supplied by the ABC-Trailing collection this provides us with the ability to alter the styling of the right side column of the App Bar.

* Icon (default)
* Text
* Button
* Avatar
* Logo
* None

### Location

We've divided the App Bar into two distinct vertical areas, Top for those at the top of the screen and of course Bottom for those at the bottom of the screen.

<div><figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FMhPZe06HMxTwSOJPTWmk%2FApp%20Bar%20-%20Top.png?alt=media&amp;token=7e6a97ff-6c09-420c-a5b2-0b62e041a742" alt=""><figcaption><p>App Bar - Top</p></figcaption></figure> <figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FMR4KBTgsa14zZwKKqC3b%2FApp%20Bar%20-%20Bottom.png?alt=media&amp;token=59977d30-dfff-417b-b1a7-f221cf76a92d" alt=""><figcaption><p>App Bar - Bottom</p></figcaption></figure></div>

### Interaction

When the user scrolls content within a list, we will want the app bar to gracefully hide itself to provide the best experience, since the intent of the user is the contents of the screen and not navigating or taking action on that content, while they are scrolling. When we detect that the scroll has stopped the app bar top/bottom will gracefully return to view. This should be a property of the component that defaults to on, but can be turned off. [Here's an example from MD.](https://material.io/components/app-bars-top#behavior)

### Extension

An extension can be added to the app bar to provide an additional layer of navigation, sorting, filtering, or actionable activities. With app bars that dock to the top the extension is below the main App Bar, and when docked to the bottom the extension is above the main App Bar.

### Surface

Depending on the screen the background surface of the component can change (Light, Dark, Keyboard)

### Keyboard Extension - App Bar

When the keyboard is engaged we still have the need for a primary navigation and actions, so the app bar that would normally be at the bottom of the screen now gets attached to the top of the keyboard as an extension. Note, all of the functionality of the keyboard extension for an app bar is the same as the app bar - bottom/top. The only change is to it's bottom spacing and background surface which is matched to the color of the keyboard.

### Types

* **NavAct** - The base level App Bar, with Navigation on the far left with actionable icons and usually presented with a prominent CTA (Call-to-Action) on the right side. Normally used when the subject matter of the screen is a listing of many objects or a variety of subject matter, like in a dashboard.
* **NavTitleAct** - A variation of the base NavAct that's used when the subject matter is a specific object and the user is trying to take some sort of action on that object like, adding, editing, moving, deleting, etc. where the Title informs them of that action.
* **NavSearch** - Used when in a listing of objects and one of the primary actionable events is to search for something. Note, the search ability could also be a little more hidden under an icon (like in the base NavAct) and revealed to display the search input.
* [**NavTab**](/core/components/app-bar/navtab-bar) - Similar to NavAct but in place of the action icons we have tabs that can exist in an infinite side scroll. The tabs are normally used as the primary sections of the application and the navigation is there to navigate the user through the history stack, much like a desktop browser does with tabs.
* **Mini** - When scrolling through content and in cases where we want to provide a little bit of information but don't wish to take up a lot of screen real estate. This is quite common with webview content.


# Θ ABC - Leading

App Bar Control (ABC)

Collection: The App Bar Container (ABC) is a collection of those navigation and action controls on the left side of the app bar, that typically function as navigational objects in the app.

[Styleguide Link](https://zpl.io/aw5Qv5D)

* Parent: [App Bar Top & Bottom](/core/components/app-bar)
* Children: [ABC - Pieces](/core/components/app-bar/abc-pieces)

## Properties

### Controls

The number of objects in this section of the app bar. Those objects are referenced in "Type". Each of these controls can be any "Type", however they usually follow a consistent pattern of the same "type" after the second control.

### Type

The general theme for the collection of controls, most often this type will be the same as the far left object in the collection. These "Types" are supplied by the abc-pieces collection.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FMIZD0nh6OIfRFfXo5ulT%2FABC%20-%20Leading.png?alt=media&amp;token=144c12fa-eab5-4f09-80ad-787f741c0a7c" alt=""><figcaption></figcaption></figure>

* **Icon** (default) - Most often used as the primary navigation to move back in the applications history stack (previous screen). In this Type the far left object is for that navigation and the other icons can serve as actions to be taken on the screens contents.
* **Text** - As an alternative to an icon for the back navigation you can also use text. This is most commonly used in situations where you want to "Close" the screen which is typical of a screen with a form.
* **Avatar** - Often used to change the users status or go to their profile/account
* **Button** - A more prominent actionable button with lesser actionable icons to the right.
* **Logo** - A 1:1 ratio brand-able area with actionable icons to the right
* **Wordmark** - A wider brand-able area (21:9) with actionable icons to the right
* **Title** - A left aligned screen title with actionable icons to the right.
* **Toggle** - Used as an alternative to tabs when there are limited collection types that could be switched between. For example, people in three groupings, Family, Friends, and Community.
* **Input** - Typically used for search, you'd opt to show the search field as opposed to hiding it behind a search icon.
* **NavToggle** - Used to navigate back in the history stack (previous screen). A secondary action can also be used to expand the toggle button group to reveal additional options (usually actions that can be taken on the screen contents).
* **None** - When we don't want to show anything left aligned in the app bar.

## Functionality

This collection allows us to organize the app bar into its different sections for easier customization on-the-fly through the properties of the App Bar component.


# Θ ABC - Center

App Bar Control (ABC)

Collection: The App Bar Container (ABC) is a collection of the content that is in the center (horizontally) of the app bar. This content can be informative or actionable depending on the type of app bar.

[Styleguide Link](https://zpl.io/2vjgx55)

* Parent: [App Bar Top & Bottom](/core/components/app-bar)
* Children: [ABC - Pieces](/core/components/app-bar/abc-pieces)

## Properties

### Type

The general theme for the collection of controls, most often this type will be the same as the central (most centered) object in the collection. These "Types" are supplied by the abc-pieces collection.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fe9OwEb3cLfkdm9Hc65dk%2FABC%20-%20Center.png?alt=media&amp;token=5092e280-42e9-4821-ad3f-26a2611ecf82" alt=""><figcaption></figcaption></figure>

**Title** (default)- Informational content to give the user the name/action of the screen they are on.

**Wordmark/Logo** - Normally for branding purposes with the wordmark just being a wider reserved width of 21:9 and the logo set to a 1:1 ratio.

**Search** - When one of the primary abilities of the screen is to search its contents we will opt to show the search field as opposed to hiding it behind a search icon.

**Toggle** - When the contents of the screen can be divided into sub sections we can drop in a toggle button group.

**Tab Bar** - The ability to navigate to the primary areas of the application in a side-scrollable (optional) grouping of tabs.

**None** - Of course the app bar could also set the center area to nothing at all.

## Functionality

The ABC - Center expands to fill the full width of the App Bar, where the Leading and Trailing sections hug their contents.


# Θ ABC - Trailing

Collection: The App Bar Container (ABC) is a grouping of primarily actionable buttons, icons, and text that are feed from the App Bar Pieces and make up the App Bar.

[Styleguide Link](https://zpl.io/2pRr5zN)

* Parent: [App Bar Top & Bottom](/core/components/app-bar)
* Children: [ABC - Pieces](/core/components/app-bar/abc-pieces)

## Properties

### Controls

The number of objects in this section of the app bar. Those objects are referenced in "Type".

### Type

The general theme for the collection of controls, most often this type will be the same as the far right object in the app bar. These "Types" are supplied by the abc-pieces collection.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fn4xEBn3BROjfSMR3Ih2d%2FABC%20-%20Trailing.png?alt=media&amp;token=7eb0ab79-c48f-4614-a69a-ad5551a8287d" alt=""><figcaption></figcaption></figure>

* **Icon** (default) - Often referred to as Action Items, these typically are the primary actions that the user would take on the screens contents.
* **Text** - An alternative to icon use and often used for actions that cancel or clear an activity.
* **Button** - A more emphasized action to draw more attention
* **Avatar** - Often used to change the users status or go to their profile/account
* **Logo** - Branding purposes
* **None** - When we don't want to show anything right aligned.


# Θ ABC - Pieces

App Bar Control (ABC)

Collection: The individual actionable buttons, icons, and text that are grouped together in sections (ABC Leading, Center, Trailing) for use within the App Bar.

[Styleguide Link](https://zpl.io/V13kP6w)

* Parent: [App Bar Top & Bottom](/core/components/app-bar)
* Children: [Icon](/core/overview/icon), [Label](/core/overview/label), [Button](/core/overview/button), [Avatar,](/core/overview/avatar) [Graphic](/core/overview/graphic), [Toggle](/core/overview/toggle), [Field](/core/overview/field), [Tab - Bar](/core/components/tab-bar), [NavToggle](/core/overview/toggle/navtoggle)

## Properties

### Type

All of the options available for use in the App Bar are collected here.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F2ADQRGRhceSWjibhdYbt%2FABC%20-%20Pieces.png?alt=media&amp;token=58450db3-7bb5-481d-a044-51293afcfcb0" alt=""><figcaption></figcaption></figure>

* **Icon** - The default for most controls in the app bar, the display of an icon that serves as a metaphor for an activity.
* **Text** - Used interchanabily with icons to spell out the action being preformed when the control is interacted with.
* **Button** - To provide a little more visibility to th action we can use buttons in the app bar with text and/or icons.
* **Avatar** - When we'd like to use an avatar instead of an icon. This is commonly used for a users profile or settings area navigation.
* **Logo** - This can be a logo for branding purposes or an illustration.
* **Wordmark** - A little larger space for a graphic or illustration to exist.
* **Title** - Used to provide content to the current screen or to inform of an action that is being taken on the screens contents.
* **Toggle** - Used as a filter or as an alternative to tabs.
* **Input** - Most often used as a search field but it could take on other text input concepts.
* **Tab Bar** - A horizontally scrollable tab bar for navigating to the primary sections of the application.
* **NavToggle** - An expandable grouping or single toggle button that has the primary purpose of navigating back in the history stack, with a secondary action to expand-and-reveal additional tools available in the newly revealed toggle buttons.




---

[Next Page](/llms-full.txt/1)