Expanding Point

Style Guide

This page outlines the current styles and standards for the Expanding Point website.
GRAPHIC ELEMENTS
Icons
Logos
Site images
Typography
Font Style

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXY
1234567890!@#$€%&?()+-="

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXY
1234567890!@#$€%&?()+-="
Font Weigth

Thin

Medium

Regular

Bold

Thin
Medium
Regular
Bold
Headings

I am a H1 heading

I am a H2 heading

I am a H3 heading

I am a H4 heading

I am a H5 heading
I am a H6 heading
Paragraphs

Use the Basic Text element/paragraphs any time that you have a text that more than just a few words, note that paragraphs need to be spaced between themselves clarify when one paragraph ends and another begins.

Select text on canvas to format it. To add headings, paragraphs, and images use the “Rich Text” element.

Some times you need to have a big paragraph, for example below your hero section to give context to the heading.

Some times you want to have smaller text, for example when you mention terms and conditions, you can use this class whenever you need a low hierarchy text.

Rich Text Element

This is a Heading in the Rich Text element.

This is the body text in the Rich Text element.

This is a Blockquote in the Rich Text element

This is a Link in the Rich Text element

Colors
You can customize how colors behave across your website with Automatic.css. this will generate color shades for each color. Changes made in the ACSS dashboard will affect all colors and shades across the site
You can set colors here
Colors & Shades
Transparencies
Primary
Secondary
Action
Accent
Base
Shade
Primary
Secondary
Action
Accent
Base
Shade
Theme Style Colors
Applicable to heading or button "Style" setting only. Create & use global colors through your own custom "Color palette".

Primary

Secondery

Light

Dark

Muted

Info

Success

Warning

Danger

Buttons
Theme Style
SmallMediumLargeExtra LargeIcon Button
Dark ButtonLight ButtonRound ButtonOutline ButtonOutline Icon Button
Automatic.css
Extra SmallSmallMediumLargeXL Button
Dark ButtonLight ButtonOutline ButtonIcon ButtonOutline Icon Button
Spacing
There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
Core Spacing
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Section Padding
Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
XXL
Element Padding
Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.
WIDTHS
There are six values you can use to control element width. They're automatically responsive.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl
BORDER RADIUS
There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL
SHADOWS
There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL