Ascend Media

Web Style Guide

Logo

Typography

Body text is set in Futura STD.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Futura STD, 200 (light)

Futura STD, 200 (light), italic

Futura STD, 400 (regular)

Futura STD, 400 (regular), italic

Futura STD, 700 (bold)

Futura STD, 700 (bold), italic

Futura STD, 900 (heavy)

Futura STD, 900 (heavy), italic

Headers

Headers are set in Oswald or Futura STD.

Header 1

72px/79.2px (400%/110%)
light (200)

Header 2

51.4333px/56.5833px (285.7%/110%)
regular (400)

Header 3

Oswald
41.1333px/45.25px (228.5%/110%)
regular (400)

Header 4

30.85px/33.9333px (171.4%/110%)
bold (700)

Header 5

27px/29.7px (150%/110%)
bold (700)

Header 6

18px/21.6px (100%/180%)
bold (700)

More Type

The pre element represents a block of pre-formatted text, in which structure is represented by typographic conventions rather than by elements. Such examples are an e-mail (with paragraphs indicated by blank lines, lists indicated by lines prefixed with a bullet), fragments of computer code (with structure indicated according to the conventions of that language) or displaying ASCII art. Here’s an example showing the printable characters of ASCII:

  ! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

The blockquote element represents a section that is being quoted from another source. If you wish to add a citation, enclose it within a <footer> tag:

Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.
Winston Churchill, in a speech to the House of Commons. 11th November 1947

The ul and ol elements

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

The table element

The Very Best Eggnog	Serves 12	Serves 24
Milk	1 quart	2 quart
Cinnamon Sticks	1	2
Vanilla Bean, Split	1	2
Cloves	5	10
Mace	10	20
Egg Yolks	12	24
Cups Sugar	1 ½ cups	3 cups
Dark Rum	1 ½ cups	3 cups
Brandy	1 ½ cups	3 cups
Vanilla	1 tbsp	2 tbsp
Light Cream	1 quart	2 quart

Color

Cyan

#008eca
rgba(0, 142, 202, 1)

.color-primary
.bgcolor-primary
var(--color-primary)

Yellow

#efb71b
rgba(239, 183, 27, 1)

.color-secondary
.bgcolor-secondary
var(--color-secondary)

Green

#6aab3d
rgba(106, 171, 61 ,1)

.color-tertiary
.bgcolor-tertiary
var(--color-tertiary)

Purple

#8f1d5e
rgba(143, 29, 94, 1)

.color-accent
.bgcolor-accent
var(--color-accent)

Black

#000
rgba(0, 0, 0, 1)

.color-black
.bgcolor-black
var(--color-black)

Dark Dark

#222
rgba(34, 34, 34, 1)

.color-darkdark
.bgcolor-darkdark
var(--color-darkdark)

Dark

#333
rgba(51, 51, 51, 1)

.color-dark
.bgcolor-dark
var(--color-dark)

Dark Light

#555
rgba(85, 85, 85, 1)

.color-darklight
.bgcolor-darklight
var(--color-darklight)

Light Dark

#999
rgba(153, 153, 153, 1)

.color-lightdark
.bgcolor-lightdark
var(--color-lightdark)

Light

#ccc
rgba(204, 204, 204, 1)

.color-light
.bgcolor-light
var(--color-light)

Light Light

#eee
rgba(238, 238, 238, 1)

.color-lightlight
.bgcolor-lightlight
var(--color-lightlight)

White

#fff
rgba(255, 255, 255, 1)

.color-white
.bgcolor-white
var(--color-white)

Form Elements

Buttons

Learn More

Button

Input type="button"

Input type="submit"

Input type="reset"

Inputs

Text:

Password:

Text Area:

Text with different states:

Select (Dropdown)

Select (Multiple):

Radio:
Radio Value 1 Radio Value 2 Radio Value 3

Checkbox:
Checkbox Value 1 Checkbox Value 2 Checkbox Value 3

Datalist:
Don't know if this is even used.

Date: Month: Week: Time: DateTime-Local:

Range:

Color:

File:

Elements (v2)

These are the default stylings for Cornerstone elements.

Accordion

Alert

This is where the content for your alert goes. Best to keep it short and sweet! This is where the content for your alert goes. Best to keep it short and sweet and short and sweet and short and sweet!

Audio

Breadcrumbs

Button

Primary Text

Primary TextSecondary Text

Content Area Dropdown

Content Area Modal

Content Area Off Canvas

Counter

We've pushed over

0

pixels to make this website.

Headline

Short and Sweet Headlines are Best!

Image

Line

Map

Navigation Collapsed

Navigation Dropdown

Navigation Inline

Navigation Modal

Quote

You are never too old to set another goal or to dream a new dream.
C.S. Lewis

Search Dropdown

Search Inline

Search Modal

Social

Statbar

86%

Text

Regular text. Input your text here! The text element is intended for longform copy that could potentially include multiple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Leading Paragraph. Input your text here! The text element is intended for longform copy that could potentially include multiple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Split paragraphs but with regular text. Input your text here! The text element is intended for longform copy that could potentially include multiple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Regular text, but the width of this column only goes up to 580px wide. Input your text here! The text element is intended for longform copy that could potentially include multiple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Video

Widget Area

Elements classic

Classic Accordion

Accordion Item 1

Add some content to your accordion item here.

Accordion Item 2