Styleguide
About this website
This website was proudly designed, developed and loved into creation in the amazing Great Southland of Australia by an Aussie web design studio:
Sapphire Coast Design
100% Handmade and hand-coded, painstakingly stitched together with Html, LESS CSS, Javascript, Responsive Web Design, the absolutely amazing Statamic CMS, Bootstrap framework, Typekit, Font Awesome, Atom editor, Codekit, iTerm, Serif Affinity Designer & Photo, several 13" & 16" Macbook Pro's with multiple monitors and all of the upgrades - AND exceptional home roasted coffee thanks to a Behmor 1600 from CoffeeSnobs.
Love this site and want a website just as amazing? Contact Us...
Colours
Color 1
Color 2
Color 3
Color 4
Colour 1 100% 70% 50% 30% 20% 10% 5%
Colour 1 at 100%
Colour 1 at 70%
Colour 1 at 30%
Colour 1 at 10%
Colour 1 - Dark
Colour 2
100%
70%
50%
30%
20%
10%
5%
Colour 2 at 100%
Colour 2 at 70%
Colour 2 at 30%
Colour 2 at 10%
Colour 2 - Dark
Colour 2 - Light
Colour 3
100%
70%
50%
30%
20%
10%
5%
Colour 3 at 100%
Colour 3 at 70%
Colour 3 at 30%
Colour 3 at 10%
Colour 4
100%
70%
50%
30%
20%
10%
5%
Colour 4 at 100%
Colour 4 at 70%
Colour 4 at 30%
Colour 4 at 10%
Content Blocks
(regular text)
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a paragraph set to leading text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
(text size small)
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
(text size large)
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
(text size extra large)
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Long headings
This is an h2 in long text lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non lectus id eros ornare mollis. Integer sagittis dolor ut nulla sodales, vitae blandit tellus tincidunt.
With some text lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non lectus id eros ornare mollis. Integer sagittis dolor ut nulla sodales, vitae blandit tellus tincidunt.
H3 looks like quisque nulla nisi, rhoncus sed varius vitae, ultricies quis purus. Mauris sed metus sit amet lacus ultricies accumsan auctor at enim. Morbi venenatis pretium cursus. Mauris ut varius turpis. Maecenas hendrerit justo a tortor rutrum consectetur.
With some morbi venenatis pretium cursus. Mauris ut varius turpis. Maecenas hendrerit justo a tortor rutrum consectetur. Quisque ac accumsan velit. Sed id purus auctor leo mattis semper. Curabitur a commodo mi. Suspendisse semper ac sem a iaculis.
The H4 is used a fair bit for quisque ac accumsan velit. Sed id purus auctor leo mattis semper. Curabitur a commodo mi. Suspendisse semper ac sem a iaculis.
Curabitur a commodo mi. Suspendisse semper ac sem a iaculis. Aenean malesuada fermentum libero non feugiat. Morbi porta nibh velit, in aliquet turpis lacinia semper.
Does anyone actually ever use H5s? I do not aenean malesuada fermentum libero non feugiat. Morbi porta nibh velit, in aliquet turpis lacinia semper.
Quisque ac accumsan velit. Sed id purus auctor leo mattis semper. Curabitur a commodo mi. Suspendisse semper ac sem a iaculis. Aenean malesuada fermentum libero non feugiat. Morbi porta nibh velit, in aliquet turpis lacinia semper.
This is a block colour test
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Heading 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a test
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Heading 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
NOTE: You may need to scroll the table below left/right for more information
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a block colour test
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Heading 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a test
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Heading 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est loutlinem.
NOTE: You may need to scroll the table below left/right for more information
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
