diff --git a/src/assets/images/app/projects/sistent/bg-colors-table-dark.png b/src/assets/images/app/projects/sistent/bg-colors-table-dark.png new file mode 100644 index 000000000000..7d2afa6a700a Binary files /dev/null and b/src/assets/images/app/projects/sistent/bg-colors-table-dark.png differ 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 deleted file mode 100644 index 91f7f20481f4..000000000000 --- a/src/assets/images/app/projects/sistent/bg-colors-table-dark.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/bg-colors-table.png b/src/assets/images/app/projects/sistent/bg-colors-table.png new file mode 100644 index 000000000000..44d2fad2d81d Binary files /dev/null and b/src/assets/images/app/projects/sistent/bg-colors-table.png differ diff --git a/src/assets/images/app/projects/sistent/bg-colors-table.svg b/src/assets/images/app/projects/sistent/bg-colors-table.svg deleted file mode 100644 index c532e50cec4e..000000000000 --- a/src/assets/images/app/projects/sistent/bg-colors-table.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/border-colors-table-dark.png b/src/assets/images/app/projects/sistent/border-colors-table-dark.png new file mode 100644 index 000000000000..6bc1932344d6 Binary files /dev/null and b/src/assets/images/app/projects/sistent/border-colors-table-dark.png differ 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 deleted file mode 100644 index 625a16299c3d..000000000000 --- a/src/assets/images/app/projects/sistent/border-colors-table-dark.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/border-colors-table.png b/src/assets/images/app/projects/sistent/border-colors-table.png new file mode 100644 index 000000000000..d668a7bad309 Binary files /dev/null and b/src/assets/images/app/projects/sistent/border-colors-table.png differ diff --git a/src/assets/images/app/projects/sistent/border-colors-table.svg b/src/assets/images/app/projects/sistent/border-colors-table.svg deleted file mode 100644 index 25899e73b5d4..000000000000 --- a/src/assets/images/app/projects/sistent/border-colors-table.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/brand-colors-table-dark.png b/src/assets/images/app/projects/sistent/brand-colors-table-dark.png new file mode 100644 index 000000000000..f3a3d3301790 Binary files /dev/null and b/src/assets/images/app/projects/sistent/brand-colors-table-dark.png differ 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 deleted file mode 100644 index 82395f0e3ca2..000000000000 --- a/src/assets/images/app/projects/sistent/brand-colors-table-dark.svg +++ /dev/null @@ -1,107 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/brand-colors-table.png b/src/assets/images/app/projects/sistent/brand-colors-table.png new file mode 100644 index 000000000000..21846768f68e Binary files /dev/null and b/src/assets/images/app/projects/sistent/brand-colors-table.png differ diff --git a/src/assets/images/app/projects/sistent/brand-colors-table.svg b/src/assets/images/app/projects/sistent/brand-colors-table.svg deleted file mode 100644 index fc27dd653781..000000000000 --- a/src/assets/images/app/projects/sistent/brand-colors-table.svg +++ /dev/null @@ -1,107 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/components-table-dark.png b/src/assets/images/app/projects/sistent/components-table-dark.png new file mode 100644 index 000000000000..3bb5200ba39e Binary files /dev/null and b/src/assets/images/app/projects/sistent/components-table-dark.png differ diff --git a/src/assets/images/app/projects/sistent/components-table.png b/src/assets/images/app/projects/sistent/components-table.png new file mode 100644 index 000000000000..078ff2bd7e13 Binary files /dev/null and b/src/assets/images/app/projects/sistent/components-table.png differ diff --git a/src/assets/images/app/projects/sistent/context-visuals-1.png b/src/assets/images/app/projects/sistent/context-visuals-1.png new file mode 100644 index 000000000000..8a5ab3ff6cdc Binary files /dev/null and b/src/assets/images/app/projects/sistent/context-visuals-1.png differ diff --git a/src/assets/images/app/projects/sistent/context-visuals-1.svg b/src/assets/images/app/projects/sistent/context-visuals-1.svg deleted file mode 100644 index 924f7450b7d5..000000000000 --- a/src/assets/images/app/projects/sistent/context-visuals-1.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/context-visuals-2.png b/src/assets/images/app/projects/sistent/context-visuals-2.png new file mode 100644 index 000000000000..c29a0ed20d33 Binary files /dev/null and b/src/assets/images/app/projects/sistent/context-visuals-2.png differ diff --git a/src/assets/images/app/projects/sistent/context-visuals-2.svg b/src/assets/images/app/projects/sistent/context-visuals-2.svg deleted file mode 100644 index 82ab80255f6c..000000000000 --- a/src/assets/images/app/projects/sistent/context-visuals-2.svg +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/context-visuals-3.png b/src/assets/images/app/projects/sistent/context-visuals-3.png new file mode 100644 index 000000000000..a73fc404bd56 Binary files /dev/null and b/src/assets/images/app/projects/sistent/context-visuals-3.png differ diff --git a/src/assets/images/app/projects/sistent/context-visuals-3.svg b/src/assets/images/app/projects/sistent/context-visuals-3.svg deleted file mode 100644 index 8460f8ea3e40..000000000000 --- a/src/assets/images/app/projects/sistent/context-visuals-3.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/context-visuals-4.png b/src/assets/images/app/projects/sistent/context-visuals-4.png new file mode 100644 index 000000000000..620a4d7671f2 Binary files /dev/null and b/src/assets/images/app/projects/sistent/context-visuals-4.png differ diff --git a/src/assets/images/app/projects/sistent/context-visuals-4.svg b/src/assets/images/app/projects/sistent/context-visuals-4.svg deleted file mode 100644 index 5ba19703c2d1..000000000000 --- a/src/assets/images/app/projects/sistent/context-visuals-4.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/context-visuals-5.png b/src/assets/images/app/projects/sistent/context-visuals-5.png new file mode 100644 index 000000000000..17803855ca44 Binary files /dev/null and b/src/assets/images/app/projects/sistent/context-visuals-5.png differ diff --git a/src/assets/images/app/projects/sistent/context-visuals-5.svg b/src/assets/images/app/projects/sistent/context-visuals-5.svg deleted file mode 100644 index c7c91eb61e5f..000000000000 --- a/src/assets/images/app/projects/sistent/context-visuals-5.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/context-visuals-6-dark.png b/src/assets/images/app/projects/sistent/context-visuals-6-dark.png new file mode 100644 index 000000000000..5e1eee56a0f7 Binary files /dev/null and b/src/assets/images/app/projects/sistent/context-visuals-6-dark.png differ 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 deleted file mode 100644 index 04a33c67ced9..000000000000 --- a/src/assets/images/app/projects/sistent/context-visuals-6-dark.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/context-visuals-6.png b/src/assets/images/app/projects/sistent/context-visuals-6.png new file mode 100644 index 000000000000..818df11acd04 Binary files /dev/null and b/src/assets/images/app/projects/sistent/context-visuals-6.png differ diff --git a/src/assets/images/app/projects/sistent/context-visuals-6.svg b/src/assets/images/app/projects/sistent/context-visuals-6.svg deleted file mode 100644 index f1f5e8b64bee..000000000000 --- a/src/assets/images/app/projects/sistent/context-visuals-6.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/function-colors-table-dark.png b/src/assets/images/app/projects/sistent/function-colors-table-dark.png new file mode 100644 index 000000000000..1493cb1e1715 Binary files /dev/null and b/src/assets/images/app/projects/sistent/function-colors-table-dark.png differ 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 deleted file mode 100644 index cc45005908d8..000000000000 --- a/src/assets/images/app/projects/sistent/function-colors-table-dark.svg +++ /dev/null @@ -1,138 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/function-colors-table.png b/src/assets/images/app/projects/sistent/function-colors-table.png new file mode 100644 index 000000000000..860843e1a28d Binary files /dev/null and b/src/assets/images/app/projects/sistent/function-colors-table.png differ diff --git a/src/assets/images/app/projects/sistent/function-colors-table.svg b/src/assets/images/app/projects/sistent/function-colors-table.svg deleted file mode 100644 index 28e1d25932cc..000000000000 --- a/src/assets/images/app/projects/sistent/function-colors-table.svg +++ /dev/null @@ -1,138 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.png b/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.png new file mode 100644 index 000000000000..a3baf41bbc9d Binary files /dev/null and b/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.png differ 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 deleted file mode 100644 index 243bb10e0907..000000000000 --- a/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.svg +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/greyscale-colors-table.png b/src/assets/images/app/projects/sistent/greyscale-colors-table.png new file mode 100644 index 000000000000..d56a49b84a8d Binary files /dev/null and b/src/assets/images/app/projects/sistent/greyscale-colors-table.png differ diff --git a/src/assets/images/app/projects/sistent/greyscale-colors-table.svg b/src/assets/images/app/projects/sistent/greyscale-colors-table.svg deleted file mode 100644 index 8c451536c267..000000000000 --- a/src/assets/images/app/projects/sistent/greyscale-colors-table.svg +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/text-colors-table-dark.png b/src/assets/images/app/projects/sistent/text-colors-table-dark.png new file mode 100644 index 000000000000..13fb7214cab5 Binary files /dev/null and b/src/assets/images/app/projects/sistent/text-colors-table-dark.png differ 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 deleted file mode 100644 index ed9acca0054b..000000000000 --- a/src/assets/images/app/projects/sistent/text-colors-table-dark.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/text-colors-table.png b/src/assets/images/app/projects/sistent/text-colors-table.png new file mode 100644 index 000000000000..126db0cfd25f Binary files /dev/null and b/src/assets/images/app/projects/sistent/text-colors-table.png differ diff --git a/src/assets/images/app/projects/sistent/text-colors-table.svg b/src/assets/images/app/projects/sistent/text-colors-table.svg deleted file mode 100644 index 28d6bcf67e1e..000000000000 --- a/src/assets/images/app/projects/sistent/text-colors-table.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.png b/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.png new file mode 100644 index 000000000000..4f42f0913384 Binary files /dev/null and b/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.png differ 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 deleted file mode 100644 index 9e16bfa60d89..000000000000 --- a/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.svg +++ /dev/null @@ -1,124 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-full.png b/src/assets/images/app/projects/sistent/tonal-palettes-full.png new file mode 100644 index 000000000000..a74af5997df0 Binary files /dev/null and b/src/assets/images/app/projects/sistent/tonal-palettes-full.png differ diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-full.svg b/src/assets/images/app/projects/sistent/tonal-palettes-full.svg deleted file mode 100644 index 4941a845aaf3..000000000000 --- a/src/assets/images/app/projects/sistent/tonal-palettes-full.svg +++ /dev/null @@ -1,124 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/tonal-palettes.png b/src/assets/images/app/projects/sistent/tonal-palettes.png new file mode 100644 index 000000000000..e81d6e2d9a5f Binary files /dev/null and b/src/assets/images/app/projects/sistent/tonal-palettes.png differ diff --git a/src/assets/images/app/projects/sistent/tonal-palettes.svg b/src/assets/images/app/projects/sistent/tonal-palettes.svg deleted file mode 100644 index 89999bf6232f..000000000000 --- a/src/assets/images/app/projects/sistent/tonal-palettes.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/images/app/projects/sistent/type-table-2-dark.png b/src/assets/images/app/projects/sistent/type-table-2-dark.png index bd74f313da6e..e69934e6af80 100644 Binary files a/src/assets/images/app/projects/sistent/type-table-2-dark.png and b/src/assets/images/app/projects/sistent/type-table-2-dark.png differ diff --git a/src/assets/images/app/projects/sistent/type-table-2-light.png b/src/assets/images/app/projects/sistent/type-table-2-light.png index 5c23906fc5c4..027da28c674e 100644 Binary files a/src/assets/images/app/projects/sistent/type-table-2-light.png and b/src/assets/images/app/projects/sistent/type-table-2-light.png differ diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index f43eabccf9a8..e9d49d6ebbd0 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -1,16 +1,20 @@ 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 BrandColorsDark from "../../../../../assets/images/app/projects/sistent/brand-colors-table-dark.svg"; -import GreyscaleColorsDark from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table-dark.svg"; -import BgColorsDark from "../../../../../assets/images/app/projects/sistent/bg-colors-table-dark.svg"; -import FunctionColorsDark from "../../../../../assets/images/app/projects/sistent/function-colors-table-dark.svg"; -import TextColorsDark from "../../../../../assets/images/app/projects/sistent/text-colors-table-dark.svg"; -import BorderColorsDark from "../../../../../assets/images/app/projects/sistent/border-colors-table-dark.svg"; +import BrandColors from "../../../../../assets/images/app/projects/sistent/brand-colors-table.png"; +import GreyscaleColors from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table.png"; +import BgColors from "../../../../../assets/images/app/projects/sistent/bg-colors-table.png"; +import FunctionColors from "../../../../../assets/images/app/projects/sistent/function-colors-table.png"; +import TextColors from "../../../../../assets/images/app/projects/sistent/text-colors-table.png"; +import BorderColors from "../../../../../assets/images/app/projects/sistent/border-colors-table.png"; +import ComponentColors from "../../../../../assets/images/app/projects/sistent/components-table.png"; + +import BrandColorsDark from "../../../../../assets/images/app/projects/sistent/brand-colors-table-dark.png"; +import GreyscaleColorsDark from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table-dark.png"; +import BgColorsDark from "../../../../../assets/images/app/projects/sistent/bg-colors-table-dark.png"; +import FunctionColorsDark from "../../../../../assets/images/app/projects/sistent/function-colors-table-dark.png"; +import TextColorsDark from "../../../../../assets/images/app/projects/sistent/text-colors-table-dark.png"; +import BorderColorsDark from "../../../../../assets/images/app/projects/sistent/border-colors-table-dark.png"; +import ComponentColorsDark from "../../../../../assets/images/app/projects/sistent/components-table-dark.png"; + import { Col, Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; @@ -103,6 +107,20 @@ const ColorCode = () => { /> +

Component Colors

+

+ Tokens here are component specific and must be used only for the + component that they are referencing. +

+ + + Border colors + + ); }; diff --git a/src/sections/Projects/Sistent/identity/color/guidance.js b/src/sections/Projects/Sistent/identity/color/guidance.js index 992bf2192b32..a77b7d23628e 100644 --- a/src/sections/Projects/Sistent/identity/color/guidance.js +++ b/src/sections/Projects/Sistent/identity/color/guidance.js @@ -1,10 +1,10 @@ import React from "react"; import { Col, Row } from "../../../../../reusecore/Layout"; -import TonalPalettes from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full.svg"; -import TonalPalettesDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full-dark.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"; -import ContextVisuals6Dark from "../../../../../assets/images/app/projects/sistent/context-visuals-6-dark.svg"; +import TonalPalettes from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full.png"; +import TonalPalettesDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full-dark.png"; +import ContextVisuals5 from "../../../../../assets/images/app/projects/sistent/context-visuals-5.png"; +import ContextVisuals6 from "../../../../../assets/images/app/projects/sistent/context-visuals-6.png"; +import ContextVisuals6Dark from "../../../../../assets/images/app/projects/sistent/context-visuals-6-dark.png"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const ColorGuidance = () => { diff --git a/src/sections/Projects/Sistent/identity/color/overview.js b/src/sections/Projects/Sistent/identity/color/overview.js index 2140cecc76b7..276ed64b1ab7 100644 --- a/src/sections/Projects/Sistent/identity/color/overview.js +++ b/src/sections/Projects/Sistent/identity/color/overview.js @@ -1,11 +1,11 @@ import React from "react"; import { Col, Row } from "../../../../../reusecore/Layout"; -import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.svg"; +import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.png"; 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 ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.png"; +import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; +import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; +import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const ColorOverview = () => { diff --git a/src/sections/Projects/Sistent/identity/typography/code.js b/src/sections/Projects/Sistent/identity/typography/code.js index 8755a1170b33..757116f3fbb5 100644 --- a/src/sections/Projects/Sistent/identity/typography/code.js +++ b/src/sections/Projects/Sistent/identity/typography/code.js @@ -2,6 +2,7 @@ import React from "react"; import TypeTable1 from "../../../../../assets/images/app/projects/sistent/type-table-1-light.png"; import TypeTable1Dark from "../../../../../assets/images/app/projects/sistent/type-table-1-dark.png"; + import TypeTable2 from "../../../../../assets/images/app/projects/sistent/type-table-2-light.png"; import TypeTable2Dark from "../../../../../assets/images/app/projects/sistent/type-table-2-dark.png"; import { Col, Row } from "../../../../../reusecore/Layout"; diff --git a/src/sections/Projects/Sistent/identity/typography/guidance.js b/src/sections/Projects/Sistent/identity/typography/guidance.js index 38d3a9164296..6964abe76d11 100644 --- a/src/sections/Projects/Sistent/identity/typography/guidance.js +++ b/src/sections/Projects/Sistent/identity/typography/guidance.js @@ -5,8 +5,6 @@ import TypeScale2 from "../../../../../assets/images/app/projects/sistent/type-s import TypeScale2Dark from "../../../../../assets/images/app/projects/sistent/type-scale-2-dark.png"; import TypeScale3 from "../../../../../assets/images/app/projects/sistent/type-scale-3-light.png"; import TypeScale3Dark from "../../../../../assets/images/app/projects/sistent/type-scale-3-dark.png"; -import TypeDetails1 from "../../../../../assets/images/app/projects/sistent/type-details-1-light.png"; -import TypeDetails1Dark from "../../../../../assets/images/app/projects/sistent/type-details-1-dark.png"; import { Col, Row } from "../../../../../reusecore/Layout"; @@ -91,12 +89,12 @@ const TypographyGuidance = () => { 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 - at those early stages before use. + in the early stages before use.

With these seven different text sizes derived from the type scale, we - have come up with ten fonts that can be applied in multiple use cases - and across multiple devices. This variation ensures that fonts are not + 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 @@ -112,33 +110,6 @@ const TypographyGuidance = () => { 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.

-

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

-

Paragraph

-

- A bulk of text content is written in body or paragraph fonts. These are - less prominent 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. -

Font Specification

 @@ -146,17 +117,9 @@ const TypographyGuidance = () => { 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. -

-

- With these seven different text sizes derived from the type scale, we - have come up with ten 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. + 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

@@ -185,23 +148,22 @@ const TypographyGuidance = () => { Three font sizes have been earmarked to function in this capacity for the text needs in Layer5 and across all of its products.

+

Label

- Below are a list of Layer5’s fonts along with hints on how they could be - applied to create usable and efficient text for our interfaces. For - reference purposes, more documentation can be done like how frequently - these fonts can appear on a page, what ui elements or text content they - can be used for, and how to adjust some font properties to suit multiple - scenarios. Responsive design documentation of the chosen fonts should be - documented as well to govern their usage and application. + 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.

- - - Type Details - - ); };