SSW Typography & Web Design References
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.
HEADING STYLES TEMPLATES AND USE GUIDELINES
Heading 1 should be used sparingly.
Heading 1 is used for top-level page headings
Heading 2 is a good size for content
We 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.
Heading 3 is a comfortable size for content
This is a good size for subheadings within content
Heading 4 is used for inline headings
This is a good heading to use for small paragraphs.
Heading 5 is smaller
This 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.
HEADING 6 IS A SPECIAL HEADING USED FOR MAINLY THE SIDEBAR
A fancy heading.
LIST DESIGN TEMPLATES AND STYLE SAMPLES
- UL no class
- Properly formatted, this is what the unordered list styles should look like.
- OL no class
- Properly formatted, this is what the ordered list styles should look like.
TABLE DESIGN TEMPLATES AND STYLE SAMPLES
Normal
Default table with a thin border:
| Header 1 | Header 2 |
|---|---|
| Row 1 | Row 2 |
Data
Styled table:
| Header 1 | Header 2 |
|---|---|
| Row 1 | Row 2 |
QUOTE AND TEXT STYLE SAMPLES
Blockquotes are used to reference some quoted text
They can be multiline
IMAGE AND VIDEO FIGURES STYLE SAMPLES
Figure: Images should have descriptive text
BUTTON DESIGN TEMPLATES AND STYLE SAMPLES
The default button is SSW red. You can add an icon and make it large.
Link buttons:
Download button:
OTHER COMPONENTS
We use TinaCMS to build our website and we have made a group of reusable components which can be previewed on our Wiki.
COLORS AND BRANDING
What are our colors?
SSW's remarkable 4 squares are in the following colours:
#797979
#333333
#AAAAAA
#CC4141
When creating designs that incorporate a platform or application, use contextual accent colours which refer to that particular platform:
Angular
#DD0031
.NET
#5C2D91
Visual Studio
#9455CE
Blazor
#5C2D91
Xamarin
#3498DB
Azure
#0088D5
SharePoint
#038185
PowerBI
#F2C811
TinaCMS
#EC4815
The SSW red
The SSW red is #CC4141, which is a beautiful shade of red.
See the 3 most used color codes - Hexadecimal (web), RGB (computer monitors and TVs), and CMYK (printing) - for the SSW red:
| Color code | Value |
|---|---|
| HEX | #cc4141 |
| RGB (Red, Green, Blue) | (204, 65, 65) |
| CMYK (Cyan, Magenta, Yellow, Black) | (14,89,78,3) |
Related links
TIPS AND FAQ
What if a paragraph padding seems strange?
Your 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.
Your content should never be sitting naked on the page, it should always be wrapped in paragraphs. Refrain from using breaks.
Can I make h3 bigger?
No. 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.
Make sure your content is correctly formatted before changing the CSS.
How to I make a slider image?
Metro uses a strong typography influence. If you are not a designer, please refer this work to a designer.
Use 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.
What's the SSW font?
We use Helvetica Neue font for SSW logos.
We use Inter font family for web content.
Note: Previously, Open Sans was used for web content.
SSW Master Texts
SSW Mission
To find the best way to do everything.
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.
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.
Where do we have this?
SSW Experience + Technologies
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.
Where do we have this?
- Website <meta> description tag
- Search Engines' business pages and general social media accounts
SSW Addresses
Always refer to Our Offices page to get our master addresses.
Where do we have this?
- General events pages
- FireBootCamp pages
- Angular Hack Day pages
- MAUI Hack Day pages
- AI Hack Day pages
- Search Engines' business pages and general social media accounts
