About Sistent
-Hello !
Color
-Color
- -+ These colors have been structured into tokens that represent specific + values. These tokens will be arranged in a package to enable referencing + and importing it into editor files for use. The tokens are grouped into + categories to represent the ones that are directly usable in designs and + those that are to be aliased by tokens used in designs. This makes for + proper structure and consistent usage of color across all proposed and + implemented designs. The only exception for usage of primitive tokens + might be when applying color to illustrations. +
+ +Primitive Category
+ ++ Since this category will not be used directly in designs, it does not + have any role descriptions. +
+Brand Colors
+Greyscale Colors
+Function Colors
+Semantic Category
+ ++ The semantic category has been sub-categorized into background, text, + brand, border, and functions. Possibility for a few more categories + exists as the need arises. +
+Background Colors
+Text Colors
+Border Colors
++ Having a color palette is one thing, and organizing it into usable + content for cross-functional teams is another. Suffice to say that + without proper structure, a good tonal palette can still be unproductive + if the target audience have no clue what to do with it. We have + organized color into a consumable form to ensure efficient and accurate + application in order to achieve desired results. +
+ +Tonal Palettes
+ ++ To attain the desired level of variation across themes, we will have to + utilize more than just the hues on a brand’s color palette. It therefore + becomes necessary to employ the use of tonal pallets. Tonal palettes are + variations of a given hue comprising of the hue’s tints and shades. + Armed with this array of harmonious colors, it becomes much easier to + combine them to actualize different UI elements or states, website pages + and various products across any desired number of themes. +
++ These hues are organized into different levels of brightness and + arranged in ranges of 10-90 (total of nine) for neutrals and 10-70 + (total of seven) for brand colors, as well as all other hues in our + color system. This structure will enable cohesive combinations across + all implemented designs. With a base hue of ‘code-40’, tints and shades + are derived to complete the spectrum range.. These color selections are + further supported by alert colors that complement the base Keppel Green. + Blue, Green, Yellow, and Red hues were chosen for this. +
+Basic Colors
+ ++ We have also structured colors with relatable nomenclature to ensure + easy identification and deployment. These names also conveniently double + as one of the parameters used in identifying the color group using color + tokens. Any one of them must be included in token creation because they + specify what it is that is being named making for easier identification. +
+Background Colors
++ Background colors serve as layer that can house text content, UI + elements, and other layers with background colors. It may include but is + not limited to specifications like default, hover, pressed, selected, + disabled, and brand. +
+Text Colors
++ Text color addresses color specifically for the purpose of text that is + added as content to the user interface. It is organized into default, + secondary, and tertiary sequence. There can also be text color for brand + color and other alert colors. +
+Icon Colors
++ Icons as the name implies is color used to represent icons throughout + designs. Apart form the default and secondary icon colors, they can also + be organized with brand color as well as the four alert colors. +
+Border Colors
++ Border colors refer mostly to strokes, lines and outlines on an outline + button for instance that will need to have specific color to complement + designs. They are organized into default, strong, and brand and may also + include the alert colors as well. +
+ +Token Specification
+ ++ As highlighted earlier, tokens can serve as a bridge between design and + development and, as such, are key in order to ensure a seamless workflow + for all interested parties. While these token values can be very + specific, like what color to use on the background color of a button, + the text color in a given use case, or even a border color, it is also a + flexible yet precise and consistent way of carrying out user interface + tasks. +
+Tokenized Colors
++ To make this work, we cannot rely on individual hex codes for every use + case throughout products and interfaces since it will create much less + friction going forward. +
++ To this end, we have suggested a set of color tokens that define a color + as well as how it may be used, which can also change automatically based + on context. +
+The Role of Color Tokens
++ While the colors on the tonal palette can be referenced individually, in + order for a consistent system to be created, it is crucial that only our + top-level color tokens (e.g., text-default) are used instead of base + tokens from the palette (e.g., charcoal/code-90) in both code and + designs. +
+Color Schema
++ The color schema is a pattern where parameters are stringed together in + a particular order. Each of these parameters has predictable names that + describe a specific color. Individual parameters combine to form a token + system. This is the schema that we have used to arrive at the various + parameters: +
++ Type: + This is the only required parameter, and it specifies the thing that + color is being added to. The basic types we have identified are + background, text, icons, and border. +
++ Color Role: + Since each color in a user interface has a specific meaning, it is + better to represent hues based on how they are used as opposed to a + value. For instance, a default accent color can have the parameter + -brand. However, this can represent different values of that brand color + if there is a shift in tones depending on the theme or for any other + related reason. +
++ Prominence: + This serves to enhance the visual emphasis of UI elements used in + relation to each other. Some of the parameters in the type schema + support -secondary and -tertiary prominence parameters, while some other + parameters support -default, -strong, and the list could go on. +
++ More categorization can be added to the schema as the need arises. + However, it is crucial to ensure that there are sufficient use cases to + arrive at this conclusion in order to avoid dormant or idle parameters + being created. +
+Color
+Color
+ ++ Colors when accurately applied can be a potent tool that enables + designers and developers to implement solutions with speed and + efficiency. Here are a couple of things to keep in mind. +
++ In order to achieve the aim of maintaining a consistent and engaging + digital interface across Layer5, whether it is in the form of websites, + applications, or experiences, a detailed explanation of color + application along with practical use cases is needed. To this end, the + following concepts help to shape a suitable identity as we aim for + balance throughout our User Interface. +
+ +Introduction
+ ++ When the color palette is accurately put to use, it ensures a + recognizable consistency in Layer5’s array of digital interfaces and + products. This is made possible due to adherence to well defined rules + which though specific, are also flexible and give ample room for + professionals to curate appealing solutions across themes. +
+ +The Basics
+ ++ Let’s start with a few of the common terms that we will come across + frequently, as understanding what they mean will inform us of applicable + use cases and proper procedures that should not be overlooked. +
+Theme
++ By definition, a theme is a cohesive and consistent look and feel for a + product. This consistent look can be achieved with the use of harmonious + color palettes, legible fonts and layout patterns. Currently, sistent + outlines specifications for light and dark themes. +
+Value
++ A value is the unique visual attribute assigned to a token through the + use of themes. This could range from hex codes to rgba values which are + used to highlight specific colors in any given instance. We highly + recommend that no exact values be referenced anywhere in the design in + order to avoid errors and ensure consistency. Instead, tokens should be + used to curate and implement the reusable values. More on tokens next. +
+Tokens
++ Tokens can be regarded as a shared language between design and + development for communicating detailed information about how to build + user interfaces. Generally, a rule of thumb is to represent the context + (background, text, component), role (success, warning, brand, inverse), + and modifier(s) (secondary, tertiary, hover) in a string of text that + will represent set values gotten from the colors in the color palette. +
+Role
++ Roles are parameters that specify the context that colors are being + applied to and while different roles can share the same value, the token + structure means that they will have different use cases. These values + can be different though depending on the current theme. +
+ +Color Anatomy
+ ++ Sistent’s default themes are derived from Layer5’s color palette of + which the Keppel Green color serves as the dominant primary action color + with subtle shifts in value to enable the required visual accessibility + as recommended in the WCAG (Web Content Accessibility Guidelines) 2.1 + compliance standards. It is also sometimes combined with Saffron Yellow + and Caribbean Green colors accentuate some other parts of the user + interface like CTA buttons as well as illustrations and icons. +
++ The Charcoal color as well as another accent grey serve as neutrals to + complement these greens and create harmonious implementations. These + five colors combine to form a foundation for the color system. +
+Layer Hirarchy
+ ++ For backgrounds and surfaces, colors in the neutral palettes are used + cohesively to create depth and spatial associations. This hierarchical + pattern defines the logic of how colors stack on top of each other in a + UI when implementing Sistent themes. This logical pattern goes beyond + just themes but is also built across components and accounted for in + suggested color tokens as well. +
++ There is an alternate relationship between the layer hierarchy in both + light and dark themes: +
-
+
- + In the light theme, as layers are stacked towards the topmost + surface, they become progressively darker. + +
- + In the dark theme, as layers are stacked towards the topmost + surface, they become progressively lighter. + +
+ A similar hierarchy pattern as above is adopted for brilliantly colored + backgrounds like brand and alert colors when it comes to interactive + states. So as interactions progress from default to hover to pressed, + this same principle may apply. However, when trying to establish + prominence for other user interface needs, an inverse relationship may + be more suitable. Hence, for these brilliant colors: +
+-
+
- + In the light theme, as prominence reduces, layers become progressively + lighter. + +
- + In the dark theme, as prominence reduces, layers become progressively + darker. + +
Green Color Accessbility
+ ++ In the use of green, Sistent design system ensures compliance with WCAG + 2.1 standards for distinguishable text and color.{" "} + + + (See criteria 1.4.1 and 1.4.3) + + {" "} + Accessibility is a major consideration for Sistent, and as such, + accessibility research and guidelines are kept at the core of the color + selection process.There is further specification on how to maintain + compliance with these standards in both light and dark themes: +
+Light Theme
++ In order to ensure the minimum contrast of the Keppel Green in the the + light theme, a variation of it is used in the light theme to ensure + proper contrast. +
+Dark Theme
++ For the dark theme, the Keppel Green meets the contrast requirement + easily and as such can be used as the primary accent color for all + necessary use cases. +
++ NOTE: +
++ Take note that if the primary accent color in use meets accessibility + standards for both intended backgrounds in the light and dark themes, + there might be no need to have a variation of its hue represent it, as + is evident in the example above. +
+