Skip to content

Commit

Permalink
change(docusaurus): color guideline updates and spacing tokens docume…
Browse files Browse the repository at this point in the history 
…ntation #148
  • Loading branch information
@ichim-david
ichim-david committed Jun 2, 2022
2 parents 2cf78e5 + 8a395fc commit c1154ba
Show file tree
Hide file tree
Showing 72 changed files with 594 additions and 148 deletions.
36 changes: 18 additions & 18 deletions website/docs/webdev/3-Guidelines/1-typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,57 +19,57 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
#### Heading 1
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| mobile | Roboto | 30px or 1.875rem | 45px or 2.8rem | <p style={{fontSize:1.875+'rem',lineHeight:2.8+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| mobile | Archivo | 30px or 1.875rem | 45px or 2.8rem | <p style={{fontSize:1.875+'rem',lineHeight:2.8+'rem',fontFamily:'Archivo'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| desktop |Roboto|48px or 3rem | 72px or 4.5rem | <p style={{fontSize:3+'rem',lineHeight:4.5+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| desktop |Archivo|48px or 3rem | 72px or 4.5rem | <p style={{fontSize:3+'rem',lineHeight:4.5+'rem',fontFamily:'Archivo'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| mobile | Roboto | 3XL <br/> 30px <br/> 1.875rem | LH-3XL <br/> 45px <br/> 2.8rem | <p style={{fontSize:1.875+'rem',lineHeight:2.8+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| mobile | Archivo | 3XL <br/> 30px <br/> 1.875rem | LH-3XL <br/> 45px <br/> 2.8rem | <p style={{fontSize:1.875+'rem',lineHeight:2.8+'rem',fontFamily:'Archivo'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| desktop |Roboto| 6XL <br/> 48px <br/> 3rem | LH-6XL 72px <br/> 4.5rem | <p style={{fontSize:3+'rem',lineHeight:4.5+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| desktop |Archivo| 6XL <br/> 48px <br/> 3rem | LH-6XL 72px <br/> 4.5rem | <p style={{fontSize:3+'rem',lineHeight:4.5+'rem',fontFamily:'Archivo'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


#### Heading 2
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| mobile | Roboto | 24px or 1.5rem | 36px or 2.25rem | <p style={{fontSize:1.5+'rem',lineHeight:2.25+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
| desktop |Roboto|40px or 2.5rem | 60px or 3.75rem| <p style={{fontSize:2.5+'rem',lineHeight:3.75+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| mobile | Roboto | 2XL <br/> 24px <br/> 1.5rem | LH-2XL <br/> 36px <br/> 2.25rem | <p style={{fontSize:1.5+'rem',lineHeight:2.25+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
| desktop |Roboto| 5XL <br/> 40px <br/> 2.5rem | LH-5XL <br/> 60px <br/> 3.75rem| <p style={{fontSize:2.5+'rem',lineHeight:3.75+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

#### Heading 3
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| mobile | Roboto | 20px or 1.25rem | 30px or 1.875rem | <p style={{fontSize:1.25+'rem',lineHeight:1.875+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto|36px or 2.25rem | 54px or 3.375rem | <p style={{fontSize:2.25+'rem',lineHeight:3.375+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| mobile | Roboto | XL <br/> 20px <br/> 1.25rem | LH-XL <br/> 30px <br/> 1.875rem | <p style={{fontSize:1.25+'rem',lineHeight:1.875+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto| 4XL <br/> 36px <br/> 2.25rem | LH-4XL <br/> 54px <br/> 3.375rem | <p style={{fontSize:2.25+'rem',lineHeight:3.375+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

#### Heading 4
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| mobile | Roboto | 18px or 1.125rem | 27px or 1.7rem | <p style={{fontSize:1.125+'rem',lineHeight:1.7+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto|24px or 1.5rem |36px or 2.25rem | <p style={{fontSize:1.5+'rem',lineHeight:2.25+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
| mobile | Roboto | L <br/> 18px <br/> 1.125rem | LH-L <br/> 27px <br/> 1.7rem | <p style={{fontSize:1.125+'rem',lineHeight:1.7+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto| 2XL <br/> 24px <br/> 1.5rem | LH-2XL <br/> 36px <br/> 2.25rem | <p style={{fontSize:1.5+'rem',lineHeight:2.25+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>

#### Heading 5
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| desktop |Roboto|20px or 1.25rem | 30px or 1.875rem | <p style={{fontSize:1.25+'rem',lineHeight:1.875+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto| XL <br/> 20px <br/> 1.25rem | LH-XL <br/> 30px <br/> 1.875rem | <p style={{fontSize:1.25+'rem',lineHeight:1.875+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

#### Heading 6
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| desktop |Roboto|18px or 1.125rem | 27px or 1.7rem | <p style={{fontSize:1.125+'rem',lineHeight:1.7+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto| L <br/> 18px <br/> 1.125rem | LH-L <br/> 27px <br/> 1.7rem | <p style={{fontSize:1.125+'rem',lineHeight:1.7+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

#### Body
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| mobile | Roboto | 16px or 1rem| 24px or 1.5rem | <p style={{fontSize:1+'rem',lineHeight:1.5+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto|16px or 1rem| 24px or 1.5rem | <p style={{fontSize:1+'rem',lineHeight:1.5+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| mobile | Roboto | M <br/> 16px <br/> 1rem| LH-M <br/> 24px <br/> 1.5rem | <p style={{fontSize:1+'rem',lineHeight:1.5+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto| M <br/> 16px <br/> 1rem| LH-M <br/> 24px <br/> 1.5rem | <p style={{fontSize:1+'rem',lineHeight:1.5+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

#### Caption
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| mobile | Roboto | 14px or 0.875rem| 21px or 1.3rem | <p style={{fontSize:0.875+'rem',lineHeight:1.3+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto|16px or 0.875rem | 21px or 1.3rem | <p style={{fontSize:0.875+'rem',lineHeight:1.3+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| mobile | Roboto | S <br/> 14px <br/> 0.875rem| LH-S <br/> 21px <br/> 1.3rem | <p style={{fontSize:0.875+'rem',lineHeight:1.3+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto| M <br/> 16px <br/> 0.875rem | LH-M <br/> 24px <br/> 1.5rem | <p style={{fontSize:0.875+'rem',lineHeight:1.3+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

#### Small Text
| | Font |Font size | Line height | Example |
| ------- | --- |-------------------------------------------- | --------------------------------------------- |---
| mobile | Roboto | 12px or 0.75rem | 18px or 1.125rem | <p style={{fontSize:0.75+'rem',lineHeight:1.125+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto|12px or 0.75rem | 18px or 1.125rem | <p style={{fontSize:0.75+'rem',lineHeight:1.125+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| mobile | Roboto | XS <br/> 12px <br/> 0.75rem | LH-XS <br/> 18px <br/> 1.125rem | <p style={{fontSize:0.75+'rem',lineHeight:1.125+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
| desktop |Roboto| XS <br/> 12px <br/> 0.75rem | LH-XS <br/> 18px <br/> 1.125rem | <p style={{fontSize:0.75+'rem',lineHeight:1.125+'rem',fontFamily:'Roboto'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>



Expand Down

0 comments on commit c1154ba

Please sign in to comment.