Skip to content

Commit

Permalink
docs(docusaurus): color updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Manthos Matzios committed Aug 26, 2022
1 parent b7bba2c commit cc13b54
Show file tree
Hide file tree
Showing 5 changed files with 241 additions and 174 deletions.
33 changes: 18 additions & 15 deletions website/docs/webdev/3-Guidelines/1-typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ By adjusting letter-spacing to the environment you are working with you will hel
<br/>

### Text color
Body text color is blue-grey-5 (#3D5265) <br/>

Color also plays a key role in an interface’s typographic hierarchy, often by established types like: <br/>
- Brand colors and supplementary colors, for most interface text whether body or heading. <br/>
Expand All @@ -68,45 +69,47 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It

## <u> Desktop Styles </u>

<br/>

<div>
<div className="row" style={{ alignItems: 'flex', height: '120px' }}>
<div className="col col--6" >
<h1>Heading 1</h1>
<p style={{ fontWeight: '700', fontSize:2.75 + 'rem' ,lineHeight:1.875+'rem',fontFamily:'Roboto'}}> Heading 1</p>
</div>
<div className="col col--6">
<b>Font: Roboto Size: 48px or 3rem <br/> Letter spacing: -1.5%</b>
<b>Font: Roboto Size: 44px or 2.75rem <br/> Letter spacing: -1.5%</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center' , height: '120px' }}>
<div className="col col--6">
<h2>Heading 2</h2>
<p style={{ fontWeight: '700', fontSize:2 + 'rem' ,lineHeight:1.5+'rem',fontFamily:'Roboto'}}> Heading 2</p>
</div>
<div className="col col--6">
<b>Font: Roboto Size: 40px or 2.5rem <br/> Letter spacing: -1.5%</b>
<b>Font: Roboto Size: 32px or 2rem <br/> Letter spacing: -1.5%</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center' , height: '120px' }}>
<div className="col col--6">
<h3>Heading 3</h3>
<p style={{ fontWeight: '700', fontSize:1.625 + 'rem' ,lineHeight:1.5+'rem',fontFamily:'Roboto'}}> Heading 3</p>
</div>
<div className="col col--6">
<b>Font: Roboto Size: 36px or 2rem <br/> Letter spacing: -1.5%</b>
<b>Font: Roboto Size: 26px or 1.625rem <br/> Letter spacing: -1.5%</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<h4>Heading 4</h4>
<p style={{ fontWeight: '700', fontSize:1.25 + 'rem' ,lineHeight:1.5+'rem',fontFamily:'Roboto'}}> Heading 4</p>
</div>
<div className="col col--6">
<b>Font: Roboto Size: 24px or 1.5rem <br/> Letter spacing: -1.5%</b>
<b>Font: Roboto Size: 20px or 1.25rem <br/> Letter spacing: -1.5%</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
<div className="col col--6">
<h5>Heading 5</h5>
<p style={{ fontWeight: '700', fontSize:1.125 + 'rem' ,lineHeight:1.5+'rem',fontFamily:'Roboto'}}> Heading 5</p>
</div>
<div className="col col--6">
<b>Font: Roboto Size: 20px or 1.25rem <br/> Letter spacing: -1.5%</b>
<b>Font: Roboto Size: 18px or 1.125rem <br/> Letter spacing: -1.5%</b>
</div>
</div>
<div className="row" style={{ alignItems: 'center', height: '120px'}}>
Expand Down Expand Up @@ -248,13 +251,13 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
| font-size-00 | .75 |
| font-size-0 | .875 |
| font-size-1 | 1 |
| font-size-2 | 1.1 |
| font-size-2 | 1.125 |
| font-size-3 | 1.25 |
| font-size-4 | 1.5 |
| font-size-5 | 2 |
| font-size-6 | 2.5 |
| font-size-7 | 3 |
| font-size-8 | 3.5 |
| font-size-5 | 1.625 |
| font-size-6 | 1.875 |
| font-size-7 | 2 |
| font-size-8 | 2.75 |


### Font size fluid
Expand Down
Loading

0 comments on commit cc13b54

Please sign in to comment.