This website design system originally was intended for personal consumption, hence, its
scanty content.
Although the content dearth may present it in the form of a style guide or a pattern library,
that is by no means the aim. However, the resource is progressive, and its contents will be
elaborated from time to time as I create more designs.
The immediate aim of the design system is not to be an enterprise-type design system, even though
that is a possibility in the future. However, individual / personal consumers, as well as small
businesses may find it insightful and useful.
Typography
Font family
Use not more than three font families to keep the website structured, as well as to enhance readability.
Display font families as shown below:
Use default User Agent rendition, or style according to choice. However, when styling as chosen, a lower-level
heading should not appear bigger than a relatively higher-level heading. Hierarchy should be maintained
for usability and accessibility.
Font weight
Although there are no specifications for font weight among the heading levels
being considered, styling should convey visual hierarchy. It is best practice to maintain cascading sizes
and/or weight from h1 to h6 in descending order.
Texts that give extra piece of information about other elements (textual or non-textual).
Font family
N/A — Use the defaults provided by the User Agent. For example, use the default
rendition of the <figcaption> tag, the
alt and title attributes, etc.
Styling
Use the default. However, the size, weight,
color, background-color, and other propertiies
of the <figcaption> could be styled as chosen, but in a way
that enhances usability, accessibility, and inclusion.
Small class
The small class used throughout this resource to give extra piece
of information could also be used. See illustration below.
Illustration
HTML
<div>
The quick brown fox... <br> <span class="small">
See fox's speed above.</span>
</div>
Do not use the <em> and <strong>
tags to set text style and weight. Use CSS to style text.
— Line Height:
For good readability, usability, and user experience, line height for
heading texts spanning more than one line, as well as line height for all texts
— on small or large screens — should be about 25 to 30 percent more than the character height. See illustration
below.
Good
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Too Wide
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Too Narrow
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Colour
The colour palette expands the unique aesthetic that represents website and its progressive dynamism.
The colours are used creatively to enhance readability and visual balance, and to achieve usability,
accessibility, and inclusion.
— Colour Palette
Each of the primary, secondary, and neutral color families have been divided into four swatches
ranging from dark to light. HEX and RGB values are provided for easy application.
Primary Colors
BLUE
Blue 1 | 003B5C | rgb(0, 59, 92)
Blue 2 | 496f92 | rgb(73, 111, 146)
Blue 3 | c0d1e2 | rgb(192, 209, 226)
Blue 4 | f7f7f7 | rgb(247, 247, 247)
RED
Red 1 | ff0000 | rgb(255, 0, 0)
Red 2 | f83549 | rgb(248, 53, 73)
Red 3 | ffb3bb | rgb(255, 179, 187)
Red 4 | f8d7db | rgb(248, 215, 219)
GREEN
Green 1 | 008000 | rgb(0, 128, 0)
Green 2 | 5fb378 | rgb(95, 179, 120)
Green 3 | cce7d4 | rgb(204, 231, 212)
Green 4 | dbf5e3 | rgb(219, 245, 227)
Secondary Colours
PURPLE
Purple 1 | 800080 | rgb(128, 0, 128)
Purple 2 | 974597 | rgb(151, 69, 151)
Purple 3 | 80567A | rgb(128, 86, 122)
Purple 4 | f8c5f0 | rgb(248, 197, 240)
ORANGE
Orange 1 | ff8800 | rgb(255, 136, 0)
Orange 2 | e1811f | rgb(255, 129, 31)
Orange 3 | f0d0ab | rgb(240, 208, 171)
Orange 4 | fdfbeb | rgb(253, 251, 235)
Neutral Colours
BLACK & WHITE
Neutral 1 | 000000 | rgb(0, 0, 0)
Neutral 2 | 2b2b2b | rgb(43, 43, 43)
Neutral 3 | e9ebed | rgb(233, 235, 237)
Neutral 4 | ffffff | rgb(255, 255, 255)
— Colour Families
The colour palette is grouped into three colour families, each containing the core colours used in the
design of this website design system, and a few others used in the
CSS @font-face Cheat Sheet project.
When creating colour groups for usage and application, any of the colours within the colour families
could be combined.
Components and Patterns
Components are the reusable building blocks of this website design system — hamburger menu icon (appears on mobile view),
information bar (pink bar in the header), etc.
Each component serves a specific purpose or user need, and has been designed to create patterns and intuitive user experiences.
Using appropriate colours from the colour palette, all components have been created to be visible and to afford the user
some intuition.
As this design system grows, more components will be specified — buttons, icons, search bars, reusable forms, avatars, banners,
breadcrumbs, header, footer, etc.
The hamburger menu icon is used as the primary menu icon on mobile view. Because it holds the primary navigation menu items,
it is aligned to the top-left area of the viewport to enhance visual hierarcy and use.
The human eyes naturally move from left to right when reading, and the head, from top to bottom.
Hence, top-left patterned menu icons gain quick visibility.
To further enhance its appearance, suitable foreground colours chosen from the colour palette were used
to style the icon.
Additionally, a "Menu" text is appended to the bottom of the icon for accessibility and affordance.
The text gives users a clue as to what the icon is for, rather than assuming every user understands the function of the icon.
The information bar is centralised at the bottom of the header. That is because the centre supports prominence.
However, to buttress visibility because the bar holds vital information, a shade of red is used as the background
color, as red attracts attention to itself.
HTML
<div>
The quick brown fox jumps over the lazy dog.
</div>
CSS
div {
background-color: #FFB3BB;
border-radius: 20px;
font-family: 'Courier New', Courier, monospace;
font-size: 1.1em;
font-weight: 600;
margin-top: 250px;/* Define your own margin if needed */
padding: 15px;
text-align: center;
}
Principles
Accessibility, Usability, and Inclusion Over Aesthetics
A beautiful website with appealing look and feel is lovely. However, the experience of every possible user of your website,
in any possible category should be given greater importance. Read more about
accessibility, usability, and inclusion.
HTML 5 Tags Over Divs, Classes, and IDs
Divs are great for wrapping elements. Classes and Ids
are excellent parameters for defining styles and behaviour. However, where an HTML tag designed for a
specific purpose exists, it is recommended to use such a tag over a div with a class
and/or an id for the same purpose. For example, when creating a navigation menu:
Naming Convention
When assigning a class or an id to an element, use descriptive nomenclature
for code readability and continuity.
Use a hyphen for a compound class and id, or a concatenated (one word) description,
instead of an underscore or a camel case. Although, both underscore and camel case-joined descriptions work as well,
it is recommended that compound class and id descriptions
are hyphenated or concatenated as one word.
