Ascona
Style Kit

This style guide shows all the acceptable styles allowed in this site.
Purchase
$38

Introduction

A style guide is meant to be used to help designers and contributors to this site have a set of clear design principles, typography styles, colours and icons to help them maintain the site in a consistent manner.

Direction

Please ensure that wherever possible any additional sections, articles or content refers to this guide to keep the art direction consistent.

Colour Palette

Looking for something else?

Primary Palette

Fill Colours
Brand
#e94e1b
Midnight Blue
#1a2b65
Lime Green
#65bc00
Orange
#ffab00
Tomato
#fe3e3e

Secondary Palette

Pastel Colours
Selago
#ffe1d7
Light Steel Blue
#a2b0e0
Light Goldenrod Yellow
#daf6b9
Old Lace
#daf6b9
Seashell
#daf6b9

Typograhy Palette

Grey Colours
Midnight Blue
#1a2b65
Dark Slate Blue
#4e5d78
Light Slate Grey
#8a94a6
Silver
#b0b7c3

Typograhy Palette

Neutral Tone
Silver
#b0b7c3
White Smoke
#ebecf0
Off White
#fafbfc
White
#ffffff

Typography Styles

Looking for something else?

Headings

Typography - Open Sans 700

Aa Bb Cc Dd Ee

Heading 1
55px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 3
36px

Aa Bb Cc Dd Ee

Heading 4
34px
Aa Bb Cc Dd Ee
Heading 5
28px
Aa Bb Cc Dd Ee
Heading 6
24px

Body Copy

Typography - Open Sans 400

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
18px

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, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

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, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

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, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Detail Messages
12px

Quotes

Typography - Open Sans 400
The ultimate Interface component kit built to create harmony across your products.
Plain Quote Block
18px
The ultimate Interface component kit built to create harmony across your products.
Additional Detail Messages
18px

Additional Copy Elements

Typography - Open Sans 400
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Dots
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Numbers
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Letters
16px

Additional Copy Elements

Typography - Open Sans 400

This line rendered as bold text.

Bold Text
18px

This line rendered as italicized text.

Italicized Text
18px

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

Deleted Text
18px

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

Underline Text
18px

You can use the mark tag to highlight text.

Highlight Text
18px

Elevation & Shadows

Looking for something else?

Elevation and Shadows

Outter Shadow, Inner Shadow
Shadow
S1
Shadow
S2
Shadow
S3
Shadow
S4
Shadow
S5
Shadow
S1
Shadow
S2
Shadow
S3

Avatars

Looking for something else?

Primary Buttons

Corner Radius
X Large
96px
Large
40px
Medium
32px
Small
24px
X Small
18px

AG

X Large
96px

AG

Large
40px

A

Medium
32px

A

Small
24px

A

X Small
18px

Buttons

Looking for something else?

Field Elements

Looking for something else?

Form Fields

Input Fields

Field Elements

Input Fields
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Alert Bars

Looking for something else?

Notification

Input Fields
Looks like we're having trouble
Default Alert Error
Looks like we're having trouble
Warning Alert
Looks like we're having trouble
Error Alert
Your information has been saved.
Default Alert Check
Your information has been saved.
Default Alert Grey
Your information has been saved.
Confirm Alert

Badges

Looking for something else?

Pill Badges

Corner Radius
5
32
32
32
32
5
32
3
22
3

Contextual Badges

Corner Radius
Default
Primary
Success
Warning
Error
Default
Primary
Success
Success
Success

Version Control

Corner Radius
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0

Icons

Looking for something else?
Image Based

Icon Set 1

Feather Icons by @Cole
HTML Embeds

Special Styles

For embeds and other page styles

Special Heading - <span>

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is some text inside of a div block.