diff --git a/src/assets/images/app/projects/sistent/bg-colors-table-dark.svg b/src/assets/images/app/projects/sistent/bg-colors-table-dark.svg
new file mode 100644
index 000000000000..91f7f20481f4
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/bg-colors-table-dark.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/assets/images/app/projects/sistent/border-colors-table-dark.svg b/src/assets/images/app/projects/sistent/border-colors-table-dark.svg
new file mode 100644
index 000000000000..625a16299c3d
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/border-colors-table-dark.svg
@@ -0,0 +1,33 @@
+
diff --git a/src/assets/images/app/projects/sistent/brand-colors-table-dark.svg b/src/assets/images/app/projects/sistent/brand-colors-table-dark.svg
new file mode 100644
index 000000000000..82395f0e3ca2
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/brand-colors-table-dark.svg
@@ -0,0 +1,107 @@
+
diff --git a/src/assets/images/app/projects/sistent/context-visuals-6-dark.svg b/src/assets/images/app/projects/sistent/context-visuals-6-dark.svg
new file mode 100644
index 000000000000..04a33c67ced9
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/context-visuals-6-dark.svg
@@ -0,0 +1,36 @@
+
diff --git a/src/assets/images/app/projects/sistent/function-colors-table-dark.svg b/src/assets/images/app/projects/sistent/function-colors-table-dark.svg
new file mode 100644
index 000000000000..cc45005908d8
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/function-colors-table-dark.svg
@@ -0,0 +1,138 @@
+
diff --git a/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.svg b/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.svg
new file mode 100644
index 000000000000..243bb10e0907
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.svg
@@ -0,0 +1,98 @@
+
diff --git a/src/assets/images/app/projects/sistent/text-colors-table-dark.svg b/src/assets/images/app/projects/sistent/text-colors-table-dark.svg
new file mode 100644
index 000000000000..ed9acca0054b
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/text-colors-table-dark.svg
@@ -0,0 +1,72 @@
+
diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-dark.svg b/src/assets/images/app/projects/sistent/tonal-palettes-dark.svg
new file mode 100644
index 000000000000..405f0989b23c
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/tonal-palettes-dark.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.svg b/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.svg
new file mode 100644
index 000000000000..9e16bfa60d89
--- /dev/null
+++ b/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.svg
@@ -0,0 +1,124 @@
+
diff --git a/src/pages/projects/sistent/identity/spacing.js b/src/pages/projects/sistent/identity/spacing.js
index 2bf24ac64be8..7098ab9ecc43 100644
--- a/src/pages/projects/sistent/identity/spacing.js
+++ b/src/pages/projects/sistent/identity/spacing.js
@@ -1,5 +1,5 @@
import React from "react";
-import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing";
+import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing/index";
const IdentitySpacingPage = () => {
return About Sistent
+
Sorry, this page is still under work
@@ -30,19 +38,31 @@ const ColorCode = () => {
@@ -39,7 +43,10 @@ const ColorGuidance = () => {
diff --git a/src/sections/Projects/Sistent/identity/color/overview.js b/src/sections/Projects/Sistent/identity/color/overview.js index e595cf3c9f9b..2140cecc76b7 100644 --- a/src/sections/Projects/Sistent/identity/color/overview.js +++ b/src/sections/Projects/Sistent/identity/color/overview.js @@ -1,13 +1,15 @@ import React from "react"; import { Col, Row } from "../../../../../reusecore/Layout"; import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.svg"; +import TonalPalleteDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.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"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const ColorOverview = () => { + const { isDark } = useStyledDarkMode(); return (
@@ -87,7 +89,10 @@ const ColorOverview = () => {
+ 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. +
+ ++ 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 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 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. +
++ 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. +
+ ++ 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. +
+