Tina - Font update from Open Sans to Inter - documentation (#3268)

* TinaCMS content update Co-authored-by: Tiago Araujo <[email protected]> * TinaCMS content update Co-authored-by: Tiago Araujo <[email protected]> * TinaCMS content update Co-authored-by: Tiago Araujo <[email protected]> * TinaCMS content update Co-authored-by: Tiago Araujo <[email protected]> * TinaCMS content update Co-authored-by: Tiago Araujo <[email protected]> * TinaCMS content update Co-authored-by: Brady Stroud <[email protected]> --------- Co-authored-by: tina-cloud-app[bot] <58178390+tina-cloud-app[bot]@users.noreply.github.com> Co-authored-by: Brady Stroud <[email protected]>
SSWConsulting · Oct 28, 2024 · c374448 · c374448
1 parent 20bdd2e
commit c374448
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/content/company/typography.mdx b/content/company/typography.mdx
@@ -16,7 +16,7 @@ beforeBody:
     delay: 5
     _template: Carousel
 title: SSW Typography & Web Design References
-subTitle: "This page is a reference with templates for SSW designers and web content editors. We have tried to make it as simple as possible, under the assumption that users know how to correctly format tags, add classes and understand basic CSS.\n\n<SectionHeader headerText=\"HEADING STYLES TEMPLATES AND USE GUIDELINES\" />\n\n# Heading 1 should be used sparingly.\n\nThis is used for top-level page headings\n\n## Heading 2 is a good size for content\n\nWe should use heading 2 as the default heading for most text. The heading already contents the title of the page in h1, so there is technically no reason to use anything other than h2 in content.\n\n### Heading 3 is a comfortable size for content\n\nThis is a good size for subheadings within content\n\n#### Heading 4 is used for inline headings\n\nThis is a good heading to use for small paragraphs.\n\n##### Heading 5 is smaller\n\nThis is a spare heading that is not used by much. I do not think we will have much use for it since headings 2-4 should cover most cases.\n\n###### HEADING 6 IS A SPECIAL HEADING USED FOR MAINLY THE SIDEBAR\n\nA fancy heading.\n\n<SectionHeader headerText=\"LIST DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\n* UL no class\n* Properly formatted, this is what the unordered list styles should look like.\n\n1. OL no class\n2. Properly formatted, this is what the ordered list styles should look like.\n\n<SectionHeader headerText=\"TABLE DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\n#### Normal\n\nDefault table with a thin border:\n\n<TableLayout tableStyle=\"basicBorder\" headers={[\"Header 1\", \"Header 2\"]} rows={[{ cells: [{ cellValue: \"Row 1\" }, { cellValue: \"Row 2\" }] }]} firstColBold={false} />\n\n#### Data\n\nStyled table:\n\n<TableLayout\n  tableStyle=\"styled\"\n  headers={[\"Header 1\", \"Header 2\"]}\n  rows={[\n    { cells: [{ cellValue: \"Row 1\" }, { cellValue: \"Row 2\" }], isHeader: false }\n  ]}\n/>\n\n<SectionHeader headerText=\"QUOTE AND TEXT STYLE SAMPLES\" />\n\n> Blockquotes are used to reference some quoted text\\\n> They can be multiline\n\n<SectionHeader headerText=\"IMAGE AND VIDEO FIGURES STYLE SAMPLES\" />\n\n<CustomImage src=\"/images/company-logos/downloads/images/ssw-logo.png\" altText=\"SSW logo\" alignment=\"items-start\" caption=\"Figure: Images should have descriptive text\" height={400} width={400} captionColor=\"text-sswBlack\" />\n\n<VideoEmbed url=\"https://www.youtube.com/watch?v=Jveq6VFjWTA\" videoWidth=\"w-full\" uncentre={true} caption=\"Videos should have descriptive text and timing\" duration=\"4 mins\" removeMargin={true} />\n\n<SectionHeader headerText=\"BUTTON DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\nThe default button is SSW red. You can add an icon and make it large.\n\nLink buttons:\n\n<UtilityButton buttonText=\"Small button\" btnIcon=\"BsArrowRightCircle\" size=\"small\" link=\"#\" uncentered={false} removeTopMargin={true} openInNewTab={false} />\n\n<UtilityButton buttonText=\"Medium button\" link=\"#\" size=\"medium\" btnIcon=\"BsArrowRightCircle\" animated={false} uncentered={false} removeTopMargin={false} />\n\nDownload button:\n\n<CustomDownloadButton btnText=\"Download\" btnLink=\"#\" />\n\n<SectionHeader headerText=\"OTHER COMPONENTS\" />\n\nWe use [TinaCMS](https://tina.io/) to build our website and we have made a group of reusable components which can be previewed on our [Wiki](https://github.com/SSWConsulting/SSW.Website/wiki/Available-Tina-Components).\n\n<SectionHeader headerText=\"COLORS AND BRANDING\" />\n\n### What are our colors?\n\nSSW's remarkable 4 squares are in the following colours:\n\n<ColorBlock\n  colorRow={[\n    {\n      firstColor: \"#797979\",\n      secondColor: \"#333333\",\n      fText: \"#797979\",\n      sText: \"#333333\"\n    },\n    {\n      firstColor: \"#AAAAAA\",\n      fText: \"#AAAAAA\",\n      secondColor: \"#CC4141\",\n      sText: \"#CC4141\"\n    }\n  ]}\n/>\n\nWhen creating designs that incorporate a platform or application, use contextual accent colours which refer to that particular platform:\n\n<ColorPalette />\n\n### The SSW red\n\nThe SSW red is\_#CC4141, which is a beautiful shade of red.\n\nSee the 3 most used color codes - Hexadecimal (web), RGB (computer monitors and TVs), and CMYK (printing) - for the SSW red:\n\n<TableLayout\n  headers={[\"Color code\", \"Value\"]}\n  rows={[\n    { cells: [{ cellValue: \"HEX\" }, { cellValue: \"#cc4141\" }], isHeader: false },\n    {\n      cells: [\n        { cellValue: \"RGB (Red, Green, Blue)\" },\n        { cellValue: \"(204, 65, 65)\" }\n      ]\n    },\n    {\n      cells: [\n        { cellValue: \"CMYK (Cyan, Magenta, Yellow, Black)\" },\n        { cellValue: \"(0%, 68%, 68%, 20%)\" }\n      ]\n    }\n  ]}\n  firstColBold={true}\n  tableStyle=\"styled\"\n/>\n\n### Related links\n\n* [Rules to Better Branding](https://www.ssw.com.au/rules/rules-to-better-branding)\n* [5 visual elements of a brand identity](https://www.untethereddesign.com/blog/5-visual-elements)\n\n<SectionHeader headerText=\"TIPS AND FAQ\" />\n\n### The paragraph padding seems strange :/\n\nYour content should be wrapped in a div class=\"section\".\_You should not be relying on br or p tags to get the correct padding. Lines within a div.section should be wrapped in paragraphs.\n\nYour content should never be sitting naked on the page, it should always be wrapped in paragraphs. Refrain from using breaks.\n\n### Can I make h3 bigger?\n\nNo.\_There is absolutely no reason you should need to change heading sizes. Your content should be ordered correctly in terms of page heading (h1), followed by section headings (h2), then by sub-section headings (h3) and paragraph headings (h4). These are correctly determined by the size and at no point should you ever have to change the CSS.\n\nMake sure your content is correctly formatted before changing the CSS.\n\n### How to I make a slider image?\n\nMetro uses a strong typography influence. If you are not a designer, please refer this work to a designer.\n\nUse type as your centerpiece and work around it. I have no guidelines on colors or typeface because this should be independent to your needs. If you are uncertain, Helvetica will be an appropriate starting point.\n\n### What's the SSW font?\n\nWe use\_Helvetica Neue\_font family for\_[SSW logos](https://www.ssw.com.au/ssw/logo/ssw/).\n\nWe use\_Open Sans\_font family for web content.\n\nFor large headings, we use the \"Light\" variation.\n\n\"Regular\" variation is used for body content for better readability.\n\n### SSW Master Texts\n\n#### **SSW Mission**\n\n> To find the best way to do everything.\\\n> To identify and use best practices (in technology, DevOps, and Scrum) to navigate the dangers of software development and produce the best possible software solutions.\\\n> SSW is strong at Mastery, our Purpose is focused on ROI (mainstream technology, deploying often, and quality coding practices) and we aim for Team Aligned Autonomy.\n\n##### Where do we have this?\n\n* [About Us page](https://www.ssw.com.au/company/about-us)\n* [SugarLearning page](https://www.sugarlearning.com/companies/SSW/items/8145/Introduction-About-SSW)\n\n#### **SSW Experience + Technologies**\n\n> SSW Consulting has over 30 years of experience developing awesome Microsoft solutions that today build on top of Angular, React, Vue, Azure, Azure DevOps (was TFS), SharePoint, Office 365, Blazor, .NET, WebAPI, Dynamics 365, and SQL Server.\n\n##### Where do we have this?\n\n* Website \\<meta> description tag\n* [Homepage](https://www.ssw.com.au)\n* [Company page](https://www.ssw.com.au/company)\n* [Our People page](https://www.ssw.com.au/people/)\n* Search Engines' business pages and general social media accounts\n\n#### **SSW Addresses**\n\nAlways refer to [Our Offices page](https://www.ssw.com.au/offices) to get our master addresses.\n\n##### Where do we have this?\n\n* [Our Offices pages](https://www.ssw.com.au/offices)\n  * [Sydney directions page](https://www.ssw.com.au/offices/sydney#Directions)\n  * [Melbourne directions page](https://www.ssw.com.au/offices/melbourne#Directions)\n  * [Brisbane directions page](https://www.ssw.com.au/offices/brisbane#Directions)\n  * [Newcastle directions page](https://www.ssw.com.au/offices/newcastle#Directions)\n  * [Strasbourg directions page](https://www.ssw.com.au/offices/strasbourg#Directions)\n  * [Hangzhou directions page](https://www.ssw.com.au/offices/hangzhou#Directions)\n* [SSW Chapel site](https://sswchapel.com.au/)\n* General [events pages](https://www.ssw.com.au/events)\n* [FireBootCamp](https://firebootcamp.com/) pages\n* [Angular Hack Day](https://angularhackday.com/) pages\n* [MAUI Hack Day](https://mauihackday.com/) pages\n* [AI Hack Day](https://aihackday.com/) pages\n* Search Engines' business pages and general social media accounts\n"
+subTitle: "This page is a reference with templates for SSW designers and web content editors. We have tried to make it as simple as possible, under the assumption that users know how to correctly format tags, add classes and understand basic CSS.\n\n<SectionHeader headerText=\"HEADING STYLES TEMPLATES AND USE GUIDELINES\" />\n\n# Heading 1 should be used sparingly.\n\nHeading 1 is used for top-level page headings\n\n## Heading 2 is a good size for content\n\nWe should use heading 2 as the default heading for most text. The main title of a page is in h1, so there is technically no reason to use anything other than h2 in content.\n\n### Heading 3 is a comfortable size for content\n\nThis is a good size for subheadings within content\n\n#### Heading 4 is used for inline headings\n\nThis is a good heading to use for small paragraphs.\n\n##### Heading 5 is smaller\n\nThis is a spare heading that is not used by much. I do not think we will have much use for it since headings 2-4 should cover most cases.\n\n###### HEADING 6 IS A SPECIAL HEADING USED FOR MAINLY THE SIDEBAR\n\nA fancy heading.\n\n<SectionHeader headerText=\"LIST DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\n* UL no class\n* Properly formatted, this is what the unordered list styles should look like.\n\n1. OL no class\n2. Properly formatted, this is what the ordered list styles should look like.\n\n<SectionHeader headerText=\"TABLE DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\n#### Normal\n\nDefault table with a thin border:\n\n<TableLayout tableStyle=\"basicBorder\" headers={[\"Header 1\", \"Header 2\"]} rows={[{ cells: [{ cellValue: \"Row 1\" }, { cellValue: \"Row 2\" }] }]} firstColBold={false} />\n\n#### Data\n\nStyled table:\n\n<TableLayout\n  tableStyle=\"styled\"\n  headers={[\"Header 1\", \"Header 2\"]}\n  rows={[\n    { cells: [{ cellValue: \"Row 1\" }, { cellValue: \"Row 2\" }], isHeader: false }\n  ]}\n/>\n\n<SectionHeader headerText=\"QUOTE AND TEXT STYLE SAMPLES\" />\n\n> Blockquotes are used to reference some quoted text\\\n> They can be multiline\n\n<SectionHeader headerText=\"IMAGE AND VIDEO FIGURES STYLE SAMPLES\" />\n\n<CustomImage src=\"/images/company-logos/downloads/images/ssw-logo.png\" altText=\"SSW logo\" alignment=\"items-start\" caption=\"Figure: Images should have descriptive text\" height={400} width={400} captionColor=\"text-sswBlack\" />\n\n<VideoEmbed url=\"https://www.youtube.com/watch?v=Jveq6VFjWTA\" videoWidth=\"w-full\" uncentre={true} caption=\"Videos should have descriptive text and timing\" duration=\"4 mins\" removeMargin={true} />\n\n<SectionHeader headerText=\"BUTTON DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\nThe default button is SSW red. You can add an icon and make it large.\n\nLink buttons:\n\n<UtilityButton buttonText=\"Small button\" btnIcon=\"BsArrowRightCircle\" size=\"small\" link=\"#\" uncentered={false} removeTopMargin={true} openInNewTab={false} />\n\n<UtilityButton buttonText=\"Medium button\" link=\"#\" size=\"medium\" btnIcon=\"BsArrowRightCircle\" animated={false} uncentered={false} removeTopMargin={false} />\n\nDownload button:\n\n<CustomDownloadButton btnText=\"Download\" btnLink=\"#\" />\n\n<SectionHeader headerText=\"OTHER COMPONENTS\" />\n\nWe use [TinaCMS](https://tina.io/) to build our website and we have made a group of reusable components which can be previewed on our [Wiki](https://github.com/SSWConsulting/SSW.Website/wiki/Available-Tina-Components).\n\n<SectionHeader headerText=\"COLORS AND BRANDING\" />\n\n### What are our colors?\n\nSSW's remarkable 4 squares are in the following colours:\n\n<ColorBlock\n  colorRow={[\n    {\n      firstColor: \"#797979\",\n      secondColor: \"#333333\",\n      fText: \"#797979\",\n      sText: \"#333333\"\n    },\n    {\n      firstColor: \"#AAAAAA\",\n      fText: \"#AAAAAA\",\n      secondColor: \"#CC4141\",\n      sText: \"#CC4141\"\n    }\n  ]}\n/>\n\nWhen creating designs that incorporate a platform or application, use contextual accent colours which refer to that particular platform:\n\n<ColorPalette />\n\n### The SSW red\n\nThe SSW red is\_#CC4141, which is a beautiful shade of red.\n\nSee the 3 most used color codes - Hexadecimal (web), RGB (computer monitors and TVs), and CMYK (printing) - for the SSW red:\n\n<TableLayout\n  headers={[\"Color code\", \"Value\"]}\n  rows={[\n    { cells: [{ cellValue: \"HEX\" }, { cellValue: \"#cc4141\" }], isHeader: false },\n    {\n      cells: [\n        { cellValue: \"RGB (Red, Green, Blue)\" },\n        { cellValue: \"(204, 65, 65)\" }\n      ]\n    },\n    {\n      cells: [\n        { cellValue: \"CMYK (Cyan, Magenta, Yellow, Black)\" },\n        { cellValue: \"(0%, 68%, 68%, 20%)\" }\n      ]\n    }\n  ]}\n  firstColBold={true}\n  tableStyle=\"styled\"\n/>\n\n### Related links\n\n* [Rules to Better Branding](https://www.ssw.com.au/rules/rules-to-better-branding)\n* [5 visual elements of a brand identity](https://www.untethereddesign.com/blog/5-visual-elements)\n\n<SectionHeader headerText=\"TIPS AND FAQ\" />\n\n### What if a paragraph padding seems strange?\n\nYour content should be wrapped in a div class=\"section\".\_You should not be relying on br or p tags to get the correct padding. Lines within a div.section should be wrapped in paragraphs.\n\nYour content should never be sitting naked on the page, it should always be wrapped in paragraphs. Refrain from using breaks.\n\n### Can I make h3 bigger?\n\nNo.\_There is absolutely no reason you should need to change heading sizes. Your content should be ordered correctly in terms of page heading (h1), followed by section headings (h2), then by sub-section headings (h3) and paragraph headings (h4). These are correctly determined by the size and at no point should you ever have to change the CSS.\n\nMake sure your content is correctly formatted before changing the CSS.\n\n### How to I make a slider image?\n\nMetro uses a strong typography influence. If you are not a designer, please refer this work to a designer.\n\nUse type as your centerpiece and work around it. I have no guidelines on colors or typeface because this should be independent to your needs. If you are uncertain, Helvetica will be an appropriate starting point.\n\n### What's the SSW font?\n\nWe use\_**Helvetica Neue**\_font for\_[SSW logos](https://www.ssw.com.au/ssw/logo/ssw/).\n\nWe use\_[**Inter** font family](https://fonts.google.com/specimen/Inter) for web content.\n\n**Note:** Previously, Open Sans was used for web content.\n\n### SSW Master Texts\n\n#### **SSW Mission**\n\n> To find the best way to do everything.\\\n> To identify and use best practices (in technology, DevOps, and Scrum) to navigate the dangers of software development and produce the best possible software solutions.\\\n> SSW is strong at Mastery, our Purpose is focused on ROI (mainstream technology, deploying often, and quality coding practices) and we aim for Team Aligned Autonomy.\n\n##### Where do we have this?\n\n* [About Us page](https://www.ssw.com.au/company/about-us)\n* [SugarLearning page](https://www.sugarlearning.com/companies/SSW/items/8145/Introduction-About-SSW)\n\n#### **SSW Experience + Technologies**\n\n> SSW Consulting has over 30 years of experience developing awesome Microsoft solutions that today build on top of Angular, React, Vue, Azure, Azure DevOps (was TFS), SharePoint, Office 365, Blazor, .NET, WebAPI, Dynamics 365, and SQL Server.\n\n##### Where do we have this?\n\n* Website \\<meta> description tag\n* [Homepage](https://www.ssw.com.au)\n* [Company page](https://www.ssw.com.au/company)\n* [Our People page](https://www.ssw.com.au/people/)\n* Search Engines' business pages and general social media accounts\n\n#### **SSW Addresses**\n\nAlways refer to [Our Offices page](https://www.ssw.com.au/offices) to get our master addresses.\n\n##### Where do we have this?\n\n* [Our Offices pages](https://www.ssw.com.au/offices)\n  * [Sydney directions page](https://www.ssw.com.au/offices/sydney#Directions)\n  * [Melbourne directions page](https://www.ssw.com.au/offices/melbourne#Directions)\n  * [Brisbane directions page](https://www.ssw.com.au/offices/brisbane#Directions)\n  * [Newcastle directions page](https://www.ssw.com.au/offices/newcastle#Directions)\n  * [Strasbourg directions page](https://www.ssw.com.au/offices/strasbourg#Directions)\n  * [Hangzhou directions page](https://www.ssw.com.au/offices/hangzhou#Directions)\n* [SSW Chapel site](https://sswchapel.com.au/)\n* General [events pages](https://www.ssw.com.au/events)\n* [FireBootCamp](https://firebootcamp.com/) pages\n* [Angular Hack Day](https://angularhackday.com/) pages\n* [MAUI Hack Day](https://mauihackday.com/) pages\n* [AI Hack Day](https://aihackday.com/) pages\n* Search Engines' business pages and general social media accounts\n"
 sidebar: |
   Table of contents: