docs(docusaurus): typography and colors fixes according to comments o…

…n PR
eea · Sep 9, 2022 · ae20a72 · ae20a72
1 parent b67b1a7
commit ae20a72
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/website/docs/webdev/3-Guidelines/1-typography.mdx b/website/docs/webdev/3-Guidelines/1-typography.mdx
@@ -14,7 +14,7 @@ We use Arial as a web safe alternative font. It is similar in character and styl
 ### Weight
 
 Font weight is the thickness of a font's stroke, with various weights used to differentiate content hierarchy. The bold style emphasizes the importance in comparison with the regular font style in the font family. 
-We can use weights strarting from 300 (Light) up to 700 (Bold). Usually, the bold style is assigned to headings. Regular text is used for body text.
+We can use weights starting from 300 (Light) up to 700 (Bold). Usually, the bold style is assigned to headings. Regular text is used for body text.
 
 <h4 style={{ fontWeight: '300', display: 'flex', marginBlock: '10px' }}><span style={{ width: '100px' }}>Light</span> 300</h4>
 <h4 style={{ fontWeight: '400', display: 'flex', marginBlock: '10px'  }}><span style={{ width: '100px' }}>Regular</span> 400</h4>
@@ -75,39 +75,39 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
             <h1 className="h1">Heading 1</h1>
         </div>
         <div className="col col--6">
-            <b>Font Size: 44x or 2.75rem  <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
+            <b>Font Size: 44px or 2.75rem  <br/> Letter spacing: -1.5% <br/> Line height: 120%</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center' , height: '120px' }}>
         <div className="col col--6">
             <h2 className="h2">Heading 2</h2>
         </div>
         <div className="col col--6">
-            <b>Font Size: 40px or 2.5rem <br />  Letter spacing: -1.5% <br/> Line height: 120%</b>
+            <b>Font Size: 32px or 2rem <br />  Letter spacing: -1.5% <br/> Line height: 120%</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center' , height: '120px' }}>
         <div className="col col--6">
             <h3 className="h3">Heading 3</h3>
         </div>
         <div className="col col--6">
-            <b>Font Size: 36px or 2rem <br/>  Letter spacing: -1.5% <br/> Line height: 120%</b>
+            <b>Font Size: 26px or 1.625rem <br/>  Letter spacing: -1.5% <br/> Line height: 120%</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
             <h4 className="h4">Heading 4</h4>
         </div>
         <div className="col col--6">
-            <b>Font Size: 24px or 1.5rem <br/>  Letter spacing: -1.5% <br/> Line height: 120%</b>
+            <b>Font Size: 20px or 1.25rem <br/>  Letter spacing: -1.5% <br/> Line height: 120%</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
         <div className="col col--6">
             <h5 className="h5">Heading 5</h5>
         </div>
         <div className="col col--6">
-            <b>Font Size: 20px or 1.25rem <br/>  Letter spacing: -1.5% <br/> Line height: 120%</b>
+            <b>Font Size: 18px or 1.125rem <br/>  Letter spacing: -1.5% <br/> Line height: 120%</b>
         </div>
     </div>
     <div className="row" style={{ alignItems: 'center', height: '120px'}}>
@@ -203,8 +203,8 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
 
 ### Weight
 
-| Token name         | Value           | Style | 
-| ------------------ | ----------------| -------------- |
+| Token name         | Value           | Style             | 
+| ------------------ | --------------- | ----------------- |
 | font-weight-1      | 100             | Thin              |
 | font-weight-2      | 200             | Light             |
 | font-weight-3      | 300             | Book              |
@@ -218,8 +218,8 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
 ### Line height
 
 
-| Token name         | Value(no unit) |
-| ------------------ | ----------------| 
+| Token name         | Value(no unit)  |
+| ------------------ | --------------- | 
 | font-lineheight-00 | .95             |
 | font-lineheight-0  | 1.1             |
 | font-lineheight-1  | 1.25            |
@@ -232,7 +232,7 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
 ### Letter spacing
 
 | Token name             | Value(em)       |
-| ---------------------- | ----------------| 
+| ---------------------- | --------------- | 
 | font-letterspacing-000 | -.02            |
 | font-letterspacing-00  | -.015           |
 | font-letterspacing-0   | -.005           |
@@ -246,18 +246,18 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
 
 | Token name             | Value(rem)       | Value(px)        |
 | ---------------------- | ---------------- | ---------------- |
-| font-size-00          | .75              |  12              |
-| font-size-0           | .875             |  14              |
-| font-size-1           |  1               |  16              |
-| font-size-2           |  1.125           |  18              |
-| font-size-3           |  1.25            |  20              |
-| font-size-4           |  1.5             |  24              |
-| font-size-5           |  1.625           |  26              |
-| font-size-6           |  1.875           |  30              |
-| font-size-7           |  2rem            |  32              |
-| font-size-8           |  2.25            |  36              |
-| font-size-9           |  2.5             |  40              |
-| font-size-10          |  2.75            |  44              |
+| font-size-00           | .75              |  12              |
+| font-size-0            | .875             |  14              |
+| font-size-1            |  1               |  16              |
+| font-size-2            |  1.125           |  18              |
+| font-size-3            |  1.25            |  20              |
+| font-size-4            |  1.5             |  24              |
+| font-size-5            |  1.625           |  26              |
+| font-size-6            |  1.875           |  30              |
+| font-size-7            |  2rem            |  32              |
+| font-size-8            |  2.25            |  36              |
+| font-size-9            |  2.5             |  40              |
+| font-size-10           |  2.75            |  44              |
 
 ### Font size fluid
 

diff --git a/website/docs/webdev/3-Guidelines/2-colours.md b/website/docs/webdev/3-Guidelines/2-colours.md
@@ -128,8 +128,8 @@ This color should be eye-catching but not harsh. It can be liberally applied to
     <table style={{width:'%',float:'left'}}>
         <tbody>
             <tr>
-            <td style={{backgroundColor:'#0A99FF',width:100+'px',height:70+'px',textAlign:'center'}}>
-                    <div style={{color:'#3D5265',width:100+'%',textAlign:'center',height:70+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>#0A99FF</div>
+            <td style={{backgroundColor:'#0D98FB',width:100+'px',height:70+'px',textAlign:'center'}}>
+                    <div style={{color:'white',width:100+'%',textAlign:'center',height:70+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>#0D98FB</div>
                 </td>            
             </tr>
         </tbody>