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
Headings
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXY
1234567890!@#$€%&?()+-="
Body
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXY
1234567890!@#$€%&?()+-="
ABCDEFGHIJKLMNOPQRSTUVWXY
1234567890!@#$€%&?()+-="
Font Weigth
Heagings
Thin
Medium
Regular
Bold
Body
Thin
Medium
Regular
Bold
Headings
H1
I am a H1 heading
H2
I am a H2 heading
H3
I am a H3 heading
H4
I am a H4 heading
H5
I am a H5 heading
H6
I am a H6 heading
Paragraphs
paragraph
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.
Large paragraph
Some times you need to have a big paragraph, for example below your hero section to give context to the heading.
Small paragraph
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
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 herePrimary
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.
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.
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