From c080c9f28cf14aa4729afa0bcb1fedeef9f2b585 Mon Sep 17 00:00:00 2001 From: lakshya Date: Sun, 25 Feb 2024 12:29:36 +0530 Subject: [PATCH] color pages complete Signed-off-by: lakshya --- .../app/projects/sistent/bg-colors-table.svg | 63 ++++++ .../projects/sistent/border-colors-table.svg | 33 +++ .../projects/sistent/brand-colors-table.svg | 107 ++++++++++ .../projects/sistent/context-visuals-1.svg | 18 ++ .../projects/sistent/context-visuals-2.svg | 66 ++++++ .../projects/sistent/context-visuals-3.svg | 51 +++++ .../projects/sistent/context-visuals-4.svg | 32 +++ .../projects/sistent/context-visuals-5.svg | 95 +++++++++ .../projects/sistent/context-visuals-6.svg | 36 ++++ .../sistent/function-colors-table.svg | 138 ++++++++++++ .../sistent/greyscale-colors-table.svg | 98 +++++++++ .../projects/sistent/text-colors-table.svg | 72 +++++++ .../projects/sistent/tonal-palettes-full.svg | 124 +++++++++++ .../app/projects/sistent/tonal-palettes.svg | 12 ++ src/components/SistentNavigation/index.js | 50 +---- src/sections/Projects/Sistent/about.js | 5 +- .../Projects/Sistent/identity/color.js | 30 --- .../Projects/Sistent/identity/color/code.js | 78 +++++++ .../Sistent/identity/color/guidance.js | 163 ++++++++++++++ .../Projects/Sistent/identity/color/index.js | 91 ++++++++ .../Sistent/identity/color/overview.js | 201 ++++++++++++++++++ .../Projects/Sistent/sistent.style.js | 38 +++- 22 files changed, 1524 insertions(+), 77 deletions(-) create mode 100644 src/assets/images/app/projects/sistent/bg-colors-table.svg create mode 100644 src/assets/images/app/projects/sistent/border-colors-table.svg create mode 100644 src/assets/images/app/projects/sistent/brand-colors-table.svg create mode 100644 src/assets/images/app/projects/sistent/context-visuals-1.svg create mode 100644 src/assets/images/app/projects/sistent/context-visuals-2.svg create mode 100644 src/assets/images/app/projects/sistent/context-visuals-3.svg create mode 100644 src/assets/images/app/projects/sistent/context-visuals-4.svg create mode 100644 src/assets/images/app/projects/sistent/context-visuals-5.svg create mode 100644 src/assets/images/app/projects/sistent/context-visuals-6.svg create mode 100644 src/assets/images/app/projects/sistent/function-colors-table.svg create mode 100644 src/assets/images/app/projects/sistent/greyscale-colors-table.svg create mode 100644 src/assets/images/app/projects/sistent/text-colors-table.svg create mode 100644 src/assets/images/app/projects/sistent/tonal-palettes-full.svg create mode 100644 src/assets/images/app/projects/sistent/tonal-palettes.svg delete mode 100644 src/sections/Projects/Sistent/identity/color.js create mode 100644 src/sections/Projects/Sistent/identity/color/code.js create mode 100644 src/sections/Projects/Sistent/identity/color/guidance.js create mode 100644 src/sections/Projects/Sistent/identity/color/index.js create mode 100644 src/sections/Projects/Sistent/identity/color/overview.js diff --git a/src/assets/images/app/projects/sistent/bg-colors-table.svg b/src/assets/images/app/projects/sistent/bg-colors-table.svg new file mode 100644 index 000000000000..c532e50cec4e --- /dev/null +++ b/src/assets/images/app/projects/sistent/bg-colors-table.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/border-colors-table.svg b/src/assets/images/app/projects/sistent/border-colors-table.svg new file mode 100644 index 000000000000..25899e73b5d4 --- /dev/null +++ b/src/assets/images/app/projects/sistent/border-colors-table.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/brand-colors-table.svg b/src/assets/images/app/projects/sistent/brand-colors-table.svg new file mode 100644 index 000000000000..fc27dd653781 --- /dev/null +++ b/src/assets/images/app/projects/sistent/brand-colors-table.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/context-visuals-1.svg b/src/assets/images/app/projects/sistent/context-visuals-1.svg new file mode 100644 index 000000000000..924f7450b7d5 --- /dev/null +++ b/src/assets/images/app/projects/sistent/context-visuals-1.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/context-visuals-2.svg b/src/assets/images/app/projects/sistent/context-visuals-2.svg new file mode 100644 index 000000000000..82ab80255f6c --- /dev/null +++ b/src/assets/images/app/projects/sistent/context-visuals-2.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/context-visuals-3.svg b/src/assets/images/app/projects/sistent/context-visuals-3.svg new file mode 100644 index 000000000000..8460f8ea3e40 --- /dev/null +++ b/src/assets/images/app/projects/sistent/context-visuals-3.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/context-visuals-4.svg b/src/assets/images/app/projects/sistent/context-visuals-4.svg new file mode 100644 index 000000000000..5ba19703c2d1 --- /dev/null +++ b/src/assets/images/app/projects/sistent/context-visuals-4.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/context-visuals-5.svg b/src/assets/images/app/projects/sistent/context-visuals-5.svg new file mode 100644 index 000000000000..c7c91eb61e5f --- /dev/null +++ b/src/assets/images/app/projects/sistent/context-visuals-5.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/context-visuals-6.svg b/src/assets/images/app/projects/sistent/context-visuals-6.svg new file mode 100644 index 000000000000..f1f5e8b64bee --- /dev/null +++ b/src/assets/images/app/projects/sistent/context-visuals-6.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/function-colors-table.svg b/src/assets/images/app/projects/sistent/function-colors-table.svg new file mode 100644 index 000000000000..28e1d25932cc --- /dev/null +++ b/src/assets/images/app/projects/sistent/function-colors-table.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/greyscale-colors-table.svg b/src/assets/images/app/projects/sistent/greyscale-colors-table.svg new file mode 100644 index 000000000000..8c451536c267 --- /dev/null +++ b/src/assets/images/app/projects/sistent/greyscale-colors-table.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/text-colors-table.svg b/src/assets/images/app/projects/sistent/text-colors-table.svg new file mode 100644 index 000000000000..28d6bcf67e1e --- /dev/null +++ b/src/assets/images/app/projects/sistent/text-colors-table.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-full.svg b/src/assets/images/app/projects/sistent/tonal-palettes-full.svg new file mode 100644 index 000000000000..4941a845aaf3 --- /dev/null +++ b/src/assets/images/app/projects/sistent/tonal-palettes-full.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/tonal-palettes.svg b/src/assets/images/app/projects/sistent/tonal-palettes.svg new file mode 100644 index 000000000000..89999bf6232f --- /dev/null +++ b/src/assets/images/app/projects/sistent/tonal-palettes.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js index eed417a835b0..2875621a5a2c 100644 --- a/src/components/SistentNavigation/index.js +++ b/src/components/SistentNavigation/index.js @@ -4,52 +4,18 @@ import { Link } from "gatsby"; import { IoMdClose } from "@react-icons/all-files/io/IoMdClose"; import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle"; -// import { content } from "./content"; - -const content = [ - { id: 0, link: "/projects/sistent/about", text: "About Sistent" }, - { - id: 1, - link: "/projects/sistent/identity", - text: "Identity", - children: [ - { - id: 1.1, - text: "Colors", - link: "/projects/sistent/identity/colors", - }, - { - id: 1.2, - text: "Typography", - link: "/projects/sistent/identity/typography", - }, - { - id: 1.3, - text: "Spacing", - link: "/projects/sistent/identity/spacing", - }, - ], - }, - { id: 2, link: "/projects/sistent/components", text: "Components" }, -]; - import TOCWrapper from "./toc.style"; -import { - Accordion, - AccordionBody, - AccordionItem, - AccordionTitle, - CloseIcon, - IconWrapper, - OpenIcon, -} from "../../reusecore/Accordion"; -import { IoIosArrowUp } from "@react-icons/all-files/io/IoIosArrowUp"; import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown"; +import { IoIosArrowUp } from "@react-icons/all-files/io/IoIosArrowUp"; + +import { useLocation } from "@reach/router"; const TOC = () => { const [expand, setExpand] = useState(false); - - const [expandIdenity, setExpandIdentity] = useState(false); + const location = useLocation(); + const [expandIdenity, setExpandIdentity] = useState( + location.pathname.includes("/identity") + ); return ( @@ -94,7 +60,7 @@ const TOC = () => { onClick={() => setExpandIdentity((prev) => !prev)} > Idenitity - + {expandIdenity ? : } {expandIdenity && (
diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js index 4e301f965d52..48fef0d278c4 100644 --- a/src/sections/Projects/Sistent/about.js +++ b/src/sections/Projects/Sistent/about.js @@ -3,7 +3,7 @@ import { Container } from "../../../reusecore/Layout"; import SistentWrapper from "./sistent.style"; import TOC from "../../../components/SistentNavigation"; import IntraPage from "../../../components/handbook-navigation/intra-page"; -// import TocPagination from "../../../components/handbook-navigation/TocPagination"; +import TocPagination from "../../../components/handbook-navigation/TocPagination"; const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }]; @@ -20,9 +20,8 @@ const SistentAbout = () => {

About Sistent

 -

Hello !

- {/* */} + diff --git a/src/sections/Projects/Sistent/identity/color.js b/src/sections/Projects/Sistent/identity/color.js deleted file mode 100644 index e072dba5ca7c..000000000000 --- a/src/sections/Projects/Sistent/identity/color.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import { Container } from "../../../../reusecore/Layout"; -import SistentWrapper from "../sistent.style"; -import TOC from "../../../../components/SistentNavigation"; -import IntraPage from "../../../../components/handbook-navigation/intra-page"; - -const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }]; - -const SistentIdentityColor = () => { - return ( - -
-

Color

-
- -
- - - - -
- - ); -}; - -export default SistentIdentityColor; diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js new file mode 100644 index 000000000000..c4ff2472d322 --- /dev/null +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -0,0 +1,78 @@ +import React from "react"; +import BrandColors from "../../../../../assets/images/app/projects/sistent/brand-colors-table.svg"; +import GreyscaleColors from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table.svg"; +import BgColors from "../../../../../assets/images/app/projects/sistent/bg-colors-table.svg"; +import FunctionColors from "../../../../../assets/images/app/projects/sistent/function-colors-table.svg"; +import TextColors from "../../../../../assets/images/app/projects/sistent/text-colors-table.svg"; +import BorderColors from "../../../../../assets/images/app/projects/sistent/border-colors-table.svg"; +import { Col, Row } from "../../../../../reusecore/Layout"; + +const ColorCode = () => { + return ( +
+

+ 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

+ + + Brand colors + + +

Greyscale Colors

+ + + Greyscale colors + + +

Function 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

+ + + Background colors + + +

Text Colors

+ + + Text colors + + +

Border Colors

+ + + Border colors + + +
+ ); +}; + +export default ColorCode; diff --git a/src/sections/Projects/Sistent/identity/color/guidance.js b/src/sections/Projects/Sistent/identity/color/guidance.js new file mode 100644 index 000000000000..b7c1efb66fd3 --- /dev/null +++ b/src/sections/Projects/Sistent/identity/color/guidance.js @@ -0,0 +1,163 @@ +import React from "react"; +import { Col, Row } from "../../../../../reusecore/Layout"; +import TonalPalettes from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full.svg"; +import ContextVisuals5 from "../../../../../assets/images/app/projects/sistent/context-visuals-5.svg"; +import ContextVisuals6 from "../../../../../assets/images/app/projects/sistent/context-visuals-6.svg"; + +const ColorGuidance = () => { + return ( +
+

+ 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. +

+ + + Content Visuals + + + +

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. +

+ + + Content Visuals + + +

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. +

+ + + Content Visuals + + +

+ 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. +

+
+ ); +}; + +export default ColorGuidance; diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js new file mode 100644 index 000000000000..edf742075825 --- /dev/null +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -0,0 +1,91 @@ +import React, { useState } from "react"; +import { Container } from "../../../../../reusecore/Layout"; +import SistentWrapper from "../../sistent.style"; +import TOC from "../../../../../components/SistentNavigation"; +import IntraPage from "../../../../../components/handbook-navigation/intra-page"; +import Button from "../../../../../reusecore/Button"; +import ColorOverview from "./overview"; +import ColorGuidance from "./guidance"; +import ColorCode from "./code"; + +const overviewContents = [ + { id: 0, link: "#Introduction", text: "Introduction" }, + { id: 1, link: "#Color Anatomy", text: "Color Anatomy" }, + { id: 2, link: "#Layer Hirarchy", text: "Layer Hirarchy" }, + { + id: 3, + link: "#Green Color Accessbility", + text: "Green Color Accessbility", + }, +]; + +const guidanceContent = [ + { id: 0, link: "#Tonal Palettes", text: "Tonal Palettes" }, + { id: 1, link: "#Basic Colors", text: "Basic Colors" }, + { id: 2, link: "#Token Specification", text: "Token Specification" }, +]; + +const codeContent = [ + { id: 0, link: "#Primitive Category", text: "Primitive Category" }, + { id: 1, link: "#Semantic Category", text: "Semantic Category" }, +]; + +const SistentIdentityColor = () => { + const [activeTab, setActiveTab] = useState("overview"); + + const contents = () => { + if (activeTab === "overview") { + return overviewContents; + } else if (activeTab === "guidance") { + return guidanceContent; + } else if (activeTab === "code") { + return codeContent; + } + }; + + return ( + +
+

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. +

+
+
+ {activeTab === "overview" && } + {activeTab === "guidance" && } + {activeTab === "code" && } +
+ + +
+ + ); +}; + +export default SistentIdentityColor; diff --git a/src/sections/Projects/Sistent/identity/color/overview.js b/src/sections/Projects/Sistent/identity/color/overview.js new file mode 100644 index 000000000000..a41e500096bf --- /dev/null +++ b/src/sections/Projects/Sistent/identity/color/overview.js @@ -0,0 +1,201 @@ +import React from "react"; +import { Col, Row } from "../../../../../reusecore/Layout"; +import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.svg"; +import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.svg"; +import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.svg"; +import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.svg"; +import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.svg"; +import TocPagination from "../../../../../components/handbook-navigation/TocPagination"; + +const ColorOverview = () => { + return ( +
+

+ 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. +

+ + + Tonal Palette + + + +

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. +
    • +
+ This means, in effect, that while there is a fine blend of surfaces on + any given UI theme, there is also strict adherence to accessibility + guidelines and recommendations. +

+ + + Context Visuals + + +

+ 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. +
    • +
+ + + Context Visuals + + + +

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. +

+ + + Context Visuals + + +

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. +

+ + + Context Visuals + + +

+ 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. +

+ +
+ ); +}; + +export default ColorOverview; diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index bd2e9f8f0b3f..4ad8db44ade2 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -45,7 +45,7 @@ const SistentWrapper = styled.div` padding-top: 7rem; margin-top: -7rem; } - margin-left: 20rem; + padding-left: 20rem; display: flex; @media screen and (min-width: 1280px) and (max-width: 1350px) { margin-left: 16rem; @@ -178,7 +178,7 @@ const SistentWrapper = styled.div` } p { - margin-top: 10px; + margin-top: 15px; } input[type="checkbox"] + label { @@ -414,6 +414,7 @@ const SistentWrapper = styled.div` top: 10rem; right: 0rem; margin-right: 1rem; + margin-top: 10rem; padding-bottom: 5rem; align-items: left; justify-content: space-around; @@ -553,6 +554,39 @@ const SistentWrapper = styled.div` line-height: 0.9rem; font-style: italic; } + + .filterBtns { + display: flex; + margin-bottom: 1.25rem; + border-bottom: 1px solid #bec2c5; + margin-top: 5rem; + + button { + font-size: 1.25rem; + color: ${(props) => props.theme.secondaryColor}; + min-width: auto; + border: none; + border-bottom: 2px solid transparent; + border-radius: 0; + cursor: pointer; + padding: 0.5rem 2rem; + background: ${(props) => props.theme.body}; + transition: all 0.2s ease-in; + } + .active { + color: ${(props) => props.theme.text}; + border-bottom: 2px solid ${(props) => props.theme.text}; + } + } + + .main-content { + padding-top: 1rem; + } + + .image-container { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } `; export default SistentWrapper;