Skip to content

Commit

Permalink
color pages complete
Browse files Browse the repository at this point in the history
Signed-off-by: lakshya <[email protected]>
  • Loading branch information
lakshz committed Feb 25, 2024
1 parent d29fe3d commit c080c9f
Show file tree
Hide file tree
Showing 22 changed files with 1,524 additions and 77 deletions.
63 changes: 63 additions & 0 deletions src/assets/images/app/projects/sistent/bg-colors-table.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions src/assets/images/app/projects/sistent/border-colors-table.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 107 additions & 0 deletions src/assets/images/app/projects/sistent/brand-colors-table.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions src/assets/images/app/projects/sistent/context-visuals-1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 66 additions & 0 deletions src/assets/images/app/projects/sistent/context-visuals-2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions src/assets/images/app/projects/sistent/context-visuals-3.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions src/assets/images/app/projects/sistent/context-visuals-4.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 95 additions & 0 deletions src/assets/images/app/projects/sistent/context-visuals-5.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions src/assets/images/app/projects/sistent/context-visuals-6.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
138 changes: 138 additions & 0 deletions src/assets/images/app/projects/sistent/function-colors-table.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 98 additions & 0 deletions src/assets/images/app/projects/sistent/greyscale-colors-table.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions src/assets/images/app/projects/sistent/text-colors-table.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
124 changes: 124 additions & 0 deletions src/assets/images/app/projects/sistent/tonal-palettes-full.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/assets/images/app/projects/sistent/tonal-palettes.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 8 additions & 42 deletions src/components/SistentNavigation/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<TOCWrapper>
Expand Down Expand Up @@ -94,7 +60,7 @@ const TOC = () => {
onClick={() => setExpandIdentity((prev) => !prev)}
>
Idenitity
<IoIosArrowDown />
{expandIdenity ? <IoIosArrowUp /> : <IoIosArrowDown />}
</li>
{expandIdenity && (
<div className="identity-sublinks">
Expand Down
5 changes: 2 additions & 3 deletions src/sections/Projects/Sistent/about.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" }];

Expand All @@ -20,9 +20,8 @@ const SistentAbout = () => {
<a id="About Sistent">
<h2>About Sistent</h2>
</a>
<p>Hello !</p>
</div>
{/* <TocPagination /> */}
<TocPagination />
</Container>
<IntraPage contents={contents} />
</div>
Expand Down
30 changes: 0 additions & 30 deletions src/sections/Projects/Sistent/identity/color.js

This file was deleted.

78 changes: 78 additions & 0 deletions src/sections/Projects/Sistent/identity/color/code.js
Original file line number Diff line number Diff line change
@@ -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 (
<div className="main-content">
<p>
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.
</p>
<a id="Primitive Category">
<h2>Primitive Category</h2>
</a>
<p>
Since this category will not be used directly in designs, it does not
have any role descriptions.
</p>
<h3>Brand Colors</h3>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img width="100%" src={BrandColors} alt="Brand colors" />
</Col>
</Row>
<h3>Greyscale Colors</h3>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img width="100%" src={GreyscaleColors} alt="Greyscale colors" />
</Col>
</Row>
<h3>Function Colors</h3>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img width="100%" src={FunctionColors} alt="Function colors" />
</Col>
</Row>
<a id="Semantic Category">
<h2>Semantic Category</h2>
</a>
<p>
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.
</p>
<h3>Background Colors</h3>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img width="100%" src={BgColors} alt="Background colors" />
</Col>
</Row>
<h3>Text Colors</h3>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img width="100%" src={TextColors} alt="Text colors" />
</Col>
</Row>
<h3>Border Colors</h3>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img width="100%" src={BorderColors} alt="Border colors" />
</Col>
</Row>
</div>
);
};

export default ColorCode;
163 changes: 163 additions & 0 deletions src/sections/Projects/Sistent/identity/color/guidance.js
Original file line number Diff line number Diff line change
@@ -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 (
<div className="main-content">
<p>
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.
</p>
<a id="Tonal Palettes">
<h2>Tonal Palettes</h2>
</a>
<p>
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.
</p>
<p>
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.
</p>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img src={TonalPalettes} alt="Content Visuals" />
</Col>
</Row>
<a id="Basic Colors">
<h2>Basic Colors</h2>
</a>
<p>
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.
</p>
<h3>Background Colors</h3>
<p>
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.
</p>
<h3>Text Colors</h3>
<p>
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.
</p>
<h3>Icon Colors</h3>
<p>
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.
</p>
<h3>Border Colors</h3>
<p>
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.
</p>
<a id="Token Specification">
<h2>Token Specification</h2>
</a>
<p>
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.
</p>
<h3>Tokenized Colors</h3>
<p>
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.
</p>
<p>
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.
</p>
<Row className="image-container" Hcenter>
<Col md={8} lg={8} sm={12}>
<img src={ContextVisuals5} alt="Content Visuals" />
</Col>
</Row>
<h3>The Role of Color Tokens</h3>
<p>
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.
</p>
<h3>Color Schema</h3>
<p>
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:
</p>
<p>
<strong>Type: </strong>
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.
</p>
<p>
<strong>Color Role: </strong>
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.
</p>
<p>
<strong>Prominence: </strong>
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.
</p>
<Row className="image-container" Hcenter>
<Col md={6} lg={6} sm={12}>
<img width="100%" src={ContextVisuals6} alt="Content Visuals" />
</Col>
</Row>
<p>
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.
</p>
</div>
);
};

export default ColorGuidance;
Loading

0 comments on commit c080c9f

Please sign in to comment.