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.

This 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 heading already contents the title of the page 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.
  1. OL no class
  2. 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 1Header 2
Row 1Row 2

Data

Styled table:

Header 1Header 2
Row 1Row 2

QUOTE AND TEXT STYLE SAMPLES

Blockquotes are used to reference some quoted text
They can be multiline

IMAGE AND VIDEO FIGURES STYLE SAMPLES

SSW logo

Figure: Images should have descriptive text

Video: Videos should have descriptive text and timing (4 mins)

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

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 codeValue
HEX#cc4141
RGB (Red, Green, Blue)(204, 65, 65)
CMYK (Cyan, Magenta, Yellow, Black)(0%, 68%, 68%, 20%)

Related links

TIPS AND FAQ

The 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 family for SSW logos.

We use Open Sans font family for web content.

For large headings, we use the "Light" variation.

"Regular" variation is used for body content for better readability.

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?

SSW Addresses

Always refer to Our Offices page to get our master addresses.

Where do we have this?