Style Guide

Sketch Cloud Links

The links to the designs

Come here for updated versions of the designs, if you ever lose your links (because let's face it, there are a lot of design links floating around). You can just remember one link - the link to this page.

Buttons

Buttons

Of the clickable variety

Primary Buttons

This is a primary button
Primary button
60px
@black
This is a secondary button
Primary button
60px
@black
This is a tertiary button
Primary button
60px
@black

Hover

This is a primary button
Primary button
60px
@black
This is a secondary button
Primary button
60px
@black
This is a tertiary button
Primary button
60px
@black

Disabled

This is a primary button
Primary button
60px
@black
This is a secondary button
Primary button
60px
@black
This is a tertiary button
Primary button
60px
@black

Iconography

Sail Homes Icons

Fairly self-explanatory, right?

Use this as your icon download library. Clicking an icon will open it in a new tab so you can download it (I haven't worked out how to make each a direct download link yet).

Colour Palettes

Primary Palette

The Sail Homes BRAND COLOURS

Our colour palette lets people know they can trust us. It’s filled with reassuringly calm blues and greens, along with clean design and lots of white space.

Marine is the primary brand colour, used boldly and creatively. It can be as a background, as important text, or used with opacity as overlays on imagery.

Azure is used for text links. It’s our secondary brand colour.

White, Polar, Mist & Fog are background colours and add a sense of depth to white pages.

Marine to Azure gradient is a bold combination, best used for our primary buttons.

Like this one
Marine
#049dcc
Azure
#35b8be
Polar
#e0f5f8
Mist
#f5fbfc
Fog
#F8FCFD
White
#ffFFFF

Secondary Palette

Our Typography Colours

Our secondary palette is mainly for typography: the fonts and text across the Sail Homes brand.

Charcoal is the standard text colour for headings.

Dark Slate and Slate are used for body copy, including these paragraphs. Paragraphs are usually Dark Slate.

Shuttle is used for secondary headings.

Dust is used for labels, date and time stamps.

Black
#000000
Charcoal
#191b22
Dark Slate
#233666
Slate
#546285
Shuttle
#758ca5
Dust
#9b9eb8

Tertiary Palette

For when the user interacts

These colours are used for backgrounds, alerts, warnings, irreversible actions and validation messages. Shown when the user has directly interacted (or is about to).

Apple is for success messages, to confirm a positive action, and to show correct validation in form fields.

Coral is for the most important information on a page at any given moment. To draw the eye in text paragraphs and as something the user needs to take action on.

Firebrick is for error messages, incorrect validation and irreversible buttons (like delete).

Apple
#5EB64D
Coral
#FF8946
Firebrick
#AA0000

Classes

Background Classes

Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle
Marine
Azure
Polar
Mist
Fog
White
Black
Charcoal
Dark Slate
Slate
Shuttle
Dust
Apple
Coral
Firebrick

Components

Cards

To contain Elements

No matter what size screen you're seeing this on, the examples below are the same for each breakpoint. Each shows the padding on the card (parent container). The padding should account for the default margins on headings and paragraphs, and if custom padding needs to be applied to a specific element on a page, do so without editing the global style.

Never apply a width or height value to a card. The width and height should  be determined by the card's parent container.

Desktop

50px padding on each side

padding: 40px 50px 30px;

Tablet

40px padding on each side

padding: 30px 40px 20px;

Mob Landscape

30px padding on each side.

padding: 20px 30px 10px;

Mobile

20px padding on each side.

padding: 10px 20px 0;

Now here's an example of the responsive card with the global styles. Hint, resize your browser window to see how this responds.

Responsive Card

Resize your screen - the padding on this card responds properly

Typography

Headings

Font Family: Signika Negative

Aa Bb Cc Dd Ee

Heading 1
60px
@black

Aa Bb Cc Dd Ee

Heading 2
50px
@azure

Aa Bb Cc Dd Ee

Heading 3
40px
@black

Aa Bb Cc Dd Ee

Heading 4
32px
@charcoal
Aa Bb Cc Dd Ee
Heading 5
26px
@charcoal
Aa Bb Cc Dd Ee
Heading 6
20px
@slate

Paragraph

Font Family: Quicksand. @SLATE

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Paragraph Large
21px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Paragraph Normal, Colour SLATE
18px

Additional Type

Subtitle: Quicksand @Dust

This line rendered as bold text.

This line rendered as italicized text.

This line of text is meant to be treated as deleted text.

This line of text is underlined, used primarily for links.

You can use the mark tag to highlight text.