-
+ {contents.map((x) => (
+
- + + {x.text} + + + ))} +
- Buttons communicate actions to users and they can be placed at several - places throughout the user interface. -
- -Basic Button
- -The button comes in three types: Filled, Outlined, and Text.
-Filled Button
-- Mostly used for high-emphasis actions and are primarily distinguished by - their fill. They are used to represent actions that are primary to the - solution. -
-Outlined Button
-Can be used for both medium and sometimes high-emphasis actions.
-Button
+ ++ A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +
+Text Button
-- Mostly used for less pronounced and very low emphasis actions. Can also - be used for text links as well. -
-Sizes
- -- For now, two different sizes of buttons exist: 56px height and 48px - height. -
-Adding Icons
- -- Icons are mostly added to filled and outlined buttons and they are used - to better describe the information being passed across by the button’s - label. -
-+ Buttons communicate actions to users and they can be placed at + several places throughout the user interface. +
+ +Basic Button
+ +The button comes in three types: Filled, Outlined, and Text.
+Filled Button
++ Mostly used for high-emphasis actions and are primarily + distinguished by their fill. They are used to represent actions that + are primary to the solution. +
+Outlined Button
++ Can be used for both medium and sometimes high-emphasis actions. +
+Text Button
++ Mostly used for less pronounced and very low emphasis actions. Can + also be used for text links as well. +
+Sizes
+ ++ For now, two different sizes of buttons exist: 56px height and 48px + height. +
+Adding Icons
+ ++ Icons are mostly added to filled and outlined buttons and they are + used to better describe the information being passed across by the + button’s label. +
+- For proper application, these buttons can be used for different purposes - to enable easier and consistent combination when guiding users across - digital experiences. -
- -Function
- -- The function of different buttons is what determines its usage and how - well suited it is to be applied in a given scenario to solve an existing - problem or complete a pending task. Functions or roles that can be - assigned to buttons in a particular design include: -
-Primary Button
-- Primary buttons are used for the most important actions on a page. It - should be the key button that helps the user navigate in a given flow or - while trying to perform a specific action. This could apply in cases - like when the user needs to submit a from, proceed to a new page, or - complete an action. The filled button serves as the primary button. -
-Button
-Button
- -- 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. -
-Button
+ ++ A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +
++ Buttons are crucial and integral elements in an interface. They are + mostly used to trigger actions and in so doing, take users to where + they need to be in any step of a flow. Buttons can be used in tandem + with other elements to piece designs together and convey digital + experiences. +
+ +Types
+ ++ In order to establish hierarchy, prominence and flexibility, + multiple types of buttons exist that can assist users to achieve + different aims. With the different styling on these buttons, it + makes it easier for users to navigate and arrive at their solutions + faster. +
+Filled
++ Filled buttons are buttons that consist a background color fill and + a text in it. Depending on the theme or intended action, the color + fill can range from a primary brand color to any other applicable + color in a brand’s color palette. +
+Outlined
++ Outlined buttons are buttons that do not have a fill, but have a + border or stroke to define its bounding box as well as a text label + to convey a thought for users to take action upon. Colors can also + be used to style these buttons in order to fit into the theme align + with brand guidelines. +
+Text
++ Also known as ghost buttons, text buttons are mostly just what the + name implies; they are buttons without fills or borders which might + just have a specific text styling and color to denote different + states for easier identification. +
+Sizes
+ ++ For buttons to be fully effective, they can be adjusted in size to + accommodate multiple use cases where they may apply. These size + changes are usually done to the height of the buttons and not the + width since buttons usually grow to contain their content. The + height that makes up the different sizes of our buttons are gotten + from our spacing system to retain space consistency. We have chosen + two different sizes of buttons to provide options and more sizes can + be added to fill the growing needs. +
+56px / 3.5rem
++ The 56px button is the first button size. It is currently the + largest button available for use and it is available for both mobile + and desktop resolutions, but it serves in different capacities + across these different resolutions. +
+48px / 3rem
++ The 48px button is the second button size currently in use and it is + available from mobile to desktop resolutions, even though it serves + in different capacities across these screen sizes. +
+Full width
++ Full width buttons are more efficient in mobile designs and rightly + so in order to offer users with a wider touch area since the input + devices - the fingers, are a lot larger than the cursor on a desktop + or larger screen. +
++ NOTE: +
++ These sizes are being specified with numerical values because though + the same size is used across screen resolutions, they have different + roles. On desktop for instance, the 56px button is a the default + size, and 48px the small size, while on mobile, 56px is large and + 48px is the default size. Preferred button sizes (height) are + usually arrived at through exploration and proper consideration of + industry standards and best practices. +
+ +Adding Icons
+ ++ Sometimes, icons are used alongside labels in buttons to pass across + specific information or relay added information for a higher level + of understanding and better comprehension. Depending on the + information being conveyed, the icons can be placed on the left side + of the label text or on the right side of the label text. No + specific rules apply apart from spacing tips which may be considered + here. For full width buttons, if icons must be added, they should be + centered in the button alongside the label text. +
+- Buttons are crucial and integral elements in an interface. They are - mostly used to trigger actions and in so doing, take users to where they - need to be in any step of a flow. Buttons can be used in tandem with - other elements to piece designs together and convey digital experiences. -
- -Types
- -- In order to establish hierarchy, prominence and flexibility, multiple - types of buttons exist that can assist users to achieve different aims. - With the different styling on these buttons, it makes it easier for - users to navigate and arrive at their solutions faster. -
-Filled
-- Filled buttons are buttons that consist a background color fill and a - text in it. Depending on the theme or intended action, the color fill - can range from a primary brand color to any other applicable color in a - brand’s color palette. -
-Outlined
-- Outlined buttons are buttons that do not have a fill, but have a border - or stroke to define its bounding box as well as a text label to convey a - thought for users to take action upon. Colors can also be used to style - these buttons in order to fit into the theme align with brand - guidelines. -
-Text
-- Also known as ghost buttons, text buttons are mostly just what the name - implies; they are buttons without fills or borders which might just have - a specific text styling and color to denote different states for easier - identification. -
-Sizes
- -- For buttons to be fully effective, they can be adjusted in size to - accommodate multiple use cases where they may apply. These size changes - are usually done to the height of the buttons and not the width since - buttons usually grow to contain their content. The height that makes up - the different sizes of our buttons are gotten from our spacing system to - retain space consistency. We have chosen two different sizes of buttons - to provide options and more sizes can be added to fill the growing - needs. -
-56px / 3.5rem
-- The 56px button is the first button size. It is currently the largest - button available for use and it is available for both mobile and desktop - resolutions, but it serves in different capacities across these - different resolutions. -
-48px / 3rem
-- The 48px button is the second button size currently in use and it is - available from mobile to desktop resolutions, even though it serves in - different capacities across these screen sizes. -
-Full width
-- Full width buttons are more efficient in mobile designs and rightly so - in order to offer users with a wider touch area since the input devices - - the fingers, are a lot larger than the cursor on a desktop or larger - screen. -
-- NOTE: -
-- These sizes are being specified with numerical values because though the - same size is used across screen resolutions, they have different roles. - On desktop for instance, the 56px button is a the default size, and 48px - the small size, while on mobile, 56px is large and 48px is the default - size. Preferred button sizes (height) are usually arrived at through - exploration and proper consideration of industry standards and best - practices. -
- -Adding Icons
- -- Sometimes, icons are used alongside labels in buttons to pass across - specific information or relay added information for a higher level of - understanding and better comprehension. Depending on the information - being conveyed, the icons can be placed on the left side of the label - text or on the right side of the label text. No specific rules apply - apart from spacing tips which may be considered here. For full width - buttons, if icons must be added, they should be centered in the button - alongside the label text. -
-Text Input
+ ++ Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free range + of personal information to entering a limited number of characters for + a use case. +
+- Although we have only one type of text input to be used, there are - different roles that they can function in that ensure that these inputs - prove sufficient for multiple use cases. -
- -Function
- - -Default
-- Default text inputs are used for most of the input needs across an - interface. From filling up forms to entering text content in provided - form fields to complete an action or a task. this text input is mostly - utilized. Icons are not seldom required in this text input, however, - they can included when extremely necessary. -
-Multiline
-- Multiline text input functions for input that requires more than one - line of text. This text input adjusts vertically based on the amount of - lines of text entered into the text field. -
-Labelling
- -- A couple of elements come together to support the input field depending - on the context in is being used. These elements either provide added - information or provide much needed support to ensure users are able to - complete intended tasks. -
-Label
-- The label is an optional feature that can accompany the text input. It - an be used to point out what is required in the input field. -
-Required
-- This type of label that is usually applied in forms to inform users of a - compulsary information that is to be provided in order to complete the - form. It is represented by an asterisk mark (*) that appears after the - label text. -
-Helper text
-- Helper text appears at the bottom of the input field and it is primarily - to serve as an alert for the user to inform them based on the input they - have entered but only where necessary. -
-Text Input
+ ++ Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free range + of personal information to entering a limited number of characters for + a use case. +
++ Although we have only one type of text input to be used, there are + different roles that they can function in that ensure that these + inputs prove sufficient for multiple use cases. +
+ +Function
+ + +Default
++ Default text inputs are used for most of the input needs across an + interface. From filling up forms to entering text content in + provided form fields to complete an action or a task. this text + input is mostly utilized. Icons are not seldom required in this text + input, however, they can included when extremely necessary. +
+Multiline
++ Multiline text input functions for input that requires more than one + line of text. This text input adjusts vertically based on the amount + of lines of text entered into the text field. +
+Labelling
+ ++ A couple of elements come together to support the input field + depending on the context in is being used. These elements either + provide added information or provide much needed support to ensure + users are able to complete intended tasks. +
+Label
++ The label is an optional feature that can accompany the text input. + It an be used to point out what is required in the input field. +
+Required
++ This type of label that is usually applied in forms to inform users + of a compulsary information that is to be provided in order to + complete the form. It is represented by an asterisk mark (*) that + appears after the label text. +
+Helper text
++ Helper text appears at the bottom of the input field and it is + primarily to serve as an alert for the user to inform them based on + the input they have entered but only where necessary. +
+Button
-Text Input
- -- Text inputs are important elements that help users interact with - an experience by providing text commands that will in turn return - expected results. These commands can range from providing a free - range of personal information to entering a limited number of - characters for a use case. -
-Text Input
+ ++ Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free range + of personal information to entering a limited number of characters for + a use case. +
++ Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free + range of personal information to entering a limited number of + characters for a use case. +
+ +Design
+ ++ Instead of various types for use across designs, the text input has + just one type to ensure simplicity and efficiency. It is preferable + that inputs are as minimal as possible since the sole function that + they generally perform is to ensure that users are able to send in + data and receive corresponding information. +
+Sizes
+ ++ Since input fields have a responsive width that adjusts depending on + the need and use case, size considerations are mostly directed at + the height of the field. This means that the size of text inputs + adjust only relative to the height of the text field. Because text + inputs are mostly used in tandem with buttons, to ensure design + consistency, text inputs and buttons have similar size requirements. +
+56px / 3.5rem
++ The 56px text input is the first field size. It is the largest text + input available for use and it is available for both mobile and + desktop resolutions, but it serves in different capacities across + these different resolutions. +
+48px / 3rem
++ The 48px text input is the second field size in use and it is + available from mobile to desktop resolutions, even though it serves + in different capacities across these screen sizes. +
++ NOTE: +
++ These sizes are being specified with numerical values because though + the same size is used across screen resolutions, they have different + roles. On desktop for instance, the 56px text input is a the default + size, and 48px the small size, while on mobile, 56px is large and + 48px is the default size. Preferred text input sizes (height) are + usually arrived at through exploration and proper consideration of + industry standards and best practices. +
+ +Adding Icons
+ ++ Icons can be used often in text inputs to aid in understanding the + required parameters for a given field or to provide options that can + help to improve the experience as a user navigates a given set of + text inputs. Depending on the context, icons can be placed on the + left and right at different times or even at the same time. The + icons should be aligned to the left or right side of the input field + and not to the center, while text remains left aligned. +
+- Text inputs are important elements that help users interact with an - experience by providing text commands that will in turn return expected - results. These commands can range from providing a free range of - personal information to entering a limited number of characters for a - use case. -
- -Design
- -- Instead of various types for use across designs, the text input has just - one type to ensure simplicity and efficiency. It is preferable that - inputs are as minimal as possible since the sole function that they - generally perform is to ensure that users are able to send in data and - receive corresponding information. -
-Sizes
- -- Since input fields have a responsive width that adjusts depending on the - need and use case, size considerations are mostly directed at the height - of the field. This means that the size of text inputs adjust only - relative to the height of the text field. Because text inputs are mostly - used in tandem with buttons, to ensure design consistency, text inputs - and buttons have similar size requirements. -
-56px / 3.5rem
-- The 56px text input is the first field size. It is the largest text - input available for use and it is available for both mobile and desktop - resolutions, but it serves in different capacities across these - different resolutions. -
-48px / 3rem
-- The 48px text input is the second field size in use and it is available - from mobile to desktop resolutions, even though it serves in different - capacities across these screen sizes. -
-- NOTE: -
-- These sizes are being specified with numerical values because though the - same size is used across screen resolutions, they have different roles. - On desktop for instance, the 56px text input is a the default size, and - 48px the small size, while on mobile, 56px is large and 48px is the - default size. Preferred text input sizes (height) are usually arrived at - through exploration and proper consideration of industry standards and - best practices. -
- -Adding Icons
- -- Icons can be used often in text inputs to aid in understanding the - required parameters for a given field or to provide options that can - help to improve the experience as a user navigates a given set of text - inputs. Depending on the context, icons can be placed on the left and - right at different times or even at the same time. The icons should be - aligned to the left or right side of the input field and not to the - center, while text remains left aligned. -
-- 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
-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. +
++ 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
+Component Colors
++ Tokens here are component specific and must be used only for the + component that they are referencing. +
+- 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. -
-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. +
++ 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. -
-Sorry, this page is still under work
-Spacing
+ ++ Space is the unseen component in designed solutions that enables + clear, concise, and consistent arrangement of interface elements + across a screen. +
+Sorry, this page is still under work
+- Applying spatial values to designs is a much debated topic and can prove - to be quite difficult and very confusing especially when trying to - maintain consistency across all designs. To this end, a few concepts - have been pieced together in order to simplify the understanding of - spatial harmony and ensure a consistent execution. -
- -Spatial Organization
- -- Mostly in an interface, the way space and spatial harmony is achieved is - by applying these space values to specific elements or in specific use - cases. This can range form the size of a given element to the space - between elements on a page. -
-Gap
-- Gap can be used to represent the space between any two given elements in - an interface. This can be the inset values in a button or a card, stack - or inline spacing between blocks of text or a group of elements in a - section, and can also be applicable for margin values in a grid system. - Because this can be confusing to determine a mode of application given - that the spatial system consists of over 10 different values, a set - consisting of five to seven values can be chosen to serve as all the - values for the ‘gap’ spacing that will be used in an interface. -
-- Arriving at these values, however is not arbitrary or random selection - from the spacing scale. Instead, a geometric progression gotten by - multiplying the base space value by a common ratio of two and also - dividing by the same ratio will provide the values needed to populate - the ‘gap’ category. This arrangement will ensure uniform space across an - interface that will greatly help to establish element relationships and - hierarchy. -
-Spacing
+ ++ Space is the unseen component in designed solutions that enables + clear, concise, and consistent arrangement of interface elements + across a screen. +
++ Applying spatial values to designs is a much debated topic and can + prove to be quite difficult and very confusing especially when + trying to maintain consistency across all designs. To this end, a + few concepts have been pieced together in order to simplify the + understanding of spatial harmony and ensure a consistent execution. +
+ +Spatial Organization
+ ++ Mostly in an interface, the way space and spatial harmony is + achieved is by applying these space values to specific elements or + in specific use cases. This can range form the size of a given + element to the space between elements on a page. +
+Gap
++ Gap can be used to represent the space between any two given + elements in an interface. This can be the inset values in a button + or a card, stack or inline spacing between blocks of text or a group + of elements in a section, and can also be applicable for margin + values in a grid system. Because this can be confusing to determine + a mode of application given that the spatial system consists of over + 10 different values, a set consisting of five to seven values can be + chosen to serve as all the values for the 'gap' spacing that will be + used in an interface. +
++ Arriving at these values, however is not arbitrary or random + selection from the spacing scale. Instead, a geometric progression + gotten by multiplying the base space value by a common ratio of two + and also dividing by the same ratio will provide the values needed + to populate the 'gap' category. This arrangement will ensure uniform + space across an interface that will greatly help to establish + element relationships and hierarchy. +
++ *The last spacing value of 80px that was included was added because + 80px is the value for the margin in the 12 column grid that is being + applied for desktop screens. +
+Radius
++ The radius value of elements in an interface help to define the + theme and density that it conveys. Little to no radius can describe + a more grotesque or brutal theme, while higher and more consistent + use of radiuses can describe a modern and minimal UI theme. Radius + values can be determined based on the use case and the needs of the + designs being curated. With Layer5, we have chosen five radius + values that can provide a the much needed variation that can help to + describe a minimal and consistent user interface. +
++ As is the case with most user interface decisions that are agreed + upon, these values should be subjected to proper scrutiny based on + the intended use case as well as appropriate exploration to ensure + the best possible application. +
+Size
++ Size refers to the amount of area that an atom or element of a + design takes up in the available space of the user interface. + Whether it’s that of an icon or the total size of an image, all of + that space can be described as size. While it is true that much + larger size values may not necessarily be strictly defined in the + spatial system, elements which are frequently used and require a + fixed size throughout a design can have specific values assigned to + them to ensure consistency. +
++ Applicable scenarios can be in the case of buttons, text fields, + some cards, navigation menus, logos, and icons. While there are + exceptions to these elements, mostly, it is recommended that they + appear in a uniform size across an interface to improve the + consistency therein. +
+ +Space Application Considerations
+ ++ For spacing to be effectively employed in designs, a few + considerations are to be made to enable a simple, yet, uniform + application of space values across designs. One such principles is + that in a bounding box, the padding of the box should be the highest + spacing value. This simply means that for any container, (could be a + card, button, an entire page layout) both the horizontal and + vertical padding values must be more than any other space values + used inside of the container to separate its child elements. +
++ This is applicable whether the horizontal and vertical paddings have + the same or different values. To provide more, clarity, the inline + spacing in a container should not be more than its horizontal + padding, and the stack spacing value should not be more than the + container's vertical padding. This gradual decrease in the space + value as we go deeper into a container or an element helps to + enhance uniformity and consistency across designs. +
+Exceptions
++ Of course, these suggestions are not set in stone, and as such, + exceptions should be made to accommodate the peculiar needs of a + design and its existing principles. One of the cases where + exceptions can apply is when proper separation needs to be + established among a group of elements. +
++ Although most pages will have a horizontal padding value, they + seldom have a vertical padding value and since elements are mostly + arranged in a vertical stack in a digital interface, it becomes + necessary that proper separation is established in order to assist + users to easily identify sections and navigate through the content + of a page in the proper manner for better understanding. Varying + values of space can therefore be employed in this vertical stack to + improve users' clarity and minimize any confusion encountered. +
+Spacing
-Spacing
- -- Space is the unseen component in designed solutions that enables - clear, concise, and consistent arrangement of interface elements - across a screen. -
-- Spacing is a foundational consideration in any design endeavor. From - intra component spacing to space between elements in a given layout, - intentional application of spacing across a digital experience elevates - its usability, improves its (or the) experience, and eventually - generates much needed website traffic which is a primary goal for most - digital solutions. -
- -The Basics
- -- A few concepts can be handy to keep in mind as we consider spacing and - its application throughout designs to ensure clarity and proper - understanding. -
-Inset
-- Inset describes the value of padding for any container in the interface. - The description of a container can range from full page layouts, to page - sections, all the way down to card containers and even icon frames. - Inset accounts for the values of both horizontal and vertical padding. - The horizontal and vertical paddings don’t need to have the same value, - however, it is recommended that the values for the horizontal padding - are equivalent. This principle applies to the values for the vertical - paddings as well. -
-Stack
-- Stack in spacing is used to describe the space between vertically - arranged content in a digital interface. Since most digital content is - read from top to bottom, It is only right that they are arranged in such - a way that accurately conveys hierarchy, relationship and spatial - harmony. -
-Inline
-- This is the horizontal space consideration given to elements that are - being arranged in an interface. It can be the space between text input, - horizontally stacked elements like buttons and so on. -
- -Scaling
- -- To properly implement spacing, a set of values have to be generated - using a scale just like was done in the case of typography. This avails - us with a fixed range of values that provide the much needed flexibility - required by interfaces to be consistent. This range could be derived - from a base spacing value which follows a principle like a linear scale - from the base value, multiples of the base value, the golden ratio, or a - modular scale. -
-- Most digital screen resolutions are divisible by 16 which is a multiple - of eight and so, this makes it a good reason to utilize eight as our - base spacing value. Our scale, therefore, has been derived from - multiples of eight with a half and quarter step of eight included in the - scale to account for much smaller space considerations, for example, - icon padding. The half and quarter steps have values of two and four - respectively. -
-- From this scale of multiples of eight, space values for different - purposes can now be selected for use in an interface raging from gap - between elements on a page to size of elements, to corner radiuses and - other space considerations. -
- -Text and Spacing
- -- One factor that should be accounted for when sorting out spacing and - other considerations for spatial harmony is text size. Mostly this - affects the stack spacing values and their arrangement. Having all text - sizes in a multiple of the base spacing value is a principle that can - help to avoid inconsistent looking text and space across an interface. - This should also be the same for the line height that accompanies these - text sizes. -
-- Mostly, the text is arranged in a pattern that takes into consideration - the line height of the different sizes of text used in order to - represent proper hierarchy and relationships between text content in an - interface. -
-- The different fonts are referenced using unique token names to achieve - uniform application of the texts in different use cases across multiple - platforms. These tokens, just like the color, are split into primitive - and semantic categories. -
- -Primitive Category
- -- This category refers to the seven sizes that were chosen as typesets - from the major third ratio. They form the foundation for all the other - fonts generated and used across the typography system. Since these - tokens lack complete styling however, they are should not be used - directly in designs and as such do not have any roles ascribed to them. - However, if a new role emerges and the need for a new token arises, - these typesets, serve as the reference size for any new font to be - created. -
-Semantic Category
- -- The fonts in this category have specifications that make them suitable - for certain use cases either across all platforms or in any given - platform. -
-Typography
+ ++ Most of the information that is present in a user interface for the + purpose of passing information across is represented via typography. + Correct typography structure and appropriate application is important + in all interfaces. +
++ The different fonts are referenced using unique token names to + achieve uniform application of the texts in different use cases + across multiple platforms. These tokens, just like the color, are + split into primitive and semantic categories. +
+ +Primitive Category
+ ++ This category refers to the seven sizes that were chosen as typesets + from the major third ratio. They form the foundation for all the + other fonts generated and used across the typography system. Since + these tokens lack complete styling however, they are should not be + used directly in designs and as such do not have any roles ascribed + to them. However, if a new role emerges and the need for a new token + arises, these typesets, serve as the reference size for any new font + to be created. +
+Semantic Category
+ ++ The fonts in this category have specifications that make them + suitable for certain use cases either across all platforms or in any + given platform. +
+- After a suitable typeface has been chosen, it needs to be arranged to - form the various fonts that will be used to address different text needs - across designs. -
- -Type Scale Customization
- -- It is not compulsory that all of the sizes in a type scale be used. - However, when choosing a size from the scale, ensure to identify - possible use cases in proposed designs to ensure efficiency and reduce - any chances of having redundant text styles. Remember that less is more - and a particular font size can function in multiple capacities. After - making a selection of sizes, if there is subsequent need for an - additional size because of a recurring use case, then a suitable - corresponding size can be chosen from the scale. This is a better - practice. -
-- For Layer5, we utilized the major third ratio to generate a type scale - that we could work with. -
-- From this type scale, seven text sizes were selected to account for - various needs in our websites and products. These sizes were further - modified with suitable font specifications that will provide accurate - guidance for usage across implementations. -
-- To create even more consistent designs, it is important to consider - typography with spacing and spatial proportions in mind. As a rule of - thumb, it is advisable that values obtained from the modular scale are - rounded off to a multiple of the base space value being used across a - set of designs. So for instance, if a set of designs has a base space - value of 4px or 6px, then, the font sizes selected are rounded off to be - multiples of four or six respectively. -
-- In keeping with this, the values of the above sizes are noticeably - distinct from the original type scale that it was derived from. This is - because our base space value is 8px and as such, all the text sizes have - been rounded off to a multiple of eight. This same principle is applied - to the accompanying line heights of these text sizes as well. -
-Layout Considerations
-- For any digital product or website being created, one important thing to - be considered is the responsive nature of design, which translates to - what the said design will look like across different screen sizes - (desktop, tablet, and mobile). To this end, it is also crucial that any - of the text styles selected account for these different layout sizes as - well. As stated earlier, text styles can be used for multiple needs - across a given design. The important thing is that there is proper - documentation to point this out, ensuring that hierarchy and prominence - are duly established. -
- -Establishing Hierarchy
- -- Since the selected text sizes cannot all be used for the same purpose, - it is necessary to differentiate them from each other in order to have a - working typography system that applies to different use cases and layout - sizes. This will require exploration and multiple tests of these text - styles in the screen sizes they are intended for and the possible use - cases that they will account for which may have already been identified - in the early stages before use. -
-- With these seven different text sizes derived from the type scale, we - have come up with 13 fonts that can be applied in multiple use cases and - across multiple devices. This variation ensures that fonts are not - created randomly and utilized based on individual discretion, eventually - leading to multiple redundant fonts present in our type system. These - fonts must be considered first for application in any use case. If the - need arises for a new font to be added to the type system, sufficient - use cases have to be established to do so. -
-- NOTE: -
-- A new font can be something as little as changing only the font weight - of an already existing font and having both variations function in - different capacities. Of course it can also include replacing an already - existing font or creating an entirely new one to add to the type system. -
- -Font Specification
- -- Each font should not be a product of random choices just to have a set - of text to work with. They should be informed decisions based on how - they can assist to reinforce a brand, what they can be used to achieve - in designs, and to what extent they should be applied. For more - documentation, check out details on each font in the Code section for - `Typography`. -
-Heading
-- Headings are usually the first thing a user sees when reading a block of - text. The idea is for them to be concise and provide a hint of what - readers can expect from the accompanying body of text or an entire page. - It should also capture attention and encourage further exploration. They - can range from large hero section headings to much smaller subtitle and - label headings. Whatever the case, headings at different sizes can help - to accurately indicate hierarchy and provide guidance for any reader - going through a group of text. -
-- Of Layer5’s ten fonts, seven of them can function as heading text and - ensure hierarchy for different context. For text that needs to be - prominent in a group of text (especially at the beginning), any one of - these fonts will suffice. -
-Body
-- A bulk of text content is written in body or paragraph fonts. These are - less prominent (larger) fonts that provide more context to what brief - ideas any available headings may have outlined. It can also be used for - short text in components and when creating other interface elements due - to its higher legibility when compared to heading or subtitle texts. - Three font sizes have been earmarked to function in this capacity for - the text needs in Layer5 and across all of its products. -
-Label
-- To highlight supplementary information for interface elements, label - texts can suffice. They provide extra information for users as they - navigate a solution. Label texts ideally do not need to be too prominent - hence their smaller size compared to the body text category. There are - two label texts available in the Sistent type system. -
-Code
-- This fonts are curated specifically for the purpose of writing code - across our websites and solutions. They can be used to highlight code - related text in designs like token values, code snippets for components - and any other code related application. Two fonts have been made - available for this purpose. -
-Typography
+ ++ Most of the information that is present in a user interface for the + purpose of passing information across is represented via typography. + Correct typography structure and appropriate application is important + in all interfaces. +
++ After a suitable typeface has been chosen, it needs to be arranged + to form the various fonts that will be used to address different + text needs across designs. +
+ +Type Scale Customization
+ ++ It is not compulsory that all of the sizes in a type scale be used. + However, when choosing a size from the scale, ensure to identify + possible use cases in proposed designs to ensure efficiency and + reduce any chances of having redundant text styles. Remember that + less is more and a particular font size can function in multiple + capacities. After making a selection of sizes, if there is + subsequent need for an additional size because of a recurring use + case, then a suitable corresponding size can be chosen from the + scale. This is a better practice. +
++ For Layer5, we utilized the major third ratio to generate a type + scale that we could work with. +
++ From this type scale, seven text sizes were selected to account for + various needs in our websites and products. These sizes were further + modified with suitable font specifications that will provide + accurate guidance for usage across implementations. +
++ To create even more consistent designs, it is important to consider + typography with spacing and spatial proportions in mind. As a rule + of thumb, it is advisable that values obtained from the modular + scale are rounded off to a multiple of the base space value being + used across a set of designs. So for instance, if a set of designs + has a base space value of 4px or 6px, then, the font sizes selected + are rounded off to be multiples of four or six respectively. +
++ In keeping with this, the values of the above sizes are noticeably + distinct from the original type scale that it was derived from. This + is because our base space value is 8px and as such, all the text + sizes have been rounded off to a multiple of eight. This same + principle is applied to the accompanying line heights of these text + sizes as well. +
+Layout Considerations
++ For any digital product or website being created, one important + thing to be considered is the responsive nature of design, which + translates to what the said design will look like across different + screen sizes (desktop, tablet, and mobile). To this end, it is also + crucial that any of the text styles selected account for these + different layout sizes as well. As stated earlier, text styles can + be used for multiple needs across a given design. The important + thing is that there is proper documentation to point this out, + ensuring that hierarchy and prominence are duly established. +
+ +Establishing Hierarchy
+ ++ Since the selected text sizes cannot all be used for the same + purpose, it is necessary to differentiate them from each other in + order to have a working typography system that applies to different + use cases and layout sizes. This will require exploration and + multiple tests of these text styles in the screen sizes they are + intended for and the possible use cases that they will account for + which may have already been identified in the early stages before + use. +
++ With these seven different text sizes derived from the type scale, + we have come up with 13 fonts that can be applied in multiple use + cases and across multiple devices. This variation ensures that fonts + are not created randomly and utilized based on individual + discretion, eventually leading to multiple redundant fonts present + in our type system. These fonts must be considered first for + application in any use case. If the need arises for a new font to be + added to the type system, sufficient use cases have to be + established to do so. +
++ NOTE: +
++ A new font can be something as little as changing only the font + weight of an already existing font and having both variations + function in different capacities. Of course it can also include + replacing an already existing font or creating an entirely new one + to add to the type system. +
+ +Font Specification
+ ++ Each font should not be a product of random choices just to have a + set of text to work with. They should be informed decisions based on + how they can assist to reinforce a brand, what they can be used to + achieve in designs, and to what extent they should be applied. For + more documentation, check out details on each font in the Code + section for `Typography`. +
+Heading
++ Headings are usually the first thing a user sees when reading a + block of text. The idea is for them to be concise and provide a hint + of what readers can expect from the accompanying body of text or an + entire page. It should also capture attention and encourage further + exploration. They can range from large hero section headings to much + smaller subtitle and label headings. Whatever the case, headings at + different sizes can help to accurately indicate hierarchy and + provide guidance for any reader going through a group of text. +
++ Of Layer5’s ten fonts, seven of them can function as heading text + and ensure hierarchy for different context. For text that needs to + be prominent in a group of text (especially at the beginning), any + one of these fonts will suffice. +
+Body
++ A bulk of text content is written in body or paragraph fonts. These + are less prominent (larger) fonts that provide more context to what + brief ideas any available headings may have outlined. It can also be + used for short text in components and when creating other interface + elements due to its higher legibility when compared to heading or + subtitle texts. Three font sizes have been earmarked to function in + this capacity for the text needs in Layer5 and across all of its + products. +
+Label
++ To highlight supplementary information for interface elements, label + texts can suffice. They provide extra information for users as they + navigate a solution. Label texts ideally do not need to be too + prominent hence their smaller size compared to the body text + category. There are two label texts available in the Sistent type + system. +
+Code
++ This fonts are curated specifically for the purpose of writing code + across our websites and solutions. They can be used to highlight + code related text in designs like token values, code snippets for + components and any other code related application. Two fonts have + been made available for this purpose. +
+Typography
-Typography
- -- Most of the information that is present in a user interface for - the purpose of passing information across is represented via - typography. Correct typography structure and appropriate - application is important in all interfaces. -
-- There are a couple of things to consider when preparing to apply - typography to any interface. -
- -The Basics
- - -Typeface
-- A typeface is a set of letters, numbers, and accessories that have - common design features. These characters are usually grouped into - families and used in relation to each other to ensure uniform text - representation in designs and forms of text that are relative to each - other. Qanelas Soft, Times New Roman, Merriweather, and Roboto are all - examples of typefaces. -
-Font
-- Often wrongly used interchangeably with typeface, a font refers to - variations of a typeface. So this includes the weight, size, line - height, tracking (letter spacing), and any other features that are added - to a typeface for it to function in a certain capacity. A key - relationship between a typeface and a font is that characters in a - typeface can be modified to form different fonts. -
-Line Height
-- Line height is mostly used to refer to the distance between lines of - text. WCAG standards for line height recommend a line height that is at - least 1.5 times the chosen font size, especially for small text sizes. - For larger fonts, however, evidence has shown that anything between 1.2 - and 1.5 times the font size might also be appropriate, especially - considering the fact that most large fonts used for headings and - subheadings tend not to exceed a single line of text. -
- -Type Scale
- -- Type scale with respect to typography points to the set of incremental - steps or rations that dictate how font sizes increase or decrease as you - move up or down a given hierarchy. This increase or decrease is usually - originated from a base size that serves as the defining font within the - scale. These steps create a systemic progression of font sizes that - maintain harmony and visual balance within a system because of the - relationship they share with the base font. -
-- The base size used to generate a type scale is determined by the - principles governing size, typography, and other brand specific - contexts. As a design best practice, a text size of 16px is generally - accepted as very legible for responsive design. It is also a multiple of - eight which is our base space value and this is further elaborated on in - - Spacing - - . Reasons like these influence its use as a base size for our type - scale. A modular type scale can be generated using harmonious values - like the golden ratio, the major third, the perfect fifth, and so on. -
-- Because of the progressive increase or decrease that governs the content - of a type scale, it makes it easier to obtain consistent, related, and - harmonious font sizes that can each be used for specific needs when - curating digital interfaces. -
- -Font Pairing
- -- Sometimes, it might be necessary to make use of more than one typeface. - In such a case, an applicable principle is that one of the typefaces is - used mostly for headings and subheadings, while the other is used for - most paragraphs and body text needs across the same design. Detailed - research on typefaces and their compatibility will help to make informed - decisions when it comes to choosing a typeface for font pairing. -
-- Layer5 has successfully been able to implement a font pairing of Qanelas - Soft for all heading and subheading text and Open Sans for all body, - paragraph, and content text needs. -
-