back home

Design
System

Layout
Iconography
Buttons
Cards
Forms
Tabs

The Austin Stone Design System

Layout

Spacing

This section is "invisible" but the div items below each have classes defining margin. This enables these classes to be used globally across any items in the site without changing the base class.

BOTTOM MARGIN

0REM
0.25REM
0.5REM
0.75REM
1REM
1.5REM
2.5REM
4REM
5REM
7.5REM

TOP MARGIN

0REM
0.25REM
0.5REM
0.75REM
1REM
1.5REM
2.5REM
4REM
5REM
7.5REM
-0.5REM

RIGHT MARGIN

0REM
0.25REM
0.5REM
0.75REM
1REM
1.5REM
2.5REM
4REM
5REM
7.5REM
20%
-3REM
-4REM
-5REM
-7.5REM

LEFT MARGIN

0REM
0.25REM
0.5REM
0.75REM
1REM
1.5REM
2.5REM
4REM
5REM
7.5REM
-7.5REM
-3REM
-4REM
-5REM
Banner Content

ALL MARGIN

0REM
0.5REM
1REM
1.5REM
2.5REM
4REM
5REM
7.5REM

ALL PADDING

1REM
1.5REM
2.5REM
5REM

BOTTOM PADDING

0REM
2.5REM
3REM
4REM
5REM
7.5REM

TOP PADDING

0REM
3REM
4REM
5REM
7.5REM

LEFT PADDING

0REM
2.5REM
3REM
4REM
5REM
7.5REM

RIGHT PADDING

0REM
2.5REM
3REM
4REM
5REM
7.5REM

Components

Buttons

Forms

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

Tabs

Tab 1 content

Tab 2 content

Tab 3 content

Fundamentals

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.

Logo mark

logo-primary-mark

Horizontal logo

logo-primary

Horizontal logo

logo-primary

Logo mark

logo-primary-mark

Horizontal logo

logo-primary

Horizontal logo

logo-primary

Colors

Primary

Fill - Brand

Fill - Dark

Fill - Medium

Fill - Light

Fill - White

Fill - Black

Neutral
Secondary
Institute (ASI)

Fill - ASI Primary

Creative (ASW)

Fill - ASW Primary

Counseling (ASC)

Fill - ASC Primary

For The City (FTC)

Fill - FTC Primary

For The Nations (FTN)

Fill - FTN Primary

Recovery

Fill - Recovery Primary

Kids

Fill - Kids Primary

Students

Fill - Students Primary

College

Fill - College Primary

Women

Fill - Women Primary

Men

Fill - Men Primary

Marriage

Fill - Marriage Primary

Typography Dark

t1 L

t1

h1 L

h1 C

h1 R

h1

h2 L

h2 C

h2 R

h2

h3 L

h3 C

h3 R

h3

h4 L

h4 C

h4 R

h4

h5 L
h5 C
h5 R

h5

h6 L
h6 C
h6 R

h6

Primary Body

Primary Body - Center

Primary Body - Right

Primary Footnotes

Secondary Paragraph (p2)

Links

Rich Text Items

  • List item 1
  • List item 2
  • List item 3
  • List item 1
  • List item 2
  • List item 3
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.

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.

Text Elements

Display que velit nisi, pretium ut lacinia in.

Heading 4Rem que velit nisi, pretium ut lacinia in.

Heading 3Rem H1que velit nisi, pretium ut lacinia in.

Heading 1 que velit nisi, pretium ut lacinia in.

Heading 2.7 que velit nisi, pretium ut lacinia in.

Heading 2.4Rem H2 que velit nisi, pretium ut lacinia in.

Heading 2 que velit nisi, pretium ut lacinia in.

Heading 2.2Rem que velit nisi, pretium ut lacinia in.

Heading 2REM que velit nisi, pretium ut lacinia in.

Heading 3 que velit nisi, pretium ut lacinia in.

Heading 1.7Rem H3 que velit nisi, pretium ut lacinia in.

Heading 4 que velit nisi, pretium ut lacinia in que velit nisi, pretium ut lacinia in.

Heading 4 que velit nisi, pretium ut lacinia in que velit nisi, pretium ut lacinia in.

Heading 5

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspeds varius enim.
  2. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspeds varius enim.
  • Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Capitalization

Text / Capitalize/ All Caps

Text / Capitalize / Every Word

Color

Default

Text / Color / Medium

Text / Color / Dark

Text / Color / Light

Text / Color / Blue

Text / Color / Image

Text / Color / White 100

Text / Color / White 70

Weight

Text / Weight / Normal

Text / Weight / Medium

Text / Weight / SemiBold

Text / Weight / Bold

Style

Text / Style / Italicize

Text / Style / Strikethrough

Text / Style / Underline

SECTION + DARK

Section – Dark

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button Text